2sagaco48 1.0.0

package/src/console/InspectorPanels.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useRef, useState, type RefObject } from "react";
+import {
+  getActiveModel,
+  getCustomTemplateCount,
+  getLastRun,
+  getPersonaSeed,
+  getSettings,
+  observeRuntime,
+  type RuntimeSnapshot,
+} from "./engineBridge";
+
+type FrameRef = RefObject<HTMLIFrameElement | null>;
+
+/* ------------------------------------------------------------------ */
+/* Fiction Input inspector                                            */
+/* ------------------------------------------------------------------ */
+export function FictionInputInspector({ iframeRef }: { iframeRef: FrameRef }) {
+  const [tick, setTick] = useState(0);
+  const refresh = () => setTick((t) => t + 1);
+  useEffect(() => {
+    const id = window.setInterval(refresh, 2500);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const frame = iframeRef.current;
+  const settings = getSettings(frame);
+  const seed = getPersonaSeed(frame);
+  const model = getActiveModel(frame);
+  const templates = getCustomTemplateCount(frame);
+  const lastRun = getLastRun(frame);
+
+  // Only surface prompt text that the engine ACTUALLY exposed. No fabrication.
+  const exposedPrompt =
+    lastRun &&
+    (typeof lastRun.prompt === "string"
+      ? (lastRun.prompt as string)
+      : typeof lastRun.compiledPrompt === "string"
+        ? (lastRun.compiledPrompt as string)
+        : typeof lastRun.input === "string"
+          ? (lastRun.input as string)
+          : null);
+
+  const rows: Array<[string, string]> = [
+    ["Active model", model || "(default)"],
+    ["Persona seed", seed != null ? String(seed) : "(none)"],
+    ["Template enabled", String(!!settings.templateEnabled)],
+    ["Active template", String(settings.activeTemplateId ?? "—")],
+    ["Style mode", String(settings.styleMode ?? "—")],
+    ["Deep research", String(!!settings.deepResearch)],
+    ["Search depth", String(settings.searchDepth ?? "—")],
+    ["n-Deep passes", settings.nDeepEnabled ? String(settings.nDeepMaxPasses ?? "—") : "off"],
+    ["Cluster search", settings.clusterSearch ? String(settings.clusterSize ?? "on") : "off"],
+    ["SLOOP long-form", settings.forceSloop ? String(settings.sloopPages ?? "on") + " pages" : "off"],
+    ["Custom templates", String(templates)],
+  ];
+
+  return (
+    <div className="space-y-3 text-[13px]" data-tick={tick}>
+      <div className="flex items-center justify-between">
+        <p className="text-[12px] text-zinc-600">
+          The <b>real parameters</b> the engine uses to compile each chapter prompt (read live from engine storage).
+        </p>
+        <button onClick={refresh} className="rounded-lg border border-zinc-300 px-2 py-1 text-[11px] hover:bg-zinc-50">
+          Refresh
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 gap-x-3 gap-y-1 rounded-lg border border-zinc-200 bg-white p-3">
+        {rows.map(([k, v]) => (
+          <div key={k} className="flex items-center justify-between gap-2 border-b border-zinc-50 py-0.5">
+            <span className="text-[11px] text-zinc-500">{k}</span>
+            <span className="font-mono text-[11px] font-semibold text-zinc-800">{v}</span>
+          </div>
+        ))}
+      </div>
+
+      <div>
+        <h4 className="mb-1 text-[12px] font-bold text-zinc-700">Compiled Fiction Input (as exposed by the engine)</h4>
+        {exposedPrompt ? (
+          <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-lg border border-zinc-200 bg-zinc-900 p-2 text-[11px] leading-relaxed text-zinc-100">
+            {exposedPrompt}
+          </pre>
+        ) : (
+          <p className="rounded-md bg-amber-50 px-2 py-1.5 text-[12px] text-amber-800">
+            The current engine build does not export the fully compiled prompt to <code>veritas.lastrun.v1</code>. Enable
+            <b> Debug Trace</b> inside the engine (Chat settings) to surface the exact per-chapter prompt; it will appear here
+            once written. The parameters above are the honest, verified inputs that drive that prompt.
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* System map (real module inventory)                                */
+/* ------------------------------------------------------------------ */
+type Group = { title: string; blurb: string; items: Array<[string, string]> };
+const SYSTEM_MAP: Group[] = [
+  {
+    title: "SAGA / SAGE core",
+    blurb: "Story Archetype Generation Engine — deterministic seeded rolls that fix genre, archetype, and structure.",
+    items: [
+      ["lib/sage/engine.ts", "rollSage() — master seeded roll"],
+      ["lib/sage/index.ts", "public barrel (taxonomy, prng, judge, saga-os v1-v8)"],
+      ["lib/sage/saga-os-v2..v8.ts", "successive Saga-OS capability layers"],
+      ["lib/sage/saga-os-v3-core.ts / -release.ts", "v3 pipeline compile + release rules"],
+      ["lib/sage/saga-os-v4-aureate.ts", "v4 aureate style/reality layer"],
+      ["lib/sage/unified-roll.ts", "unifiedRoll() — merges archetype + genre + scale"],
+      ["lib/sage/taxonomy.ts", "genre/archetype taxonomy tables"],
+      ["lib/sage/prng.ts", "seeded deterministic PRNG"],
+    ],
+  },
+  {
+    title: "Quality & grounding",
+    blurb: "Reality-grounding, repetition control, and self-judging feed the chapter prompt and the after-write audit.",
+    items: [
+      ["lib/sage/reality-grounding.ts", "loadRealityLevel() — grounding constraints"],
+      ["lib/sage/judge.ts", "rubric self-judge"],
+      ["lib/sage/repetition.ts", "repetition/echo suppression"],
+      ["lib/sage/empty-space.ts (v6/v7)", "negative-space / what-is-left-unsaid engine"],
+      ["lib/sage/worked-sketches.ts", "worked scene sketches"],
+    ],
+  },
+  {
+    title: "Innovation & persona",
+    blurb: "Genome + persona guides shape voice, novelty, and the 'creative tree of life'.",
+    items: [
+      ["lib/innovation-genome-v3..v10.ts", "successive novelty/discovery genomes"],
+      ["lib/innovation-genome-engine(.v2).ts", "seedToGenome() + diagnostics"],
+      ["lib/williams-style.ts", "ARCHETYPES + getPersonaDirective()"],
+      ["lib/williams-persona-guide.ts", "persona guidance tables"],
+      ["lib/omega-templates.ts", "STYLE_OVERRIDES + authoritative output templates"],
+    ],
+  },
+  {
+    title: "Long-form & pipeline",
+    blurb: "The runners that turn a blueprint into chapters and multi-pass drafts.",
+    items: [
+      ["lib/longwriter.ts / writing-tiers.ts", "long-form chapter tiering"],
+      ["lib/v15-pipeline.ts", "runV15OnQuestion / baseline / judge panel"],
+      ["lib/pipeline.ts", "core generation pipeline"],
+      ["lib/n-deep.ts", "n-Deep multi-pass convergence"],
+      ["lib/sloop-runner.ts", "SLOOP paged long-output runner"],
+    ],
+  },
+  {
+    title: "Studio UI panels",
+    blurb: "The front-end surfaces already wired into the engine (rendered inside the app).",
+    items: [
+      ["components/SagaOsPanel.tsx", "primary Saga-OS studio controls"],
+      ["components/SageBlueprintPanel.tsx", "blueprint / 'story in one glance'"],
+      ["components/InnovationPersonaPanel.tsx", "persona genome UI"],
+      ["components/CreativeTreeOfLifePanel.tsx", "creative tree explorer"],
+      ["components/CitationLedgerPanel.tsx", "citation ledger"],
+    ],
+  },
+];
+
+export function SystemMapPanel() {
+  return (
+    <div className="space-y-3 text-[13px]">
+      <p className="text-[12px] text-zinc-600">
+        Capability map of SAGA OS Studio. Module <b>paths are verified</b> against the packaged source
+        (<code>node_modules/src</code>); one-line roles are inferred from source structure and marked as such.
+      </p>
+      <div className="space-y-3">
+        {SYSTEM_MAP.map((g) => (
+          <div key={g.title} className="rounded-lg border border-zinc-200 bg-white p-3">
+            <h4 className="text-[12px] font-bold text-zinc-800">{g.title}</h4>
+            <p className="mb-2 text-[11px] text-zinc-500">{g.blurb}</p>
+            <div className="space-y-0.5">
+              {g.items.map(([path, role]) => (
+                <div key={path} className="flex flex-col gap-0.5 border-b border-zinc-50 py-0.5 sm:flex-row sm:items-baseline sm:justify-between">
+                  <code className="text-[11px] font-semibold text-teal-700">{path}</code>
+                  <span className="text-[11px] text-zinc-500">{role}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Live runtime (observed proxy signals)                             */
+/* ------------------------------------------------------------------ */
+export function RuntimePanel({ iframeRef }: { iframeRef: FrameRef }) {
+  const [snap, setSnap] = useState<RuntimeSnapshot | null>(null);
+  const [live, setLive] = useState(true);
+  const timer = useRef<number | null>(null);
+
+  useEffect(() => {
+    const poll = () => setSnap(observeRuntime(iframeRef.current));
+    poll();
+    if (live) timer.current = window.setInterval(poll, 1500);
+    return () => {
+      if (timer.current) window.clearInterval(timer.current);
+    };
+  }, [live, iframeRef]);
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <div className="flex items-center justify-between">
+        <p className="text-[12px] text-zinc-600">Live runtime of SAGA subsystems in the current story.</p>
+        <label className="flex items-center gap-1.5 text-[11px] text-zinc-600">
+          <input type="checkbox" checked={live} onChange={(e) => setLive(e.target.checked)} /> live
+        </label>
+      </div>
+
+      {snap && (
+        <>
+          <div className="grid grid-cols-3 gap-2">
+            <Stat label="Engine reachable" value={snap.reachable ? "yes" : "no"} />
+            <Stat label="Chapters detected" value={String(snap.chapters)} />
+            <Stat label="Trace size" value={snap.traceChars.toLocaleString() + " ch"} />
+          </div>
+          <div className="rounded-lg border border-zinc-200 bg-white p-2">
+            <div className="mb-1 text-[11px] font-semibold text-zinc-600">Engine phase: <span className="font-mono">{snap.phase}</span></div>
+            <div className="space-y-1">
+              {snap.signals.map((s) => (
+                <div key={s.label} className="flex items-center gap-2">
+                  <span className="w-40 shrink-0 text-[11px] text-zinc-600">{s.label}</span>
+                  <div className="h-2 flex-1 overflow-hidden rounded bg-zinc-100">
+                    <div
+                      className={s.count > 0 ? "h-full bg-teal-500" : "h-full bg-zinc-200"}
+                      style={{ width: Math.min(100, s.count * 8) + "%" }}
+                    />
+                  </div>
+                  <span className="w-8 text-right font-mono text-[11px] font-semibold text-zinc-700">{s.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <p className="text-[10px] text-zinc-400">
+            Activation counts are a <b>DOM keyword census</b> — an honest proxy observed from the engine's rendered output, not
+            source-level instrumentation (which is not accessible in the prebuilt bundle). Chapters = assistant turns detected.
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border border-zinc-200 bg-white p-2 text-center">
+      <div className="font-mono text-sm font-bold text-zinc-800">{value}</div>
+      <div className="text-[10px] uppercase tracking-wide text-zinc-400">{label}</div>
+    </div>
+  );
+}

package/src/console/ManuscriptGraderPanel.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { callGeminiResilient, callGemini } from "./gemini";
+import {
+  buildGradingPrompt,
+  parseGrade,
+  buildAsciiReport,
+  type GradeReport,
+} from "./grading";
+import { copyText, cx, download } from "./util";
+
+type Props = { manuscript: string; apiKey: string; modelPool: string[] };
+
+export function ManuscriptGraderPanel({ manuscript, apiKey, modelPool }: Props) {
+  const [report, setReport] = useState<GradeReport | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string>("");
+  const [modelChoice, setModelChoice] = useState<string>("auto");
+  const [log, setLog] = useState<string>("");
+
+  const canRun = !!manuscript.trim() && !!apiKey.trim() && !busy;
+
+  async function grade() {
+    setBusy(true);
+    setErr("");
+    setReport(null);
+    const { system, prompt } = buildGradingPrompt(manuscript);
+    setLog("Grading " + manuscript.length.toLocaleString() + " chars (fresh context)…");
+    try {
+      const res =
+        modelChoice === "auto"
+          ? await callGeminiResilient(modelPool, undefined, { apiKey, prompt, system, temperature: 0.2 })
+          : await callGemini({ apiKey, model: modelChoice, prompt, system, temperature: 0.2 });
+      if (!res.ok) {
+        setErr(res.error || "Grading failed.");
+        setLog("Failed on model " + (res.model || "?") + " after " + res.ms + " ms.");
+        return;
+      }
+      const parsed = parseGrade(res.text, res.model, res.ms);
+      setReport(parsed);
+      setLog("Graded by " + res.model + " in " + res.ms + " ms." + (parsed.parseError ? " (parse warning)" : ""));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <div className="flex flex-wrap items-center gap-2">
+        <button
+          onClick={grade}
+          disabled={!canRun}
+          className={cx(
+            "rounded-lg px-3 py-1.5 text-[13px] font-semibold text-white",
+            canRun ? "bg-teal-600 hover:bg-teal-500" : "bg-zinc-300",
+          )}
+        >
+          {busy ? "Grading…" : "Grade full manuscript"}
+        </button>
+        <select
+          value={modelChoice}
+          onChange={(e) => setModelChoice(e.target.value)}
+          className="rounded-lg border border-zinc-300 px-2 py-1.5 text-[12px]"
+        >
+          <option value="auto">Model: random (rotation)</option>
+          {modelPool.map((m) => (
+            <option key={m} value={m}>
+              {m}
+            </option>
+          ))}
+        </select>
+        {report && (
+          <>
+            <button
+              onClick={() => copyText(buildAsciiReport(report))}
+              className="rounded-lg border border-zinc-300 px-2.5 py-1.5 text-[12px] font-medium hover:bg-zinc-50"
+            >
+              Copy report
+            </button>
+            <button
+              onClick={() => download("manuscript-grade.txt", buildAsciiReport(report))}
+              className="rounded-lg border border-zinc-300 px-2.5 py-1.5 text-[12px] font-medium hover:bg-zinc-50"
+            >
+              Download
+            </button>
+          </>
+        )}
+      </div>
+
+      {!apiKey.trim() && (
+        <p className="rounded-md bg-amber-50 px-2 py-1 text-[12px] text-amber-800">
+          No Gemini key detected. Enter one in the engine (Chat → Keys) or in the console header, then reload the manuscript.
+        </p>
+      )}
+      {log && <p className="text-[11px] text-zinc-500">{log}</p>}
+      {err && <p className="rounded-md bg-rose-50 px-2 py-1 text-[12px] text-rose-700">{err}</p>}
+
+      {report && (
+        <div className="space-y-4">
+          <div className="overflow-x-auto rounded-lg border border-zinc-200">
+            <table className="w-full border-collapse text-left text-[12px]">
+              <thead className="bg-zinc-100 text-[11px] uppercase tracking-wide text-zinc-600">
+                <tr>
+                  <th className="px-2 py-1.5">Evaluation Criteria (Weight)</th>
+                  <th className="px-2 py-1.5 text-center">Score</th>
+                  <th className="px-2 py-1.5 text-center">Weighted</th>
+                  <th className="px-2 py-1.5 text-center">Grade</th>
+                </tr>
+              </thead>
+              <tbody>
+                {report.criteria.map((c) => (
+                  <tr key={c.key} className="border-t border-zinc-100 align-top">
+                    <td className="px-2 py-1.5">
+                      <div className="font-semibold text-zinc-800">
+                        {c.label} <span className="text-zinc-400">({Math.round(c.weight * 100)}%)</span>
+                      </div>
+                      {c.justification && <div className="mt-0.5 text-[11px] text-zinc-500">{c.justification}</div>}
+                    </td>
+                    <td className="px-2 py-1.5 text-center font-mono">{c.score}</td>
+                    <td className="px-2 py-1.5 text-center font-mono">{c.weighted.toFixed(2)}</td>
+                    <td className="px-2 py-1.5 text-center font-bold">{c.grade}</td>
+                  </tr>
+                ))}
+                <tr className="border-t-2 border-zinc-300 bg-zinc-50">
+                  <td className="px-2 py-2 font-bold text-zinc-900">Weighted Composite Score (100%)</td>
+                  <td className="px-2 py-2 text-center font-mono font-bold">{report.composite.toFixed(2)}</td>
+                  <td className="px-2 py-2" />
+                  <td className="px-2 py-2 text-center text-base font-black">{report.compositeGrade}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          {report.narrative && <p className="text-[12px] italic text-zinc-600">{report.narrative}</p>}
+
+          {report.supplementary.length > 0 && (
+            <div>
+              <h4 className="mb-1 text-[12px] font-bold text-zinc-700">Supplementary dimensions</h4>
+              <div className="flex flex-wrap gap-1.5">
+                {report.supplementary.map((s, i) => (
+                  <span
+                    key={i}
+                    title={s.note}
+                    className="rounded-md border border-zinc-200 bg-white px-2 py-0.5 text-[11px] text-zinc-700"
+                  >
+                    {s.label}: <span className="font-mono font-semibold">{s.score}</span>
+                  </span>
+                ))}
+              </div>
+              <p className="mt-1 text-[10px] text-zinc-400">
+                Supplementary set uses a standard editorial format (the uploaded criteria image was not available to this build).
+              </p>
+            </div>
+          )}
+
+          {report.rewrites.length > 0 && (
+            <div>
+              <h4 className="mb-1 text-[12px] font-bold text-zinc-700">Line-level rewrite suggestions</h4>
+              <div className="space-y-2">
+                {report.rewrites.map((r, i) => (
+                  <div key={i} className="rounded-lg border border-zinc-200 bg-white p-2">
+                    {r.location && <div className="text-[10px] font-semibold uppercase text-zinc-400">{r.location}</div>}
+                    <div className="text-[12px] text-rose-700">“{r.excerpt}”</div>
+                    <div className="mt-0.5 text-[11px] text-zinc-500">Diagnosis: {r.diagnosis}</div>
+                    <div className="mt-0.5 text-[12px] text-emerald-700">→ {r.suggestedRewrite}</div>
+                    {r.rationale && <div className="mt-0.5 text-[11px] text-zinc-400">Why: {r.rationale}</div>}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {report.parseError && (
+            <details className="rounded-lg border border-zinc-200 bg-zinc-50 p-2">
+              <summary className="cursor-pointer text-[12px] font-semibold text-zinc-600">Raw model output</summary>
+              <pre className="mt-1 max-h-64 overflow-auto whitespace-pre-wrap text-[11px] text-zinc-600">{report.raw}</pre>
+            </details>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/console/RecursiveReviserPanel.tsx

@@ -0,0 +1,245 @@
+import { useRef, useState } from "react";
+import { callGeminiResilient } from "./gemini";
+import { buildGradingPrompt, buildRevisionPrompt, parseGrade, type GradeReport } from "./grading";
+import { clampNum, copyText, cx, download, nowStamp } from "./util";
+
+type Props = {
+  manuscript: string;
+  setManuscript: (s: string) => void;
+  apiKey: string;
+  modelPool: string[];
+};
+
+type Step = {
+  n: number;
+  kind: "grade" | "revise";
+  model: string;
+  composite?: number;
+  grade?: string;
+  ms: number;
+  note?: string;
+  ok: boolean;
+};
+
+type Draft = { n: number; text: string; report: GradeReport };
+
+export function RecursiveReviserPanel({ manuscript, setManuscript, apiKey, modelPool }: Props) {
+  const [target, setTarget] = useState(85);
+  const [maxIters, setMaxIters] = useState(4);
+  const [running, setRunning] = useState(false);
+  const [steps, setSteps] = useState<Step[]>([]);
+  const [drafts, setDrafts] = useState<Draft[]>([]);
+  const [best, setBest] = useState<Draft | null>(null);
+  const [err, setErr] = useState("");
+  const abortRef = useRef<AbortController | null>(null);
+
+  const canRun = !!manuscript.trim() && !!apiKey.trim() && !running;
+
+  async function gradeText(text: string, excludeModel: string | undefined) {
+    const { system, prompt } = buildGradingPrompt(text);
+    const res = await callGeminiResilient(modelPool, excludeModel, {
+      apiKey,
+      prompt,
+      system,
+      temperature: 0.2,
+      signal: abortRef.current?.signal,
+    });
+    return { res, report: res.ok ? parseGrade(res.text, res.model, res.ms) : null };
+  }
+
+  async function run() {
+    setRunning(true);
+    setErr("");
+    setSteps([]);
+    setDrafts([]);
+    setBest(null);
+    abortRef.current = new AbortController();
+    const localSteps: Step[] = [];
+    const localDrafts: Draft[] = [];
+    const push = (s: Step) => {
+      localSteps.push(s);
+      setSteps([...localSteps]);
+    };
+
+    try {
+      // Draft 0 baseline grade — fresh context, random model.
+      const g0 = await gradeText(manuscript, undefined);
+      if (!g0.res.ok || !g0.report) {
+        push({ n: 0, kind: "grade", model: g0.res.model, ms: g0.res.ms, ok: false, note: g0.res.error });
+        setErr("Baseline grading failed: " + (g0.res.error || "unknown"));
+        return;
+      }
+      push({ n: 0, kind: "grade", model: g0.res.model, composite: g0.report.composite, grade: g0.report.compositeGrade, ms: g0.res.ms, ok: true });
+      localDrafts.push({ n: 0, text: manuscript, report: g0.report });
+      setDrafts([...localDrafts]);
+      let current = { text: manuscript, report: g0.report };
+      let lastModel = g0.res.model;
+
+      if (current.report.composite >= target) {
+        setBest(localDrafts[0]);
+        push({ n: 0, kind: "grade", model: "—", ms: 0, ok: true, note: "Target already met." });
+        return;
+      }
+
+      for (let i = 1; i <= maxIters; i++) {
+        if (abortRef.current?.signal.aborted) break;
+
+        // Revise — fresh context, random model distinct from last grader.
+        const { system: rs, prompt: rp } = buildRevisionPrompt(current.text, current.report, target);
+        const rev = await callGeminiResilient(modelPool, lastModel, {
+          apiKey,
+          prompt: rp,
+          system: rs,
+          temperature: 0.6,
+          signal: abortRef.current?.signal,
+        });
+        if (!rev.ok || !rev.text.trim()) {
+          push({ n: i, kind: "revise", model: rev.model, ms: rev.ms, ok: false, note: rev.error });
+          setErr("Revision " + i + " failed: " + (rev.error || "empty output"));
+          break;
+        }
+        const revisedText = rev.text.trim();
+        push({ n: i, kind: "revise", model: rev.model, ms: rev.ms, ok: true, note: revisedText.length.toLocaleString() + " chars" });
+        lastModel = rev.model;
+
+        // Grade the new draft — fresh context, random model distinct from reviser.
+        const gr = await gradeText(revisedText, rev.model);
+        if (!gr.res.ok || !gr.report) {
+          push({ n: i, kind: "grade", model: gr.res.model, ms: gr.res.ms, ok: false, note: gr.res.error });
+          setErr("Grading of revision " + i + " failed: " + (gr.res.error || "unknown"));
+          break;
+        }
+        push({ n: i, kind: "grade", model: gr.res.model, composite: gr.report.composite, grade: gr.report.compositeGrade, ms: gr.res.ms, ok: true });
+        localDrafts.push({ n: i, text: revisedText, report: gr.report });
+        setDrafts([...localDrafts]);
+        current = { text: revisedText, report: gr.report };
+        lastModel = gr.res.model;
+
+        if (current.report.composite >= target) break;
+      }
+
+      const bestDraft = localDrafts.slice().sort((a, b) => b.report.composite - a.report.composite)[0] || null;
+      setBest(bestDraft);
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  function stop() {
+    abortRef.current?.abort();
+    setRunning(false);
+  }
+
+  const trajectory = drafts.map((d) => d.report.composite);
+
+  return (
+    <div className="space-y-3 text-[13px]">
+      <div className="flex flex-wrap items-end gap-3">
+        <label className="text-[12px] font-medium text-zinc-600">
+          Target score
+          <input
+            type="number"
+            min={1}
+            max={100}
+            value={target}
+            onChange={(e) => setTarget(clampNum(e.target.value, 1, 100, 85))}
+            className="ml-2 w-16 rounded-lg border border-zinc-300 px-2 py-1 text-[12px]"
+          />
+        </label>
+        <label className="text-[12px] font-medium text-zinc-600">
+          Max iterations
+          <input
+            type="number"
+            min={1}
+            max={8}
+            value={maxIters}
+            onChange={(e) => setMaxIters(clampNum(e.target.value, 1, 8, 4))}
+            className="ml-2 w-14 rounded-lg border border-zinc-300 px-2 py-1 text-[12px]"
+          />
+        </label>
+        {!running ? (
+          <button
+            onClick={run}
+            disabled={!canRun}
+            className={cx(
+              "rounded-lg px-3 py-1.5 text-[13px] font-semibold text-white",
+              canRun ? "bg-indigo-600 hover:bg-indigo-500" : "bg-zinc-300",
+            )}
+          >
+            Run recursive revision
+          </button>
+        ) : (
+          <button onClick={stop} className="rounded-lg bg-rose-600 px-3 py-1.5 text-[13px] font-semibold text-white hover:bg-rose-500">
+            Stop
+          </button>
+        )}
+      </div>
+
+      <p className="text-[11px] text-zinc-500">
+        Each grade and each revision is an independent Gemini call — <b>fresh context, random model</b> (distinct from the previous
+        call). The loop stops when the target is met or iterations are exhausted.
+      </p>
+
+      {err && <p className="rounded-md bg-rose-50 px-2 py-1 text-[12px] text-rose-700">{err}</p>}
+
+      {trajectory.length > 0 && (
+        <div className="rounded-lg border border-zinc-200 bg-white p-2">
+          <div className="text-[11px] font-semibold text-zinc-600">
+            Score trajectory: {trajectory.map((t) => t.toFixed(1)).join(" → ")}{" "}
+            {best && <span className="text-emerald-700">(best {best.report.composite.toFixed(2)} {best.report.compositeGrade})</span>}
+          </div>
+        </div>
+      )}
+
+      {steps.length > 0 && (
+        <div className="space-y-1">
+          {steps.map((s, i) => (
+            <div key={i} className="flex items-center gap-2 rounded-md border border-zinc-100 bg-zinc-50 px-2 py-1 text-[11px]">
+              <span className={cx("rounded px-1.5 py-0.5 font-semibold", s.kind === "grade" ? "bg-teal-100 text-teal-800" : "bg-indigo-100 text-indigo-800")}>
+                {s.kind === "grade" ? "GRADE" : "REVISE"} #{s.n}
+              </span>
+              <span className="font-mono text-zinc-500">{s.model || "—"}</span>
+              {typeof s.composite === "number" && (
+                <span className="font-mono font-semibold text-zinc-800">
+                  {s.composite.toFixed(2)} ({s.grade})
+                </span>
+              )}
+              <span className="text-zinc-400">{s.ms} ms</span>
+              {s.note && <span className={cx("truncate", s.ok ? "text-zinc-500" : "text-rose-600")}>{s.note}</span>}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {best && (
+        <div className="space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <h4 className="text-[12px] font-bold text-zinc-700">
+              Best draft (#{best.n}) — {best.report.composite.toFixed(2)} {best.report.compositeGrade}
+            </h4>
+            <button onClick={() => copyText(best.text)} className="rounded-lg border border-zinc-300 px-2.5 py-1 text-[11px] font-medium hover:bg-zinc-50">
+              Copy manuscript
+            </button>
+            <button
+              onClick={() => download("revised-manuscript-" + nowStamp().replace(/[: ]/g, "-") + ".txt", best.text)}
+              className="rounded-lg border border-zinc-300 px-2.5 py-1 text-[11px] font-medium hover:bg-zinc-50"
+            >
+              Download
+            </button>
+            <button
+              onClick={() => setManuscript(best.text)}
+              className="rounded-lg border border-indigo-300 bg-indigo-50 px-2.5 py-1 text-[11px] font-medium text-indigo-700 hover:bg-indigo-100"
+            >
+              Use as working manuscript
+            </button>
+          </div>
+          <textarea
+            readOnly
+            value={best.text}
+            className="h-48 w-full resize-y rounded-lg border border-zinc-200 bg-white p-2 font-mono text-[11px] text-zinc-700"
+          />
+        </div>
+      )}
+    </div>
+  );
+}