feat(feed): update media rendering to use native components with badges instead of inline tags

src/ui/fishbowl/app.py

@@ -479,14 +479,96 @@ def render_show_html(
     )
 
 
+_FILE_PREFIX = "/file="
+
+
+def _media_local_path(src: str | None, kind: str) -> str | None:
+    """Turn a feed media ``src`` into something a native gr.Image/gr.Audio can load.
+
+    Live refs are ``/file=<abs path>`` — strip the prefix to the real filesystem path
+    (Gradio 5+ serves it under ``/gradio_api/file=`` automatically, so the hand-built
+    ``/file=`` URL the HTML feed used would 404). Offline/stub refs are ``data:`` URIs,
+    which native components can't take directly: decode once to a stable, content-hashed
+    file under the media dir (idempotent across ticks → no churn or flicker). An http(s)
+    URL passes through untouched."""
+    if not src:
+        return None
+    if src.startswith(_FILE_PREFIX):
+        return src[len(_FILE_PREFIX) :]
+    if src.startswith("data:"):
+        return _data_uri_to_file(src, kind)
+    return src
+
+
+def _data_uri_to_file(src: str, kind: str) -> str | None:
+    """Decode a ``data:<mime>;base64,<payload>`` URI to a content-hashed file; path or None."""
+    import base64
+    import hashlib
+
+    from src.media.inference import media_output_dir
+
+    try:
+        header, payload = src.split(",", 1)
+        mime = header[5:].split(";")[0]
+        ext = {
+            "image/png": "png",
+            "image/jpeg": "jpg",
+            "image/webp": "webp",
+            "audio/wav": "wav",
+            "audio/x-wav": "wav",
+            "audio/mpeg": "mp3",
+        }.get(mime, "bin")
+        raw = base64.b64decode(payload)
+        out_dir = media_output_dir() / "_native"
+        out_dir.mkdir(parents=True, exist_ok=True)
+        path = out_dir / f"{kind}-{hashlib.sha1(raw).hexdigest()[:16]}.{ext}"
+        if not path.exists():
+            path.write_bytes(raw)
+        return str(path)
+    except Exception:  # noqa: BLE001 — media is garnish; never break a render
+        return None
+
+
+def _rafters_updates(vm: dict) -> tuple:
+    """Updates for the native "FROM THE RAFTERS" cutaway (box, image, audio, caption).
+
+    Reflects the latest ``commentate`` beat carrying media in the current play-head view —
+    so scrubbing before the first beat hides the box again. Returns four ``gr.update``
+    values aligned to the rafters outputs appended to ``show_outs``."""
+    import html as _html
+
+    latest = None
+    for item in vm.get("feed") or []:
+        if item.get("kind") != "commentate":
+            continue
+        if (item.get("image") or {}).get("src") or (item.get("audio") or {}).get("src"):
+            latest = item  # keep the most recent illustrated/voiced beat
+    if latest is None:
+        return (gr.update(visible=False), gr.update(value=None), gr.update(value=None), gr.update(value=""))
+
+    img_path = _media_local_path((latest.get("image") or {}).get("src"), "img")
+    audio_path = _media_local_path((latest.get("audio") or {}).get("src"), "tts")
+    caption = _html.escape(latest.get("text") or "")
+    cap_html = f'<p class="rafters-cap">{caption}</p>' if caption else ""
+    return (
+        gr.update(visible=True),
+        gr.update(value=img_path),
+        gr.update(value=audio_path),
+        gr.update(value=cap_html),
+    )
+
+
 def _render_at(
     session: FishbowlSession | None, k: int, *, layout: str, mind_reader: bool, thinking: str | None = None
-) -> tuple[str, str, str, str]:
+) -> tuple:
     """Render the Show at play-head *k* (pure prefix view), or empty if no session.
 
+    Returns the four HTML panes (stage, feed, meters, verdict) followed by the four
+    native rafters-cutaway updates (box, image, audio, caption) — aligned to ``show_outs``.
     ``thinking`` (a "who's thinking…" label) overlays the stage while a model call runs."""
     vm = session.snapshot(k) if session is not None else _empty_vm()
