project-iris 0.0.1

package/src/iris_bundle/frameworks/iris-core/docs.iris.md/getting-started/vscode-extension.mdx

@@ -0,0 +1,180 @@
+---
+title: VS Code Extension
+description: Track your AI-DLC progress with the specsmd sidebar extension
+---
+
+## Overview
+
+The specsmd VS Code extension provides a visual dashboard for tracking your AI-DLC development progress. Monitor bolts, browse specs, and see project metrics—all from your IDE sidebar.
+
+<img
+  src="/images/extension-preview.png"
+  alt="VS Code Extension Preview"
+  style={{ borderRadius: '8px', marginBottom: '16px' }}
+/>
+
+<Info>
+  Works with VS Code-based IDEs including [Cursor](https://cursor.sh), [Google Antigravity](https://antigravity.google), [Windsurf](https://codeium.com/windsurf), [GitHub Codespaces](https://github.com/features/codespaces), [Gitpod](https://gitpod.io), and [Amazon Kiro](https://kiro.dev).
+</Info>
+
+<Warning>
+  **Google IDX is not supported.** While IDX uses Monaco (VS Code's editor), it has a different extension architecture and uses the Open VSX registry instead of the VS Code Marketplace. Many VS Code extensions, including specsmd, don't work or behave differently in IDX.
+</Warning>
+
+## Installation
+
+<Tabs>
+  <Tab title="VS Code Marketplace">
+    Install directly from the marketplace:
+
+    1. Open VS Code (or Cursor, Windsurf, etc.)
+    2. Go to Extensions (`Cmd+Shift+X` / `Ctrl+Shift+X`)
+    3. Search for "specsmd"
+    4. Click **Install**
+
+    Or install via command line:
+    ```bash
+    code --install-extension fabriqaai.specsmd
+    ```
+
+    <Card
+      title="View on Marketplace"
+      icon="microsoft"
+      href="https://marketplace.visualstudio.com/items?itemName=fabriqaai.specsmd"
+    >
+      Install from the official VS Code Marketplace
+    </Card>
+  </Tab>
+  <Tab title="Manual Install (VSIX)">
+    Download and install the VSIX file manually:
+
+    1. Go to [GitHub Releases](https://github.com/fabriqaai/specs.md/releases)
+    2. Download the latest `.vsix` file
+    3. In VS Code, open Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`)
+    4. Run "Extensions: Install from VSIX..."
+    5. Select the downloaded file
+
+    <Card
+      title="GitHub Releases"
+      icon="github"
+      href="https://github.com/fabriqaai/specs.md/releases"
+    >
+      Download VSIX for manual installation
+    </Card>
+  </Tab>
+</Tabs>
+
+## Features
+
+The extension provides three main views:
+
+### Bolts Tab
+
+Track your bolt execution progress in real-time.
+
+<Frame>
+  <img src="/images/extension-gallery/bolts.jpeg" alt="Bolts Tab" style={{ borderRadius: '8px' }} />
+</Frame>
+
+<AccordionGroup>
+  <Accordion title="Current Focus">
+    Shows active bolts being worked on with:
+    - Bolt name and type (DDD, Simple)
+    - Current stage progress
+    - Stage pipeline with status indicators
+    - Stories list with completion status
+  </Accordion>
+  <Accordion title="Up Next Queue">
+    Shows pending bolts ready to be started:
+    - Unblocked bolts first (higher priority)
+    - Blocked bolts with dependency info
+    - Quick start button for each bolt
+  </Accordion>
+  <Accordion title="Recent Activity">
+    Timeline of bolt and stage completions:
+    - Filterable by All, Stages, or Bolts
+    - Relative timestamps
+    - Click to navigate to files
+  </Accordion>
+</AccordionGroup>
+
+### Specs Tab
+
+Browse your project specifications hierarchically.
+
+<Frame>
+  <img src="/images/extension-gallery/specs.jpeg" alt="Specs Tab" style={{ borderRadius: '8px' }} />
+</Frame>
+
+- **Intents** - High-level goals with progress indicators
+- **Units** - Cohesive work elements within intents
+- **Stories** - Individual user stories with status
+
+Click any item to open its markdown file.
+
+### Overview Tab
+
+High-level project metrics and quick actions.
+
+<Frame>
+  <img src="/images/extension-gallery/overview.jpeg" alt="Overview Tab" style={{ borderRadius: '8px' }} />
+</Frame>
+
+- **Progress** - Overall completion percentage
+- **Stats** - Active, queued, done, and blocked bolts
+- **Suggested Actions** - AI-recommended next steps
+- **Standards** - Quick access to project standards
+
+## Activation
+
+The extension automatically activates when it detects:
+- A `memory-bank/` folder in your workspace
+- A `.specsmd/` folder in your workspace
+
+<Note>
+  Make sure you've run `npx specsmd@latest install` first to set up your project structure.
+</Note>
+
+## Refreshing Data
+
+The extension watches your memory-bank files for changes. To manually refresh:
+- Click the refresh icon in the sidebar header
+- Or use Command Palette: "specsmd: Refresh"
+
+## Troubleshooting
+
+<AccordionGroup>
+  <Accordion title="Extension not showing in sidebar">
+    Ensure your workspace has a `memory-bank/` or `.specsmd/` folder. The extension only activates when these are present.
+
+    ```bash
+    # Initialize specs.md first
+    npx specsmd@latest install
+    ```
+  </Accordion>
+  <Accordion title="Data not updating">
+    Click the refresh icon in the sidebar header, or check that your memory-bank files are saved.
+  </Accordion>
+  <Accordion title="Extension not working in Cursor/Windsurf">
+    The extension is compatible with VS Code-based IDEs. Make sure you're installing from the VS Code Marketplace or using a compatible VSIX.
+  </Accordion>
+</AccordionGroup>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card
+    title="Quick Start"
+    icon="rocket"
+    href="/getting-started/quick-start"
+  >
+    Initialize your project and create your first Intent
+  </Card>
+  <Card
+    title="Core Concepts"
+    icon="cube"
+    href="/core-concepts/bolts"
+  >
+    Learn about Bolts and how to track them
+  </Card>
+</CardGroup>

package/src/iris_bundle/frameworks/iris-core/docs.iris.md/guides/bolt-types.mdx

@@ -0,0 +1,182 @@
+---
+title: Choosing Bolt Types
+description: A practical guide to selecting the right bolt type for your work
+---
+
+## Overview
+
+The AI-DLC flow in specs.md provides two bolt types, each optimized for different types of work. Choosing the right bolt type ensures you have the appropriate level of rigor and structure for your task.
+
+```mermaid
+flowchart LR
+    subgraph DDD[DDD Construction]
+        D1[Complex domain logic]
+        D2[Business rules]
+        D3[5 stages - Most rigorous]
+    end
+
+    subgraph Simple[Simple Construction]
+        S1[UI, integrations]
+        S2[Utilities, CRUD]
+        S3[3 stages - Lightweight]
+    end
+
+    style DDD fill:#8B5CF6,stroke:#7C3AED,color:#fff
+    style Simple fill:#34D399,stroke:#10B981,color:#fff
+```
+
+## Quick Decision Guide
+
+<Info>
+  The Inception Agent automatically selects the appropriate bolt type based on your requirements. If you disagree with its choice, you can change it during the human checkpoint review.
+</Info>
+
+<Steps>
+  <Step title="Does it involve complex business logic or domain rules?">
+    **Yes** → Use **DDD Construction Bolt**
+
+    **No** → Continue to next question
+  </Step>
+  <Step title="Is it UI, integration, utility, or straightforward CRUD?">
+    **Yes** → Use **Simple Construction Bolt**
+  </Step>
+</Steps>
+
+---
+
+## DDD Construction Bolt
+
+<Card title="When to Use" icon="bullseye">
+  Complex domain logic requiring careful modeling and design decisions.
+</Card>
+
+### Best For
+
+- Core business logic with complex rules
+- Domain models with aggregates, entities, and value objects
+- Services that encode business knowledge
+- Features where incorrect logic has significant consequences
+- Bounded contexts with rich domain models
+
+### Stages
+
+| Stage | Purpose | Output |
+|-------|---------|--------|
+| **1. Domain Model** | Model business logic using DDD principles | Domain model document |
+| **2. Technical Design** | Apply patterns, define interfaces | Technical design document |
+| **3. ADR Analysis** | Document significant decisions | Architecture Decision Record |
+| **4. Implement** | Generate production code | Implementation |
+| **5. Test** | Verify correctness | Test suite |
+
+### Example Use Cases
+
+<AccordionGroup>
+  <Accordion title="E-commerce Order Processing">
+    Orders involve complex state transitions, pricing rules, inventory checks, and payment processing. DDD helps model these business rules explicitly.
+  </Accordion>
+  <Accordion title="Financial Calculations">
+    Interest calculations, fee structures, and compliance rules require careful domain modeling to ensure correctness.
+  </Accordion>
+  <Accordion title="Booking Systems">
+    Availability rules, conflict detection, and reservation logic benefit from explicit domain modeling.
+  </Accordion>
+  <Accordion title="Workflow Engines">
+    State machines, transition rules, and approval chains require careful design.
+  </Accordion>
+</AccordionGroup>
+
+---
+
+## Simple Construction Bolt
+
+<Card title="When to Use" icon="feather">
+  Straightforward implementations that don't require extensive domain modeling.
+</Card>
+
+### Best For
+
+- Frontend pages and components
+- Simple CRUD endpoints
+- External API integrations
+- Utilities and helper modules
+- CLI commands and scripts
+- Configuration and setup code
+
+### Stages
+
+| Stage | Purpose | Output |
+|-------|---------|--------|
+| **1. Plan** | Define what to build | `implementation-plan.md` |
+| **2. Implement** | Write the code | Source code + `implementation-walkthrough.md` |
+| **3. Test** | Verify the implementation | Tests + `test-walkthrough.md` |
+
+### Example Use Cases
+
+<AccordionGroup>
+  <Accordion title="User Profile Page">
+    A React component displaying user information with edit capabilities. Clear requirements, no complex business logic.
+  </Accordion>
+  <Accordion title="REST API Integration">
+    Connecting to a third-party API with well-documented endpoints. Focus on correct integration, not domain modeling.
+  </Accordion>
+  <Accordion title="Admin Dashboard">
+    Data display and basic filtering. CRUD operations with straightforward UI.
+  </Accordion>
+  <Accordion title="CLI Tool">
+    A command-line utility for common operations. Clear inputs and outputs.
+  </Accordion>
+</AccordionGroup>
+
+---
+
+## Comparison Table
+
+| Aspect | DDD Construction | Simple Construction |
+|--------|------------------|---------------------|
+| **Stages** | 5 | 3 |
+| **Duration** | Hours to days | Hours |
+| **Documentation** | Extensive | Light |
+| **Design Rigor** | High | Low |
+| **Output** | Production code + artifacts | Production code |
+| **Human Reviews** | 5 checkpoint reviews | 3 checkpoint reviews |
+
+## Common Mistakes
+
+<Warning>
+  Choosing the wrong bolt type leads to either over-engineering simple tasks or under-designing complex ones.
+</Warning>
+
+### Over-Engineering (DDD for Simple Tasks)
+
+**Symptom**: Using DDD Construction for a simple settings page.
+
+**Problem**: Excessive ceremony for straightforward work. Domain modeling for CRUD operations wastes time without adding value.
+
+**Solution**: Use Simple Construction for UI, utilities, and integrations.
+
+### Under-Engineering (Simple for Complex Tasks)
+
+**Symptom**: Using Simple Construction for complex pricing logic.
+
+**Problem**: Skipping domain modeling leads to implicit business rules scattered in code. Bugs emerge as edge cases are missed.
+
+**Solution**: Use DDD Construction when business logic is non-trivial.
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card
+    title="Bolts Overview"
+    icon="arrow-right"
+    href="/core-concepts/bolts"
+  >
+    Core concepts and bolt mechanics
+  </Card>
+  <Card
+    title="Construction Agent"
+    icon="hammer"
+    href="/agents/construction-agent"
+  >
+    Learn how the agent executes bolts
+  </Card>
+</CardGroup>

package/src/iris_bundle/frameworks/iris-core/docs.iris.md/images/hero-dark.svg

@@ -0,0 +1,129 @@
+<svg width="800" height="420" viewBox="0 0 800 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="800" height="420" fill="#0F172A"/>
+
+  <!-- Title -->
+  <text x="400" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="#F8FAFC" text-anchor="middle">specs.md Framework</text>
+  <text x="400" y="55" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#94A3B8" text-anchor="middle">Spec-Driven AI Development with Pluggable Flows</text>
+
+  <!-- Framework Box -->
+  <g transform="translate(50, 75)">
+    <!-- Main framework container -->
+    <rect width="700" height="310" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2"/>
+    <rect width="700" height="40" rx="16" fill="#0F172A"/>
+    <rect x="0" y="28" width="700" height="12" fill="#0F172A"/>
+    <text x="350" y="26" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="#F8FAFC" text-anchor="middle">specs.md Framework - Pluggable Flows</text>
+
+    <!-- AI-DLC Flow (Active) -->
+    <g transform="translate(20, 55)">
+      <rect width="440" height="235" rx="10" fill="#052E16" stroke="#22C55E" stroke-width="2"/>
+      <rect width="440" height="32" rx="10" fill="#22C55E"/>
+      <rect x="0" y="22" width="440" height="10" fill="#22C55E"/>
+      <text x="220" y="22" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">AI-DLC Flow (First Implemented)</text>
+
+      <!-- Three phases row -->
+      <g transform="translate(15, 45)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#86EFAC" text-anchor="middle">PHASES</text>
+        <g transform="translate(0, 20)">
+          <rect width="130" height="28" rx="4" fill="#818CF8"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Inception</text>
+        </g>
+        <g transform="translate(140, 20)">
+          <rect width="130" height="28" rx="4" fill="#34D399"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Construction</text>
+        </g>
+        <g transform="translate(280, 20)">
+          <rect width="130" height="28" rx="4" fill="#FBBF24"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Operations</text>
+        </g>
+      </g>
+
+      <!-- Core components -->
+      <g transform="translate(15, 105)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#86EFAC" text-anchor="middle">CORE COMPONENTS</text>
+        <g transform="translate(0, 20)">
+          <rect width="80" height="28" rx="4" fill="#0C4A6E" stroke="#0EA5E9"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#7DD3FC" text-anchor="middle">Memory Bank</text>
+        </g>
+        <g transform="translate(85, 20)">
+          <rect width="80" height="28" rx="4" fill="#0C4A6E" stroke="#0EA5E9"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#7DD3FC" text-anchor="middle">Standards</text>
+        </g>
+        <g transform="translate(170, 20)">
+          <rect width="80" height="28" rx="4" fill="#0C4A6E" stroke="#0EA5E9"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#7DD3FC" text-anchor="middle">Agent System</text>
+        </g>
+        <g transform="translate(255, 20)">
+          <rect width="75" height="28" rx="4" fill="#0C4A6E" stroke="#0EA5E9"/>
+          <text x="37" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#7DD3FC" text-anchor="middle">Templates</text>
+        </g>
+        <g transform="translate(335, 20)">
+          <rect width="75" height="28" rx="4" fill="#0C4A6E" stroke="#0EA5E9"/>
+          <text x="37" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#7DD3FC" text-anchor="middle">Commands</text>
+        </g>
+      </g>
+
+      <!-- Bolt types -->
+      <g transform="translate(15, 165)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#86EFAC" text-anchor="middle">BOLT TYPES</text>
+        <g transform="translate(0, 20)">
+          <rect width="130" height="28" rx="4" fill="#14532D" stroke="#22C55E"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#86EFAC" text-anchor="middle">DDD Construction</text>
+        </g>
+        <g transform="translate(140, 20)">
+          <rect width="130" height="28" rx="4" fill="#14532D" stroke="#22C55E"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#86EFAC" text-anchor="middle">Simple Construction</text>
+        </g>
+        <g transform="translate(280, 20)">
+          <rect width="130" height="28" rx="4" fill="#1E293B" stroke="#475569" stroke-dasharray="4 2"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#64748B" text-anchor="middle">Future Bolt Types...</text>
+        </g>
+      </g>
+    </g>
+
+    <!-- Future Flows Section -->
+    <g transform="translate(480, 55)">
+      <rect width="200" height="235" rx="10" fill="#1E293B" stroke="#475569" stroke-dasharray="4 2"/>
+      <text x="100" y="25" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="#64748B" text-anchor="middle">Future Flows</text>
+
+      <!-- Future Flow Placeholder 1 -->
+      <g transform="translate(15, 45)">
+        <rect width="170" height="55" rx="8" fill="#1E293B" stroke="#475569" stroke-dasharray="4 2"/>
+        <text x="85" y="32" font-family="system-ui, sans-serif" font-size="10" fill="#64748B" text-anchor="middle">Custom Flow 1</text>
+      </g>
+
+      <!-- Future Flow Placeholder 2 -->
+      <g transform="translate(15, 115)">
+        <rect width="170" height="55" rx="8" fill="#1E293B" stroke="#475569" stroke-dasharray="4 2"/>
+        <text x="85" y="32" font-family="system-ui, sans-serif" font-size="10" fill="#64748B" text-anchor="middle">Custom Flow 2</text>
+      </g>
+
+      <!-- Tool integrations -->
+      <g transform="translate(15, 185)">
+        <text x="85" y="10" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#94A3B8" text-anchor="middle">Tool Integrations</text>
+        <g transform="translate(0, 18)">
+          <rect width="40" height="22" rx="4" fill="#1E293B" stroke="#475569"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#94A3B8" text-anchor="middle">Claude</text>
+        </g>
+        <g transform="translate(45, 18)">
+          <rect width="40" height="22" rx="4" fill="#1E293B" stroke="#475569"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#94A3B8" text-anchor="middle">Cursor</text>
+        </g>
+        <g transform="translate(90, 18)">
+          <rect width="40" height="22" rx="4" fill="#1E293B" stroke="#475569"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#94A3B8" text-anchor="middle">Copilot</text>
+        </g>
+        <g transform="translate(135, 18)">
+          <rect width="35" height="22" rx="4" fill="#1E293B" stroke="#475569"/>
+          <text x="17" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#94A3B8" text-anchor="middle">...</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <!-- Bottom tagline -->
+  <g transform="translate(50, 400)">
+    <rect width="220" height="16" rx="4" fill="#422006"/>
+    <text x="110" y="12" font-family="system-ui, sans-serif" font-size="9" fill="#FDE68A" text-anchor="middle">AI Proposes - Human Validates - AI Executes</text>
+  </g>
+</svg>

package/src/iris_bundle/frameworks/iris-core/docs.iris.md/images/hero-light.svg

@@ -0,0 +1,129 @@
+<svg width="800" height="420" viewBox="0 0 800 420" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="800" height="420" fill="#FAFAFA"/>
+
+  <!-- Title -->
+  <text x="400" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="700" fill="#1a1a1a" text-anchor="middle">specs.md Framework</text>
+  <text x="400" y="55" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#666" text-anchor="middle">Spec-Driven AI Development with Pluggable Flows</text>
+
+  <!-- Framework Box -->
+  <g transform="translate(50, 75)">
+    <!-- Main framework container -->
+    <rect width="700" height="310" rx="16" fill="white" stroke="#E2E8F0" stroke-width="2"/>
+    <rect width="700" height="40" rx="16" fill="#1E293B"/>
+    <rect x="0" y="28" width="700" height="12" fill="#1E293B"/>
+    <text x="350" y="26" font-family="system-ui, sans-serif" font-size="14" font-weight="600" fill="white" text-anchor="middle">specs.md Framework - Pluggable Flows</text>
+
+    <!-- AI-DLC Flow (Active) -->
+    <g transform="translate(20, 55)">
+      <rect width="440" height="235" rx="10" fill="#F0FDF4" stroke="#22C55E" stroke-width="2"/>
+      <rect width="440" height="32" rx="10" fill="#22C55E"/>
+      <rect x="0" y="22" width="440" height="10" fill="#22C55E"/>
+      <text x="220" y="22" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">AI-DLC Flow (First Implemented)</text>
+
+      <!-- Three phases row -->
+      <g transform="translate(15, 45)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#166534" text-anchor="middle">PHASES</text>
+        <g transform="translate(0, 20)">
+          <rect width="130" height="28" rx="4" fill="#818CF8"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Inception</text>
+        </g>
+        <g transform="translate(140, 20)">
+          <rect width="130" height="28" rx="4" fill="#34D399"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Construction</text>
+        </g>
+        <g transform="translate(280, 20)">
+          <rect width="130" height="28" rx="4" fill="#FBBF24"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="10" fill="white" text-anchor="middle">Operations</text>
+        </g>
+      </g>
+
+      <!-- Core components -->
+      <g transform="translate(15, 105)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#166534" text-anchor="middle">CORE COMPONENTS</text>
+        <g transform="translate(0, 20)">
+          <rect width="80" height="28" rx="4" fill="#E0F2FE" stroke="#7DD3FC"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#0369A1" text-anchor="middle">Memory Bank</text>
+        </g>
+        <g transform="translate(85, 20)">
+          <rect width="80" height="28" rx="4" fill="#E0F2FE" stroke="#7DD3FC"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#0369A1" text-anchor="middle">Standards</text>
+        </g>
+        <g transform="translate(170, 20)">
+          <rect width="80" height="28" rx="4" fill="#E0F2FE" stroke="#7DD3FC"/>
+          <text x="40" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#0369A1" text-anchor="middle">Agent System</text>
+        </g>
+        <g transform="translate(255, 20)">
+          <rect width="75" height="28" rx="4" fill="#E0F2FE" stroke="#7DD3FC"/>
+          <text x="37" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#0369A1" text-anchor="middle">Templates</text>
+        </g>
+        <g transform="translate(335, 20)">
+          <rect width="75" height="28" rx="4" fill="#E0F2FE" stroke="#7DD3FC"/>
+          <text x="37" y="18" font-family="system-ui, sans-serif" font-size="8" fill="#0369A1" text-anchor="middle">Commands</text>
+        </g>
+      </g>
+
+      <!-- Bolt types -->
+      <g transform="translate(15, 165)">
+        <text x="205" y="12" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#166534" text-anchor="middle">BOLT TYPES</text>
+        <g transform="translate(0, 20)">
+          <rect width="130" height="28" rx="4" fill="#DCFCE7" stroke="#22C55E"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#166534" text-anchor="middle">DDD Construction</text>
+        </g>
+        <g transform="translate(140, 20)">
+          <rect width="130" height="28" rx="4" fill="#DCFCE7" stroke="#22C55E"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#166534" text-anchor="middle">Simple Construction</text>
+        </g>
+        <g transform="translate(280, 20)">
+          <rect width="130" height="28" rx="4" fill="#F1F5F9" stroke="#CBD5E1" stroke-dasharray="4 2"/>
+          <text x="65" y="18" font-family="system-ui, sans-serif" font-size="9" fill="#94A3B8" text-anchor="middle">Future Bolt Types...</text>
+        </g>
+      </g>
+    </g>
+
+    <!-- Future Flows Section -->
+    <g transform="translate(480, 55)">
+      <rect width="200" height="235" rx="10" fill="#F8FAFC" stroke="#CBD5E1" stroke-dasharray="4 2"/>
+      <text x="100" y="25" font-family="system-ui, sans-serif" font-size="11" font-weight="600" fill="#94A3B8" text-anchor="middle">Future Flows</text>
+
+      <!-- Future Flow Placeholder 1 -->
+      <g transform="translate(15, 45)">
+        <rect width="170" height="55" rx="8" fill="#F1F5F9" stroke="#CBD5E1" stroke-dasharray="4 2"/>
+        <text x="85" y="32" font-family="system-ui, sans-serif" font-size="10" fill="#94A3B8" text-anchor="middle">Custom Flow 1</text>
+      </g>
+
+      <!-- Future Flow Placeholder 2 -->
+      <g transform="translate(15, 115)">
+        <rect width="170" height="55" rx="8" fill="#F1F5F9" stroke="#CBD5E1" stroke-dasharray="4 2"/>
+        <text x="85" y="32" font-family="system-ui, sans-serif" font-size="10" fill="#94A3B8" text-anchor="middle">Custom Flow 2</text>
+      </g>
+
+      <!-- Tool integrations -->
+      <g transform="translate(15, 185)">
+        <text x="85" y="10" font-family="system-ui, sans-serif" font-size="9" font-weight="500" fill="#475569" text-anchor="middle">Tool Integrations</text>
+        <g transform="translate(0, 18)">
+          <rect width="40" height="22" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#64748B" text-anchor="middle">Claude</text>
+        </g>
+        <g transform="translate(45, 18)">
+          <rect width="40" height="22" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#64748B" text-anchor="middle">Cursor</text>
+        </g>
+        <g transform="translate(90, 18)">
+          <rect width="40" height="22" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
+          <text x="20" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#64748B" text-anchor="middle">Copilot</text>
+        </g>
+        <g transform="translate(135, 18)">
+          <rect width="35" height="22" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
+          <text x="17" y="15" font-family="system-ui, sans-serif" font-size="7" fill="#64748B" text-anchor="middle">...</text>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <!-- Bottom tagline -->
+  <g transform="translate(50, 400)">
+    <rect width="220" height="16" rx="4" fill="#FEF3C7"/>
+    <text x="110" y="12" font-family="system-ui, sans-serif" font-size="9" fill="#92400E" text-anchor="middle">AI Proposes - Human Validates - AI Executes</text>
+  </g>
+</svg>