@hyperframes/studio 0.8.49 → 0.8.51

package/src/components/storyboard/StoryboardLoaded.tsx

@@ -1,307 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import type { StoryboardResponse } from "../../hooks/useStoryboard";
-import { Button } from "../ui/Button";
-import { StoryboardDirection } from "./StoryboardDirection";
-import { StoryboardGrid } from "./StoryboardGrid";
-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";
-
-export interface StoryboardLoadedProps {
-  projectId: string;
-  data: StoryboardResponse;
-  /** Re-fetch the manifest after a source edit is saved. */
-  reload: () => void;
-  /** Select a composition in the timeline (used by "Open in Preview"). */
-  onSelectComposition: (path: string) => void;
-}
-
-function clampIndex(index: number, count: number): number {
-  return Math.max(1, Math.min(count, index));
-}
-
-/** A storyboard that exists on disk: Board (contact sheet) ↔ Source ↔ frame focus. */
-// fallow-ignore-next-line complexity
-export function StoryboardLoaded({
-  projectId,
-  data,
-  reload,
-  onSelectComposition,
-}: StoryboardLoadedProps) {
-  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
-  // banner clears the moment revisions land, not on the next window focus.
-  const { refreshPending } = comments;
-  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 });
-    return files;
-    // Depend on the stable fields, not the `data.script` object — every reload()
-    // produces a fresh object and would needlessly re-create this array.
-  }, [data.path, data.script?.path, data.script?.exists]);
-
-  // Leaving the source editor drops its in-memory buffer; confirm when it's dirty.
-  // fallow-ignore-next-line complexity
-  const changeSubView = (next: SubView) => {
-    if (next === subView) return;
-    if (
-      subView === "source" &&
-      sourceDirty &&
-      !window.confirm("Discard unsaved markdown changes?")
-    ) {
-      return;
-    }
-    setSubView(next);
-  };
-
-  const focusedFrame =
-    focusedIndex != null ? (data.frames.find((f) => f.index === focusedIndex) ?? null) : null;
-
-  if (focusedFrame) {
-    return (
-      <StoryboardFrameFocus
-        key={focusedFrame.index}
-        projectId={projectId}
-        storyboardPath={data.path}
-        frame={focusedFrame}
-        frameCount={data.frames.length}
-        onBack={() => setFocusedIndex(null)}
-        onNavigate={(delta) =>
-          setFocusedIndex(clampIndex(focusedFrame.index + delta, data.frames.length))
-        }
-        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 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}
-            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-4 py-5 sm:px-8 sm:py-8">
-            <StoryboardDirection globals={data.globals} frameCount={data.frames.length} />
-            <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}
-              onOpenFrame={setFocusedIndex}
-              commentDrafts={comments.drafts}
-              onCommentDraftChange={comments.setDraft}
-              pendingComments={comments.pending}
-              posterVersion={data.signature}
-            />
-            {data.script && <StoryboardScriptPanel script={data.script} />}
-          </div>
-        </div>
-      ) : (
-        <StoryboardSourceEditor
-          files={sourceFiles}
-          onSaved={reload}
-          onDirtyChange={setSourceDirty}
-        />
-      )}
-    </div>
-  );
-}
-
-/** Batch-submit the per-frame comment drafts to `.hyperframes/frame-comments.json`. */
-function CommentsSubmitBar({
-  draftCount,
-  pendingCount,
-  submitState,
-  submitError,
-  messageCopied,
-  onSave,
-  onMessageCopied,
-}: {
-  draftCount: number;
-  pendingCount: number;
-  submitState: CommentsSubmitState;
-  submitError: string | null;
-  messageCopied: boolean;
-  onSave: () => void;
-  onMessageCopied: () => void;
-}) {
-  return (
-    <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">
-            {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>
-      )}
-      {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" },
-];
-
-function SubViewToggle({ value, onChange }: { value: SubView; onChange: (next: SubView) => void }) {
-  // Complete tabs contract: roving tabIndex + arrow-key navigation (the roles
-  // alone promised keyboard behavior the buttons didn't have).
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-    e.preventDefault();
-    const currentIndex = SUB_VIEWS.findIndex((v) => v.value === value);
-    const delta = e.key === "ArrowRight" ? 1 : -1;
-    const next = SUB_VIEWS[(currentIndex + delta + SUB_VIEWS.length) % SUB_VIEWS.length];
-    if (next) onChange(next.value);
-  };
-
-  return (
-    <div
-      className="flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5"
-      role="tablist"
-      aria-label="Storyboard view"
-      onKeyDown={handleKeyDown}
-    >
-      {SUB_VIEWS.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          role="tab"
-          aria-selected={value === option.value}
-          tabIndex={value === option.value ? 0 : -1}
-          onClick={() => onChange(option.value)}
-          className={`rounded px-3 py-1 text-xs font-medium transition-colors active:scale-[0.98] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
-            value === option.value
-              ? "bg-neutral-700 text-neutral-100"
-              : "text-neutral-400 hover:text-neutral-200"
-          }`}
-        >
-          {option.label}
-        </button>
-      ))}
-    </div>
-  );
-}

