Fourth UI pass: stats tiles + tame Gradio empty placeholders

Summary tiles
- render_stats_html() formats the run's headline numbers as a grid
of brand-colored tiles (selected patches, groups, sampled frames,
canvas, uniform baseline, saliency, patch grid, codec, elapsed).
- process() now returns a 5th output and the Run button wires it
into a new gr.HTML at the very top of the output column.
- Empty state is itself a tile-styled placeholder so the column
never feels broken.

Empty placeholder polish (fix for 'output area has ugly black frame')
- Drop the redundant ovc-empty placeholder gr.HTMLs that sat above
each output component; they overlapped Gradio's own empty state
and looked duplicated.
- Blanket-override Gradio's dark default backgrounds inside .ovc-card
(.video-container / .image-container / .image-frame / .preview /
.plot-container / video / [data-testid="video"|"image"] / .icon-button
/ .upload-container) so the inner zones are transparent.
- Repaint those wrappers with a soft brand-tinted gradient + dashed
border so the empty shape reads as "nothing here yet" rather than
"broken player".

JSON pane renamed to "Raw JSON" so it does not collide with the new
top-of-column "Run summary" tile card.

app.py

@@ -452,6 +452,41 @@ def pack_canvas(
     return canvas, n
 
 
+def render_stats_html(
+    *, total_selected: int, n_groups: int, gop_label: str,
+    n_sampled: int, total_frames: int, canvas_resolution: str,
+    saliency_signal: str, score_log_scale: bool, elapsed_sec: float,
+    grid_label: str, n_uniform: int, codec: str = "",
+) -> str:
+    """Format the run's headline numbers as a grid of brand-colored tiles."""
+    sig = saliency_signal + (" · log" if score_log_scale else "")
+    gop_disp = (
+        gop_label if gop_label in ("global", "dynamic") else f"GOP={gop_label}"
+    )
+    cells = [
+        ("selected patches",  f"{total_selected:,}"),
+        ("groups",            f"{n_groups} · {gop_disp}"),
+        ("sampled frames",    f"{n_sampled} / {total_frames}"),
+        ("canvas",            canvas_resolution),
+        ("uniform baseline",  f"{n_uniform} frame{'s' if n_uniform != 1 else ''}"),
+        ("saliency",          sig),
+        ("patch grid / frame", grid_label),
+        ("elapsed",           f"{elapsed_sec:.2f}s"),
+    ]
+    if codec:
+        cells.insert(2, ("input codec", codec))
+    parts = ['<div class="ovc-stats">']
+    for label, value in cells:
+        parts.append(
+            f'<div class="ovc-stat">'
+            f'<div class="value">{value}</div>'
+            f'<div class="label">{label}</div>'
+            f'</div>'
+        )
+    parts.append("</div>")
+    return "".join(parts)
+
+
 def make_charts(
     grids: List[np.ndarray],
     masks: List[np.ndarray],
@@ -574,7 +609,7 @@ def process(
     progress=gr.Progress(track_tqdm=False),
 ):
     if not video_path:
-        return None, None, "Please upload a video.", None
+        return None, None, "Please upload a video.", None, EMPTY_STATS
 
     t0 = time.time()
     progress(0.05, desc="Reading metadata")
@@ -584,7 +619,7 @@ def process(
         return None, None, json.dumps(
             {"error": "Could not read frame count.", "metadata": meta},
             indent=2, ensure_ascii=False,
-        ), None
+        ), None, EMPTY_STATS
 
     progress(0.10, desc="Sampling frames")
     fps = float(meta.get("fps") or 0.0)
@@ -614,7 +649,7 @@ def process(
         return None, None, json.dumps(
             {"error": "Failed to decode frames.", "metadata": meta},
             indent=2, ensure_ascii=False,
-        ), None
+        ), None, EMPTY_STATS
 
     progress(0.25, desc="smart_resize")
     resized = [smart_resize(f, int(max_pixels), int(patch_size)) for f in raw]
@@ -729,11 +764,27 @@ def process(
         groups=groups, gop_label=gop_resolved,
     )
 
+    stats_html = render_stats_html(
+        total_selected=int(actual_selected),
+        n_groups=len(groups),
+        gop_label=gop_resolved,
+        n_sampled=len(fids),
+        total_frames=int(total),
+        canvas_resolution=f"{canvas.shape[1]}×{canvas.shape[0]}",
+        saliency_signal=saliency_signal,
+        score_log_scale=bool(score_log_scale),
+        elapsed_sec=round(time.time() - t0, 2),
+        grid_label=f"{hb}×{wb}",
+        n_uniform=int(n_uniform),
+        codec=str(meta.get("codec") or ""),
+    )
+
     progress(1.0, desc="Done")
     return (
         vis_path, canvas_path,
         json.dumps(info, indent=2, ensure_ascii=False),
         chart_fig,
+        stats_html,
     )
 
 
@@ -995,24 +1046,80 @@ CUSTOM_CSS = """
 }
 #ovc-flow .arrow { color: #94a3b8; font-size: 0.95rem; user-select: none; }
 
-/* Empty-state placeholder for outputs */
-.ovc-empty {
-    text-align: center;
-    color: #94a3b8;
-    font-size: 0.88rem;
-    padding: 26px 18px;
-    border: 1px dashed rgba(148,163,184,0.45);
-    border-radius: 12px;
-    background: rgba(148,163,184,0.04);
+/* Tame Gradio's dark default placeholders inside our cards: blanket-override
+   any background on the inner wrappers, then paint a brand-tinted gradient on
+   the canonical containers. This lights up the empty Video/Image/Plot zones
+   so they no longer look like black holes. */
+.ovc-card .video-container,
+.ovc-card .image-container,
+.ovc-card .image-frame,
+.ovc-card .preview,
+.ovc-card .plot-container,
+.ovc-card .empty,
+.ovc-card video,
+.ovc-card [data-testid="video"],
+.ovc-card [data-testid="image"],
+.ovc-card .icon-button,
+.ovc-card .options,
+.ovc-card .source-selection,
+.ovc-card .upload-container {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+.ovc-card .container,
+.ovc-card .wrap,
+.ovc-card .video-container,
+.ovc-card .image-container,
+.ovc-card .plot-container {
+    border-radius: 12px !important;
+}
+.ovc-card .video-container,
+.ovc-card .image-container,
+.ovc-card .plot-container,
+.ovc-card-primary .video-container,
+.ovc-card-primary .image-container,
+.ovc-card-primary .plot-container {
+    background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(6,182,212,0.02)) !important;
+    border: 1px dashed rgba(148,163,184,0.32) !important;
+}
+.ovc-card .gradio-video, .ovc-card .gradio-image, .ovc-card .gradio-plot {
+    border-color: rgba(148,163,184,0.22) !important;
+    background: transparent !important;
+}
+/* Empty placeholder text inside Gradio components */
+.ovc-card .empty, .ovc-card .empty p, .ovc-card .empty span {
+    color: #94a3b8 !important;
 }
-.ovc-empty b { color: #64748b; font-weight: 600; }
-.ovc-empty kbd {
+
+/* Stats tile grid (rendered into a gr.HTML by render_stats_html) */
+.ovc-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 10px;
+}
+.ovc-stat {
+    padding: 12px 14px;
+    border-radius: 14px;
+    background: linear-gradient(135deg, rgba(79,70,229,0.07), rgba(6,182,212,0.04));
+    border: 1px solid rgba(99,102,241,0.18);
+    transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+.ovc-stat:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 18px rgba(79,70,229,0.10);
+}
+.ovc-stat .value {
+    font-size: 1.55rem; font-weight: 800;
     background: var(--ovc-grad);
-    color: #fff;
-    padding: 1px 7px;
-    border-radius: 6px;
-    font-size: 0.78rem;
-    font-family: inherit;
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    word-break: break-word;
+}
+.ovc-stat .label {
+    font-size: 0.74rem; color: #64748b;
+    text-transform: uppercase; letter-spacing: 0.06em;
+    margin-top: 4px;
     font-weight: 600;
 }
 """
@@ -1096,21 +1203,18 @@ FLOW_HTML = """
 </div>
 """
 
-EMPTY_VIS = (
-    '<div class="ovc-empty">'
-    'Upload a video on the left, hit <kbd>Run pipeline</kbd> '
-    '— or click any row in <b>Demo video</b> below to try the bundled clip. '
-    'The selected patches will animate here.'
+EMPTY_STATS = (
+    '<div class="ovc-stats">'
+    '<div class="ovc-stat" style="grid-column: 1 / -1; text-align:center; '
+    'background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(6,182,212,0.03));">'
+    '<div class="value" style="font-size:1.05rem; font-weight:600; '
+    '-webkit-background-clip: initial; background-clip: initial; color: #64748b;">'
+    'Hit <span style="background: var(--ovc-grad); -webkit-background-clip:text; '
+    'background-clip:text; color:transparent;">Run pipeline</span>, '
+    'or pick a row in <i>Demo video</i> below.'
     '</div>'
-)
-EMPTY_CHART = (
-    '<div class="ovc-empty">'
-    'Codec-vs-uniform timeline charts will appear here after a run.'
+    '<div class="label" style="margin-top:6px;">key numbers will land here</div>'
     '</div>'
-)
-EMPTY_CANVAS = (
-    '<div class="ovc-empty">'
-    'The packed canvas (LLaVA-OneVision input) will appear here.'
     '</div>'
 )
 
@@ -1217,9 +1321,12 @@ with gr.Blocks(**_BLOCK_KW) as demo:
 
         # ─── Outputs (wide column) ───────────────────────────────────────
         with gr.Column(scale=6, min_width=420):
+            with gr.Group(elem_classes="ovc-card ovc-card-primary"):
+                gr.Markdown("### Run summary")
+                stats_out = gr.HTML(value=EMPTY_STATS)
+
             with gr.Group(elem_classes="ovc-card ovc-card-primary"):
                 gr.Markdown("### Patch selection visualization")
-                gr.HTML(EMPTY_VIS)
                 vis_out = gr.Video(
                     label="", show_label=False, autoplay=True, height=420,
                 )
@@ -1234,25 +1341,24 @@ with gr.Blocks(**_BLOCK_KW) as demo:
                     "spend the same budget — spread evenly in time, every "
                     "patch in the chosen frames kept.</small>"
                 )
-                gr.HTML(EMPTY_CHART)
                 chart_out = gr.Plot(label="", show_label=False)
 
             with gr.Row():
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="ovc-card"):
                         gr.Markdown("### Packed canvas")
-                        gr.HTML(EMPTY_CANVAS)
                         canvas_out = gr.Image(
                             label="", show_label=False, height=320,
                         )
                 with gr.Column(scale=1):
                     with gr.Group(elem_classes="ovc-card"):
-                        gr.Markdown("### Run summary")
+                        gr.Markdown("### Raw JSON")
                         gr.Markdown(
-                            "<small>The full per-run JSON is collapsed below "
-                            "to keep things tidy. Click to expand.</small>"
+                            "<small>Full reproducible record of this run "
+                            "(params, frame ids, group spans). Collapsed by "
+                            "default — click to expand.</small>"
                         )
-                        with gr.Accordion("Show full run info (JSON)", open=False):
+                        with gr.Accordion("Show full JSON", open=False):
                             info_out = gr.Code(
                                 label="", language="json", lines=18,
                             )
@@ -1326,7 +1432,7 @@ with gr.Blocks(**_BLOCK_KW) as demo:
             saliency_signal, score_log_scale, bitcost_pct, fade_strength,
             gop,
         ],
-        outputs=[vis_out, canvas_out, info_out, chart_out],
+        outputs=[vis_out, canvas_out, info_out, chart_out, stats_out],
     )