Initial public upload from Projekte/CodexMaxHarnessHowTo

.codex/config.toml

@@ -0,0 +1,31 @@
+# Coding MCPs: project-local registration (2026-09-07).
+
+[mcp_servers.serena]
+command = "/home/smlflg/.local/share/coding-mcp/serena/.venv/bin/serena"
+args = ["start-mcp-server", "--context=codex", "--project", "/home/smlflg/Projekte/CodexMaxHarnessHowTo", "--enable-web-dashboard", "false", "--open-web-dashboard", "false", "--enable-gui-log-window", "false"]
+cwd = "/home/smlflg/Projekte/CodexMaxHarnessHowTo"
+enabled = true
+startup_timeout_sec = 120
+tool_timeout_sec = 180
+
+[mcp_servers.serena.env]
+"SERENA_HOME" = "/home/smlflg/.local/share/coding-mcp/serena/state"
+
+[mcp_servers.gitnexus]
+command = "/home/smlflg/.nvm/versions/node/v24.13.0/bin/node"
+args = ["/home/smlflg/.local/share/coding-mcp/gitnexus/node_modules/gitnexus/dist/cli/index.js", "mcp"]
+cwd = "/home/smlflg/Projekte/CodexMaxHarnessHowTo"
+enabled = true
+startup_timeout_sec = 120
+tool_timeout_sec = 180
+
+[mcp_servers.gitnexus.env]
+"GITNEXUS_HOME" = "/home/smlflg/.local/share/coding-mcp/gitnexus/runtime"
+
+[mcp_servers.context7]
+command = "/home/smlflg/.nvm/versions/node/v24.13.0/bin/node"
+args = ["/home/smlflg/.local/share/coding-mcp/context7/node_modules/@upstash/context7-mcp/dist/index.js"]
+cwd = "/home/smlflg/Projekte/CodexMaxHarnessHowTo"
+enabled = true
+startup_timeout_sec = 120
+tool_timeout_sec = 180

README.md

@@ -0,0 +1,26 @@
+# Codex Max Harness How-To
+
+Private lokale Static-Site fuer ein 8-Tage-Codex-Runbook.
+
+## Oeffnen
+
+`index.html` direkt im Browser oeffnen. Die Seite nutzt keine externen Runtime-Abhaengigkeiten.
+
+## Inhalte
+
+- 8-Tage-Plan fuer produktive Codex-Nutzung
+- Burn-down-Rechner fuer Credit- oder Credit-Aequivalent-Planung
+- Task-Kosten-Schaetzung anhand der OpenAI Codex Rate Card
+- lokales Harness-Backlog per `localStorage`
+- Prompt-Vorlagen fuer Codex CLI und Review-Runs
+- Praxis-Log: Claude-Code-Setup, Codex-Subagent-Profil und Harness-Ausnahme
+
+## Quellen
+
+Die Zahlen und Aussagen wurden am 21. April 2026 gegen offizielle OpenAI-Help/Docs-Seiten geprueft:
+
+- Using Codex with your ChatGPT plan: https://help.openai.com/en/articles/11369540-codex-in-chatgpt-faq
+- Codex rate card: https://help-lb.openai.com/en/articles/20001106-codex-rate-card
+- About ChatGPT Pro tiers: https://help.openai.com/en/articles/9793128-what-is-c
+- Using Credits for Flexible Usage: https://help.openai.com/en/articles/12642688-using-credits-for-flexible-usage-in-chatgpt-free-go-plus-pro-sora
+- Docs MCP: https://developers.openai.com/learn/docs-mcp

app.js

