Add design phase + 3D visualization + orchestration improvements
This commit is contained in:
+216
@@ -0,0 +1,216 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user