@hustle-together/api-dev-tools 3.0.0 → 3.1.0

package/demo/workflow-demo.html

@@ -31,8 +31,12 @@
       --border-color: #333;
       --grey: #888;
       --white: #f0f0f0;
+      /* Main accent - Hustle red */
       --accent-red: #ba0c2f;
       --accent-red-glow: rgba(186, 12, 47, 0.4);
+      /* Claude Code section only - orange */
+      --claude-orange: #f97316;
+      --claude-orange-glow: rgba(249, 115, 22, 0.4);
     }
 
     body {
@@ -338,17 +342,10 @@
       height: 16px;
       background: var(--white);
       opacity: 0.5;
-      pointer-events: auto;
-      cursor: pointer;
+      pointer-events: none; /* Don't intercept clicks - let them pass to progress bar */
       margin-left: -1px;
     }
 
-    .audio-section-marker:hover {
-      opacity: 1;
-      background: var(--accent-red);
-      box-shadow: 0 0 8px var(--accent-red-glow);
-    }
-
     /* Chapter buttons */
     .chapter-buttons {
       display: flex;
@@ -575,13 +572,23 @@
        SECTIONS & CONTENT
        ============================================ */
     section {
-      min-height: 100vh;
+      /* Account for fixed header (60px) and audio player bottom bar (120px) */
+      min-height: calc(100vh - 180px);
+      max-height: calc(100vh - 100px);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      padding: 120px 40px 80px;
+      padding: 80px 40px 60px;
       position: relative;
+      overflow-y: auto;
+    }
+
+    /* When audio is playing, reduce section height to fit */
+    body.audio-playing section {
+      min-height: calc(100vh - 240px);
+      max-height: calc(100vh - 160px);
+      padding: 60px 40px 40px;
     }
 
     .ascii-border {
@@ -974,11 +981,14 @@
     .gap-item {
       border: 2px solid var(--border-color);
       background: var(--darker-grey);
-      padding: 25px 30px 25px 50px;
+      padding: 20px 25px;
       opacity: 0;
       transform: translateX(-30px);
       transition: all 0.2s;
       position: relative;
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
     }
 
     .gap-item:hover {
@@ -986,14 +996,14 @@
       transform: translateX(5px);
     }
 
-    .gap-item::before {
-      content: '✕';
-      position: absolute;
-      left: 18px;
-      top: 26px;
-      color: var(--accent-red);
-      font-size: 1rem;
-      font-weight: bold;
+    .gap-icon {
+      font-size: 2rem;
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .gap-content {
+      flex: 1;
     }
 
     .gap-number {
@@ -1060,11 +1070,9 @@
     }
 
     .solution-icon {
-      font-size: 1.8rem;
+      font-size: 2.5rem;
       margin-bottom: 15px;
       display: block;
-      color: var(--accent-red);
-      font-weight: bold;
     }
 
     .solution-title {
@@ -1421,6 +1429,483 @@
       margin-bottom: 5px;
     }
 
+    /* ============================================
+       CLAUDE CODE TERMINAL SIMULATION
+       With side panel for explanations
+       ============================================ */
+    .claude-code-container {
+      display: flex;
+      gap: 20px;
+      width: 100%;
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    .claude-code-terminal {
+      flex: 2;
+      background: #1e1e1e;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+      border: 1px solid rgba(249, 115, 22, 0.2);
+    }
+
+    .claude-code-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: #2d2d2d;
+      border-bottom: 1px solid #3d3d3d;
+    }
+
+    .claude-code-dots {
+      display: flex;
+      gap: 8px;
+    }
+
+    .claude-code-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+
+    .claude-code-dot.red { background: #ff5f56; }
+    .claude-code-dot.yellow { background: #ffbd2e; }
+    .claude-code-dot.green { background: #27ca40; }
+
+    .claude-code-title {
+      flex: 1;
+      text-align: center;
+      color: #888;
+      font-size: 0.85rem;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .claude-code-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 12px;
+      background: rgba(249, 115, 22, 0.15);
+      border: 1px solid var(--claude-orange);
+      border-radius: 4px;
+      color: var(--claude-orange);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .claude-code-badge::before {
+      content: '◉';
+      animation: pulse-orange 1.5s infinite;
+    }
+
+    @keyframes pulse-orange {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .claude-code-body {
+      padding: 20px;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', monospace;
+      font-size: 0.9rem;
+      line-height: 1.6;
+      max-height: 600px;
+      overflow-y: auto;
+      scroll-behavior: smooth;
+      position: relative;
+    }
+
+    .claude-msg {
+      margin-bottom: 16px;
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    .claude-msg.visible {
+      opacity: 1;
+      transform: translateY(0);
+      transition: all 0.3s ease;
+    }
+
+    .claude-msg-role {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .claude-msg-role.ai {
+      color: var(--claude-orange);
+    }
+
+    .claude-msg-role.user {
+      color: #3b82f6;
+    }
+
+    .claude-msg-role.system {
+      color: #22c55e;
+    }
+
+    .claude-msg-icon {
+      font-size: 1rem;
+    }
+
+    .claude-msg-name {
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      font-size: 0.75rem;
+    }
+
+    .claude-msg-content {
+      padding-left: 28px;
+      color: #e0e0e0;
+    }
+
+    .claude-msg-content code {
+      background: rgba(249, 115, 22, 0.15);
+      color: var(--claude-orange);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.85em;
+    }
+
+    .claude-tool-call {
+      margin: 8px 0;
+      padding: 12px;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid #3d3d3d;
+      border-radius: 6px;
+      border-left: 3px solid var(--claude-orange);
+    }
+
+    .claude-tool-name {
+      color: var(--claude-orange);
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .claude-tool-result {
+      color: #888;
+      font-size: 0.85rem;
+    }
+
+    .claude-user-choice {
+      margin: 12px 0;
+      padding: 12px;
+      background: rgba(59, 130, 246, 0.1);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      border-radius: 6px;
+    }
+
+    .claude-choice-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      margin: 4px 0;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .claude-choice-option:hover {
+      background: rgba(59, 130, 246, 0.2);
+    }
+
+    .claude-choice-option.selected {
+      background: rgba(59, 130, 246, 0.3);
+      border: 1px solid #3b82f6;
+    }
+
+    .claude-choice-marker {
+      width: 18px;
+      height: 18px;
+      border: 2px solid #888;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .claude-choice-option.selected .claude-choice-marker {
+      border-color: #3b82f6;
+      background: #3b82f6;
+    }
+
+    .claude-choice-option.selected .claude-choice-marker::after {
+      content: '✓';
+      color: white;
+      font-size: 0.7rem;
+    }
+
+    /* ASCII Art Startup Screen */
+    .ascii-startup {
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', monospace;
+      font-size: 11px;
+      line-height: 1.3;
+      color: var(--claude-orange);
+      white-space: pre;
+      margin: 0;
+      padding: 16px;
+      opacity: 0;
+      display: none;
+    }
+
+    .ascii-startup.visible {
+      opacity: 1;
+      display: block;
+    }
+
+    .ascii-startup .welcome-text {
+      color: #e5e5e5;
+    }
+
+    .ascii-startup .tips-text {
+      color: #888;
+    }
+
+    .ascii-startup .model-text {
+      color: var(--claude-orange);
+    }
+
+    .ascii-startup .path-text {
+      color: #666;
+    }
+
+    /* Prompt Line */
+    .claude-prompt-line {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      background: rgba(0, 0, 0, 0.2);
+      border-top: 1px solid #3d3d3d;
+      opacity: 0;
+    }
+
+    .claude-prompt-line.visible {
+      opacity: 1;
+    }
+
+    .claude-prompt {
+      color: var(--claude-orange);
+      font-size: 1.1rem;
+      font-weight: bold;
+    }
+
+    .claude-input {
+      color: #e5e5e5;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
+    }
+
+    .claude-cursor {
+      display: inline-block;
+      width: 8px;
+      height: 16px;
+      background: var(--claude-orange);
+      animation: blink-cursor 1s infinite;
+      margin-left: 2px;
+      vertical-align: middle;
+    }
+
+    @keyframes blink-cursor {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+
+    /* Loading Dots Animation */
+    .loading-dots {
+      display: inline-flex;
+      gap: 4px;
+      padding: 8px 16px;
+      margin: 8px 0;
+    }
+
+    .loading-dots span {
+      width: 8px;
+      height: 8px;
+      background: var(--claude-orange);
+      border-radius: 50%;
+      animation: pulse-dot 1.2s infinite ease-in-out;
+    }
+
+    .loading-dots span:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .loading-dots span:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes pulse-dot {
+      0%, 80%, 100% {
+        opacity: 0.3;
+        transform: scale(0.8);
+      }
+      40% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    /* Thinking indicator */
+    .claude-thinking {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 28px;
+      color: #888;
+      font-style: italic;
+      opacity: 0;
+    }
+
+    .claude-thinking.visible {
+      opacity: 1;
+    }
+
+    /* Loop-back message styling */
+    .claude-msg.loop-back .claude-msg-content {
+      border-left: 3px solid #f59e0b;
+      padding-left: 12px;
+      background: rgba(245, 158, 11, 0.1);
+      border-radius: 0 6px 6px 0;
+      padding: 8px 12px;
+    }
+
+    .loop-back-badge {
+      display: inline-block;
+      background: rgba(245, 158, 11, 0.2);
+      color: #f59e0b;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      margin-bottom: 8px;
+    }
+
+    /* Gap found styling */
+    .gap-found {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+      border-radius: 6px;
+      padding: 12px;
+      margin: 8px 0;
+    }
+
+    .gap-found-title {
+      color: #ef4444;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    /* Explanation Side Panel */
+    .explanation-panel {
+      flex: 1;
+      min-width: 300px;
+      background: var(--darker-grey);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .explanation-panel-header {
+      padding: 12px 16px;
+      background: rgba(249, 115, 22, 0.1);
+      border-bottom: 1px solid var(--border-color);
+      font-weight: 600;
+      color: var(--claude-orange);
+      font-size: 0.85rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .explanation-panel-body {
+      padding: 16px;
+      max-height: 600px;
+      overflow-y: auto;
+    }
+
+    .explanation-step {
+      padding: 16px;
+      margin-bottom: 12px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 6px;
+      border-left: 3px solid var(--border-color);
+      opacity: 0.5;
+      transition: all 0.3s ease;
+    }
+
+    .explanation-step.active {
+      opacity: 1;
+      border-left-color: var(--claude-orange);
+      background: rgba(249, 115, 22, 0.05);
+    }
+
+    .explanation-step-phase {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .explanation-step-num {
+      width: 24px;
+      height: 24px;
+      background: var(--border-color);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--grey);
+    }
+
+    .explanation-step.active .explanation-step-num {
+      background: var(--claude-orange);
+      color: white;
+    }
+
+    .explanation-step-name {
+      font-weight: 600;
+      color: var(--grey);
+      font-size: 0.85rem;
+    }
+
+    .explanation-step.active .explanation-step-name {
+      color: var(--white);
+    }
+
+    .explanation-step-desc {
+      color: var(--grey);
+      font-size: 0.8rem;
+      line-height: 1.5;
+    }
+
+    .explanation-step.active .explanation-step-desc {
+      color: #aaa;
+    }
+
+    .explanation-step-why {
+      margin-top: 8px;
+      padding-top: 8px;
+      border-top: 1px dashed var(--border-color);
+      font-size: 0.75rem;
+      color: var(--claude-orange);
+      font-style: italic;
+    }
+
+    @media (max-width: 1000px) {
+      .claude-code-container {
+        flex-direction: column;
+      }
+      .explanation-panel {
+        min-width: unset;
+      }
+    }
+
     /* ============================================
        SECTION 8: STATE FILE - boxy JSON viewer
        ============================================ */
@@ -1507,14 +1992,11 @@
     .install-icon {
       width: 50px;
       height: 50px;
-      border: 2px solid var(--accent-red);
-      background: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      font-size: 1.2rem;
-      color: var(--accent-red);
+      font-size: 1.8rem;
     }
 
     .install-content {
@@ -1522,8 +2004,9 @@
     }
 
     .install-from {
-      color: var(--grey);
-      font-size: 0.85rem;
+      color: var(--white);
+      font-size: 1rem;
+      font-weight: 500;
     }
 
     .install-arrow {
@@ -1537,6 +2020,9 @@
       color: var(--white);
       font-size: 0.9rem;
       font-weight: 500;
+      min-width: 180px;
+      text-align: right;
+      font-family: 'JetBrains Mono', 'SF Mono', monospace;
     }
 
     .install-note {
@@ -1851,63 +2337,52 @@
   <section id="problems">
     <div class="ascii-border">
       <h2>THE PROBLEM</h2>
-      <h3>What Goes Wrong Without Structure</h3>
+      <h3>LLMs Make Their Own Decisions</h3>
 
       <div class="explanation">
         <div class="explanation-title">Why This Matters</div>
         <p>
-          When you ask an AI assistant to build an API, it often <strong>skips important steps</strong>.
-          It might use outdated information from its training data, make assumptions about what you want,
-          or claim tasks are complete without actually verifying them.
-        </p>
-        <p>
-          These are the <strong>5 most common gaps</strong> we've identified - and the problems they cause:
+          LLMs are powerful but <strong>ungrounded</strong>. Without structure, they default to training data,
+          make assumptions, and forget context. These are the <strong>3 critical gaps</strong> that compound:
         </p>
       </div>
 
       <ul class="gap-list">
         <li class="gap-item">
-          <span class="gap-number">Gap 01</span>
-          <div class="gap-title">AI Doesn't Use Your Exact Words</div>
-          <div class="gap-desc">You say one thing, but the AI searches for something different.</div>
-          <div class="gap-example">
-            <span class="bad">You: "Use Vercel AI Gateway"</span><br>
-            <span class="bad">AI searches: "Vercel AI SDK" (wrong!)</span><br>
-            <span class="good">Should search: "Vercel AI Gateway" (your exact words)</span>
-          </div>
-        </li>
-        <li class="gap-item">
-          <span class="gap-number">Gap 02</span>
-          <div class="gap-title">No Proof Files Were Actually Changed</div>
-          <div class="gap-desc">AI says "I updated all the files" but never runs git diff to prove it.</div>
-          <div class="gap-example">
-            AI: "Migration complete! All 6 files updated."<br>
-            Reality: Only 4 files were changed, 2 were missed.
+          <span class="gap-icon">🔍</span>
+          <div class="gap-content">
+            <span class="gap-number">Gap 01</span>
+            <div class="gap-title">AI Doesn't Use Your Exact Words</div>
+            <div class="gap-desc">You say one thing, but the AI searches for something different. Wrong library. Wrong documentation.</div>
+            <div class="gap-example">
+              <span class="bad">You: "Use Brandfetch API"</span><br>
+              <span class="bad">AI searches: "brand fetch library" (wrong!)</span><br>
+              <span class="good">Solution: Phase 0 disambiguation before research</span>
+            </div>
           </div>
         </li>
         <li class="gap-item">
-          <span class="gap-number">Gap 03</span>
-          <div class="gap-title">Skipped Tests Go Uninvestigated</div>
-          <div class="gap-desc">AI sees "9 tests skipped" and says "that's expected" without checking why.</div>
-          <div class="gap-example">
-            Tests might be skipping because they check the wrong environment variables.
+          <span class="gap-icon">🧠</span>
+          <div class="gap-content">
+            <span class="gap-number">Gap 02</span>
+            <div class="gap-title">Memory-Based Implementation</div>
+            <div class="gap-desc">After research, the AI forgets what it learned and implements from training data instead.</div>
+            <div class="gap-example">
+              AI researches Brandfetch v2 API, then implements v1 patterns from memory.<br>
+              <span class="good">Solution: Phase 9 verification re-reads docs after implementation</span>
+            </div>
           </div>
         </li>
         <li class="gap-item">
-          <span class="gap-number">Gap 04</span>
-          <div class="gap-title">Tasks Marked Done Without Verification</div>
-          <div class="gap-desc">AI declares "complete!" without checking if the code matches your requirements.</div>
-          <div class="gap-example">
-            You asked for "single API key" but code still uses 4 separate keys.
-          </div>
-        </li>
-        <li class="gap-item">
-          <span class="gap-number">Gap 05</span>
-          <div class="gap-title">Tests Don't Match Production Code</div>
-          <div class="gap-desc">Production code uses new patterns, but tests still check old patterns.</div>
-          <div class="gap-example">
-            <span class="bad">Production: AI_GATEWAY_API_KEY</span><br>
-            <span class="bad">Tests: OPENAI_API_KEY (outdated!)</span>
+          <span class="gap-icon">💨</span>
+          <div class="gap-content">
+            <span class="gap-number">Gap 03</span>
+            <div class="gap-title">Context Dilution</div>
+            <div class="gap-desc">After many turns, the AI forgets project structure, documentation locations, and your decisions.</div>
+            <div class="gap-example">
+              Turn 50: "What API key should I use?" (you already told it 40 turns ago)<br>
+              <span class="good">Solution: Re-grounding every 7 turns via hooks</span>
+            </div>
           </div>
         </li>
       </ul>
@@ -1936,7 +2411,7 @@
 
       <div class="solution-grid">
         <div class="solution-card">
-          <span class="solution-icon">[R]</span>
+          <span class="solution-icon">📚</span>
           <div class="solution-title">Research First</div>
           <div class="solution-desc">
             AI must search for live documentation before writing any code.
@@ -1944,7 +2419,7 @@
           </div>
         </div>
         <div class="solution-card">
-          <span class="solution-icon">[I]</span>
+          <span class="solution-icon">💬</span>
           <div class="solution-title">Interview Required</div>
           <div class="solution-desc">
             AI must ask YOU questions and wait for answers.
@@ -1952,7 +2427,7 @@
           </div>
         </div>
         <div class="solution-card">
-          <span class="solution-icon">[V]</span>
+          <span class="solution-icon">✅</span>
           <div class="solution-title">Verification Built-In</div>
           <div class="solution-desc">
             System checks implementation matches interview.
@@ -2038,17 +2513,24 @@
   <section id="phases">
     <div class="ascii-border">
       <h2>THE WORKFLOW</h2>
-      <h3>10 Enforced Phases</h3>
+      <h3>12 Enforced Phases (v3.0)</h3>
 
       <div class="explanation">
         <div class="explanation-title">The Complete Process</div>
         <p>
-          Every API goes through these 10 phases. The system tracks progress and won't let
-          the AI skip ahead. This ensures <strong>thorough, consistent results</strong> every time.
+          Every API goes through these 12 phases. The system tracks progress and won't let
+          the AI skip ahead. <strong>Phase 0 (Disambiguation)</strong> and <strong>Phase 9 (Verify)</strong> are new in v3.0!
         </p>
       </div>
 
       <div class="phase-grid">
+        <div class="phase-box glow-border" data-phase="0">
+          <div class="phase-status"></div>
+          <div class="phase-number">00</div>
+          <div class="phase-name">Disambiguate</div>
+          <div class="phase-desc">Clarify ambiguous terms</div>
+          <span class="phase-arrow">→</span>
+        </div>
         <div class="phase-box glow-border" data-phase="1">
           <div class="phase-status"></div>
           <div class="phase-number">01</div>
@@ -2067,14 +2549,14 @@
           <div class="phase-status"></div>
           <div class="phase-number">03</div>
           <div class="phase-name">Interview</div>
-          <div class="phase-desc">Ask user questions</div>
+          <div class="phase-desc">Questions FROM research</div>
           <span class="phase-arrow">→</span>
         </div>
         <div class="phase-box glow-border" data-phase="4">
           <div class="phase-status"></div>
           <div class="phase-number">04</div>
           <div class="phase-name">Deep Research</div>
-          <div class="phase-desc">Based on interview answers</div>
+          <div class="phase-desc">Adaptive, not shotgun</div>
           <span class="phase-arrow">→</span>
         </div>
         <div class="phase-box glow-border" data-phase="5">
@@ -2107,275 +2589,740 @@
           <div class="phase-desc">Make tests pass</div>
           <span class="phase-arrow">→</span>
         </div>
-        <div class="phase-box glow-border" data-phase="9">
+        <div class="phase-box glow-border" data-phase="9" style="border-color: var(--claude-orange);">
           <div class="phase-status"></div>
           <div class="phase-number">09</div>
-          <div class="phase-name">Refactor</div>
-          <div class="phase-desc">Clean up the code</div>
+          <div class="phase-name">Verify</div>
+          <div class="phase-desc">Re-research, find gaps</div>
           <span class="phase-arrow">→</span>
         </div>
         <div class="phase-box glow-border" data-phase="10">
           <div class="phase-status"></div>
           <div class="phase-number">10</div>
+          <div class="phase-name">Refactor</div>
+          <div class="phase-desc">Clean up the code</div>
+          <span class="phase-arrow">→</span>
+        </div>
+        <div class="phase-box glow-border" data-phase="11">
+          <div class="phase-status"></div>
+          <div class="phase-number">11</div>
           <div class="phase-name">Documentation</div>
           <div class="phase-desc">Update all docs</div>
+          <span class="phase-arrow">→</span>
         </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- ============================================
-       SECTION 6: REAL EXAMPLE WALKTHROUGH
-       ============================================ -->
-  <section id="walkthrough">
-    <div class="ascii-border">
-      <h2>REAL EXAMPLE</h2>
-      <h3>Creating a Brandfetch API</h3>
-
-      <div class="explanation">
-        <div class="explanation-title">The Complete Flow</div>
-        <p>
-          Let's walk through what happens when you run <code>/api-create brandfetch</code>.
-          This shows the full interview-driven workflow, from research to implementation,
-          with <strong>structured questions based on real documentation</strong>.
-        </p>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">1</div>
-          <div class="walkthrough-title">You Run the Command</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            You type the command to create a new Brandfetch API endpoint.
-            The workflow immediately begins.
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Your Command:</div>
-            /api-create brandfetch
-          </div>
-        </div>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">2</div>
-          <div class="walkthrough-title">Research Phase (Automatic)</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            Before asking any questions, the AI is <strong>required</strong> to research.
-            It fetches live documentation from Context7 and searches the web.
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Research Logged to State File:</div>
-            - Context7: Brandfetch SDK docs → found logos, colors, fonts endpoints<br>
-            - WebSearch: "Brandfetch API rate limits 2025" → 5 req/second<br>
-            - WebSearch: "Brandfetch API response format" → JSON with asset URLs<br>
-            - Context7: Authentication → Bearer token required
-          </div>
-        </div>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">3</div>
-          <div class="walkthrough-title">Structured Interview (Based on Research)</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            Now the AI asks YOU questions - but with <strong>multiple-choice options</strong>
-            derived from what it actually found in the documentation. No guessing!
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Question 1 (with options from research):</div>
-            "What's the primary purpose of this endpoint?"<br><br>
-            <strong>1.</strong> Brand lookup (get brand by domain)<br>
-            <strong>2.</strong> Logo extraction (get logo assets)<br>
-            <strong>3.</strong> Color palette extraction<br>
-            <strong>4.</strong> Full brand kit (all assets)<br>
-            <strong>5.</strong> Type something else...<br><br>
-            <em>You select: "4. Full brand kit (all assets)"</em>
-          </div>
-        </div>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">4</div>
-          <div class="walkthrough-title">More Questions, All Tracked</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            Each question is tracked with your answer. These decisions are stored
-            in the state file and <strong>injected during implementation</strong> to ensure consistency.
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Decisions Captured:</div>
-            • Purpose: full_brand_kit<br>
-            • Response Format: JSON with asset URLs<br>
-            • API Key Handling: server environment variables only<br>
-            • Error Handling: detailed (error, code, details)<br>
-            • Required Params: domain (string)<br>
-            • Optional Params: include_colors, include_fonts
-          </div>
-        </div>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">5</div>
-          <div class="walkthrough-title">Implementation (With Decision Reminders)</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            When the AI writes code, the hook <strong>injects your decisions</strong> as a reminder.
-            This ensures the implementation matches what you actually asked for.
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Injected on Every Write:</div>
-            ✅ Interview complete. REMEMBER THE USER'S DECISIONS:<br><br>
-            • Purpose: Full brand kit (all assets)<br>
-            • Response Format: JSON with asset URLs<br>
-            • API Key Handling: server environment variables only<br>
-            • Error Handling: detailed (error, code, details)<br><br>
-            <em>Your implementation MUST align with these choices.</em>
-          </div>
-        </div>
-      </div>
-
-      <div class="walkthrough-step">
-        <div class="walkthrough-header">
-          <div class="walkthrough-num">6</div>
-          <div class="walkthrough-title">TDD + Final Result</div>
-        </div>
-        <div class="walkthrough-content">
-          <div class="walkthrough-desc">
-            Tests are written first (TDD), then implementation, then docs.
-            Everything is tracked and verified against your interview decisions.
-          </div>
-          <div class="walkthrough-example">
-            <div class="label">Files Created:</div>
-            - src/lib/schemas/brandfetch.ts (Zod validation)<br>
-            - src/lib/__tests__/brandfetch.test.ts (tests first!)<br>
-            - src/app/api/v2/brandfetch/route.ts<br>
-            - Interview doc: src/v2/docs/endpoints/brandfetch.md<br>
-            - All tests passing ✓
-          </div>
+        <div class="phase-box glow-border" data-phase="12">
+          <div class="phase-status"></div>
+          <div class="phase-number">12</div>
+          <div class="phase-name">Complete</div>
+          <div class="phase-desc">Final verification</div>
         </div>
       </div>
     </div>
   </section>
 
   <!-- ============================================
-       SECTION 7: TERMINAL SIMULATION
+       SECTION 6: LIVE DEMO - CLAUDE CODE TERMINAL
+       Full 12-phase v3.0 workflow simulation
        ============================================ -->
   <section id="demo">
-    <div class="ascii-border">
+    <div class="ascii-border" style="max-width: 1400px;">
       <h2>LIVE SIMULATION</h2>
-      <h3>The Interview Flow</h3>
+      <h3>12-Phase Workflow (v3.0)</h3>
 
       <div class="explanation">
-        <div class="explanation-title">Structured Questions in Action</div>
+        <div class="explanation-title">The Complete v3.0 Flow</div>
         <p>
-          This simulates the interview phase. Notice how the AI uses
-          <strong>AskUserQuestion with options</strong> based on research findings.
-          Your answers are captured and used throughout implementation.
+          Watch the full <strong>/api-create brandfetch</strong> command in action.
+          The side panel explains each step as it happens. Notice the AI/User conversation format
+          and how research findings drive the interview questions.
         </p>
       </div>
 
-      <div class="terminal">
-        <div class="terminal-header">
-          <div class="terminal-dot"></div>
-          <div class="terminal-dot"></div>
-          <div class="terminal-dot"></div>
-          <div class="terminal-title">claude-code session: /api-create brandfetch</div>
-          <div class="status-badge active" style="margin-left: auto;">
-            <span class="pulse"></span>
-            <span>Live</span>
+      <div class="claude-code-container">
+        <!-- Claude Code Terminal (Left) -->
+        <div class="claude-code-terminal" id="claudeTerminal">
+          <div class="claude-code-header">
+            <div class="claude-code-dots">
+              <div class="claude-code-dot red"></div>
+              <div class="claude-code-dot yellow"></div>
+              <div class="claude-code-dot green"></div>
+            </div>
+            <div class="claude-code-title">~/my-project</div>
+            <div class="claude-code-badge">CLAUDE CODE</div>
           </div>
-        </div>
-
-        <div class="terminal-comment" data-step="0">// Step 1: Research phase starts automatically</div>
-        <div class="terminal-line" data-step="1">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">mcp__context7__get-library-docs("brandfetch")</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="2">
-          <span class="terminal-logged">[LOGGED] Context7 source: brandfetch SDK documentation</span>
-        </div>
-
-        <div class="terminal-line" data-step="3">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">WebSearch "Brandfetch API endpoints 2025"</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="4">
-          <span class="terminal-logged">[LOGGED] WebSearch: found /v2/brands, /v2/search, /v2/logos</span>
-        </div>
-
-        <div class="terminal-comment" data-step="5">// Step 2: Interview with structured options (from research)</div>
-        <div class="terminal-line" data-step="6">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">AskUserQuestion(<br>
-            &nbsp;&nbsp;question: "What's the primary purpose?"<br>
-            &nbsp;&nbsp;options: [<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "lookup", label: "Brand lookup by domain"},<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "logos", label: "Logo extraction only"},<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "full_kit", label: "Full brand kit"},<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "custom", label: "Type something..."}<br>
-            &nbsp;&nbsp;]<br>
-          )</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="7">
-          <span class="terminal-allowed">[USER] Selected: "full_kit"<br>[TRACKED] decisions.purpose = "full_kit"</span>
-        </div>
-
-        <div class="terminal-line" data-step="8">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">AskUserQuestion(<br>
-            &nbsp;&nbsp;question: "How should API keys be handled?"<br>
-            &nbsp;&nbsp;options: [<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "server_only", label: "Server env vars only"},<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "header", label: "Custom header override"},<br>
-            &nbsp;&nbsp;&nbsp;&nbsp;{value: "both", label: "Both methods"},<br>
-            &nbsp;&nbsp;]<br>
-          )</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="9">
-          <span class="terminal-allowed">[USER] Selected: "server_only"<br>[TRACKED] decisions.api_key_handling = "server_only"</span>
-        </div>
 
-        <div class="terminal-comment" data-step="10">// Step 3: Interview complete, now writing code</div>
-        <div class="terminal-line" data-step="11">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">Write src/app/api/v2/brandfetch/route.ts</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="12">
-          <span class="terminal-allowed">✅ Interview complete. REMEMBER THE USER'S DECISIONS:<br>
-          &nbsp;&nbsp;• Purpose: full_kit<br>
-          &nbsp;&nbsp;• API Key Handling: server_only<br>
-          ALLOWED: Writing file...</span>
-        </div>
+          <!-- ASCII Art Startup Screen -->
+          <pre class="ascii-startup" id="asciiStartup">
+<span style="color: var(--claude-orange);">╭─────────────────────────────────────────────────────────────────────────────╮</span>
+<span style="color: var(--claude-orange);">│</span>                             <span style="color: var(--claude-orange);">│</span> <span class="tips-text">Tips for getting started</span>                   <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>   <span class="welcome-text">Welcome back, Developer!</span>  <span style="color: var(--claude-orange);">│</span> <span class="tips-text">Run /init to create a CLAUDE.md file...</span>    <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>                             <span style="color: var(--claude-orange);">│</span> <span class="tips-text">Try /api-create to start a new endpoint</span>    <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>         <span style="color: var(--claude-orange);">▗ ▗   ▖ ▖</span>           <span style="color: var(--claude-orange);">│</span> <span class="tips-text">────────────────────────────────────────</span>    <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>                             <span style="color: var(--claude-orange);">│</span> <span class="tips-text">Recent activity</span>                            <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>           <span style="color: var(--claude-orange);">▘▘ ▝▝</span>             <span style="color: var(--claude-orange);">│</span> <span class="tips-text">  api/v2/search - completed</span>                <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>                             <span style="color: var(--claude-orange);">│</span> <span class="tips-text">  api/v2/analyze - 8 tests passing</span>         <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>   <span class="model-text">Opus 4.5 · Claude Max</span>    <span style="color: var(--claude-orange);">│</span>                                            <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">│</span>      <span class="path-text">~/my-project</span>          <span style="color: var(--claude-orange);">│</span>                                            <span style="color: var(--claude-orange);">│</span>
+<span style="color: var(--claude-orange);">╰─────────────────────────────────────────────────────────────────────────────╯</span>
+          </pre>
+
+          <!-- Prompt Line (shows before messages) -->
+          <div class="claude-prompt-line" id="promptLine">
+            <span class="claude-prompt">❯</span>
+            <span class="claude-input" id="promptInput"></span>
+            <span class="claude-cursor"></span>
+          </div>
 
-        <div class="terminal-comment" data-step="13">// Decisions are injected on EVERY write operation</div>
-        <div class="terminal-line" data-step="14">
-          <span class="terminal-prompt">claude></span>
-          <span class="terminal-command">Write src/lib/schemas/brandfetch.ts</span>
-        </div>
-        <div class="terminal-line terminal-result" data-step="15">
-          <span class="terminal-allowed">✅ REMEMBER THE USER'S DECISIONS:<br>
-          &nbsp;&nbsp;• Purpose: full_kit<br>
-          &nbsp;&nbsp;• API Key Handling: server_only<br>
-          ALLOWED: Writing schema file...</span>
+          <div class="claude-code-body" id="claudeBody">
+            <!-- Loading dots (shown between messages) -->
+            <div class="loading-dots" id="loadingDots" style="display: none;">
+              <span></span><span></span><span></span>
+            </div>
+
+            <!-- Phase 0: User Command -->
+            <div class="claude-msg" data-phase="0" data-step="0">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <code>/api-create brandfetch</code>
+              </div>
+            </div>
+
+            <!-- Phase 1: Scope Confirmation -->
+            <div class="claude-msg" data-phase="1" data-step="1">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                I understand you want to create an API endpoint for <strong>Brandfetch</strong> - a service for fetching brand assets (logos, colors, fonts) by domain.
+                <br><br>Is this correct? <span style="color: #22c55e;">✓ Yes</span>
+              </div>
+            </div>
+
+            <!-- Phase 2: Initial Research -->
+            <div class="claude-msg" data-phase="2" data-step="2">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Starting research... I need to find the real documentation before asking questions.
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">mcp__context7__get-library-docs</div>
+                  <div class="claude-tool-result">"brandfetch" → Found SDK docs, /v2/brands endpoint, auth method</div>
+                </div>
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">WebSearch</div>
+                  <div class="claude-tool-result">"Brandfetch API rate limits 2025" → 5 req/second</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- User Loop-back: Request more research -->
+            <div class="claude-msg loop-back" data-phase="2" data-step="3">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span class="loop-back-badge">↩ LOOP BACK</span>
+                Can you also check what error responses look like?
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="2" data-step="4">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Good catch! Researching error handling...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">WebSearch</div>
+                  <div class="claude-tool-result">"Brandfetch API error codes" → 401, 404, 429 with JSON error format</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Phase 3: Interview (Extensive - 5+ questions) -->
+            <div class="claude-msg" data-phase="3" data-step="5">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Based on my research, I found these capabilities. <strong>Question 1/5:</strong> What's the primary purpose?
+                <div class="claude-user-choice">
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Brand lookup by domain</span>
+                  </div>
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Logo extraction only</span>
+                  </div>
+                  <div class="claude-choice-option selected">
+                    <div class="claude-choice-marker"></div>
+                    <span>Full brand kit (logos, colors, fonts)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="6">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #3b82f6;">Selected: Full brand kit (logos, colors, fonts)</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="7">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong>Question 2/5:</strong> How should <strong>API keys</strong> be handled?
+                <div class="claude-user-choice">
+                  <div class="claude-choice-option selected">
+                    <div class="claude-choice-marker"></div>
+                    <span>Server environment variables only</span>
+                  </div>
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Custom header override (X-Brandfetch-Key)</span>
+                  </div>
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Both methods</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="8">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #3b82f6;">Selected: Server environment variables only</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="9">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong>Question 3/5:</strong> What <strong>caching strategy</strong> should we use?
+                <div class="claude-user-choice">
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>No caching</span>
+                  </div>
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Short cache (5 minutes)</span>
+                  </div>
+                  <div class="claude-choice-option selected">
+                    <div class="claude-choice-marker"></div>
+                    <span>Long cache (24 hours) - brands rarely change</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="10">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #3b82f6;">Selected: Long cache (24 hours)</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="11">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong>Question 4/5:</strong> How should we handle <strong>errors</strong>?
+                <div class="claude-user-choice">
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Throw exceptions (let caller handle)</span>
+                  </div>
+                  <div class="claude-choice-option selected">
+                    <div class="claude-choice-marker"></div>
+                    <span>Return error objects with status codes</span>
+                  </div>
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>Fallback to empty brand object</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="12">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #3b82f6;">Selected: Return error objects with status codes</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="13">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong>Question 5/5:</strong> Should we expose <strong>rate limit headers</strong>?
+                <div class="claude-user-choice">
+                  <div class="claude-choice-option">
+                    <div class="claude-choice-marker"></div>
+                    <span>No - handle internally</span>
+                  </div>
+                  <div class="claude-choice-option selected">
+                    <div class="claude-choice-marker"></div>
+                    <span>Yes - X-RateLimit-Remaining, X-RateLimit-Reset</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="3" data-step="14">
+              <div class="claude-msg-role user">
+                <span class="claude-msg-icon">👤</span>
+                <span class="claude-msg-name">USER</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #3b82f6;">Selected: Yes - expose rate limit headers</span>
+              </div>
+            </div>
+
+            <!-- Phase 4: Deep Research -->
+            <div class="claude-msg" data-phase="4" data-step="15">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Based on your selections, I'll research more specifically:
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">WebSearch</div>
+                  <div class="claude-tool-result">"Brandfetch full brand response format" → JSON with logos[], colors[], fonts[]</div>
+                </div>
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">WebSearch</div>
+                  <div class="claude-tool-result">"Brandfetch rate limit headers" → X-RateLimit-Limit, X-RateLimit-Remaining</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Phase 5: Schema -->
+            <div class="claude-msg" data-phase="5" data-step="16">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Creating Zod schema based on research + interview decisions...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Write</div>
+                  <div class="claude-tool-result">src/lib/schemas/brandfetch.ts → BrandRequestSchema, BrandResponseSchema, BrandErrorSchema</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Phase 6: Environment -->
+            <div class="claude-msg" data-phase="6" data-step="17">
+              <div class="claude-msg-role system">
+                <span class="claude-msg-icon">⚙️</span>
+                <span class="claude-msg-name">HOOK</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong style="color: var(--claude-orange);">check-env.py:</strong> Checking required environment variables...<br>
+                <span style="color: #22c55e;">✓ BRANDFETCH_API_KEY found in .env.local</span>
+              </div>
+            </div>
+
+            <!-- Phase 7: TDD Red -->
+            <div class="claude-msg" data-phase="7" data-step="18">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Writing failing tests first (TDD Red)...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Write</div>
+                  <div class="claude-tool-result">src/lib/__tests__/brandfetch.test.ts (15 test cases)</div>
+                </div>
+                <div style="margin-top: 8px; color: #888; font-size: 0.85rem;">
+                  Tests cover: full brand kit, caching, error objects, rate limit headers
+                </div>
+              </div>
+            </div>
+
+            <!-- Phase 8: TDD Green -->
+            <div class="claude-msg" data-phase="8" data-step="19">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Implementing to pass tests...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Write</div>
+                  <div class="claude-tool-result">src/app/api/v2/brandfetch/route.ts</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="8" data-step="20">
+              <div class="claude-msg-role system">
+                <span class="claude-msg-icon">⚙️</span>
+                <span class="claude-msg-name">HOOK</span>
+              </div>
+              <div class="claude-msg-content">
+                <strong style="color: var(--claude-orange);">enforce-interview.py:</strong> REMEMBER USER DECISIONS:<br>
+                • Purpose: full_brand_kit<br>
+                • API Key Handling: server_only<br>
+                • Caching: 24_hours<br>
+                • Error Handling: return_error_objects<br>
+                • Rate Limits: expose_headers
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="8" data-step="21">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #22c55e;">✓ All 15 tests passing!</span>
+              </div>
+            </div>
+
+            <!-- Phase 9: Verify - GAP FOUND! -->
+            <div class="claude-msg" data-phase="9" data-step="22">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Re-reading docs to verify implementation matches...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">mcp__context7__get-library-docs</div>
+                  <div class="claude-tool-result">"brandfetch" → Comparing implementation to docs...</div>
+                </div>
+                <div class="gap-found">
+                  <div class="gap-found-title">⚠️ GAP DETECTED</div>
+                  Missing <code>include_fonts</code> query parameter documented in v2 API
+                </div>
+              </div>
+            </div>
+
+            <!-- Loop back to fix gap -->
+            <div class="claude-msg loop-back" data-phase="9" data-step="23">
+              <div class="claude-msg-role system">
+                <span class="claude-msg-icon">🔄</span>
+                <span class="claude-msg-name">HOOK</span>
+              </div>
+              <div class="claude-msg-content">
+                <span class="loop-back-badge">↩ LOOP BACK TO PHASE 7</span>
+                <strong style="color: var(--claude-orange);">verify-implementation.py:</strong> Gap found! Returning to TDD Red phase to add missing test...
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="7" data-step="24">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Adding test for include_fonts parameter...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Edit</div>
+                  <div class="claude-tool-result">src/lib/__tests__/brandfetch.test.ts → Added test case #16</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="8" data-step="25">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Updating implementation for include_fonts...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Edit</div>
+                  <div class="claude-tool-result">src/app/api/v2/brandfetch/route.ts → Added include_fonts query param</div>
+                </div>
+                <span style="color: #22c55e;">✓ All 16 tests passing!</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="9" data-step="26">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Re-verifying implementation...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">mcp__context7__get-library-docs</div>
+                  <div class="claude-tool-result">"brandfetch" → All documented features now implemented</div>
+                </div>
+                <span style="color: #22c55e;">✓ Verification complete - no gaps remaining</span>
+              </div>
+            </div>
+
+            <!-- Phase 10-12: Refactor, Docs, Complete -->
+            <div class="claude-msg" data-phase="10" data-step="27">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Refactoring code (tests still pass)...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Edit</div>
+                  <div class="claude-tool-result">Extracted caching logic to utils, improved type safety</div>
+                </div>
+                <span style="color: #22c55e;">✓ 16/16 tests passing</span>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="11" data-step="28">
+              <div class="claude-msg-role ai">
+                <span class="claude-msg-icon">🤖</span>
+                <span class="claude-msg-name">CLAUDE</span>
+              </div>
+              <div class="claude-msg-content">
+                Updating documentation...
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Write</div>
+                  <div class="claude-tool-result">api-tests-manifest.json → Added /api/v2/brandfetch entry</div>
+                </div>
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Edit</div>
+                  <div class="claude-tool-result">openapi.yaml → Added brandfetch endpoint schema</div>
+                </div>
+                <div class="claude-tool-call">
+                  <div class="claude-tool-name">Write</div>
+                  <div class="claude-tool-result">.claude/research/brandfetch/ → Cached research for future sessions</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="claude-msg" data-phase="12" data-step="29">
+              <div class="claude-msg-role system">
+                <span class="claude-msg-icon">✅</span>
+                <span class="claude-msg-name">COMPLETE</span>
+              </div>
+              <div class="claude-msg-content">
+                <span style="color: #22c55e; font-weight: 600;">All 12 phases complete! Brandfetch API ready.</span><br><br>
+                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 0.85rem;">
+                  <div>📁 Files created: <strong>5</strong></div>
+                  <div>✅ Tests passing: <strong>16/16</strong></div>
+                  <div>🔄 Loop-backs: <strong>2</strong></div>
+                  <div>📋 Interview decisions: <strong>5</strong></div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="terminal-line" data-step="16" style="margin-top: 15px;">
-          <span class="terminal-prompt">claude></span>
-          <div class="typing-indicator">
-            <span></span>
-            <span></span>
-            <span></span>
+        <!-- Explanation Panel (Right) -->
+        <div class="explanation-panel" id="explanationPanel">
+          <div class="explanation-panel-header">
+            Phase Explanation
+          </div>
+          <div class="explanation-panel-body">
+            <div class="explanation-step active" data-phase="0">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">0</div>
+                <div class="explanation-step-name">User Command</div>
+              </div>
+              <div class="explanation-step-desc">
+                The user triggers the full 12-phase workflow with a single command.
+              </div>
+              <div class="explanation-step-why">
+                This starts the entire interview-driven development process.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="1">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">1</div>
+                <div class="explanation-step-name">Scope Confirmation</div>
+              </div>
+              <div class="explanation-step-desc">
+                Claude confirms understanding of what we're building before doing anything.
+              </div>
+              <div class="explanation-step-why">
+                Prevents building the wrong thing. Loop back if unclear.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="2">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">2</div>
+                <div class="explanation-step-name">Initial Research</div>
+              </div>
+              <div class="explanation-step-desc">
+                Claude researches REAL documentation using Context7 and WebSearch. No training data assumptions!
+              </div>
+              <div class="explanation-step-why">
+                Questions will be generated FROM these findings - not generic templates.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="3">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">3</div>
+                <div class="explanation-step-name">Interview</div>
+              </div>
+              <div class="explanation-step-desc">
+                Claude asks structured questions with options derived from research. User selects, answers tracked.
+              </div>
+              <div class="explanation-step-why">
+                Every decision is recorded and injected during implementation.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="4">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">4</div>
+                <div class="explanation-step-name">Deep Research</div>
+              </div>
+              <div class="explanation-step-desc">
+                Based on interview answers, Claude proposes targeted follow-up searches.
+              </div>
+              <div class="explanation-step-why">
+                Adaptive research - not shotgun. Only what's relevant to YOUR choices.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="5">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">5</div>
+                <div class="explanation-step-name">Schema Design</div>
+              </div>
+              <div class="explanation-step-desc">
+                Zod schemas created based on research + interview decisions.
+              </div>
+              <div class="explanation-step-why">
+                Types before code. Schema drives tests and implementation.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="6">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">6</div>
+                <div class="explanation-step-name">Environment</div>
+              </div>
+              <div class="explanation-step-desc">
+                Verify API keys exist and are configured correctly.
+              </div>
+              <div class="explanation-step-why">
+                Catches config issues BEFORE writing code.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="7">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">7</div>
+                <div class="explanation-step-name">TDD Red</div>
+              </div>
+              <div class="explanation-step-desc">
+                Write failing tests first. Define success BEFORE implementation.
+              </div>
+              <div class="explanation-step-why">
+                No implementation until tests exist. Enforced by hooks.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="8">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">8</div>
+                <div class="explanation-step-name">TDD Green</div>
+              </div>
+              <div class="explanation-step-desc">
+                Write minimal code to pass tests. Interview decisions injected by hook!
+              </div>
+              <div class="explanation-step-why">
+                Hook reminds Claude of YOUR decisions on every write.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="9">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">9</div>
+                <div class="explanation-step-name">Verify</div>
+              </div>
+              <div class="explanation-step-desc">
+                Re-read original docs, compare to implementation. Find gaps!
+              </div>
+              <div class="explanation-step-why">
+                Catches memory-based errors. Loops back if gaps found.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="10">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">10</div>
+                <div class="explanation-step-name">Refactor</div>
+              </div>
+              <div class="explanation-step-desc">
+                Clean up code while tests stay green.
+              </div>
+              <div class="explanation-step-why">
+                Safe improvements - tests prove nothing broke.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="11">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">11</div>
+                <div class="explanation-step-name">Documentation</div>
+              </div>
+              <div class="explanation-step-desc">
+                Update OpenAPI spec, test manifest, research cache.
+              </div>
+              <div class="explanation-step-why">
+                No "complete" without docs. Stop hook enforces this.
+              </div>
+            </div>
+
+            <div class="explanation-step" data-phase="12">
+              <div class="explanation-step-phase">
+                <div class="explanation-step-num">12</div>
+                <div class="explanation-step-name">Completion</div>
+              </div>
+              <div class="explanation-step-desc">
+                All phases verified. API is ready for use!
+              </div>
+              <div class="explanation-step-why">
+                api-workflow-check.py blocks completion if anything incomplete.
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -2391,12 +3338,34 @@
       <h3>The State File</h3>
 
       <div class="explanation">
-        <div class="explanation-title">Everything Gets Recorded</div>
+        <div class="explanation-title">Why This Matters</div>
         <p>
           All progress is saved to <code>.claude/api-dev-state.json</code>.
-          This includes <strong>your interview decisions</strong>, which are injected
-          during implementation to ensure consistency.
+          This solves three critical problems:
         </p>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px;">
+          <div style="background: rgba(249, 115, 22, 0.1); border-left: 3px solid var(--claude-orange); padding: 12px; border-radius: 4px;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span style="font-size: 1.5rem;">🎯</span>
+              <strong style="color: var(--claude-orange);">Re-Grounding</strong>
+            </div>
+            <p style="margin: 8px 0 0; font-size: 0.85rem; color: #aaa;">Hooks inject your decisions into every file write, preventing the AI from "forgetting" what you asked for.</p>
+          </div>
+          <div style="background: rgba(249, 115, 22, 0.1); border-left: 3px solid var(--claude-orange); padding: 12px; border-radius: 4px;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span style="font-size: 1.5rem;">💾</span>
+              <strong style="color: var(--claude-orange);">Session Persistence</strong>
+            </div>
+            <p style="margin: 8px 0 0; font-size: 0.85rem; color: #aaa;">Come back tomorrow and pick up where you left off. The state file remembers research, interview answers, and progress.</p>
+          </div>
+          <div style="background: rgba(249, 115, 22, 0.1); border-left: 3px solid var(--claude-orange); padding: 12px; border-radius: 4px;">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <span style="font-size: 1.5rem;">🔄</span>
+              <strong style="color: var(--claude-orange);">Loop-Back Tracking</strong>
+            </div>
+            <p style="margin: 8px 0 0; font-size: 0.85rem; color: #aaa;">When verification finds gaps, we know exactly which phase to return to. No lost context.</p>
+          </div>
+        </div>
       </div>
 
       <div class="json-viewer">
@@ -2458,39 +3427,39 @@
 
       <div class="install-flow">
         <div class="install-step">
-          <div class="install-icon">21</div>
+          <div class="install-icon">📝</div>
           <div class="install-content">
-            <div class="install-from">Slash Commands</div>
+            <div class="install-from">21 Slash Commands</div>
             <div class="install-note">/api-create, /api-interview, /red, /green, /refactor...</div>
           </div>
-          <div class="install-arrow">---></div>
+          <div class="install-arrow">→</div>
           <div class="install-to">.claude/commands/</div>
         </div>
         <div class="install-step">
-          <div class="install-icon">5</div>
+          <div class="install-icon">🐍</div>
           <div class="install-content">
-            <div class="install-from">Python Hooks</div>
+            <div class="install-from">5 Python Hooks</div>
             <div class="install-note">enforce-research, enforce-interview, verify-implementation...</div>
           </div>
-          <div class="install-arrow">---></div>
+          <div class="install-arrow">→</div>
           <div class="install-to">.claude/hooks/</div>
         </div>
         <div class="install-step">
-          <div class="install-icon">+</div>
+          <div class="install-icon">⚙️</div>
           <div class="install-content">
             <div class="install-from">Settings Configuration</div>
             <div class="install-note">Hook registration, permissions, matchers</div>
           </div>
-          <div class="install-arrow">---></div>
+          <div class="install-arrow">→</div>
           <div class="install-to">.claude/settings.json</div>
         </div>
         <div class="install-step">
-          <div class="install-icon">*</div>
+          <div class="install-icon">🔌</div>
           <div class="install-content">
             <div class="install-from">MCP Servers</div>
             <div class="install-note">Context7 (live docs), GitHub (issues/PRs)</div>
           </div>
-          <div class="install-arrow">---></div>
+          <div class="install-arrow">→</div>
           <div class="install-to">claude mcp add</div>
         </div>
       </div>
@@ -2531,14 +3500,41 @@
       </div>
 
       <div class="credit-links">
-        <a href="https://github.com/hustle-together/api-dev-tools" class="credit-link" target="_blank">VIEW ON GITHUB</a>
-        <a href="https://www.npmjs.com/package/@hustle-together/api-dev-tools" class="credit-link" target="_blank">INSTALL FROM NPM</a>
+        <a href="https://github.com/hustle-together/api-dev-tools" class="credit-link" target="_blank">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 8px;">
+            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+          </svg>
+          VIEW ON GITHUB
+        </a>
+        <a href="https://www.npmjs.com/package/@hustle-together/api-dev-tools" class="credit-link" target="_blank">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 8px;">
+            <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/>
+          </svg>
+          INSTALL FROM NPM
+        </a>
+      </div>
+
+      <!-- Attribution -->
+      <div style="margin-top: 32px; padding: 20px; background: rgba(0,0,0,0.2); border-radius: 8px; text-align: center;">
+        <p style="color: #888; font-size: 0.85rem; margin-bottom: 16px;">Built on the shoulders of giants:</p>
+        <div style="display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap;">
+          <a href="https://github.com/wbern/claude-instructions" target="_blank" style="display: flex; align-items: center; gap: 8px; color: var(--claude-orange); text-decoration: none;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+            </svg>
+            <span>@wbern/claude-instructions</span>
+          </a>
+          <a href="https://context7.com" target="_blank" style="display: flex; align-items: center; gap: 8px; color: var(--claude-orange); text-decoration: none;">
+            <span style="font-weight: bold; font-size: 1.1rem;">C7</span>
+            <span>Context7</span>
+          </a>
+        </div>
       </div>
 
       <div class="made-with">
         <p>Made for developers who want AI assistants<br>that actually follow instructions.</p>
         <p style="margin-top: 20px; color: var(--dark-grey);">
-          v1.9.0 | MIT License<br>
+          v3.0.0 | MIT License<br>
           "Interview first, test first, document always"
         </p>
       </div>
@@ -2552,7 +3548,7 @@
     // ============================================
     // CONFIGURATION
     // ============================================
-    const sections = ['intro', 'problems', 'solution', 'hooks', 'phases', 'walkthrough', 'demo', 'state', 'install', 'credits'];
+    const sections = ['intro', 'problems', 'solution', 'hooks', 'phases', 'demo', 'state', 'install', 'credits'];
     let isPlaying = false;
 
     // ============================================
@@ -2754,51 +3750,162 @@
     phasesTL.to('.phase-connector', { opacity: 1, duration: 0.3 }, '-=0.8');
 
     // ============================================
-    // SECTION 6: WALKTHROUGH ANIMATION
+    // SECTION 6: CLAUDE CODE TERMINAL ANIMATION
+    // Animates both terminal messages and explanation panel
     // ============================================
-    const walkthroughTL = gsap.timeline({
+    const demoTL = gsap.timeline({
       scrollTrigger: {
-        trigger: '#walkthrough',
+        trigger: '#demo',
         start: 'top 60%',
         toggleActions: 'play none none reverse'
       }
     });
 
-    walkthroughTL.to('#walkthrough .explanation', { opacity: 1, duration: 0.5 });
+    demoTL.to('#demo .explanation', { opacity: 1, duration: 0.5 });
 
-    document.querySelectorAll('.walkthrough-step').forEach((step, i) => {
-      walkthroughTL.to(step, {
-        opacity: 1,
-        y: 0,
-        duration: 0.4,
-        ease: 'power2.out'
-      }, i * 0.25 + 0.3);
-    });
+    // Get all Claude Code messages and explanation steps
+    const claudeMessages = document.querySelectorAll('#claudeBody .claude-msg');
+    const explanationSteps = document.querySelectorAll('#explanationPanel .explanation-step');
+    const asciiStartup = document.getElementById('asciiStartup');
+    const promptLine = document.getElementById('promptLine');
+    const promptInput = document.getElementById('promptInput');
+    const loadingDots = document.getElementById('loadingDots');
+
+    // Track current phase for syncing explanation panel
+    let currentDemoPhase = 0;
+
+    // Function to update explanation panel
+    function updateExplanationPanel(phase) {
+      explanationSteps.forEach(step => {
+        const stepPhase = parseInt(step.dataset.phase);
+        if (stepPhase === phase) {
+          step.classList.add('active');
+          // Scroll the explanation panel to show the active step
+          step.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        } else if (stepPhase < phase) {
+          // Keep previous phases visible but not active
+          step.classList.remove('active');
+          step.style.opacity = '0.7';
+        } else {
+          step.classList.remove('active');
+          step.style.opacity = '0.5';
+        }
+      });
+    }
 
-    // ============================================
-    // SECTION 7: DEMO TERMINAL ANIMATION
-    // ============================================
-    const demoTL = gsap.timeline({
-      scrollTrigger: {
-        trigger: '#demo',
-        start: 'top 60%',
-        toggleActions: 'play none none reverse'
+    // Typing effect for prompt
+    function typeText(element, text, speed = 50) {
+      return new Promise(resolve => {
+        let i = 0;
+        element.textContent = '';
+        const interval = setInterval(() => {
+          if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+          } else {
+            clearInterval(interval);
+            resolve();
+          }
+        }, speed);
+      });
+    }
+
+    // Show loading dots animation
+    function showLoadingDots(show = true) {
+      loadingDots.style.display = show ? 'inline-flex' : 'none';
+    }
+
+    // Step 1: Show ASCII startup screen (2 seconds)
+    demoTL.to(asciiStartup, {
+      opacity: 1,
+      duration: 0.5,
+      onStart: () => {
+        asciiStartup.style.display = 'block';
+        asciiStartup.classList.add('visible');
       }
-    });
+    }, 0.5);
+
+    // Step 2: Show prompt line and type command (after ASCII)
+    demoTL.to(promptLine, {
+      opacity: 1,
+      duration: 0.3,
+      onStart: () => {
+        promptLine.classList.add('visible');
+      },
+      onComplete: () => {
+        // Type the command
+        typeText(promptInput, '/api-create brandfetch', 60);
+      }
+    }, 2.5);
+
+    // Step 3: Hide ASCII and prompt, show messages (after typing)
+    demoTL.to([asciiStartup, promptLine], {
+      opacity: 0,
+      duration: 0.3,
+      onComplete: () => {
+        asciiStartup.style.display = 'none';
+        promptLine.style.display = 'none';
+      }
+    }, 5.5);
 
-    demoTL.to('#demo .explanation', { opacity: 1, duration: 0.5 });
+    // Get terminal body for scrolling
+    const claudeBody = document.getElementById('claudeBody');
+
+    // Animate each message SEQUENTIALLY using relative positioning
+    // Each message waits 1.5s after the PREVIOUS one completes
+    claudeMessages.forEach((msg, i) => {
+      const phase = parseInt(msg.dataset.phase);
+
+      // First message starts after ASCII animation (at 6s mark)
+      // Subsequent messages use +=1.5 (1.5s after previous completes)
+      const position = i === 0 ? 6.0 : '+=1.0'; // 1 second gap between messages
+
+      // Show loading dots before each message (except first)
+      if (i > 0) {
+        // Add loading dots that appear for 0.8s before message
+        demoTL.call(() => {
+          showLoadingDots(true);
+        }, null, '+=0.2'); // Small gap after previous message
 
-    // Get all terminal elements in order
-    const terminalElements = document.querySelectorAll('#demo .terminal-comment, #demo .terminal-line');
-    terminalElements.forEach((el, i) => {
-      const delay = i * 0.25 + 0.5;
-      demoTL.to(el, {
+        demoTL.to({}, { duration: 0.8 }); // Hold for loading dots
+
+        demoTL.call(() => {
+          showLoadingDots(false);
+        });
+      }
+
+      // Add message to timeline
+      demoTL.to(msg, {
         opacity: 1,
-        duration: 0.3,
-        ease: 'power2.out'
-      }, delay);
+        y: 0,
+        duration: 0.5,
+        ease: 'power2.out',
+        onStart: () => {
+          msg.classList.add('visible');
+          // Update explanation panel when phase changes
+          if (phase !== currentDemoPhase) {
+            currentDemoPhase = phase;
+            updateExplanationPanel(phase);
+          }
+        },
+        onComplete: () => {
+          // Scroll terminal to show new message after it appears
+          if (claudeBody) {
+            const msgTop = msg.offsetTop;
+            const bodyHeight = claudeBody.clientHeight;
+            const scrollTarget = Math.max(0, msgTop - bodyHeight + msg.offsetHeight + 40);
+            claudeBody.scrollTo({
+              top: scrollTarget,
+              behavior: 'smooth'
+            });
+          }
+        }
+      }, i === 0 ? position : '<'); // '<' means at same time as loading dots hide
     });
 
+    // Initialize explanation panel (show first step as active)
+    updateExplanationPanel(0);
+
     // ============================================
     // SECTION 8: STATE FILE ANIMATION
     // ============================================
@@ -3131,67 +4238,45 @@
     }
 
     // Handle seek on progress bar click
-    async function onProgressBarClick(e) {
+    function onProgressBarClick(e) {
       e.stopPropagation(); // Prevent event bubbling
+      e.preventDefault();
 
-      // Use the progress bar's rect for calculation
+      // Must have timing data loaded to seek
+      if (!timingData || !timingData.duration) {
+        console.warn('Cannot seek: timing data not loaded');
+        return;
+      }
+
+      // Calculate seek position from click location
       const rect = audioProgressBar.getBoundingClientRect();
       const clickX = e.clientX - rect.left;
       const percentage = Math.max(0, Math.min(1, clickX / rect.width));
+      const seekTime = percentage * timingData.duration;
 
-      // ALWAYS prefer timingData.duration (most reliable after voice switch)
-      // Only fall back to narrationAudio.duration if timing data unavailable
-      let duration = (timingData && timingData.duration > 0) ? timingData.duration : narrationAudio.duration;
-
-      if (!duration || duration === 0 || isNaN(duration)) {
-        console.warn('No duration available, waiting for audio to load...');
-        // Wait for audio to load
-        await new Promise((resolve) => {
-          let resolved = false;
-          const tryResolve = () => {
-            if (!resolved && narrationAudio.duration > 0) {
-              resolved = true;
-              resolve();
-            }
-          };
-          narrationAudio.addEventListener('loadedmetadata', tryResolve, { once: true });
-          narrationAudio.addEventListener('canplay', tryResolve, { once: true });
-          narrationAudio.load();
-          setTimeout(() => { if (!resolved) { resolved = true; resolve(); } }, 2000);
-        });
-        duration = narrationAudio.duration;
-        if (!duration || duration === 0 || isNaN(duration)) {
-          console.error('Still no duration available after waiting');
-          return;
-        }
-      }
-
-      const seekTime = percentage * duration;
-      console.log(`Progress bar click: seeking to ${seekTime.toFixed(1)}s (${(percentage * 100).toFixed(1)}%) using duration ${duration.toFixed(1)}s`);
+      console.log(`Progress bar click: seeking to ${seekTime.toFixed(1)}s (${(percentage * 100).toFixed(1)}%)`);
 
-      // Pause, seek, then play (most reliable method)
+      // Remember if we were playing
       const wasPlaying = !narrationAudio.paused;
-      narrationAudio.pause();
 
-      // Ensure audio is ready to seek (especially important after voice switch)
-      if (narrationAudio.readyState < 2) {
-        console.log('Waiting for audio to be ready for seeking...');
-        await new Promise((resolve) => {
-          narrationAudio.addEventListener('canplay', resolve, { once: true });
-          setTimeout(resolve, 1000);
-        });
+      // Directly set currentTime - DON'T call load() or pause() first
+      // The browser handles seeking while playing
+      try {
+        narrationAudio.currentTime = seekTime;
+        console.log(`Set currentTime to: ${narrationAudio.currentTime.toFixed(1)}s`);
+      } catch (err) {
+        console.error('Failed to set currentTime:', err);
+        return;
       }
 
-      narrationAudio.currentTime = seekTime;
-      console.log(`After setting currentTime: ${narrationAudio.currentTime.toFixed(1)}s`);
-
-      if (wasPlaying) {
+      // If we weren't playing but user clicked progress bar, start playing
+      if (wasPlaying || isPlaying) {
         narrationAudio.play().catch(err => console.error('Playback failed:', err));
       }
 
-      // Reset highlight tracking
+      // Update highlight tracking for the new position
       highlightIndex = 0;
-      if (timingData && timingData.highlights) {
+      if (timingData.highlights) {
         for (let i = 0; i < timingData.highlights.length; i++) {
           if (timingData.highlights[i].timestamp <= seekTime) {
             highlightIndex = i;
@@ -3199,6 +4284,36 @@
             break;
           }
         }
+        // Apply highlight immediately
+        if (highlightIndex >= 0 && highlightIndex < timingData.highlights.length) {
+          applyHighlight(timingData.highlights[highlightIndex].selector);
+        }
+      }
+
+      // Scroll to correct section
+      if (timingData.sections) {
+        let sectionIdx = 0;
+        for (let i = 0; i < timingData.sections.length; i++) {
+          if (seekTime >= timingData.sections[i].timestamp) {
+            sectionIdx = i;
+          } else {
+            break;
+          }
+        }
+        currentSectionIdx = sectionIdx;
+        updateActiveChapter(sectionIdx);
+        const sectionEl = document.getElementById(timingData.sections[sectionIdx].id);
+        if (sectionEl) {
+          sectionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      }
+
+      // Update UI immediately
+      if (audioProgressFill) {
+        audioProgressFill.style.width = `${percentage * 100}%`;
+      }
+      if (audioCurrentTime) {
+        audioCurrentTime.textContent = formatTime(seekTime);
       }
     }
 
@@ -3241,6 +4356,7 @@
       if (audioEnabled && timingData) {
         // Try to play audio
         audioProgressContainer.style.display = 'block';
+        document.body.classList.add('audio-playing'); // Adjust section heights
 
         try {
           await narrationAudio.play();
@@ -3252,6 +4368,7 @@
           audioToggleBtn.textContent = '🔇 NO AUDIO';
           audioToggleBtn.classList.add('disabled');
           audioProgressContainer.style.display = 'none';
+          document.body.classList.remove('audio-playing');
           startSilentAutoPlay();
         }
       } else {
@@ -3274,6 +4391,7 @@
       narrationAudio.pause();
       narrationAudio.currentTime = 0;
       audioProgressContainer.style.display = 'none';
+      document.body.classList.remove('audio-playing'); // Reset section heights
       removeHighlight();
       highlightIndex = 0;
       currentSectionIdx = 0;
@@ -3386,7 +4504,6 @@
         gsap.set('.flow-box, .flow-arrow, .hook-group, .hook-file', { opacity: 0 });
         gsap.set('.result-allowed, .result-blocked', { opacity: 0 });
         gsap.set('.phase-box', { opacity: 0, scale: 0.9 });
-        gsap.set('.walkthrough-step', { opacity: 0, y: 20 });
         gsap.set('.terminal-line, .terminal-comment', { opacity: 0 });
         gsap.set('.json-line', { opacity: 0 });
         gsap.set('.install-step', { opacity: 0, y: 20 });