npm - groove-dev - Versions diffs - 0.26.15 → 0.26.17 - Mend

groove-dev 0.26.15 → 0.26.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (976) hide show

package/pitch_deck/index.html DELETED Viewed

@@ -1,718 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Groove AI Pitch Deck</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/simple.min.css" id="theme">
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
-    :root {
-      --r-main-font: 'Inter', Helvetica, sans-serif;
-      --r-heading-font: 'Inter', Helvetica, sans-serif;
-      --navy: #0D2137;
-      --cyan: #4DD9C0;
-      --dark-red: #D94D4D;
-      --light-bg: #F8F9FA;
-      --text-dark: #1A1A1A;
-      --text-light: #FFFFFF;
-    }
-    .reveal {
-      font-family: var(--r-main-font);
-      color: var(--text-dark);
-    }
-    .reveal .slide-background { background-color: var(--light-bg); }
-    .reveal .slide-background.navy-bg { background-color: var(--navy); }
-    .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
-      text-transform: none;
-      font-weight: 800;
-      letter-spacing: -0.02em;
-    }
-    .reveal h1 { font-size: 3em; }
-    .reveal h2 { font-size: 2.2em; margin-bottom: 1em; }
-    .reveal section.navy-bg h1,
-    .reveal section.navy-bg h2,
-    .reveal section.navy-bg h3,
-    .reveal section.navy-bg p,
-    .reveal section.navy-bg li,
-    .reveal section.navy-bg .footer-logo {
-      color: var(--text-light);
-    }
-    .accent-cyan { color: var(--cyan) !important; }
-    .accent-red { color: var(--dark-red) !important; }
-    .footer-logo {
-      position: absolute;
-      bottom: 20px;
-      left: 20px;
-      font-size: 14px;
-      color: #666;
-      font-weight: 600;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .logo-infinity {
-      color: var(--cyan);
-      font-size: 1.5em;
-      line-height: 1;
-      font-weight: 800;
-    }
-    .text-left { text-align: left; }
-    .text-center { text-align: center; }
-    .reveal ul { display: block; padding-left: 1.5em; }
-    .reveal ul li { margin-bottom: 0.6em; font-size: 0.85em; line-height: 1.4; }
-    /* Layouts */
-    .split {
-      display: flex;
-      gap: 40px;
-      align-items: flex-start;
-      text-align: left;
-    }
-    .split > div { flex: 1; }
-    .grid-cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 20px;
-      font-size: 0.7em;
-      text-align: left;
-    }
-    .card {
-      background: white;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-      border-top: 4px solid var(--cyan);
-    }
-    .card.problem-card { border-top-color: var(--dark-red); }
-    .card h3 { font-size: 1.3em; margin-top: 0; }
-    .navy-bg .card {
-      background: rgba(255, 255, 255, 0.05);
-      box-shadow: none;
-    }
-    .highlight-box {
-      background: rgba(77, 217, 192, 0.1);
-      border-left: 4px solid var(--cyan);
-      padding: 25px;
-      border-radius: 0 8px 8px 0;
-      margin: 20px 0;
-      font-weight: 600;
-    }
-    .hero-icon {
-      font-size: 5em;
-      color: var(--cyan);
-      margin-bottom: 20px;
-      font-weight: 800;
-      letter-spacing: -5px;
-    }
-    .stat-large {
-      font-size: 3em;
-      font-weight: 800;
-      color: var(--cyan);
-      display: block;
-      line-height: 1;
-      margin-bottom: 10px;
-    }
-    .diagram-placeholder {
-      background: rgba(0,0,0,0.03);
-      border: 2px dashed #ccc;
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      color: #888;
-      font-weight: 600;
-    }
-    .navy-bg .diagram-placeholder {
-      background: rgba(255,255,255,0.03);
-      border-color: rgba(255,255,255,0.2);
-      color: rgba(255,255,255,0.5);
-    }
-  </style>
-</head>
-<body>
-  <div class="reveal">
-    <div class="footer-logo">
-      <span class="logo-infinity">∞</span> groove ai | grooveai.dev · github.com/grooveai-dev · Open Source
-    </div>
-    <div class="slides">
-      <!-- SLIDE 1: Cover -->
-      <section data-state="navy-bg" class="navy-bg text-center">
-        <div class="hero-icon">∞</div>
-        <h1>groove ai</h1>
-        <h3 style="color: #ccc; font-weight: 400;">The intelligent orchestration layer for AI coding agents.</h3>
-        <br>
-        <p class="accent-cyan" style="font-weight: 600; font-size: 1.2em;">
-          Coordinate agents. Eliminate cold-start. Save 40–60% on tokens. Automatically.
-        </p>
-      </section>
-      <!-- SLIDE 2: The Problem -->
-      <section>
-        <h2 class="text-left">AI coding tools are broken at the multi-agent level.</h2>
-        <div class="grid-cards">
-          <div class="card problem-card">
-            <h3>💥 Agents clash</h3>
-            <p>Two sessions on the same project edit the same files, make contradictory decisions, and waste tokens on discarded work. They are blind to each other.</p>
-          </div>
-          <div class="card problem-card">
-            <h3>🧊 Cold-start tax</h3>
-            <p>Every new session starts blind. Developers spend 5-10 minutes and thousands of tokens re-explaining the stack, architecture, and current state.</p>
-          </div>
-          <div class="card problem-card">
-            <h3>📉 Context degradation</h3>
-            <p>Context windows fill up, compaction is lossy, and model quality drops over time. Quality becomes unpredictable and uncontrollable.</p>
-          </div>
-          <div class="card problem-card">
-            <h3>💸 Invisible token waste</h3>
-            <p>No per-agent, per-task, or per-session breakdown. Users see a high bill with opaque value and zero visibility into where tokens actually go.</p>
-          </div>
-          <div class="card problem-card">
-            <h3>💻 Terminal-only</h3>
-            <p>Requires terminal comfort. Non-technical founders, designers, and domain experts are locked out. No visual interface for workflows.</p>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 3: The Solution -->
-      <section>
-        <h2 class="text-left">Groove AI — the coordination layer your agents are missing.</h2>
-        <div class="split">
-          <div class="diagram-placeholder" style="flex: 0.8;">
-            [ Visual Diagram: Agent tree with Groove daemon at the center ]
-          </div>
-          <div class="text-left">
-            <p style="font-size: 0.9em; margin-top:0;">Groove is a lightweight open-source daemon that sits alongside Claude Code. It does not replace your tools. It makes them work together.</p>
-            <ul>
-              <li><strong class="accent-cyan">Introduction Protocol:</strong> Second agent auto-introduces to the first. Zero config required.</li>
-              <li><strong class="accent-cyan">The Journalist:</strong> Background agent writes living documentation (Project Map, Decisions). One-read cold-start.</li>
-              <li><strong class="accent-cyan">File Lock Manager:</strong> Directory ownership prevents concurrent conflicting writes.</li>
-              <li><strong class="accent-cyan">QC Supervisor:</strong> Auto-spawns at scale. Reviews, flags conflicts, and routes approvals.</li>
-              <li><strong class="accent-cyan">Visual Agent Tree:</strong> React GUI in cmux pane. Drill into terminals and manage agents visually.</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 4: How It Works -->
-      <section>
-        <h2 class="text-left">Spawn fast. Stay aware. Never lose context.</h2>
-        <div class="split">
-          <div class="text-left" style="font-size: 0.85em;">
-            <ul>
-              <li><strong>Spawn:</strong> <code>groove spawn --backend</code></li>
-              <li><strong>Register:</strong> Daemon registers agent in registry.</li>
-              <li><strong>Initialize:</strong> Claude Code opens in a cmux pane with Journalist brief.</li>
-              <li><strong>Coordinate:</strong> Next agent spawns. Daemon writes an introduction. File locks map updates.</li>
-              <li><strong>Scale:</strong> At 4 agents, QC supervisor auto-spawns to route approvals.</li>
-              <li><strong>Synthesize:</strong> Session ends. Journalist updates project map and logs decisions.</li>
-              <li><strong>Repeat:</strong> Next session cold-starts in under 30s with full context.</li>
-            </ul>
-            <div class="highlight-box" style="font-family: monospace;">
-              npm install -g groove-ai<br>
-              groove start
-            </div>
-          </div>
-          <div class="diagram-placeholder">
-            [ Flowchart & Mockup: cmux terminal + GUI side by side ]
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 5: The Journalist -->
-      <section data-state="navy-bg" class="navy-bg text-left">
-        <h2>The cold-start problem. Solved at the system level.</h2>
-        <p style="font-size: 0.9em;">The Journalist is a background process that tails stdout streams, calls the Claude API, and writes living markdown files for every future session.</p>
-        <div class="split" style="margin-top: 30px;">
-          <div>
-            <h3 class="accent-cyan" style="font-size: 1.2em;">Without Groove</h3>
-            <p style="color:#d94d4d; font-size: 1.1em; font-weight: bold;">4,000–8,000 tokens</p>
-            <p style="font-size: 0.8em; opacity: 0.8;">Manual context reconstruction. High friction.</p>
-          </div>
-          <div>
-            <h3 class="accent-cyan" style="font-size: 1.2em;">With Groove</h3>
-            <p style="color:#4dd9c0; font-size: 1.1em; font-weight: bold;">400–600 tokens</p>
-            <p style="font-size: 0.8em; opacity: 0.8;">Instant context via GROVE_PROJECT_MAP.md.</p>
-          </div>
-        </div>
-        <div class="highlight-box">
-          90% reduction in cold-start token cost. Per session. Every session.<br>
-          <span style="font-size: 0.8em; font-weight: 400; opacity: 0.8;">The data flywheel compounds. The more agents you run, the richer the documentation.</span>
-        </div>
-      </section>
-      <!-- SLIDE 6: Token Economics -->
-      <section class="text-left">
-        <h2>Groove pays for itself in the first session.</h2>
-        <div class="split">
-          <div>
-            <span class="stat-large">40–60%</span>
-            <p style="font-weight: bold;">Total addressable waste in current token spend</p>
-            <ul style="margin-top: 20px;">
-              <li>Cold-start context reconstruction: <strong>20–30%</strong></li>
-              <li>Redundant re-explanation: <strong>15–25%</strong></li>
-              <li>Degraded context window corrections: <strong>10–20%</strong></li>
-              <li>Wrong model for task complexity: <strong>10–15%</strong></li>
-            </ul>
-          </div>
-          <div class="card" style="background: var(--light-bg); border: 1px solid #ddd;">
-            <h3 style="font-size: 1.1em;">The Provider Alignment</h3>
-            <p style="font-size: 0.8em;">
-              AI coding subscriptions are heavily subsidized. Claude Max users cost Anthropic an estimated $3,000–$5,000/mo in API costs on a $200 plan.<br><br>
-              Every token Groove saves is a dollar of subsidy Anthropic doesn't have to spend. Groove reduces provider costs while improving user outcomes.
-            </p>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 7: Market Opportunity -->
-      <section class="text-left">
-        <h2>The multi-agent development layer is wide open.</h2>
-        <p style="font-size: 0.9em;">Six months ago: Single AI assistant.<br>Today: Coordinating multiple agents running asynchronously. Tooling hasn't caught up.</p>
-        <div class="grid-cards" style="margin-top: 30px;">
-          <div class="card">
-            <h3>🎯 Target Market</h3>
-            <ul>
-              <li><strong>Primary:</strong> Power developers running 2+ sessions.</li>
-              <li><strong>Secondary:</strong> Indie hackers & solo founders.</li>
-              <li><strong>Tertiary:</strong> Non-technical builders.</li>
-              <li><strong>Enterprise:</strong> Dev teams needing audit logs & budgets.</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>⏱️ Why Now?</h3>
-            <ul>
-              <li>Claude Code launched Feb 2025.</li>
-              <li>Agent Teams proved direction, but are top-down.</li>
-              <li>No bottom-up, dynamic coordination tool exists.</li>
-            </ul>
-          </div>
-          <div class="card">
-            <h3>🚀 Comparable</h3>
-            <p style="margin-top: 10px;">Cursor reached a $9B valuation building a layer on VS Code. Groove is building the workflow layer on top of Claude Code.</p>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 8: Competitive Landscape -->
-      <section class="text-left">
-        <h2>Nobody owns this layer. Yet.</h2>
-        <div class="split">
-          <div class="diagram-placeholder" style="flex: 0.8; flex-direction: column;">
-            <p style="margin-bottom: 5px;">[ 2x2 Positioning Grid ]</p>
-            <p style="font-size: 0.7em; opacity: 0.7;">Y: Terminal -> GUI | X: Single -> Multi-Agent</p>
-            <p style="font-weight:bold; color:var(--cyan); margin-top:20px;">Groove in Top-Right Quadrant</p>
-          </div>
-          <div style="font-size: 0.85em;">
-            <h3 class="accent-cyan" style="font-size: 1.2em; margin-bottom: 10px;">Groove's Differentiation</h3>
-            <ul>
-              <li><strong>Bottom-up dynamic spawning:</strong> Spawn agents on demand.</li>
-              <li><strong>The Journalist:</strong> Only tool solving cold-start at the system level.</li>
-              <li><strong>Multi-tool:</strong> Claude Code, Codex, Gemini, local models.</li>
-              <li><strong>GUI Accessible:</strong> Manage visually in the browser pane.</li>
-              <li><strong>Compliance-forward:</strong> Fully aligned with provider ToS.</li>
-            </ul>
-            <h3 class="accent-cyan" style="font-size: 1.2em; margin-top: 20px; margin-bottom: 10px;">The Moat Over Time</h3>
-            <ul>
-              <li>Journalist data flywheel (richer context).</li>
-              <li>Community team configs (network effects).</li>
-              <li>Token efficiency benchmarks.</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 9: Product Roadmap -->
-      <section class="text-left">
-        <h2>Five phases from daemon to platform.</h2>
-        <div style="font-size: 0.8em; margin-top: 30px;">
-          <div style="border-left: 3px solid var(--navy); padding-left: 20px; margin-bottom: 20px;">
-            <h3 style="margin: 0; font-size: 1.2em;">Phase 1 — Core Coordination (Weeks 1–2)</h3>
-            <p style="margin: 5px 0;">Daemon, registry, WebSocket API, introduction protocol. <em>Goal: Agents don't clash.</em></p>
-          </div>
-          <div style="border-left: 3px solid #1a3c61; padding-left: 20px; margin-bottom: 20px;">
-            <h3 style="margin: 0; font-size: 1.2em;">Phase 2 — The Journalist (Weeks 2–3)</h3>
-            <p style="margin: 5px 0;">Stdout tail, synthesis loop, living markdown. <em>Goal: Cold-start injection.</em></p>
-          </div>
-          <div style="border-left: 3px solid #2a5b8e; padding-left: 20px; margin-bottom: 20px;">
-            <h3 style="margin: 0; font-size: 1.2em;">Phase 3 — Visual GUI (Weeks 3–4)</h3>
-            <p style="margin: 5px 0;">React app in cmux, agent tree, terminals. <em>Goal: Visual management.</em></p>
-          </div>
-          <div style="border-left: 3px solid #3c82c2; padding-left: 20px; margin-bottom: 20px;">
-            <h3 style="margin: 0; font-size: 1.2em;">Phase 4 — QC Supervisor (Weeks 4–5)</h3>
-            <p style="margin: 5px 0;">Auto-spawn at threshold, route approvals. <em>Goal: Hands-off autopilot.</em></p>
-          </div>
-          <div style="border-left: 3px solid var(--cyan); padding-left: 20px;">
-            <h3 style="margin: 0; font-size: 1.2em;">Phase 5 — Multi-Provider + Launch</h3>
-            <p style="margin: 5px 0;">Local models, adaptive routing, public launch. <em>Goal: Public availability.</em></p>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 10: Business Model -->
-      <section data-state="navy-bg" class="navy-bg text-left">
-        <h2>Free forever at the core. Revenue from the layer above.</h2>
-        <div class="grid-cards" style="margin-top: 30px;">
-          <div class="card" style="background: rgba(255,255,255,0.1);">
-            <h3 style="color: white;">Free Tier</h3>
-            <p style="opacity: 0.8; font-size: 0.9em; margin-bottom: 10px;">The distribution engine</p>
-            <ul style="padding-left: 1.2em;">
-              <li>3 concurrent agents</li>
-              <li>Manual context rotation</li>
-              <li>Basic GUI tree</li>
-              <li>10-min Journalist intervals</li>
-            </ul>
-          </div>
-          <div class="card" style="border-top-width: 6px; border-top-color: var(--cyan); transform: scale(1.05);">
-            <h3 class="accent-cyan">Groove Pro — $20/mo</h3>
-            <p style="opacity: 0.8; font-size: 0.9em; margin-bottom: 10px;">Pays for itself in one session</p>
-            <ul style="padding-left: 1.2em;">
-              <li>Unlimited concurrent agents</li>
-              <li>Adaptive rotation & full frequency</li>
-              <li>Token dashboard & saved configs</li>
-              <li>All providers (incl. local models)</li>
-            </ul>
-          </div>
-          <div class="card" style="background: rgba(255,255,255,0.1);">
-            <h3 style="color: white;">Groove Team — $40/user</h3>
-            <p style="opacity: 0.8; font-size: 0.9em; margin-bottom: 10px;">For professional dev teams</p>
-            <ul style="padding-left: 1.2em;">
-              <li>Shared team config registry</li>
-              <li>Team-wide Journalist & project map</li>
-              <li>Token budgets & routing policies</li>
-              <li>Audit logs & compliance exports</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 11: Traction & Validation -->
-      <section class="text-left">
-        <h2>Built by a practitioner. Validated by the problem.</h2>
-        <div class="split" style="margin-top: 30px;">
-          <div style="font-size: 0.85em;">
-            <p><strong>Ryan [Founder]</strong> — Founder of Studio19 by Motovizion. Runs automated multi-agent Claude Code infrastructure in production for AI digital marketing.</p>
-            <div class="highlight-box" style="margin: 15px 0;">
-              This is not a tool built by someone theorizing about workflows. It is built by someone who needed it and couldn't find it.
-            </div>
-            <ul>
-              <li>Domain & NPM package secured.</li>
-              <li>North star architecture complete.</li>
-              <li>Phase 1 development in progress.</li>
-            </ul>
-          </div>
-          <div class="card" style="background: var(--light-bg); border: 1px dashed #ccc;">
-            <h3 style="font-size: 1.1em;">Why the timing is right</h3>
-            <ul style="margin-top: 15px;">
-              <li>Claude Code mainstream in early 2025.</li>
-              <li>Multi-agent workflows becoming standard.</li>
-              <li>No tool currently owns the coordination layer.</li>
-              <li>Provider economics create strategic alignment.</li>
-            </ul>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 12: Go-To-Market -->
-      <section class="text-left">
-        <h2>Distribution first. Monetization second.</h2>
-        <div class="split">
-          <div style="font-size: 0.8em;">
-            <h3 class="accent-cyan" style="font-size: 1.2em;">Phase 1 Channels</h3>
-            <ul>
-              <li>Hacker News Show HN launch.</li>
-              <li>Reddit (r/ClaudeAI, r/LocalLLaMA) — story-first.</li>
-              <li>Product Hunt coordinated launch.</li>
-              <li>X/Twitter reply-guy strategy adding value to token cost convos.</li>
-            </ul>
-            <h3 class="accent-cyan" style="font-size: 1.2em; margin-top: 20px;">The Viral Loops</h3>
-            <ul>
-              <li>Session summaries (screenshot-worthy savings).</li>
-              <li>Shareable team configs (stack templates).</li>
-              <li>Live token savings counter on landing page.</li>
-            </ul>
-          </div>
-          <div class="highlight-box" style="flex: 0.8; font-size: 0.9em;">
-            <strong style="font-size: 1.1em; color: var(--navy);">The demo GIF is the product.</strong><br><br>
-            A 30s GIF showing: agents spawning, tree updating, conflict prevented, token savings achieved.<br><br>
-            It goes in the README, landing page, and every tweet. It sells before anyone reads a word.
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 13: Provider Partnership Strategy -->
-      <section class="text-left">
-        <h2>Groove saves Anthropic money. That is the pitch.</h2>
-        <div class="split" style="margin-top: 30px;">
-          <div>
-            <h3 style="font-size: 1.1em; color: var(--dark-red);">The Subsidy Problem</h3>
-            <p style="font-size: 0.8em;">Most 3rd-party tools get banned because they are adversarial wrappers that consume subsidized tokens faster. They cost providers money.</p>
-            <h3 style="font-size: 1.1em; color: var(--cyan); margin-top: 20px;">The Strategic Alignment</h3>
-            <p style="font-size: 0.8em;">Groove reduces token consumption by 40–60% per session. For every 10,000 Max users, Anthropic saves an estimated $20–30M per month in subsidy costs.</p>
-          </div>
-          <div class="card" style="background: var(--navy); color: white;">
-            <h3 class="accent-cyan" style="font-size: 1.1em; margin-top:0;">The Ask</h3>
-            <p style="font-size: 0.85em; opacity: 0.9;">
-              We are not asking for investment from Anthropic.<br><br>
-              We are asking for recognition that Groove is aligned infrastructure.<br><br>
-              A mention in the Claude Code docs and an intro to DevRel is the entire ask.
-            </p>
-          </div>
-        </div>
-      </section>
-      <!-- SLIDE 14: The Vision -->
-      <section data-state="navy-bg" class="navy-bg text-left">
-        <h2 style="font-size: 1.8em; max-width: 900px;">What if every developer had an AI team that never forgot anything?</h2>
-        <div class="split" style="margin-top: 40px; font-size: 0.85em;">
-          <div>
-            <h3 class="accent-cyan">12-Month Vision</h3>
-            <ul>
-              <li>Standard coordination layer for Claude Code.</li>
-              <li>500+ shared team configs in registry.</li>
-              <li>Provider partnership with Anthropic.</li>
-              <li>500+ paying Pro subscribers proving ROI.</li>
-            </ul>
-          </div>
-          <div>
-            <h3 class="accent-cyan">3-Year Vision</h3>
-            <ul>
-              <li>Tool-agnostic (Codex, Gemini, Local).</li>
-              <li>Enterprise tier with shared project maps.</li>
-              <li>Developer marketplace for agent setups.</li>
-              <li>Every serious AI workflow runs on Groove.</li>
-            </ul>
-          </div>
-        </div>
-        <div class="highlight-box" style="margin-top: 30px; border-left-color: white; background: rgba(255,255,255,0.1);">
-          The longer developers use Groove, the richer their context becomes. The Journalist is a data flywheel that compounds indefinitely.
-        </div>
-      </section>
-      <!-- SLIDE 15: The Ask -->
-      <section class="navy-bg text-center" data-state="navy-bg">
-        <div class="hero-icon" style="font-size: 3em; margin-bottom: 10px;">∞</div>
-        <h2 style="margin-bottom: 30px;">Let's build the coordination layer.</h2>
-        <div class="grid-cards" style="text-align: left; max-width: 900px; margin: 0 auto; gap: 30px;">
-          <div>
-            <h3 class="accent-cyan" style="font-size: 1.1em;">What would accelerate us</h3>
-            <ul style="font-size: 0.8em;">
-              <li><strong>Community:</strong> Early adopters to test & share.</li>
-              <li><strong>Visibility:</strong> Newsletter mentions, HN/Product Hunt.</li>
-              <li><strong>Partnerships:</strong> DevRel intros at Anthropic/OpenAI.</li>
-              <li><strong>Investment:</strong> Pre-seed capital for full-time dev.</li>
-            </ul>
-          </div>
-          <div>
-            <h3 class="accent-cyan" style="font-size: 1.1em;">What we offer</h3>
-            <ul style="font-size: 0.8em;">
-              <li>Working product solving real daily problems.</li>
-              <li>Open source codebase (forkable, permanent).</li>
-              <li>Token efficiency data of high economic value.</li>
-              <li>First-mover position in a new category.</li>
-            </ul>
-          </div>
-        </div>
-        <div style="margin-top: 50px; font-weight: 600; font-size: 1.1em;">
-          grooveai.dev | github.com/grooveai-dev | hello@grooveai.dev
-        </div>
-      </section>
-      <!-- APPENDIX SLIDES -->
-      <section class="text-left">
-        <h2>Appendix A1: Technical Architecture Deep-Dive</h2>
-        <div class="split">
-          <div class="diagram-placeholder" style="flex: 0.6; min-height: 400px;">
-            [ Architecture Diagram ]
-          </div>
-          <div style="font-size: 0.8em;">
-            <p><strong>Core Components:</strong> Daemon, Registry, Introducer, Lock Manager, Journalist, QC Supervisor, GUI, CLI.</p>
-            <p><strong>Tech Stack:</strong></p>
-            <ul>
-              <li>Backend: Node.js, WebSockets</li>
-              <li>Frontend: React, xterm.js, React Flow</li>
-              <li>Storage: Local file system (Markdown, JSON)</li>
-            </ul>
-            <p class="accent-red" style="font-weight:bold; margin-top: 15px;">Compliance Note</p>
-            <p>Groove is not a wrapper or harness. It orchestrates official CLI tools, preserving the exact Terms of Service of the underlying providers.</p>
-          </div>
-        </div>
-      </section>
-      <section class="text-left">
-        <h2>Appendix A2: Token Savings Methodology</h2>
-        <p style="font-size: 0.9em; max-width: 800px;">How the 40–60% savings estimate was derived.</p>
-        <table style="font-size: 0.7em; width: 100%; border-collapse: collapse; margin-top: 20px;">
-          <tr style="border-bottom: 2px solid var(--navy); text-align: left;">
-            <th style="padding: 10px;">Component</th>
-            <th style="padding: 10px;">Mechanism</th>
-            <th style="padding: 10px;">Est. Savings</th>
-          </tr>
-          <tr style="border-bottom: 1px solid #eee;">
-            <td style="padding: 10px;"><strong>Cold-Start</strong></td>
-            <td style="padding: 10px;">Replacing 4k-8k manual context tokens with 400-600 token Journalist Map read.</td>
-            <td style="padding: 10px;">20–30%</td>
-          </tr>
-          <tr style="border-bottom: 1px solid #eee;">
-            <td style="padding: 10px;"><strong>Duplicate Work</strong></td>
-            <td style="padding: 10px;">File Lock Manager prevents conflicting edits and rewrite loops.</td>
-            <td style="padding: 10px;">10–15%</td>
-          </tr>
-          <tr style="border-bottom: 1px solid #eee;">
-            <td style="padding: 10px;"><strong>Context Rotation</strong></td>
-            <td style="padding: 10px;">Automated rotation before quality drops, preventing hallucination spirals.</td>
-            <td style="padding: 10px;">10–15%</td>
-          </tr>
-          <tr>
-            <td style="padding: 10px;"><strong>Model Routing</strong></td>
-            <td style="padding: 10px;">Using local models/cheaper models for simple validations (Phase 5).</td>
-            <td style="padding: 10px;">5–10%</td>
-          </tr>
-        </table>
-      </section>
-      <section class="text-left">
-        <h2>Appendix A3: Competitive Analysis Detail</h2>
-        <div style="font-size: 0.65em; overflow-x: auto;">
-          <table style="width: 100%; border-collapse: collapse;">
-            <tr style="border-bottom: 2px solid var(--navy); text-align: left; background: rgba(0,0,0,0.03);">
-              <th style="padding: 8px;">Feature</th>
-              <th style="padding: 8px;">Groove</th>
-              <th style="padding: 8px;">Agent Teams</th>
-              <th style="padding: 8px;">Terminal Muxers</th>
-              <th style="padding: 8px;">IDE AI (Cursor)</th>
-            </tr>
-            <tr style="border-bottom: 1px solid #eee;">
-              <td style="padding: 8px; font-weight: bold;">Dynamic Spawning</td>
-              <td style="padding: 8px; color: green;">Yes (Bottom-up)</td>
-              <td style="padding: 8px; color: red;">No (Top-down only)</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-              <td style="padding: 8px; color: red;">No</td>
-            </tr>
-            <tr style="border-bottom: 1px solid #eee;">
-              <td style="padding: 8px; font-weight: bold;">System-level Context</td>
-              <td style="padding: 8px; color: green;">Yes (Journalist)</td>
-              <td style="padding: 8px; color: orange;">Partial (Session only)</td>
-              <td style="padding: 8px; color: red;">No</td>
-              <td style="padding: 8px; color: orange;">File-level only</td>
-            </tr>
-            <tr style="border-bottom: 1px solid #eee;">
-              <td style="padding: 8px; font-weight: bold;">File Locks / Collision Prev.</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-              <td style="padding: 8px; color: red;">No</td>
-              <td style="padding: 8px; color: red;">No</td>
-              <td style="padding: 8px; color: red;">No</td>
-            </tr>
-            <tr style="border-bottom: 1px solid #eee;">
-              <td style="padding: 8px; font-weight: bold;">Visual Management GUI</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-              <td style="padding: 8px; color: red;">No</td>
-              <td style="padding: 8px; color: red;">No</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-            </tr>
-            <tr>
-              <td style="padding: 8px; font-weight: bold;">Multi-Provider Support</td>
-              <td style="padding: 8px; color: green;">Yes (Phase 5)</td>
-              <td style="padding: 8px; color: red;">No (Anthropic only)</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-              <td style="padding: 8px; color: green;">Yes</td>
-            </tr>
-          </table>
-        </div>
-      </section>
-      <section class="text-left">
-        <h2>Appendix A4: Pricing Psychology</h2>
-        <div class="split">
-          <div style="font-size: 0.8em;">
-            <p><strong>The Free Tier as Distribution:</strong></p>
-            <p>Must be excellent. Top of funnel. Never show a paywall mid-session. The upgrade should feel like wanting more, not being blocked.</p>
-            <br>
-            <p><strong>Groove Pro ($20/mo):</strong></p>
-            <p>Priced identically to base LLM subscriptions. It establishes Groove as an equal layer of value.</p>
-          </div>
-          <div class="card" style="background: var(--light-bg);">
-            <h3 style="font-size: 1.1em;" class="accent-cyan">The "Self-Paying" Trigger</h3>
-            <p style="font-size: 0.85em;">
-              The session summary in the Free tier shows exactly how many tokens (and dollars) the Journalist saved.<br><br>
-              When a free user sees: <em>"Groove saved you $4.50 this session,"</em> the $20/mo Pro upgrade becomes a purely rational economic decision.
-            </p>
-          </div>
-        </div>
-      </section>
-      <section class="text-left">
-        <h2>Appendix A5: Founder Background</h2>
-        <div class="split">
-          <div style="font-size: 0.85em;">
-            <h3 style="font-size: 1.2em;">Ryan [Founder]</h3>
-            <p>Founder, Studio19 by Motovizion</p>
-            <ul style="margin-top: 15px;">
-              <li>Runs AI-powered digital marketing for automotive dealerships.</li>
-              <li>Builds & operates automated Claude Code agent infrastructure in production for Meta/Google ads.</li>
-              <li>Former Internet Director at Toyota. Deep domain knowledge in automotive AI.</li>
-              <li>Also building: RideSearch.ai and Pre-Diag.</li>
-            </ul>
-          </div>
-          <div class="highlight-box" style="flex: 0.8; font-size: 0.9em;">
-            The automotive background is a strength, not a weakness. It means the production systems are real, dealing with real budgets and messy APIs.<br><br>
-            Groove was built to solve the real scaling pain of these systems.
-          </div>
-        </div>
-      </section>
-    </div>
-  </div>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
-  <script>
-    Reveal.initialize({
-      hash: true,
-      slideNumber: 'c/t',
-      width: 1200,
-      height: 700,
-      margin: 0.08,
-      transition: 'fade',
-      backgroundTransition: 'fade',
-      center: true
-    });
-    // Add navy-bg class to slides matching data-state
-    Reveal.addEventListener('navy-bg', function() {
-      document.querySelector('.reveal').classList.add('navy-text-light');
-    });
-  </script>
-</body>
-</html>