@@ -0,0 +1,352 @@
+const rateCard = {
+  "GPT-5.4": { input: 62.5, cached: 6.25, output: 375 },
+  "GPT-5.4-Mini": { input: 18.75, cached: 1.875, output: 113 },
+  "GPT-5.3-Codex": { input: 43.75, cached: 4.375, output: 350 },
+  "GPT-5.2-Codex": { input: 43.75, cached: 4.375, output: 350 },
+};
+
+const days = [
+  {
+    title: "Inventar und Ziele",
+    mode: "Scout",
+    output: "Repo-Liste, Top-20 Task-Kandidaten, Risiko-Matrix",
+    items: ["Codex Usage Panel pruefen", "beste Repos nach Impact sortieren", "keine Endlosjobs starten"],
+  },
+  {
+    title: "Harness-Benchmark",
+    mode: "Scout",
+    output: "Messbare Eval-Suite fuer Codex, Hermes, OpenCode",
+    items: ["identische Tasksheets", "Zeit, Kosten, Fehlerklasse erfassen", "ein Scoreboard schreiben"],
+  },
+  {
+    title: "Testgenerator-Welle",
+    mode: "Build",
+    output: "Tests fuer riskante Module und fehlende Regressionen",
+    items: ["erst failing tests", "dann Fixes", "Coverage-Luecken dokumentieren"],
+  },
+  {
+    title: "Refactor-Welle",
+    mode: "Build",
+    output: "kleinere APIs, weniger Duplication, bessere Grenzen",
+    items: ["keine Big-Bang-Refactors", "jede Aenderung testbar", "Diffs nach Modul trennen"],
+  },
+  {
+    title: "Frontend-Finish",
+    mode: "Ship",
+    output: "visuell fertige lokale Tools mit Screenshot-Check",
+    items: ["mobile und desktop pruefen", "Textueberlauf fixen", "leere States bauen"],
+  },
+  {
+    title: "Doku und Runbooks",
+    mode: "Ship",
+    output: "README, Setup, Troubleshooting, Agent-Prompts",
+    items: ["nur operative Doku", "keine Markdown-Flut", "Prompts als wiederverwendbare Vorlagen"],
+  },
+  {
+    title: "Review-Tag",
+    mode: "Verify",
+    output: "Codex-Reviews, Security-Checks, CI-Fixes",
+    items: ["codex review nutzen", "Findings zuerst", "nur echte Risiken fixen"],
+  },
+  {
+    title: "Final Sweep",
+    mode: "Verify",
+    output: "Archiv, offene Risiken, naechster Monatsplan",
+    items: ["Zombie-Sessions schliessen", "Artefakte verlinken", "Lessons in Harness-Guide uebernehmen"],
+  },
+];
+
+const prompts = [
+  {
+    title: "Deep Repo Audit",
+    command: `codex exec --full-auto -m gpt-5.4 -C /home/smlflg/Projekte/DEIN_REPO \\
+"Lies das Repo, finde die 10 hoechsten Hebel fuer Tests, Sicherheit und Wartbarkeit. Aendere noch nichts. Gib eine priorisierte, belegte Liste mit Dateien und konkreten naechsten Commands aus."`,
+  },
+  {
+    title: "Harness Eval Run",
+    command: `codex exec --full-auto -m gpt-5.4 -C /home/smlflg/Projekte/HarnessEcosystem \\
+"Baue eine kleine reproduzierbare Eval fuer Codex-Harness-Verhalten: Tasksheet, Messkriterien, Beispieltask, Ergebnis-Tabelle. Halte die Aenderung eng und teste lokal."`,
+  },
+  {
+    title: "Test-First Fix",
+    command: `codex exec --full-auto -m gpt-5.4 -c model_reasoning_effort="high" -C /home/smlflg/Projekte/DEIN_REPO \\
+"Finde eine reale, riskante Bugklasse. Schreibe zuerst einen failing Test, implementiere den kleinsten Fix, fuehre relevante Tests aus und erklaere den Diff."`,
+  },
+  {
+    title: "Codex Review",
+    command: `codex review --base main "Priorisiere Bugs, Regressionen, Security-Risiken und fehlende Tests. Keine Stil-Nitpicks ohne Risiko."`,
+  },
+  {
+    title: "OpenAI Docs MCP Check",
+    command: `codex exec --search -C /home/smlflg/Projekte/DEIN_REPO \\
+"Nutze openaiDeveloperDocs, pruefe ob unsere OpenAI-API-Nutzung aktuell ist, und schlage gezielte Code-Aenderungen vor. Nur offizielle OpenAI-Doku verwenden."`,
+  },
+  {
+    title: "Finish Pass",
+    command: `codex exec --full-auto -m gpt-5.4 -C /home/smlflg/Projekte/DEIN_REPO \\
+"Mache aus diesem lokalen Tool ein fertiges Artefakt: README, Startanleitung, leere States, Fehlertexte, kleine UI-Politur und abschliessende Verifikation."`,
+  },
+];
+
+const lanes = ["Scout", "Build", "Verify", "Ship"];
+const defaultTasks = [
+  { id: "seed-mcp-docs", title: "Codex MCP Docs in bestehende OpenAI-Projekte einbauen", lane: "Scout", model: "GPT-5.4" },
+  { id: "seed-promptgarage-eval", title: "PromptGarage: Eval-DB pruefen und Judge-Runs automatisieren", lane: "Build", model: "GPT-5.3-Codex" },
+  { id: "seed-token-diaet", title: "HarnessEcosystem: TOKEN_DIAET mit neuen Codex-Rate-Card-Daten aktualisieren", lane: "Ship", model: "GPT-5.4" },
+  { id: "seed-static-sites", title: "Alle privaten Static-Sites auf mobile Textueberlaeufe pruefen", lane: "Verify", model: "GPT-5.4-Mini" },
+];
+
+const formatter = new Intl.NumberFormat("de-DE", { maximumFractionDigits: 0 });
+const preciseFormatter = new Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 });
+let taskState = loadTasks();
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function createId() {
+  if (globalThis.crypto?.randomUUID) return crypto.randomUUID();
+  return `task-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function normalizeTask(task) {
+  const lane = lanes.includes(task?.lane) ? task.lane : "Scout";
+  const model = Object.hasOwn(rateCard, task?.model) ? task.model : "GPT-5.4";
+  return {
+    id: String(task?.id || createId()),
+    title: String(task?.title || "Unbenannter Task").slice(0, 240),
+    lane,
+    model,
+  };
+}
+
+function loadTasks() {
+  try {
+    const saved = localStorage.getItem("codex-max-harness-tasks");
+    if (!saved) return defaultTasks.map(normalizeTask);
+    const parsed = JSON.parse(saved);
+    return Array.isArray(parsed) ? parsed.map(normalizeTask) : defaultTasks.map(normalizeTask);
+  } catch {
+    return defaultTasks.map(normalizeTask);
+  }
+}
+
+function numberFrom(id) {
+  return Number(document.getElementById(id).value || 0);
+}
+
+function renderTimeline() {
+  document.getElementById("timeline").innerHTML = days
+    .map(
+      (day, index) => `
+        <article class="day-card">
+          <div class="day-kicker"><span class="dot"></span>Tag ${index + 1} · ${escapeHtml(day.mode)}</div>
+          <h3>${escapeHtml(day.title)}</h3>
+          <p><strong>Output:</strong> ${escapeHtml(day.output)}</p>
+          <ul>${day.items.map((item) => `<li>${escapeHtml(item)}</li>`).join("")}</ul>
+        </article>
+      `,
+    )
+    .join("");
+}
+
+function renderModels() {
+  const select = document.getElementById("modelSelect");
+  select.innerHTML = Object.keys(rateCard)
+    .map((model) => `<option value="${model}">${model}</option>`)
+    .join("");
+}
+
+function updateBudget() {
+  const remaining = numberFrom("remainingCredits");
+  const daysLeft = Math.max(1, numberFrom("remainingDays"));
+  const buffer = Math.min(40, Math.max(0, numberFrom("bufferPercent"))) / 100;
+  const blocks = Math.max(1, numberFrom("blocksPerDay"));
+  const usable = remaining * (1 - buffer);
+  const daily = usable / daysLeft;
+  const block = daily / blocks;
+
+  document.getElementById("usableCredits").textContent = formatter.format(usable);
+  document.getElementById("dailyCredits").textContent = formatter.format(daily);
+  document.getElementById("blockCredits").textContent = formatter.format(block);
+}
+
+function updateEstimate() {
+  const selected = document.getElementById("modelSelect").value;
+  const rate = rateCard[selected];
+  const input = numberFrom("inputTokens") * rate.input;
+  const cached = numberFrom("cachedTokens") * rate.cached;
+  const output = numberFrom("outputTokens") * rate.output;
+  const multiplier = document.getElementById("fastMode").checked ? 2 : 1;
+  const total = (input + cached + output) * multiplier;
+
+  document.getElementById("estimatedCredits").textContent = preciseFormatter.format(total);
+  document.getElementById("estimateDetail").textContent =
+    `${selected}: Input ${rate.input}, Cached ${rate.cached}, Output ${rate.output} Credits pro 1M Tokens`;
+}
+
+function getTasks() {
+  return taskState;
+}
+
+function saveTasks(tasks) {
+  taskState = tasks.map(normalizeTask);
+  try {
+    localStorage.setItem("codex-max-harness-tasks", JSON.stringify(taskState));
+  } catch {
+    // Keep the in-memory board working when file:// or private mode blocks storage.
+  }
+}
+
+function moveTask(id, direction) {
+  const tasks = getTasks();
+  const task = tasks.find((item) => item.id === id);
+  if (!task) return;
+  const index = lanes.indexOf(task.lane);
+  const nextIndex = Math.min(lanes.length - 1, Math.max(0, index + direction));
+  task.lane = lanes[nextIndex];
+  saveTasks(tasks);
+  renderKanban();
+}
+
+function deleteTask(id) {
+  saveTasks(getTasks().filter((task) => task.id !== id));
+  renderKanban();
+}
+
+function renderKanban() {
+  const tasks = getTasks();
+  document.getElementById("kanban").innerHTML = lanes
+    .map((lane) => {
+      const laneTasks = tasks.filter((task) => task.lane === lane);
+      return `
+        <section class="lane" aria-label="${escapeHtml(lane)}">
+          <h3>${escapeHtml(lane)}<span class="lane-count">${laneTasks.length}</span></h3>
+          ${laneTasks
+            .map(
+              (task) => `
+                <article class="task-card">
+                  <strong>${escapeHtml(task.title)}</strong>
+                  <div class="task-meta">
+                    <span class="tag">${escapeHtml(task.model)}</span>
+                    <span class="tag alt">${escapeHtml(task.lane)}</span>
+                  </div>
+                  <div class="task-actions">
+                    <button type="button" data-task-move="${escapeHtml(task.id)}" data-direction="-1">Zurueck</button>
+                    <button type="button" data-task-move="${escapeHtml(task.id)}" data-direction="1">Weiter</button>
+                    <button type="button" data-task-delete="${escapeHtml(task.id)}">Loeschen</button>
+                  </div>
+                </article>
+              `,
+            )
+            .join("")}
+        </section>
+      `;
+    })
+    .join("");
+}
+
+function renderPrompts() {
+  document.getElementById("promptGrid").innerHTML = prompts
+    .map(
+      (prompt, index) => `
+        <article class="prompt-card">
+          <h3>${escapeHtml(prompt.title)}</h3>
+          <pre><code>${escapeHtml(prompt.command)}</code></pre>
+          <button class="button ghost small" type="button" data-copy="${index}">Kopieren</button>
+        </article>
+      `,
+    )
+    .join("");
+}
+
+function fallbackCopy(text) {
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.setAttribute("readonly", "");
+  area.style.position = "fixed";
+  area.style.left = "-9999px";
+  document.body.append(area);
+  area.select();
+  try {
+    return document.execCommand("copy");
+  } finally {
+    area.remove();
+  }
+}
+
+async function copyText(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // Fall through to the textarea fallback for file:// contexts.
+  }
+  return fallbackCopy(text);
+}
+
+function attachEvents() {
+  document.querySelectorAll("#budgetForm input").forEach((input) => {
+    input.addEventListener("input", updateBudget);
+  });
+
+  document.querySelectorAll("#costForm input, #costForm select").forEach((input) => {
+    input.addEventListener("input", updateEstimate);
+    input.addEventListener("change", updateEstimate);
+  });
+
+  document.getElementById("taskForm").addEventListener("submit", (event) => {
+    event.preventDefault();
+    const title = document.getElementById("taskTitle").value.trim();
+    if (!title) return;
+    const tasks = getTasks();
+    tasks.push({
+      id: createId(),
+      title,
+      lane: document.getElementById("taskLane").value,
+      model: document.getElementById("taskModel").value,
+    });
+    saveTasks(tasks);
+    event.currentTarget.reset();
+    renderKanban();
+  });
+
+  document.getElementById("kanban").addEventListener("click", (event) => {
+    const moveButton = event.target.closest("[data-task-move]");
+    if (moveButton) {
+      moveTask(moveButton.dataset.taskMove, Number(moveButton.dataset.direction));
+      return;
+    }
+
+    const deleteButton = event.target.closest("[data-task-delete]");
+    if (deleteButton) {
+      deleteTask(deleteButton.dataset.taskDelete);
+    }
+  });
+
+  document.getElementById("promptGrid").addEventListener("click", async (event) => {
+    const button = event.target.closest("[data-copy]");
+    if (!button) return;
+    const prompt = prompts[Number(button.dataset.copy)];
+    const copied = await copyText(prompt.command);
+    button.textContent = copied ? "Kopiert" : "Nicht kopiert";
+    window.setTimeout(() => {
+      button.textContent = "Kopieren";
+    }, 1200);
+  });
+}
+
+renderTimeline();
+renderModels();
+renderKanban();
+renderPrompts();
+attachEvents();
+updateBudget();
+updateEstimate();

index.html

@@ -0,0 +1,433 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Codex Max Harness | Privates 8-Tage-Runbook</title>
+    <meta
+      name="description"
+      content="Private lokale How-to-Seite fuer produktive Codex-Max-Nutzung ueber acht Tage."
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="#top" aria-label="Codex Max Harness Start">
+        <span class="brand-mark" aria-hidden="true">CM</span>
+        <span>
+          <strong>Codex Max Harness</strong>
+          <small>Privates 8-Tage-Runbook</small>
+        </span>
+      </a>
+      <nav aria-label="Seitennavigation">
+        <a href="#plan">Plan</a>
+        <a href="#wellen">Wellen</a>
+        <a href="#setup-log">Setup</a>
+        <a href="#rechner">Rechner</a>
+        <a href="#backlog">Backlog</a>
+        <a href="#prompts">Prompts</a>
+      </nav>
+    </header>
+
+    <main id="top">
+      <section class="hero">
+        <div class="hero-copy">
+          <p class="eyebrow">Stand: 21. April 2026 · lokal · nicht deployt</p>
+          <h1>Nutze dein Codex-Pro-Fenster fuer echte Artefakte.</h1>
+          <p>
+            Acht intensive Codex-Tage: Evals, Refactors, Tests, Reviews, Dokumentation
+            und Produktisierung. Der Fokus liegt auf hoher Auslastung durch wertvolle
+            Arbeit, nicht auf Limit-Umgehung oder Token-Spam.
+          </p>
+          <div class="hero-actions">
+            <a class="button primary" href="#plan">8-Tage-Plan starten</a>
+            <a class="button ghost" href="#rechner">Budget schaetzen</a>
+          </div>
+        </div>
+        <aside class="signal-panel" aria-label="Status">
+          <div class="pulse-grid" aria-hidden="true">
+            <span></span><span></span><span></span><span></span>
+            <span></span><span></span><span></span><span></span>
+            <span></span><span></span><span></span><span></span>
+          </div>
+          <div class="signal-stats">
+            <div>
+              <strong>8</strong>
+              <span>Tage</span>
+            </div>
+            <div>
+              <strong>2</strong>
+              <span>aktive Sessions max.</span>
+            </div>
+            <div>
+              <strong>4</strong>
+              <span>Harness-Wellen</span>
+            </div>
+          </div>
+        </aside>
+      </section>
+
+      <section class="notice">
+        <strong>Korrekte Annahme:</strong>
+        <span>
+          Dein Pro-Tier oder Monatsbudget ist nicht automatisch ein linearer Token-Eimer.
+          Die plan-inkludierte Nutzung wird zuerst verbraucht; separat gekaufte Credits
+          greifen danach. Fuer Codex zaehlen Task-Komplexitaet, Ausfuehrungsort, Modell,
+          Fast Mode sowie Input-/Cached-/Output-Tokens. Pruefe dein echtes Limit im
+          Codex Usage Panel.
+        </span>
+      </section>
+
+      <section id="wellen" class="section">
+        <div class="section-head">
+          <p class="eyebrow">Subagents</p>
+          <h2>Mehr Agenten, aber in Wellen</h2>
+          <p>
+            Parallelitaet lohnt sich, wenn die Aufgaben entkoppelt sind. Jede Welle bekommt
+            ein klares Tasksheet, eigene Dateien und einen Konvergenzpunkt, bevor die naechste
+            Welle startet.
+          </p>
+        </div>
+        <div class="wave-grid">
+          <article class="wave-card">
+            <span>1</span>
+            <h3>Scout</h3>
+            <p>2-3 Read-only-Agenten lesen verschiedene Repos oder Problemfelder.</p>
+            <strong>Output: Befundliste mit Datei-/Risiko-Referenzen.</strong>
+          </article>
+          <article class="wave-card">
+            <span>2</span>
+            <h3>Plan</h3>
+            <p>Ein Hauptagent verdichtet die Scouts zu Tasksheets und Write-Scopes.</p>
+            <strong>Output: kleine, konfliktarme Arbeitspakete.</strong>
+          </article>
+          <article class="wave-card">
+            <span>3</span>
+            <h3>Build</h3>
+            <p>Mehrere Worker bearbeiten disjunkte Dateien oder Module parallel.</p>
+            <strong>Output: integrierbare Patches plus Testbefehle.</strong>
+          </article>
+          <article class="wave-card">
+            <span>4</span>
+            <h3>Verify</h3>
+            <p>Review-Agenten pruefen Verhalten, Tests, UI und Doku gegen den Scope.</p>
+            <strong>Output: Findings zuerst, dann Ship-Entscheidung.</strong>
+          </article>
+        </div>
+        <div class="guardrail">
+          <strong>Guardrail:</strong>
+          <span>
+            Keine Multi-Account-Tricks, kein Rate-Limit-Bypass, keine Endlosschleifen.
+            Viel Codex nutzen heisst hier: grosse legitime Aufgaben, klare Scopes,
+            Tests und Reviews.
+          </span>
+        </div>
+      </section>
+
+      <section id="setup-log" class="section">
+        <div class="section-head">
+          <p class="eyebrow">Praxis-Log</p>
+          <h2>Claude-Code-Setup als Vorlage fuer Codex</h2>
+          <p>
+            Dieser Inhalt ist ein dokumentierter Terminal-Snapshot, kein auszufuehrender Prompt.
+            Er zeigt, welche Muster aus deinem Claude-Code-Setup sinnvoll nach Codex wandern und
+            wo der Harness bewusst konservativ bleiben muss.
+          </p>
+        </div>
+
+        <div class="case-grid">
+          <article class="case-card">
+            <h3>Ausgangslage</h3>
+            <p>
+              Codex wurde in <code>~/.claude</code> gestartet und hat dein Claude-Code-Setup
+              read-only bewertet: <code>CLAUDE.md</code>, <code>settings.json</code>, Hooks,
+              Slash-Commands, GSD-Workflow, Agenten, Event-Logging und Tests.
+            </p>
+            <ul>
+              <li><code>settings.json</code> war syntaktisch valide.</li>
+              <li>Background-Agent-Gate: <code>5/5 tests passed</code>.</li>
+              <li>Event-Logger-Threshold: <code>4/4 tests passed</code>.</li>
+              <li>Worktree war dirty; Submodule <code>commands</code> war nicht initialisiert.</li>
+            </ul>
+          </article>
+
+          <article class="case-card">
+            <h3>Starke Muster</h3>
+            <p>
+              Das Setup ist mehr als Dotfiles: portable Config, Backup-Strategie, kompaktere
+              Kernregeln, Hook-Gates, Sidecar-/OpenCode-Anbindung und testbare Schutzlogik.
+            </p>
+            <ul>
+              <li>Explore-first statt blindem Bauen.</li>
+              <li>Background-Agent-Denke: Hauptsession bleibt Orchestrator.</li>
+              <li>Verification-Gate mit konkretem Test- oder Smoke-Beleg.</li>
+              <li>Mode-Trennung: Planning, Build, Review, Debug, Verify.</li>
+            </ul>
+          </article>
+
+          <article class="case-card warning-card">
+            <h3>Scharfe Kanten</h3>
+            <p>
+              Nicht alles gehoert nach Codex. Besonders riskant sind bequeme Permission-Defaults,
+              Hook-Kaskaden und zu viel unsichtbare Kontext-Injektion.
+            </p>
+            <ul>
+              <li><code>Bash(*)</code> plus Permission-Skip ist kein hartes Sicherheitsmodell.</li>
+              <li>Event-Logging kann sensible Tool-Payloads mitschneiden.</li>
+              <li>Absolute Sidecar-Pfade brechen Restore-Portabilitaet.</li>
+              <li>Zu viele Hooks koennen Latenz und schwer sichtbare Fehler erzeugen.</li>
+            </ul>
+          </article>
+        </div>
+
+        <div class="transfer-panel">
+          <div>
+            <p class="eyebrow">Transfer</p>
+            <h3>Nach Codex uebernehmen</h3>
+            <ul>
+              <li>Agent-first-Orchestrierung fuer nicht-triviale Aufgaben.</li>
+              <li>Explorer fuer unabhängige Codebase-Fragen, Risiken und Testkarten.</li>
+              <li>Worker nur mit disjunktem Datei- oder Modulbesitz.</li>
+              <li>Main Session als Integrator, Konfliktloeser und finaler Reviewer.</li>
+              <li>Config-Validation: Dateien komplett lesen, Syntax pruefen, keine Keys erfinden.</li>
+            </ul>
+          </div>
+          <div>
+            <p class="eyebrow">Nicht 1:1 uebernehmen</p>
+            <h3>Harness bleibt messbar</h3>
+            <ul>
+              <li>Keine Claude-Hook-Kaskade in Codex nachbauen.</li>
+              <li>Keine massive Slash-Command-Matrix ohne echten Nutzen.</li>
+              <li>Keine Permission-Lockerung als Produktivitaetsersatz.</li>
+              <li>Keine maximalen Subagent-Waves bei Evals, Benchmarks oder Ablations.</li>
+              <li>Keine parallelen Implementierer am selben bewerteten Artefakt.</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="implementation-note">
+          <strong>Implementierter Codex-Umbau:</strong>
+          <span>
+            <code>~/.codex/instructions.md</code> wurde global auf agent-first gestellt.
+            <code>build.md</code>, <code>planning.md</code> und <code>review.md</code>
+            nutzen parallele Lanes, wenn sie unabhaengig sind. Neu dazu kam
+            <code>~/.codex/runbooks/parallel-build.md</code>. Fuer
+            <code>HarnessEcosystem</code>, <code>.hermes</code>, <code>judge</code>,
+            <code>eval</code>, <code>benchmark</code>, <code>matrix</code> und
+            <code>ablation</code> gilt konservativer Eval-Modus.
+          </span>
+        </div>
+
+        <details class="terminal-log">
+          <summary>Terminal-Auszug anzeigen</summary>
+          <pre><code>smlflg@pop-os:~$ cd .claude/
+smlflg@pop-os:~/.claude$ codex
+OpenAI Codex v0.122.0
+model:     gpt-5.4 xhigh
+directory: ~/.claude
+
+Frage:
+was sagst du zu meinem claude code setup
+
+Read-only Checks:
+- CLAUDE.md, settings.json, README.md, package.json
+- hooks/coaching, event_logger.py, enforce-background-agents.py
+- settings.json valid
+- Background-Agent-Gate: 5/5 tests passed
+- Event-Logger-Threshold: 4/4 tests passed
+- Worktree dirty: CLAUDE.md, settings.json, coaching_log.md
+- commands submodule nicht initialisiert
+
+Einschaetzung:
+Sehr gutes Power-User-Setup fuer schnelle agentische Arbeit, aber mit scharfen Kanten.
+Staerken: kompakte Kernregeln, valide Settings, Hook-Gates, Tests, portable Backup-Story.
+Risiken: Bash(*)/Permission-Skip, volle Hook-Payload-Logs, viele Hooks pro Prompt/Tool,
+absolute Sidecar-Pfade, unsauberer Git/Submodule-Zustand.
+
+Folgefrage:
+codex profil so umbauen, dass codex immer maximal viele subagents verwendet;
+welche Features aus Claude Code nach Codex/Hermes uebertragen?
+
+Entscheidung:
+Global aggressiv, aber Harness/Eval konservativ.
+
+Umgesetzt:
+- ~/.codex/instructions.md: agent-first orchestration
+- ~/.codex/runbooks/build.md: parallele Explorer/Worker mit disjunkten Scopes
+- ~/.codex/runbooks/planning.md: Explorer fuer unabhaengige Unbekannte
+- ~/.codex/runbooks/review.md: Behavior/Test/Architektur-Lanes
+- ~/.codex/runbooks/parallel-build.md: neues Runbook fuer maximale sinnvolle Subagent-Waves
+
+Harness-Ausnahme:
+Bei HarnessEcosystem, FirstRealHarnessEvaluation_KarpathiesMD, .hermes, harness-*,
+judge, eval, benchmark, matrix, ablation oder Prompt-/Rule-Experimenten:
+keine spekulativen Subagent-Waves, keine parallelen Implementierer am selben Artefakt,
+Reproduzierbarkeit und Attribution vor Durchsatz.</code></pre>
+        </details>
+      </section>
+
+      <section id="plan" class="section">
+        <div class="section-head">
+          <p class="eyebrow">Runbook</p>
+          <h2>8 Tage, acht Outputs</h2>
+          <p>
+            Jeder Tag endet mit einem greifbaren Ergebnis. Wenn ein Tag schneller fertig ist,
+            wird nicht blind fan-out erzeugt, sondern die naechste Review- oder Testwelle gestartet.
+          </p>
+        </div>
+        <div class="timeline" id="timeline"></div>
+      </section>
+
+      <section id="rechner" class="section split">
+        <div class="panel">
+          <div class="panel-head">
+            <p class="eyebrow">Burn-down</p>
+            <h2>Tagesziel berechnen</h2>
+          </div>
+          <form class="controls" id="budgetForm">
+            <label>
+              Zusatz-Credits oder eigenes Planungsziel
+              <input id="remainingCredits" type="number" min="0" step="10" value="10000" />
+            </label>
+            <label>
+              Resttage
+              <input id="remainingDays" type="number" min="1" max="31" value="8" />
+            </label>
+            <label>
+              Sicherheitspuffer in %
+              <input id="bufferPercent" type="number" min="0" max="40" value="8" />
+            </label>
+            <label>
+              Geplante Arbeitsbloecke pro Tag
+              <input id="blocksPerDay" type="number" min="1" max="8" value="3" />
+            </label>
+          </form>
+          <div class="metrics">
+            <div>
+              <span>Nutzbar</span>
+              <strong id="usableCredits">9.200</strong>
+            </div>
+            <div>
+              <span>Pro Tag</span>
+              <strong id="dailyCredits">1.150</strong>
+            </div>
+            <div>
+              <span>Pro Block</span>
+              <strong id="blockCredits">383</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-head">
+            <p class="eyebrow">Rate Card</p>
+            <h2>Task-Kosten schaetzen</h2>
+          </div>
+          <form class="controls" id="costForm">
+            <label>
+              Modell
+              <select id="modelSelect"></select>
+            </label>
+            <label>
+              Input Tokens in Mio.
+              <input id="inputTokens" type="number" min="0" step="0.01" value="0.25" />
+            </label>
+            <label>
+              Cached Input Tokens in Mio.
+              <input id="cachedTokens" type="number" min="0" step="0.01" value="0.4" />
+            </label>
+            <label>
+              Output Tokens in Mio.
+              <input id="outputTokens" type="number" min="0" step="0.01" value="0.06" />
+            </label>
+            <label class="check">
+              <input id="fastMode" type="checkbox" />
+              <span>Fast Mode einrechnen (2x Credits)</span>
+            </label>
+          </form>
+          <div class="estimate">
+            <span>Geschaetzte Task-Kosten</span>
+            <strong id="estimatedCredits">0</strong>
+            <small id="estimateDetail">Credits</small>
+          </div>
+        </div>
+      </section>
+
+      <section id="backlog" class="section">
+        <div class="section-head">
+          <p class="eyebrow">Harness-Backlog</p>
+          <h2>Aufgaben, die Tokens verdienen</h2>
+          <p>
+            Speichere High-Value-Aufgaben lokal im Browser. Gute Kandidaten sind grosse
+            Codebase-Reviews, Testgenerierung, UI-Finishing, Migrationspläne und Eval-Runs.
+          </p>
+        </div>
+        <form class="task-form" id="taskForm">
+          <label class="visually-hidden" for="taskTitle">Backlog-Task</label>
+          <input id="taskTitle" name="taskTitle" placeholder="Task, z. B. PromptGarage Eval-Harness haerten" required />
+          <select id="taskLane" name="taskLane" aria-label="Lane">
+            <option value="Scout">Scout</option>
+            <option value="Build">Build</option>
+            <option value="Verify">Verify</option>
+            <option value="Ship">Ship</option>
+          </select>
+          <select id="taskModel" name="taskModel" aria-label="Modell">
+            <option>GPT-5.4</option>
+            <option>GPT-5.3-Codex</option>
+            <option>GPT-5.4-Mini</option>
+          </select>
+          <button class="button primary" type="submit">Hinzufuegen</button>
+        </form>
+        <div class="kanban" id="kanban"></div>
+      </section>
+
+      <section id="prompts" class="section">
+        <div class="section-head">
+          <p class="eyebrow">Prompt-Bibliothek</p>
+          <h2>Codex-Kommandos fuer lange, wertvolle Runs</h2>
+          <p>
+            Die Vorlagen sind fuer lokale Arbeit gedacht. Passe Pfade und Repositories an,
+            bevor du sie ausfuehrst.
+          </p>
+        </div>
+        <div class="prompt-grid" id="promptGrid"></div>
+      </section>
+
+      <section class="section sources">
+        <div class="section-head">
+          <p class="eyebrow">Quellen</p>
+          <h2>Offizielle Grundlage</h2>
+        </div>
+        <ul>
+          <li>
+            <a href="https://help.openai.com/en/articles/11369540-codex-in-chatgpt-faq">
+              OpenAI Help: Using Codex with your ChatGPT plan
+            </a>
+          </li>
+          <li>
+            <a href="https://help-lb.openai.com/en/articles/20001106-codex-rate-card">
+              OpenAI Help: Codex rate card
+            </a>
+          </li>
+          <li>
+            <a href="https://help.openai.com/en/articles/9793128-what-is-c">
+              OpenAI Help: About ChatGPT Pro tiers
+            </a>
+          </li>
+          <li>
+            <a href="https://help.openai.com/en/articles/12642688-using-credits-for-flexible-usage-in-chatgpt-free-go-plus-pro-sora">
+              OpenAI Help: Using Credits for Flexible Usage
+            </a>
+          </li>
+          <li>
+            <a href="https://developers.openai.com/learn/docs-mcp">
+              OpenAI Developers: Docs MCP
+            </a>
+          </li>
+        </ul>
+      </section>
+    </main>
+
+    <script src="./app.js"></script>
+  </body>
+</html>

styles.css

@@ -0,0 +1,911 @@
+:root {
+  --bg: #f7f8fb;
+  --surface: #ffffff;
+  --ink: #16202a;
+  --muted: #667380;
+  --line: #dfe5ec;
+  --teal: #0f9f8f;
+  --teal-dark: #087568;
+  --coral: #df5a45;
+  --gold: #bd8d24;
+  --blue: #316fd0;
+  --green-soft: #dff5ef;
+  --coral-soft: #fde6df;
+  --gold-soft: #fff2c9;
+  --blue-soft: #e4edff;
+  --shadow: 0 18px 55px rgba(25, 39, 52, 0.12);
+  color-scheme: light;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+body {
+  margin: 0;
+  background:
+    linear-gradient(120deg, rgba(15, 159, 143, 0.08), transparent 34%),
+    linear-gradient(260deg, rgba(223, 90, 69, 0.08), transparent 30%),
+    var(--bg);
+  color: var(--ink);
+  overflow-x: hidden;
+}
+
+a {
+  color: inherit;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  min-height: 70px;
+  padding: 12px clamp(18px, 4vw, 54px);
+  border-bottom: 1px solid rgba(223, 229, 236, 0.8);
+  background: rgba(247, 248, 251, 0.88);
+  backdrop-filter: blur(18px);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  min-width: 220px;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--ink);
+  color: white;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.brand strong,
+.brand small {
+  display: block;
+}
+
+.brand small {
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+nav a {
+  padding: 9px 12px;
+  border-radius: 8px;
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+nav a:hover,
+nav a:focus-visible {
+  background: var(--surface);
+  color: var(--ink);
+  outline: none;
+}
+
+main {
+  width: min(1180px, calc(100% - 32px));
+  margin: 0 auto;
+}
+
+.hero {
+  min-height: calc(100vh - 70px);
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  gap: clamp(24px, 5vw, 70px);
+  align-items: center;
+  padding: 48px 0 36px;
+}
+
+.hero-copy {
+  max-width: 760px;
+  min-width: 0;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  color: var(--teal-dark);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  margin-bottom: 22px;
+  max-width: 920px;
+  font-size: clamp(44px, 7vw, 86px);
+  line-height: 0.96;
+  letter-spacing: 0;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+h2,
+h3,
+p,
+li,
+a,
+button {
+  overflow-wrap: break-word;
+}
+
+h2 {
+  margin-bottom: 12px;
+  font-size: clamp(28px, 4vw, 44px);
+  line-height: 1.05;
+  letter-spacing: 0;
+}
+
+h3 {
+  margin-bottom: 8px;
+  font-size: 19px;
+}
+
+.hero-copy > p:not(.eyebrow),
+.section-head p {
+  max-width: 760px;
+  color: var(--muted);
+  font-size: 18px;
+  line-height: 1.65;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.button {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 12px 16px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 850;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    background 160ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+}
+
+.button.primary {
+  background: var(--ink);
+  color: #fff;
+  box-shadow: 0 10px 26px rgba(22, 32, 42, 0.18);
+}
+
+.button.ghost {
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--ink);
+}
+
+.button.small {
+  padding: 8px 10px;
+  font-size: 12px;
+}
+
+.signal-panel {
+  position: relative;
+  min-width: 0;
+  min-height: 520px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
+    repeating-linear-gradient(0deg, rgba(22, 32, 42, 0.04), rgba(22, 32, 42, 0.04) 1px, transparent 1px, transparent 28px);
+  box-shadow: var(--shadow);
+}
+
+.pulse-grid {
+  position: absolute;
+  inset: 38px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.pulse-grid span {
+  min-height: 78px;
+  border-radius: 8px;
+  background: linear-gradient(160deg, rgba(15, 159, 143, 0.18), rgba(49, 111, 208, 0.12));
+  border: 1px solid rgba(15, 159, 143, 0.22);
+}
+
+.pulse-grid span:nth-child(3n) {
+  background: linear-gradient(160deg, rgba(223, 90, 69, 0.16), rgba(189, 141, 36, 0.12));
+  border-color: rgba(223, 90, 69, 0.22);
+}
+
+.pulse-grid span:nth-child(4n) {
+  background: linear-gradient(160deg, rgba(49, 111, 208, 0.17), rgba(15, 159, 143, 0.12));
+  border-color: rgba(49, 111, 208, 0.22);
+}
+
+.signal-stats {
+  position: absolute;
+  right: 24px;
+  bottom: 24px;
+  left: 24px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.signal-stats div {
+  min-height: 118px;
+  padding: 18px;
+  border: 1px solid rgba(223, 229, 236, 0.88);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.signal-stats strong {
+  display: block;
+  font-size: 42px;
+  line-height: 1;
+}
+
+.signal-stats span {
+  display: block;
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.notice {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  margin: 0 0 72px;
+  padding: 18px 20px;
+  border: 1px solid rgba(189, 141, 36, 0.34);
+  border-radius: 8px;
+  background: var(--gold-soft);
+  color: #4b3b0b;
+  line-height: 1.55;
+}
+
+.notice strong {
+  white-space: nowrap;
+}
+
+.notice span,
+.guardrail span {
+  min-width: 0;
+}
+
+.section {
+  padding: 68px 0;
+}
+
+.section-head {
+  margin-bottom: 26px;
+}
+
+.timeline {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.wave-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.wave-card {
+  min-height: 250px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08);
+}
+
+.wave-card span {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  margin-bottom: 18px;
+  border-radius: 8px;
+  background: var(--ink);
+  color: #fff;
+  font-weight: 900;
+}
+
+.wave-card:nth-child(2) span {
+  background: var(--teal-dark);
+}
+
+.wave-card:nth-child(3) span {
+  background: var(--blue);
+}
+
+.wave-card:nth-child(4) span {
+  background: var(--coral);
+}
+
+.wave-card p {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.wave-card strong {
+  display: block;
+  line-height: 1.45;
+}
+
+.guardrail {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin-top: 16px;
+  padding: 18px 20px;
+  border: 1px solid rgba(223, 90, 69, 0.28);
+  border-radius: 8px;
+  background: var(--coral-soft);
+  color: #6d2a1f;
+  line-height: 1.55;
+}
+
+.case-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+
+.case-card,
+.transfer-panel,
+.implementation-note,
+.terminal-log {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08);
+}
+
+.case-card {
+  min-height: 310px;
+  padding: 20px;
+}
+
+.case-card p,
+.case-card li,
+.transfer-panel li,
+.implementation-note {
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.case-card ul,
+.transfer-panel ul {
+  margin: 14px 0 0;
+  padding-left: 18px;
+}
+
+.warning-card {
+  border-color: rgba(223, 90, 69, 0.26);
+  background: linear-gradient(145deg, rgba(253, 230, 223, 0.88), rgba(255, 255, 255, 0.92));
+}
+
+.transfer-panel {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 14px;
+  padding: 22px;
+}
+
+.implementation-note {
+  display: flex;
+  gap: 14px;
+  margin-top: 14px;
+  padding: 18px 20px;
+  border-color: rgba(15, 159, 143, 0.28);
+  background: linear-gradient(145deg, var(--green-soft), rgba(255, 255, 255, 0.94));
+}
+
+.implementation-note strong {
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+code {
+  border-radius: 6px;
+  background: rgba(22, 32, 42, 0.07);
+  color: var(--ink);
+  padding: 1px 4px;
+}
+
+.terminal-log {
+  margin-top: 14px;
+  overflow: hidden;
+}
+
+.terminal-log summary {
+  cursor: pointer;
+  padding: 16px 18px;
+  font-weight: 850;
+}
+
+.terminal-log pre {
+  border-radius: 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.day-card,
+.panel,
+.prompt-card,
+.source-card,
+.task-card {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 12px 34px rgba(25, 39, 52, 0.08);
+}
+
+.day-card {
+  min-height: 260px;
+  padding: 20px;
+}
+
+.day-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: var(--teal);
+}
+
+.day-card:nth-child(2n) .dot {
+  background: var(--blue);
+}
+
+.day-card:nth-child(3n) .dot {
+  background: var(--coral);
+}
+
+.day-card:nth-child(4n) .dot {
+  background: var(--gold);
+}
+
+.day-card ul,
+.sources ul {
+  margin: 14px 0 0;
+  padding-left: 18px;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.split {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+}
+
+.panel {
+  padding: 22px;
+}
+
+.panel-head {
+  margin-bottom: 18px;
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+
+label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  min-height: 44px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink);
+  font: inherit;
+  font-size: 14px;
+  padding: 10px 12px;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--teal);
+  outline: 3px solid rgba(15, 159, 143, 0.14);
+}
+
+.check {
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  grid-column: 1 / -1;
+}
+
+.check input {
+  width: 18px;
+  min-height: 18px;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.metrics div,
+.estimate {
+  padding: 16px;
+  border-radius: 8px;
+  background: linear-gradient(145deg, var(--green-soft), #fff);
+  border: 1px solid rgba(15, 159, 143, 0.22);
+}
+
+.metrics span,
+.estimate span,
+.estimate small {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.metrics strong,
+.estimate strong {
+  display: block;
+  margin-top: 8px;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.estimate {
+  margin-top: 18px;
+  background: linear-gradient(145deg, var(--blue-soft), #fff);
+  border-color: rgba(49, 111, 208, 0.22);
+}
+
+.estimate small {
+  margin-top: 8px;
+}
+
+.task-form {
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) 150px 170px auto;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.kanban {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.lane {
+  min-height: 280px;
+  padding: 14px;
+  border: 1px dashed rgba(102, 115, 128, 0.38);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.lane h3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 12px;
+  font-size: 15px;
+}
+
+.lane-count {
+  display: inline-grid;
+  place-items: center;
+  min-width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: var(--ink);
+  color: #fff;
+  font-size: 12px;
+}
+
+.task-card {
+  padding: 13px;
+  margin-bottom: 10px;
+}
+
+.task-card strong {
+  display: block;
+  margin-bottom: 8px;
+  overflow-wrap: anywhere;
+}
+
+.task-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: var(--blue-soft);
+  color: #21446e;
+  font-size: 11px;
+  font-weight: 850;
+}
+
+.tag.alt {
+  background: var(--coral-soft);
+  color: #7b2e20;
+}
+
+.task-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.task-actions button {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 850;
+  padding: 7px 9px;
+}
+
+.prompt-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+
+.prompt-card {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+}
+
+pre {
+  margin: 0;
+  overflow: auto;
+  border-radius: 8px;
+  background: #111820;
+  color: #f4f8fb;
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.sources {
+  padding-bottom: 96px;
+}
+
+.sources ul {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  list-style: none;
+  padding: 0;
+}
+
+.sources li {
+  min-height: 76px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.sources a {
+  color: var(--blue);
+  font-weight: 850;
+}
+
+@media (max-width: 980px) {
+  .hero,
+  .split,
+  .timeline,
+  .wave-grid,
+  .case-grid,
+  .transfer-panel,
+  .kanban,
+  .prompt-grid,
+  .sources ul {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    min-height: auto;
+  }
+
+  .signal-panel {
+    min-height: 420px;
+  }
+
+  .task-form {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .task-form input {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 680px) {
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px;
+  }
+
+  nav {
+    justify-content: flex-start;
+    gap: 2px;
+    width: 100%;
+  }
+
+  nav a {
+    padding: 8px 7px;
+    font-size: 13px;
+  }
+
+  main {
+    width: calc(100vw - 36px);
+  }
+
+  h1 {
+    max-width: min(100%, 330px);
+    font-size: 34px;
+    line-height: 1.02;
+    word-break: normal;
+  }
+
+  .hero-copy > p:not(.eyebrow),
+  .section-head p {
+    max-width: min(100%, 330px);
+    font-size: 17px;
+  }
+
+  .notice,
+  .guardrail,
+  .implementation-note,
+  .hero-actions {
+    flex-direction: column;
+  }
+
+  .notice span,
+  .guardrail span,
+  .implementation-note span {
+    max-width: min(100%, 330px);
+  }
+
+  .implementation-note strong {
+    white-space: normal;
+  }
+
+  .button {
+    width: 100%;
+    text-align: center;
+  }
+
+  .signal-stats,
+  .controls,
+  .metrics,
+  .task-form {
+    grid-template-columns: 1fr;
+  }
+
+  .pulse-grid {
+    inset: 24px;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .signal-stats {
+    right: 12px;
+    left: 12px;
+    bottom: 12px;
+  }
+}