@hyperframes/studio 0.7.60 → 0.7.62

package/src/components/storyboard/StoryboardFrameFocus.tsx

@@ -1,11 +1,16 @@
 import { useCallback, useEffect, useState } from "react";
-import { setFrameStatus, setFrameVoiceover, type FrameStatus } from "@hyperframes/core/storyboard";
+import { setFrameVoiceover } from "@hyperframes/core/storyboard";
 import type { StoryboardFrameView } from "../../hooks/useStoryboard";
 import { useFileManagerContext } from "../../contexts/FileManagerContext";
 import { useViewMode } from "../../contexts/ViewModeContext";
 import { Button } from "../ui/Button";
 import { FramePoster, posterTime } from "./FramePoster";
-import { FRAME_STATUS_META, FRAME_STATUS_ORDER } from "./frameStatus";
+import {
+  AgentChatMessageButton,
+  APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+} from "./AgentChatMessageButton";
+import { FRAME_STATUS_META } from "./frameStatus";
+import type { CommentsSubmitState } from "./useFrameComments";
 
 export interface StoryboardFrameFocusProps {
   projectId: string;
@@ -19,13 +24,26 @@ export interface StoryboardFrameFocusProps {
   onSaved: () => void;
   /** Select a composition in the timeline (sets active comp + editing file + sidebar highlight). */
   onSelectComposition: (path: string) => void;
+  /** Whether SCRIPT.md exists and owns final narration/TTS. */
+  scriptExists: boolean;
+  /** Shared board draft for this frame, preserved when entering/leaving focus. */
+  commentDraft: string;
+  onCommentDraftChange: (text: string) => void;
+  pendingComment: string | null;
+  pendingCommentCount: number;
+  commentDraftCount: number;
+  commentsSubmitState: CommentsSubmitState;
+  commentsSubmitError: string | null;
+  feedbackMessageCopied: boolean;
+  onFeedbackMessageCopied: () => void;
+  onSaveFeedback: () => void;
   /** Project signature the board was loaded with (busts the poster cache). */
   posterVersion?: string;
 }
 
 /**
  * Full-area focus on a single frame: large poster, editable voiceover guide,
- * status advancement, full narrative, and a jump into the live preview. Edits
+ * review feedback, full narrative, and a jump into the live preview. Edits
  * are written back to STORYBOARD.md in place (markdown stays canonical).
  *
  * Mounted with a `key` per frame, so `draft` initializes from the frame and a
@@ -41,25 +59,39 @@ export function StoryboardFrameFocus({
   onNavigate,
   onSaved,
   onSelectComposition,
+  scriptExists,
+  commentDraft,
+  onCommentDraftChange,
+  pendingComment,
+  pendingCommentCount,
+  commentDraftCount,
+  commentsSubmitState,
+  commentsSubmitError,
+  feedbackMessageCopied,
+  onFeedbackMessageCopied,
+  onSaveFeedback,
   posterVersion,
 }: StoryboardFrameFocusProps) {
   const { readProjectFile, writeProjectFile } = useFileManagerContext();
-  const { setViewMode } = useViewMode();
+  const { setViewMode, registerViewModeGuard } = useViewMode();
   const [draft, setDraft] = useState(frame.voiceover ?? "");
+  const [savedVoiceover, setSavedVoiceover] = useState(frame.voiceover ?? "");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const applyEdit = useCallback(
     async (edit: (source: string) => string) => {
-      if (busy) return; // one read-modify-write at a time; avoids a lost update
+      if (busy) return false; // one read-modify-write at a time; avoids a lost update
       setBusy(true);
       setError(null);
       try {
         const source = await readProjectFile(storyboardPath);
         await writeProjectFile(storyboardPath, edit(source));
         onSaved();
+        return true;
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : "failed to save");
+        return false;
       } finally {
         setBusy(false);
       }
@@ -68,11 +100,12 @@ export function StoryboardFrameFocus({
   );
 
   const title = frame.title ?? `Frame ${frame.index}`;
-  const dirty = draft !== (frame.voiceover ?? "");
-  const canOpenPreview = frame.srcExists && Boolean(frame.src);
+  const dirty = draft !== savedVoiceover;
+  const canOpenPreview = frame.status !== "outline" && frame.srcExists && Boolean(frame.src);
 
-  const saveVoiceover = useCallback(() => {
-    return applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
+  const saveVoiceover = useCallback(async () => {
+    const saved = await applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
+    if (saved) setSavedVoiceover(draft);
   }, [applyEdit, frame.index, draft]);
 
   // Closing the tab with a dirty voiceover would lose it silently — same
@@ -90,7 +123,12 @@ export function StoryboardFrameFocus({
   // dirty. An in-flight save does NOT count as safe: if it fails after unmount
   // the error lands on an unmounted component and the draft is silently lost,
   // so keep confirming until the save actually lands (dirty clears on success).
-  const confirmLeave = () => !dirty || window.confirm("Discard unsaved voiceover changes?");
+  const confirmLeave = useCallback(
+    () => !dirty || window.confirm("Discard unsaved voiceover changes?"),
+    [dirty],
+  );
+  useEffect(() => registerViewModeGuard(confirmLeave), [confirmLeave, registerViewModeGuard]);
+
   const handleBack = () => {
     if (confirmLeave()) onBack();
   };
@@ -113,12 +151,12 @@ export function StoryboardFrameFocus({
   });
 
   const openInPreview = () => {
+    if (!setViewMode("timeline")) return;
     if (frame.src) onSelectComposition(frame.src);
-    setViewMode("timeline");
   };
 
   return (
-    <div className="flex flex-1 min-h-0 flex-col bg-neutral-950 text-neutral-200">
+    <div className="flex w-full max-w-[100vw] flex-1 min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 text-neutral-200">
       <div className="flex items-center gap-3 border-b border-neutral-800 px-4 py-2">
         <button
           type="button"
@@ -127,10 +165,10 @@ export function StoryboardFrameFocus({
         >
           ← Board
         </button>
-        <span className="text-sm font-medium text-neutral-200">
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-neutral-200">
           Frame {frame.number ?? frame.index} — {title}
         </span>
-        <div className="ml-auto flex items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1">
           <NavButton
             label="‹ Prev"
             disabled={frame.index <= 1}
@@ -144,8 +182,41 @@ export function StoryboardFrameFocus({
         </div>
       </div>
 
-      <div className="flex flex-1 min-h-0">
-        <div className="flex w-3/5 min-w-0 items-center justify-center bg-neutral-900/40 p-8">
+      {(commentDraftCount > 0 || pendingCommentCount > 0) && (
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-800 bg-neutral-900/80 px-4 py-2">
+          <div>
+            <div className="text-xs font-medium text-neutral-200">
+              {commentDraftCount > 0 ? "Feedback ready to save" : "Feedback saved"}
+            </div>
+            <div className="text-[11px] text-neutral-500">
+              {commentDraftCount > 0
+                ? "Save this batch and copy the message for your agent."
+                : feedbackMessageCopied
+                  ? "Message copied — paste it in your terminal or IDE agent chat."
+                  : "The agent has not been notified yet."}
+            </div>
+          </div>
+          {commentDraftCount > 0 ? (
+            <Button
+              size="sm"
+              variant="primary"
+              onClick={onSaveFeedback}
+              loading={commentsSubmitState === "saving"}
+            >
+              Save &amp; copy message ({commentDraftCount})
+            </Button>
+          ) : (
+            <AgentChatMessageButton
+              message={APPLY_STORYBOARD_FEEDBACK_MESSAGE}
+              label={feedbackMessageCopied ? "Copy again" : "Copy prompt for agent"}
+              onCopied={onFeedbackMessageCopied}
+            />
+          )}
+        </div>
+      )}
+
+      <div className="flex flex-1 min-h-0 flex-col overflow-auto lg:flex-row lg:overflow-hidden">
+        <div className="flex w-full shrink-0 items-center justify-center bg-neutral-900/40 p-4 sm:p-8 lg:h-full lg:w-3/5">
           <div className="aspect-video w-full max-w-[900px] overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900">
             {canOpenPreview && frame.src ? (
               <FramePoster
@@ -157,19 +228,13 @@ export function StoryboardFrameFocus({
                 posterVersion={posterVersion}
               />
             ) : (
-              <div className="flex h-full w-full items-center justify-center text-sm text-neutral-600">
-                {frame.status === "outline" ? "Not built yet" : "No preview"}
-              </div>
+              <FramePlan frame={frame} />
             )}
           </div>
         </div>
 
-        <div className="w-2/5 min-w-0 space-y-6 overflow-auto border-l border-neutral-800 px-6 py-5">
-          <StatusRow
-            status={frame.status}
-            busy={busy}
-            onSet={(s) => applyEdit((src) => setFrameStatus(src, frame.index, s))}
-          />
+        <div className="w-full shrink-0 space-y-6 border-t border-neutral-800 px-4 py-5 sm:px-6 lg:h-full lg:w-2/5 lg:overflow-auto lg:border-t-0 lg:border-l">
+          <ReadOnlyStatus status={frame.status} />
 
           <div className="flex flex-wrap gap-x-6 gap-y-1 text-[11px] text-neutral-500">
             {frame.duration && <span>Duration {frame.duration}</span>}
@@ -178,7 +243,10 @@ export function StoryboardFrameFocus({
 
           <section>
             <div className="mb-1 flex items-center justify-between">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400">
+              <h3
+                className="text-xs font-semibold uppercase tracking-wider text-neutral-400"
+                title="Storyboard voiceover is a guide; SCRIPT.md is the final TTS source."
+              >
                 🎙 Voiceover <span className="font-normal normal-case text-neutral-600">guide</span>
               </h3>
               <Button
@@ -187,31 +255,70 @@ export function StoryboardFrameFocus({
                 onClick={saveVoiceover}
                 disabled={!dirty}
                 loading={busy}
-                className="bg-emerald-600 text-white enabled:hover:bg-emerald-500 shadow-none"
               >
-                {busy ? "Saving…" : "Save"}
+                {busy ? "Saving…" : "Save voiceover"}
               </Button>
             </div>
             <textarea
               value={draft}
               onChange={(e) => setDraft(e.target.value)}
-              onBlur={() => {
-                // Same autosave paradigm as the status row above — mixed save
-                // models inside one panel taught users the panel autosaves,
-                // then lost their voiceover. Explicit Save stays as the
-                // affordance; blur is the safety net.
-                if (dirty && !busy) void saveVoiceover();
-              }}
               rows={3}
               placeholder="What the narrator says over this frame…"
               className="w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-2 text-sm text-neutral-200 outline-none focus:border-neutral-600"
             />
             <p className="mt-1 text-[11px] text-neutral-600">
-              A draft guide. SCRIPT.md locks the final narration that drives TTS.
+              {dirty
+                ? "Unsaved changes"
+                : scriptExists
+                  ? "Saved. SCRIPT.md drives final TTS."
+                  : "Saved to STORYBOARD.md. This voiceover guides narration for the frame."}
             </p>
             {error && <p className="mt-1 text-[11px] text-red-400">{error}</p>}
           </section>
 
+          <section>
+            <div className="mb-1">
+              <h3 className="text-xs font-semibold uppercase tracking-wider text-neutral-400">
+                Frame feedback
+              </h3>
+            </div>
+            <textarea
+              value={commentDraft}
+              onChange={(e) => onCommentDraftChange(e.target.value)}
+              rows={3}
+              placeholder="Tell your agent what to change in this frame…"
+              aria-label={`Comment on ${title}`}
+              className="w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-2 text-sm text-neutral-200 placeholder:text-neutral-600 outline-none focus:border-sky-700"
+            />
+            {pendingCommentCount > 0 ? (
+              <div className="mt-2 flex flex-wrap items-center justify-between gap-2 rounded-md border border-sky-900/70 bg-sky-950/20 px-2.5 py-2">
+                <p className="text-[11px] text-sky-200">
+                  Paste the agent prompt in your terminal or IDE chat.
+                </p>
+                <AgentChatMessageButton
+                  message={APPLY_STORYBOARD_FEEDBACK_MESSAGE}
+                  onCopied={onFeedbackMessageCopied}
+                />
+              </div>
+            ) : (
+              <p className="mt-1 text-[11px] text-neutral-600">
+                {commentDraftCount > 0
+                  ? "Your change is ready. Save it using the review bar above."
+                  : "Add a change to prepare feedback for the agent."}
+              </p>
+            )}
+            {pendingComment && (
+              <p className="mt-1 text-[11px] text-sky-400/90">
+                <span className="font-medium">Pending:</span> “{pendingComment}”
+              </p>
+            )}
+            {commentsSubmitError && (
+              <p className="mt-1 text-[11px] text-red-400">
+                Couldn’t submit: {commentsSubmitError}
+              </p>
+            )}
+          </section>
+
           {frame.narrative && (
             <section>
               <h3 className="mb-1 text-xs font-semibold uppercase tracking-wider text-neutral-400">
@@ -221,9 +328,15 @@ export function StoryboardFrameFocus({
             </section>
           )}
 
-          <Button size="sm" variant="secondary" onClick={openInPreview} disabled={!canOpenPreview}>
-            Open in Preview →
-          </Button>
+          {canOpenPreview ? (
+            <Button size="sm" variant="secondary" onClick={openInPreview}>
+              Open in Preview →
+            </Button>
+          ) : (
+            <div className="rounded-md border border-neutral-800 bg-neutral-900/60 px-3 py-2 text-xs text-neutral-500">
+              Preview becomes available after your agent builds this frame.
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -251,38 +364,48 @@ function NavButton({
   );
 }
 
-function StatusRow({
-  status,
-  busy,
-  onSet,
-}: {
-  status: FrameStatus;
-  busy: boolean;
-  onSet: (next: FrameStatus) => void;
-}) {
+function ReadOnlyStatus({ status }: { status: StoryboardFrameView["status"] }) {
+  const meta = FRAME_STATUS_META[status];
   return (
     <div className="flex items-center gap-2">
       <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
         Status
       </span>
-      <div className="flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5">
-        {FRAME_STATUS_ORDER.map((option) => (
-          <button
-            key={option}
-            type="button"
-            disabled={busy}
-            aria-pressed={status === option}
-            title={FRAME_STATUS_META[option].tooltip}
-            onClick={() => onSet(option)}
-            className={`rounded px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50 ${
-              status === option
-                ? "bg-neutral-700 text-neutral-100"
-                : "text-neutral-400 hover:text-neutral-200"
-            }`}
-          >
-            {FRAME_STATUS_META[option].label}
-          </button>
-        ))}
+      <span className={`rounded px-2 py-1 text-xs font-medium ${meta.chipClass}`}>
+        {meta.label}
+      </span>
+      <span className="text-[11px] text-neutral-600">Updated by your agent</span>
+    </div>
+  );
+}
+
+// The empty state selects copy from frame status and whichever storyboard fields are available.
+// fallow-ignore-next-line complexity
+function FramePlan({ frame }: { frame: StoryboardFrameView }) {
+  const title = frame.title ?? `Frame ${frame.index}`;
+  const isOutline = frame.status === "outline";
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-[radial-gradient(circle_at_center,_rgba(38,38,38,0.8),_rgba(10,10,10,1))] p-10">
+      <div className="max-w-xl text-center">
+        <span className="rounded-full border border-neutral-700 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
+          {isOutline ? "Planned frame" : "Preview unavailable"}
+        </span>
+        <h2 className="mt-4 text-2xl font-semibold text-neutral-100">{title}</h2>
+        {frame.scene && (
+          <p className="mt-3 text-base leading-relaxed text-neutral-300">{frame.scene}</p>
+        )}
+        {!frame.scene && frame.narrative && (
+          <p className="mt-3 line-clamp-4 text-sm leading-relaxed text-neutral-400">
+            {frame.narrative}
+          </p>
+        )}
+        <p className="mt-5 text-xs text-neutral-600">
+          {isOutline
+            ? "A visual preview will appear when your agent builds the sketch."
+            : frame.src
+              ? `Frame file not found: ${frame.src}`
+              : "This frame does not link to a source file."}
+        </p>
       </div>
     </div>
   );

package/src/components/storyboard/StoryboardLoaded.tsx

@@ -3,10 +3,14 @@ import type { StoryboardResponse } from "../../hooks/useStoryboard";
 import { Button } from "../ui/Button";
 import { StoryboardDirection } from "./StoryboardDirection";
 import { StoryboardGrid } from "./StoryboardGrid";
-import { StoryboardStatusLegend } from "./StoryboardStatusLegend";
 import { StoryboardScriptPanel } from "./StoryboardScriptPanel";
 import { StoryboardSourceEditor, type SourceFile } from "./StoryboardSourceEditor";
 import { StoryboardFrameFocus } from "./StoryboardFrameFocus";
+import { StoryboardReviewGuide } from "./StoryboardReviewGuide";
+import {
+  AgentChatMessageButton,
+  APPLY_STORYBOARD_FEEDBACK_MESSAGE,
+} from "./AgentChatMessageButton";
 import { useFrameComments, type CommentsSubmitState } from "./useFrameComments";
 
 type SubView = "board" | "source";
@@ -35,6 +39,7 @@ export function StoryboardLoaded({
   const [subView, setSubView] = useState<SubView>("board");
   const [sourceDirty, setSourceDirty] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [feedbackMessageCopied, setFeedbackMessageCopied] = useState(false);
   const comments = useFrameComments(data.frames);
   // When the board refreshes off a project change (agent revised frames), the
   // agent has likely consumed the comments file too — re-check so the pending
@@ -43,6 +48,20 @@ export function StoryboardLoaded({
   useEffect(() => {
     void refreshPending();
   }, [data.signature, refreshPending]);
+  useEffect(() => {
+    if (comments.draftCount > 0) setFeedbackMessageCopied(false);
+  }, [comments.draftCount]);
+
+  const saveFeedbackAndCopyMessage = async () => {
+    const saved = await comments.submit();
+    if (!saved) return;
+    try {
+      await navigator.clipboard.writeText(APPLY_STORYBOARD_FEEDBACK_MESSAGE);
+      setFeedbackMessageCopied(true);
+    } catch {
+      setFeedbackMessageCopied(false);
+    }
+  };
   const sourceFiles = useMemo<SourceFile[]>(() => {
     const files: SourceFile[] = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
@@ -82,31 +101,54 @@ export function StoryboardLoaded({
         }
         onSaved={reload}
         onSelectComposition={onSelectComposition}
+        scriptExists={Boolean(data.script?.exists)}
+        commentDraft={comments.drafts[focusedFrame.index] ?? ""}
+        onCommentDraftChange={(text) => comments.setDraft(focusedFrame.index, text)}
+        pendingComment={
+          comments.pending?.find((entry) => entry.frame === focusedFrame.index)?.text ?? null
+        }
+        pendingCommentCount={comments.pending?.length ?? 0}
+        commentDraftCount={comments.draftCount}
+        commentsSubmitState={comments.submitState}
+        commentsSubmitError={comments.submitError}
+        feedbackMessageCopied={feedbackMessageCopied}
+        onFeedbackMessageCopied={() => setFeedbackMessageCopied(true)}
+        onSaveFeedback={() => void saveFeedbackAndCopyMessage()}
         posterVersion={data.signature}
       />
     );
   }
 
   return (
-    <div className="flex flex-1 min-h-0 flex-col bg-neutral-950 text-neutral-200">
-      <div className="flex items-center gap-3 border-b border-neutral-800 px-4 py-2">
+    <div className="flex w-full max-w-[100vw] flex-1 min-h-0 min-w-0 flex-col overflow-hidden bg-neutral-950 text-neutral-200">
+      <div className="flex flex-wrap items-center gap-3 border-b border-neutral-800 px-4 py-2">
         <SubViewToggle value={subView} onChange={changeSubView} />
         {subView === "board" && (
           <CommentsSubmitBar
             draftCount={comments.draftCount}
             pendingCount={comments.pending?.length ?? 0}
             submitState={comments.submitState}
-            onSubmit={() => void comments.submit()}
+            submitError={comments.submitError}
+            messageCopied={feedbackMessageCopied}
+            onSave={() => void saveFeedbackAndCopyMessage()}
+            onMessageCopied={() => setFeedbackMessageCopied(true)}
           />
         )}
       </div>
       {subView === "board" ? (
         <div className="flex-1 min-h-0 overflow-auto">
-          <div className="mx-auto max-w-[1400px] px-8 py-8">
+          <div className="mx-auto max-w-[1400px] px-4 py-5 sm:px-8 sm:py-8">
             <StoryboardDirection globals={data.globals} frameCount={data.frames.length} />
-            <div className="mt-5">
-              <StoryboardStatusLegend />
-            </div>
+            <StoryboardReviewGuide
+              frames={data.frames}
+              draftCount={comments.draftCount}
+              pendingCount={comments.pending?.length ?? 0}
+              onFeedbackMessageCopied={() => setFeedbackMessageCopied(true)}
+            />
+            <StoryboardWarnings
+              warnings={data.warnings}
+              onOpenSource={() => changeSubView("source")}
+            />
             <StoryboardGrid
               projectId={projectId}
               frames={data.frames}
@@ -135,34 +177,90 @@ function CommentsSubmitBar({
   draftCount,
   pendingCount,
   submitState,
-  onSubmit,
+  submitError,
+  messageCopied,
+  onSave,
+  onMessageCopied,
 }: {
   draftCount: number;
   pendingCount: number;
   submitState: CommentsSubmitState;
-  onSubmit: () => void;
+  submitError: string | null;
+  messageCopied: boolean;
+  onSave: () => void;
+  onMessageCopied: () => void;
 }) {
   return (
-    <div className="ml-auto flex items-center gap-3">
+    <div className="ml-auto flex min-w-0 flex-1 flex-wrap items-center justify-end gap-2 sm:flex-none">
       {pendingCount > 0 && (
-        <span className="text-xs text-sky-300">
-          {pendingCount} comment{pendingCount > 1 ? "s" : ""} pending — reply anything in your agent
-          chat and it will apply them.
+        <>
+          <span className="text-xs text-sky-300">
+            {messageCopied
+              ? "Feedback saved · Message copied — paste it in your terminal or IDE agent chat."
+              : "Feedback saved · Agent not notified."}
+          </span>
+          <AgentChatMessageButton
+            message={APPLY_STORYBOARD_FEEDBACK_MESSAGE}
+            label={messageCopied ? "Copy again" : "Copy prompt for agent"}
+            onCopied={onMessageCopied}
+          />
+        </>
+      )}
+      {pendingCount === 0 && draftCount === 0 && (
+        <span className="text-xs text-neutral-500">Add frame comments to request changes.</span>
+      )}
+      {submitError && (
+        <span className="max-w-64 truncate text-xs text-red-400" title={submitError}>
+          Couldn’t submit: {submitError}
         </span>
       )}
-      <Button
-        variant="primary"
-        size="sm"
-        loading={submitState === "saving"}
-        disabled={draftCount === 0 || submitState === "saving"}
-        onClick={onSubmit}
-      >
-        {draftCount > 0 ? `Submit comments (${draftCount})` : "Submit comments"}
-      </Button>
+      {draftCount > 0 && (
+        <Button
+          variant="primary"
+          size="sm"
+          loading={submitState === "saving"}
+          disabled={submitState === "saving"}
+          onClick={onSave}
+        >
+          Save &amp; copy message ({draftCount})
+        </Button>
+      )}
     </div>
   );
 }
 
+function StoryboardWarnings({
+  warnings,
+  onOpenSource,
+}: {
+  warnings: StoryboardResponse["warnings"];
+  onOpenSource: () => void;
+}) {
+  if (warnings.length === 0) return null;
+  return (
+    <details className="mt-3 rounded-lg border border-amber-900/60 bg-amber-950/20 px-4 py-2 text-xs text-amber-200">
+      <summary className="cursor-pointer font-medium">
+        {warnings.length} storyboard warning{warnings.length === 1 ? "" : "s"}
+      </summary>
+      <ul className="mt-2 space-y-1 text-amber-200/80">
+        {warnings.map((warning, index) => (
+          <li key={`${warning.line ?? "unknown"}-${index}`}>
+            {warning.line ? `Line ${warning.line}: ` : ""}
+            {warning.message}
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        onClick={onOpenSource}
+        className="mt-2 rounded text-amber-100 underline underline-offset-2 hover:text-white"
+      >
+        Open source to fix
+      </button>
+    </details>
+  );
+}
+
 const SUB_VIEWS: Array<{ value: SubView; label: string }> = [
   { value: "board", label: "Board" },
   { value: "source", label: "Source" },