@hyperframes/studio 0.7.59 → 0.7.61

package/src/components/editor/propertyPanelFlatStyleSections.tsx

@@ -3,11 +3,7 @@ import { useEffect, useState } from "react";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
 import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
 import { BorderRadiusEditor } from "./BorderRadiusEditor";
-import {
-  formatStrokeSummary,
-  parseStrokeSummary,
-  STROKE_STYLE_OPTIONS,
-} from "./propertyPanelFlatStyleHelpers";
+import { STROKE_STYLE_OPTIONS } from "./propertyPanelFlatStyleHelpers";
 import {
   buildBoxShadowPresetValue,
   buildClipPathValue,
@@ -147,10 +143,9 @@ function FlatFillFields({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Flat Stroke row — combined width+style+color                       */
+/*  Flat Stroke row — width (numeric), style (select), color           */
 /* ------------------------------------------------------------------ */
 
-// fallow-ignore-next-line complexity
 function FlatStrokeRow({
   styles,
   disabled,
@@ -167,52 +162,40 @@ function FlatStrokeRow({
   const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
   const borderColorValue =
     styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
-  const summary = formatStrokeSummary(borderWidthValue, borderStyleValue);
-  const tier = resolveValueTier(
-    styles["border-width"] != null || styles["border-style"] != null ? summary : undefined,
-    formatStrokeSummary(0, "none"),
-  );
+  const widthDisplay = formatPxMetricValue(borderWidthValue);
 
   return (
     <>
       <FlatRow
-        label="Stroke"
-        value={summary}
-        tier={tier}
+        label="Stroke width"
+        value={widthDisplay}
+        tier={resolveValueTier(styles["border-width"], "0px")}
         disabled={disabled}
         onCommit={async (next) => {
-          const parsed = parseStrokeSummary(next);
-          if (!parsed) return;
-          if (!STROKE_STYLE_OPTIONS.includes(parsed.style)) return;
-          const normalizedWidth = normalizePanelPxValue(`${parsed.widthPx}px`, {
+          const normalizedWidth = normalizePanelPxValue(next, {
             min: 0,
             max: 200,
             fallback: borderWidthValue,
           });
           if (!normalizedWidth) return;
+          // buildStrokeWidthStyleUpdates already covers "a width typed in
+          // from 0 needs a style to actually render a visible border" —
+          // it only defaults to solid when the current style is none/hidden,
+          // never clobbering an already-chosen style (dashed, dotted, …).
           for (const [property, value] of buildStrokeWidthStyleUpdates(
             normalizedWidth,
-            parsed.style,
+            borderStyleValue,
           )) {
             await onSetStyle(property, value);
           }
-          for (const [property, value] of buildStrokeStyleUpdates(parsed.style, normalizedWidth)) {
-            await onSetStyle(property, value);
-          }
         }}
-        suffix={
-          <>
-            <span
-              className="h-4 w-4 flex-shrink-0 rounded border border-panel-border-input"
-              style={{ backgroundColor: borderColorValue }}
-            />
-            <span className="font-mono text-[10px] text-panel-text-3">{borderColorValue}</span>
-          </>
-        }
       />
       <FlatSelectRow
         label="Stroke style"
         value={borderStyleValue}
+        // Valid border-style keywords — the ONLY way to set this, since a
+        // free-text field here would require typing an exact CSS keyword
+        // (e.g. "dashed") with no indication of which ones are valid.
         options={STROKE_STYLE_OPTIONS}
         tier={resolveValueTier(styles["border-style"], "none")}
         disabled={disabled}

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -111,7 +111,7 @@ function FlatTextFieldEditor({
         >
           Weight
         </span>
-        <label className="flex items-center gap-1.5">
+        <label className="flex items-center gap-1.5 border-b border-panel-border-input/50 pb-px hover:border-panel-border-input">
           <select
             value={weight}
             onChange={(e) => {
@@ -267,7 +267,7 @@ export function FlatTextSection({
 
   if (textFields.length > 1) {
     return (
-      <div className="space-y-1.5">
+      <div className="space-y-2.5">
         <FlatTextLayerList
           fields={textFields}
           activeFieldKey={activeField.key}
@@ -295,7 +295,7 @@ export function FlatTextSection({
   }
 
   return (
-    <div className="space-y-1.5">
+    <div className="space-y-2.5">
       <FlatTextFieldEditor
         field={activeField}
         styles={styles}

package/src/components/editor/propertyPanelInputCoverage.test.tsx

@@ -134,6 +134,13 @@ describe("classic property-panel primitive telemetry", () => {
     const input = host.querySelector("input");
     if (!input) throw new Error("expected metric input");
 
+    // Regression guard for CommitField's shared `align` default: the classic
+    // panel lays out label-then-value inline, where left-aligned reads
+    // naturally — this must stay left even though the flat inspector's
+    // FlatRow now opts into `align="right"` for its own justify-between rows.
+    expect(input.className).toContain("text-left");
+    expect(input.className).not.toContain("text-right");
+
     act(() => blurInput(input));
     expect(trackStudioEvent).not.toHaveBeenCalled();
 
@@ -448,6 +455,13 @@ function representativeElement() {
 
 describe("classic PropertyPanel input coverage", () => {
   it("emits only named, known-section events across body inputs and header/footer chrome", async () => {
+    vi.resetModules();
+    vi.doMock("./manualEditingAvailability", async () => {
+      const actual = await vi.importActual<typeof import("./manualEditingAvailability")>(
+        "./manualEditingAvailability",
+      );
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: false };
+    });
     const { PropertyPanel } = await import("./PropertyPanel");
     const host = render(
       <PropertyPanel

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -9,11 +9,17 @@ export function CommitField({
   value,
   disabled,
   liveCommit,
+  align = "left",
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
   liveCommit?: boolean;
+  /** The legacy panel lays out label-then-value inline (left reads naturally);
+   *  the flat inspector lays out label…value across a `justify-between` row,
+   *  where a left-aligned value looks stranded at the edge of its own
+   *  right-hand box instead of lining up with every other row's value. */
+  align?: "left" | "right";
   onCommit: (nextValue: string) => void;
 }) {
   const [draft, setDraft] = useState(value);
@@ -92,7 +98,9 @@ export function CommitField({
         scheduleCommit(nextDraft);
       }}
       title={parseNumericToken(value) ? "Scroll or use Arrow keys to adjust" : undefined}
-      className="min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
+      className={`min-w-0 w-full bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600 ${
+        align === "right" ? "text-right" : "text-left"
+      }`}
     />
   );
 }

package/src/components/storyboard/AgentChatMessageButton.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AgentChatMessageButton } from "./AgentChatMessageButton";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe("AgentChatMessageButton", () => {
+  it("reports a successful copy and resets to an explicit re-copy action", async () => {
+    vi.useFakeTimers();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", {
+      configurable: true,
+      value: { writeText },
+    });
+    const onCopied = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<AgentChatMessageButton message="handoff" onCopied={onCopied} />);
+    });
+
+    const button = host.querySelector("button");
+    if (!button) throw new Error("copy button not rendered");
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    expect(writeText).toHaveBeenCalledWith("handoff");
+    expect(onCopied).toHaveBeenCalledOnce();
+    expect(button.textContent).toBe("Copied — paste in your agent chat");
+
+    act(() => vi.advanceTimersByTime(3000));
+    expect(button.textContent).toBe("Copy again");
+    act(() => root.unmount());
+  });
+});

package/src/components/storyboard/AgentChatMessageButton.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { Button } from "../ui/Button";
+
+export const APPLY_STORYBOARD_FEEDBACK_MESSAGE =
+  "Read the storyboard feedback I saved in .hyperframes/frame-comments.json and revise the frames.";
+
+export function AgentChatMessageButton({
+  message,
+  label = "Copy prompt for agent",
+  onCopied,
+}: {
+  message: string;
+  label?: string;
+  onCopied?: () => void;
+}) {
+  const [copyState, setCopyState] = useState<"idle" | "copied" | "again" | "failed">("idle");
+
+  useEffect(() => {
+    if (copyState !== "copied") return;
+    const timeout = window.setTimeout(() => setCopyState("again"), 3000);
+    return () => window.clearTimeout(timeout);
+  }, [copyState]);
+
+  const copyMessage = async () => {
+    try {
+      await navigator.clipboard.writeText(message);
+      setCopyState("copied");
+      onCopied?.();
+    } catch {
+      setCopyState("failed");
+    }
+  };
+
+  return (
+    <Button size="sm" variant="secondary" onClick={() => void copyMessage()}>
+      {copyState === "copied"
+        ? "Copied — paste in your agent chat"
+        : copyState === "again"
+          ? "Copy again"
+          : copyState === "failed"
+            ? "Copy failed"
+            : label}
+    </Button>
+  );
+}

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>
   );