| const stages = { |
| owner: { |
| kicker: "01 / Human Ownership", |
| title: "Der Mensch setzt Ziel, Risiko und Abbruchlinie.", |
| body: "Agenten arbeiten erst sinnvoll, wenn Ziel, Nicht-Ziel und Human-only Entscheidungen sichtbar sind.", |
| active: 0, |
| }, |
| scope: { |
| kicker: "02 / Scope Boundary", |
| title: "Der Auftrag wird klein genug, dass Erfolg pruefbar ist.", |
| body: "Das Harness trennt Wunsch, Kontext, Nicht-Ziel und erlaubte Aktionen, bevor der Agent arbeitet.", |
| active: 1, |
| }, |
| delegate: { |
| kicker: "03 / Delegation Card", |
| title: "Das Tool bekommt Rolle, Grenze und Artefaktpflicht.", |
| body: "Die Delegation Card ersetzt den diffusen Prompt durch Ziel, Scope, Human Gates und Verifikation.", |
| active: 2, |
| }, |
| verify: { |
| kicker: "04 / Verifier Loop", |
| title: "Done ist erst wahr, wenn Belege danebenliegen.", |
| body: "Tests, Diffs, Dateien, Screenshots oder Reports schlagen die Erfolgserzaehlung des Agenten.", |
| active: 3, |
| }, |
| handoff: { |
| kicker: "05 / Next Action", |
| title: "Am Ende steht eine Entscheidung, kein Rohlog.", |
| body: "Der Mensch sieht, was geaendert wurde, welche Belege existieren, was offen bleibt und was als naechstes passiert.", |
| active: 4, |
| }, |
| }; |
|
|
| const taskData = { |
| docs: { |
| goal: "Baue oder verbessere ein Tutorial-Artefakt.", |
| artifact: "Markdown-Dokumente, Quellenliste, Completion Checklist", |
| verify: "rg-Coverage, Link-Check, git diff --check", |
| }, |
| bug: { |
| goal: "Reproduziere und behebe einen konkreten Fehler.", |
| artifact: "kleiner Diff, fokussierter Test oder Repro-Log", |
| verify: "Fehler reproduziert, Fix ausgefuehrt, Test/Smoke-Check gruen", |
| }, |
| ui: { |
| goal: "Verbessere eine konkrete UI-Ansicht.", |
| artifact: "HTML/CSS/JS-Diff, Screenshot, responsive Check", |
| verify: "Headless Screenshot, mobile/desktop Sichtpruefung, keine Overlaps", |
| }, |
| audit: { |
| goal: "Pruefe ein Repo oder Ergebnis read-only.", |
| artifact: "Audit-Report mit Findings, Belegen und Next Action", |
| verify: "Datei-/Zeilenbelege, keine Schreiboperationen, offene Risiken markiert", |
| }, |
| }; |
|
|
| const toolData = { |
| codex: { |
| name: "Codex", |
| source: "source: official OpenAI docs + local tutorial", |
| role: "Lokaler Coding-Agent fuer Repo-Arbeit, Review, Tests und sichtbare Diffs.", |
| use: "bounded implementation, repo audit, tests, docs", |
| needs: "AGENTS.md, konkrete Aufgabe, Done when, Verifikation", |
| artifact: "Diff, Tests, Verification Report, Next Action", |
| gate: "Scope drift, dependencies, destructive actions, deploy", |
| promptHandle: "Codex arbeitet im aktuellen Repo und liefert Diffs, Checks und Handoff.", |
| }, |
| claude: { |
| name: "Claude Code", |
| source: "source: local HAI notes + Claude Code practice layer", |
| role: "Tiefer Codebase-Arbeiter fuer Planung, Implementierung und Review gegen Repo-Kontext.", |
| use: "komplexe Codebase-Arbeit, Architekturfragen, laengere Debug-Loops", |
| needs: "CLAUDE.md/Repo-Regeln, kleine Tasks, klare Tests, sichtbarer Diff", |
| artifact: "Plan, Patch, Tests, Review Notes", |
| gate: "Engine-Grenzen ehrlich markieren, breite Refactors und Tool-Rechte freigeben lassen", |
| promptHandle: "Claude Code nutzt Repo-Kontext, soll aber mit klarer Human Gate- und Testpflicht arbeiten.", |
| }, |
| hermes: { |
| name: "Hermes", |
| source: "source: local Zustand-Hermes", |
| role: "Control Plane mit Profilen, Skills, Memory, Verifiern und Owner-Schutz.", |
| use: "Projektzustand laden, Profil waehlen, kleine naechste Schritte fuehren", |
| needs: "explizites Profil, Scope, Artefaktpflicht, Verifier oder Decision-Control", |
| artifact: "Owner Packet, Delegation Card, Verifier Report, Resume State", |
| gate: "Samuel entscheidet Produkt, Scope, Architektur, irreversible Freigaben", |
| promptHandle: "Hermes soll als Control Plane arbeiten: Profil waehlen, Briefing bauen, bounded delegieren.", |
| }, |
| openclaw: { |
| name: "OpenClaw", |
| source: "source: local OpenClaw commands + architecture notes", |
| role: "Router/Gateway-System fuer Agenten, Sessions, Devices und komplexe Scout-Build-Verify-Flows.", |
| use: "Frontdoor-Routing, Gateway-Status, Agent-Sessions, komplexe Projektpipeline", |
| needs: "router/hermes/specialist topology, gateway health, session choice, explicit approvals", |
| artifact: "Routing Decision, Session State, Scout-Build-Verify Trace", |
| gate: "gateway/config/devices/auth commands and new specialists need explicit human approval", |
| promptHandle: "OpenClaw soll Routing und Sessions kontrolliert fuehren; komplexe Aufgaben gehen Scout -> Build -> Verify.", |
| }, |
| opencode: { |
| name: "OpenCode", |
| source: "source: local OpenCode tutorials + handoff docs", |
| role: "Schneller Builder und Reality-Check-Agent mit strenger Scope-Anweisung.", |
| use: "one-shot Drafts, Gegenentwurf, schnelle Dateistrukturen, Implementierung", |
| needs: "vollstaendiger Kontext pro Run, Output-Pfad, Nicht-Ziele, Tests", |
| artifact: "kleiner Diff, Risiken, bewusst weggelassene Features", |
| gate: "wenn der erste Run falsch scoped ist: neue Session mit besserem Briefing statt Reparatur-Chat", |
| promptHandle: "OpenCode bekommt einen engen one-shot Auftrag mit Output-Pfad und expliziten Nicht-Zielen.", |
| }, |
| pi: { |
| name: "Pi", |
| source: "source: generic HAI profile; no canonical local tool source found", |
| role: "Persoenlicher Intake- und Denkdialog fuer unstrukturierte menschliche Ausgangslage.", |
| use: "Wunsch klaeren, emotionale/kognitive Lage sortieren, Owner Packet vorbereiten", |
| needs: "keine Writes, keine Done-Claims, klare Uebergabe an Arbeitsagent", |
| artifact: "Problemklassifikation, Human-only Liste, naechste Frage", |
| gate: "Reflexion ist kein Beleg; Umsetzung startet erst in einem anderen bounded Tool", |
| promptHandle: "Pi soll nur klaeren und verdichten, nicht implementieren oder Erfolg behaupten.", |
| }, |
| conductor: { |
| name: "Conductor", |
| source: "source: generic HAI orchestration profile; no canonical local tool source found", |
| role: "Orchestrierungsrolle fuer mehrere Worker, ohne selbst die Ownership zu uebernehmen.", |
| use: "Run-Leitung, Task-Slicing, Worker-Reihenfolge, Handoff und Integration", |
| needs: "ein Lead, getrennte Write Scopes, Stop Rules, gemeinsamer Verifier", |
| artifact: "Run Plan, Worker Contracts, Integration Checklist", |
| gate: "kein Fanout ohne disjunkte Schreibbereiche und klares Integrationsartefakt", |
| promptHandle: "Conductor koordiniert nur bounded Worker und muss Human Gates und Verifier sichtbar halten.", |
| }, |
| }; |
|
|
| const riskData = { |
| low: { |
| label: "bounded", |
| meter: "74%", |
| gate: "Stoppe bei Scope Drift oder fehlenden Belegen.", |
| }, |
| medium: { |
| label: "gated", |
| meter: "58%", |
| gate: "Frage vor Dependencies, breiteren Datei-Aenderungen und unklaren Tests.", |
| }, |
| high: { |
| label: "human gate required", |
| meter: "34%", |
| gate: "Keine Ausfuehrung ohne menschliche Freigabe fuer Risiko, Auth, Deploy oder destruktive Aktionen.", |
| }, |
| }; |
|
|
| const canvas = document.querySelector("#harnessCanvas"); |
| const ctx = canvas.getContext("2d"); |
| const stageButtons = Array.from(document.querySelectorAll("[data-stage]")); |
| const flowNodes = Array.from(document.querySelectorAll(".flow-node")); |
| const stageKicker = document.querySelector("#stageKicker"); |
| const stageTitle = document.querySelector("#stageTitle"); |
| const stageBody = document.querySelector("#stageBody"); |
| const promptOutput = document.querySelector("#promptOutput"); |
| const readinessMeter = document.querySelector("#readinessMeter"); |
| const readinessLabel = document.querySelector("#readinessLabel"); |
| const copyPrompt = document.querySelector("#copyPrompt"); |
| const toolSelect = document.querySelector("#toolSelect"); |
| const toolTabs = Array.from(document.querySelectorAll("[data-tool]")); |
| const toolSource = document.querySelector("#toolSource"); |
| const toolName = document.querySelector("#toolName"); |
| const toolRole = document.querySelector("#toolRole"); |
| const toolUse = document.querySelector("#toolUse"); |
| const toolNeeds = document.querySelector("#toolNeeds"); |
| const toolArtifact = document.querySelector("#toolArtifact"); |
| const toolGate = document.querySelector("#toolGate"); |
| const gateInputs = Array.from(document.querySelectorAll(".gate-list input")); |
| const gateVerdict = document.querySelector(".gate-verdict"); |
| const gateMode = document.querySelector("#gateMode"); |
| const gateTitle = document.querySelector("#gateTitle"); |
| const gateBody = document.querySelector("#gateBody"); |
|
|
| let currentStage = "owner"; |
| let currentTool = "codex"; |
| let currentTask = "docs"; |
| let currentRisk = "low"; |
| let pointer = { x: 0.72, y: 0.38 }; |
|
|
| function setStage(stageId) { |
| const stage = stages[stageId]; |
| if (!stage) return; |
| currentStage = stageId; |
| stageKicker.textContent = stage.kicker; |
| stageTitle.textContent = stage.title; |
| stageBody.textContent = stage.body; |
|
|
| stageButtons.forEach((button) => { |
| button.classList.toggle("is-active", button.dataset.stage === stageId); |
| }); |
|
|
| flowNodes.forEach((node) => { |
| node.classList.toggle("is-active", node.dataset.stage === stageId); |
| }); |
| } |
|
|
| function buildPrompt() { |
| const task = taskData[currentTask]; |
| const risk = riskData[currentRisk]; |
| const tool = toolData[currentTool]; |
| readinessMeter.style.width = risk.meter; |
| readinessLabel.textContent = risk.label; |
| promptOutput.textContent = [ |
| "Tool:", |
| tool.name, |
| "", |
| "Ziel:", |
| task.goal, |
| "", |
| "Tool-Rolle:", |
| "- " + tool.promptHandle, |
| "", |
| "Kontext:", |
| "- Nutze das bestehende Repo und lies betroffene Dateien zuerst.", |
| "- Behandle Chat als Steuerpult, nicht als Arbeitsflaeche.", |
| "- Tool braucht: " + tool.needs + ".", |
| "", |
| "Scope:", |
| "- Arbeite nur an dieser Aufgabe.", |
| "- Erzeuge ein pruefbares Artefakt: " + task.artifact + ".", |
| "- Tool-Artefakt: " + tool.artifact + ".", |
| "", |
| "Nicht tun:", |
| "- keine Commits ohne Freigabe", |
| "- keine neuen Dependencies ohne Gate", |
| "- keine Scope-Erweiterung ohne Rueckfrage", |
| "", |
| "Human Gates:", |
| "- " + tool.gate + ".", |
| "- " + risk.gate, |
| "- Stoppe bei destruktiven Aktionen, Secrets/Auth/Deploy oder unklarem Arbeitsordner.", |
| "", |
| "Verifikation:", |
| "- " + task.verify, |
| "- Liefere einen Verification Report mit Belegen.", |
| "", |
| "Abschluss:", |
| "- Geaendert", |
| "- Belege", |
| "- Checks", |
| "- Offen", |
| "- Naechste Entscheidung", |
| ].join("\n"); |
| } |
|
|
| function setTool(toolId) { |
| const tool = toolData[toolId]; |
| if (!tool) return; |
| currentTool = toolId; |
| toolSource.textContent = tool.source; |
| toolName.textContent = tool.name; |
| toolRole.textContent = tool.role; |
| toolUse.textContent = tool.use; |
| toolNeeds.textContent = tool.needs; |
| toolArtifact.textContent = tool.artifact; |
| toolGate.textContent = tool.gate; |
| toolSelect.value = toolId; |
| toolTabs.forEach((tab) => { |
| tab.classList.toggle("is-active", tab.dataset.tool === toolId); |
| }); |
| buildPrompt(); |
| } |
|
|
| function updateGate() { |
| const active = gateInputs.filter((input) => input.checked).map((input) => input.value); |
| const hardStop = active.some((value) => ["dependency", "destructive", "secret", "scope"].includes(value)); |
| gateVerdict.classList.toggle("is-stop", hardStop); |
|
|
| if (hardStop) { |
| gateMode.textContent = "STOP"; |
| gateTitle.textContent = "Erst Human Gate, dann Codex."; |
| gateBody.textContent = "Mindestens ein harter Gate-Faktor ist aktiv. Der Mensch entscheidet Scope, Risiko oder Freigabe, bevor der Agent weiterarbeitet."; |
| } else if (active.includes("unknown")) { |
| gateMode.textContent = "WARN"; |
| gateTitle.textContent = "Der Agent darf nur diagnostizieren."; |
| gateBody.textContent = "Unklare Tests oder unbekannte Fehler brauchen erst Reproduktion und Beleg, nicht direkt einen Fix."; |
| } else { |
| gateMode.textContent = "RUN"; |
| gateTitle.textContent = "Das Tool darf bounded arbeiten."; |
| gateBody.textContent = "Kein harter Human Gate aktiv. Der Auftrag braucht trotzdem Artefaktpflicht und Verifikation."; |
| } |
| } |
|
|
| function resizeCanvas() { |
| const ratio = window.devicePixelRatio || 1; |
| const rect = canvas.getBoundingClientRect(); |
| canvas.width = Math.max(1, Math.floor(rect.width * ratio)); |
| canvas.height = Math.max(1, Math.floor(rect.height * ratio)); |
| ctx.setTransform(ratio, 0, 0, ratio, 0, 0); |
| } |
|
|
| function drawCanvas(time) { |
| const rect = canvas.getBoundingClientRect(); |
| const width = rect.width; |
| const height = rect.height; |
| ctx.clearRect(0, 0, width, height); |
|
|
| ctx.fillStyle = "#0d100c"; |
| ctx.fillRect(0, 0, width, height); |
|
|
| const grid = 46; |
| ctx.strokeStyle = "rgba(238, 228, 207, 0.05)"; |
| ctx.lineWidth = 1; |
| for (let x = -grid; x < width + grid; x += grid) { |
| ctx.beginPath(); |
| ctx.moveTo(x + ((time / 80) % grid), 0); |
| ctx.lineTo(x + ((time / 80) % grid), height); |
| ctx.stroke(); |
| } |
| for (let y = 0; y < height; y += grid) { |
| ctx.beginPath(); |
| ctx.moveTo(0, y); |
| ctx.lineTo(width, y); |
| ctx.stroke(); |
| } |
|
|
| const nodes = [ |
| { label: "OWNER", x: 0.62, y: 0.24, color: "#a4d65e" }, |
| { label: "SCOPE", x: 0.78, y: 0.36, color: "#4fa997" }, |
| { label: toolData[currentTool].name.toUpperCase().slice(0, 9), x: 0.68, y: 0.54, color: "#547aa5" }, |
| { label: "VERIFY", x: 0.84, y: 0.66, color: "#c76b42" }, |
| { label: "NEXT", x: 0.55, y: 0.72, color: "#9b82c7" }, |
| ]; |
|
|
| const activeIndex = stages[currentStage].active; |
|
|
| ctx.lineWidth = 2; |
| for (let i = 0; i < nodes.length - 1; i += 1) { |
| const from = nodes[i]; |
| const to = nodes[i + 1]; |
| const fx = from.x * width; |
| const fy = from.y * height; |
| const tx = to.x * width; |
| const ty = to.y * height; |
| ctx.strokeStyle = i < activeIndex ? "rgba(164, 214, 94, 0.7)" : "rgba(238, 228, 207, 0.18)"; |
| ctx.beginPath(); |
| ctx.moveTo(fx, fy); |
| ctx.lineTo((fx + tx) / 2, fy); |
| ctx.lineTo((fx + tx) / 2, ty); |
| ctx.lineTo(tx, ty); |
| ctx.stroke(); |
| } |
|
|
| nodes.forEach((node, index) => { |
| const x = node.x * width + (pointer.x - 0.5) * 16; |
| const y = node.y * height + (pointer.y - 0.5) * 16; |
| const active = index === activeIndex; |
| const size = active ? 88 : 72; |
|
|
| ctx.save(); |
| ctx.translate(x, y); |
| ctx.rotate(Math.PI / 4); |
| ctx.fillStyle = active ? node.color : "rgba(238, 228, 207, 0.08)"; |
| ctx.strokeStyle = active ? "rgba(255,255,255,0.62)" : "rgba(238, 228, 207, 0.22)"; |
| ctx.lineWidth = active ? 2 : 1; |
| ctx.fillRect(-size / 2, -size / 2, size, size); |
| ctx.strokeRect(-size / 2, -size / 2, size, size); |
| ctx.restore(); |
|
|
| ctx.fillStyle = active ? "#0d100c" : "rgba(238, 228, 207, 0.72)"; |
| ctx.font = "12px IBM Plex Mono, Consolas, monospace"; |
| ctx.textAlign = "center"; |
| ctx.fillText(node.label, x, y + 4); |
| }); |
|
|
| requestAnimationFrame(drawCanvas); |
| } |
|
|
| stageButtons.forEach((button) => { |
| button.addEventListener("click", () => setStage(button.dataset.stage)); |
| }); |
|
|
| toolTabs.forEach((button) => { |
| button.addEventListener("click", () => setTool(button.dataset.tool)); |
| }); |
|
|
| toolSelect.addEventListener("change", () => setTool(toolSelect.value)); |
|
|
| document.querySelectorAll("[data-task]").forEach((button) => { |
| button.addEventListener("click", () => { |
| currentTask = button.dataset.task; |
| document.querySelectorAll("[data-task]").forEach((item) => item.classList.toggle("is-active", item === button)); |
| buildPrompt(); |
| }); |
| }); |
|
|
| document.querySelectorAll("[data-risk]").forEach((button) => { |
| button.addEventListener("click", () => { |
| currentRisk = button.dataset.risk; |
| document.querySelectorAll("[data-risk]").forEach((item) => item.classList.toggle("is-active", item === button)); |
| buildPrompt(); |
| }); |
| }); |
|
|
| copyPrompt.addEventListener("click", async () => { |
| try { |
| await navigator.clipboard.writeText(promptOutput.textContent); |
| copyPrompt.textContent = "Copied"; |
| setTimeout(() => { |
| copyPrompt.textContent = "Copy"; |
| }, 1200); |
| } catch { |
| copyPrompt.textContent = "Select"; |
| setTimeout(() => { |
| copyPrompt.textContent = "Copy"; |
| }, 1200); |
| } |
| }); |
|
|
| gateInputs.forEach((input) => input.addEventListener("change", updateGate)); |
|
|
| document.querySelectorAll(".run-step").forEach((button) => { |
| button.addEventListener("click", () => { |
| const detail = button.nextElementSibling; |
| const open = button.classList.contains("is-open"); |
| document.querySelectorAll(".run-step").forEach((item) => item.classList.remove("is-open")); |
| document.querySelectorAll(".run-detail").forEach((item) => item.classList.remove("is-open")); |
| if (!open) { |
| button.classList.add("is-open"); |
| detail.classList.add("is-open"); |
| } |
| }); |
| }); |
|
|
| window.addEventListener("resize", resizeCanvas); |
| window.addEventListener("pointermove", (event) => { |
| pointer = { |
| x: event.clientX / Math.max(1, window.innerWidth), |
| y: event.clientY / Math.max(1, window.innerHeight), |
| }; |
| }); |
|
|
| resizeCanvas(); |
| setStage("owner"); |
| setTool("codex"); |
| updateGate(); |
| requestAnimationFrame(drawCanvas); |
|
|
