index.html

<!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>