216 lines
8.4 KiB
HTML
216 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agent Framework • Routes</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
|
<style>
|
|
.mermaid { font-family: ui-sans-serif, system-ui, sans-serif; }
|
|
.node { cursor: pointer; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-zinc-950 text-zinc-200">
|
|
<div class="max-w-7xl mx-auto p-8">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-semibold tracking-tight">Agent Framework</h1>
|
|
<p class="text-zinc-400 mt-1">Phase relationships and routing</p>
|
|
</div>
|
|
<div class="text-xs px-3 py-1.5 bg-zinc-900 rounded-full border border-zinc-800">~/.agent-framework</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
|
|
<!-- Graph -->
|
|
<div class="lg:col-span-8 bg-zinc-900 rounded-3xl p-8 border border-zinc-800">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="text-sm font-medium text-zinc-400">Phase Graph</div>
|
|
<div class="text-[10px] text-zinc-500">Click any node for details</div>
|
|
</div>
|
|
<div id="mermaid-diagram" class="overflow-auto"></div>
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<div class="lg:col-span-4 bg-zinc-900 rounded-3xl p-8 border border-zinc-800">
|
|
<div class="text-sm font-medium text-zinc-400 mb-4">Phase Details</div>
|
|
<div id="details-panel">
|
|
<div class="text-zinc-500 text-sm">Select a phase to view its prompt, outputs, and dependencies.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const phaseData = {
|
|
"Research": {
|
|
prompt: "prompts/research.md",
|
|
outputs: "SPEC.md",
|
|
description: "Explores requirements and produces a clear specification.",
|
|
dependsOn: []
|
|
},
|
|
"Design": {
|
|
prompt: "prompts/design.md",
|
|
outputs: "DESIGN.md",
|
|
description: "Produces data models, user flows, architecture, MVP scope, and risks.",
|
|
dependsOn: ["SPEC.md"]
|
|
},
|
|
"Implement": {
|
|
prompt: "prompts/implement.md",
|
|
outputs: "Code + tests",
|
|
description: "Builds the solution using SPEC.md and DESIGN.md.",
|
|
dependsOn: ["SPEC.md", "DESIGN.md"]
|
|
},
|
|
"Bug Find": {
|
|
prompt: "prompts/bug_finder.md",
|
|
outputs: "BUG_REPORT.md",
|
|
description: "Adversarially discovers bugs and spec deviations.",
|
|
dependsOn: ["SPEC.md", "IMPLEMENTATION.md"]
|
|
},
|
|
"Disprove": {
|
|
prompt: "prompts/disprover.md",
|
|
outputs: "DISPROVALS.md",
|
|
description: "Attempts to disprove findings from the bug report.",
|
|
dependsOn: ["BUG_REPORT.md"]
|
|
},
|
|
"Referee": {
|
|
prompt: "prompts/referee.md",
|
|
outputs: "VERDICT.md",
|
|
description: "Judges implementation quality and compares Bug Finder vs Disprover.",
|
|
dependsOn: ["SPEC.md", "BUG_REPORT.md", "DISPROVALS.md"]
|
|
},
|
|
"Onboard": {
|
|
prompt: "prompts/onboarding.md",
|
|
outputs: "Framework files + report",
|
|
description: "Initializes the agent framework in a new or existing project.",
|
|
dependsOn: []
|
|
},
|
|
"Orchestrate": {
|
|
prompt: "prompts/orchestrate.md",
|
|
outputs: "Next phase recommendation",
|
|
description: "Analyzes current state and suggests the logical next phase.",
|
|
dependsOn: ["All task artifacts"]
|
|
},
|
|
"Compaction": {
|
|
prompt: "prompts/compaction.md",
|
|
outputs: "Consolidated rules",
|
|
description: "Cleans up and deduplicates rules and routing logic.",
|
|
dependsOn: ["RULES.md", "AGENT.md"]
|
|
}
|
|
};
|
|
|
|
const diagram = `
|
|
graph TD
|
|
Research --> Design
|
|
Design --> Implement
|
|
|
|
Implement --> BugFind[Bug Find]
|
|
BugFind --> Disprove
|
|
Disprove --> Referee
|
|
|
|
Referee -->|pass| Implement
|
|
Referee -->|fail| BugFind
|
|
|
|
Onboard --> Research
|
|
Orchestrate -.-> Research
|
|
Orchestrate -.-> Design
|
|
Orchestrate -.-> Implement
|
|
Orchestrate -.-> BugFind
|
|
Orchestrate -.-> Referee
|
|
|
|
Compaction -.-> Orchestrate
|
|
|
|
classDef core fill:#1e40af,stroke:#3b82f6,color:#fff
|
|
classDef quality fill:#854d0e,stroke:#ca8a04,color:#fff
|
|
classDef meta fill:#334155,stroke:#64748b,color:#fff
|
|
|
|
class Research,Design,Implement core
|
|
class BugFind,Disprove,Referee quality
|
|
class Onboard,Orchestrate,Compaction meta
|
|
`;
|
|
|
|
function renderDiagram() {
|
|
const container = document.getElementById('mermaid-diagram');
|
|
container.innerHTML = `<pre class="mermaid">${diagram}</pre>`;
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'dark',
|
|
flowchart: { curve: 'basis', padding: 20 }
|
|
});
|
|
|
|
mermaid.run().then(() => {
|
|
attachClickHandlers();
|
|
});
|
|
}
|
|
|
|
function attachClickHandlers() {
|
|
const nodes = document.querySelectorAll('#mermaid-diagram .node');
|
|
|
|
nodes.forEach(node => {
|
|
let label = node.textContent.trim();
|
|
// Handle Mermaid's internal node IDs
|
|
if (label.includes('BugFind')) label = 'Bug Find';
|
|
if (!phaseData[label]) return;
|
|
|
|
node.style.cursor = 'pointer';
|
|
node.addEventListener('click', () => showDetails(label));
|
|
});
|
|
}
|
|
|
|
function showDetails(phase) {
|
|
const panel = document.getElementById('details-panel');
|
|
const data = phaseData[phase];
|
|
if (!data) return;
|
|
|
|
let html = `
|
|
<div>
|
|
<div class="text-xl font-semibold text-white">${phase}</div>
|
|
<div class="text-xs text-zinc-500 mt-1 font-mono">${data.prompt}</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="text-[10px] uppercase tracking-[1px] text-zinc-500 mb-2">Description</div>
|
|
<div class="text-sm leading-relaxed">${data.description}</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<div class="text-[10px] uppercase tracking-[1px] text-zinc-500 mb-2">Outputs</div>
|
|
<div class="inline-block text-sm font-mono bg-zinc-950 border border-zinc-800 px-4 py-2 rounded-xl">${data.outputs}</div>
|
|
</div>
|
|
`;
|
|
|
|
if (data.dependsOn.length > 0) {
|
|
html += `
|
|
<div class="mt-6">
|
|
<div class="text-[10px] uppercase tracking-[1px] text-zinc-500 mb-2">Depends On</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
${data.dependsOn.map(f =>
|
|
`<span class="text-xs px-3 py-1 bg-zinc-950 border border-zinc-800 rounded-full">${f}</span>`
|
|
).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
panel.innerHTML = html;
|
|
}
|
|
|
|
function init() {
|
|
renderDiagram();
|
|
|
|
// Show Research by default after a short delay
|
|
setTimeout(() => {
|
|
const panel = document.getElementById('details-panel');
|
|
if (panel.innerHTML.includes('Select a phase')) {
|
|
showDetails('Research');
|
|
}
|
|
}, 900);
|
|
}
|
|
|
|
window.onload = init;
|
|
</script>
|
|
</body>
|
|
</html> |