plotlink-ows 0.1.15 → 1.0.0

package/app/web/components/Settings.tsx

@@ -1,42 +1,90 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { WalletCard } from "./WalletCard";
 
-const API_BASE = "http://localhost:7777";
-
-export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLogout: () => void; onChangeLLM: () => void }) {
-  const [llmConfig, setLlmConfig] = useState<{ llm: Record<string, unknown>; configured: string[] } | null>(null);
-  const [spendCap, setSpendCap] = useState<string>("10");
-  const [savingCap, setSavingCap] = useState(false);
-  const [capSaved, setCapSaved] = useState(false);
+export function Settings({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [newPassphrase, setNewPassphrase] = useState("");
   const [confirmPassphrase, setConfirmPassphrase] = useState("");
   const [passphraseError, setPassphraseError] = useState<string | null>(null);
   const [passphraseSuccess, setPassphraseSuccess] = useState(false);
   const [savingPassphrase, setSavingPassphrase] = useState(false);
 
-  const authFetch = (url: string, opts?: RequestInit) =>
-    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } });
+  // Agent identity registration
+  const [linkStatus, setLinkStatus] = useState<{ linked: boolean; agentId?: number; owsWallet?: string; owner?: string } | null>(null);
+  const [agentName, setAgentName] = useState("AI Writer");
+  const [agentDescription, setAgentDescription] = useState("");
+  const [agentGenre, setAgentGenre] = useState("");
+  const [registering, setRegistering] = useState(false);
+  const [registerError, setRegisterError] = useState<string | null>(null);
+
+  // Link to PlotLink (binding proof for DB link)
+  const [humanWallet, setHumanWallet] = useState("");
+  const [bindingResult, setBindingResult] = useState<{ message: string; signature: string; owsWallet: string } | null>(null);
+  const [generating, setGenerating] = useState(false);
+  const [bindingError, setBindingError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<"signature" | "wallet" | null>(null);
 
+  const authFetch = useCallback((url: string, opts?: RequestInit) =>
+    fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }),
+  [token]);
+
+  // Check link status on mount
   useEffect(() => {
-    authFetch(`${API_BASE}/api/config/llm`)
+    authFetch("/api/settings/link-status")
       .then((r) => r.json())
-      .then((data) => setLlmConfig(data));
+      .then((data) => setLinkStatus(data))
+      .catch(() => setLinkStatus({ linked: false }));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const activeProvider = (llmConfig?.llm as Record<string, unknown>)?.activeProvider as string | undefined;
-  const activeModel = (llmConfig?.llm as Record<string, unknown>)?.activeModel as string | undefined;
-
-  const handleSaveSpendCap = async () => {
-    setSavingCap(true);
-    setCapSaved(false);
-    // Persist spending cap to agent.config.json
-    await authFetch(`${API_BASE}/api/config/llm`, {
-      method: "POST",
-      body: JSON.stringify({ provider: activeProvider || "anthropic", model: activeModel || "", spendCap: Number(spendCap) }),
-    });
-    setSavingCap(false);
-    setCapSaved(true);
-    setTimeout(() => setCapSaved(false), 2000);
+  const handleRegisterAgent = async () => {
+    if (!agentName.trim()) { setRegisterError("Agent name is required"); return; }
+    if (!agentDescription.trim()) { setRegisterError("Description is required"); return; }
+    setRegistering(true);
+    setRegisterError(null);
+    try {
+      const res = await authFetch("/api/settings/register-agent", {
+        method: "POST",
+        body: JSON.stringify({
+          name: agentName,
+          description: agentDescription,
+          ...(agentGenre.trim() && { genre: agentGenre }),
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Registration failed");
+      setLinkStatus({ linked: true, agentId: data.agentId, owsWallet: data.owsWallet });
+    } catch (err: unknown) {
+      setRegisterError(err instanceof Error ? err.message : "Registration failed");
+    }
+    setRegistering(false);
+  };
+
+  const handleGenerateBinding = async () => {
+    if (!humanWallet.trim() || !/^0x[a-fA-F0-9]{40}$/.test(humanWallet)) {
+      setBindingError("Enter a valid wallet address (0x...)");
+      return;
+    }
+    setGenerating(true);
+    setBindingError(null);
+    setBindingResult(null);
+    try {
+      const res = await authFetch("/api/settings/generate-binding", {
+        method: "POST",
+        body: JSON.stringify({ humanWallet }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to generate binding code");
+      setBindingResult(data);
+    } catch (err: unknown) {
+      setBindingError(err instanceof Error ? err.message : "Failed to generate binding code");
+    }
+    setGenerating(false);
+  };
+
+  const copyToClipboard = async (text: string, field: "signature" | "wallet") => {
+    await navigator.clipboard.writeText(text);
+    setCopied(field);
+    setTimeout(() => setCopied(null), 2000);
   };
 
   const handleResetPassphrase = async () => {
@@ -52,7 +100,7 @@ export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLo
     }
     setSavingPassphrase(true);
     try {
-      const res = await authFetch(`${API_BASE}/api/auth/reset-passphrase`, {
+      const res = await authFetch("/api/auth/reset-passphrase", {
         method: "POST",
         body: JSON.stringify({ passphrase: newPassphrase }),
       });
@@ -74,62 +122,157 @@ export function Settings({ token, onLogout, onChangeLLM }: { token: string; onLo
     <div className="mx-auto max-w-lg space-y-6 p-6">
       <h2 className="text-accent text-lg font-bold">Settings</h2>
 
-      {/* LLM Config */}
+      {/* Agent Identity */}
       <div className="border-border rounded border p-4">
-        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">LLM Provider</h3>
-        {llmConfig ? (
+        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Agent Identity</h3>
+        {linkStatus?.linked ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-accent">Registered</span>
+              <span className="text-muted text-xs">Agent #{linkStatus.agentId}</span>
+            </div>
+            {linkStatus.owsWallet && (
+              <p className="text-muted text-xs font-mono">
+                Wallet: {linkStatus.owsWallet.slice(0, 6)}...{linkStatus.owsWallet.slice(-4)}
+              </p>
+            )}
+            {linkStatus.owner && (
+              <p className="text-muted text-xs font-mono">
+                Owner: {linkStatus.owner.slice(0, 6)}...{linkStatus.owner.slice(-4)}
+              </p>
+            )}
+            <p className="text-muted text-xs">
+              <a href={`https://plotlink.xyz/agents/${linkStatus.agentId}`} target="_blank" rel="noopener noreferrer" className="text-accent underline">
+                View agent profile on plotlink.xyz
+              </a>
+            </p>
+          </div>
+        ) : (
           <div className="space-y-3">
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Provider</span>
-              <span className="text-foreground font-medium">{activeProvider || "not configured"}</span>
+            <p className="text-muted text-xs">
+              Register this AI writer on-chain via ERC-8004. Uses your OWS wallet&apos;s existing ETH balance for gas.
+            </p>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Name</label>
+              <input
+                value={agentName}
+                onChange={(e) => setAgentName(e.target.value)}
+                placeholder="AI Writer"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
             </div>
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Model</span>
-              <span className="text-foreground font-medium">{activeModel || "—"}</span>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Description</label>
+              <input
+                value={agentDescription}
+                onChange={(e) => setAgentDescription(e.target.value)}
+                placeholder="An AI writing assistant for fiction stories"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
             </div>
-            <div className="flex justify-between text-xs">
-              <span className="text-muted">Configured</span>
-              <span className="text-foreground font-medium">{llmConfig.configured.join(", ") || "none"}</span>
+
+            <div>
+              <label className="text-muted text-xs block mb-1">Genre (optional)</label>
+              <input
+                value={agentGenre}
+                onChange={(e) => setAgentGenre(e.target.value)}
+                placeholder="e.g. Fiction, Sci-Fi, Fantasy"
+                className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent"
+              />
             </div>
+
+            {registerError && <p className="text-error text-xs">{registerError}</p>}
+
             <button
-              onClick={onChangeLLM}
-              className="border-accent text-accent hover:bg-accent/10 w-full rounded border px-4 py-2 text-xs font-medium transition-colors"
+              onClick={handleRegisterAgent}
+              disabled={registering || !agentName.trim() || !agentDescription.trim()}
+              className="bg-accent text-white hover:bg-accent-dim disabled:opacity-50 w-full rounded px-4 py-2 text-sm font-medium transition-colors"
             >
-              change provider / model
+              {registering ? "Registering..." : "Register Agent Identity"}
             </button>
           </div>
+        )}
+      </div>
+
+      {/* Link to PlotLink */}
+      <div className="border-border rounded border p-4">
+        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Link to PlotLink</h3>
+        {linkStatus?.owner ? (
+          <p className="text-muted text-xs">
+            Linked to owner <span className="font-mono">{linkStatus.owner.slice(0, 6)}...{linkStatus.owner.slice(-4)}</span>
+          </p>
         ) : (
-          <p className="text-muted text-xs">loading...</p>
+          <div className="space-y-3">
+            <p className="text-muted text-xs">
+              Link this OWS wallet to your PlotLink account so your stories appear under your profile on plotlink.xyz.
+            </p>
+            <div className="text-muted text-xs space-y-1 pl-3">
+              <p>1. Enter your PlotLink wallet address below</p>
+              <p>2. Click &quot;Generate Binding Code&quot;</p>
+              <p>3. Copy the code and paste it on plotlink.xyz &rarr; Agents &rarr; Link AI Writer</p>
+            </div>
+
+            <input
+              value={humanWallet}
+              onChange={(e) => setHumanWallet(e.target.value)}
+              placeholder="Your PlotLink wallet address (0x...)"
+              className="bg-surface border-border text-foreground placeholder:text-muted/50 w-full rounded border px-3 py-2 text-sm outline-none focus:border-accent font-mono"
+            />
+
+            {bindingError && <p className="text-error text-xs">{bindingError}</p>}
+
+            <button
+              onClick={handleGenerateBinding}
+              disabled={generating || !humanWallet.trim()}
+              className="bg-accent text-white hover:bg-accent-dim disabled:opacity-50 w-full rounded px-4 py-2 text-sm font-medium transition-colors"
+            >
+              {generating ? "Generating..." : "Generate Binding Code"}
+            </button>
+
+            {bindingResult && (
+              <div className="space-y-3 mt-3">
+                <div>
+                  <label className="text-muted text-xs block mb-1">Binding Code (signature)</label>
+                  <div className="relative">
+                    <div className="bg-surface border-border rounded border p-2 text-xs font-mono break-all text-foreground pr-16">
+                      {bindingResult.signature}
+                    </div>
+                    <button
+                      onClick={() => copyToClipboard(bindingResult.signature, "signature")}
+                      className="absolute top-1 right-1 text-xs px-2 py-1 rounded border border-border text-muted hover:text-accent hover:border-accent transition-colors"
+                    >
+                      {copied === "signature" ? "Copied!" : "Copy"}
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-muted text-xs block mb-1">OWS Wallet Address</label>
+                  <div className="relative">
+                    <div className="bg-surface border-border rounded border p-2 text-xs font-mono break-all text-foreground pr-16">
+                      {bindingResult.owsWallet}
+                    </div>
+                    <button
+                      onClick={() => copyToClipboard(bindingResult.owsWallet, "wallet")}
+                      className="absolute top-1 right-1 text-xs px-2 py-1 rounded border border-border text-muted hover:text-accent hover:border-accent transition-colors"
+                    >
+                      {copied === "wallet" ? "Copied!" : "Copy"}
+                    </button>
+                  </div>
+                </div>
+                <p className="text-xs text-accent">
+                  Now go to plotlink.xyz/agents and paste both values in the &quot;Link AI Writer&quot; section.
+                </p>
+              </div>
+            )}
+          </div>
         )}
       </div>
 
       {/* Wallet */}
       <WalletCard token={token} />
 
-      {/* Spending Cap */}
-      <div className="border-border rounded border p-4">
-        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Spending Cap</h3>
-        <div className="flex items-center gap-2">
-          <span className="text-muted text-xs">$</span>
-          <input
-            type="number"
-            value={spendCap}
-            onChange={(e) => setSpendCap(e.target.value)}
-            min="0"
-            step="1"
-            className="bg-surface border-border text-foreground w-24 rounded border px-2 py-1.5 text-sm outline-none focus:border-accent"
-          />
-          <span className="text-muted text-xs">USDC per session</span>
-          <button
-            onClick={handleSaveSpendCap}
-            disabled={savingCap}
-            className="border-accent text-accent hover:bg-accent/10 disabled:opacity-40 ml-auto rounded border px-3 py-1.5 text-xs font-medium transition-colors"
-          >
-            {savingCap ? "saving..." : capSaved ? "saved" : "save"}
-          </button>
-        </div>
-      </div>
-
       {/* Reset Passphrase */}
       <div className="border-border rounded border p-4">
         <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Reset Passphrase</h3>

package/app/web/components/StoriesPage.tsx

@@ -0,0 +1,270 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { StoryBrowser } from "./StoryBrowser";
+import { TerminalPanel } from "./TerminalPanel";
+import { PreviewPanel } from "./PreviewPanel";
+
+interface StoriesPageProps {
+  token: string;
+  authFetch: (url: string, opts?: RequestInit) => Promise<Response>;
+}
+
+const STORAGE_KEY = "plotlink-panel-ratio";
+const DEFAULT_RATIO = 0.6; // terminal gets 60% of available space
+const MIN_PANEL_PX = 300;
+const SIDEBAR_PX = 224; // w-56
+const HANDLE_PX = 6;
+
+function loadRatio(): number {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v) {
+      const n = parseFloat(v);
+      if (n > 0 && n < 1) return n;
+    }
+  } catch { /* ignore */ }
+  return DEFAULT_RATIO;
+}
+
+function clampRatio(r: number, available: number): number {
+  if (available <= 0) return r;
+  const minR = MIN_PANEL_PX / available;
+  const maxR = 1 - MIN_PANEL_PX / available;
+  if (minR >= maxR) return 0.5; // panels can't both fit, split evenly
+  return Math.min(maxR, Math.max(minR, r));
+}
+
+export function StoriesPage({ token, authFetch }: StoriesPageProps) {
+  const [selectedStory, setSelectedStory] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [publishingFile, setPublishingFile] = useState<string | null>(null);
+  const [publishProgress, setPublishProgress] = useState<string>("");
+  const [ratio, setRatio] = useState(loadRatio);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  // Persist ratio to localStorage
+  useEffect(() => {
+    try { localStorage.setItem(STORAGE_KEY, String(ratio)); } catch { /* ignore */ }
+  }, [ratio]);
+
+  // Clamp ratio on window resize so panels stay above MIN_PANEL_PX
+  useEffect(() => {
+    const onResize = () => {
+      if (!containerRef.current) return;
+      const available = containerRef.current.getBoundingClientRect().width - SIDEBAR_PX - HANDLE_PX;
+      setRatio((prev) => clampRatio(prev, available));
+    };
+    window.addEventListener("resize", onResize);
+    // Also clamp on mount in case stored ratio is out of range for current window
+    onResize();
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const handleSelectFile = useCallback((storyName: string, fileName: string) => {
+    setSelectedStory(storyName);
+    setSelectedFile(fileName);
+  }, []);
+
+  const latestStoryRef = useRef<string | null>(null);
+
+  const handleSelectStory = useCallback(async (name: string) => {
+    latestStoryRef.current = name;
+    setSelectedStory(name);
+    setSelectedFile(null);
+    // Auto-select latest file for this story
+    try {
+      const res = await authFetch(`/api/stories/${name}`);
+      if (res.ok && latestStoryRef.current === name) {
+        const data = await res.json();
+        const files: { file: string }[] = data.files || [];
+        // Priority: highest plot → genesis → structure → first
+        const plots = files
+          .map((f) => ({ file: f.file, num: f.file.match(/^plot-(\d+)\.md$/)?.[1] }))
+          .filter((p) => p.num != null)
+          .sort((a, b) => parseInt(b.num!) - parseInt(a.num!));
+        const latest = plots[0]?.file
+          ?? (files.find((f) => f.file === "genesis.md")?.file)
+          ?? (files.find((f) => f.file === "structure.md")?.file)
+          ?? files[0]?.file;
+        if (latest && latestStoryRef.current === name) setSelectedFile(latest);
+      }
+    } catch { /* ignore */ }
+  }, [authFetch]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const available = rect.width - SIDEBAR_PX - HANDLE_PX;
+      const x = ev.clientX - rect.left - SIDEBAR_PX;
+      setRatio(clampRatio(x / available, available));
+    };
+
+    const onMouseUp = () => {
+      dragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }, []);
+
+  const handlePublish = useCallback(async (storyName: string, fileName: string) => {
+    setPublishingFile(fileName);
+    setPublishProgress("Reading file...");
+
+    try {
+      // Get file content
+      const fileRes = await authFetch(`/api/stories/${storyName}/${fileName}`);
+      if (!fileRes.ok) throw new Error("Failed to read file");
+      const fileData = await fileRes.json();
+
+      // Extract title from first heading or filename
+      const titleMatch = fileData.content.match(/^#\s+(.+)$/m);
+      const title = titleMatch ? titleMatch[1].slice(0, 60) : fileName.replace(".md", "");
+
+      // Determine genre from structure.md if available
+      let genre = "Fiction";
+      try {
+        const structRes = await authFetch(`/api/stories/${storyName}/structure.md`);
+        if (structRes.ok) {
+          const structData = await structRes.json();
+          const genreMatch = structData.content.match(/genre[:\s]+(.+)/i);
+          if (genreMatch) genre = genreMatch[1].trim().slice(0, 30);
+        }
+      } catch { /* ignore */ }
+
+      // For plot files, find the storylineId from the genesis publish status
+      let storylineId: number | undefined;
+      if (fileName.match(/^plot-\d+\.md$/)) {
+        try {
+          const storyRes = await authFetch(`/api/stories/${storyName}`);
+          if (storyRes.ok) {
+            const storyData = await storyRes.json();
+            const genesis = storyData.files.find((f: { file: string; storylineId?: number }) =>
+              f.file === "genesis.md" && f.storylineId);
+            storylineId = genesis?.storylineId;
+          }
+        } catch { /* ignore */ }
+        if (!storylineId) {
+          setPublishProgress("Error: Publish genesis first to create the storyline");
+          setTimeout(() => { setPublishingFile(null); setPublishProgress(""); }, 3000);
+          return;
+        }
+      }
+
+      // Run publish flow via SSE
+      setPublishProgress("Publishing...");
+      const publishRes = await authFetch("/api/publish/file", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ storyName, fileName, title, content: fileData.content, genre, storylineId }),
+      });
+
+      if (!publishRes.ok) {
+        const err = await publishRes.json();
+        throw new Error(err.error || "Publish failed");
+      }
+
+      // Read SSE stream
+      const reader = publishRes.body?.getReader();
+      const decoder = new TextDecoder();
+
+      if (reader) {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const text = decoder.decode(value);
+          const lines = text.split("\n").filter((l) => l.startsWith("data: "));
+          for (const line of lines) {
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.step) setPublishProgress(data.message || data.step);
+              if (data.step === "done" && data.txHash) {
+                // Update publish status with gasCost
+                await authFetch(`/api/stories/${storyName}/${fileName}/publish-status`, {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({
+                    txHash: data.txHash,
+                    storylineId: data.storylineId,
+                    plotIndex: data.plotIndex,
+                    contentCid: data.contentCid,
+                    gasCost: data.gasCost,
+                    indexError: data.indexError,
+                  }),
+                });
+              }
+            } catch { /* ignore partial SSE */ }
+          }
+        }
+      }
+
+      setPublishProgress("Published!");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Publish failed";
+      setPublishProgress(`Error: ${message}`);
+    } finally {
+      setTimeout(() => {
+        setPublishingFile(null);
+        setPublishProgress("");
+      }, 3000);
+    }
+  }, [authFetch]);
+
+  return (
+    <div ref={containerRef} className="h-[calc(100vh-3.5rem)] flex">
+      {/* Story Browser Sidebar */}
+      <div className="w-56 border-r border-border flex-shrink-0">
+        <StoryBrowser
+          authFetch={authFetch}
+          selectedStory={selectedStory}
+          selectedFile={selectedFile}
+          onSelectFile={handleSelectFile}
+        />
+      </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} />
+      </div>
+
+      {/* Drag Handle */}
+      <div
+        onMouseDown={handleMouseDown}
+        className="flex-shrink-0 flex items-center justify-center hover:bg-border/50 transition-colors"
+        style={{ width: HANDLE_PX, cursor: "col-resize", background: "var(--border)" }}
+      >
+        <div className="flex flex-col gap-1">
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+          <div className="w-0.5 h-0.5 rounded-full" style={{ background: "var(--text-muted)" }} />
+        </div>
+      </div>
+
+      {/* Preview — takes remaining space */}
+      <div className="min-w-0 flex flex-col" style={{ flex: `${1 - ratio} 0 0` }}>
+        <PreviewPanel
+          storyName={selectedStory}
+          fileName={selectedFile}
+          authFetch={authFetch}
+          onPublish={handlePublish}
+          publishingFile={publishingFile}
+        />
+        {publishProgress && (
+          <div className="px-3 py-1.5 bg-surface border-t border-border text-xs text-muted">
+            {publishProgress}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}