2sagaco48 1.0.0

package/src/console/FictionSystemPanels.tsx

@@ -0,0 +1,882 @@
+/**
+ * FICTION SYSTEM PANELS (NEW, additive, console-mounted).
+ * ---------------------------------------------------------------------------
+ * Complete 1:1 functional implementation of:
+ *   1. 📥 Fiction Input — Exact per-chapter prompts tapped at generateSynthesizedResponse.
+ *   2. 🚀 Story Engine & Recovery — Real start/stop, model switching mid-story,
+ *      pickup/resumption from interrupted chapters, and live engine sync.
+ *   3. 🔬 Diagnostics & Recovery — FM-02 through FM-16 deterministic scanning,
+ *      auto-fixers, LLM deep diagnosis, and emergency chat unblocker.
+ *   4. 🗺 System Map & Runtime — Subsystem tiers & real session call counters.
+ *   5. 📚 Manuscript Grade v2 — Standalone weighted 100-point rubric, quote-verified
+ *      rewrites, and copyable text reports.
+ *   6. 🔁 Recursive Revision — Pareto-superior targeted revision loop with
+ *      weighted-deficit targeting, L0/L1/L2 escalation, 15 negative-space checks,
+ *      noise margin calibration, and highlighted diff visualization.
+ */
+import { useCallback, useEffect, useMemo, useState, type RefObject } from "react";
+import {
+  MODELS,
+  getModelCallLog,
+  pickRandomAvailableModel,
+  generateSynthesizedResponse,
+  type ModelCallRecord,
+} from "@/lib/models";
+import { gradeManuscriptV2, type ManuscriptGradeReportV2 } from "@/lib/manuscript-grade-v2";
+import {
+  runRecursiveRevisionLoop,
+  type RevisionLoopResult,
+  type RevisionProgressEvent,
+} from "@/lib/ai-revision";
+import { SAGA_SYSTEM_MAP, SYSTEM_TIER_LABEL, SYSTEM_TIER_TONE } from "@/lib/system-map";
+import {
+  assembleManuscript,
+  attemptAdoptToEngine,
+  getActiveModel,
+  getCustomTemplateCount,
+  getKeys,
+  getPersonaSeed,
+  getSettings,
+} from "./engineBridge";
+import { copyText } from "./util";
+import { computeWordDiff, formatDiffAsHtml } from "../fiction/diff";
+import { type ContinuityToggles, DEFAULT_CONTINUITY_TOGGLES } from "../fiction/types";
+import { StoryControllerPanel } from "./StoryControllerPanel";
+import { DiagnosticRecoveryPanel } from "./DiagnosticRecoveryPanel";
+import { SeedControlPanel } from "./SeedControlPanel";
+import {
+  loadSeedControl,
+  saveSeedControl,
+  type SeedControl,
+} from "../fiction/seed-control";
+import { type RevisionBudgetOptions, DEFAULT_REVISION_BUDGET } from "@/lib/ai-revision";
+
+type FrameRef = RefObject<HTMLIFrameElement | null>;
+type Keys = Partial<Record<string, string>>;
+
+const TONE: Record<string, string> = {
+  zinc: "bg-zinc-100 text-zinc-700 border-zinc-200",
+  teal: "bg-teal-50 text-teal-700 border-teal-200",
+  indigo: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  violet: "bg-violet-50 text-violet-700 border-violet-200",
+  emerald: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  amber: "bg-amber-50 text-amber-800 border-amber-200",
+  rose: "bg-rose-50 text-rose-700 border-rose-200",
+  sky: "bg-sky-50 text-sky-700 border-sky-200",
+};
+
+function Pill({ children, tone = "zinc" }: { children: React.ReactNode; tone?: string }) {
+  return (
+    <span className={`inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-semibold ${TONE[tone] ?? TONE.zinc}`}>
+      {children}
+    </span>
+  );
+}
+function Head({ icon, title, right }: { icon: string; title: string; right?: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2 border-b border-zinc-200 pb-1">
+      <span className="text-sm">{icon}</span>
+      <span className="text-[11px] font-bold uppercase tracking-wider text-zinc-700">{title}</span>
+      {right != null && <span className="ml-auto text-[10px] text-zinc-400">{right}</span>}
+    </div>
+  );
+}
+function Card({ children }: { children: React.ReactNode }) {
+  return <div className="rounded-lg border border-zinc-200 bg-white p-3">{children}</div>;
+}
+
+function wordCount(text: string): number {
+  return (text.trim().match(/\S+/g) || []).length;
+}
+function estTokens(text: string): number {
+  return Math.ceil((text || "").length / 4);
+}
+
+function pickModelWithAllowlist(keys: Keys, exclude: string[], allowlist: string[]) {
+  if (!allowlist.length) return pickRandomAvailableModel(keys as Record<string, string>, exclude);
+  const withKeys = MODELS.filter((m) => !!keys[m.provider] && allowlist.includes(m.id));
+  const pool = withKeys.filter((m) => !exclude.includes(m.id));
+  const finalPool = pool.length > 0 ? pool : withKeys;
+  if (!finalPool.length) return null;
+  return finalPool[Math.floor(Math.random() * finalPool.length)];
+}
+
+async function generateWith(
+  keys: Keys,
+  choice: { provider: string; modelId: string },
+  userMessage: string,
+): Promise<string> {
+  const apiKey = keys[choice.provider] ?? "";
+  if (!apiKey) throw new Error(`No API key configured for provider "${choice.provider}".`);
+  const params = {
+    provider: choice.provider as any,
+    model: choice.modelId as any,
+    apiKey,
+    userMessage,
+    retrievedWebData: [] as { title: string; url: string; content: string }[],
+    conversationHistory: [] as { role: "user" | "assistant"; text: string }[],
+  };
+  // One honest retry after a 2s backoff: a single empty/rate-limited response
+  // (a common Gemini transient) must not abort an entire grade/revision run.
+  try {
+    return await generateSynthesizedResponse(params);
+  } catch {
+    await new Promise((r) => setTimeout(r, 2000));
+    return generateSynthesizedResponse(params);
+  }
+}
+
+type Tab = "input" | "story" | "seed" | "diagnostics" | "map" | "grade" | "revise";
+
+// ═══ TAB 1 — FICTION INPUT ═══════════════════════════════════════════
+function FictionInputTab({ iframeRef }: { iframeRef: FrameRef }) {
+  const [tick, setTick] = useState(0);
+  const [showFullSession, setShowFullSession] = useState(false);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [showWorkspaceCalls, setShowWorkspaceCalls] = useState(false);
+
+  useEffect(() => {
+    const t = window.setInterval(() => setTick((n) => n + 1), 1000);
+    return () => window.clearInterval(t);
+  }, []);
+
+  const chapterCalls = useMemo(() => getModelCallLog().filter((r) => r.tag === "fiction-chapter"), [tick]);
+  const workspaceCalls = useMemo(
+    () => getModelCallLog().filter((r) => r.tag === "manuscript-grade-v2" || r.tag === "ai-revision-v2"),
+    [tick],
+  );
+
+  const displayed = useMemo(() => {
+    if (showFullSession || chapterCalls.length === 0) return chapterCalls;
+    let startIdx = 0;
+    for (let i = chapterCalls.length - 1; i > 0; i -= 1) {
+      if (chapterCalls[i].ts - chapterCalls[i - 1].ts > 120_000) {
+        startIdx = i;
+        break;
+      }
+    }
+    return chapterCalls.slice(startIdx);
+  }, [chapterCalls, showFullSession]);
+
+  const frame = iframeRef.current;
+  const settings = getSettings(frame);
+  const seed = getPersonaSeed(frame);
+  const model = getActiveModel(frame);
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <Card>
+        <Head icon="📥" title="Fiction Input" right={chapterCalls.length ? `${displayed.length} of ${chapterCalls.length} call(s)` : "no chapter calls recorded yet"} />
+        <div className="mt-2 space-y-2 text-[12px] text-zinc-600">
+          <p>
+            Single source of truth: this is the literal <code>userMessage</code> argument passed to the model for each call — tapped
+            after style persona + template override + the SAGE contract are already concatenated.
+          </p>
+          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5 rounded-md border border-zinc-100 bg-zinc-50/60 p-2 font-mono text-[11px]">
+            <span className="text-zinc-500">persona seed</span><span className="font-semibold text-zinc-800">{seed != null ? seed : "(none)"}</span>
+            <span className="text-zinc-500">active model</span><span className="font-semibold text-zinc-800">{model || "(default)"}</span>
+            <span className="text-zinc-500">template</span><span className="font-semibold text-zinc-800">{String(settings.activeTemplateId ?? "—")}{settings.templateEnabled ? " (on)" : ""}</span>
+            <span className="text-zinc-500">style mode</span><span className="font-semibold text-zinc-800">{String(settings.styleMode ?? "—")}</span>
+            <span className="text-zinc-500">custom templates</span><span className="font-semibold text-zinc-800">{getCustomTemplateCount(frame)}</span>
+          </div>
+          <div className="flex gap-2">
+            {chapterCalls.length > 1 && (
+              <button onClick={() => setShowFullSession((v) => !v)} className="rounded bg-zinc-100 px-2 py-0.5 text-[11px] font-semibold text-zinc-600 hover:bg-zinc-200">
+                {showFullSession ? "show latest run only" : "show full session"}
+              </button>
+            )}
+            {workspaceCalls.length > 0 && (
+              <button onClick={() => setShowWorkspaceCalls((v) => !v)} className="rounded bg-violet-100 px-2 py-0.5 text-[11px] font-semibold text-violet-700 hover:bg-violet-200">
+                {showWorkspaceCalls ? "hide workspace calls" : `show workspace calls (${workspaceCalls.length})`}
+              </button>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      {showWorkspaceCalls && (
+        <div className="space-y-1">
+          {workspaceCalls.map((rec) => {
+            const isOpen = openId === rec.id;
+            return (
+              <div key={rec.id} className="rounded-lg border border-zinc-200 bg-zinc-50/60">
+                <button
+                  type="button"
+                  onClick={() => setOpenId(isOpen ? null : rec.id)}
+                  className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-[11px] font-bold text-zinc-700"
+                >
+                  <Pill tone={rec.tag === "manuscript-grade-v2" ? "violet" : "rose"}>{rec.tag}</Pill>
+                  <Pill tone="sky">{rec.provider}/{rec.model}</Pill>
+                  <span className="font-mono text-[9px] text-zinc-400">{rec.userMessage.length.toLocaleString()} chars</span>
+                  <span className="ml-auto text-zinc-400">{new Date(rec.ts).toLocaleTimeString()}</span>
+                  <span>{isOpen ? "▲" : "▼"}</span>
+                </button>
+                {isOpen && (
+                  <pre className="mx-2 mb-2 max-h-[320px] overflow-auto whitespace-pre-wrap rounded border border-zinc-200 bg-white p-2 font-mono text-[9.5px] leading-snug text-zinc-800">
+                    {rec.userMessage}
+                  </pre>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {displayed.map((rec: ModelCallRecord, i: number) => {
+        const isOpen = openId === rec.id;
+        const unifiedDirectivePresent = /REMINDER — REALITY LEVEL \d\/6/.test(rec.userMessage);
+        return (
+          <div key={rec.id} className="rounded-lg border border-violet-200 bg-violet-50/40">
+            <button
+              type="button"
+              onClick={() => setOpenId(isOpen ? null : rec.id)}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-[11px] font-bold text-violet-800"
+            >
+              <span>Chapter call #{i + 1}</span>
+              <Pill tone={rec.ok ? "emerald" : "rose"}>{rec.ok ? "ok" : "error"}</Pill>
+              <Pill tone="sky">{rec.provider}/{rec.model}</Pill>
+              <Pill tone={unifiedDirectivePresent ? "teal" : "amber"}>{unifiedDirectivePresent ? "unified directive verified in prompt" : "unified directive marker not found"}</Pill>
+              <span className="font-mono text-[9px] text-violet-500">{rec.userMessage.length.toLocaleString()} chars · ~{estTokens(rec.userMessage).toLocaleString()} tok</span>
+              <span className="ml-auto text-zinc-400">{new Date(rec.ts).toLocaleTimeString()}</span>
+              <span>{isOpen ? "▲" : "▼"}</span>
+            </button>
+            {isOpen && (
+              <div className="space-y-1 border-t border-violet-200 px-3 py-2">
+                <pre className="max-h-[420px] overflow-auto whitespace-pre-wrap rounded border border-violet-200 bg-white p-2 font-mono text-[9.5px] leading-snug text-violet-950">
+                  {rec.userMessage}
+                </pre>
+                <div className="text-[10px] italic text-violet-600">
+                  Response: {rec.responseChars.toLocaleString()} chars in {rec.durationMs.toLocaleString()}ms.
+                  {rec.error ? ` Error: ${rec.error}` : ""}
+                </div>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ═══ TAB 2 — SYSTEM MAP & LIVE RUNTIME ═══════════════════════════════
+function SystemMapTab({ iframeRef }: { iframeRef: FrameRef }) {
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    const t = window.setInterval(() => setTick((n) => n + 1), 1500);
+    return () => window.clearInterval(t);
+  }, []);
+
+  const callLog = useMemo(() => getModelCallLog(), [tick]);
+  const counts = useMemo(() => {
+    const c: Record<string, number> = {};
+    for (const r of callLog) c[r.tag] = (c[r.tag] ?? 0) + 1;
+    return c;
+  }, [callLog]);
+  const seed = getPersonaSeed(iframeRef.current);
+  const chapters = useMemo(() => assembleManuscript(iframeRef.current).chapters, [tick, iframeRef]);
+
+  function liveEvidenceFor(entryName: string): string | null {
+    const key = entryName.toLowerCase();
+    if (key.includes("fiction input")) return `${counts["fiction-chapter"] ?? 0} chapter call(s) logged this session`;
+    if (key.includes("grade v2")) return `${counts["manuscript-grade-v2"] ?? 0} grading call(s) this session`;
+    if (key.includes("revision")) return `${counts["ai-revision-v2"] ?? 0} revision call(s) this session`;
+    if (key.includes("legacy grade")) return `${counts["manuscript-grade-legacy"] ?? 0} legacy grading call(s) this session`;
+    if (key.includes("blueprint") || key.includes("unified roll") || key.includes("persona") || key.includes("saga-os v1") || key.includes("saga-os v2") || key.includes("saga-os v3") || key.includes("saga-os v4"))
+      return seed != null ? `ACTIVE this roll — seed ${seed}` : "engine seed active (persona seed set)";
+    if (key.includes("reality") || key.includes("style judge")) return "audited post-generation (engine-internal; counts not exposed by prebuilt bundle)";
+    return null;
+  }
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <Card>
+        <Head icon="🗺" title="SAGA OS Studio — system map" right={seed != null ? `live roll: seed ${seed}` : "no live roll available"} />
+        <div className="mt-2 text-[12px] text-zinc-600">
+          Every subsystem below is honestly tiered by how it actually participates. Automatic systems recompute from the SAME
+          localStorage settings the engine uses, so &quot;ACTIVE this roll&quot; here is the same fact shown there — not a second
+          opinion.
+        </div>
+      </Card>
+      <Card>
+        <Head icon="📊" title="Live call counters (this session)" />
+        <div className="mt-2 grid grid-cols-2 gap-1 sm:grid-cols-3">
+          {[
+            ["Fiction chapters", counts["fiction-chapter"] ?? 0, "sky"],
+            ["Legacy grade (1-10)", counts["manuscript-grade-legacy"] ?? 0, "zinc"],
+            ["Grade v2 (weighted)", counts["manuscript-grade-v2"] ?? 0, "violet"],
+            ["Revision v2 calls", counts["ai-revision-v2"] ?? 0, "rose"],
+            ["Live research", counts["live-research"] ?? 0, "sky"],
+            ["Chapters observed", chapters, "teal"],
+            ["Style/reality audits", "(engine-internal)", "amber"],
+            ["Total model calls", callLog.length, "zinc"],
+          ].map(([label, val, tone]) => (
+            <div key={label as string} className="rounded border border-zinc-200 bg-zinc-50 p-1 text-center">
+              <div className="text-[9px] uppercase text-zinc-400">{label}</div>
+              <div className="text-sm font-bold text-zinc-800">
+                <Pill tone={tone as string}>{String(val)}</Pill>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+      <div className="space-y-2">
+        {SAGA_SYSTEM_MAP.map((e) => {
+          const evidence = liveEvidenceFor(e.name);
+          return (
+            <div key={e.id} className="rounded-lg border border-zinc-200 bg-white p-2">
+              <div className="flex flex-wrap items-center gap-1">
+                <span className="text-[11px] font-bold text-zinc-800">{e.name}</span>
+                <Pill tone={SYSTEM_TIER_TONE[e.tier]}>{SYSTEM_TIER_LABEL[e.tier]}</Pill>
+              </div>
+              <div className="mt-0.5 text-[11px] text-zinc-500">{e.description}</div>
+              <div className="mt-0.5 font-mono text-[9px] text-zinc-400">wired via: {e.wiredVia}</div>
+              {evidence && <div className="mt-0.5 text-[10px] font-semibold text-teal-700">runtime: {evidence}</div>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ═══ TAB 3 — MANUSCRIPT GRADE v2 ═════════════════════════════════════
+type GradeV2State =
+  | { status: "idle" }
+  | { status: "grading"; modelLabel: string }
+  | { status: "done"; report: ManuscriptGradeReportV2 }
+  | { status: "error"; error: string };
+
+function GradeV2Tab({ manuscript, keys, allowlist }: { manuscript: string | null; keys: Keys; allowlist: string[] }) {
+  const [state, setState] = useState<GradeV2State>({ status: "idle" });
+
+  const onGrade = useCallback(async () => {
+    if (!manuscript) return;
+    const choice = pickModelWithAllowlist(keys, [], allowlist);
+    if (!choice) {
+      setState({ status: "error", error: "No model with a configured API key is available. Add a key in Settings." });
+      return;
+    }
+    setState({ status: "grading", modelLabel: `${choice.provider}/${choice.id}` });
+    try {
+      const report = await gradeManuscriptV2(
+        manuscript,
+        { provider: choice.provider, modelId: choice.id },
+        (userMessage) => generateWith(keys, { provider: choice.provider, modelId: choice.id }, userMessage),
+      );
+      setState({ status: "done", report });
+    } catch (err) {
+      setState({ status: "error", error: err instanceof Error ? err.message : String(err) });
+    }
+  }, [manuscript, keys, allowlist]);
+
+  const copyTable = useCallback(() => {
+    if (state.status !== "done") return;
+    try {
+      copyText(state.report.tableText);
+    } catch {
+      /* clipboard optional */
+    }
+  }, [state]);
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <Card>
+        <Head icon="📚" title="Manuscript Grade v2 — weighted 100-point rubric" right={manuscript ? `${wordCount(manuscript).toLocaleString()} words available` : "no manuscript yet"} />
+        <div className="mt-2 text-[12px] text-zinc-600">
+          Grades the full manuscript (the entire book generated so far, not just the last chapter) with a fresh, randomly-selected
+          model from your configured keys.
+        </div>
+        <button
+          type="button"
+          disabled={!manuscript || state.status === "grading"}
+          onClick={onGrade}
+          className="mt-2 rounded bg-violet-700 px-3 py-1.5 text-[11px] font-bold text-white hover:bg-violet-800 disabled:opacity-40"
+        >
+          {state.status === "grading" ? `Grading with ${state.modelLabel}…` : "📋 Run standalone manuscript grading report"}
+        </button>
+        {state.status === "error" && <div className="mt-2 text-[11px] font-semibold text-rose-700">Grading failed: {state.error}</div>}
+      </Card>
+
+      {state.status === "done" && (
+        <div className="space-y-3">
+          <Card>
+            <Head icon="🧮" title="Weighted composite" right={<button onClick={copyTable} className="rounded bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold text-zinc-600">copy table as text</button>} />
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <span className="text-xl font-black text-zinc-900">{state.report.weightedComposite.toFixed(2)}/100</span>
+              <Pill tone="violet">GRADE: {state.report.compositeLetterBand}</Pill>
+              <span className="text-[10px] text-zinc-500">judged by {state.report.provider}/{state.report.modelId}{state.report.truncated ? ` · manuscript truncated from ${state.report.truncatedFromChars.toLocaleString()} chars` : ""}</span>
+            </div>
+            {state.report.parseError && (
+              <div className="mt-2 rounded border border-amber-200 bg-amber-50 p-1 text-[11px] text-amber-800">
+                Judge response could not be parsed as structured JSON ({state.report.parseError}); categories shown as neutral 50s. Raw text preserved below.
+              </div>
+            )}
+            <div className="mt-2 space-y-2">
+              {state.report.categories.map((c) => (
+                <div key={c.key} className="rounded border border-zinc-100 p-1">
+                  <div className="flex items-center gap-1">
+                    <span className="w-64 shrink-0 text-[11px] font-bold text-zinc-700">{c.label} ({c.weightPct}%)</span>
+                    <div className="h-1 flex-1 rounded-full bg-zinc-100">
+                      <div className="h-full rounded-full" style={{ width: `${c.score}%`, backgroundColor: `hsl(${Math.round((c.score / 100) * 120)},55%,50%)` }} />
+                    </div>
+                    <span className="w-16 text-right font-mono text-[11px] text-zinc-700">{c.score}</span>
+                    <span className="w-24 text-right font-mono text-[10px]">w={c.weightedScore.toFixed(2)}</span>
+                    <Pill>{c.letterBand} — {c.descriptor}</Pill>
+                  </div>
+                  {c.rationale && <div className="mt-0.5 text-[11px] text-zinc-500">{c.rationale}</div>}
+                </div>
+              ))}
+            </div>
+          </Card>
+          <Card>
+            <Head icon="🔎" title="Additional criteria (diagnostic, not weighted)" />
+            <div className="mt-1 text-[9px] italic text-amber-700">{state.report.additionalCriteriaSourceNote}</div>
+            <div className="mt-1 grid grid-cols-2 gap-1 sm:grid-cols-2">
+              {state.report.additionalCriteria.map((a) => (
+                <div key={a.key} className="rounded border border-zinc-100 p-1">
+                  <div className="flex items-center gap-1">
+                    <span className="text-[11px] font-semibold text-zinc-700">{a.label}</span>
+                    <span className="font-mono text-[11px] text-zinc-700">{a.score}</span>
+                  </div>
+                  {a.note && <div className="mt-0.5 text-[10px] text-zinc-500">{a.note}</div>}
+                </div>
+              ))}
+            </div>
+          </Card>
+          <Card>
+            <Head icon="✏️" title="Exact rewrite suggestions" right={`${state.report.rewriteSuggestions.filter((s) => s.verified).length}/${state.report.rewriteSuggestions.length} quote-verified`} />
+            <div className="mt-1 space-y-1">
+              {state.report.rewriteSuggestions.length === 0 && <div className="text-[11px]">No rewrite suggestions returned.</div>}
+              {state.report.rewriteSuggestions.map((s) => (
+                <div key={s.id} className="rounded border border-zinc-100 p-1">
+                  <div className="flex flex-wrap items-center gap-1">
+                    <Pill>{s.category}</Pill>
+                    <span className="text-[10px] font-semibold text-zinc-700">{s.location}</span>
+                    <Pill tone={s.verified ? "emerald" : "rose"}>{s.verified ? "quote verified" : "quote NOT found verbatim — unverified"}</Pill>
+                  </div>
+                  <div className="mt-1 rounded bg-zinc-50/60 p-1 text-[11px] text-zinc-900">
+                    <b>Original:</b> &quot;{s.originalQuote}&quot;
+                  </div>
+                  <div className="mt-0.5 rounded bg-emerald-50/60 p-1 text-[11px] text-emerald-900">
+                    <b>Rewrite:</b> &quot;{s.rewrittenQuote}&quot;
+                  </div>
+                  <div className="mt-0.5 text-[11px] text-zinc-500"><b>Why:</b> {s.rationale}</div>
+                </div>
+              ))}
+            </div>
+          </Card>
+          <Card>
+            <Head icon="🧾" title="Formatted report (copyable plain text)" />
+            <pre className="mt-1 max-h-64 overflow-auto whitespace-pre-wrap rounded bg-zinc-50 p-2 font-mono text-[9.5px] leading-snug text-zinc-700">{state.report.tableText}</pre>
+            {state.report.parseError && (
+              <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded border border-amber-200 bg-amber-50/50 p-2 font-mono text-[9px] text-amber-900">{state.report.rawJudgeText}</pre>
+            )}
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ═══ TAB 4 — RECURSIVE REVISION (WITH HIGHLIGHTED DIFFS) ══════════════
+interface RevisionState {
+  status: "idle" | "running" | "done" | "error";
+  events: RevisionProgressEvent[];
+  result: RevisionLoopResult | null;
+  error?: string;
+}
+
+function RevisionTab({
+  manuscript,
+  keys,
+  allowlist,
+  iframeRef,
+  setManuscript,
+}: {
+  manuscript: string | null;
+  keys: Keys;
+  allowlist: string[];
+  iframeRef: FrameRef;
+  setManuscript: (s: string) => void;
+}) {
+  const [targetScore, setTargetScore] = useState(85);
+  const [maxIterations, setMaxIterations] = useState(4);
+  const [budget, setBudget] = useState<RevisionBudgetOptions>({ ...DEFAULT_REVISION_BUDGET });
+  const [state, setState] = useState<RevisionState>({ status: "idle", events: [], result: null });
+  const [adoptMsg, setAdoptMsg] = useState("");
+  const [showDiffView, setShowDiffView] = useState(true);
+
+  const pickModelCb = useCallback(
+    (exclude: string[]) => {
+      // Prefer allowlist; fall back to full keyed roster so a blank allowlist never
+      // soft-locks the revision button (honest power: any configured key works).
+      const choice =
+        pickModelWithAllowlist(keys, exclude, allowlist) ||
+        pickRandomAvailableModel(keys as Record<string, string>, exclude);
+      return choice ? { provider: choice.provider, modelId: choice.id } : null;
+    },
+    [keys, allowlist],
+  );
+
+  const generate = useCallback(
+    async (userMessage: string, choice: { provider: string; modelId: string }) => generateWith(keys, choice, userMessage),
+    [keys],
+  );
+
+  const onRun = useCallback(async () => {
+    if (!manuscript?.trim()) {
+      setState({ status: "error", events: [], result: null, error: "No manuscript loaded. Load from engine or paste text first." });
+      return;
+    }
+    if (!Object.values(keys).some((v) => !!v && String(v).trim())) {
+      setState({ status: "error", events: [], result: null, error: "No API key configured. Add a Gemini key in Settings or the console header." });
+      return;
+    }
+    setAdoptMsg("");
+    setState({ status: "running", events: [], result: null });
+    try {
+      const result = await runRecursiveRevisionLoop({
+        manuscriptText: manuscript,
+        targetScore,
+        maxIterations,
+        pickModel: pickModelCb,
+        generate,
+        onProgress: (e) => setState((s) => ({ ...s, events: [...s.events, e] })),
+        budget,
+      });
+      setState((s) => ({ ...s, status: result.status === "error" ? "error" : "done", result, error: result.error }));
+    } catch (err) {
+      setState({
+        status: "error",
+        events: [],
+        result: null,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  }, [manuscript, targetScore, maxIterations, pickModelCb, generate, budget, keys]);
+
+  const canAdopt = state.status === "done" && !!state.result && !!state.result.finalText;
+
+  const onAdopt = useCallback(() => {
+    if (!canAdopt || !state.result) return;
+    const text = state.result.finalText;
+    setManuscript(text);
+    const attempt = attemptAdoptToEngine(iframeRef.current, text);
+    copyText(text).then((copied) => {
+      setAdoptMsg(
+        `${attempt.ok ? "✓ " + attempt.detail : "⚠ engine write-back unavailable: " + attempt.detail}. Working manuscript updated.${copied ? " Full text also copied to clipboard." : ""}`,
+      );
+    });
+  }, [canAdopt, state.result, setManuscript, iframeRef]);
+
+  // Compute visual word diff between original manuscript and revised draft
+  const diffChunks = useMemo(() => {
+    if (!manuscript || !state.result?.finalText) return [];
+    return computeWordDiff(manuscript, state.result.finalText);
+  }, [manuscript, state.result?.finalText]);
+
+  const diffHtml = useMemo(() => formatDiffAsHtml(diffChunks), [diffChunks]);
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <Card>
+        <Head icon="🔁" title="Pareto-Superior Targeted Recursive Revision" right={manuscript ? `${wordCount(manuscript).toLocaleString()} words available` : "no manuscript yet"} />
+        <div className="mt-2 text-[12px] text-zinc-600">
+          Target-score recursive loop with <b>Weighted-Deficit Targeting</b> (solves the Plot/Character 40% deficit trap), <b>L0→L1→L2 Escalation</b>,
+          and a calibrated <b>Noise Margin (+0.5 pt)</b> so stochastic variance never ratchets drafts downhill.
+        </div>
+        <div className="mt-2 flex flex-wrap items-center gap-3">
+          <label className="flex items-center gap-1 text-[11px] text-zinc-700">
+            Target score
+            <input
+              type="number"
+              min={1}
+              max={100}
+              value={targetScore}
+              onChange={(e) => setTargetScore(Math.max(1, Math.min(100, Number(e.target.value) || 85)))}
+              className="w-16 rounded border border-zinc-300 px-1 py-0.5 font-mono text-[11px]"
+            />
+            /100
+          </label>
+          <label className="flex items-center gap-1 text-[11px] text-zinc-700">
+            Max iterations
+            <input
+              type="number"
+              min={1}
+              max={8}
+              value={maxIterations}
+              onChange={(e) => setMaxIterations(Math.max(1, Math.min(8, Number(e.target.value) || 4)))}
+              className="w-14 rounded border border-zinc-300 px-1 py-0.5 font-mono text-[11px]"
+            />
+          </label>
+          <label className="flex items-center gap-1 text-[11px] text-zinc-700" title="Max fraction of the manuscript that may change per pass (hard cap)">
+            Rewrite budget
+            <input
+              type="range" min={5} max={50} step={1} value={budget.maxRewritePct}
+              onChange={(e) => setBudget((b) => ({ ...b, maxRewritePct: Number(e.target.value) }))}
+              className="w-24 accent-rose-600"
+            />
+            <span className="font-mono font-bold">{budget.maxRewritePct}%</span>
+          </label>
+          <label className="flex items-center gap-1 text-[11px] text-zinc-700" title="Longest single contiguous replacement (standard 10 paragraphs; max 1 chapter)">
+            Max replacement
+            <input
+              type="range" min={1} max={30} step={1} value={budget.maxReplacementParagraphs}
+              onChange={(e) => setBudget((b) => ({ ...b, maxReplacementParagraphs: Number(e.target.value) }))}
+              className="w-24 accent-rose-600"
+            />
+            <span className="font-mono font-bold">{budget.maxReplacementParagraphs}¶</span>
+          </label>
+          <label className="flex items-center gap-1 text-[11px] text-zinc-700" title="Permit one full-chapter replacement as the absolute maximum">
+            <input
+              type="checkbox" checked={budget.allowChapterReplacement}
+              onChange={(e) => setBudget((b) => ({ ...b, allowChapterReplacement: e.target.checked }))}
+              className="h-3.5 w-3.5 accent-rose-600"
+            />
+            allow 1-chapter max
+          </label>
+          <button
+            type="button"
+            disabled={!manuscript || state.status === "running"}
+            onClick={onRun}
+            className="rounded bg-rose-700 px-3 py-1.5 text-[11px] font-bold text-white hover:bg-rose-800 disabled:opacity-40"
+          >
+            {state.status === "running" ? "Running Targeted Revision…" : "🚀 Start Targeted Revision"}
+          </button>
+        </div>
+      </Card>
+
+      {state.events.length > 0 && (
+        <Card>
+          <Head icon="📡" title="Live status &amp; Diagnostics" right={state.status} />
+          <div className="mt-1 max-h-56 space-y-0.5 overflow-y-auto font-mono text-[9.5px] text-zinc-700">
+            {state.events.map((e, i) => (
+              <div key={i}>
+                {e.phase === "grading-initial" && "→ grading initial manuscript with fresh context…"}
+                {e.phase === "grading-initial-done" && `✓ initial score: ${e.report.weightedComposite.toFixed(2)}/100 (${e.report.compositeLetterBand})`}
+                {e.phase === "revising" && `→ iteration ${e.iteration} [${e.escalation}]: targeting ${e.targetCategory} with ${e.model.provider}/${e.model.modelId}…`}
+                {e.phase === "revising-done" && `✓ iteration ${e.iteration}: ~${e.changedRatioPct}% changed${e.stagnationDiagnosis ? ` — ${e.stagnationDiagnosis}` : ""}${e.anomaly ? ` (⚠ ${e.anomaly})` : ""}`}
+                {e.phase === "grading" && `→ iteration ${e.iteration}: independent re-grading with ${e.model.provider}/${e.model.modelId}…`}
+                {e.phase === "grading-done" && `✓ iteration ${e.iteration}: score ${e.report.weightedComposite.toFixed(2)}/100 (${e.report.compositeLetterBand}) -> ${e.accepted ? "PROMOTED ✅" : "HELD BACK (Best-Kept) 🛡️: " + (e.rejectionReason || "")}`}
+                {e.phase === "error" && `✗ ERROR: ${e.message}`}
+                {e.phase === "done" && `● loop finished — status: ${e.result.status}`}
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {state.result && (
+        <Card>
+          <Head icon="🏁" title="Revision Result &amp; Diff Comparison" right={state.result.status} />
+          <div className="mt-1 flex flex-wrap items-center gap-1 text-[11px]">
+            {state.result.initialReport && <Pill tone="zinc">start: {state.result.initialReport.weightedComposite.toFixed(2)}</Pill>}
+            {state.result.finalReport && (
+              <Pill tone={state.result.finalReport.weightedComposite >= targetScore ? "emerald" : "amber"}>
+                final: {state.result.finalReport.weightedComposite.toFixed(2)}/100 ({state.result.finalReport.compositeLetterBand})
+              </Pill>
+            )}
+            <Pill>{state.result.iterations.length} revision iteration(s)</Pill>
+            {state.result.plateauDetected && <Pill tone="amber">Plateau Escalation Triggered</Pill>}
+          </div>
+
+          {state.result.iterations.length > 0 && (
+            <div className="mt-2 space-y-1">
+              {state.result.iterations.map((it) => (
+                <div key={it.iteration} className="rounded border border-zinc-100 p-1.5 text-[11px] text-zinc-700 bg-zinc-50/50">
+                  <div className="flex items-center gap-2">
+                    <b>Iteration {it.iteration} ({it.escalation})</b>
+                    <span>{it.beforeScore.toFixed(2)} → {it.afterScore.toFixed(2)}</span>
+                    <Pill tone={it.accepted ? "emerald" : "zinc"}>{it.accepted ? "Promoted" : "Rejected"}</Pill>
+                    <span className="text-[10px] text-zinc-500">revised: {it.reviseModel.modelId} · graded: {it.gradeModel.modelId} · ~{it.changedRatioPct}% diff</span>
+                  </div>
+                  {it.unitCounts && (
+                    <div className="mt-0.5 font-mono text-[10px] text-zinc-500">
+                      units — word:{it.unitCounts.word} phrase:{it.unitCounts.phrase} sent:{it.unitCounts.sentence} ¶:{it.unitCounts.paragraph} page:{it.unitCounts.page} ch:{it.unitCounts.chapter}
+                      {typeof it.budgetUsedPct === "number" && <span> · budget used {it.budgetUsedPct}%</span>}
+                    </div>
+                  )}
+                  {it.rejectionReason && <div className="mt-0.5 text-[10px] text-zinc-500 italic">{it.rejectionReason}</div>}
+                  {it.stagnationDiagnosis && <div className="mt-0.5 text-[10px] text-indigo-700 font-medium">{it.stagnationDiagnosis}</div>}
+                  {it.anomaly && <div className="mt-0.5 text-amber-700">⚠ {it.anomaly}</div>}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Diff view toggle */}
+          <div className="mt-3 flex items-center justify-between border-t border-zinc-100 pt-2">
+            <div className="flex items-center gap-2">
+              <span className="text-xs font-bold text-zinc-800">Draft Inspector:</span>
+              <button
+                type="button"
+                onClick={() => setShowDiffView(!showDiffView)}
+                className="rounded border border-zinc-300 bg-zinc-100 px-2 py-0.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-200"
+              >
+                {showDiffView ? "Switch to Plain Text" : "Switch to Highlighted Diffs"}
+              </button>
+            </div>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                disabled={!canAdopt}
+                onClick={onAdopt}
+                className="rounded bg-emerald-700 px-3 py-1.5 text-[11px] font-bold text-white hover:bg-emerald-800 disabled:opacity-40"
+              >
+                ✅ Adopt Revised Text
+              </button>
+            </div>
+          </div>
+
+          {/* Highlighted diff display */}
+          <div className="mt-2 max-h-72 overflow-y-auto rounded-lg border border-zinc-200 bg-white p-3 font-mono text-[11px] leading-relaxed text-zinc-800">
+            {showDiffView ? (
+              <div dangerouslySetInnerHTML={{ __html: diffHtml }} />
+            ) : (
+              <pre className="whitespace-pre-wrap">{state.result.finalText}</pre>
+            )}
+          </div>
+
+          {adoptMsg && <div className="mt-1 text-[11px] text-zinc-600">{adoptMsg}</div>}
+        </Card>
+      )}
+
+      {state.status === "error" && (
+        <Card>
+          <div className="text-[11px] font-semibold text-rose-700">Loop error: {state.error}</div>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+// ═══ MAIN — tabs ═══════════════════════════════════════════════════
+export function FictionSystemPanels({
+  iframeRef,
+  manuscript,
+  setManuscript,
+}: {
+  iframeRef: FrameRef;
+  manuscript: string;
+  setManuscript: (s: string) => void;
+}) {
+  const [tab, setTab] = useState<Tab>("story");
+  const [keysTick, setKeysTick] = useState(0);
+  const [geminiOverride, setGeminiOverride] = useState("");
+  const [allowlistText, setAllowlistText] = useState("");
+  const [toggles, setToggles] = useState<ContinuityToggles>(DEFAULT_CONTINUITY_TOGGLES);
+  const [seedControl, setSeedControl] = useState<SeedControl>(() => loadSeedControl());
+  useEffect(() => { saveSeedControl(seedControl); }, [seedControl]);
+
+  const bridgeKeys = useMemo(() => getKeys(iframeRef.current) as Keys, [iframeRef, keysTick]);
+  const keys: Keys = useMemo(
+    () => ({ ...bridgeKeys, ...(geminiOverride.trim() ? { gemini: geminiOverride.trim() } : {}) }),
+    [bridgeKeys, geminiOverride],
+  );
+  const allowlist = useMemo(() => allowlistText.split(",").map((s) => s.trim()).filter(Boolean), [allowlistText]);
+
+  useEffect(() => {
+    const t = window.setInterval(() => setKeysTick((n) => n + 1), 3000);
+    return () => window.clearInterval(t);
+  }, []);
+
+  const configured = ["gemini", "claude", "grok", "deepseek"].filter((p) => !!keys[p]);
+  const modelPool = useMemo(() => MODELS.map((m) => m.id), []);
+
+  const TABS: { id: Tab; label: string }[] = [
+    { id: "story", label: "🚀 Story Engine" },
+    { id: "seed", label: "🌱 Seed & Locks" },
+    { id: "diagnostics", label: "🔬 Diagnostics & Recovery" },
+    { id: "input", label: "📥 Fiction Input" },
+    { id: "map", label: "🗺 System Map" },
+    { id: "grade", label: "📚 Manuscript Grade v2" },
+    { id: "revise", label: "🔁 Targeted Revision" },
+  ];
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-xl border border-violet-300 bg-white p-3">
+        <div className="mb-2 text-[11px] font-bold uppercase tracking-wide text-violet-700">
+          Fiction System Transparency &amp; Active Controller (Additive)
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <input
+            type="password"
+            value={geminiOverride}
+            onChange={(e) => setGeminiOverride(e.target.value)}
+            placeholder="Gemini key override (else auto-read from engine)"
+            className="min-w-[200px] flex-1 rounded-lg border border-zinc-300 px-2 py-1 font-mono text-[11px]"
+          />
+          <input
+            value={allowlistText}
+            onChange={(e) => setAllowlistText(e.target.value)}
+            placeholder="model allowlist, comma-separated (blank = all models)"
+            className="min-w-[200px] flex-1 rounded-lg border border-zinc-300 px-2 py-1 font-mono text-[11px]"
+            title="Restrict random rotation to these model IDs"
+          />
+        </div>
+        <div className="mt-1 text-[10px] text-zinc-500">
+          keys: {configured.length ? configured.join(", ") : "(none detected — add in engine Settings)"} · rotation: {allowlist.length ? allowlist.join(", ") : `full registry (${MODELS.length} models)`}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-1">
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={`rounded-md px-2 py-1 text-[11px] font-semibold ${tab === t.id ? "bg-violet-700 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"}`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "story" && (
+        <StoryControllerPanel
+          manuscript={manuscript}
+          setManuscript={setManuscript}
+          apiKey={keys.gemini || ""}
+          toggles={toggles}
+          iframeRef={iframeRef}
+          modelPool={modelPool}
+          seedControl={seedControl}
+        />
+      )}
+
+      {tab === "seed" && (
+        <SeedControlPanel
+          control={seedControl}
+          setControl={setSeedControl}
+          seed={getPersonaSeed(iframeRef.current) ?? 0}
+          previewChapter={(manuscript.match(/^##\s+/gim) || []).length + 1}
+        />
+      )}
+
+      {tab === "diagnostics" && (
+        <DiagnosticRecoveryPanel
+          manuscript={manuscript}
+          setManuscript={setManuscript}
+          toggles={toggles}
+          setToggles={setToggles}
+          apiKey={keys.gemini || ""}
+          modelPool={modelPool}
+          iframeRef={iframeRef}
+        />
+      )}
+
+      {tab === "input" && <FictionInputTab iframeRef={iframeRef} />}
+      {tab === "map" && <SystemMapTab iframeRef={iframeRef} />}
+      {tab === "grade" && <GradeV2Tab manuscript={manuscript || null} keys={keys} allowlist={allowlist} />}
+      {tab === "revise" && (
+        <RevisionTab
+          manuscript={manuscript || null}
+          keys={keys}
+          allowlist={allowlist}
+          iframeRef={iframeRef}
+          setManuscript={setManuscript}
+        />
+      )}
+    </div>
+  );
+}