cowriter 0.1.0

package/frontend/app/page.tsx

@@ -0,0 +1,1554 @@
+"use client";
+
+import { type ComponentProps, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { EditorContent, useEditor, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import {
+  BookmarkIcon,
+  CheckIcon,
+  Cross2Icon,
+  FileTextIcon,
+  ListBulletIcon,
+  Pencil2Icon,
+  PersonIcon,
+  QuestionMarkCircledIcon,
+  ReaderIcon,
+} from "@radix-ui/react-icons";
+import { Button, Field, Input, Textarea } from "@/components/ui";
+import { findNormalizedTextMatch } from "@/lib/highlight";
+import { htmlToMarkdown, markdownToHtml, plainTextFromMarkdown } from "@/lib/markdown";
+import {
+  readActiveProject,
+  readReport,
+  writeChapter,
+  writeCharacters,
+  writeOutline,
+  writeStory,
+} from "@/lib/project";
+import type { CharacterRecord, CowriterProject, CowriterReport, OutlineBeat, StoryBible } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type StoryMaterialTab = "story" | "characters" | "outline" | "reports";
+type CenterView = "front-matter" | "manuscript" | StoryMaterialTab;
+type CodexHighlightCommand = {
+  command: "highlight";
+  text: string;
+  chapterPath?: string;
+  occurrence?: number;
+};
+type PageMetrics = {
+  page: HTMLDivElement;
+  pageAdvance: number;
+  totalPages: number;
+};
+type EditorTextRange = {
+  from: number;
+  to: number;
+};
+type SelectionContextSnapshot = {
+  source: "manuscript";
+  selectedText: string;
+  chapterId: string;
+  chapterPath: string;
+  chapterTitle: string;
+  range: EditorTextRange;
+  activePage: number;
+  surroundingText: string;
+};
+type CssHighlightRegistry = {
+  set(name: string, highlight: unknown): void;
+  delete(name: string): boolean;
+};
+type HighlightConstructor = new (...ranges: Range[]) => unknown;
+type PromptHelpSection = {
+  category: string;
+  title: string;
+  prompt: string;
+  beforeLabel?: string;
+  before?: string;
+  afterLabel?: string;
+  after?: string;
+};
+
+const selectionContextRadius = 600;
+
+const storyMaterialTabs: { id: StoryMaterialTab; label: string; eyebrow: string }[] = [
+  { id: "story", label: "Synopsis & continuity", eyebrow: "Story bible" },
+  { id: "characters", label: "Characters", eyebrow: "Cast" },
+  { id: "outline", label: "Outline", eyebrow: "Structure" },
+  { id: "reports", label: "Reports", eyebrow: "Reviews" },
+];
+
+const storyPlaceholders = {
+  title: "The title you would put on the cover",
+  synopsis: "A private investigator returns to a flooded coastal town after her sister leaves behind a ledger no one else can read.",
+  setting: "Place, era, social pressure, rules of the world, and what feels different here.",
+  themes: "The questions the story keeps testing, such as loyalty, inheritance, grief, ambition, or faith.",
+  genre: "Literary mystery",
+  tone: "Spare, tense, darkly funny",
+  perspective: "Close third person",
+  continuity: "Facts that must stay true: dates, injuries, promises, secrets, names, locations.",
+} satisfies Record<keyof StoryBible, string>;
+
+const characterPlaceholders = {
+  name: "Iris Calder",
+  role: "Protagonist, rival, witness, mentor",
+  desire: "What this person wants badly enough to make a mistake.",
+  conflict: "The pressure, flaw, or opposing want that keeps them from getting it.",
+  notes: "Voice, habits, secrets, contradictions, and details Codex should remember.",
+} satisfies Omit<CharacterRecord, "id">;
+
+const outlinePlaceholders = {
+  title: "The first irreversible choice",
+  summary: "What changes in this beat, what the reader learns, and why the next scene becomes necessary.",
+} satisfies Omit<OutlineBeat, "id">;
+
+const promptHelpSections: PromptHelpSection[] = [
+  {
+    category: "Project",
+    title: "Shape a story bible",
+    prompt: "$cowriter I have a synopsis for this book. Help me formulate the story bible: A retired diver returns to a sinking town after her brother leaves her a coded salvage map.",
+  },
+  {
+    category: "Project",
+    title: "Inspect the current book",
+    prompt: "$cowriter inspect this book and tell me the next useful writing task",
+  },
+  {
+    category: "Manuscript",
+    title: "Draft the next page",
+    prompt: "$cowriter draft the next manuscript page from the active outline beat and current story materials",
+    beforeLabel: "Before",
+    before: "Outline beat: Iris reaches the drowned courthouse and finds the clerk's window lit.",
+    afterLabel: "After",
+    after: "Rain thinned as Iris crossed the courthouse lawn, though the water there still took her boots to the ankle. Every window was black except the clerk's, where one yellow square trembled on the floodwater like a warning she had already failed to heed.",
+  },
+  {
+    category: "Manuscript",
+    title: "Rewrite selected prose",
+    prompt: "$cowriter rewrite the selected passage with stronger rhythm while preserving point of view",
+    beforeLabel: "Before",
+    before: "Mara walked into the archive. It was cold and quiet. She felt nervous because the ledger might be there.",
+    afterLabel: "After",
+    after: "Mara stepped into the archive and let the door sigh shut behind her. Cold gathered under the shelves. Somewhere in that hush, if Elias had not lied, the ledger was waiting.",
+  },
+  {
+    category: "Manuscript",
+    title: "Expand selected prose",
+    prompt: "$cowriter expand the selected passage with more concrete detail and interiority",
+    beforeLabel: "Before",
+    before: "The ferry left at dawn. Jonah watched the island get smaller.",
+    afterLabel: "After",
+    after: "The ferry pulled away at dawn, its wake folding the harbor into strips of pewter. Jonah kept his hands on the rail until the salt worked into his cuts. The island shrank behind him, but the chapel bell still seemed to ring inside his teeth.",
+  },
+  {
+    category: "Manuscript",
+    title: "Polish dialogue",
+    prompt: "$cowriter polish the selected dialogue so each speaker has clearer subtext",
+    beforeLabel: "Before",
+    before: "\"Did you take the key?\" Lina asked.\n\"No,\" Orrin said. \"Why would I?\"",
+    afterLabel: "After",
+    after: "\"You were alone with the cabinet,\" Lina said.\nOrrin kept his thumb over the black half-moon of grease on the key ring. \"I was alone with a lot of things. Try being specific.\"",
+  },
+  {
+    category: "Manuscript",
+    title: "Match the book's tone",
+    prompt: "$cowriter match the selected passage to the book's spare, tense tone",
+    beforeLabel: "Before",
+    before: "The hallway was incredibly scary, and Vivienne could not believe how worried she was about going farther.",
+    afterLabel: "After",
+    after: "The hallway narrowed after the third sconce. Vivienne stopped there, listening to the old house settle around her name.",
+  },
+  {
+    category: "Story bible",
+    title: "Brainstorm titles",
+    prompt: "$cowriter brainstorm titles from the synopsis, genre, tone, and themes without changing story.yaml yet",
+  },
+  {
+    category: "Story bible",
+    title: "Expand the synopsis",
+    prompt: "$cowriter expand this rough synopsis into a clearer dramatic arc and save it to story.yaml",
+    beforeLabel: "Before",
+    before: "A cartographer finds a map of a city that should not exist and follows it.",
+    afterLabel: "After",
+    after: "A disgraced cartographer discovers a hand-drawn map that predicts changes in her city before they happen. To clear her father's name, she follows the map into sealed districts, learns who is redrawing the streets, and must decide whether restoring the old city is worth erasing the people who survived its collapse.",
+  },
+  {
+    category: "Story bible",
+    title: "Develop a character",
+    prompt: "$cowriter develop Iris Calder's role, desire, conflict, and notes from the current synopsis",
+  },
+  {
+    category: "Story bible",
+    title: "Plan a scene beat",
+    prompt: "$cowriter plan the next scene beat with a goal, obstacle, reversal, and exit image",
+  },
+  {
+    category: "Continuity",
+    title: "Review continuity",
+    prompt: "$cowriter review continuity for the current chapter and record confirmed facts after I approve them",
+  },
+  {
+    category: "Continuity",
+    title: "Save stable story facts",
+    prompt: "$cowriter extract stable facts from the approved scene and update continuity, character notes, or outline beats",
+  },
+  {
+    category: "Review",
+    title: "Run a prose review",
+    prompt: "$cowriter run a prose review for chapters/001-opening.md and save a report if the findings are useful",
+  },
+  {
+    category: "Import",
+    title: "Import an existing manuscript",
+    prompt: "$cowriter help import this existing draft into Cowriter chapters and story materials",
+  },
+  {
+    category: "Reports",
+    title: "Use saved review reports",
+    prompt: "$cowriter read the latest prose report and turn the top three findings into a revision plan",
+  },
+];
+
+const materialTextareaClass = "min-h-36 text-[13px] leading-5 md:text-sm md:leading-6";
+const longMaterialTextareaClass = "min-h-64 text-[13px] leading-5 md:min-h-72 md:text-sm md:leading-6";
+
+function normalizedMarkdown(markdown: string) {
+  return markdown.trim();
+}
+
+function stripReportFrontmatter(markdown: string) {
+  return markdown.replace(/^---\r?\n[\s\S]*?\r?\n---(?:\r?\n|$)/, "").trim();
+}
+
+function formatReportDate(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(date);
+}
+
+function storyMaterialEyebrow(tab: StoryMaterialTab, reportCount: number) {
+  if (tab === "reports") return `${reportCount} ${reportCount === 1 ? "report" : "reports"}`;
+  return storyMaterialTabs.find((item) => item.id === tab)?.eyebrow ?? "";
+}
+
+function editorTextIndex(editor: Editor) {
+  const text: string[] = [];
+  const positions: Array<number | null> = [];
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.isText && node.text) {
+      for (let index = 0; index < node.text.length; index += 1) {
+        text.push(node.text[index]);
+        positions.push(pos + index);
+      }
+      return;
+    }
+
+    if (node.isBlock && text.length > 0 && text[text.length - 1] !== "\n") {
+      text.push("\n");
+      positions.push(null);
+    }
+  });
+
+  return { text: text.join(""), positions };
+}
+
+function findEditorTextRange(editor: Editor, command: CodexHighlightCommand): EditorTextRange | null {
+  const index = editorTextIndex(editor);
+  const match = findNormalizedTextMatch(index.text, command.text, command.occurrence ?? 1);
+  if (!match) return null;
+
+  let fromIndex = match.start;
+  while (fromIndex < match.end && index.positions[fromIndex] === null) fromIndex += 1;
+  let toIndex = match.end - 1;
+  while (toIndex >= fromIndex && index.positions[toIndex] === null) toIndex -= 1;
+
+  const from = index.positions[fromIndex];
+  const to = index.positions[toIndex];
+  return typeof from === "number" && typeof to === "number" ? { from, to: to + 1 } : null;
+}
+
+function selectionContextForEditor(editor: Editor, chapter: CowriterProject["chapters"][number], activePage: number): SelectionContextSnapshot | null {
+  const { from, to, empty } = editor.state.selection;
+  if (empty) return null;
+
+  const selectedText = editor.state.doc.textBetween(from, to, "\n");
+  if (!selectedText.trim()) return null;
+
+  const contextFrom = Math.max(0, from - selectionContextRadius);
+  const contextTo = Math.min(editor.state.doc.content.size, to + selectionContextRadius);
+
+  return {
+    source: "manuscript",
+    selectedText,
+    chapterId: chapter.id,
+    chapterPath: chapter.path,
+    chapterTitle: chapter.title,
+    range: { from, to },
+    activePage,
+    surroundingText: editor.state.doc.textBetween(contextFrom, contextTo, "\n"),
+  };
+}
+
+function cssHighlights() {
+  if (typeof CSS === "undefined") return null;
+  return (CSS as typeof CSS & { highlights?: CssHighlightRegistry }).highlights ?? null;
+}
+
+function clearCodexHighlight() {
+  cssHighlights()?.delete("cowriter-codex-highlight");
+}
+
+function ensureCodexHighlightStyle() {
+  if (document.getElementById("cowriter-codex-highlight-style")) return;
+  const style = document.createElement("style");
+  style.id = "cowriter-codex-highlight-style";
+  style.textContent = "::highlight(cowriter-codex-highlight) { background: rgba(180, 83, 9, 0.28); }";
+  document.head.appendChild(style);
+}
+
+function showCodexHighlight(editor: Editor, range: EditorTextRange) {
+  const highlights = cssHighlights();
+  const HighlightClass = (window as Window & { Highlight?: HighlightConstructor }).Highlight;
+  if (!highlights || !HighlightClass) return false;
+
+  try {
+    ensureCodexHighlightStyle();
+    const from = editor.view.domAtPos(range.from);
+    const to = editor.view.domAtPos(range.to);
+    const domRange = document.createRange();
+    domRange.setStart(from.node, from.offset);
+    domRange.setEnd(to.node, to.offset);
+    highlights.set("cowriter-codex-highlight", new HighlightClass(domRange));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function measuredPageIndexForPosition(editor: Editor, metrics: PageMetrics, position: number) {
+  const editorElement = editor.view.dom as HTMLElement;
+  const previousTransform = editorElement.style.transform;
+  const previousTransition = editorElement.style.transition;
+  editorElement.style.transition = "none";
+  editorElement.style.transform = "translateX(0px)";
+
+  try {
+    const coords = editor.view.coordsAtPos(position);
+    const editorRect = editorElement.getBoundingClientRect();
+    const pageIndex = Math.floor(Math.max(0, coords.left - editorRect.left) / metrics.pageAdvance);
+    return Math.min(metrics.totalPages - 1, Math.max(0, pageIndex));
+  } finally {
+    editorElement.style.transform = previousTransform;
+    editorElement.style.transition = previousTransition;
+  }
+}
+
+export default function Home() {
+  const [project, setProject] = useState<CowriterProject | null>(null);
+  const [activePage, setActivePage] = useState(0);
+  const [activeStoryTab, setActiveStoryTab] = useState<StoryMaterialTab>("story");
+  const [centerView, setCenterView] = useState<CenterView>("manuscript");
+  const [activeReportPath, setActiveReportPath] = useState<string | null>(null);
+  const [reportMarkdown, setReportMarkdown] = useState("");
+  const [reportStatus, setReportStatus] = useState("Select a report");
+  const [promptHelpOpen, setPromptHelpOpen] = useState(false);
+  const [status, setStatus] = useState("Ready");
+  const [pageCount, setPageCount] = useState(1);
+  const bookPageRef = useRef<HTMLDivElement | null>(null);
+  const paginationFrameRef = useRef<number | null>(null);
+  const syncedEditorChapterId = useRef<string | null>(null);
+  const pendingHighlightRef = useRef<CodexHighlightCommand | null>(null);
+  const highlightHandlerRef = useRef<(command: CodexHighlightCommand) => void>(() => {});
+  const selectionFrameRef = useRef<number | null>(null);
+  const lastSelectionSnapshotRef = useRef("");
+  const activePageRef = useRef(activePage);
+  const centerViewRef = useRef(centerView);
+  const firstChapterIdRef = useRef<string | null>(null);
+  const activeChapterIndexRef = useRef(-1);
+  const hasFrontMatterRef = useRef(false);
+  const goToPageRef = useRef<(pageIndex: number) => void>(() => {});
+
+  const activeChapter = project?.chapters.find((chapter) => chapter.id === project.activeChapterId) ?? null;
+  const activeChapterIndex = project && activeChapter ? project.chapters.findIndex((chapter) => chapter.id === activeChapter.id) : -1;
+  const hasFrontMatter = Boolean(project?.cover);
+  const isFrontMatterVisible = centerView === "front-matter";
+  const isWritingView = centerView === "front-matter" || centerView === "manuscript";
+  const isStoryMaterialView = !isWritingView;
+  const chapterWordCount = useMemo(() => plainTextFromMarkdown(activeChapter?.markdown ?? "").split(/\s+/).filter(Boolean).length, [activeChapter?.markdown]);
+  const activeMaterial = storyMaterialTabs.find((tab) => tab.id === activeStoryTab) ?? storyMaterialTabs[0];
+  const activeMaterialEyebrow = project ? storyMaterialEyebrow(activeMaterial.id, project.reports.length) : activeMaterial.eyebrow;
+  const activeReport = project?.reports.find((report) => report.path === activeReportPath) ?? null;
+  const refreshProject = useCallback(async (statusMessage?: string) => {
+    const stored = await readActiveProject();
+    if (!stored) return;
+    setProject((current) => {
+      if (!current && stored.cover) setCenterView("front-matter");
+      return stored;
+    });
+    if (statusMessage) setStatus(statusMessage);
+  }, []);
+
+  const getPageMetrics = useCallback((): PageMetrics | null => {
+    const page = bookPageRef.current;
+    const clip = page?.querySelector<HTMLElement>(".book-page-clip");
+    const editorElement = page?.querySelector<HTMLElement>(".ProseMirror");
+    if (!page || !clip || !editorElement) return null;
+
+    const pageWidth = Math.max(1, clip.clientWidth);
+    page.style.setProperty("--book-content-width", `${pageWidth}px`);
+
+    const columnGap = Number.parseFloat(window.getComputedStyle(editorElement).columnGap) || 0;
+    const pageAdvance = pageWidth + columnGap;
+    const totalPages = Math.max(1, Math.ceil((editorElement.scrollWidth + columnGap) / pageAdvance));
+    return { page, pageAdvance, totalPages };
+  }, []);
+
+  const syncPagination = useCallback(() => {
+    if (isFrontMatterVisible) return;
+
+    const metrics = getPageMetrics();
+    if (!metrics) {
+      setActivePage(0);
+      setPageCount(1);
+      return;
+    }
+
+    const currentPage = Math.min(metrics.totalPages - 1, Math.max(0, activePage));
+    metrics.page.style.setProperty("--manuscript-page-offset", `${currentPage * metrics.pageAdvance}px`);
+
+    setPageCount((current) => (current === metrics.totalPages ? current : metrics.totalPages));
+    setActivePage((current) => (current === currentPage ? current : currentPage));
+  }, [activePage, getPageMetrics, isFrontMatterVisible]);
+
+  const schedulePaginationSync = useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (paginationFrameRef.current !== null) window.cancelAnimationFrame(paginationFrameRef.current);
+    paginationFrameRef.current = window.requestAnimationFrame(() => {
+      paginationFrameRef.current = null;
+      syncPagination();
+    });
+  }, [syncPagination]);
+
+  const goToPage = useCallback((pageIndex: number) => {
+    const metrics = getPageMetrics();
+    const maxPage = metrics ? metrics.totalPages - 1 : pageCount - 1;
+    const nextPage = Math.min(maxPage, Math.max(0, pageIndex));
+
+    setActivePage(nextPage);
+    if (metrics) {
+      metrics.page.style.setProperty("--manuscript-page-offset", `${nextPage * metrics.pageAdvance}px`);
+    }
+  }, [getPageMetrics, pageCount]);
+
+  useEffect(() => {
+    activePageRef.current = activePage;
+  }, [activePage]);
+
+  useEffect(() => {
+    centerViewRef.current = centerView;
+  }, [centerView]);
+
+  useEffect(() => {
+    firstChapterIdRef.current = project?.chapters[0]?.id ?? null;
+    activeChapterIndexRef.current = activeChapterIndex;
+    hasFrontMatterRef.current = hasFrontMatter;
+  }, [activeChapterIndex, hasFrontMatter, project?.chapters]);
+
+  useEffect(() => {
+    goToPageRef.current = goToPage;
+  }, [goToPage]);
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit,
+      Table.configure({ resizable: false }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Placeholder.configure({ placeholder: "Start the page here." }),
+    ],
+    content: markdownToHtml(activeChapter?.markdown ?? ""),
+    editorProps: {
+      attributes: {
+        class: "prose prose-zinc max-w-none min-h-full focus:outline-none font-book text-zinc-900",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      if (!project || !activeChapter) return;
+      const nextChapter = { ...activeChapter, markdown: htmlToMarkdown(editor.getHTML()), updatedAt: new Date().toISOString() };
+      setProject({
+        ...project,
+        chapters: project.chapters.map((chapter) => (chapter.id === activeChapter.id ? nextChapter : chapter)),
+        git: { ...project.git, dirty: true, changedPaths: Array.from(new Set([...project.git.changedPaths, activeChapter.path])) },
+      });
+      schedulePaginationSync();
+    },
+  });
+
+  const publishSelectionContext = useCallback((selection: SelectionContextSnapshot | null) => {
+    if (typeof window === "undefined") return;
+    const body = JSON.stringify({ selection });
+    if (lastSelectionSnapshotRef.current === body) return;
+    lastSelectionSnapshotRef.current = body;
+
+    void fetch("/api/cowriter/selection", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body,
+    }).catch(() => {});
+  }, []);
+
+  const syncSelectionContext = useCallback((selectionEditor: Editor | null = editor) => {
+    if (centerView !== "manuscript" || !selectionEditor || !activeChapter) {
+      publishSelectionContext(null);
+      return;
+    }
+
+    publishSelectionContext(selectionContextForEditor(selectionEditor, activeChapter, activePage));
+  }, [activeChapter, activePage, centerView, editor, publishSelectionContext]);
+
+  const scheduleSelectionContextSync = useCallback((selectionEditor: Editor | null = editor) => {
+    if (typeof window === "undefined") return;
+    if (selectionFrameRef.current !== null) window.cancelAnimationFrame(selectionFrameRef.current);
+    selectionFrameRef.current = window.requestAnimationFrame(() => {
+      selectionFrameRef.current = null;
+      syncSelectionContext(selectionEditor);
+    });
+  }, [editor, syncSelectionContext]);
+
+  const applyHighlightCommand = useCallback((command: CodexHighlightCommand) => {
+    if (!project || !editor) {
+      pendingHighlightRef.current = command;
+      return;
+    }
+
+    const requestedChapter = command.chapterPath
+      ? project.chapters.find((chapter) => chapter.path === command.chapterPath)
+      : activeChapter;
+    if (!requestedChapter) {
+      clearCodexHighlight();
+      setStatus(`Could not find ${command.chapterPath ?? "the active chapter"} for Codex highlight`);
+      return;
+    }
+
+    if (centerView !== "manuscript") {
+      pendingHighlightRef.current = command;
+      setCenterView("manuscript");
+      return;
+    }
+
+    if (requestedChapter.id !== project.activeChapterId) {
+      pendingHighlightRef.current = command;
+      setProject({ ...project, activeChapterId: requestedChapter.id });
+      setCenterView("manuscript");
+      return;
+    }
+
+    const range = findEditorTextRange(editor, command);
+    if (!range) {
+      clearCodexHighlight();
+      setStatus("Could not find the passage Codex asked to highlight");
+      return;
+    }
+
+    const metrics = getPageMetrics();
+    if (metrics) {
+      const pageIndex = measuredPageIndexForPosition(editor, metrics, range.from);
+      goToPage(pageIndex);
+    }
+
+    editor.chain().focus().setTextSelection(range).run();
+    showCodexHighlight(editor, range);
+    setStatus("Highlighted Codex passage");
+  }, [activeChapter, centerView, editor, getPageMetrics, goToPage, project]);
+
+  useEffect(() => {
+    highlightHandlerRef.current = applyHighlightCommand;
+  }, [applyHighlightCommand]);
+
+  useEffect(() => {
+    void refreshProject("Book folder loaded");
+  }, [refreshProject]);
+
+  useEffect(() => {
+    if (!project) return;
+    if (!project.reports.length) {
+      setActiveReportPath(null);
+      setReportMarkdown("");
+      setReportStatus("No reports");
+      return;
+    }
+    if (!activeReportPath || !project.reports.some((report) => report.path === activeReportPath)) {
+      setActiveReportPath(project.reports[0].path);
+    }
+  }, [activeReportPath, project]);
+
+  useEffect(() => {
+    if (activeStoryTab !== "reports" || !activeReportPath) return;
+    let cancelled = false;
+    setReportStatus("Loading report");
+    readReport(activeReportPath)
+      .then((report) => {
+        if (cancelled) return;
+        setReportMarkdown(report.markdown);
+        setReportStatus("Report loaded");
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        setReportMarkdown("");
+        setReportStatus(error instanceof Error ? error.message : "Unable to load report");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeReportPath, activeStoryTab]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => scheduleSelectionContextSync(editor);
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, scheduleSelectionContextSync]);
+
+  useEffect(() => {
+    scheduleSelectionContextSync(editor);
+  }, [activeChapter?.id, activePage, centerView, editor, scheduleSelectionContextSync]);
+
+  useEffect(() => {
+    return () => {
+      if (selectionFrameRef.current !== null) {
+        window.cancelAnimationFrame(selectionFrameRef.current);
+        selectionFrameRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof EventSource === "undefined") return;
+    const events = new EventSource("/api/cowriter/events");
+    events.addEventListener("message", (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        if (payload.type === "change") void refreshProject(`Reloaded ${payload.path ?? "project files"}`);
+        if (payload.type === "codex-command" && payload.command?.command === "highlight") {
+          highlightHandlerRef.current(payload.command);
+        }
+      } catch {}
+    });
+
+    const poll = window.setInterval(() => void refreshProject(), 5000);
+
+    return () => {
+      events.close();
+      window.clearInterval(poll);
+    };
+  }, [refreshProject]);
+
+  useEffect(() => {
+    if (!editor || !activeChapter) return;
+    const editorChapterChanged = syncedEditorChapterId.current !== activeChapter.id;
+    const editorMarkdown = normalizedMarkdown(htmlToMarkdown(editor.getHTML()));
+    const chapterMarkdown = normalizedMarkdown(activeChapter.markdown);
+    const html = markdownToHtml(activeChapter.markdown);
+    if (editorChapterChanged || editorMarkdown !== chapterMarkdown) {
+      editor.commands.setContent(html, { emitUpdate: false });
+      bookPageRef.current?.style.setProperty("--manuscript-page-offset", "0px");
+      setActivePage(0);
+    }
+    syncedEditorChapterId.current = activeChapter.id;
+    schedulePaginationSync();
+  }, [editor, activeChapter?.id, activeChapter?.markdown, schedulePaginationSync]);
+
+  useEffect(() => {
+    if (!pendingHighlightRef.current || !editor || !activeChapter || centerView !== "manuscript") return;
+    const command = pendingHighlightRef.current;
+    pendingHighlightRef.current = null;
+    window.requestAnimationFrame(() => highlightHandlerRef.current(command));
+  }, [activeChapter?.id, activePage, centerView, editor]);
+
+  useEffect(() => {
+    if (centerView !== "manuscript") return;
+    const page = bookPageRef.current;
+    if (!page) return;
+
+    schedulePaginationSync();
+
+    const observer = new ResizeObserver(schedulePaginationSync);
+    observer.observe(page);
+    const clip = page.querySelector(".book-page-clip");
+    if (clip) observer.observe(clip);
+    const editorElement = page.querySelector(".ProseMirror");
+    if (editorElement) observer.observe(editorElement);
+
+    const preventPageScroll = (event: WheelEvent | TouchEvent) => {
+      event.preventDefault();
+    };
+    page.addEventListener("wheel", preventPageScroll, { passive: false });
+    page.addEventListener("touchmove", preventPageScroll, { passive: false });
+
+    return () => {
+      page.removeEventListener("wheel", preventPageScroll);
+      page.removeEventListener("touchmove", preventPageScroll);
+      observer.disconnect();
+      if (paginationFrameRef.current !== null) {
+        window.cancelAnimationFrame(paginationFrameRef.current);
+        paginationFrameRef.current = null;
+      }
+    };
+  }, [centerView, activeChapter?.id, schedulePaginationSync]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const currentView = centerViewRef.current;
+      if (
+        event.defaultPrevented ||
+        (currentView !== "front-matter" && currentView !== "manuscript") ||
+        event.isComposing ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey ||
+        (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      if (currentView === "front-matter") {
+        if (event.key === "ArrowRight" && firstChapterIdRef.current) {
+          setProject((current) => current ? { ...current, activeChapterId: firstChapterIdRef.current ?? current.activeChapterId } : current);
+          setActivePage(0);
+          setCenterView("manuscript");
+        }
+        return;
+      }
+
+      if (event.key === "ArrowLeft" && activePageRef.current === 0 && hasFrontMatterRef.current && activeChapterIndexRef.current === 0) {
+        setCenterView("front-matter");
+        return;
+      }
+
+      goToPageRef.current(event.key === "ArrowRight" ? activePageRef.current + 1 : activePageRef.current - 1);
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, []);
+
+  async function saveChapter() {
+    if (!project || !activeChapter || !editor) return;
+    const nextChapter = { ...activeChapter, markdown: htmlToMarkdown(editor.getHTML()), updatedAt: new Date().toISOString() };
+    try {
+      setProject(await writeChapter(project, nextChapter));
+      setStatus(`Saved ${nextChapter.path}`);
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Save failed");
+    }
+  }
+
+  function updateStoryField(key: keyof StoryBible, value: string) {
+    if (project) setProject({ ...project, story: { ...project.story, [key]: value } });
+  }
+
+  async function saveStoryBible() {
+    if (!project) return;
+    try {
+      let updated = await writeStory(project, project.story);
+      updated = await writeCharacters(updated, project.characters);
+      updated = await writeOutline(updated, project.outline);
+      setProject(updated);
+      setStatus("Story bible saved");
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : "Save failed");
+    }
+  }
+
+  function updateCharacter(id: string, patch: Partial<CharacterRecord>) {
+    if (!project) return;
+    setProject({ ...project, characters: project.characters.map((character) => (character.id === id ? { ...character, ...patch } : character)) });
+  }
+
+  function updateOutlineBeat(id: string, patch: Partial<OutlineBeat>) {
+    if (!project) return;
+    setProject({ ...project, outline: project.outline.map((beat) => (beat.id === id ? { ...beat, ...patch } : beat)) });
+  }
+
+  if (!project) {
+    return (
+      <main className="min-h-[100dvh] bg-[#f3efe7] text-stone-900">
+        <div className="mx-auto grid min-h-[100dvh] max-w-4xl place-items-center px-6 py-8 md:px-10">
+          <section className="w-full border-l border-stone-300 pl-6">
+            <div>
+              <p className="text-xs font-medium uppercase text-stone-500">Local macOS writer</p>
+              <h1 className="mt-8 max-w-2xl text-4xl font-semibold leading-none text-stone-950 md:text-6xl">Open a Cowriter book</h1>
+              <p className="mt-6 max-w-xl text-lg leading-8 text-stone-600">
+                This workspace must be served from a local book folder.
+              </p>
+            </div>
+            <div className="mt-10 grid gap-3 rounded-md border border-stone-300 bg-[#fffdf8] p-4 text-sm text-stone-700 shadow-[0_22px_56px_-44px_rgba(87,83,78,0.55)]">
+              <p>From a book folder, run:</p>
+              <code className="overflow-auto rounded bg-stone-950 px-3 py-2 font-mono text-xs text-stone-50">npx cowriter serve --open</code>
+              <p>For a new book folder, run <code className="font-mono text-xs text-stone-900">npx cowriter init</code> first.</p>
+              <StatusLine status={status} />
+            </div>
+          </section>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-[100dvh] overflow-auto bg-[#f3efe7] text-stone-900 lg:overflow-hidden">
+      <a className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-stone-900 focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-stone-50" href="#main-workspace">
+        Skip to manuscript
+      </a>
+      <div className="grid min-h-[100dvh] grid-cols-1 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <ProjectSidebar
+          activeChapter={activeChapter}
+          activePage={activePage}
+          activeStoryTab={activeStoryTab}
+          centerView={centerView}
+          chapterWordCount={chapterWordCount}
+          hasFrontMatter={hasFrontMatter}
+          pageCount={pageCount}
+          project={project}
+          status={status}
+          onOpenPromptHelp={() => setPromptHelpOpen(true)}
+          onSaveChapter={saveChapter}
+          onSelectFrontMatter={() => {
+            setActivePage(0);
+            setCenterView("front-matter");
+          }}
+          onSelectChapter={(chapterId) => {
+            setProject({ ...project, activeChapterId: chapterId });
+            setActivePage(0);
+            setCenterView("manuscript");
+          }}
+          onSelectStoryMaterial={(tabId) => {
+            setActiveStoryTab(tabId);
+            setCenterView(tabId);
+          }}
+        />
+
+        <section id="main-workspace" className={cn("grid min-h-[100dvh] px-4 py-4 md:px-8", isWritingView ? "grid-rows-[auto_minmax(0,1fr)]" : "grid-rows-[auto_auto_minmax(0,1fr)]")}>
+          {isStoryMaterialView ? (
+            <header className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <p className="text-xs uppercase text-stone-500">{activeMaterialEyebrow}</p>
+                <h1 className="text-xl font-semibold text-stone-950">{activeMaterial.label}</h1>
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusLine status={status} compact />
+                {activeStoryTab !== "reports" ? (
+                  <Button onClick={saveStoryBible}>
+                    <CheckIcon />
+                    Save material
+                  </Button>
+                ) : null}
+              </div>
+            </header>
+          ) : null}
+          <NarrowWorkspaceNav
+            activeStoryTab={activeStoryTab}
+            centerView={centerView}
+            chapters={project.chapters}
+            activeChapterId={project.activeChapterId}
+            hasFrontMatter={hasFrontMatter}
+            reportCount={project.reports.length}
+            onSelectFrontMatter={() => {
+              setActivePage(0);
+              setCenterView("front-matter");
+            }}
+            onSelectChapter={(chapterId) => {
+              setProject({ ...project, activeChapterId: chapterId });
+              setActivePage(0);
+              setCenterView("manuscript");
+            }}
+            onSelectStoryMaterial={(tabId) => {
+              setActiveStoryTab(tabId);
+              setCenterView(tabId);
+            }}
+          />
+          {isWritingView ? (
+            <div className="book-stage grid min-h-0 items-start justify-items-center overflow-visible">
+              <div className={cn("book-page", isFrontMatterVisible && "book-page--cover")} ref={bookPageRef}>
+                {isFrontMatterVisible && project.cover ? (
+                  <img
+                    className="book-cover-image"
+                    src={`/api/cowriter/cover?v=${encodeURIComponent(project.cover.updatedAt)}`}
+                    alt={`${project.metadata.title} cover`}
+                    draggable={false}
+                  />
+                ) : (
+                  <div className="book-page-clip">
+                    <EditorContent editor={editor} />
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <StoryMaterialWorkspace
+              activeStoryTab={activeStoryTab}
+              characters={project.characters}
+              outline={project.outline}
+              reports={project.reports}
+              activeReport={activeReport}
+              reportMarkdown={reportMarkdown}
+              reportStatus={reportStatus}
+              story={project.story}
+              onCharacterChange={updateCharacter}
+              onOutlineChange={updateOutlineBeat}
+              onReportSelect={setActiveReportPath}
+              onStoryChange={updateStoryField}
+            />
+          )}
+        </section>
+      </div>
+      <PromptHelpDialog open={promptHelpOpen} onClose={() => setPromptHelpOpen(false)} />
+    </main>
+  );
+}
+
+function ProjectSidebar({
+  activeChapter,
+  activePage,
+  activeStoryTab,
+  centerView,
+  chapterWordCount,
+  hasFrontMatter,
+  pageCount,
+  project,
+  status,
+  onOpenPromptHelp,
+  onSaveChapter,
+  onSelectFrontMatter,
+  onSelectChapter,
+  onSelectStoryMaterial,
+}: {
+  activeChapter: CowriterProject["chapters"][number] | null;
+  activePage: number;
+  activeStoryTab: StoryMaterialTab;
+  centerView: CenterView;
+  chapterWordCount: number;
+  hasFrontMatter: boolean;
+  pageCount: number;
+  project: CowriterProject;
+  status: string;
+  onOpenPromptHelp: () => void;
+  onSaveChapter: () => void;
+  onSelectFrontMatter: () => void;
+  onSelectChapter: (chapterId: string) => void;
+  onSelectStoryMaterial: (tabId: StoryMaterialTab) => void;
+}) {
+  const dirtyCount = project.git.changedPaths.length;
+  const projectPath = project.path.replace(/^\/Users\/mxcl(?=\/|$)/, "~");
+
+  return (
+    <aside className="hidden max-h-[100dvh] overflow-auto border-r border-stone-300 bg-[#fbfaf7] text-stone-900 lg:block" aria-label="Book workspace">
+      <div className="flex min-h-full flex-col px-4 py-4">
+        <div className="border-b border-stone-300 pb-4">
+          <div className="flex items-start gap-3">
+            <span className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-[5px] border border-stone-300 bg-[#fffdf8] text-stone-700 shadow-[0_16px_36px_-30px_rgba(87,83,78,0.45)]" aria-hidden="true">
+              <Pencil2Icon className="h-4 w-4" />
+            </span>
+            <div className="min-w-0">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">Cowriter</p>
+              <h1 className="mt-1 line-clamp-2 text-[22px] font-semibold leading-[1.05] tracking-tight text-stone-950">{project.metadata.title}</h1>
+              <p className="mt-1 truncate text-xs text-stone-500">{project.metadata.author}</p>
+            </div>
+          </div>
+
+          <div className="mt-4 grid gap-3 border-l border-stone-300 pl-3">
+            <div className="min-w-0">
+              <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-stone-500">Book folder</p>
+              <p className="mt-1 truncate whitespace-nowrap font-mono text-xs font-medium leading-5 text-stone-800" title={projectPath}>{projectPath}</p>
+            </div>
+            <div className="flex items-center justify-between gap-3 text-xs">
+              <span className="flex min-w-0 items-center gap-2 text-stone-600">
+                <span className={cn("h-1.5 w-1.5 rounded-full", project.git.dirty ? "bg-amber-700" : "bg-stone-400")} aria-hidden="true" />
+                <span className="truncate">{project.git.dirty ? "Uncommitted edits" : "Git clean"}</span>
+              </span>
+              {dirtyCount ? <span className="shrink-0 tabular-nums text-stone-500">{dirtyCount} changed</span> : null}
+            </div>
+          </div>
+        </div>
+
+        <SidebarSection label="Manuscript" count={project.chapters.length + (hasFrontMatter ? 1 : 0)}>
+          <nav className="grid gap-1.5" aria-label="Chapters">
+            {hasFrontMatter ? (
+              <SidebarNavButton
+                active={centerView === "front-matter"}
+                eyebrow="Cover, title, legal, prelude"
+                icon={<BookmarkIcon />}
+                label="Front matter"
+                marker="FM"
+                onClick={onSelectFrontMatter}
+              />
+            ) : null}
+            {project.chapters.map((chapter, index) => (
+              <SidebarNavButton
+                key={chapter.id}
+                active={centerView === "manuscript" && chapter.id === project.activeChapterId}
+                eyebrow={chapter.path}
+                icon={<FileTextIcon />}
+                label={chapter.title}
+                marker={String(index + 1).padStart(2, "0")}
+                onClick={() => onSelectChapter(chapter.id)}
+              />
+            ))}
+          </nav>
+        </SidebarSection>
+
+        {centerView === "manuscript" ? (
+          <ManuscriptSidebarControls
+            activeChapterPath={activeChapter?.path}
+            activeChapterTitle={activeChapter?.title}
+            activePage={activePage}
+            chapterWordCount={chapterWordCount}
+            pageCount={pageCount}
+            status={status}
+            onSave={onSaveChapter}
+          />
+        ) : centerView === "front-matter" ? (
+          <FrontMatterSidebarControls status={status} />
+        ) : null}
+
+        <SidebarSection label="Story Materials" count={storyMaterialTabs.length}>
+          <nav className="grid gap-1.5" aria-label="Story material">
+            {storyMaterialTabs.map((tab) => (
+              <SidebarNavButton
+                key={tab.id}
+                active={centerView === tab.id && activeStoryTab === tab.id}
+                eyebrow={storyMaterialEyebrow(tab.id, project.reports.length)}
+                icon={tab.id === "story" ? <ReaderIcon /> : tab.id === "characters" ? <PersonIcon /> : tab.id === "outline" ? <ListBulletIcon /> : <FileTextIcon />}
+                label={tab.label}
+                onClick={() => onSelectStoryMaterial(tab.id)}
+              />
+            ))}
+          </nav>
+        </SidebarSection>
+
+        <div className="mt-auto pt-4">
+          <button
+            type="button"
+            className="group grid w-full cursor-pointer grid-cols-[36px_1fr] items-center gap-3 rounded-[5px] border border-stone-300 bg-[#fffdf8] px-2 py-2 text-left text-sm text-stone-700 outline-none transition duration-200 ease-out hover:border-stone-400 hover:bg-stone-50 hover:text-stone-950 focus-visible:border-amber-700 active:translate-y-px"
+            onClick={onOpenPromptHelp}
+          >
+            <span className="grid h-8 w-8 place-items-center rounded-[4px] border border-stone-300 bg-stone-100 text-amber-700 transition group-hover:border-stone-400" aria-hidden="true">
+              <QuestionMarkCircledIcon />
+            </span>
+            <span className="min-w-0">
+              <span className="block truncate font-medium">Prompt help</span>
+              <span className="mt-0.5 block truncate text-xs text-stone-500">Examples for every workflow</span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function PromptHelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose, open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 grid place-items-stretch bg-stone-950/32 px-3 py-3 backdrop-blur-sm md:px-6 md:py-6" role="presentation" onMouseDown={onClose}>
+      <section
+        aria-modal="true"
+        aria-labelledby="prompt-help-title"
+        className="mx-auto grid min-h-0 w-full max-w-6xl grid-rows-[auto_minmax(0,1fr)] overflow-hidden rounded-[6px] border border-stone-300 bg-[#fbfaf7] text-stone-900 shadow-[0_32px_90px_-54px_rgba(87,83,78,0.7)]"
+        role="dialog"
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <header className="grid gap-4 border-b border-stone-300 px-4 py-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-start md:px-6">
+          <div className="max-w-3xl">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">Cowriter prompt guide</p>
+            <h2 id="prompt-help-title" className="mt-2 text-2xl font-semibold tracking-tight text-stone-950 md:text-3xl">Ask Codex from the book workspace</h2>
+            <p className="mt-3 text-sm leading-6 text-stone-600">
+              Use the explicit syntax when you want Codex to route the request through the installed Cowriter skill. Plain writing requests work too, but these prompts keep the target clear.
+            </p>
+          </div>
+          <Button className="h-9 rounded-[5px] px-2.5" variant="line" onClick={onClose} aria-label="Close prompt help">
+            <Cross2Icon />
+          </Button>
+        </header>
+
+        <div className="min-h-0 overflow-auto">
+          <div className="grid gap-0 divide-y divide-stone-300">
+            {promptHelpSections.map((section, index) => (
+              <PromptHelpFeature key={`${section.category}-${section.title}`} section={section} index={index} />
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function PromptHelpFeature({ index, section }: { index: number; section: PromptHelpSection }) {
+  const hasExamples = Boolean(section.before && section.after);
+
+  return (
+    <section className="grid gap-4 px-4 py-5 md:grid-cols-[220px_minmax(0,1fr)] md:px-6">
+      <div>
+        <p className="font-mono text-[11px] text-stone-500">{String(index + 1).padStart(2, "0")}</p>
+        <p className="mt-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-700">{section.category}</p>
+        <h3 className="mt-1 text-lg font-semibold leading-tight text-stone-950">{section.title}</h3>
+      </div>
+
+      <div className="grid gap-3">
+        <div className="grid gap-2">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">Prompt</p>
+          <code className="block overflow-auto rounded-[5px] border border-stone-300 bg-[#eee8dc] px-3 py-2 font-mono text-xs leading-5 text-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]">
+            {section.prompt}
+          </code>
+        </div>
+
+        {hasExamples ? (
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+            <PromptExampleBlock label={section.beforeLabel ?? "Before"} text={section.before ?? ""} />
+            <PromptExampleBlock label={section.afterLabel ?? "After"} text={section.after ?? ""} highlight />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+function PromptExampleBlock({ highlight, label, text }: { highlight?: boolean; label: string; text: string }) {
+  return (
+    <div className={cn("min-w-0 rounded-[5px] border px-3 py-3", highlight ? "border-amber-700/30 bg-amber-50/70" : "border-stone-300 bg-[#fffdf8]")}>
+      <p className={cn("text-[11px] font-semibold uppercase tracking-[0.14em]", highlight ? "text-amber-700" : "text-stone-500")}>{label}</p>
+      <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-stone-700">{text}</p>
+    </div>
+  );
+}
+
+function SidebarSection({ children, count, label }: { children: ReactNode; count?: number; label: string }) {
+  return (
+    <section className="border-b border-stone-300 py-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">{label}</h2>
+        {typeof count === "number" ? <span className="font-mono text-[11px] text-stone-500">{count}</span> : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function SidebarNavButton({
+  active,
+  eyebrow,
+  icon,
+  label,
+  marker,
+  onClick,
+}: {
+  active: boolean;
+  eyebrow: string;
+  icon: ReactNode;
+  label: string;
+  marker?: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        "group relative grid min-h-12 cursor-pointer grid-cols-[36px_1fr] items-center gap-3 rounded-[5px] px-2 py-2 text-left text-sm outline-none transition duration-200 ease-out active:translate-y-px",
+        active ? "bg-stone-200/80 text-stone-950 ring-1 ring-stone-300" : "text-stone-700 hover:bg-stone-100 focus-visible:bg-stone-100",
+      )}
+      type="button"
+      aria-current={active ? "page" : undefined}
+      onClick={onClick}
+    >
+      <span className={cn("absolute left-0 top-2 h-8 w-0.5 rounded-full transition", active ? "bg-amber-600" : "bg-transparent")} aria-hidden="true" />
+      <span className={cn("grid h-8 w-8 place-items-center rounded-[4px] border transition", active ? "border-stone-300 bg-[#fffdf8] text-stone-800" : "border-stone-300 bg-[#fffdf8] text-stone-500 group-hover:border-stone-400 group-hover:text-stone-700")} aria-hidden="true">
+        {marker ? <span className="font-mono text-[10px] font-semibold">{marker}</span> : icon}
+      </span>
+      <span className="min-w-0">
+        <span className="block truncate font-medium">{label}</span>
+        <span className={cn("mt-0.5 block truncate text-xs", active ? "text-stone-600" : "text-stone-500")}>{eyebrow}</span>
+      </span>
+    </button>
+  );
+}
+
+function ManuscriptSidebarControls({
+  activeChapterPath,
+  activeChapterTitle,
+  activePage,
+  chapterWordCount,
+  pageCount,
+  status,
+  onSave,
+}: {
+  activeChapterPath?: string;
+  activeChapterTitle?: string;
+  activePage: number;
+  chapterWordCount: number;
+  pageCount: number;
+  status: string;
+  onSave: () => void;
+}) {
+  const progress = pageCount > 0 ? Math.min(100, Math.max(0, ((activePage + 1) / pageCount) * 100)) : 0;
+
+  return (
+    <section className="border-b border-stone-300 py-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <BookmarkIcon className="text-amber-700" aria-hidden="true" />
+          <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">Active Chapter</h2>
+        </div>
+        <span className="font-mono text-[11px] text-stone-500">{activePage + 1}/{pageCount}</span>
+      </div>
+      <div className="mt-3 grid gap-3 border-l border-stone-300 pl-3">
+        <div className="min-w-0">
+          <h3 className="truncate text-sm font-semibold text-stone-950">{activeChapterTitle ?? "No chapter selected"}</h3>
+          <p className="mt-1 truncate text-xs text-stone-500">{activeChapterPath ?? "chapters/*.md"}</p>
+        </div>
+        <div className="grid gap-2 text-xs text-stone-500">
+          <div className="flex items-center justify-between gap-3 text-stone-700">
+            <span className="truncate">{chapterWordCount ? `${chapterWordCount} words` : "Empty chapter"}</span>
+            <span className="shrink-0 tabular-nums">Page {activePage + 1} of {pageCount}</span>
+          </div>
+          <div className="h-1 overflow-hidden rounded-full bg-stone-200" aria-hidden="true">
+            <div className="h-full rounded-full bg-amber-700 transition-[width] duration-300 ease-out" style={{ width: `${progress}%` }} />
+          </div>
+        </div>
+        <StatusLine status={status} />
+        <Button className="h-10 w-full cursor-pointer rounded-[5px]" onClick={onSave}>
+          <CheckIcon />
+          Save chapter
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+function FrontMatterSidebarControls({ status }: { status: string }) {
+  return (
+    <section className="border-b border-stone-300 py-4">
+      <div className="flex items-center gap-2">
+        <BookmarkIcon className="text-amber-700" aria-hidden="true" />
+        <h2 className="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone-500">Active Section</h2>
+      </div>
+      <div className="mt-3 grid gap-3 border-l border-stone-300 pl-3">
+        <div className="min-w-0">
+          <h3 className="truncate text-sm font-semibold text-stone-950">Front matter</h3>
+          <p className="mt-1 truncate text-xs text-stone-500">cover, title, legal, prelude</p>
+        </div>
+        <StatusLine status={status} />
+      </div>
+    </section>
+  );
+}
+
+function NarrowWorkspaceNav({
+  activeStoryTab,
+  centerView,
+  chapters,
+  activeChapterId,
+  hasFrontMatter,
+  reportCount,
+  onSelectFrontMatter,
+  onSelectChapter,
+  onSelectStoryMaterial,
+}: {
+  activeStoryTab: StoryMaterialTab;
+  centerView: CenterView;
+  chapters: CowriterProject["chapters"];
+  activeChapterId: string;
+  hasFrontMatter: boolean;
+  reportCount: number;
+  onSelectFrontMatter: () => void;
+  onSelectChapter: (chapterId: string) => void;
+  onSelectStoryMaterial: (tabId: StoryMaterialTab) => void;
+}) {
+  return (
+    <nav className="-mx-4 mt-4 flex gap-2 overflow-x-auto border-y border-stone-300 bg-[#fbfaf7]/95 px-4 py-2 text-sm md:-mx-8 md:px-8 lg:hidden" aria-label="Workspace">
+      {hasFrontMatter ? (
+        <button
+          className={cn(
+            "shrink-0 rounded-md px-3 py-2 text-left transition active:translate-y-px",
+            centerView === "front-matter" ? "bg-stone-200/80 text-stone-950 ring-1 ring-stone-300" : "text-stone-600 hover:bg-stone-100 hover:text-stone-950",
+          )}
+          onClick={onSelectFrontMatter}
+        >
+          <span className="block max-w-44 truncate font-medium">Front matter</span>
+          <span className="mt-1 block text-xs opacity-70">Cover, title, legal</span>
+        </button>
+      ) : null}
+      {chapters.map((chapter) => (
+        <button
+          key={chapter.id}
+          className={cn(
+            "shrink-0 rounded-md px-3 py-2 text-left transition active:translate-y-px",
+            centerView === "manuscript" && chapter.id === activeChapterId ? "bg-stone-200/80 text-stone-950 ring-1 ring-stone-300" : "text-stone-600 hover:bg-stone-100 hover:text-stone-950",
+          )}
+          onClick={() => onSelectChapter(chapter.id)}
+        >
+          <span className="block max-w-44 truncate font-medium">{chapter.title}</span>
+          <span className="mt-1 block text-xs opacity-70">Manuscript</span>
+        </button>
+      ))}
+      {storyMaterialTabs.map((tab) => (
+        <button
+          key={tab.id}
+          className={cn(
+            "shrink-0 rounded-md px-3 py-2 text-left transition active:translate-y-px",
+            centerView === tab.id && activeStoryTab === tab.id ? "bg-stone-200/80 text-stone-950 ring-1 ring-stone-300" : "text-stone-600 hover:bg-stone-100 hover:text-stone-950",
+          )}
+          onClick={() => onSelectStoryMaterial(tab.id)}
+        >
+          <span className="block max-w-48 truncate font-medium">{tab.label}</span>
+          <span className="mt-1 block text-xs opacity-70">{storyMaterialEyebrow(tab.id, reportCount)}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+function StoryMaterialWorkspace({
+  activeStoryTab,
+  activeReport,
+  characters,
+  outline,
+  reports,
+  reportMarkdown,
+  reportStatus,
+  story,
+  onCharacterChange,
+  onOutlineChange,
+  onReportSelect,
+  onStoryChange,
+}: {
+  activeStoryTab: StoryMaterialTab;
+  activeReport: CowriterReport | null;
+  characters: CharacterRecord[];
+  outline: OutlineBeat[];
+  reports: CowriterReport[];
+  reportMarkdown: string;
+  reportStatus: string;
+  story: StoryBible;
+  onCharacterChange: (id: string, patch: Partial<CharacterRecord>) => void;
+  onOutlineChange: (id: string, patch: Partial<OutlineBeat>) => void;
+  onReportSelect: (path: string) => void;
+  onStoryChange: (key: keyof StoryBible, value: string) => void;
+}) {
+  return (
+    <div className="my-5 min-h-0 overflow-auto border-y border-stone-300 bg-[#fbfaf7]">
+      <div className={cn("mx-auto w-full px-3 py-6 sm:px-4 md:px-6", activeStoryTab === "reports" ? "max-w-6xl" : "max-w-5xl")}>
+        {activeStoryTab === "story" ? (
+          <StoryFields story={story} onChange={onStoryChange} />
+        ) : activeStoryTab === "characters" ? (
+          <CharacterFields characters={characters} onChange={onCharacterChange} />
+        ) : activeStoryTab === "outline" ? (
+          <OutlineFields outline={outline} onChange={onOutlineChange} />
+        ) : (
+          <ReportFields reports={reports} activeReport={activeReport} markdown={reportMarkdown} status={reportStatus} onSelect={onReportSelect} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StoryFields({ story, onChange }: { story: StoryBible; onChange: (key: keyof StoryBible, value: string) => void }) {
+  return (
+    <div className="grid gap-4">
+      <Field label="Title"><Input value={story.title} placeholder={storyPlaceholders.title} onChange={(event) => onChange("title", event.target.value)} /></Field>
+      <Field label="Synopsis"><Textarea className={longMaterialTextareaClass} value={story.synopsis} placeholder={storyPlaceholders.synopsis} onChange={(event) => onChange("synopsis", event.target.value)} /></Field>
+      <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
+        <Field label="Setting"><Textarea className={materialTextareaClass} value={story.setting} placeholder={storyPlaceholders.setting} onChange={(event) => onChange("setting", event.target.value)} /></Field>
+        <Field label="Themes"><Textarea className={materialTextareaClass} value={story.themes} placeholder={storyPlaceholders.themes} onChange={(event) => onChange("themes", event.target.value)} /></Field>
+      </div>
+      <div className="grid grid-cols-1 gap-3 xl:grid-cols-3">
+        <Field label="Genre"><StoryNoteTextarea value={story.genre} placeholder={storyPlaceholders.genre} onChange={(event) => onChange("genre", event.target.value)} /></Field>
+        <Field label="Tone"><StoryNoteTextarea value={story.tone} placeholder={storyPlaceholders.tone} onChange={(event) => onChange("tone", event.target.value)} /></Field>
+        <Field label="Perspective"><StoryNoteTextarea value={story.perspective} placeholder={storyPlaceholders.perspective} onChange={(event) => onChange("perspective", event.target.value)} /></Field>
+      </div>
+      <Field label="Continuity"><Textarea className={longMaterialTextareaClass} value={story.continuity} placeholder={storyPlaceholders.continuity} onChange={(event) => onChange("continuity", event.target.value)} /></Field>
+    </div>
+  );
+}
+
+function StoryNoteTextarea({ value, className, minRows = 2, maxRows = 6, ...props }: ComponentProps<typeof Textarea> & { value: string; minRows?: number; maxRows?: number }) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const style = window.getComputedStyle(textarea);
+    const lineHeight = Number.parseFloat(style.lineHeight) || 20;
+    const verticalPadding = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+    const verticalBorder = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+    const minHeight = lineHeight * minRows + verticalPadding + verticalBorder;
+    const maxHeight = lineHeight * maxRows + verticalPadding + verticalBorder;
+
+    textarea.style.height = "auto";
+    textarea.style.minHeight = `${minHeight}px`;
+    textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [maxRows, minRows, value]);
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      className={cn("resize-none overflow-hidden text-[13px] leading-5 md:text-sm md:leading-6", className)}
+      value={value}
+      {...props}
+    />
+  );
+}
+
+function CharacterFields({ characters, onChange }: { characters: CharacterRecord[]; onChange: (id: string, patch: Partial<CharacterRecord>) => void }) {
+  if (!characters.length) {
+    return <EmptyMaterialState title="No characters yet" body="Send Codex the synopsis and ask for a cast list, or add character files in the project folder." />;
+  }
+
+  return (
+    <div className="grid gap-4">
+      {characters.map((character) => (
+        <div key={character.id} className="grid gap-3 border-t border-stone-300 pt-3">
+          <div className="grid grid-cols-1 gap-3 md:grid-cols-[1fr_0.8fr]">
+            <Field label="Name"><Input value={character.name} placeholder={characterPlaceholders.name} onChange={(event) => onChange(character.id, { name: event.target.value })} /></Field>
+            <Field label="Role"><Input value={character.role} placeholder={characterPlaceholders.role} onChange={(event) => onChange(character.id, { role: event.target.value })} /></Field>
+          </div>
+          <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
+            <Field label="Desire"><Textarea className={materialTextareaClass} value={character.desire} placeholder={characterPlaceholders.desire} onChange={(event) => onChange(character.id, { desire: event.target.value })} /></Field>
+            <Field label="Conflict"><Textarea className={materialTextareaClass} value={character.conflict} placeholder={characterPlaceholders.conflict} onChange={(event) => onChange(character.id, { conflict: event.target.value })} /></Field>
+          </div>
+          <Field label="Notes"><Textarea className={longMaterialTextareaClass} value={character.notes} placeholder={characterPlaceholders.notes} onChange={(event) => onChange(character.id, { notes: event.target.value })} /></Field>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function OutlineFields({ outline, onChange }: { outline: OutlineBeat[]; onChange: (id: string, patch: Partial<OutlineBeat>) => void }) {
+  if (!outline.length) {
+    return <EmptyMaterialState title="No outline beats yet" body="Once the synopsis has a shape, ask Codex for a first structure pass." />;
+  }
+
+  return (
+    <div className="grid gap-4">
+      {outline.map((beat) => (
+        <div key={beat.id} className="grid gap-3 border-t border-stone-300 pt-3">
+          <Field label="Beat"><Input value={beat.title} placeholder={outlinePlaceholders.title} onChange={(event) => onChange(beat.id, { title: event.target.value })} /></Field>
+          <Field label="Summary"><Textarea className={longMaterialTextareaClass} value={beat.summary} placeholder={outlinePlaceholders.summary} onChange={(event) => onChange(beat.id, { summary: event.target.value })} /></Field>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ReportFields({
+  activeReport,
+  markdown,
+  reports,
+  status,
+  onSelect,
+}: {
+  activeReport: CowriterReport | null;
+  markdown: string;
+  reports: CowriterReport[];
+  status: string;
+  onSelect: (path: string) => void;
+}) {
+  if (!reports.length) {
+    return <EmptyMaterialState title="No reports yet" body="Approved prose diagnostics and review workflows can save Markdown reports here for later reading." />;
+  }
+
+  const renderedMarkdown = markdownToHtml(stripReportFrontmatter(markdown));
+
+  return (
+    <div className="grid min-h-[62dvh] gap-4 2xl:grid-cols-[minmax(240px,300px)_minmax(680px,1fr)]">
+      <aside className="min-h-0 overflow-auto border border-stone-300 bg-[#fffdf8] 2xl:max-h-none" aria-label="Reports">
+        <div className="flex gap-2 overflow-x-auto p-2 2xl:grid 2xl:gap-1 2xl:overflow-visible">
+          {reports.map((report) => {
+            const active = activeReport?.path === report.path;
+            return (
+              <button
+                key={report.path}
+                type="button"
+                className={cn(
+                  "grid min-w-[min(22rem,82vw)] gap-2 rounded-[5px] px-3 py-3 text-left text-sm transition active:translate-y-px 2xl:min-w-0",
+                  active ? "bg-stone-200/80 text-stone-950 ring-1 ring-stone-300" : "text-stone-700 hover:bg-stone-100 hover:text-stone-950",
+                )}
+                aria-current={active ? "page" : undefined}
+                onClick={() => onSelect(report.path)}
+              >
+                <span className="flex min-w-0 items-center justify-between gap-3">
+                  <span className="truncate font-medium">{report.title}</span>
+                  <span className={cn("shrink-0 rounded-[4px] px-1.5 py-0.5 font-mono text-[10px] uppercase", active ? "bg-[#fffdf8] text-stone-600" : "bg-stone-100 text-stone-500")}>{report.status}</span>
+                </span>
+                <span className={cn("grid gap-1 text-xs", active ? "text-stone-600" : "text-stone-500")}>
+                  <span className="truncate">{report.type}</span>
+                  {report.chapter ? <span className="truncate">{report.chapter}</span> : null}
+                  <span className="truncate">{formatReportDate(report.createdAt)}</span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </aside>
+
+      <section className="min-w-0 border border-stone-300 bg-[#fffdf8] text-stone-950">
+        <header className="border-b border-stone-200 px-5 py-4 sm:px-7 lg:px-8">
+          <div className="mx-auto w-full max-w-[76ch]">
+            <p className="text-xs font-medium uppercase tracking-[0.12em] text-stone-500">{activeReport?.type ?? "Report"}</p>
+            <h2 className="mt-1 text-xl font-semibold leading-tight text-stone-950">{activeReport?.title ?? "Select a report"}</h2>
+            <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-stone-500">
+              {activeReport?.chapter ? <span>{activeReport.chapter}</span> : null}
+              {activeReport ? <span>{formatReportDate(activeReport.createdAt)}</span> : null}
+              <span>{status}</span>
+            </div>
+          </div>
+        </header>
+        <article className="report-markdown mx-auto min-h-[52dvh] w-full max-w-[76ch] px-5 py-5 sm:px-7 lg:px-8" dangerouslySetInnerHTML={{ __html: renderedMarkdown || "<p>No report content.</p>" }} />
+      </section>
+    </div>
+  );
+}
+
+function EmptyMaterialState({ title, body }: { title: string; body: string }) {
+  return (
+    <div className="grid min-h-72 place-items-center border border-dashed border-stone-300 bg-[#fffdf8] px-6 text-center">
+      <div>
+        <h2 className="text-lg font-semibold text-stone-950">{title}</h2>
+        <p className="mt-2 max-w-md text-sm leading-6 text-stone-600">{body}</p>
+      </div>
+    </div>
+  );
+}
+
+function StatusLine({ status, compact }: { status: string; compact?: boolean }) {
+  return (
+    <div className={cn("flex min-w-0 items-center gap-2 text-xs text-stone-500", compact && "justify-end")}>
+      <span className="h-2 w-2 shrink-0 rounded-full bg-amber-700/70" />
+      <span className="shrink-0">Local workspace</span>
+      <span className="min-w-0 truncate">{status}</span>
+    </div>
+  );
+}