diff --git a/AGENT.md b/AGENT.md
index c566e62..2c38153 100644
--- a/AGENT.md
+++ b/AGENT.md
@@ -1,9 +1,12 @@
 # AGENT.md
 
 IF task type = research     → load prompts/research.md + RULES.md
-IF task type = implement    → load prompts/implement.md + SPEC.md + CONTRACT.md
+IF task type = design       → load prompts/design.md + SPEC.md
+IF task type = implement    → load prompts/implement.md + SPEC.md + DESIGN.md + CONTRACT.md
 IF task type = bug_find     → load prompts/bug_finder.md + SPEC.md + code
 IF task type = disprove     → load prompts/disprover.md + SPEC.md + BUGS.md
 IF task type = referee      → load prompts/referee.md + SPEC.md + BUGS.md + DISPROVALS.md
+IF task type = orchestrate  → load prompts/orchestrate.md + project structure
+IF task type = compaction   → load prompts/compaction.md
 
 Always start by reading this file to determine mode.
\ No newline at end of file
diff --git a/README.md b/README.md
index 8d963bd..c5828d3 100644
--- a/README.md
+++ b/README.md
@@ -33,13 +33,20 @@ Then run the onboarding prompt:
 
 All work happens through prompts in `~/.agent-framework/prompts/`:
 
-- Research → `prompts/research.md`
+### Core Phases
+- Research → `prompts/research.md` (produces SPEC.md)
+- Design → `prompts/design.md` (produces DESIGN.md) — recommended for greenfield projects
 - Implement → `prompts/implement.md`
+
+### Quality Phases (Optional)
 - Bug finding → `prompts/bug_finder.md`
 - Disprove → `prompts/disprover.md`
 - Referee → `prompts/referee.md`
+
+### Other
 - Onboarding → `prompts/onboarding.md`
 - Compaction → `prompts/compaction.md`
+- Orchestrate → `prompts/orchestrate.md`
 
 See `ONBOARDING.md` for detailed drop-in vs from-scratch scenarios and the full philosophy.
 