package/src/components/storyboard/StoryboardReviewGuide.tsx

@@ -1,300 +0,0 @@
-import type { StoryboardFrameView } from "../../hooks/useStoryboard";
-import {
-  AgentChatMessageButton,
-  APPLY_STORYBOARD_FEEDBACK_MESSAGE,
-} from "./AgentChatMessageButton";
-import { FRAME_STATUS_META, FRAME_STATUS_ORDER } from "./frameStatus";
-import {
-  deriveStoryboardHandoffStep,
-  deriveStoryboardReviewStage,
-  type StoryboardHandoffStep,
-  type StoryboardReviewStage,
-} from "./storyboardReviewStage";
-
-const GUIDE_COPY: Record<StoryboardReviewStage, { eyebrow: string; title: string; body: string }> =
-  {
-    empty: {
-      eyebrow: "Waiting for a plan",
-      title: "The storyboard has no frames yet",
-      body: "Ask your agent to draft the story plan. Frames will appear here automatically.",
-    },
-    "plan-review": {
-      eyebrow: "Ready for review",
-      title: "Review the story plan",
-      body: "Check the sequence, scene direction, and voiceover before visual work begins. Leave frame comments, save them, then reply in your terminal or IDE agent chat.",
-    },
-    "sketch-in-progress": {
-      eyebrow: "Build in progress",
-      title: "Visual sketches are in progress",
-      body: "New posters appear automatically as your agent builds them. You can comment now; wait until no frames remain in Outline before approving the layouts.",
-    },
-    "sketch-review": {
-      eyebrow: "Ready for review",
-      title: "Review the visual direction",
-      body: "Check composition, hierarchy, and copy. Save frame comments, then reply in your terminal or IDE agent chat.",
-    },
-    "animation-in-progress": {
-      eyebrow: "Build in progress",
-      title: "Animation is in progress",
-      body: "The board refreshes as frames advance. Review completed frames now; the final review is ready when every frame is Animated.",
-    },
-    "final-review": {
-      eyebrow: "Ready for review",
-      title: "Review motion and timing",
-      body: "Every frame is animated. Open a frame in Preview to review it in the timeline, or leave frame comments for another revision.",
-    },
-  };
-
-const REVIEW_ACTION_COPY: Record<
-  StoryboardReviewStage,
-  { body: string; approvalMessage?: string }
-> = {
-  empty: { body: "Add comments as previews arrive." },
-  "plan-review": {
-    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
-    approvalMessage: "Approve this storyboard plan and continue to visual sketches.",
-  },
-  "sketch-in-progress": {
-    body: "Add comments as previews arrive. You’ll be prompted to approve when this pass is ready.",
-  },
-  "sketch-review": {
-    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
-    approvalMessage: "Approve these storyboard sketches and continue to animation.",
-  },
-  "animation-in-progress": {
-    body: "Add comments as previews arrive. You’ll be prompted to approve when this pass is ready.",
-  },
-  "final-review": {
-    body: "Add comments where you want changes. If everything looks right, approve this pass in agent chat.",
-    approvalMessage: "Approve this final storyboard review and continue to rendering.",
-  },
-};
-
-type ReviewStepOffset = -1 | 0 | 1;
-const REVIEW_STEP_STATES: Record<
-  ReviewStepOffset,
-  {
-    textClass: string;
-    numberClass: string;
-    ariaCurrent: "step" | undefined;
-    marker: (number: StoryboardHandoffStep) => StoryboardHandoffStep | string;
-  }
-> = {
-  [-1]: {
-    textClass: "text-emerald-400",
-    numberClass: "border-emerald-700 bg-emerald-500/10",
-    ariaCurrent: undefined,
-    marker: () => "✓",
-  },
-  [0]: {
-    textClass: "text-sky-300",
-    numberClass: "border-sky-500 bg-sky-500/15",
-    ariaCurrent: "step",
-    marker: (number) => number,
-  },
-  [1]: {
-    textClass: "text-neutral-600",
-    numberClass: "border-neutral-700",
-    ariaCurrent: undefined,
-    marker: (number) => number,
-  },
-};
-
-const REVIEW_STEP_SEPARATOR_CLASS: Record<StoryboardHandoffStep, string> = {
-  1: "invisible",
-  2: "",
-  3: "",
-};
-
-export interface StoryboardReviewGuideProps {
-  frames: StoryboardFrameView[];
-  draftCount: number;
-  pendingCount: number;
-  onFeedbackMessageCopied: () => void;
-}
-
-/** Stage-aware instructions plus the explicit Studio → agent handoff. */
-export function StoryboardReviewGuide({
-  frames,
-  draftCount,
-  pendingCount,
-  onFeedbackMessageCopied,
-}: StoryboardReviewGuideProps) {
-  const summary = deriveStoryboardReviewStage(frames);
-  const copy = GUIDE_COPY[summary.stage];
-  const handoffStep = deriveStoryboardHandoffStep(draftCount, pendingCount);
-  const progress = progressLabel(summary);
-
-  return (
-    <section className="mt-5 rounded-lg border border-neutral-800 bg-neutral-900/60 px-4 py-3">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="max-w-3xl">
-          <div className="text-[10px] font-semibold uppercase tracking-wider text-sky-400">
-            {copy.eyebrow}
-          </div>
-          <h2 className="mt-0.5 text-sm font-semibold text-neutral-100">{copy.title}</h2>
-          <p className="mt-1 text-xs leading-relaxed text-neutral-400">{copy.body}</p>
-        </div>
-        {summary.frameCount > 0 && (
-          <div className="shrink-0">
-            <div className="mb-1.5 text-right text-[11px] font-medium text-neutral-300">
-              {progress}
-            </div>
-            <div className="flex flex-wrap justify-end gap-1.5" aria-label="Frame status summary">
-              {FRAME_STATUS_ORDER.map((status) => (
-                <span
-                  key={status}
-                  className={`rounded px-2 py-1 text-[10px] font-medium ${FRAME_STATUS_META[status].chipClass}`}
-                >
-                  {summary.counts[status]} {FRAME_STATUS_META[status].label}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {summary.frameCount > 0 && (
-        <div className="mt-3 border-t border-neutral-800 pt-3">
-          <ReviewSteps current={handoffStep} />
-          <NextAction
-            stage={summary.stage}
-            step={handoffStep}
-            draftCount={draftCount}
-            onFeedbackMessageCopied={onFeedbackMessageCopied}
-          />
-        </div>
-      )}
-    </section>
-  );
-}
-
-function ReviewSteps({ current }: { current: StoryboardHandoffStep }) {
-  const steps = ["Review frames", "Save feedback", "Reply in agent chat"];
-  return (
-    <ol className="hidden items-center gap-2 sm:flex" aria-label="Storyboard review workflow">
-      {steps.map((label, index) => (
-        <ReviewStep
-          key={label}
-          label={label}
-          number={(index + 1) as StoryboardHandoffStep}
-          current={current}
-        />
-      ))}
-    </ol>
-  );
-}
-
-function ReviewStep({
-  label,
-  number,
-  current,
-}: {
-  label: string;
-  number: StoryboardHandoffStep;
-  current: StoryboardHandoffStep;
-}) {
-  const offset = Math.sign(number - current) as ReviewStepOffset;
-  const state = REVIEW_STEP_STATES[offset];
-
-  return (
-    <li className="flex items-center gap-2">
-      <span
-        className={`text-neutral-700 ${REVIEW_STEP_SEPARATOR_CLASS[number]}`}
-        aria-hidden="true"
-      >
-        →
-      </span>
-      <span
-        aria-current={state.ariaCurrent}
-        className={`flex items-center gap-1.5 text-[11px] font-medium ${state.textClass}`}
-      >
-        <span
-          className={`flex h-5 w-5 items-center justify-center rounded-full border text-[10px] ${state.numberClass}`}
-        >
-          {state.marker(number)}
-        </span>
-        {label}
-      </span>
-    </li>
-  );
-}
-
-function NextAction({
-  stage,
-  step,
-  draftCount,
-  onFeedbackMessageCopied,
-}: {
-  stage: StoryboardReviewStage;
-  step: StoryboardHandoffStep;
-  draftCount: number;
-  onFeedbackMessageCopied: () => void;
-}) {
-  if (step === 3) {
-    return <AgentHandoffAction onFeedbackMessageCopied={onFeedbackMessageCopied} />;
-  }
-  if (step === 2) return <SaveFeedbackAction draftCount={draftCount} />;
-  return <ReviewFramesAction stage={stage} />;
-}
-
-function AgentHandoffAction({ onFeedbackMessageCopied }: { onFeedbackMessageCopied: () => void }) {
-  return (
-    <div className="mt-3 flex flex-col gap-3 rounded-md border border-sky-900/70 bg-sky-950/20 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between">
-      <div className="max-w-3xl">
-        <div className="text-xs font-semibold text-sky-200">Next: return to your agent chat</div>
-        <p className="mt-0.5 text-[11px] text-neutral-400">
-          Feedback is saved, but the agent has not been notified. Paste this prompt in your terminal
-          or IDE agent chat.
-        </p>
-      </div>
-      <AgentChatMessageButton
-        message={APPLY_STORYBOARD_FEEDBACK_MESSAGE}
-        onCopied={onFeedbackMessageCopied}
-      />
-    </div>
-  );
-}
-
-function SaveFeedbackAction({ draftCount }: { draftCount: number }) {
-  return (
-    <div className="mt-3 rounded-md border border-neutral-800 bg-neutral-950/40 px-3 py-2.5">
-      <div>
-        <div className="text-xs font-semibold text-neutral-200">Next: save your feedback</div>
-        <p className="mt-0.5 text-[11px] text-neutral-500">
-          {draftCount} frame{draftCount === 1 ? " has" : "s have"} feedback ready. Use Save &amp;
-          copy message above to prepare this batch for your agent.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-function ReviewFramesAction({ stage }: { stage: StoryboardReviewStage }) {
-  const copy = REVIEW_ACTION_COPY[stage];
-
-  return (
-    <div className="mt-3 flex flex-col gap-3 rounded-md border border-neutral-800 bg-neutral-950/40 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between">
-      <div>
-        <div className="text-xs font-semibold text-neutral-200">Next: review the frames</div>
-        <p className="mt-0.5 text-[11px] text-neutral-500">{copy.body}</p>
-      </div>
-      {copy.approvalMessage && (
-        <AgentChatMessageButton message={copy.approvalMessage} label="Copy approval message" />
-      )}
-    </div>
-  );
-}
-
-// The label intentionally folds six workflow states into three user-facing progress formats.
-// fallow-ignore-next-line complexity
-function progressLabel(summary: ReturnType<typeof deriveStoryboardReviewStage>): string {
-  if (summary.stage === "sketch-in-progress" || summary.stage === "sketch-review") {
-    const ready = summary.frameCount - summary.counts.outline;
-    return `${ready} of ${summary.frameCount} visual sketches ready`;
-  }
-  if (summary.stage === "animation-in-progress" || summary.stage === "final-review") {
-    return `${summary.counts.animated} of ${summary.frameCount} animations ready`;
-  }
-  return `${summary.frameCount} plan frame${summary.frameCount === 1 ? "" : "s"} ready`;
-}

package/src/components/storyboard/StoryboardScriptPanel.tsx

@@ -1,26 +0,0 @@
-import type { StoryboardScript } from "../../hooks/useStoryboard";
-
-export interface StoryboardScriptPanelProps {
-  script: StoryboardScript;
-}
-
-/**
- * Collapsible view of the companion narration script (SCRIPT.md). The mature
- * pipeline keeps the full voiceover script — voice settings, per-line delivery
- * and timing — in this file; here it's surfaced read-only alongside the frames.
- * (Per-frame VO iteration will live in the frame focus view.)
- */
-export function StoryboardScriptPanel({ script }: StoryboardScriptPanelProps) {
-  if (!script.exists) return null;
-  return (
-    <details className="mt-10 rounded-lg border border-neutral-800 bg-neutral-900/50">
-      <summary className="cursor-pointer select-none px-4 py-3 text-sm font-medium text-neutral-300">
-        Narration script
-        <span className="ml-2 font-normal text-neutral-500">{script.path}</span>
-      </summary>
-      <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap border-t border-neutral-800 px-4 py-3 text-xs leading-relaxed text-neutral-400">
-        {script.content}
-      </pre>
-    </details>
-  );
-}