plotlink-ows 1.0.8 → 1.0.13

package/app/routes/stories.ts

@@ -27,6 +27,7 @@ interface FileStatus {
 
 interface StoryInfo {
   name: string;
+  title: string | null;
   files: FileStatus[];
   hasStructure: boolean;
   hasGenesis: boolean;
@@ -66,7 +67,23 @@ function scanStory(storyDir: string, name: string): StoryInfo {
   const plotCount = entries.filter((f) => f.match(/^plot-\d+\.md$/)).length;
   const publishedCount = files.filter((f) => f.status === "published" || f.status === "published-not-indexed").length;
 
-  return { name, files, hasStructure, hasGenesis, plotCount, publishedCount };
+  // Extract title from structure.md or genesis.md
+  let title: string | null = null;
+  try {
+    const structPath = path.join(storyDir, "structure.md");
+    const genesisPath = path.join(storyDir, "genesis.md");
+    if (fs.existsSync(structPath)) {
+      const content = fs.readFileSync(structPath, "utf-8");
+      const match = content.match(/^#\s+(.+)$/m);
+      if (match) title = match[1];
+    } else if (fs.existsSync(genesisPath)) {
+      const content = fs.readFileSync(genesisPath, "utf-8");
+      const match = content.match(/^#\s+(.+)$/m);
+      if (match) title = match[1];
+    }
+  } catch { /* best effort */ }
+
+  return { name, title, files, hasStructure, hasGenesis, plotCount, publishedCount };
 }
 
 /** GET /api/stories — list all stories */
@@ -84,6 +101,59 @@ stories.get("/", (c) => {
   return c.json({ stories: result });
 });
 
+const ARCHIVED_DIR = path.join(STORIES_DIR, ".archived");
+
+/** GET /api/stories/archived — list archived stories */
+stories.get("/archived", (c) => {
+  if (!fs.existsSync(ARCHIVED_DIR)) {
+    return c.json({ stories: [] });
+  }
+
+  const dirs = fs.readdirSync(ARCHIVED_DIR, { withFileTypes: true })
+    .filter((d) => d.isDirectory() && !d.name.startsWith("."))
+    .map((d) => d.name)
+    .sort();
+
+  const result = dirs.map((name) => scanStory(path.join(ARCHIVED_DIR, name), name));
+  return c.json({ stories: result });
+});
+
+/** POST /api/stories/archive — move story to .archived/ */
+stories.post("/archive", async (c) => {
+  const body = await c.req.json<{ name: string }>();
+  const name = safeName(body.name);
+  if (!name) return c.json({ error: "Invalid story name" }, 400);
+
+  const src = path.join(STORIES_DIR, name);
+  if (!fs.existsSync(src)) return c.json({ error: "Story not found" }, 404);
+  if (!fs.existsSync(path.join(src, "structure.md"))) {
+    return c.json({ error: "Only stories with structure.md can be archived" }, 400);
+  }
+
+  fs.mkdirSync(ARCHIVED_DIR, { recursive: true });
+  const dest = path.join(ARCHIVED_DIR, name);
+  if (fs.existsSync(dest)) return c.json({ error: "Already archived" }, 409);
+
+  fs.renameSync(src, dest);
+  return c.json({ ok: true });
+});
+
+/** POST /api/stories/restore — move story back from .archived/ */
+stories.post("/restore", async (c) => {
+  const body = await c.req.json<{ name: string }>();
+  const name = safeName(body.name);
+  if (!name) return c.json({ error: "Invalid story name" }, 400);
+
+  const src = path.join(ARCHIVED_DIR, name);
+  if (!fs.existsSync(src)) return c.json({ error: "Archived story not found" }, 404);
+
+  const dest = path.join(STORIES_DIR, name);
+  if (fs.existsSync(dest)) return c.json({ error: "Story already exists" }, 409);
+
+  fs.renameSync(src, dest);
+  return c.json({ ok: true });
+});
+
 /** GET /api/stories/:name — single story detail */
 stories.get("/:name", (c) => {
   const name = safeName(c.req.param("name"));

package/app/routes/terminal.ts

@@ -43,7 +43,9 @@ function saveSessionMap(map: Record<string, string>) {
 }
 
 function spawnPty(storyName: string, opts?: { sessionId?: string; resume?: boolean }) {
-  const storyDir = path.join(STORIES_DIR, storyName);
+  // New story sessions spawn in the stories root so Claude can create any folder
+  const isNewStory = storyName.startsWith("_new_");
+  const storyDir = isNewStory ? STORIES_DIR : path.join(STORIES_DIR, storyName);
   if (!fs.existsSync(storyDir)) fs.mkdirSync(storyDir, { recursive: true });
   const shell = process.env.SHELL || "/bin/zsh";
 
@@ -165,6 +167,32 @@ terminal.delete("/:storyName", (c) => {
   return c.json({ ok: true, message: "not running" });
 });
 
+/** DELETE /api/terminal/:storyName/discard — discard session, kill PTY, clean up metadata */
+terminal.delete("/:storyName/discard", (c) => {
+  const storyName = safeName(c.req.param("storyName"));
+  if (!storyName) return c.json({ error: "Invalid story name" }, 400);
+
+  const session = ptySessions.get(storyName);
+  if (session?.term && session.state === "running") {
+    // Send exit gracefully, then kill
+    try { session.term.write("exit\n"); } catch { /* ignore */ }
+    setTimeout(() => {
+      try { session.term.kill(); } catch { /* ignore */ }
+    }, 500);
+    session.state = "stopped";
+  }
+  ptySessions.delete(storyName);
+
+  // Remove session metadata from terminal-sessions.json
+  const sessionMap = loadSessionMap();
+  if (sessionMap[storyName]) {
+    delete sessionMap[storyName];
+    saveSessionMap(sessionMap);
+  }
+
+  return c.json({ ok: true });
+});
+
 /** POST /api/terminal/stop — kill PTY (legacy, kills default) */
 terminal.post("/stop", (c) => {
   const session = ptySessions.get("default");

package/app/web/components/StoriesPage.tsx

@@ -39,6 +39,8 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
   const [publishingFile, setPublishingFile] = useState<string | null>(null);
   const [publishProgress, setPublishProgress] = useState<string>("");
   const [ratio, setRatio] = useState(loadRatio);
+  const [untitledSessions, setUntitledSessions] = useState<string[]>([]);
+  const knownStoriesRef = useRef<Set<string>>(new Set());
   const containerRef = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
 
@@ -60,6 +62,56 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
+  const handleNewStory = useCallback(() => {
+    const id = `_new_${Date.now()}`;
+    setUntitledSessions((prev) => [...prev, id]);
+    setSelectedStory(id);
+    setSelectedFile(null);
+  }, []);
+
+  // Poll for new stories and auto-transition untitled sessions
+  useEffect(() => {
+    if (untitledSessions.length === 0) return;
+    const interval = setInterval(async () => {
+      try {
+        const res = await authFetch("/api/stories");
+        if (!res.ok) return;
+        const data = await res.json();
+        const currentNames = new Set<string>(
+          (data.stories as { name: string }[])
+            .filter((s) => s.name !== "_example")
+            .map((s) => s.name)
+        );
+        // Detect newly appeared stories
+        for (const name of currentNames) {
+          if (!knownStoriesRef.current.has(name) && untitledSessions.length > 0) {
+            // New story appeared — transition the oldest untitled session
+            setUntitledSessions((prev) => prev.slice(1));
+            setSelectedStory(name);
+            setSelectedFile(null);
+          }
+        }
+        knownStoriesRef.current = currentNames;
+      } catch { /* ignore */ }
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [authFetch, untitledSessions]);
+
+  // Initialize known stories on mount
+  useEffect(() => {
+    authFetch("/api/stories").then((res) => {
+      if (res.ok) return res.json();
+    }).then((data) => {
+      if (data?.stories) {
+        knownStoriesRef.current = new Set(
+          (data.stories as { name: string }[])
+            .filter((s) => s.name !== "_example")
+            .map((s) => s.name)
+        );
+      }
+    }).catch(() => {});
+  }, [authFetch]);
+
   const handleSelectFile = useCallback((storyName: string, fileName: string) => {
     setSelectedStory(storyName);
     setSelectedFile(fileName);
@@ -220,6 +272,48 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
     }
   }, [authFetch]);
 
+  const handleDestroySession = useCallback((name: string) => {
+    if (name.startsWith("_new_")) {
+      setUntitledSessions((prev) => prev.filter((id) => id !== name));
+    }
+  }, []);
+
+  // Track confirmed stories (those with structure.md) for Archive gating
+  const [confirmedStories, setConfirmedStories] = useState<Set<string>>(new Set());
+  useEffect(() => {
+    authFetch("/api/stories").then((res) => res.ok ? res.json() : null).then((data) => {
+      if (data?.stories) {
+        setConfirmedStories(new Set(
+          (data.stories as { name: string; hasStructure: boolean }[])
+            .filter((s) => s.hasStructure)
+            .map((s) => s.name)
+        ));
+      }
+    }).catch(() => {});
+    const interval = setInterval(async () => {
+      try {
+        const res = await authFetch("/api/stories");
+        if (res.ok) {
+          const data = await res.json();
+          setConfirmedStories(new Set(
+            (data.stories as { name: string; hasStructure: boolean }[])
+              .filter((s) => s.hasStructure)
+              .map((s) => s.name)
+          ));
+        }
+      } catch { /* ignore */ }
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [authFetch]);
+
+  const handleArchiveStory = useCallback((name: string) => {
+    // Archive API already called by TerminalPanel — just clear selection
+    if (selectedStory === name) {
+      setSelectedStory(null);
+      setSelectedFile(null);
+    }
+  }, [selectedStory]);
+
   return (
     <div ref={containerRef} className="h-[calc(100vh-3.5rem)] flex">
       {/* Story Browser Sidebar */}
@@ -229,12 +323,14 @@ export function StoriesPage({ token, authFetch }: StoriesPageProps) {
           selectedStory={selectedStory}
           selectedFile={selectedFile}
           onSelectFile={handleSelectFile}
+          onNewStory={handleNewStory}
+          untitledSessions={untitledSessions}
         />
       </div>
 
       {/* Terminal — sized by ratio of available space */}
       <div className="min-w-0 border-r border-border" style={{ flex: `${ratio} 0 0` }}>
-        <TerminalPanel token={token} storyName={selectedStory} authFetch={authFetch} onSelectStory={handleSelectStory} />
+        <TerminalPanel token={token} storyName={selectedStory} authFetch={authFetch} onSelectStory={handleSelectStory} onDestroySession={handleDestroySession} onArchiveStory={handleArchiveStory} confirmedStories={confirmedStories} />
       </div>
 
       {/* Drag Handle */}

package/app/web/components/StoryBrowser.tsx

@@ -9,6 +9,7 @@ interface FileStatus {
 
 interface StoryInfo {
   name: string;
+  title: string | null;
   files: FileStatus[];
   hasStructure: boolean;
   hasGenesis: boolean;
@@ -21,6 +22,8 @@ interface StoryBrowserProps {
   selectedStory: string | null;
   selectedFile: string | null;
   onSelectFile: (storyName: string, fileName: string) => void;
+  onNewStory?: () => void;
+  untitledSessions?: string[];
 }
 
 const STATUS_ICON: Record<string, string> = {
@@ -37,9 +40,11 @@ const STATUS_COLOR: Record<string, string> = {
   "draft": "text-muted",
 };
 
-export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectFile }: StoryBrowserProps) {
+export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectFile, onNewStory, untitledSessions = [] }: StoryBrowserProps) {
   const [stories, setStories] = useState<StoryInfo[]>([]);
+  const [archivedStories, setArchivedStories] = useState<StoryInfo[]>([]);
   const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [showArchives, setShowArchives] = useState(false);
 
   const loadStories = useCallback(async () => {
     try {
@@ -51,6 +56,30 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     } catch { /* ignore */ }
   }, [authFetch]);
 
+  const loadArchivedStories = useCallback(async () => {
+    try {
+      const res = await authFetch("/api/stories/archived");
+      if (res.ok) {
+        const data = await res.json();
+        setArchivedStories(data.stories);
+      }
+    } catch { /* ignore */ }
+  }, [authFetch]);
+
+  const handleRestore = useCallback(async (name: string) => {
+    try {
+      const res = await authFetch("/api/stories/restore", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (res.ok) {
+        loadArchivedStories();
+        loadStories();
+      }
+    } catch { /* ignore */ }
+  }, [authFetch, loadArchivedStories, loadStories]);
+
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect -- initial load + polling
     loadStories();
@@ -58,6 +87,14 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     return () => clearInterval(interval);
   }, [loadStories]);
 
+  // Load archived stories when archives view is shown
+  useEffect(() => {
+    if (showArchives) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- initial load for archives
+      loadArchivedStories();
+    }
+  }, [showArchives, loadArchivedStories]);
+
   // Auto-expand selected story
   useEffect(() => {
     if (selectedStory) {
@@ -108,17 +145,81 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
     return [...files].sort((a, b) => order(a.file) - order(b.file));
   };
 
+  if (showArchives) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="px-3 py-1.5 border-b border-border flex items-center justify-between">
+          <span className="text-xs font-mono text-muted">Archives</span>
+          <span className="text-xs text-muted">{archivedStories.length}</span>
+        </div>
+        <div className="px-3 py-2 border-b border-border">
+          <button
+            onClick={() => setShowArchives(false)}
+            className="w-full px-3 py-1.5 text-sm text-muted hover:text-foreground hover:bg-surface rounded flex items-center gap-1.5"
+          >
+            <span>&larr;</span>
+            <span>Back</span>
+          </button>
+        </div>
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          {archivedStories.length === 0 ? (
+            <div className="p-3 text-sm text-muted">
+              <p>No archived stories.</p>
+            </div>
+          ) : (
+            archivedStories.map((story) => (
+              <div key={story.name} className="px-3 py-2 flex items-center justify-between hover:bg-surface">
+                <span className="text-sm font-medium truncate" title={story.name}>{story.title || story.name}</span>
+                <button
+                  onClick={() => handleRestore(story.name)}
+                  className="text-xs text-accent hover:text-accent-dim flex-shrink-0 ml-2"
+                >
+                  Restore
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="h-full flex flex-col">
       <div className="px-3 py-1.5 border-b border-border flex items-center justify-between">
         <span className="text-xs font-mono text-muted">Stories</span>
         <span className="text-xs text-muted">{stories.length}</span>
       </div>
+      {onNewStory && (
+        <div className="px-3 py-2 border-b border-border">
+          <button
+            onClick={onNewStory}
+            className="w-full px-3 py-1.5 text-sm bg-accent text-white rounded hover:bg-accent-dim flex items-center justify-center gap-1.5"
+          >
+            <span>+</span>
+            <span>New Story</span>
+          </button>
+        </div>
+      )}
       <div className="flex-1 min-h-0 overflow-y-auto">
-        {stories.length === 0 ? (
+        {/* Untitled new story sessions */}
+        {untitledSessions.map((id) => (
+          <div key={id}>
+            <button
+              onClick={() => onSelectFile(id, "")}
+              className={`w-full px-3 py-2 text-left flex items-center gap-2 hover:bg-surface text-sm ${
+                selectedStory === id ? "bg-surface" : ""
+              }`}
+            >
+              <span className="w-1.5 h-1.5 rounded-full bg-green-600 flex-shrink-0" />
+              <span className="font-medium italic text-muted">Untitled</span>
+            </button>
+          </div>
+        ))}
+        {stories.length === 0 && untitledSessions.length === 0 ? (
           <div className="p-3 text-sm text-muted">
             <p>No stories yet.</p>
-            <p className="mt-1 text-xs">Use the terminal to start writing with Claude.</p>
+            <p className="mt-1 text-xs">Click &quot;+ New Story&quot; above to start writing.</p>
           </div>
         ) : (
           stories.filter((s) => s.name !== "_example").map((story) => (
@@ -128,7 +229,7 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
                 className="w-full px-3 py-2 text-left flex items-center gap-2 hover:bg-surface text-sm"
               >
                 <span className="text-xs text-muted">{expanded.has(story.name) ? "\u25BC" : "\u25B6"}</span>
-                <span className="font-medium truncate">{story.name}</span>
+                <span className="font-medium truncate" title={story.name}>{story.title || story.name}</span>
                 <span className="ml-auto text-xs text-muted">
                   {story.publishedCount}/{story.files.length}
                 </span>
@@ -156,6 +257,14 @@ export function StoryBrowser({ authFetch, selectedStory, selectedFile, onSelectF
           ))
         )}
       </div>
+      <div className="px-3 py-2 border-t border-border">
+        <button
+          onClick={() => setShowArchives(true)}
+          className="w-full px-3 py-1.5 text-xs text-muted hover:text-foreground hover:bg-surface rounded flex items-center justify-center gap-1.5"
+        >
+          <span>Archives</span>
+        </button>
+      </div>
     </div>
   );
 }

package/app/web/components/TerminalPanel.tsx

@@ -9,6 +9,9 @@ interface TerminalPanelProps {
   storyName: string | null;
   authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
   onSelectStory?: (storyName: string) => void;
+  onDestroySession?: (storyName: string) => void;
+  onArchiveStory?: (storyName: string) => void;
+  confirmedStories?: Set<string>;
 }
 
 interface TerminalSession {
@@ -89,14 +92,26 @@ async function loadScrollback(storyName: string): Promise<string | null> {
   });
 }
 
+async function deleteScrollback(storyName: string): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).delete(storyName);
+    tx.oncomplete = () => { db.close(); resolve(); };
+    tx.onerror = () => { db.close(); reject(tx.error); };
+  });
+}
+
 // Sessions live outside React state to avoid ref-in-effect lint issues
 const sessions = new Map<string, TerminalSession>();
 
-export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: TerminalPanelProps) {
+export function TerminalPanel({ token, storyName, authFetch, onSelectStory, onDestroySession, onArchiveStory, confirmedStories }: TerminalPanelProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const authFetchRef = useRef(authFetch);
   const [sessionList, setSessionList] = useState<string[]>([]);
   const [disconnected, setDisconnected] = useState<Set<string>>(new Set());
+  const [confirmingDiscard, setConfirmingDiscard] = useState<string | null>(null);
+  const [confirmingArchive, setConfirmingArchive] = useState<string | null>(null);
 
   const connectWsRef = useRef<(name: string, session: TerminalSession, resume: boolean) => void>(() => {});
 
@@ -283,7 +298,34 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: Te
     setDisconnected((prev) => { const next = new Set(prev); next.delete(name); return next; });
 
     authFetch(`/api/terminal/${encodeURIComponent(name)}`, { method: "DELETE" }).catch(() => {});
-  }, [authFetch]);
+    onDestroySession?.(name);
+  }, [authFetch, onDestroySession]);
+
+  /** Discard an untitled session: send exit, kill PTY, delete scrollback & session metadata */
+  const discardSession = useCallback((name: string) => {
+    const session = sessions.get(name);
+    if (!session) return;
+
+    // Send exit command gracefully before killing
+    if (session.ws?.readyState === WebSocket.OPEN) {
+      session.ws.send("exit\n");
+    }
+
+    // Delete scrollback instead of saving
+    deleteScrollback(name).catch(() => {});
+
+    session.observer.disconnect();
+    if (session.ws) session.ws.close();
+    session.term.dispose();
+    session.container.remove();
+    sessions.delete(name);
+    setSessionList((prev) => prev.filter((s) => s !== name));
+    setDisconnected((prev) => { const next = new Set(prev); next.delete(name); return next; });
+
+    // Use discard endpoint to kill PTY and clean up session metadata
+    authFetch(`/api/terminal/${encodeURIComponent(name)}/discard`, { method: "DELETE" }).catch(() => {});
+    onDestroySession?.(name);
+  }, [authFetch, onDestroySession]);
 
   // Auto-spawn + show/hide when story changes
   useEffect(() => {
@@ -365,11 +407,17 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: Te
               <span className={`w-1.5 h-1.5 rounded-full ${
                 disconnected.has(name) ? "bg-amber-500" : name === storyName ? "bg-green-600" : "bg-muted/50"
               }`} />
-              <span className="truncate max-w-[120px]">{name}</span>
+              <span className={`truncate max-w-[120px] ${name.startsWith("_new_") ? "italic" : ""}`}>
+                {name.startsWith("_new_") ? "Untitled" : name}
+              </span>
               <button
                 onClick={(e) => {
                   e.stopPropagation();
-                  destroySession(name);
+                  if (name.startsWith("_new_")) {
+                    setConfirmingDiscard(name);
+                  } else {
+                    destroySession(name);
+                  }
                 }}
                 className="ml-0.5 text-muted hover:text-error text-[10px] leading-none"
                 title="Close terminal"
@@ -379,6 +427,22 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: Te
             </div>
           ))
         }
+        {/* Cancel button for untitled / Archive button for confirmed stories */}
+        {storyName?.startsWith("_new_") ? (
+          <button
+            onClick={() => setConfirmingDiscard(storyName)}
+            className="ml-auto px-2 py-0.5 text-xs text-error hover:bg-surface rounded flex items-center gap-1 flex-shrink-0"
+          >
+            Cancel ×
+          </button>
+        ) : storyName && onArchiveStory && confirmedStories?.has(storyName) ? (
+          <button
+            onClick={() => setConfirmingArchive(storyName)}
+            className="ml-auto px-2 py-0.5 text-xs text-muted hover:text-foreground hover:bg-surface rounded flex items-center gap-1 flex-shrink-0"
+          >
+            Archive
+          </button>
+        ) : null}
       </div>
       )}
 
@@ -396,6 +460,76 @@ export function TerminalPanel({ token, storyName, authFetch, onSelectStory }: Te
           </div>
         )}
 
+        {/* Discard confirmation overlay */}
+        {confirmingDiscard && (
+          <div className="absolute inset-0 flex items-center justify-center z-10" style={{ background: "rgba(240, 235, 225, 0.9)" }}>
+            <div className="text-center space-y-3 p-6 bg-surface border border-border rounded-lg shadow-lg max-w-sm">
+              <p className="text-sm font-serif text-foreground font-medium">Discard this session?</p>
+              <p className="text-xs text-muted">
+                This session will be lost — your AI hasn&apos;t created a story structure yet.
+              </p>
+              <div className="flex items-center justify-center gap-2">
+                <button
+                  onClick={() => setConfirmingDiscard(null)}
+                  className="px-4 py-1.5 border border-border text-sm rounded hover:bg-surface"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => {
+                    const name = confirmingDiscard;
+                    setConfirmingDiscard(null);
+                    discardSession(name);
+                  }}
+                  className="px-4 py-1.5 bg-error text-white text-sm rounded hover:opacity-80"
+                >
+                  Discard
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Archive confirmation overlay */}
+        {confirmingArchive && (
+          <div className="absolute inset-0 flex items-center justify-center z-10" style={{ background: "rgba(240, 235, 225, 0.9)" }}>
+            <div className="text-center space-y-3 p-6 bg-surface border border-border rounded-lg shadow-lg max-w-sm">
+              <p className="text-sm font-serif text-foreground font-medium">Archive this story?</p>
+              <p className="text-xs text-muted">
+                You can restore it later from the Archives view.
+              </p>
+              <div className="flex items-center justify-center gap-2">
+                <button
+                  onClick={() => setConfirmingArchive(null)}
+                  className="px-4 py-1.5 border border-border text-sm rounded hover:bg-surface"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={async () => {
+                    const name = confirmingArchive;
+                    setConfirmingArchive(null);
+                    try {
+                      const res = await authFetchRef.current("/api/stories/archive", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ name }),
+                      });
+                      if (res.ok) {
+                        destroySession(name);
+                        onArchiveStory?.(name);
+                      }
+                    } catch { /* ignore */ }
+                  }}
+                  className="px-4 py-1.5 bg-accent text-white text-sm rounded hover:bg-accent-dim"
+                >
+                  Archive
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* Reconnect overlay */}
         {isDisconnected && storyName && (
           <div className="absolute inset-0 flex items-center justify-center" style={{ background: "rgba(240, 235, 225, 0.9)" }}>