2sagaco48 1.0.0

package/src/components/ChatApp.orig1.tsx

@@ -0,0 +1,722 @@
+/**
+ * Type B — ChatApp pipeline switch wrapper (P5).
+ * ---------------------------------------------------------------------------
+ * Normal mode renders the packaged ChatApp unchanged. Fiction mode intercepts
+ * the same form submit before the package handler can run, preserving the
+ * input/outbox while bypassing retrieval / 4-stage / N-Deep / SLOOP entirely,
+ * and honestly disables the controls that do not apply in fiction mode.
+ *
+ * P5 fixes vs P2:
+ *  - Single consolidated MutationObserver/interval (was 3 independent ones —
+ *    redundant DOM churn during long SAGE runs was a real jank/soft-freeze risk).
+ *  - Live-only controls (4-Stage, N-Deep, Cluster, SLOOP) are truly disabled
+ *    (native `disabled` + dimmed) in fiction mode, and fully restored in live
+ *    mode — not just visually implied.
+ *  - Preview blueprint (used for the fractal preview pane) is now the EXACT
+ *    blueprint used to generate — no more silent reseed at submit time.
+ *  - Per-chapter prompt is compact (story bible + this-chapter contract only),
+ *    fixing the context-poisoning / degenerate-repetition failure mode from
+ *    resending the full sprawling directive unchanged on every call.
+ *  - Local repetition detector runs after every chapter; exactly one clean
+ *    regeneration is attempted if triggered.
+ *  - Output is scrubbed of any leaked instruction/directive fragments.
+ *  - Manuscript judge (computed metrics + LLM rubric) available after a run.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent } from "react";
+import { createPortal } from "react-dom";
+import { ChatApp as PackageChatApp } from "./ChatApp.orig.tsx";
+import { useAppState, type ChatMessage } from "@/lib/app-state";
+import { generateSynthesizedResponse, MODELS } from "@/lib/models";
+import { STYLE_OVERRIDES } from "@/lib/omega-templates";
+import { getPersonaDirective } from "@/lib/williams-style";
+import {
+  compileCompactChapterPrompt,
+  rollSage,
+  buildFractalPreview,
+  detectDegenerateRepetition,
+  scrubLeakedDirective,
+  gradeManuscript,
+  computeProseMetrics,
+  LENGTH_PROFILES,
+  MACRO_STRUCTURES,
+  newSageSeed,
+  type LengthId,
+  type SageBlueprint,
+  type ManuscriptGradeReport,
+} from "@/lib/sage";
+
+const LS_MODE = "veritas.sage.pipeline.mode.v2";
+const LS_SCALE = "veritas.sage.scale.v2";
+const LS_CHAPTERS = "veritas.sage.chapters.v2";
+const LS_WORDS = "veritas.sage.wordsPerChapter.v2";
+const LS_MACRO = "veritas.sage.macro.v2";
+const LS_PREVIEW_SEED = "veritas.sage.previewSeed.v1";
+const LS_CADENCE_SEED = "veritas.sage.cadenceSeed.v1";
+
+function ls(key: string, fallback: string): string {
+  try { return localStorage.getItem(key) || fallback; } catch { return fallback; }
+}
+function lsSet(key: string, value: string): void {
+  try { localStorage.setItem(key, value); } catch { /* storage optional */ }
+}
+function estTokens(text: string): number {
+  return Math.ceil((text || "").length / 4);
+}
+function wordCount(text: string): number {
+  return (text.trim().match(/\S+/g) || []).length;
+}
+function stripHeading(text: string, heading: string): string {
+  const escaped = heading.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return text.trim().replace(new RegExp(`^#{1,6}\\s*${escaped}\\s*`, "i"), "").trim();
+}
+
+// ── DOM anchor finders (query the origin package's rendered DOM) ───────────
+function findModelSelect(): HTMLElement | null {
+  const selects = Array.from(document.querySelectorAll("header select"));
+  return (selects.find((s) => s.querySelector('optgroup[label="Claude"]')) as HTMLElement) ?? null;
+}
+function findTemplateRow(): HTMLElement | null {
+  const candidates = Array.from(document.querySelectorAll("div.flex.items-center.gap-3"));
+  return (candidates.find((el) =>
+    /Template/i.test(el.textContent || "") &&
+    /Apply template/i.test(el.textContent || "") &&
+    el.querySelector("select"),
+  ) as HTMLElement) ?? null;
+}
+function findStylePersonaSection(): HTMLElement | null {
+  return (Array.from(document.querySelectorAll("section")).find((s) =>
+    /Style Persona:/i.test(s.textContent || ""),
+  ) as HTMLElement) ?? null;
+}
+/** Finds the header labelled checkbox controls that only apply to live research. */
+function findLiveOnlyLabels(): HTMLLabelElement[] {
+  const labels = Array.from(document.querySelectorAll("header label"));
+  return labels.filter((l) => /4-Stage|N-Deep|Cluster|SLOOP/i.test(l.textContent || "")) as HTMLLabelElement[];
+}
+
+type DomHosts = { toggleHost: HTMLElement | null; styleHost: HTMLElement | null; sageControlsHost: HTMLElement | null };
+
+/**
+ * Single shared DOM bridge: one MutationObserver + one interval drive all
+ * portal-anchor placement AND the honest live-only control gating. Consolidated
+ * from three independent observers (P2) to reduce DOM-churn overhead during
+ * long SAGE runs, which is the more plausible source of UI jank/soft-freezes
+ * than an actual memory leak.
+ */
+function useSageDomBridge(fictionMode: boolean): DomHosts {
+  const [hosts, setHosts] = useState<DomHosts>({ toggleHost: null, styleHost: null, sageControlsHost: null });
+  const fictionModeRef = useRef(fictionMode);
+  fictionModeRef.current = fictionMode;
+  const disabledElsRef = useRef<Set<HTMLInputElement>>(new Set());
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    let mounted = true;
+
+    const ensureAnchor = (id: string, locate: () => HTMLElement | null, position: InsertPosition): HTMLElement | null => {
+      const target = locate();
+      if (!target) return null;
+      let el = document.getElementById(id) as HTMLElement | null;
+      if (!el) {
+        el = document.createElement("span");
+        el.id = id;
+        el.setAttribute("data-workspace-portal", "1");
+        try {
+          target.insertAdjacentElement(position, el);
+        } catch {
+          return null;
+        }
+      }
+      return el;
+    };
+
+    const applyLiveOnlyGating = () => {
+      try {
+        const labels = findLiveOnlyLabels();
+        const active = new Set<HTMLInputElement>();
+        for (const label of labels) {
+          const input = label.querySelector("input") as HTMLInputElement | null;
+          if (input) active.add(input);
+          const shouldDisable = fictionModeRef.current;
+          if (input instanceof HTMLInputElement) {
+            input.disabled = shouldDisable;
+          }
+          label.style.opacity = shouldDisable ? "0.4" : "";
+          label.style.pointerEvents = shouldDisable ? "none" : "";
+          label.title = shouldDisable ? "Not available in Fiction Engine mode" : "";
+          // Sibling range-input rows (N-Deep/Cluster/SLOOP sliders) sit as the
+          // next element when their checkbox is checked.
+          const nextEl = label.nextElementSibling as HTMLElement | null;
+          if (nextEl && nextEl.querySelector("input[type=range]")) {
+            nextEl.style.opacity = shouldDisable ? "0.4" : "";
+            nextEl.style.pointerEvents = shouldDisable ? "none" : "";
+            const range = nextEl.querySelector("input") as HTMLInputElement | null;
+            if (range instanceof HTMLInputElement) range.disabled = shouldDisable;
+          }
+        }
+        disabledElsRef.current = active;
+      } catch {
+        /* defensive: never let DOM gating crash the app */
+      }
+    };
+
+    const sync = () => {
+      const toggleHost = ensureAnchor("veritas-sage-mode-toggle", findModelSelect, "beforebegin");
+      const styleHost = ensureAnchor("veritas-main-style-override", findTemplateRow, "beforeend");
+      const sageControlsHost = ensureAnchor("veritas-sage-main-controls", findStylePersonaSection, "beforebegin");
+      applyLiveOnlyGating();
+      if (mounted) {
+        setHosts((prev) =>
+          prev.toggleHost === toggleHost && prev.styleHost === styleHost && prev.sageControlsHost === sageControlsHost
+            ? prev
+            : { toggleHost, styleHost, sageControlsHost },
+        );
+      }
+    };
+
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.body, { childList: true, subtree: true });
+    const interval = window.setInterval(sync, 600);
+
+    return () => {
+      mounted = false;
+      observer.disconnect();
+      window.clearInterval(interval);
+      // Force a full restore pass (not just the last-tracked set) so an
+      // unmount while fiction mode was active never leaves live controls
+      // permanently disabled/dimmed.
+      fictionModeRef.current = false;
+      applyLiveOnlyGating();
+      for (const id of ["veritas-sage-mode-toggle", "veritas-main-style-override", "veritas-sage-main-controls"]) {
+        document.getElementById(id)?.remove();
+      }
+    };
+    // Re-run gating immediately when fictionMode flips; anchors themselves are stable.
+  }, [fictionMode]);
+
+  return hosts;
+}
+
+function ModeToggle({ fictionMode, setFictionMode }: { fictionMode: boolean; setFictionMode: (v: boolean) => void }) {
+  return (
+    <button
+      type="button"
+      onClick={() => setFictionMode(!fictionMode)}
+      className={`mr-1 flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-bold transition-colors ${
+        fictionMode
+          ? "border-rose-300 bg-rose-600 text-white shadow-sm"
+          : "border-emerald-300 bg-emerald-600 text-white shadow-sm"
+      }`}
+      title={fictionMode ? "Fiction Engine is ACTIVE. Click to switch to Live Research." : "Live Research is ACTIVE. Click to switch to Fiction Engine."}
+    >
+      <span>{fictionMode ? "📖 Fiction Engine" : "🔎 Live Research"}</span>
+      <span className="rounded bg-black/20 px-1 text-[9px] font-normal uppercase tracking-wide">click to swap</span>
+    </button>
+  );
+}
+
+function MainStyleOverrideControl() {
+  const { settings, setSetting } = useAppState();
+  return (
+    <label className="ml-2 inline-flex items-center gap-1.5 text-xs text-zinc-700">
+      <span className="font-semibold text-zinc-700">Style override</span>
+      <select
+        value={settings.styleMode}
+        onChange={(e) => setSetting("styleMode", e.target.value)}
+        className="rounded-md border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-900 focus:border-indigo-500 focus:outline-none"
+        title="Template style override; wired to settings.styleMode. Active in BOTH live and fiction modes."
+      >
+        <option value="OMEGA-DEFAULT">OMEGA-DEFAULT</option>
+        {STYLE_OVERRIDES.map((o) => (
+          <option key={o.token} value={o.token}>{o.token}</option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function FractalPreviewPanel({ bp }: { bp: SageBlueprint }) {
+  const [open, setOpen] = useState(false);
+  const fractal = useMemo(() => buildFractalPreview(bp), [bp]);
+  return (
+    <div className="mt-2 rounded-lg border border-rose-100 bg-white">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between px-3 py-2 text-left text-[11px] font-bold text-rose-700"
+      >
+        <span>🔬 Fractal preview — chapter → scene → paragraph ideas (deterministic, no model call)</span>
+        <span>{open ? "▲" : "▼"}</span>
+      </button>
+      {open && (
+        <div className="max-h-72 space-y-3 overflow-y-auto border-t border-rose-100 px-3 py-2 text-[11px] text-zinc-700">
+          {fractal.map((ch) => (
+            <div key={ch.index}>
+              <div className="font-bold text-zinc-900">{ch.title}</div>
+              <div className="ml-2 mt-1 space-y-1.5">
+                {ch.scenes.map((sc, si) => (
+                  <div key={si} className="border-l-2 border-rose-200 pl-2">
+                    <div className="font-semibold text-rose-700">{sc.title} — {sc.beat}</div>
+                    <ul className="ml-3 list-disc text-zinc-600">
+                      {sc.paragraphIdeas.map((p, pi) => (
+                        <li key={pi}>{p}</li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function GradeReportPanel({ report }: { report: ManuscriptGradeReport }) {
+  const [open, setOpen] = useState(true);
+  const m = report.metrics;
+  return (
+    <div className="mt-3 rounded-lg border border-violet-200 bg-violet-50/60">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between px-3 py-2 text-left text-[11px] font-bold text-violet-800"
+      >
+        <span>📚 Manuscript grade report {report.rubric ? `— overall ${report.rubric.overall}/10` : "(parse error)"}</span>
+        <span>{open ? "▲" : "▼"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-violet-100 px-3 py-2 text-[11px] text-zinc-700">
+          <div className="mb-2 grid grid-cols-3 gap-2 sm:grid-cols-4">
+            {[
+              ["Words", m.wordCount],
+              ["Avg sentence", `${m.avgSentenceLenWords}w (±${m.sentenceLenStdev})`],
+              ["Avg paragraph", `${m.avgParagraphLenSentences}s (±${m.paragraphLenStdev})`],
+              ["Dialogue", `${(m.dialogueRatio * 100).toFixed(0)}%`],
+              ["Distinct words", `${(m.distinctWordRatio * 100).toFixed(0)}%`],
+              ["Flesch ease", `${m.fleschReadingEase} (${m.fleschLabel})`],
+              ["Repeated 5-grams", `${(m.repeatedPhraseDensity * 100).toFixed(1)}%`],
+            ].map(([k, v]) => (
+              <div key={String(k)} className="rounded border border-violet-100 bg-white p-1.5 text-center">
+                <div className="text-[9px] uppercase text-zinc-400">{k}</div>
+                <div className="font-mono text-[11px] font-bold text-zinc-800">{String(v)}</div>
+              </div>
+            ))}
+          </div>
+          {report.rubric ? (
+            <div className="mb-2 grid grid-cols-2 gap-1.5 sm:grid-cols-3">
+              {Object.entries(report.rubric).map(([k, v]) => (
+                <div key={k} className="rounded border border-violet-100 bg-white p-1.5">
+                  <div className="flex justify-between text-[10px] font-semibold text-zinc-700">
+                    <span>{k}</span>
+                    <span>{v}/10</span>
+                  </div>
+                  {report.justifications?.[k as keyof typeof report.justifications] && (
+                    <div className="mt-0.5 text-[10px] text-zinc-500">{report.justifications[k as keyof typeof report.justifications]}</div>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="mb-2 rounded border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
+              Judge response could not be parsed as structured JSON ({report.parseError}). Raw judge text is preserved below.
+            </div>
+          )}
+          {report.rewriteTargets.length > 0 && (
+            <div>
+              <div className="mb-1 text-[10px] font-bold uppercase text-violet-700">Rewrite targets</div>
+              <div className="space-y-1">
+                {report.rewriteTargets.map((t, i) => (
+                  <div key={i} className="rounded border border-violet-100 bg-white p-1.5">
+                    <div className="flex gap-1.5 text-[10px]">
+                      <span className="rounded bg-violet-100 px-1 font-bold text-violet-800">{t.scope}</span>
+                      <span className="font-semibold text-zinc-700">{t.location}</span>
+                    </div>
+                    <div className="mt-0.5 text-[10px] text-zinc-600"><b>Issue:</b> {t.issue}</div>
+                    <div className="text-[10px] text-zinc-600"><b>Suggestion:</b> {t.suggestion}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {!report.rubric && (
+            <details className="mt-2">
+              <summary className="cursor-pointer text-[10px] font-semibold text-amber-700">Raw judge text</summary>
+              <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap text-[10px] text-zinc-600">{report.rawJudgeText}</pre>
+            </details>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SageMainControls(props: {
+  bp: SageBlueprint;
+  scaleId: LengthId;
+  setScaleId: (v: LengthId) => void;
+  chapters: number;
+  setChapters: (v: number) => void;
+  wordsPerChapter: number;
+  setWordsPerChapter: (v: number) => void;
+  macroId: string;
+  setMacroId: (v: string) => void;
+  onRerollBlueprint: () => void;
+  onRerollCadence: () => void;
+  busy: boolean;
+  gradeReport: ManuscriptGradeReport | null;
+  grading: boolean;
+  onGrade: () => void;
+  canGrade: boolean;
+}) {
+  const { bp } = props;
+  const totalWords = bp.chapters.reduce((a, c) => a + c.targetWords, 0);
+  return (
+    <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-xs text-rose-950">
+      <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+        <div className="font-bold uppercase tracking-wide text-rose-700">📖 Fiction Engine active — Live Research disabled</div>
+        <div className="font-mono text-[10px] text-rose-700">4-Stage / N-Deep / Cluster / SLOOP / grounding: bypassed &amp; grayed out above</div>
+      </div>
+      <div className="grid gap-2 md:grid-cols-[auto_auto_auto_1fr] md:items-center">
+        <label className="flex items-center gap-1.5">
+          Scale
+          <select
+            value={props.scaleId}
+            onChange={(e) => props.setScaleId(e.target.value as LengthId)}
+            className="rounded border border-rose-200 bg-white px-2 py-1"
+          >
+            {LENGTH_PROFILES.map((p) => <option key={p.id} value={p.id}>{p.label}</option>)}
+          </select>
+        </label>
+        <label className="flex items-center gap-1.5">
+          Chapters
+          <input
+            type="number"
+            min={1}
+            max={80}
+            value={props.chapters}
+            onChange={(e) => props.setChapters(Math.max(1, Math.min(80, Number(e.target.value) || 1)))}
+            className="w-16 rounded border border-rose-200 bg-white px-2 py-1 font-mono"
+          />
+        </label>
+        <label className="flex items-center gap-1.5">
+          Words/ch
+          <input
+            type="number"
+            min={300}
+            max={12000}
+            step={100}
+            value={props.wordsPerChapter}
+            onChange={(e) => props.setWordsPerChapter(Math.max(300, Math.min(12000, Number(e.target.value) || 300)))}
+            className="w-24 rounded border border-rose-200 bg-white px-2 py-1 font-mono"
+          />
+        </label>
+        <label className="flex min-w-0 items-center gap-1.5">
+          Macro
+          <select
+            value={props.macroId}
+            onChange={(e) => props.setMacroId(e.target.value)}
+            className="min-w-0 flex-1 rounded border border-rose-200 bg-white px-2 py-1"
+          >
+            <option value="">seed-pick</option>
+            {MACRO_STRUCTURES.map((m) => <option key={m.id} value={m.id}>{m.id} {m.name}</option>)}
+          </select>
+        </label>
+      </div>
+
+      <div className="mt-2 flex flex-wrap items-center gap-2">
+        <button type="button" disabled={props.busy} onClick={props.onRerollBlueprint} className="rounded border border-rose-300 bg-white px-2 py-1 font-semibold text-rose-700 hover:bg-rose-100 disabled:opacity-40">
+          🎲 Reroll blueprint (seed {bp.seed})
+        </button>
+        <button type="button" disabled={props.busy} onClick={props.onRerollCadence} className="rounded border border-rose-300 bg-white px-2 py-1 font-semibold text-rose-700 hover:bg-rose-100 disabled:opacity-40">
+          🎚 Reroll prose cadence ({bp.cadence.label})
+        </button>
+        <span className="font-mono text-[10px] text-rose-700">
+          sent {bp.cadence.sentenceMinWords}-{bp.cadence.sentenceMaxWords}w · para {bp.cadence.paragraphMinSentences}-{bp.cadence.paragraphMaxSentences}s · ch variance {Math.round(bp.cadence.chapterVarianceMinPct * 100)}-{Math.round(bp.cadence.chapterVarianceMaxPct * 100)}%
+        </span>
+        {props.canGrade && (
+          <button type="button" disabled={props.grading} onClick={props.onGrade} className="ml-auto rounded bg-violet-700 px-2.5 py-1 font-bold text-white hover:bg-violet-800 disabled:opacity-40">
+            {props.grading ? "Grading…" : "📚 Grade manuscript"}
+          </button>
+        )}
+      </div>
+
+      <div className="mt-1 text-[10px] text-rose-700">
+        Target: ~{totalWords.toLocaleString()} words. World mechanism: {bp.worldMechanism?.name ?? "—"}. Relationship texture: {bp.relationshipMechanism?.name ?? "—"}.
+      </div>
+
+      <FractalPreviewPanel bp={bp} />
+      {props.gradeReport && <GradeReportPanel report={props.gradeReport} />}
+    </div>
+  );
+}
+
+export function ChatApp({ onSubmitFromShared }: { onSubmitFromShared?: number } = {}) {
+  const app = useAppState();
+  const {
+    input, setInput, model, keys, persona, busyState, setBusyState,
+    pushMessage, updateLastMessage, setLastRun, clearDebugEvents, pushDebugEvent,
+    resetTelemetry, patchTelemetry, settings,
+  } = app;
+
+  const [fictionMode, _setFictionMode] = useState(() => ls(LS_MODE, "live") === "fiction");
+  const [scaleId, _setScaleId] = useState<LengthId>(() => (ls(LS_SCALE, "novel") as LengthId));
+  const defaultScale = useMemo(() => LENGTH_PROFILES.find((p) => p.id === scaleId) ?? LENGTH_PROFILES[3], [scaleId]);
+  const [chapters, _setChapters] = useState(() => Number(ls(LS_CHAPTERS, String(defaultScale.chapters))) || defaultScale.chapters);
+  const [wordsPerChapter, _setWordsPerChapter] = useState(() => Number(ls(LS_WORDS, String(defaultScale.wordsPerChapter))) || defaultScale.wordsPerChapter);
+  const [macroId, _setMacroId] = useState(() => ls(LS_MACRO, ""));
+  const [previewSeed, _setPreviewSeed] = useState(() => Number(ls(LS_PREVIEW_SEED, "")) || newSageSeed());
+  const [cadenceSeed, _setCadenceSeed] = useState(() => Number(ls(LS_CADENCE_SEED, "")) || newSageSeed());
+  const [gradeReport, setGradeReport] = useState<ManuscriptGradeReport | null>(null);
+  const [grading, setGrading] = useState(false);
+  const [lastFictionText, setLastFictionText] = useState<string | null>(null);
+
+  const setFictionMode = useCallback((v: boolean) => { _setFictionMode(v); lsSet(LS_MODE, v ? "fiction" : "live"); }, []);
+  const setScaleId = useCallback((v: LengthId) => {
+    _setScaleId(v); lsSet(LS_SCALE, v);
+    const next = LENGTH_PROFILES.find((p) => p.id === v);
+    if (next) { _setChapters(next.chapters); _setWordsPerChapter(next.wordsPerChapter); lsSet(LS_CHAPTERS, String(next.chapters)); lsSet(LS_WORDS, String(next.wordsPerChapter)); }
+  }, []);
+  const setChapters = useCallback((v: number) => { _setChapters(v); lsSet(LS_CHAPTERS, String(v)); }, []);
+  const setWordsPerChapter = useCallback((v: number) => { _setWordsPerChapter(v); lsSet(LS_WORDS, String(v)); }, []);
+  const setMacroId = useCallback((v: string) => { _setMacroId(v); lsSet(LS_MACRO, v); }, []);
+  const rerollBlueprint = useCallback(() => {
+    const s = newSageSeed();
+    _setPreviewSeed(s);
+    lsSet(LS_PREVIEW_SEED, String(s));
+    setGradeReport(null);
+  }, []);
+  const rerollCadence = useCallback(() => {
+    const s = newSageSeed();
+    _setCadenceSeed(s);
+    lsSet(LS_CADENCE_SEED, String(s));
+  }, []);
+
+  // The EXACT blueprint shown in the fractal preview is the one used to
+  // generate — no silent reseed at submit time (P2 bug: submit used
+  // Date.now() as a fresh seed, so preview and output could differ).
+  const blueprint: SageBlueprint = useMemo(
+    () =>
+      rollSage({
+        seed: previewSeed,
+        cadenceSeed,
+        premise: input.trim() || undefined,
+        lengthId: scaleId,
+        chapters,
+        wordsPerChapter,
+        forceMacroId: macroId || undefined,
+      }),
+    [previewSeed, cadenceSeed, input, scaleId, chapters, wordsPerChapter, macroId],
+  );
+
+  const { toggleHost, styleHost, sageControlsHost } = useSageDomBridge(fictionMode);
+
+  const runFiction = useCallback(async () => {
+    const prompt = input.trim();
+    if (!prompt || busyState !== null) return;
+    const startedAt = Date.now();
+    clearDebugEvents();
+    resetTelemetry();
+    setGradeReport(null);
+    patchTelemetry({ running: true, startedAt, phase: "SAGE: story blueprint", pipelineStage: 1, entropy: 0.8 });
+
+    const current = MODELS.find((m) => m.id === model);
+    if (!current) return;
+    const apiKey = keys[current.provider as keyof typeof keys] as string;
+    if (!apiKey) {
+      pushMessage({ id: `a-${Date.now()}`, role: "assistant", content: `Please configure your ${current.provider.toUpperCase()} API key in Settings.`, ts: Date.now(), model });
+      patchTelemetry({ running: false, phase: "missing key" });
+      return;
+    }
+
+    const bp = blueprint; // freeze the previewed blueprint for this run
+    const userMsg: ChatMessage = { id: `u-${Date.now()}`, role: "user", content: prompt, ts: Date.now(), model };
+    pushMessage(userMsg);
+    setInput("");
+    setBusyState("SAGE: compiling story blueprint");
+
+    const styleBlock = getPersonaDirective(persona.archetype.name);
+    const trace: NonNullable<ChatMessage["pipelineTrace"]> = [
+      { stage: 1, label: `SAGE blueprint compiled: ${bp.macro.name}`, ts: Date.now(), ok: true, data: { seed: bp.seed, chapters: bp.chapters.length } },
+    ];
+    const assistantId = `a-${Date.now()}`;
+    pushMessage({
+      id: assistantId,
+      role: "assistant",
+      content: `# ${bp.titleHint}\n\n_SAGE fiction run started: ${bp.chapters.length} chapters, target ~${bp.chapters.reduce((a, c) => a + c.targetWords, 0).toLocaleString()} words. Each chapter uses a freshly-composed, context-isolated prompt — no accumulated chat history is sent._`,
+      ts: Date.now(),
+      model,
+      pipelineTrace: trace,
+      usedMultiPass: true,
+    });
+
+    let priorSummary: string | null = null;
+    const blocks: string[] = [`# ${bp.titleHint}`];
+    let calls = 0;
+    try {
+      for (let i = 0; i < bp.chapters.length; i += 1) {
+        const ch = bp.chapters[i];
+        setBusyState(`SAGE: chapter ${i + 1}/${bp.chapters.length}`);
+        pushDebugEvent(`[SAGE] chapter ${i + 1}/${bp.chapters.length}: ${ch.title}`);
+
+        const generateChapter = async (): Promise<string> => {
+          // CONTEXT REFRESH: every call gets a brand-new, independent request —
+          // conversationHistory is always [] (no prior turns re-sent) and the
+          // compact per-chapter prompt (not the full sprawling directive) is
+          // the only thing that changes call-to-call. This is the structural
+          // fix for weak-model degenerate repetition across later chapters.
+          const chapterPrompt = [
+            styleBlock ? `STYLE PERSONA (apply silently; never name this in output):\n${styleBlock}` : "",
+            settings.templateEnabled ? `TEMPLATE STYLE OVERRIDE ACTIVE: ${settings.styleMode}. Apply compatible surface style only; do not import nonfiction report sections.` : "",
+            compileCompactChapterPrompt(bp, i, priorSummary, bp.cadence),
+          ].filter(Boolean).join("\n\n");
+          const raw = await generateSynthesizedResponse({
+            provider: current.provider,
+            model,
+            apiKey,
+            userMessage: chapterPrompt,
+            retrievedWebData: [],
+            conversationHistory: [],
+          });
+          calls += 1;
+          return scrubLeakedDirective(stripHeading(raw, ch.title));
+        };
+
+        let body = await generateChapter();
+        const rep = detectDegenerateRepetition(body);
+        if (rep.flagged) {
+          pushDebugEvent(`[SAGE] repetition guard triggered on "${ch.title}": ${rep.reasons.join("; ")} — regenerating fresh (not re-feeding poisoned draft)`);
+          body = await generateChapter();
+          const rep2 = detectDegenerateRepetition(body);
+          if (rep2.flagged) {
+            pushDebugEvent(`[SAGE] repetition guard still flagged after regeneration: ${rep2.reasons.join("; ")} — keeping second attempt (best of two)`);
+          }
+        }
+        if (!body) body = "[DRAFT GAP] Chapter generation returned no substantive prose.";
+
+        blocks.push(`## ${ch.title}\n\n${body}`);
+        priorSummary = `${ch.title}: ${body.slice(0, 420).replace(/\s+/g, " ")}`;
+        trace.push({ stage: 2 + i / 100, label: `SAGE chapter complete: ${ch.title}`, ts: Date.now(), ok: wordCount(body) >= 80, data: { words: wordCount(body), repetitionFlagged: rep.flagged } });
+        const full = blocks.join("\n\n");
+        updateLastMessage((m) => m.id === assistantId ? { ...m, content: full, pipelineTrace: trace.slice() } : m);
+        patchTelemetry({ pipelineStage: 2, tokensOut: estTokens(full), modelCalls: calls, phase: `SAGE chapter ${i + 1}/${bp.chapters.length}` });
+      }
+      const finalText = blocks.join("\n\n");
+      trace.push({ stage: 3, label: "SAGE run complete", ts: Date.now(), ok: true, data: { calls, words: wordCount(finalText) } });
+      updateLastMessage((m) => m.id === assistantId ? { ...m, content: finalText, pipelineTrace: trace.slice() } : m);
+      setLastRun({
+        query: prompt,
+        model,
+        finalAnswer: finalText,
+        totalTokens: estTokens(prompt) + estTokens(finalText),
+        elapsedMs: Date.now() - startedAt,
+        sources: 0,
+        verifiedClaims: 0,
+        totalClaims: 0,
+        startedAt,
+        finishedAt: Date.now(),
+        pipelineTrace: trace,
+        tier: null,
+      });
+      patchTelemetry({ running: false, phase: "SAGE complete", elapsedMs: Date.now() - startedAt, modelCalls: calls, tokensOut: estTokens(finalText) });
+      pushDebugEvent(`[SAGE] complete: ${calls} chapter call(s), ${wordCount(finalText)} words`);
+      setLastFictionText(finalText);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      updateLastMessage((m) => m.id === assistantId ? { ...m, content: `${m.content}\n\nGeneration Failure: ${message}` } : m);
+      patchTelemetry({ running: false, phase: "SAGE error" });
+      pushDebugEvent(`[SAGE] ERROR: ${message}`);
+    } finally {
+      setBusyState(null);
+    }
+  }, [
+    input, busyState, clearDebugEvents, resetTelemetry, patchTelemetry, model, keys,
+    pushMessage, setInput, setBusyState, blueprint,
+    persona, settings.templateEnabled, settings.styleMode, updateLastMessage, setLastRun,
+    pushDebugEvent,
+  ]);
+
+  const onGrade = useCallback(async () => {
+    if (!lastFictionText || grading) return;
+    const current = MODELS.find((m) => m.id === model);
+    if (!current) return;
+    const apiKey = keys[current.provider as keyof typeof keys] as string;
+    if (!apiKey) return;
+    setGrading(true);
+    try {
+      const report = await gradeManuscript(lastFictionText, blueprint, (userMessage) =>
+        generateSynthesizedResponse({
+          provider: current.provider,
+          model,
+          apiKey,
+          userMessage,
+          retrievedWebData: [],
+          conversationHistory: [],
+        }),
+      );
+      setGradeReport(report);
+    } catch (err) {
+      // Downgrade rather than fabricate: show computed metrics only, mark judge failed.
+      setGradeReport({
+        metrics: computeProseMetrics(lastFictionText),
+        rubric: null,
+        justifications: null,
+        rewriteTargets: [],
+        rawJudgeText: "",
+        parseError: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      setGrading(false);
+    }
+  }, [lastFictionText, grading, model, keys, blueprint]);
+
+  const onSubmitCapture = useCallback((e: FormEvent) => {
+    if (!fictionMode) return;
+    e.preventDefault();
+    e.stopPropagation();
+    void runFiction();
+  }, [fictionMode, runFiction]);
+
+  const onKeyDownCapture = useCallback((e: KeyboardEvent) => {
+    if (!fictionMode || e.key !== "Enter" || (!e.ctrlKey && !e.metaKey)) return;
+    if ((e.target as HTMLElement).tagName !== "TEXTAREA") return;
+    e.preventDefault();
+    e.stopPropagation();
+    void runFiction();
+  }, [fictionMode, runFiction]);
+
+  useEffect(() => {
+    if (onSubmitFromShared && onSubmitFromShared > 0 && fictionMode) void runFiction();
+  }, [onSubmitFromShared, fictionMode, runFiction]);
+
+  return (
+    <div onSubmitCapture={onSubmitCapture} onKeyDownCapture={onKeyDownCapture}>
+      <PackageChatApp onSubmitFromShared={fictionMode ? 0 : onSubmitFromShared} />
+      {toggleHost && createPortal(<ModeToggle fictionMode={fictionMode} setFictionMode={setFictionMode} />, toggleHost)}
+      {styleHost && createPortal(<MainStyleOverrideControl />, styleHost)}
+      {fictionMode && sageControlsHost && createPortal(
+        <SageMainControls
+          bp={blueprint}
+          scaleId={scaleId}
+          setScaleId={setScaleId}
+          chapters={chapters}
+          setChapters={setChapters}
+          wordsPerChapter={wordsPerChapter}
+          setWordsPerChapter={setWordsPerChapter}
+          macroId={macroId}
+          setMacroId={setMacroId}
+          onRerollBlueprint={rerollBlueprint}
+          onRerollCadence={rerollCadence}
+          busy={busyState !== null}
+          gradeReport={gradeReport}
+          grading={grading}
+          onGrade={onGrade}
+          canGrade={!!lastFictionText}
+        />,
+        sageControlsHost,
+      )}
+    </div>
+  );
+}