-    return render_show_html(vm, layout=layout, mind_reader=mind_reader, thinking=thinking)
+    panes = render_show_html(vm, layout=layout, mind_reader=mind_reader, thinking=thinking)
+    return (*panes, *_rafters_updates(vm))
 
 
 def advance_one_tick(session: FishbowlSession | None, k: int, ticks: int, *, max_auto_ticks: int = _MAX_AUTO_TICKS):
@@ -702,7 +784,19 @@ def _wire(
     feed_out = _h(show_handles, "feed", "feed_html")
     meters_out = _h(show_handles, "meters", "meters_html")
     verdict_out = _h(show_handles, "verdict", "verdict_html")
-    show_outs = [c for c in (stage_out, feed_out, meters_out, verdict_out) if c is not None]
+    # The native "FROM THE RAFTERS" cutaway (box visibility + image + audio + caption),
+    # appended AFTER the four HTML panes so the existing positional pane indices
+    # (verdict == panes[3]) are untouched. _render_at returns matching trailing values;
+    # _pad_values trims to len(show_outs), so a build without these handles still works.
+    rafters_box = _h(show_handles, "rafters_box")
+    rafters_img = _h(show_handles, "rafters_img")
+    rafters_audio = _h(show_handles, "rafters_audio")
+    rafters_cap = _h(show_handles, "rafters_cap")
+    show_outs = [
+        c
+        for c in (stage_out, feed_out, meters_out, verdict_out, rafters_box, rafters_img, rafters_audio, rafters_cap)
+        if c is not None
+    ]
 
     # Transport controls (looked up early so output lists can include the timer + the
     # single Play/Pause hero button — its label travels in the tails so it reverts to

src/ui/fishbowl/assets/styles.css

@@ -754,8 +754,51 @@ footer { display: none !important; }
 .fishbowl .fe.commentate { border: 1px solid var(--ac, var(--cyan)); border-radius: var(--r); padding: 10px 12px; background: var(--glass); box-shadow: 0 0 16px color-mix(in oklab, var(--ac, var(--cyan)) 22%, transparent); }
 .fishbowl .cm-tag { color: var(--ac, var(--cyan)); border-color: color-mix(in oklab, var(--ac, var(--cyan)) 42%, transparent); }
 .fishbowl .cm-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
-.fishbowl .cm-img { display: block; width: 100%; max-width: 360px; border-radius: var(--r); border: 1px solid var(--line); margin: 8px 0 4px; box-shadow: 0 0 20px color-mix(in oklab, var(--ac, var(--cyan)) 18%, transparent); }
-.fishbowl .cm-audio { width: 100%; max-width: 360px; height: 32px; margin-top: 6px; }
+/* The image + audio themselves render in the native "FROM THE RAFTERS" cutaway (see
+   #rafters-box below); the feed card keeps small badges noting a beat carried media. */
+.fishbowl .cm-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
+.fishbowl .cm-badge { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ac, var(--cyan)); padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--ac, var(--cyan)) 40%, transparent); background: color-mix(in oklab, var(--ac, var(--cyan)) 10%, transparent); }
+
+/* ============================================================
+   FROM THE RAFTERS — the heckler's native illustrated + spoken cutaway.
+   Native gr.Image / gr.Audio live OUTSIDE the .fishbowl HTML islands, so these
+   rules are global (the stylesheet is injected app-wide via gr.Blocks(css=...)).
+   A vintage broadcast "now showing" box in the critic's hot magenta (hue 320).
+   ============================================================ */
+#rafters-box {
+  --cm: #ff5cc8;                       /* the heckler's hot magenta */
+  position: relative; margin: 0 0 12px; padding: 11px 11px 9px;
+  border-radius: var(--r-lg, 8px);
+  border: 1px solid color-mix(in oklab, var(--cm) 55%, transparent);
+  background:
+    radial-gradient(130% 90% at 50% -15%, color-mix(in oklab, var(--cm) 20%, transparent), transparent 62%),
+    var(--panel, rgba(8, 26, 33, .9));
+  box-shadow: 0 0 24px color-mix(in oklab, var(--cm) 26%, transparent),
+              inset 0 0 0 1px color-mix(in oklab, var(--cm) 12%, transparent);
+  overflow: hidden; animation: rafters-in .45s ease both;
+}
+@keyframes rafters-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
+#rafters-box::before {            /* a sweeping stage-light bar across the top edge */
+  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cm), transparent); opacity: .85;
+}
+#rafters-box .rafters-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-family: var(--font-display, ui-monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cm); text-shadow: 0 0 10px color-mix(in oklab, var(--cm) 60%, transparent); }
+#rafters-box .rafters-quill { font-size: 13px; }
+#rafters-box .rafters-head::after {     /* blinking "on air" dot */
+  content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%;
+  background: var(--cm); box-shadow: 0 0 9px var(--cm); animation: rafters-blink 1.5s steps(1) infinite;
+}
+@keyframes rafters-blink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .25; } }
+#rafters-box .rafters-img img {
+  width: 100% !important; border-radius: var(--r, 4px) !important;
+  border: 1px solid color-mix(in oklab, var(--cm) 45%, transparent) !important;
+  box-shadow: 0 0 18px color-mix(in oklab, var(--cm) 22%, transparent);
+  animation: rafters-fade .5s ease both;
+}
+@keyframes rafters-fade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
+#rafters-box .rafters-cap { margin: 9px 2px 5px; font-family: var(--font-body, ui-monospace); font-style: italic; font-size: 12.5px; line-height: 1.5; color: var(--ink, #d2f7f0); }
+#rafters-box .rafters-cap::before { content: "\201C"; } #rafters-box .rafters-cap::after { content: "\201D"; }
+#rafters-box .rafters-audio { margin-top: 4px; }
 
 /* ---- meters ---- */
 .fishbowl .meters { margin: 0 14px 14px; padding: 13px 15px; flex: none; display: flex; flex-direction: column; gap: 12px; }