diff --git a/prompts/design.md b/prompts/design.md
new file mode 100644
index 0000000..577aafc
--- /dev/null
+++ b/prompts/design.md
@@ -0,0 +1,49 @@
+You are in design mode.
+
+Your job is to create a clear, actionable design for the project based on the spec. Do not write code.
+
+## Read These Files
+
+1. {project}/tasks/{task-name}/SPEC.md
+2. {project}/.agent-framework/RULES.md
+
+## Task
+
+{task-description}
+
+## Output
+
+Produce a file called `DESIGN.md` at {project}/tasks/{task-name}/DESIGN.md containing:
+
+### 1. Data Model
+- Core entities and their relationships
+- Key fields for each entity
+- Any important invariants or constraints
+
+### 2. Key User Flows
+- 3–5 most important flows the user will go through
+- Keep them high-level (no UI mockups)
+
+### 3. Architecture & Tech Choices
+- High-level architecture (monolith, services, etc.)
+- Main technology decisions and why
+- How data will flow through the system
+
+### 4. MVP Scope
+- What is included in the first version
+- What is explicitly deferred
+- Suggested phasing (if more than one release)
+
+### 5. Risks & Unknowns
+- Biggest technical or product risks
+- Areas that need exploration or validation first
+
+### 6. Non-Functional Requirements
+- Performance, security, reliability, or scale considerations (if relevant)
+
+When the design is complete, output "CONTRACT_MET" and stop.
+
+## Rules
+- Stay at the design level. Do not write code or detailed implementation steps.
+- Be specific enough that implementation can proceed with clarity.
+- If something is unclear, state the assumption and move on.
\ No newline at end of file
diff --git a/prompts/orchestrate.md b/prompts/orchestrate.md
new file mode 100644
index 0000000..f6d73f1
--- /dev/null
+++ b/prompts/orchestrate.md
@@ -0,0 +1,43 @@
+You are in orchestration mode.
+
+Your job is to analyze the current state of the project and recommend the next logical phase. You do **not** run any phases yourself.
+
+## Read These Files
+
+1. {project}/.agent-framework/AGENT.md
+2. {project}/.agent-framework/RULES.md
+3. Any existing files under {project}/tasks/
+
+## Task
+
+{task-description}
+
+## Analysis Rules
+
+Examine the tasks/ directory and determine the state of each task folder using these signals:
+
+- No SPEC.md → needs **research**
+- Has SPEC.md but no IMPLEMENTATION.md → needs **implement**
+- Has implementation but no BUG_REPORT.md → can optionally run **bug_find**
+- Has BUG_REPORT.md but no DISPROVALS.md → can run **disprove**
+- Has BUG_REPORT.md + DISPROVALS.md but no VERDICT.md → needs **referee**
+- Has VERDICT.md with PASS → task is complete
+
+## Output Format
+
+For each task, output one of the following recommendations:
+
+**Recommended next action:**
+- Phase: research / implement / bug_find / disprove / referee
+- Exact command to give the agent:
+  > "Research {task-description}"
+  > "Implement the {task-name} task"
+  > "Find bugs in the {task-name} task"
+  > "Disprove the bugs in the {task-name} task"
+  > "Review the {task-name} task"
+
+If everything is complete, say so clearly.
+
+Only recommend one phase at a time. Do not suggest running multiple phases in parallel.
+
+When finished, output "ORCHESTRATION_COMPLETE".
\ No newline at end of file
diff --git a/references/session-starter.md b/references/session-starter.md
new file mode 100644
index 0000000..409cfe9
--- /dev/null
+++ b/references/session-starter.md
@@ -0,0 +1,26 @@
+# Session Starter Template
+
+Copy and paste this at the very beginning of every new agent session (before giving your actual task).
+
+---
+
+Read the following files in order, then wait for my instructions:
+
+1. ~/.agent-framework/AGENT.md (global framework router)
+2. {project}/.agent-framework/AGENT.md (project-level router, if it exists)
+3. {project}/.agent-framework/RULES.md (if it exists)
+
+After reading these files, acknowledge with: "AGENT.md and RULES.md loaded. Ready."
+
+---
+
+## How to Use
+
+1. Start a fresh session with your agent.
+2. Paste the block above (replace `{project}` with the actual path).
+3. Then give your real request, for example:
+   - "What should we do next on this project?"
+   - "Implement the fix-alert-test task"
+   - "Onboard this project to the agent framework"
+
+This guarantees the agent always follows the routing rules in `AGENT.md`.
\ No newline at end of file
diff --git a/system-prompt.md b/system-prompt.md
new file mode 100644
index 0000000..66f7cbb
--- /dev/null
+++ b/system-prompt.md
@@ -0,0 +1,11 @@
+You are working inside the minimal agent framework.
+
+At the very start of every session, you must:
+
+1. Read ~/.agent-framework/AGENT.md (global router)
+2. Read the current project's .agent-framework/AGENT.md (if it exists)
+3. Read the current project's .agent-framework/RULES.md (if it exists)
+
+After reading these files, respond with: "Framework context loaded. Ready for task."
+
+Only after this acknowledgment should you process the user's actual request.
\ No newline at end of file
diff --git a/visualize-3d.html b/visualize-3d.html
new file mode 100644
index 0000000..f324d72
--- /dev/null
+++ b/visualize-3d.html
@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Agent Framework • 3D Sphere</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        #canvas-container { width: 100%; height: 100vh; }
+        .label {
+            position: absolute;
+            color: #a1a1aa;
+            font-size: 11px;
+            pointer-events: none;
+            text-shadow: 0 1px 3px rgba(0,0,0,0.9);
+            font-family: ui-monospace, monospace;
+        }
+    </style>
+</head>
+<body class="bg-zinc-950 text-zinc-200">
+    <div class="absolute top-6 left-6 z-10">
+        <div>
+            <div class="text-2xl font-semibold tracking-tight">Agent Framework</div>
+            <div class="text-xs text-zinc-500">3D Phase Visualization</div>
+        </div>
+    </div>
+
+    <div id="canvas-container"></div>
+
+    <!-- Details Panel -->
+    <div class="absolute top-6 right-6 w-80 bg-zinc-900/90 backdrop-blur border border-zinc-800 rounded-3xl p-6 z-20 hidden" id="details-panel">
+        <div id="details-content"></div>
+    </div>
+
+    <div class="absolute bottom-6 left-6 text-[10px] text-zinc-500 z-10">
+        Drag to rotate • Scroll to zoom • Click nodes
+    </div>
+
+    <script>
+        const phaseData = {
+            "Research": { prompt: "prompts/research.md", outputs: "SPEC.md", description: "Explores requirements and produces a clear specification." },
+            "Design": { prompt: "prompts/design.md", outputs: "DESIGN.md", description: "Produces data models, flows, architecture, and risks." },
+            "Implement": { prompt: "prompts/implement.md", outputs: "Code + tests", description: "Builds the solution using SPEC.md and DESIGN.md." },
+            "Bug Find": { prompt: "prompts/bug_finder.md", outputs: "BUG_REPORT.md", description: "Adversarially discovers bugs and spec deviations." },
+            "Disprove": { prompt: "prompts/disprover.md", outputs: "DISPROVALS.md", description: "Attempts to disprove findings from the bug report." },
+            "Referee": { prompt: "prompts/referee.md", outputs: "VERDICT.md", description: "Judges implementation and compares Bug Finder vs Disprover." },
+            "Onboard": { prompt: "prompts/onboarding.md", outputs: "Framework files", description: "Initializes the agent framework in a project." },
+            "Orchestrate": { prompt: "prompts/orchestrate.md", outputs: "Recommendation", description: "Suggests the next logical phase based on state." },
+            "Compaction": { prompt: "prompts/compaction.md", outputs: "Clean rules", description: "Consolidates and deduplicates rules." }
+        };
+
+        const phases = Object.keys(phaseData);
+        let scene, camera, renderer;
+        let nodes = [];
+        let lines = [];
+        let raycaster, mouse;
+
+        function initThreeJS() {
+            const container = document.getElementById('canvas-container');
+            
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            container.appendChild(renderer.domElement);
+
+            // Sphere
+            const sphereGeometry = new THREE.SphereGeometry(2.4, 64, 64);
+            const sphereMaterial = new THREE.MeshPhongMaterial({
+                color: 0x18181b,
+                wireframe: true,
+                transparent: true,
+                opacity: 0.12
+            });
+            const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
+            scene.add(sphere);
+
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const pointLight = new THREE.PointLight(0xffffff, 0.9);
+            pointLight.position.set(10, 10, 10);
+            scene.add(pointLight);
+
+            camera.position.z = 6.5;
+
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+
+            // Create nodes + connections
+            createNodesOnSphere();
+            createConnections();
+
+            // Events
+            window.addEventListener('resize', onWindowResize);
+            container.addEventListener('click', onClick);
+
+            // Orbit controls (simple)
+            let isDragging = false;
+            let previousMouseX = 0, previousMouseY = 0;
+
+            container.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                previousMouseX = e.clientX;
+                previousMouseY = e.clientY;
+            });
+            window.addEventListener('mouseup', () => isDragging = false);
+
+            container.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const deltaMove = { x: e.clientX - previousMouseX, y: e.clientY - previousMouseY };
+
+                const deltaRotation = new THREE.Quaternion().setFromEuler(
+                    new THREE.Euler(deltaMove.y * 0.004, deltaMove.x * 0.004, 0, 'XYZ')
+                );
+
+                sphere.quaternion.multiplyQuaternions(deltaRotation, sphere.quaternion);
+                
+                nodes.forEach(n => n.position.applyQuaternion(deltaRotation));
+                lines.forEach(line => {
+                    line.geometry.dispose();
+                    const newGeo = new THREE.BufferGeometry().setFromPoints([
+                        line.userData.from.position,
+                        line.userData.to.position
+                    ]);
+                    line.geometry = newGeo;
+                });
+
+                previousMouseX = e.clientX;
+                previousMouseY = e.clientY;
+            });
+
+            container.addEventListener('wheel', (e) => {
+                camera.position.z += e.deltaY * 0.008;
+                camera.position.z = Math.max(3.5, Math.min(11, camera.position.z));
+            });
+
+            animate();
+        }
+
+        function createNodesOnSphere() {
+            const radius = 2.4;
+            const nodeCount = phases.length;
+
+            phases.forEach((phase, i) => {
+                const phi = Math.acos(-1 + (2 * i) / nodeCount);
+                const theta = Math.sqrt(nodeCount * Math.PI) * phi;
+
+                const x = radius * Math.sin(phi) * Math.cos(theta);
+                const y = radius * Math.sin(phi) * Math.sin(theta);
+                const z = radius * Math.cos(phi);
+
+                const geometry = new THREE.SphereGeometry(0.11, 16, 16);
+                const material = new THREE.MeshPhongMaterial({ 
+                    color: 0x3b82f6,
+                    emissive: 0x1e40af
+                });
+                const nodeMesh = new THREE.Mesh(geometry, material);
+                nodeMesh.position.set(x, y, z);
+                nodeMesh.userData = { phase: phase };
+                scene.add(nodeMesh);
+                nodes.push(nodeMesh);
+
+                // Label
+                const label = document.createElement('div');
+                label.className = 'label';
+                label.textContent = phase;
+                document.getElementById('canvas-container').appendChild(label);
+                nodeMesh.userData.label = label;
+            });
+        }
+
+        function createConnections() {
+            const connections = [
+                ["Research", "Design"],
+                ["Design", "Implement"],
+                ["Implement", "Bug Find"],
+                ["Bug Find", "Disprove"],
+                ["Disprove", "Referee"],
+                ["Referee", "Implement"],
+                ["Onboard", "Research"],
+                ["Orchestrate", "Research"],
+                ["Orchestrate", "Design"],
+                ["Orchestrate", "Implement"],
+                ["Orchestrate", "Bug Find"],
+                ["Orchestrate", "Referee"],
+                ["Compaction", "Orchestrate"]
+            ];
+
+            const lineMaterial = new THREE.LineBasicMaterial({ 
+                color: 0x3f3f46, 
+                transparent: true, 
+                opacity: 0.6 
+            });
+
+            connections.forEach(([fromName, toName]) => {
+                const fromNode = nodes.find(n => n.userData.phase === fromName);
+                const toNode = nodes.find(n => n.userData.phase === toName);
+                if (!fromNode || !toNode) return;
+
+                const geometry = new THREE.BufferGeometry().setFromPoints([
+                    fromNode.position,
+                    toNode.position
+                ]);
+                const line = new THREE.Line(geometry, lineMaterial);
+                line.userData = { from: fromNode, to: toNode };
+                scene.add(line);
+                lines.push(line);
+            });
+        }
+
+        function onClick(event) {
+            const rect = renderer.domElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(nodes);
+
+            if (intersects.length > 0) {
+                const phase = intersects[0].object.userData.phase;
+                showDetails(phase);
+            }
+        }
+
+        function showDetails(phase) {
+            const panel = document.getElementById('details-panel');
+            const data = phaseData[phase];
+            
+            panel.classList.remove('hidden');
+            panel.innerHTML = `
+                <div class="flex justify-between items-start mb-4">
+                    <div>
+                        <div class="text-xl font-semibold">${phase}</div>
+                        <div class="text-xs text-blue-400 font-mono mt-1">${data.prompt}</div>
+                    </div>
+                    <button onclick="hideDetails()" class="text-zinc-500 hover:text-white text-xl">×</button>
+                </div>
+                
+                <div class="text-sm leading-relaxed text-zinc-300">${data.description}</div>
+                
+                <div class="mt-6">
+                    <div class="text-xs uppercase tracking-wider text-zinc-500 mb-2">Outputs</div>
+                    <div class="text-sm font-mono bg-zinc-950 px-4 py-2 rounded-2xl border border-zinc-800">${data.outputs}</div>
+                </div>
+            `;
+        }
+
+        function hideDetails() {
+            document.getElementById('details-panel').classList.add('hidden');
+        }
+
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+
+            // Update labels
+            nodes.forEach(node => {
+                if (node.userData.label) {
+                    const vector = node.position.clone();
+                    vector.project(camera);
+                    const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
+                    const y = (-vector.y * 0.5 + 0.5) * window.innerHeight;
+                    node.userData.label.style.left = `${x}px`;
+                    node.userData.label.style.top = `${y}px`;
+                }
+            });
+        }
+
+        function init() {
+            initThreeJS();
+        }
+
+        window.onload = init;
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/visualize.html b/visualize.html
new file mode 100644
index 0000000..a1e9d9e
--- /dev/null
+++ b/visualize.html
@@ -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>
\ No newline at end of file