2sagaco48 1.0.0

package/src/console/SeedControlPanel.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from "react";
+import {
+  DEFAULT_SEED_CONTROL,
+  selectSeedDirectives,
+  type SeedControl,
+} from "../fiction/seed-control";
+import { cx } from "./util";
+
+interface Props {
+  control: SeedControl;
+  setControl: React.Dispatch<React.SetStateAction<SeedControl>>;
+  seed: number;
+  previewChapter: number;
+}
+
+function SliderRow({ label, value, min, max, step = 1, hint, onChange }: {
+  label: string; value: number; min: number; max: number; step?: number; hint: string;
+  onChange: (v: number) => void;
+}) {
+  return (
+    <label className="block rounded-lg border border-zinc-200 bg-white p-2">
+      <div className="flex items-baseline justify-between">
+        <span className="text-xs font-semibold text-zinc-800">{label}</span>
+        <span className="font-mono text-xs font-bold text-teal-700">{value}</span>
+      </div>
+      <input
+        type="range" min={min} max={max} step={step} value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="mt-1 w-full accent-teal-600"
+      />
+      <div className="text-[10px] leading-snug text-zinc-500">{hint}</div>
+    </label>
+  );
+}
+
+function LockField({ label, value, placeholder, onChange }: {
+  label: string; value: string; placeholder: string; onChange: (v: string) => void;
+}) {
+  const locked = value.trim().length > 0;
+  return (
+    <label className={cx("block rounded-lg border p-2", locked ? "border-amber-300 bg-amber-50/50" : "border-zinc-200 bg-white")}>
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-semibold text-zinc-800">{label}</span>
+        <span className={cx("rounded px-1.5 py-0.5 text-[9px] font-bold uppercase", locked ? "bg-amber-200 text-amber-900" : "bg-zinc-100 text-zinc-500")}>
+          {locked ? "🔒 locked" : "unlocked"}
+        </span>
+      </div>
+      <input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="mt-1 w-full rounded-md border border-zinc-300 px-2 py-1 text-[11px] text-zinc-800"
+      />
+    </label>
+  );
+}
+
+export function SeedControlPanel({ control, setControl, seed, previewChapter }: Props) {
+  const set = (patch: Partial<SeedControl>) => setControl((p) => ({ ...p, ...patch }));
+  const setLock = (k: keyof SeedControl["locks"], v: string) =>
+    setControl((p) => ({ ...p, locks: { ...p.locks, [k]: v } }));
+
+  const preview = useMemo(
+    () => selectSeedDirectives(seed, Math.max(0, previewChapter - 1), control),
+    [seed, previewChapter, control],
+  );
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <div className="rounded-xl border border-teal-200 bg-white p-3 shadow-sm">
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-100 pb-2">
+          <div>
+            <h4 className="font-bold text-zinc-900">🌱 Seed Idea-Mix &amp; Author Locks</h4>
+            <p className="text-[11px] text-zinc-500">
+              Deterministic per-chapter directives (seed {seed}) + hard author locks injected into the live chapter prompt.
+            </p>
+          </div>
+          <label className="flex items-center gap-1.5 text-xs font-semibold text-zinc-700">
+            <input type="checkbox" checked={control.enabled} onChange={(e) => set({ enabled: e.target.checked })} className="h-4 w-4 accent-teal-600" />
+            Seed block {control.enabled ? "ON" : "OFF"}
+          </label>
+        </div>
+
+        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-3">
+          <SliderRow label="Empty-space vs human-seen mix" value={control.emptyVsHumanMix} min={0} max={100}
+            hint="Share of system-scale (infrastructure/institution/ecology) beats vs human-scale beats per chapter."
+            onChange={(v) => set({ emptyVsHumanMix: v })} />
+          <SliderRow label="Motifs per chapter" value={control.motifsPerChapter} min={0} max={6}
+            hint="Recurring seed motifs active in each chapter. 0 = none injected."
+            onChange={(v) => set({ motifsPerChapter: v })} />
+          <SliderRow label="New concepts per chapter" value={control.conceptsPerChapter} min={0} max={4}
+            hint="Target count of NEW named worldbuilding concepts. Complements the continuity cap."
+            onChange={(v) => set({ conceptsPerChapter: v })} />
+        </div>
+
+        <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <LockField label="Locked setting" value={control.locks.setting} placeholder="e.g. Keistlddsto Estuary lime kilns at low tide"
+            onChange={(v) => setLock("setting", v)} />
+          <LockField label="Locked core concept" value={control.locks.coreConcept} placeholder="e.g. The truth canister must physically change hands each act"
+            onChange={(v) => setLock("coreConcept", v)} />
+          <LockField label="Locked theme" value={control.locks.theme} placeholder="e.g. Debts are inherited, never forgiven"
+            onChange={(v) => setLock("theme", v)} />
+          <LockField label="Locked motif seed" value={control.locks.motif} placeholder="e.g. mended cloth"
+            onChange={(v) => setLock("motif", v)} />
+        </div>
+
+        <div className="mt-2 flex justify-end">
+          <button type="button" onClick={() => setControl({ ...DEFAULT_SEED_CONTROL, locks: { ...DEFAULT_SEED_CONTROL.locks } })}
+            className="rounded-lg border border-zinc-300 bg-zinc-50 px-3 py-1 text-xs font-semibold text-zinc-700 hover:bg-zinc-100">
+            Reset to defaults
+          </button>
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
+        <h4 className="font-bold text-zinc-900">🔍 Deterministic preview — chapter {previewChapter}</h4>
+        <p className="text-[11px] text-zinc-500">Exactly what the live prompt will carry for this chapter (same seed + controls = same output).</p>
+        <div className="mt-2 space-y-1.5 text-[11px] text-zinc-700">
+          {preview.emptySpace.map((d, i) => (
+            <div key={`e${i}`} className="rounded border border-sky-200 bg-sky-50/60 p-1.5"><b className="text-sky-800">[empty-space]</b> {d}</div>
+          ))}
+          {preview.humanSeen.map((d, i) => (
+            <div key={`h${i}`} className="rounded border border-rose-200 bg-rose-50/60 p-1.5"><b className="text-rose-800">[human-seen]</b> {d}</div>
+          ))}
+          <div className="rounded border border-zinc-200 bg-zinc-50 p-1.5">
+            <b>Motifs ({preview.motifs.length}):</b> {preview.motifs.length ? preview.motifs.join("; ") : "(none)"}
+          </div>
+          <div className="rounded border border-zinc-200 bg-zinc-50 p-1.5">
+            <b>New-concept target:</b> exactly {preview.conceptsTarget}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/console/StoryControllerPanel.tsx

@@ -0,0 +1,443 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import {
+  generateSingleChapterWithContinuity,
+  parseChaptersFromText,
+  createStorySnapshot,
+} from "../fiction/story-engine";
+import { applySeedLocks, type SeedControl } from "../fiction/seed-control";
+import { rebuildLedger, EMPTY_LEDGER, type ContinuityLedger, stripHarnessResidue } from "../fiction/continuity";
+import { StoryCrashProtector, type StoryEngineStatus } from "../fiction/crash-protection";
+import { EntityStateMachine } from "../fiction/entity-state-machine";
+import type { StorySnapshot, ContinuityToggles } from "../fiction/types";
+import { attemptAdoptToEngine } from "./engineBridge";
+import { cx, copyText } from "./util";
+
+interface Props {
+  manuscript: string;
+  setManuscript: (s: string) => void;
+  apiKey: string;
+  toggles: ContinuityToggles;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  modelPool: string[];
+  seedControl?: SeedControl | null;
+}
+
+export function StoryControllerPanel({
+  manuscript,
+  setManuscript,
+  apiKey,
+  toggles,
+  iframeRef,
+  modelPool,
+  seedControl = null,
+}: Props) {
+  const [selectedModel, setSelectedModel] = useState<string>("gemini-2.5-flash");
+  const [seed, setSeed] = useState<number>(() => {
+    const cp = StoryCrashProtector.loadCheckpoint();
+    return cp ? cp.seed : (Date.now() % 1000000);
+  });
+  const [totalChapters, setTotalChapters] = useState<number>(() => {
+    const cp = StoryCrashProtector.loadCheckpoint();
+    return cp ? cp.totalChapters : 16;
+  });
+  const [engineStatus, setEngineStatus] = useState<StoryEngineStatus>(() => StoryCrashProtector.getActiveStatus());
+  const [currentChIndex, setCurrentChIndex] = useState<number>(0);
+  const [log, setLog] = useState<string[]>([]);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  // Parse existing chapters from the current manuscript (memoized: O(n) scan must not rerun per keystroke at novel scale)
+  const cleanCurrentManuscript = useMemo(() => stripHarnessResidue(manuscript).text, [manuscript]);
+  const existingChapters = useMemo(() => parseChaptersFromText(cleanCurrentManuscript), [cleanCurrentManuscript]);
+  const completedCount = existingChapters.length;
+  const nextChapterToRun = completedCount + 1;
+
+  const addLog = useCallback((msg: string) => {
+    setLog((prev) => [...prev.slice(-50), `[${new Date().toLocaleTimeString()}] ${msg}`]);
+  }, []);
+
+  // Sync external status changes
+  useEffect(() => {
+    const onStatusChanged = (e: any) => {
+      if (e?.detail?.status) setEngineStatus(e.detail.status);
+    };
+    window.addEventListener("saga:status-changed", onStatusChanged);
+    return () => window.removeEventListener("saga:status-changed", onStatusChanged);
+  }, []);
+
+  const handleStop = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setEngineStatus("stopped");
+    StoryCrashProtector.updateStatus("stopped");
+    addLog("Story generation stopped by user. Checkpoint safely locked.");
+  };
+
+  const handlePause = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setEngineStatus("paused");
+    StoryCrashProtector.updateStatus("paused");
+    addLog("Story generation paused at chapter boundary.");
+  };
+
+  const runGenerationLoop = async (startFromCh: number) => {
+    if (!apiKey.trim()) {
+      addLog("Error: Missing API key. Please configure key in Settings first.");
+      return;
+    }
+
+    setEngineStatus("running");
+    StoryCrashProtector.updateStatus("running");
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+
+    try {
+      addLog(`Initializing deterministic story blueprint (Seed: ${seed}, Chapters: ${totalChapters})...`);
+      const snapshot: StorySnapshot = createStorySnapshot(seed, totalChapters);
+      if (seedControl?.enabled) {
+        applySeedLocks(snapshot, seedControl);
+        const locked = Object.entries(seedControl.locks).filter(([, v]) => v.trim()).map(([k]) => k);
+        addLog(locked.length ? `Author locks applied: ${locked.join(", ")}.` : "Seed directives enabled (no locks set).");
+      }
+      const esm = new EntityStateMachine();
+
+      let ledger: ContinuityLedger = existingChapters.length > 0
+        ? rebuildLedger(snapshot, existingChapters)
+        : EMPTY_LEDGER;
+
+      let accumulatedManuscript = cleanCurrentManuscript;
+      let priorSummary: string | null = existingChapters.length > 0
+        ? existingChapters[existingChapters.length - 1].text.slice(0, 420).replace(/\s+/g, " ")
+        : null;
+
+      let completedThisRun = 0;
+      for (let chIdx = startFromCh - 1; chIdx < totalChapters; chIdx++) {
+        if (signal.aborted) break;
+        const currentChapterNum = chIdx + 1;
+        setCurrentChIndex(currentChapterNum);
+        addLog(`Executing Chapter ${currentChapterNum} of ${totalChapters} using [${selectedModel}]`);
+
+        // Check if setting transition triggers modulo-4 carousel warning (advisory only — never blocks).
+        const chDef = snapshot.blueprint.chapters[chIdx];
+        if (chDef?.settingFocus) {
+          const transitCheck = esm.stepLocation(chDef.settingFocus);
+          if (!transitCheck.validTransit && transitCheck.warning) {
+            addLog(`⚠ Topographic Router: ${transitCheck.warning}`);
+          }
+        }
+
+        let chapterBody = "";
+        let chTitle = snapshot.blueprint.chapters[chIdx]?.title || `Chapter ${currentChapterNum}`;
+        try {
+          const res = await generateSingleChapterWithContinuity({
+            snapshot,
+            chapterIndex: chIdx,
+            model: selectedModel,
+            apiKey,
+            provider: "gemini",
+            ledger,
+            toggles,
+            priorSummary,
+            signal,
+            onLog: addLog,
+            seedControl,
+          });
+          // Already sanitized inside the generator; residual strip is a no-op safety net.
+          chapterBody = stripHarnessResidue(res.chapterText).text;
+          ledger = res.updatedLedger;
+        } catch (chErr: any) {
+          if (signal.aborted || chErr?.message === "Generation aborted by user.") break;
+          // Per-chapter fail-open: one bad chapter must not freeze the novel.
+          // Commit a draft-gap marker and continue so the run reaches full chapter count.
+          const why = chErr instanceof Error ? chErr.message : String(chErr);
+          addLog(`✗ Chapter ${currentChapterNum} failed (${why.slice(0, 160)}). Committing draft-gap and continuing…`);
+          chapterBody = `[DRAFT GAP] Chapter ${currentChapterNum} generation failed: ${why.slice(0, 240)}. Continue from the next chapter.`;
+        }
+
+        if (signal.aborted) break;
+
+        const newChapterBlock = `## ${chTitle}\n\n${chapterBody}`;
+        accumulatedManuscript = accumulatedManuscript.trim()
+          ? `${accumulatedManuscript.trim()}\n\n${newChapterBlock}`
+          : newChapterBlock;
+
+        priorSummary = `${chTitle}: ${chapterBody.slice(0, 420).replace(/\s+/g, " ")}`;
+        completedThisRun++;
+
+        // Clean commit to parent state + engine store (pure prose only).
+        setManuscript(accumulatedManuscript);
+        const adopt = attemptAdoptToEngine(iframeRef.current, accumulatedManuscript);
+        if (!adopt.ok) addLog(`⚠ adopt: ${adopt.detail}`);
+
+        // Crash-proof checkpoint after every successful commit.
+        StoryCrashProtector.saveCheckpoint({
+          manuscriptId: `story-${seed}`,
+          seed,
+          totalChapters,
+          completedChapters: currentChapterNum,
+          activeModel: selectedModel,
+          status: "running",
+          timestamp: Date.now(),
+          chapters: parseChaptersFromText(accumulatedManuscript).map((c) => ({
+            index: c.index,
+            title: c.title,
+            text: c.text,
+            wordCount: (c.text.match(/\S+/g) || []).length,
+          })),
+          cleanManuscript: accumulatedManuscript,
+        });
+
+        addLog(`✓ Chapter ${currentChapterNum} saved & checkpointed (${chapterBody.length} clean chars).`);
+      }
+
+      if (!signal.aborted) {
+        // Only mark complete when the full requested span was produced this session
+        // or already existed (resume that finishes the tail).
+        const finalCount = parseChaptersFromText(accumulatedManuscript).length;
+        if (finalCount >= totalChapters) {
+          setEngineStatus("complete");
+          StoryCrashProtector.updateStatus("complete");
+          addLog(`🎉 Entire novel completed successfully! ${finalCount}/${totalChapters} chapters on page.`);
+        } else {
+          setEngineStatus("paused");
+          StoryCrashProtector.updateStatus("paused");
+          addLog(`Run ended early at ${finalCount}/${totalChapters} chapters (${completedThisRun} this session). Status: paused — Resume to continue.`);
+        }
+      }
+    } catch (e: any) {
+      if (e?.message !== "Generation aborted by user.") {
+        setEngineStatus("error");
+        StoryCrashProtector.updateStatus("error");
+        addLog(`Error during chapter execution: ${e?.message || String(e)}`);
+      }
+      // Soft recovery: never leave the UI stuck in "running" after an unexpected throw.
+      if (StoryCrashProtector.getActiveStatus() === "running") {
+        setEngineStatus("paused");
+        StoryCrashProtector.updateStatus("paused");
+      }
+    } finally {
+      abortControllerRef.current = null;
+      // Never leave the controller soft-locked in "running" after the loop exits.
+      // Pause/Stop handlers set their own status; complete/paused/error set above.
+      // This is the last-resort freeze-breaker for edge races.
+      if (StoryCrashProtector.getActiveStatus() === "running") {
+        setEngineStatus(signal.aborted ? "paused" : "paused");
+        StoryCrashProtector.updateStatus("paused");
+      }
+    }
+  };
+
+  const handleRestoreCheckpoint = () => {
+    const cp = StoryCrashProtector.loadCheckpoint();
+    if (!cp || !cp.cleanManuscript) {
+      addLog("No saved checkpoint found in persistent storage.");
+      return;
+    }
+    const clean = stripHarnessResidue(cp.cleanManuscript).text;
+    setManuscript(clean);
+    setSeed(cp.seed);
+    setTotalChapters(cp.totalChapters);
+    setSelectedModel(cp.activeModel || "gemini-2.5-flash");
+    setEngineStatus(cp.status || "paused");
+    attemptAdoptToEngine(iframeRef.current, clean);
+    addLog(`✓ Restored checkpoint: ${cp.completedChapters} chapters restored (${clean.length} chars). Ready to continue.`);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
+  const isRunning = engineStatus === "running";
+
+  return (
+    <div className="space-y-4 text-[13px]">
+      {/* Active Story Controller */}
+      <div className="rounded-xl border border-indigo-200 bg-white p-3 shadow-sm">
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-zinc-100 pb-2">
+          <div>
+            <h4 className="font-bold text-zinc-900">🚀 Live Story Engine Controller &amp; Crash Protector</h4>
+            <p className="text-[11px] text-zinc-500">
+              Deterministic checkpointing, mid-story model switching, and resumption without prompt bleed.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className={cx(
+                "rounded-full px-2.5 py-0.5 text-xs font-bold uppercase tracking-wider",
+                engineStatus === "running"
+                  ? "bg-amber-100 text-amber-800 animate-pulse"
+                  : engineStatus === "paused"
+                  ? "bg-blue-100 text-blue-800"
+                  : engineStatus === "complete"
+                  ? "bg-emerald-100 text-emerald-800"
+                  : engineStatus === "stopped"
+                  ? "bg-zinc-200 text-zinc-800"
+                  : "bg-zinc-100 text-zinc-600"
+              )}
+            >
+              Status: {engineStatus} {isRunning ? `(Ch ${currentChIndex}/${totalChapters})` : ""}
+            </span>
+          </div>
+        </div>
+
+        {/* Configuration Row */}
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <label className="text-xs font-semibold text-zinc-700">
+            Active Model (Hot-Swappable Mid-Story)
+            <select
+              value={selectedModel}
+              onChange={(e) => {
+                setSelectedModel(e.target.value);
+                addLog(`Switched active generation model to: ${e.target.value}`);
+              }}
+              className="mt-1 block w-full rounded-lg border border-zinc-300 bg-white p-1.5 font-mono text-xs text-zinc-800 focus:border-indigo-500"
+            >
+              {modelPool.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="text-xs font-semibold text-zinc-700">
+            Story Seed
+            <div className="flex gap-1.5 mt-1">
+              <input
+                type="number"
+                value={seed}
+                disabled={isRunning}
+                onChange={(e) => setSeed(Number(e.target.value) || 0)}
+                className="w-full rounded-lg border border-zinc-300 p-1.5 font-mono text-xs text-zinc-800"
+              />
+              <button
+                type="button"
+                disabled={isRunning}
+                onClick={() => setSeed(Math.floor(Math.random() * 900000) + 100000)}
+                className="rounded border border-zinc-200 px-2 text-xs hover:bg-zinc-100"
+                title="Randomize Seed"
+              >
+                🎲
+              </button>
+            </div>
+          </label>
+
+          <label className="text-xs font-semibold text-zinc-700">
+            Total Target Chapters
+            <input
+              type="number"
+              min={1}
+              max={64}
+              value={totalChapters}
+              disabled={isRunning}
+              onChange={(e) => setTotalChapters(Math.max(1, Math.min(64, Number(e.target.value) || 16)))}
+              className="mt-1 block w-full rounded-lg border border-zinc-300 p-1.5 font-mono text-xs text-zinc-800"
+            />
+          </label>
+        </div>
+
+        {/* Action Controls */}
+        <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-zinc-100 pt-3">
+          {!isRunning ? (
+            <>
+              {completedCount === 0 ? (
+                <button
+                  type="button"
+                  onClick={() => runGenerationLoop(1)}
+                  disabled={!apiKey.trim()}
+                  className="rounded-lg bg-indigo-600 px-4 py-2 font-bold text-white shadow-sm hover:bg-indigo-700 disabled:opacity-40"
+                >
+                  ▶ Start Novel (Chapter 1)
+                </button>
+              ) : (
+                <>
+                  {nextChapterToRun <= totalChapters && (
+                    <button
+                      type="button"
+                      onClick={() => runGenerationLoop(nextChapterToRun)}
+                      disabled={!apiKey.trim()}
+                      className="rounded-lg bg-teal-600 px-4 py-2 font-bold text-white shadow-sm hover:bg-teal-700 disabled:opacity-40"
+                    >
+                      ▶ Resume Story from Chapter {nextChapterToRun}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (confirm("Reset manuscript and start fresh from Chapter 1?")) {
+                        StoryCrashProtector.clearCheckpoint();
+                        setManuscript("");
+                        runGenerationLoop(1);
+                      }
+                    }}
+                    disabled={!apiKey.trim()}
+                    className="rounded-lg border border-zinc-300 bg-zinc-50 px-3 py-2 text-xs font-semibold text-zinc-700 hover:bg-zinc-100"
+                  >
+                    ↺ Restart from Ch 1
+                  </button>
+                </>
+              )}
+              <button
+                type="button"
+                onClick={handleRestoreCheckpoint}
+                className="rounded-lg border border-indigo-200 bg-indigo-50/60 px-3 py-2 text-xs font-semibold text-indigo-700 hover:bg-indigo-100"
+                title="Recover last crash-proof checkpoint from localStorage"
+              >
+                💾 Recover Crash Checkpoint
+              </button>
+            </>
+          ) : (
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={handlePause}
+                className="rounded-lg bg-amber-600 px-4 py-2 font-bold text-white shadow-sm hover:bg-amber-700"
+              >
+                ⏸ Pause
+              </button>
+              <button
+                type="button"
+                onClick={handleStop}
+                className="rounded-lg bg-rose-600 px-4 py-2 font-bold text-white shadow-sm hover:bg-rose-700"
+              >
+                ⏹ Stop Generation
+              </button>
+            </div>
+          )}
+
+          <div className="ml-auto text-xs text-zinc-500 font-medium">
+            Chapters completed: <span className="font-bold text-zinc-800">{completedCount}</span> / {totalChapters}
+          </div>
+        </div>
+      </div>
+
+      {/* Live Pipeline Terminal Log */}
+      <div className="rounded-xl border border-zinc-200 bg-zinc-900 p-3 text-zinc-100 shadow-sm">
+        <div className="flex items-center justify-between border-b border-zinc-800 pb-1.5 text-xs">
+          <span className="font-mono font-bold text-teal-400">⚡ Live Generation Execution Log</span>
+          <button
+            onClick={() => copyText(log.join("\n"))}
+            className="rounded border border-zinc-700 px-2 py-0.5 text-[10px] text-zinc-400 hover:text-white"
+          >
+            Copy Log
+          </button>
+        </div>
+        <div className="mt-2 h-44 overflow-y-auto space-y-1 font-mono text-[10.5px] leading-relaxed text-zinc-300">
+          {log.length === 0 ? (
+            <div className="italic text-zinc-500">Pipeline ready. Click Start or Resume to begin generation.</div>
+          ) : (
+            log.map((line, i) => <div key={i}>{line}</div>)
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}