src/ui/fishbowl/render/feed.py

@@ -72,26 +72,26 @@ def _verdict_line(item: dict) -> str:
 
 
 def _commentate_line(item: dict) -> str:
-    """A color-commentary card: a funny line plus an optional image and audio clip.
-
-    Degrades gracefully — with neither image nor audio it is just the tagged line, so a
-    text-only beat (offline before media is wired, or a live media failure) still renders.
-    ``src`` is a ``/file=`` URL or a ``data:`` URI: it is attribute-escaped (``quote=True``),
-    NEVER body-escaped; the caption and ``alt`` are body-escaped."""
+    """A color-commentary card: the critic's funny line, with badges for any media.
+
+    The image and audio themselves render as NATIVE gr.Image / gr.Audio in the "FROM THE
+    RAFTERS" cutaway (app shell), not as inline ``<img>``/``<audio>`` here — in Gradio 5+
+    the static-file route moved to ``/gradio_api/file=``, so the old hand-built ``/file=``
+    tags 404. The feed keeps the text beat plus small ``🎨 illustrated`` / ``🔊 voiced``
+    badges so the transcript still records that a beat carried media; a text-only beat
+    (offline, or a live media failure) renders as just the tagged line."""
     text = html.escape(item.get("text") or "")
+    badges = []
+    if (item.get("image") or {}).get("src"):
+        badges.append('<span class="cm-badge">&#127912; illustrated</span>')
+    if (item.get("audio") or {}).get("src"):
+        badges.append('<span class="cm-badge">&#128266; voiced</span>')
+    badge_html = f'<div class="cm-badges">{"".join(badges)}</div>' if badges else ""
     parts = [
         f'<span class="poke-tag cm-tag">{_QUILL} FROM THE RAFTERS</span>',
         f'<p class="cm-text">{text}</p>',
+        badge_html,
     ]
