@hugpy/video-intelligence-ui 0.1.0

package/src/stations/AddFileBar.tsx

@@ -0,0 +1,59 @@
+// Compact file-intake bar — the single presentation for picking a source in
+// every station. NO drag-drop dropbox: it is just a "Choose …" button (a label
+// wrapping a hidden file input) plus the caller-supplied status / filename /
+// meta line, and an optional Clear affordance. The button still drives the
+// station's existing onPick/upload path — this is presentation only.
+import type { ChangeEvent, ReactNode } from "react";
+
+export function AddFileBar({
+  accept,
+  onFile,
+  buttonLabel,
+  busy = false,
+  onClear,
+  children,
+}: {
+  accept: string;
+  onFile: (file: File) => void;
+  buttonLabel: string;
+  busy?: boolean;
+  /** Optional clear/reset affordance (shown only when provided). */
+  onClear?: () => void;
+  /** Status / filename / meta rendered inline after the button. */
+  children?: ReactNode;
+}) {
+  function onChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) onFile(file);
+    // Reset so re-picking the SAME file re-fires onChange.
+    e.target.value = "";
+  }
+
+  return (
+    <div className="vi-addbar">
+      <label className="vi-btn vi-btn-accent vi-file-label">
+        {buttonLabel}
+        <input
+          type="file"
+          accept={accept}
+          className="vi-file-input"
+          onChange={onChange}
+          disabled={busy}
+        />
+      </label>
+      {children}
+      {onClear && (
+        <button
+          type="button"
+          className="vi-btn vi-btn-sm vi-btn-ghost"
+          onClick={onClear}
+          disabled={busy}
+        >
+          Clear
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default AddFileBar;

package/src/stations/AudioCropStation.tsx

@@ -0,0 +1,157 @@
+// Audio Crop station (Phase 5) — the temporal sibling of the Image Crop station.
+// Flow:
+//   file (audio OR video) → POST /uploads (multipart) → {path}
+//        → POST /video/ingest {path} → MediaRef
+//        → AudioCropCore: (video→audio extract) + TemporalRegionEditor + enqueue
+//          + result grid
+// Every hop goes through request<T>() + config URLs; errors surface via
+// describeAppError.
+//
+// Studio slice 2a: the extract step + region editor + enqueue hook + result grid
+// were extracted VERBATIM into stations/ops/AudioCropCore (the reusable "Components
+// view minus upload"), including the video→audio extract path. This station now owns
+// only the upload/ingest lifecycle + the persistent add-file bar; it renders
+// <AudioCropCore/> in the Components slot. Behaviour is unchanged.
+import { useState } from "react";
+import type { StationSpec } from "./types";
+import { SectionTabs } from "./SectionTabs";
+import { AddFileBar } from "./AddFileBar";
+import { AudioCropCore } from "./ops/AudioCropCore";
+import { request, okValue, errorOf, describeAppError } from "../transport/client";
+import { hugpyConfig } from "../config";
+import { getSessionId } from "../session";
+import {
+  mediaRefSchema,
+  uploadResultSchema,
+  type MediaRef,
+} from "../video/contract";
+
+type Phase = "idle" | "uploading" | "ingesting" | "ready";
+
+const PHASE_LABEL: Record<Phase, string> = {
+  idle: "",
+  uploading: "Uploading…",
+  ingesting: "Ingesting…",
+  ready: "",
+};
+
+export function AudioCropStation({ spec }: { spec: StationSpec }) {
+  const [source, setSource] = useState<MediaRef | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  const busy = phase === "uploading" || phase === "ingesting";
+
+  // Clear the loaded source back to the empty state. AudioCropCore resets its queued
+  // clips + extract + tracker rows when the source reference changes (here → null).
+  function clearSource() {
+    setSource(null);
+    setFileName(null);
+    setError(null);
+  }
+
+  async function onPick(file: File) {
+    setError(null);
+    setFileName(file.name);
+    setSource(null);
+    setPhase("uploading");
+
+    // (a) multipart upload — field `file` + field `sid`. No Content-Type header:
+    // the browser sets the multipart boundary itself.
+    const fd = new FormData();
+    fd.append("file", file);
+    fd.append("sid", getSessionId());
+    const up = await request<unknown>(hugpyConfig.uploadUrl, {
+      method: "POST",
+      body: fd,
+      meta: { specKey: "audio-crop", operation: "upload" },
+    });
+    if (!up.ok) {
+      setError(describeAppError(errorOf(up)));
+      setPhase("idle");
+      return;
+    }
+    const upParsed = uploadResultSchema.safeParse(okValue(up));
+    if (!upParsed.success) {
+      setError("Malformed upload response.");
+      setPhase("idle");
+      return;
+    }
+
+    // (b) ingest the server path into a typed MediaRef.
+    setPhase("ingesting");
+    const ing = await request<unknown>(hugpyConfig.videoIngestUrl, {
+      method: "POST",
+      body: JSON.stringify({ path: upParsed.data.path }),
+      headers: { "Content-Type": "application/json" },
+      meta: { specKey: "audio-crop", operation: "ingest" },
+    });
+    if (!ing.ok) {
+      setError(describeAppError(errorOf(ing)));
+      setPhase("idle");
+      return;
+    }
+    const media = mediaRefSchema.safeParse(okValue(ing));
+    if (!media.success) {
+      setError("Malformed ingest response.");
+      setPhase("idle");
+      return;
+    }
+    if (media.data.kind !== "audio" && media.data.kind !== "video") {
+      setError(
+        `Ingested asset is "${media.data.kind}", not audio or video — use the Image Crop station for that.`,
+      );
+      setPhase("idle");
+      return;
+    }
+    setSource(media.data);
+    setPhase("ready");
+    // A video's audio track is pulled out by AudioCropCore once the source lands.
+  }
+
+  const isVideo = source?.kind === "video";
+
+  return (
+    <section className="station-card station-wide">
+      {/* Same shared section framing as Frames/Generate, but with NO Options
+          panel — the crop params live inline in the Components view below the
+          waveform, so no [Components|Options] toggle / rail renders. */}
+      <SectionTabs
+        ariaLabel="Audio crop station"
+        addFile={
+          <>
+            {/* ONE compact add control — a Choose button + filename, no dropbox.
+                Accepts audio OR video; onPick routes a video through the
+                audio_extract chain before cropping. */}
+            <AddFileBar
+              accept="audio/*,video/*"
+              onFile={onPick}
+              busy={busy}
+              buttonLabel={source ? "Choose another file" : "Choose audio or video"}
+              onClear={source && !busy ? clearSource : undefined}
+            >
+              {busy && <span className="vi-crop-status">{PHASE_LABEL[phase]}</span>}
+              {!busy && source && (
+                <>
+                  {fileName && (
+                    <span className="vi-addbar-name" title={fileName}>
+                      {fileName}
+                    </span>
+                  )}
+                  <span className="vi-crop-meta">
+                    <code>{source.mime}</code>
+                    {source.duration_s != null ? ` · ${source.duration_s}s` : ""}
+                    {isVideo ? " · video (extracting audio)" : ""}
+                  </span>
+                </>
+              )}
+            </AddFileBar>
+            {error && <p className="vi-error" role="alert">{error}</p>}
+          </>
+        }
+        components={<AudioCropCore source={source} multiRegion />}
+      />
+    </section>
+  );
+}

package/src/stations/ComfyPanel.tsx

@@ -0,0 +1,210 @@
+// ComfyPanel — ComfyUI in the shared expand-into-the-screen drawer, reachable
+// from EVERY station without spending a slot in the studio tab strip (operator
+// ask 2026-08-04: "have comfy UI as an overlay the same as console is in the
+// left column").
+//
+// Since 2026-08-06 this file contributes ONE TAB to the single unified drawer
+// (drawerShell.tsx → WorkbenchDrawer.tsx) rather than rendering a drawer of its
+// own — so "the same as console" is now literally the same window. (Until
+// 2026-08-04 that shell was copied into this file verbatim; then it was shared;
+// now there is one instance of it.) Only the endpoint bar, the message strips
+// and the frame below are Comfy-specific.
+//
+// ── WHERE IT DELIBERATELY DIFFERS FROM ConsolePanel (read before editing) ────
+// ConsolePanel frames FIRST-PARTY, SAME-ORIGIN, FIXED-href content ("/console"),
+// and is deliberately UNSANDBOXED because a sandbox without `allow-modals` would
+// silently break the console's confirm()/alert() flows. Its header comment
+// explicitly contrasts itself with "ComfyStation's user-supplied URL".
+//
+// This panel is that contrasting case. The ComfyUI endpoint is USER-EDITABLE and
+// PERSISTED, i.e. attacker-influenceable and foreign-origin. So:
+//   * every value passes sanitizeEmbedUrl() (http/https only) before it can ever
+//     reach iframe src — typed input AND the value rehydrated from storage;
+//   * the frame KEEPS its sandbox (COMFY_SANDBOX).
+// Do NOT "simplify" this by copying ConsolePanel's unsandboxed iframe: that
+// would hand a user-supplied foreign origin full same-origin-ish reign over this
+// page. The shared gate lives in comfyEmbed.ts precisely so the two cannot drift.
+// Sharing ONE drawer window with the console tab does not blur this: the two are
+// distinct <iframe> elements rendered side by side (one hidden), each with its
+// own sandbox attribute — never a single frame whose src is swapped.
+//
+// ── WHY THE FRAME MAY STILL BE BLANK (not this component's bug) ─────────────
+// The video UI is HTTPS, so an http:// or loopback endpoint is blocked as mixed
+// content with NO error, and any endpoint must also permit framing from this
+// origin (`frame-ancestors`, no `X-Frame-Options: DENY`). Both cases are warned
+// about inline, and "Open in new tab" always works regardless.
+import { useState, type FormEvent } from "react";
+import { hugpyConfig } from "../config";
+import type { DrawerTab } from "./drawerShell";
+import {
+  sanitizeEmbedUrl,
+  embedRisk,
+  COMFY_SANDBOX,
+  COMFY_URL_KEY,
+} from "./comfyEmbed";
+
+// The endpoint URL is session-persisted under the SAME key the station used, so
+// an operator who already configured ComfyUI keeps their endpoint.
+function readPersistedUrl(): string {
+  try {
+    const stored = sessionStorage.getItem(COMFY_URL_KEY);
+    if (stored != null) return stored;
+  } catch {
+    /* storage unavailable — fall back to config default */
+  }
+  return hugpyConfig.comfyUrl;
+}
+
+function persistUrl(value: string): void {
+  try {
+    sessionStorage.setItem(COMFY_URL_KEY, value);
+  } catch {
+    /* best-effort — the in-memory state still drives this session */
+  }
+}
+
+/**
+ * ComfyUI's tab in the unified drawer.
+ *
+ * A HOOK, not a plain descriptor, because this tab owns state (the endpoint
+ * field and the committed value). Hoisting that state to the always-mounted
+ * drawer host — rather than to the frame's own body — is what lets a half-typed
+ * endpoint survive a switch to the Console tab and back.
+ */
+export function useComfyDrawerTab(): DrawerTab<"comfy"> {
+  const [url, setUrl] = useState<string>(() => readPersistedUrl());
+  const [loaded, setLoaded] = useState<string>(() => readPersistedUrl());
+
+  // Diagnose the CURRENT text field (immediate feedback while typing).
+  const inputSanitized = sanitizeEmbedUrl(url);
+  const schemeRejected = url.trim() !== "" && inputSanitized == null;
+  // The iframe only ever sees a sanitized value; null → the empty state.
+  const embedSrc = sanitizeEmbedUrl(loaded);
+  const risk = embedRisk(loaded);
+  const openTarget = embedSrc ?? inputSanitized;
+
+  function onChangeUrl(next: string) {
+    setUrl(next);
+    persistUrl(next);
+  }
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoaded(url); // commit; embedSrc re-derives through sanitizeEmbedUrl()
+  }
+
+  return {
+    id: "comfy",
+    label: "ComfyUI",
+    hint: "Open ComfyUI alongside this station — no tab switch",
+    toggleClassName: "vi-comfy-toggle",
+    toggleLabel: "▤ ComfyUI",
+    ariaLabel: "ComfyUI",
+    panelClassName: "vi-comfy-panel",
+    // Stays in the DOM while another tab shows. This one matters most: a
+    // ComfyUI workspace is a long-lived, unsaved graph — reloading the frame
+    // every time the operator glanced at Active would lose work.
+    keepMounted: true,
+    headerExtra: (
+      /* The endpoint is configurable here because it always was — the station
+         owned this field, and dropping it would strand anyone whose ComfyUI is
+         not at the configured default. It rides in the shared header, so it only
+         appears while THIS tab is selected. */
+      <form className="vi-comfy-panel-url" onSubmit={onSubmit}>
+        <label className="vi-comfy-panel-url-label" htmlFor="vi-comfy-panel-url">
+          Endpoint
+        </label>
+        <input
+          id="vi-comfy-panel-url"
+          className="vi-knob-input vi-comfy-input"
+          type="url"
+          inputMode="url"
+          spellCheck={false}
+          autoComplete="off"
+          placeholder="https://comfy.hugpy.ai"
+          value={url}
+          onChange={(e) => onChangeUrl(e.target.value)}
+          aria-invalid={schemeRejected || undefined}
+        />
+        <button
+          type="submit"
+          className="vi-btn vi-btn-sm vi-btn-accent"
+          disabled={inputSanitized == null}
+        >
+          Load
+        </button>
+      </form>
+    ),
+    headerActions: openTarget ? (
+      <a
+        className="vi-btn vi-btn-sm vi-btn-ghost"
+        href={openTarget}
+        target="_blank"
+        rel="noreferrer"
+        title="Open ComfyUI in its own tab"
+      >
+        Open in new tab ↗
+      </a>
+    ) : (
+      <span
+        className="vi-btn vi-btn-sm vi-btn-ghost vi-comfy-open-disabled"
+        aria-disabled="true"
+      >
+        Open in new tab ↗
+      </span>
+    ),
+    body: (
+      <>
+        {/* Scheme rejected: loud, since this is the security gate — the value
+            never reaches the frame. */}
+        {schemeRejected && (
+          <p className="vi-error vi-comfy-panel-msg" role="alert">
+            That URL isn’t an http:// or https:// address, so it won’t be
+            embedded. Enter a full HTTPS URL (e.g.{" "}
+            <code>https://comfy.hugpy.ai</code>).
+          </p>
+        )}
+
+        {risk && (
+          <p className="vi-comfy-warn vi-comfy-panel-msg" role="alert">
+            {risk === "http" ? (
+              <>
+                This is an <code>http://</code> endpoint. This page is HTTPS, so
+                the browser blocks the frame as mixed content — it stays blank
+                with no error. Use an HTTPS endpoint such as{" "}
+                <code>https://comfy.hugpy.ai</code>, or open it in a new tab.
+              </>
+            ) : (
+              <>
+                This points at a <code>localhost</code> / loopback host, which the
+                browser can’t reach from an HTTPS page. Expose ComfyUI through an
+                HTTPS proxy (e.g. <code>https://comfy.hugpy.ai</code>) instead.
+              </>
+            )}
+          </p>
+        )}
+
+        {embedSrc ? (
+          <iframe
+            className="vi-console-iframe"
+            src={embedSrc}
+            title="ComfyUI"
+            // SANDBOXED on purpose — user-supplied, foreign origin. See the
+            // header note; do not drop this to match ConsolePanel.
+            sandbox={COMFY_SANDBOX}
+            allow="clipboard-read; clipboard-write; fullscreen"
+          />
+        ) : (
+          <div className="vi-comfy-empty vi-comfy-panel-empty">
+            <p className="vi-comfy-empty-title">No endpoint loaded</p>
+            <p className="vi-comfy-empty-sub">
+              Enter your ComfyUI endpoint above and press <strong>Load</strong> to
+              embed it. It must be an HTTPS URL (e.g.{" "}
+              <code>https://comfy.hugpy.ai</code>).
+            </p>
+          </div>
+        )}
+      </>
+    ),
+  };
+}

package/src/stations/ComfyStation.tsx

@@ -0,0 +1,196 @@
+// ComfyUI viewer station — a modular "viewer" station that EMBEDS an external
+// ComfyUI endpoint in an <iframe>, with a user-editable, session-persisted URL.
+// Sibling to the studio stations (Generate / Frames / crops), registered the
+// same way (registry.ts, group:"studio").
+//
+// ── MIXED-CONTENT CONSTRAINT (read before touching the iframe src) ──────────
+// The video UI is served over HTTPS (dev.hugpy.ai/video, llm.hugpy.ai/app/video).
+// A page loaded over https:// CANNOT embed an http:// (or http://127.0.0.1:8188)
+// resource — the browser silently blocks the mixed-content subframe and the user
+// sees a blank frame with NO error. So the endpoint MUST be reached over HTTPS
+// (e.g. https://comfy.hugpy.ai). This component detects http:// / localhost /
+// 127.0.0.1 targets and warns that an HTTPS page will refuse to embed them.
+//
+// ── FRAME-ANCESTORS (proxy-side) ────────────────────────────────────────────
+// Even over HTTPS, the endpoint must permit framing FROM the video-UI origin:
+// the comfy.hugpy.ai proxy has to send `Content-Security-Policy: frame-ancestors`
+// listing the video-UI origin (and must NOT send `X-Frame-Options: DENY`).
+// ComfyUI itself has no auth — keep TLS + any auth at the proxy, not in this arm.
+//
+// ── SECURITY (scheme allowlist) ─────────────────────────────────────────────
+// The URL is user-editable AND persisted, so a hostile/typo value could carry a
+// `javascript:` / `data:` / `blob:` / `file:` scheme. We NEVER hand an unsanitized
+// value to iframe src: sanitizeEmbedUrl() parses with `new URL()` and returns the
+// href ONLY for http:/https:, else null — enforced on typed input AND on the
+// value rehydrated from sessionStorage.
+//
+// That gate (and the sandbox token list, and the storage key) now live in
+// ./comfyEmbed so this station and the ComfyPanel overlay share EXACTLY one
+// implementation. A second, subtly-weaker copy is how a `javascript:` URL
+// eventually reaches an iframe — do not re-inline them here.
+//
+// ── THIS STATION IS NO LONGER IN THE TAB STRIP (2026-08-04) ────────────────
+// ComfyUI is reached from the sidebar overlay (ComfyPanel) now. The station is
+// kept, `navHidden`, so an existing /comfy bookmark still resolves instead of
+// bouncing to the default tab.
+import { useState, type FormEvent } from "react";
+import type { StationSpec } from "./types";
+import { hugpyConfig } from "../config";
+import {
+  sanitizeEmbedUrl,
+  embedRisk,
+  COMFY_SANDBOX,
+  COMFY_URL_KEY as URL_KEY,
+} from "./comfyEmbed";
+
+export { sanitizeEmbedUrl } from "./comfyEmbed";
+
+// Read the persisted URL, falling back to the configured default (which itself
+// defaults to "" — no secret is baked in). Best-effort: storage may be unavailable.
+function readPersistedUrl(): string {
+  try {
+    const stored = sessionStorage.getItem(URL_KEY);
+    if (stored != null) return stored;
+  } catch {
+    /* storage unavailable — fall back to config default */
+  }
+  return hugpyConfig.comfyUrl;
+}
+
+function persistUrl(value: string): void {
+  try {
+    sessionStorage.setItem(URL_KEY, value);
+  } catch {
+    /* best-effort — the in-memory state still drives this session */
+  }
+}
+
+export function ComfyStation({ spec }: { spec: StationSpec }) {
+  // `url` is the editable text field (persisted every keystroke). `loaded` is the
+  // value actually committed to the iframe — updated on submit and initialized to
+  // the persisted/default URL so a valid saved endpoint re-embeds on reload.
+  const [url, setUrl] = useState<string>(() => readPersistedUrl());
+  const [loaded, setLoaded] = useState<string>(() => readPersistedUrl());
+
+  // Diagnose the CURRENT text field (immediate feedback while typing).
+  const inputSanitized = sanitizeEmbedUrl(url);
+  const schemeRejected = url.trim() !== "" && inputSanitized == null;
+
+  // The iframe only ever sees a sanitized value; null → render the empty state.
+  const embedSrc = sanitizeEmbedUrl(loaded);
+  const risk = embedRisk(loaded);
+  // Best target for the always-available "Open in new tab" affordance: the loaded
+  // endpoint if valid, else whatever the user has currently typed (if valid).
+  const openTarget = embedSrc ?? inputSanitized;
+  const pageIsHttps =
+    typeof window !== "undefined" && window.location.protocol === "https:";
+
+  function onChange(next: string) {
+    setUrl(next);
+    persistUrl(next);
+  }
+
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoaded(url); // commit; embedSrc re-derives through sanitizeEmbedUrl()
+  }
+
+  return (
+    <section className="station-wide vi-comfy" aria-label="ComfyUI viewer">
+      <form className="vi-comfy-bar" onSubmit={onSubmit}>
+        <label className="vi-comfy-field">
+          <span className="vi-comfy-label">ComfyUI endpoint URL</span>
+          <input
+            className="vi-knob-input vi-comfy-input"
+            type="url"
+            inputMode="url"
+            spellCheck={false}
+            autoComplete="off"
+            placeholder="https://comfy.hugpy.ai"
+            value={url}
+            onChange={(e) => onChange(e.target.value)}
+            aria-invalid={schemeRejected || undefined}
+          />
+        </label>
+        <div className="vi-comfy-bar-actions">
+          <button type="submit" className="vi-btn vi-btn-accent" disabled={inputSanitized == null}>
+            Load
+          </button>
+          {/* Always available: lets the user reach ComfyUI directly even when the
+              frame is blocked (mixed content) or refuses embedding (X-Frame-Options). */}
+          {openTarget ? (
+            <a className="vi-btn vi-btn-ghost" href={openTarget} target="_blank" rel="noreferrer">
+              Open in new tab ↗
+            </a>
+          ) : (
+            <span className="vi-btn vi-btn-ghost vi-comfy-open-disabled" aria-disabled="true">
+              Open in new tab ↗
+            </span>
+          )}
+        </div>
+      </form>
+
+      {/* Scheme rejected (javascript:/data:/blob:/file:/relative/…): explicit and
+          loud, since this is the security gate — the value never reaches the frame. */}
+      {schemeRejected && (
+        <p className="vi-error" role="alert">
+          That URL isn’t an http:// or https:// address, so it won’t be embedded. Enter
+          a full HTTPS URL (e.g. <code>https://comfy.hugpy.ai</code>).
+        </p>
+      )}
+
+      {/* Mixed-content / loopback warning: an HTTPS page can’t frame these. */}
+      {risk && (
+        <p className="vi-comfy-warn" role="alert">
+          {risk === "http" ? (
+            <>
+              This is an <code>http://</code> endpoint.{" "}
+              {pageIsHttps
+                ? "This page is HTTPS, so the browser blocks the frame as mixed content — it stays blank with no error."
+                : "On the deployed HTTPS site (dev.hugpy.ai/video, llm.hugpy.ai/app/video) the browser will block this frame as mixed content."}{" "}
+              Use an HTTPS endpoint such as <code>https://comfy.hugpy.ai</code>, or open it
+              in a new tab.
+            </>
+          ) : (
+            <>
+              This points at a <code>localhost</code> / loopback host, which the browser
+              can’t reach from an HTTPS page and won’t serve over TLS. Expose ComfyUI
+              through an HTTPS proxy (e.g. <code>https://comfy.hugpy.ai</code>) instead.
+            </>
+          )}
+        </p>
+      )}
+
+      {embedSrc ? (
+        <div className="vi-comfy-frame">
+          <iframe
+            className="vi-comfy-iframe"
+            src={embedSrc}
+            title="ComfyUI"
+            // Permissive on purpose: ComfyUI is a trusted internal tool that needs
+            // scripts, same-origin, forms, downloads and popups to function. Shared
+            // with ComfyPanel so the two frames can never diverge on sandboxing.
+            sandbox={COMFY_SANDBOX}
+            allow="clipboard-read; clipboard-write; fullscreen"
+          />
+        </div>
+      ) : (
+        <div className="vi-comfy-empty">
+          <p className="vi-comfy-empty-title">No endpoint loaded</p>
+          <p className="vi-comfy-empty-sub">
+            Enter your ComfyUI endpoint above and press <strong>Load</strong> to embed it.
+            It must be an HTTPS URL (e.g. <code>https://comfy.hugpy.ai</code>).
+          </p>
+        </div>
+      )}
+
+      {embedSrc && (
+        <p className="vi-comfy-hint">
+          If the frame stays blank, the endpoint is likely refusing to be embedded
+          (<code>X-Frame-Options</code> / missing <code>frame-ancestors</code>). Open it in
+          a new tab instead — the “Open in new tab” link above works regardless.
+        </p>
+      )}
+    </section>
+  );
+}