Upload folder using huggingface_hub

demo/ui.py

@@ -755,6 +755,101 @@ footer, .gradio-container footer { display: none !important; }
     opacity: 0.6;
 }
 
+/* Turn card — one per REPL step. Clearly demarcates Action vs Output */
+.gradio-container .lf-turn {
+    background: var(--lf-surface);
+    border: 1px solid var(--lf-border);
+    border-radius: 10px;
+    padding: 0.9rem 1rem;
+    margin: 0.85rem 0;
+    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
+}
+.gradio-container .lf-turn-head {
+    display: flex; align-items: center; gap: 0.55rem;
+    margin-bottom: 0.7rem;
+    padding-bottom: 0.55rem;
+    border-bottom: 1px dashed var(--lf-border-soft);
+}
+.gradio-container .lf-turn-num {
+    font-family: "Source Serif 4", Georgia, serif;
+    font-weight: 600;
+    font-size: 0.98rem;
+    color: var(--lf-text);
+    letter-spacing: -0.01em;
+}
+.gradio-container .lf-turn-meta {
+    margin-left: auto;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.76rem;
+    color: var(--lf-text-subtle);
+}
+.gradio-container .lf-turn-meta b {
+    color: var(--lf-text);
+    font-weight: 600;
+}
+.gradio-container .lf-turn-row {
+    display: grid;
+    grid-template-columns: 70px 1fr;
+    align-items: baseline;
+    gap: 0.75rem;
+    padding: 0.25rem 0;
+}
+.gradio-container .lf-section-label {
+    font-family: "Inter", sans-serif;
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--lf-text-subtle);
+    padding-top: 0.15rem;
+}
+.gradio-container .lf-section-content {
+    color: var(--lf-text);
+    font-size: 0.9rem;
+    line-height: 1.55;
+    font-family: "Inter", sans-serif;
+}
+.gradio-container .lf-section-content code {
+    font-size: 0.82em !important;
+}
+.gradio-container .lf-section-content b {
+    color: var(--lf-text);
+    font-weight: 600;
+}
+
+/* Status chips inside the Output row */
+.gradio-container .lf-status {
+    display: inline-block;
+    padding: 0.05rem 0.45rem;
+    border-radius: 4px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    border: 1px solid;
+    background: transparent;
+    margin-right: 0.15rem;
+}
+.gradio-container .lf-status-good {
+    color: #7ab68c;
+    border-color: rgba(122,182,140,0.4);
+    background: rgba(122,182,140,0.08);
+}
+.gradio-container .lf-status-warn {
+    color: #e4b264;
+    border-color: rgba(228,178,100,0.4);
+    background: rgba(228,178,100,0.08);
+}
+.gradio-container .lf-status-bad {
+    color: #d47d6a;
+    border-color: rgba(212,125,106,0.4);
+    background: rgba(212,125,106,0.08);
+}
+
+/* Code fence that follows a turn card — tighten top margin */
+.gradio-container .lf-turn + pre,
+.gradio-container .prose pre:has(+ .lf-turn) {
+    margin-top: -0.5rem !important;
+}
+
 /* Main pane plots+outputs */
 .gradio-container .gr-plot, .gradio-container .plot-wrap {
     background: var(--lf-surface-alt) !important;
@@ -1383,41 +1478,62 @@ def _llm_auto_run(endpoint_choice, custom_url, api_key, model_name,
         else:
             action_str = "commit"
 
-        # Pretty last-result line
+        # Build a self-contained "turn card" with explicit Action / Output
+        # demarcation. Rendered as HTML so we control the structure.
+        kind_chip = (f"<span class='lf-chip lf-chip-{action.kind}'>"
+                     f"{action.kind}</span>")
+        # Output status badges — colored chips + key/value pairs.
+        output_badges: list[str] = []
         lar = obs.last_action_result or {}
-        feedback = lar.get("feedback")
-        pretty = []
-        if "compile_error" in lar and lar["compile_error"]:
-            pretty.append(f"❌ compile error")
-        if "summary" in lar and lar.get("summary"):
+        if lar.get("compile_error"):
+            output_badges.append(
+                "<span class='lf-status lf-status-bad'>compile error</span>")
+        if lar.get("summary"):
             s = lar["summary"]
-            if s.get("converged"): pretty.append("✅ auto-test converged")
-            elif s.get("diverged"): pretty.append("⚠ auto-test diverged")
+            if s.get("converged"):
+                output_badges.append(
+                    "<span class='lf-status lf-status-good'>auto-test converged</span>")
+            elif s.get("diverged"):
+                output_badges.append(
+                    "<span class='lf-status lf-status-warn'>auto-test diverged</span>")
             if s.get("final_f") is not None:
-                pretty.append(f"final_f={s['final_f']:.3g}")
-        if feedback:
-            for k, v in feedback.items():
-                pretty.append(f"{k}={v:+.3f}")
-        if "final_f" in lar and action.kind == "run_baseline":
-            pretty.append(f"final_f={lar['final_f']:.3g}")
-        result_hint = "  ·  ".join(pretty) if pretty else "ok"
-
-        # Build the turn header. Using a span-with-class instead of inline
-        # backticks so the action kind doesn't render as a sienna pill.
-        kind_chip = (f"<span class='lf-chip lf-chip-{action.kind}'>"
-                     f"{action.kind}</span>")
-        log_lines.extend([
-            f"",
-            f"<hr class='lf-hr-soft' />",
-            f"**Turn {turn}** · {kind_chip} · {dt:.1f}s · "
-            f"budget **{obs.budget_remaining}**  ",
-            f"→ {action_str}  ",
-            f"↳ {result_hint}",
-            f"",   # blank line before fence — critical for markdown parsing
-        ])
+                output_badges.append(
+                    f"<code>final_f</code> = <b>{s['final_f']:.3g}</b>")
+        if action.kind == "run_baseline" and lar.get("final_f") is not None:
+            output_badges.append(
+                f"<code>final_f</code> = <b>{lar['final_f']:.3g}</b>")
+        fb = lar.get("feedback") or {}
+        for k, v in fb.items():
+            cls = "lf-status-good" if v >= 0 else "lf-status-warn"
+            output_badges.append(
+                f"<span class='lf-status {cls}'><code>{k}</code> "
+                f"<b>{v:+.3f}</b></span>")
+
+        output_html = " · ".join(output_badges) if output_badges else "ok"
+
+        turn_html = (
+            f"<div class='lf-turn'>"
+            f"  <div class='lf-turn-head'>"
+            f"    <span class='lf-turn-num'>Turn {turn}</span>"
+            f"    {kind_chip}"
+            f"    <span class='lf-turn-meta'>{dt:.1f}s · budget "
+            f"<b>{obs.budget_remaining}</b></span>"
+            f"  </div>"
+            f"  <div class='lf-turn-row'>"
+            f"    <div class='lf-section-label'>Action</div>"
+            f"    <div class='lf-section-content'>{action_str}</div>"
+            f"  </div>"
+            f"  <div class='lf-turn-row'>"
+            f"    <div class='lf-section-label'>Output</div>"
+            f"    <div class='lf-section-content'>{output_html}</div>"
+            f"  </div>"
+            f"</div>"
+        )
+        log_lines.extend([f"", turn_html, f""])
+
         if action.kind == "draft" and action.code:
             log_lines.append(f"```python\n{action.code.strip()}\n```")
-            log_lines.append(f"")   # blank line after
+            log_lines.append(f"")
 
         yield ("\n".join(log_lines), obs.model_dump(exclude_none=True), None)