-    image = item.get("image") or {}
-    if image.get("src"):
-        alt = html.escape(image.get("alt") or "the critic's vision")
-        parts.append(f'<img class="cm-img" src="{html.escape(image["src"], quote=True)}" alt="{alt}" loading="lazy">')
-    audio = item.get("audio") or {}
-    if audio.get("src"):
-        parts.append(
-            f'<audio class="cm-audio" controls preload="none" src="{html.escape(audio["src"], quote=True)}"></audio>'
-        )
     # Wear the critic's own phosphor (its manifest hue), like every other coloured feed line.
     hue = item.get("hue")
     style = f' style="--ac:{agent_color(int(hue))};--acd:{agent_color_dim(int(hue))}"' if hue is not None else ""

src/ui/fishbowl/show.py

@@ -72,6 +72,36 @@ def build_show() -> dict[str, object]:
                     elem_classes=["stage-panel"],
                 )
             with gr.Column(scale=2, min_width=300, elem_classes=["rail"]):
+                # ---- FROM THE RAFTERS : the critic's illustrated, spoken cutaway ----
+                # Native gr.Image / gr.Audio (NOT raw <img>/<audio> in the feed HTML): in
+                # Gradio 5+ the static-file route is /gradio_api/file=, so hand-built
+                # /file= URLs 404. The native components emit the correct URL automatically
+                # and auto-allow the served file. The whole box is hidden until the
+                # rafters-critic lands its first illustrated/voiced beat (app shell toggles
+                # visibility), then shows the latest beat as a broadcast-style cutaway.
+                with gr.Column(visible=False, elem_id="rafters-box", elem_classes=["rafters-box"]) as rafters_box:
+                    gr.HTML(
+                        '<div class="rafters-marquee"><span class="rafters-quill">&#9998;</span>'
+                        " FROM THE RAFTERS</div>",
+                        elem_classes=["rafters-head"],
+                    )
+                    handles["rafters_img"] = gr.Image(
+                        value=None,
+                        interactive=False,
+                        show_label=False,
+                        container=False,
+                        elem_classes=["rafters-img"],
+                    )
+                    handles["rafters_cap"] = gr.HTML("", elem_classes=["rafters-cap-wrap"])
+                    handles["rafters_audio"] = gr.Audio(
+                        value=None,
+                        interactive=False,
+                        show_label=False,
+                        container=False,
+                        elem_classes=["rafters-audio"],
+                    )
+                handles["rafters_box"] = rafters_box
+
                 handles["feed_html"] = gr.HTML(
                     value="<div class='feed scroll' aria-label='narrator feed'></div>",
                     elem_id="feed-html",

tests/test_commentator.py

@@ -136,7 +136,9 @@ class TestFeedCard:
         scenario = default_registry().build_scenario("thousand-token-wood", tools=default_tool_registry())
         return [a.manifest for a in scenario.agents]
 
-    def test_renders_image_and_audio(self):
+    def test_renders_media_badges_not_inline_tags(self):
+        """Media now plays in the native gr.Image/gr.Audio cutaway, so the feed card shows
+        badges — not inline <img>/<audio> (those used a /file= route dead in Gradio 5+)."""
         events = (
             _ev("run.started", "conductor", turn=0, seed="s", goal="g"),
             _ev(
@@ -153,9 +155,11 @@ class TestFeedCard:
         assert "fe commentate" in html
         assert "FROM THE RAFTERS" in html
         assert "bold choice, unionising the mushrooms" in html
-        assert "<img" in html and "cm-img" in html
-        assert "/file=runs/media/r/003-img.png" in html
-        assert "<audio" in html and "cm-audio" in html
+        # Badges note the media; the media itself is rendered by the native cutaway.
+        assert "cm-badge" in html and "illustrated" in html and "voiced" in html
+        # No dead inline media tags / hand-built /file= URLs.
+        assert "<img" not in html and "<audio" not in html
+        assert "/file=" not in html
 
     def test_degrades_to_text_only(self):
         events = (