2sagaco48 1.0.0

package/src/components/SagaOsReference.tsx

@@ -0,0 +1,421 @@
+/**
+ * Type B — SagaOsReference: the v1–v8 canonical tables + local tools, embedded in the SAGA-OS Studio "Reference" tab.
+ * All SAGA-OS v1–v8 systems surfaced with real data and interactive tools.
+ * Matches the app's existing Style Persona / Innovation Persona aesthetic.
+ */
+import { useState, useCallback } from "react";
+import {
+  SAGA_OS_VERSION, SAGA_THROUGHLINES, SAGA_SCENE_GRAMMARS, SAGA_PACE_DIMENSIONS,
+  SAGA_STAKES_AXES, SAGA_PROMISE_SCOPES, SAGA_PROMISE_STATES,
+  SAGA_COMPOSITION_OPERATORS, SAGA_AUDIT_RULES, SAGA_ATTACKS,
+  SAGA_STOP_CONDITIONS, SAGA_SERIES_MODES, SAGA_PHASES,
+  SAGA_REPAIR_OPERATORS,
+  SAGA_OS_V2_VERSION, SAGA_SLOT_CLASSES, GENESIS_PATTERNS,
+  SAGA_SCREEN_AUDITS, SAGA_PRODUCTION_TESTS,
+  auditCastNameConfusion,
+  SAGA_OS_V4_VERSION, STYLEBOOK_LAYERS, SYNTAX_FORMS, PARAGRAPH_TYPES,
+  AUREATE_REVISION_STACK, STYLE_PACKS, auditWanIntensifiers,
+  SAGA_OS_V5_VERSION, STYLE_OPERATORS, ATLAS_INVARIANTS,
+  ORCHARD_CONTRACT, QUALITY_MODES,
+  SAGA_OS_V6_VERSION, HELIOS_LEX_SUPERSENSES, KINETICON_CLASSES,
+  AXIS_FRAME_FAMILIES, GAUNTLET_TAXONOMY, runGauntletA,
+  SAGA_OS_V7_VERSION, MEANING_IR_TERMS, SEMANTIC_TYPE_LATTICE,
+  DISCOURSE_RELATIONS_V7, CONSTRUCTION_ALGEBRA, METARULES_V7,
+  ABSTRACT_GUARD_DOMAINS, GAUNTLET_V2_PROPERTIES, 
+  SAGA_OS_V8_VERSION, CATEGO_COMBINATORS, CATEGO_POPULATION_RULES,
+  ANAPHOR_RULES, RSTORY_RELATIONS, TEMPO_2_REICHENBACH_TENSES,
+  SAGA_V8_HARDENING_INVARIANTS,
+  parseCategoExpression, analyzeReichenbachTense, buildDriskDrs, runGauntletV2,
+  type SagaRow,
+} from '@/lib/sage/index.ts';
+
+// ── Shared sub-components ───────────────────────────────────────────────────
+
+function SectionHeader({ icon, title, count, version }: { icon: string; title: string; count?: number; version?: string }) {
+  return (
+    <div className="flex items-center gap-2 border-b border-zinc-100 pb-1.5">
+      <span className="text-base">{icon}</span>
+      <span className="text-xs font-bold uppercase tracking-wider text-zinc-700">{title}</span>
+      {count != null && <span className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500">{count}</span>}
+      {version && <span className="ml-auto text-[10px] text-zinc-400 max-w-[200px] truncate" title={version}>{version}</span>}
+    </div>
+  );
+}
+
+function CompactTable({ rows, limit = 8 }: { rows: SagaRow[]; limit?: number }) {
+  const [expanded, setExpanded] = useState(false);
+  const shown = expanded ? rows : rows.slice(0, limit);
+  return (
+    <div>
+      <div className="max-h-48 overflow-y-auto rounded border border-zinc-100 bg-white">
+        <table className="w-full text-[11px]">
+          <tbody>
+            {shown.map((r) => (
+              <tr key={r.id} className="border-b border-zinc-50 last:border-0 hover:bg-zinc-50">
+                <td className="w-20 shrink-0 whitespace-nowrap px-2 py-1 font-mono text-[10px] text-zinc-500">{r.id}</td>
+                <td className="px-2 py-1 font-semibold text-zinc-800">{r.name}</td>
+                <td className="px-2 py-1 text-zinc-500">{r.note}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {rows.length > limit && (
+        <button onClick={() => setExpanded(!expanded)} className="mt-1 text-[10px] font-semibold text-indigo-600 hover:text-indigo-800">
+          {expanded ? "▴ Collapse" : `▾ Show all ${rows.length}`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function ChipRow({ items, color = "zinc" }: { items: readonly string[]; color?: string }) {
+  const cls: Record<string, string> = {
+    zinc: "bg-zinc-100 text-zinc-700", indigo: "bg-indigo-50 text-indigo-700",
+    amber: "bg-amber-50 text-amber-700", emerald: "bg-emerald-50 text-emerald-700",
+    rose: "bg-rose-50 text-rose-700", violet: "bg-violet-50 text-violet-700",
+    sky: "bg-sky-50 text-sky-700", teal: "bg-teal-50 text-teal-700",
+  };
+  return (
+    <div className="flex flex-wrap gap-1">
+      {items.map((x) => (
+        <span key={x} className={`rounded-md px-1.5 py-0.5 text-[10px] font-medium ${cls[color] ?? cls.zinc}`}>{x}</span>
+      ))}
+    </div>
+  );
+}
+
+function ToolResult({ label, result }: { label: string; result: string }) {
+  return (
+    <div className="mt-2 rounded border border-emerald-200 bg-emerald-50 p-2">
+      <div className="text-[10px] font-bold uppercase tracking-wider text-emerald-700">{label}</div>
+      <pre className="mt-1 max-h-60 overflow-auto whitespace-pre-wrap font-mono text-[10px] text-emerald-900">{result}</pre>
+    </div>
+  );
+}
+
+// ── V1 Panel ────────────────────────────────────────────────────────────────
+
+function V1Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🏗" title="Series Architecture" count={SAGA_SERIES_MODES.length} version={SAGA_OS_VERSION} />
+      <CompactTable rows={SAGA_SERIES_MODES} />
+      <SectionHeader icon="📐" title="Phase Architecture" count={SAGA_PHASES.length} />
+      <div className="flex flex-wrap gap-1">
+        {SAGA_PHASES.map((p) => (
+          <div key={p.phase} className="rounded-md border border-indigo-100 bg-indigo-50 px-2 py-1">
+            <div className="text-[9px] font-mono text-indigo-400">{p.range}</div>
+            <div className="text-[11px] font-bold text-indigo-700">{p.phase}</div>
+          </div>
+        ))}
+      </div>
+      <SectionHeader icon="🧵" title="Throughlines" count={SAGA_THROUGHLINES.length} />
+      <CompactTable rows={SAGA_THROUGHLINES} />
+      <SectionHeader icon="🎬" title="Scene Grammars" count={SAGA_SCENE_GRAMMARS.length} />
+      <CompactTable rows={SAGA_SCENE_GRAMMARS} />
+      <SectionHeader icon="📊" title="Pace Vector" count={SAGA_PACE_DIMENSIONS.length} />
+      <ChipRow items={SAGA_PACE_DIMENSIONS} color="sky" />
+      <SectionHeader icon="⚔" title="Stakes Axes" count={SAGA_STAKES_AXES.length} />
+      <ChipRow items={SAGA_STAKES_AXES} color="amber" />
+      <SectionHeader icon="🎯" title="Promise Lifecycle" />
+      <div className="space-y-1">
+        <div className="text-[10px] font-bold text-zinc-500">Scopes:</div>
+        <ChipRow items={SAGA_PROMISE_SCOPES} color="emerald" />
+        <div className="text-[10px] font-bold text-zinc-500">States:</div>
+        <ChipRow items={SAGA_PROMISE_STATES} color="violet" />
+      </div>
+      <SectionHeader icon="⚙" title="Composition Operators" count={SAGA_COMPOSITION_OPERATORS.length} />
+      <CompactTable rows={SAGA_COMPOSITION_OPERATORS} />
+      <SectionHeader icon="📋" title="Logic Audit Rules" count={SAGA_AUDIT_RULES.length} />
+      <CompactTable rows={SAGA_AUDIT_RULES} limit={10} />
+      <SectionHeader icon="🔧" title="Repair Operators" count={SAGA_REPAIR_OPERATORS.length} />
+      <ChipRow items={SAGA_REPAIR_OPERATORS} color="teal" />
+      <SectionHeader icon="🎯" title="Adversarial Tests" count={SAGA_ATTACKS.length} />
+      <CompactTable rows={SAGA_ATTACKS} />
+      <SectionHeader icon="🛑" title="Stop Conditions" count={SAGA_STOP_CONDITIONS.length} />
+      <CompactTable rows={SAGA_STOP_CONDITIONS} />
+    </div>
+  );
+}
+
+function V2V3Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🎰" title="Slot Classes (SAGA-WIRE)" count={SAGA_SLOT_CLASSES.length} version={SAGA_OS_V2_VERSION} />
+      <CompactTable rows={SAGA_SLOT_CLASSES} />
+      <SectionHeader icon="🌀" title="Genesis Patterns" count={GENESIS_PATTERNS.length} />
+      <CompactTable rows={GENESIS_PATTERNS} />
+      <SectionHeader icon="🔍" title="Screen Audits" count={SAGA_SCREEN_AUDITS.length} />
+      <CompactTable rows={SAGA_SCREEN_AUDITS} />
+      <SectionHeader icon="🧪" title="Production Tests" count={SAGA_PRODUCTION_TESTS.length} />
+      <CompactTable rows={SAGA_PRODUCTION_TESTS} />
+    </div>
+  );
+}
+
+function V4Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="📚" title="Stylebook Layers" count={STYLEBOOK_LAYERS.length} version={SAGA_OS_V4_VERSION} />
+      <CompactTable rows={STYLEBOOK_LAYERS} />
+      <SectionHeader icon="✏" title="Syntax Forms" count={SYNTAX_FORMS.length} />
+      <CompactTable rows={SYNTAX_FORMS} />
+      <SectionHeader icon="📄" title="Paragraph Types" count={PARAGRAPH_TYPES.length} />
+      <CompactTable rows={PARAGRAPH_TYPES} />
+      <SectionHeader icon="🔄" title="AUREATE Revision Stack" count={AUREATE_REVISION_STACK.length} />
+      <CompactTable rows={AUREATE_REVISION_STACK} />
+      <SectionHeader icon="📦" title="Style Packs" count={STYLE_PACKS.length} />
+      <CompactTable rows={STYLE_PACKS} />
+    </div>
+  );
+}
+
+function V5Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🔧" title="Style Operators" count={STYLE_OPERATORS.length} version={SAGA_OS_V5_VERSION} />
+      <CompactTable rows={STYLE_OPERATORS} />
+      <SectionHeader icon="🛡" title="ATLAS Invariants" count={ATLAS_INVARIANTS.length} />
+      <CompactTable rows={ATLAS_INVARIANTS} />
+      <SectionHeader icon="🌳" title="ORCHARD Contract" count={ORCHARD_CONTRACT.length} />
+      <CompactTable rows={ORCHARD_CONTRACT} />
+      <SectionHeader icon="🎚" title="Quality Modes" count={QUALITY_MODES.length} />
+      <CompactTable rows={QUALITY_MODES} />
+    </div>
+  );
+}
+
+function V6Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🔤" title="HELIOS-LEX Supersenses" count={HELIOS_LEX_SUPERSENSES.length} version={SAGA_OS_V6_VERSION} />
+      <CompactTable rows={HELIOS_LEX_SUPERSENSES} />
+      <SectionHeader icon="🏃" title="KINETICON Classes" count={KINETICON_CLASSES.length} />
+      <CompactTable rows={KINETICON_CLASSES} />
+      <SectionHeader icon="🖼" title="AXIS Frame Families" count={AXIS_FRAME_FAMILIES.length} />
+      <CompactTable rows={AXIS_FRAME_FAMILIES} />
+      <SectionHeader icon="🎯" title="Gauntlet Taxonomy" count={GAUNTLET_TAXONOMY.length} />
+      <CompactTable rows={GAUNTLET_TAXONOMY} />
+    </div>
+  );
+}
+
+function V7Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🧠" title="Meaning IR Terms" count={MEANING_IR_TERMS.length} version={SAGA_OS_V7_VERSION} />
+      <CompactTable rows={MEANING_IR_TERMS} />
+      <SectionHeader icon="🏛" title="Semantic Type Lattice" count={SEMANTIC_TYPE_LATTICE.length} />
+      <CompactTable rows={SEMANTIC_TYPE_LATTICE} />
+      <SectionHeader icon="🔗" title="Discourse Relations" count={DISCOURSE_RELATIONS_V7.length} />
+      <CompactTable rows={DISCOURSE_RELATIONS_V7} />
+      <SectionHeader icon="🧮" title="Construction Algebra" count={CONSTRUCTION_ALGEBRA.length} />
+      <CompactTable rows={CONSTRUCTION_ALGEBRA} />
+      <SectionHeader icon="📏" title="Metarules" count={METARULES_V7.length} />
+      <CompactTable rows={METARULES_V7} />
+      <SectionHeader icon="🛡" title="Abstract Guard Domains" count={ABSTRACT_GUARD_DOMAINS.length} />
+      <CompactTable rows={ABSTRACT_GUARD_DOMAINS} />
+      <SectionHeader icon="🧪" title="Gauntlet v2 Properties" count={GAUNTLET_V2_PROPERTIES.length} />
+      <CompactTable rows={GAUNTLET_V2_PROPERTIES} />
+    </div>
+  );
+}
+
+function V8Panel() {
+  return (
+    <div className="space-y-3">
+      <SectionHeader icon="🔬" title="CATEGO Combinators" count={CATEGO_COMBINATORS.length} version={SAGA_OS_V8_VERSION} />
+      <CompactTable rows={CATEGO_COMBINATORS} />
+      <SectionHeader icon="📐" title="CATEGO Population Rules" count={CATEGO_POPULATION_RULES.length} />
+      <CompactTable rows={CATEGO_POPULATION_RULES} />
+      <SectionHeader icon="🔗" title="Anaphora Rules" count={ANAPHOR_RULES.length} />
+      <CompactTable rows={ANAPHOR_RULES} />
+      <SectionHeader icon="📖" title="R-Story Relations" count={RSTORY_RELATIONS.length} />
+      <CompactTable rows={RSTORY_RELATIONS} />
+      <SectionHeader icon="⏱" title="Reichenbach Tenses" count={TEMPO_2_REICHENBACH_TENSES.length} />
+      <CompactTable rows={TEMPO_2_REICHENBACH_TENSES} />
+      <SectionHeader icon="🛡" title="Hardening Invariants" count={SAGA_V8_HARDENING_INVARIANTS.length} />
+      <CompactTable rows={SAGA_V8_HARDENING_INVARIANTS} />
+    </div>
+  );
+}
+
+function ToolsPanel() {
+  const [categoResult, setCategoResult] = useState("");
+  const [reichInput, setReichInput] = useState("past perfect");
+  const [reichResult, setReichResult] = useState("");
+  const [driskInput, setDriskInput] = useState("A farmer owned a donkey. The donkey was old.");
+  const [driskResult, setDriskResult] = useState("");
+  const [nameInput, setNameInput] = useState("Alice, Alicia, Alan, Bob");
+  const [nameResult, setNameResult] = useState("");
+  const [wanInput, setWanInput] = useState("It was really very quite actually literally basically just very much");
+  const [wanResult, setWanResult] = useState("");
+  const [gauntletAResult, setGauntletAResult] = useState("");
+  const [gauntletV2Result, setGauntletV2Result] = useState("");
+
+  const runCatego = useCallback(() => {
+    try {
+      const tokens = [{ word: "the", category: "NP/N" }, { word: "cat", category: "N" }, { word: "sat", category: "S\\NP" }];
+      setCategoResult(JSON.stringify(parseCategoExpression(tokens), null, 2));
+    } catch (e) { setCategoResult(`Error: ${e}`); }
+  }, []);
+
+  const runReich = useCallback(() => {
+    try { setReichResult(JSON.stringify(analyzeReichenbachTense(reichInput), null, 2)); }
+    catch (e) { setReichResult(`Error: ${e}`); }
+  }, [reichInput]);
+
+  const runDrisk = useCallback(() => {
+    try {
+      const sentences = driskInput.split(/[.!?]+/).map((s) => s.trim()).filter(Boolean);
+      setDriskResult(JSON.stringify(buildDriskDrs(sentences), null, 2));
+    } catch (e) { setDriskResult(`Error: ${e}`); }
+  }, [driskInput]);
+
+  const runNames = useCallback(() => {
+    try {
+      const names = nameInput.split(",").map((n) => n.trim()).filter(Boolean);
+      setNameResult(JSON.stringify(auditCastNameConfusion(names), null, 2));
+    } catch (e) { setNameResult(`Error: ${e}`); }
+  }, [nameInput]);
+
+  const runWan = useCallback(() => {
+    try { setWanResult(JSON.stringify(auditWanIntensifiers(wanInput), null, 2)); }
+    catch (e) { setWanResult(`Error: ${e}`); }
+  }, [wanInput]);
+
+  return (
+    <div className="space-y-4">
+      <SectionHeader icon="🧪" title="Interactive Tools" version="Local-only · No LLM · No network" />
+
+      {/* CATEGO */}
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">CATEGO Shift-Reduce Parser (v8)</div>
+        <div className="mt-1 flex gap-1">
+          <span className="text-[10px] text-zinc-400">the:NP/N · cat:N · sat:S\NP</span>
+          <button onClick={runCatego} className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Parse demo</button>
+        </div>
+        {categoResult && <ToolResult label="CATEGO output" result={categoResult} />}
+      </div>
+
+      {/* Reichenbach */}
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Reichenbach Temporal Analyzer (v8)</div>
+        <div className="mt-1 flex gap-1">
+          <input value={reichInput} onChange={(e) => setReichInput(e.target.value)}
+            className="flex-1 rounded border border-zinc-200 px-2 py-1 font-mono text-xs" placeholder="past perfect" />
+          <button onClick={runReich} className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Analyze</button>
+        </div>
+        {reichResult && <ToolResult label="Reichenbach output" result={reichResult} />}
+      </div>
+
+      {/* DRISK DRS */}
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">DRISK DRS Builder (v8)</div>
+        <div className="mt-1 flex gap-1">
+          <input value={driskInput} onChange={(e) => setDriskInput(e.target.value)}
+            className="flex-1 rounded border border-zinc-200 px-2 py-1 font-mono text-xs" />
+          <button onClick={runDrisk} className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Build</button>
+        </div>
+        {driskResult && <ToolResult label="DRS output" result={driskResult} />}
+      </div>
+
+      {/* Name Confusion */}
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Cast Name Confusion Audit (v2)</div>
+        <div className="mt-1 flex gap-1">
+          <input value={nameInput} onChange={(e) => setNameInput(e.target.value)}
+            className="flex-1 rounded border border-zinc-200 px-2 py-1 font-mono text-xs" placeholder="Alice, Alicia, Alan" />
+          <button onClick={runNames} className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Audit</button>
+        </div>
+        {nameResult && <ToolResult label="Name confusion" result={nameResult} />}
+      </div>
+
+      {/* Wan Intensifiers */}
+      <div>
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Wan-Intensifier Audit (v4)</div>
+        <div className="mt-1 flex gap-1">
+          <input value={wanInput} onChange={(e) => setWanInput(e.target.value)}
+            className="flex-1 rounded border border-zinc-200 px-2 py-1 font-mono text-xs" />
+          <button onClick={runWan} className="rounded bg-indigo-600 px-3 py-1 text-[11px] font-bold text-white hover:bg-indigo-700">Audit</button>
+        </div>
+        {wanResult && <ToolResult label="Wan intensifiers" result={wanResult} />}
+      </div>
+
+      {/* GAUNTLET suites */}
+      <div className="flex gap-2">
+        <button onClick={() => { try { setGauntletAResult(JSON.stringify(runGauntletA(), null, 2)); } catch (e) { setGauntletAResult(`Error: ${e}`); } }}
+          className="rounded bg-emerald-600 px-3 py-1.5 text-[11px] font-bold text-white hover:bg-emerald-700">
+          🧪 GAUNTLET-A (6 tests)
+        </button>
+        <button onClick={() => { try { setGauntletV2Result(JSON.stringify(runGauntletV2(), null, 2)); } catch (e) { setGauntletV2Result(`Error: ${e}`); } }}
+          className="rounded bg-emerald-600 px-3 py-1.5 text-[11px] font-bold text-white hover:bg-emerald-700">
+          🧪 GAUNTLET v2 (10 props)
+        </button>
+      </div>
+      {gauntletAResult && <ToolResult label="GAUNTLET-A" result={gauntletAResult} />}
+      {gauntletV2Result && <ToolResult label="GAUNTLET v2" result={gauntletV2Result} />}
+    </div>
+  );
+}
+
+// ── Main ────────────────────────────────────────────────────────────────────
+
+type Tab = "v1" | "v2v3" | "v4" | "v5" | "v6" | "v7" | "v8" | "tools";
+const TABS: { id: Tab; label: string; icon: string }[] = [
+  { id: "v1", label: "v1", icon: "🏗" },
+  { id: "v2v3", label: "v2/v3", icon: "🎰" },
+  { id: "v4", label: "v4", icon: "✏" },
+  { id: "v5", label: "v5", icon: "⚡" },
+  { id: "v6", label: "v6", icon: "🔤" },
+  { id: "v7", label: "v7", icon: "🧠" },
+  { id: "v8", label: "v8", icon: "🔬" },
+  { id: "tools", label: "Tools", icon: "🧪" },
+];
+
+export function SagaOsReference() {
+  const [open, setOpen] = useState(true);
+  const [tab, setTab] = useState<Tab>("v1");
+
+  return (
+    <section className="rounded-xl border border-zinc-200 bg-zinc-50/80">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center justify-between px-4 py-2.5 text-left"
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-base">🏛</span>
+          <span className="text-xs font-bold uppercase tracking-wider text-zinc-700">SAGA-OS Composition Architecture</span>
+          <span className="rounded bg-zinc-200 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500">v1–v8</span>
+        </div>
+        <span className="text-zinc-400">{open ? "▾" : "▸"}</span>
+      </button>
+      {open && (
+        <div className="border-t border-zinc-200 px-4 py-3">
+          <div className="mb-3 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 transition-colors ${
+                  tab === t.id ? "bg-indigo-600 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+                }`}
+              >
+                {t.icon} {t.label}
+              </button>
+            ))}
+          </div>
+          {tab === "v1" && <V1Panel />}
+          {tab === "v2v3" && <V2V3Panel />}
+          {tab === "v4" && <V4Panel />}
+          {tab === "v5" && <V5Panel />}
+          {tab === "v6" && <V6Panel />}
+          {tab === "v7" && <V7Panel />}
+          {tab === "v8" && <V8Panel />}
+          {tab === "tools" && <ToolsPanel />}
+        </div>
+      )}
+    </section>
+  );
+}