va-claw 0.1.2 → 0.1.4

package/docs/comic.svg

@@ -0,0 +1,264 @@
+<svg viewBox="0 0 920 240" xmlns="http://www.w3.org/2000/svg" font-family="monospace">
+  <defs>
+    <style>
+      .label { font-family: monospace; font-size: 11px; font-weight: bold; }
+      .caption { font-family: monospace; font-size: 10px; }
+      .small { font-family: monospace; font-size: 8px; }
+      .code { font-family: monospace; font-size: 9px; }
+    </style>
+  </defs>
+
+  <!-- Background -->
+  <rect width="920" height="240" fill="#0a0a0f" rx="8"/>
+
+  <!-- Grid lines background -->
+  <g opacity="0.04" stroke="#00ffff" stroke-width="0.5">
+    <line x1="0" y1="40" x2="920" y2="40"/>
+    <line x1="0" y1="80" x2="920" y2="80"/>
+    <line x1="0" y1="120" x2="920" y2="120"/>
+    <line x1="0" y1="160" x2="920" y2="160"/>
+    <line x1="0" y1="200" x2="920" y2="200"/>
+    <line x1="40" y1="0" x2="40" y2="240"/>
+    <line x1="80" y1="0" x2="80" y2="240"/>
+    <line x1="120" y1="0" x2="120" y2="240"/>
+    <line x1="160" y1="0" x2="160" y2="240"/>
+    <line x1="200" y1="0" x2="200" y2="240"/>
+    <line x1="240" y1="0" x2="240" y2="240"/>
+  </g>
+
+  <!-- ═══ PANEL 1: The Pain (x=10) ═══ -->
+  <rect x="10" y="10" width="200" height="220" fill="#0d0d1a" rx="2"/>
+  <rect x="10" y="10" width="200" height="220" fill="none" stroke="#ff6b35" stroke-width="2" rx="2"/>
+  <!-- Panel number -->
+  <text x="18" y="26" class="small" fill="#ff6b35">01 / THE PAIN</text>
+  <line x1="10" y1="30" x2="210" y2="30" stroke="#ff6b35" stroke-width="1" opacity="0.5"/>
+
+  <!-- Monitor -->
+  <rect x="65" y="45" width="90" height="65" rx="2" fill="#0a0a1a" stroke="#00ffff" stroke-width="1.5"/>
+  <rect x="70" y="50" width="80" height="48" fill="#000d00"/>
+  <text x="74" y="63" class="small" fill="#ff4444">SESSION RESET</text>
+  <text x="74" y="75" class="small" fill="#ff6b35">Who are you?</text>
+  <text x="74" y="87" class="small" fill="#666666">No memory found.</text>
+  <text x="74" y="99" class="small" fill="#333">I don't know you▋</text>
+  <!-- Monitor stand -->
+  <rect x="104" y="110" width="12" height="8" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
+  <rect x="96" y="118" width="28" height="4" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
+
+  <!-- Frustrated person -->
+  <!-- Head -->
+  <rect x="24" y="52" width="24" height="24" rx="3" fill="#f5c58a" stroke="#cc9966" stroke-width="1"/>
+  <rect x="28" y="58" width="5" height="5" fill="#333"/>
+  <rect x="37" y="58" width="5" height="5" fill="#333"/>
+  <rect x="30" y="67" width="9" height="2" fill="#cc3333"/>
+  <!-- Hair -->
+  <rect x="24" y="50" width="24" height="6" rx="2" fill="#3a2000"/>
+  <!-- Sweat -->
+  <ellipse cx="50" cy="54" rx="3" ry="5" fill="#4488ff" opacity="0.7"/>
+  <!-- Body -->
+  <rect x="20" y="76" width="32" height="32" rx="2" fill="#2244bb" stroke="#1133aa" stroke-width="1"/>
+  <!-- Frustrated arms up -->
+  <rect x="6" y="72" width="15" height="7" rx="3" fill="#f5c58a" transform="rotate(-35 13 75)"/>
+  <rect x="52" y="72" width="15" height="7" rx="3" fill="#f5c58a" transform="rotate(35 59 75)"/>
+  <!-- Legs -->
+  <rect x="24" y="108" width="11" height="16" fill="#1a1a5e"/>
+  <rect x="37" y="108" width="11" height="16" fill="#1a1a5e"/>
+
+  <!-- Speech bubble: cry -->
+  <rect x="50" y="38" width="80" height="20" rx="10" fill="#1a0000" stroke="#ff4444" stroke-width="1"/>
+  <polygon points="58,58 65,58 62,64" fill="#1a0000" stroke="#ff4444" stroke-width="1"/>
+  <text x="90" y="52" class="small" fill="#ff4444" text-anchor="middle">WHY NO MEMORY?!</text>
+
+  <!-- Caption -->
+  <rect x="14" y="196" width="192" height="28" rx="2" fill="#1a0000"/>
+  <text x="110" y="210" class="caption" fill="#ff6b35" text-anchor="middle">Every new session,</text>
+  <text x="110" y="222" class="caption" fill="#ff4444" text-anchor="middle">your AI starts from zero. 😤</text>
+
+
+  <!-- ═══ PANEL 2: One Command (x=220) ═══ -->
+  <rect x="220" y="10" width="200" height="220" fill="#0d0d1a" rx="2"/>
+  <rect x="220" y="10" width="200" height="220" fill="none" stroke="#00ff41" stroke-width="2" rx="2"/>
+  <text x="228" y="26" class="small" fill="#00ff41">02 / 30 SECONDS</text>
+  <line x1="220" y1="30" x2="420" y2="30" stroke="#00ff41" stroke-width="1" opacity="0.5"/>
+
+  <!-- Terminal window -->
+  <rect x="230" y="38" width="180" height="105" rx="3" fill="#000d00" stroke="#00ff41" stroke-width="1.5"/>
+  <!-- Terminal title bar -->
+  <rect x="230" y="38" width="180" height="14" rx="3" fill="#001a00"/>
+  <circle cx="242" cy="45" r="4" fill="#ff4444"/>
+  <circle cx="254" cy="45" r="4" fill="#ffaa00"/>
+  <circle cx="266" cy="45" r="4" fill="#00ff41"/>
+  <text x="320" y="48" class="small" fill="#00ff41" text-anchor="middle" opacity="0.6">terminal</text>
+  <!-- Commands -->
+  <text x="236" y="66" class="code" fill="#00ff41">$ npm install -g va-claw</text>
+  <text x="236" y="78" class="code" fill="#666">added 1 package (4s)</text>
+  <text x="236" y="92" class="code" fill="#00ff41">$ va-claw install</text>
+  <text x="236" y="104" class="code" fill="#a855f7">✓ identity injected</text>
+  <text x="236" y="116" class="code" fill="#a855f7">✓ memory online</text>
+  <text x="236" y="128" class="code" fill="#00ff41">$ va-claw start</text>
+  <text x="236" y="140" class="code" fill="#a855f7">✓ daemon running ⏰</text>
+
+  <!-- Magic sparkles -->
+  <text x="240" y="170" font-size="18" fill="#ffff00">✨</text>
+  <text x="295" y="178" font-size="22" fill="#a855f7">⚡</text>
+  <text x="356" y="168" font-size="18" fill="#00ffff">✨</text>
+
+  <!-- Caption -->
+  <rect x="224" y="196" width="192" height="28" rx="2" fill="#001a00"/>
+  <text x="320" y="210" class="caption" fill="#00ff41" text-anchor="middle">One install. Zero extra cost.</text>
+  <text x="320" y="222" class="caption" fill="#00ffff" text-anchor="middle">Uses your existing subscription. 💰</text>
+
+
+  <!-- ═══ PANEL 3: The OpenClaw (x=430) ═══ -->
+  <rect x="430" y="10" width="220" height="220" fill="#0d0d1a" rx="2"/>
+  <rect x="430" y="10" width="220" height="220" fill="none" stroke="#ff4400" stroke-width="2" rx="2"/>
+  <text x="438" y="26" class="small" fill="#ff6b35">03 / YOUR OPENCLAW</text>
+  <line x1="430" y1="30" x2="650" y2="30" stroke="#ff4400" stroke-width="1" opacity="0.5"/>
+
+  <!-- Big lobster centered -->
+  <!-- Body -->
+  <rect x="500" y="75" width="60" height="45" rx="5" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
+  <!-- Shell segments -->
+  <line x1="500" y1="90" x2="560" y2="90" stroke="#aa2200" stroke-width="1.5"/>
+  <line x1="500" y1="105" x2="560" y2="105" stroke="#aa2200" stroke-width="1.5"/>
+  <!-- Stripe highlights -->
+  <rect x="508" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
+  <rect x="524" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
+  <rect x="540" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
+
+  <!-- Eyes on stalks -->
+  <line x1="512" y1="75" x2="504" y2="60" stroke="#ff6b35" stroke-width="2"/>
+  <line x1="548" y1="75" x2="556" y2="60" stroke="#ff6b35" stroke-width="2"/>
+  <circle cx="504" cy="60" r="8" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <circle cx="556" cy="60" r="8" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <circle cx="504" cy="60" r="4" fill="#00ff41"/>
+  <circle cx="556" cy="60" r="4" fill="#00ff41"/>
+  <circle cx="505" cy="59" r="1.5" fill="#000"/>
+  <circle cx="557" cy="59" r="1.5" fill="#000"/>
+
+  <!-- Antennae -->
+  <line x1="500" y1="62" x2="476" y2="40" stroke="#ff6b35" stroke-width="1.5"/>
+  <line x1="560" y1="62" x2="584" y2="40" stroke="#ff6b35" stroke-width="1.5"/>
+  <circle cx="476" cy="40" r="3" fill="#ffff00"/>
+  <circle cx="584" cy="40" r="3" fill="#ffff00"/>
+
+  <!-- Big left claw -->
+  <rect x="445" y="80" width="56" height="22" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <rect x="440" y="73" width="24" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <rect x="440" y="90" width="24" height="14" rx="3" fill="#aa2200" stroke="#ff6b35" stroke-width="1.5"/>
+
+  <!-- Big right claw -->
+  <rect x="559" y="80" width="56" height="22" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <rect x="596" y="73" width="24" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+  <rect x="596" y="90" width="24" height="14" rx="3" fill="#aa2200" stroke="#ff6b35" stroke-width="1.5"/>
+
+  <!-- Walking legs -->
+  <line x1="510" y1="120" x2="500" y2="148" stroke="#dd3300" stroke-width="2.5"/>
+  <line x1="520" y1="120" x2="513" y2="150" stroke="#dd3300" stroke-width="2.5"/>
+  <line x1="540" y1="120" x2="547" y2="150" stroke="#dd3300" stroke-width="2.5"/>
+  <line x1="550" y1="120" x2="560" y2="148" stroke="#dd3300" stroke-width="2.5"/>
+
+  <!-- Memory chip badge on body -->
+  <rect x="506" y="80" width="48" height="20" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1.5"/>
+  <text x="530" y="93" class="small" fill="#fff" text-anchor="middle" font-weight="bold">🧠 MEM</text>
+
+  <!-- Floating badges -->
+  <rect x="434" y="38" width="52" height="18" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
+  <text x="460" y="51" class="small" fill="#00ff41" text-anchor="middle">⏰ LOOP</text>
+
+  <rect x="572" y="38" width="72" height="18" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
+  <text x="608" y="51" class="small" fill="#a855f7" text-anchor="middle">🎭 IDENTITY</text>
+
+  <!-- Caption -->
+  <rect x="434" y="162" width="212" height="28" rx="2" fill="#1a0000"/>
+  <text x="540" y="176" class="caption" fill="#ff6b35" text-anchor="middle">Claude Code + va-claw</text>
+  <text x="540" y="188" class="caption" fill="#ff4400" text-anchor="middle">= Your own OpenClaw 🦞</text>
+
+  <!-- ═══ PANEL 4: The Fleet (x=660) ═══ -->
+  <rect x="660" y="10" width="250" height="220" fill="#0d0d1a" rx="2"/>
+  <rect x="660" y="10" width="250" height="220" fill="none" stroke="#ff00ff" stroke-width="2" rx="2"/>
+  <text x="668" y="26" class="small" fill="#ff00ff">04 / SPAWN A FLEET</text>
+  <line x1="660" y1="30" x2="910" y2="30" stroke="#ff00ff" stroke-width="1" opacity="0.5"/>
+
+  <!-- Three mini claws -->
+  <!-- Claw A -->
+  <g transform="translate(672, 38) scale(0.55)">
+    <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
+    <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
+    <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
+    <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+    <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
+  </g>
+  <text x="700" y="118" class="small" fill="#00ff41" text-anchor="middle">claw-1</text>
+  <rect x="668" y="122" width="66" height="24" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
+  <text x="701" y="133" class="small" fill="#00ff41" text-anchor="middle">reviewing</text>
+  <text x="701" y="143" class="small" fill="#00ff41" text-anchor="middle">PRs... 🦞</text>
+
+  <!-- Claw B (center, slightly larger) -->
+  <g transform="translate(749, 30) scale(0.62)">
+    <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
+    <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
+    <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
+    <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+    <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
+  </g>
+  <text x="786" y="120" class="small" fill="#00ffff" text-anchor="middle">claw-2</text>
+  <rect x="754" y="124" width="66" height="24" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
+  <text x="787" y="135" class="small" fill="#00ffff" text-anchor="middle">writing</text>
+  <text x="787" y="145" class="small" fill="#00ffff" text-anchor="middle">tests... 🦞</text>
+
+  <!-- Claw C -->
+  <g transform="translate(840, 38) scale(0.55)">
+    <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
+    <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
+    <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
+    <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
+    <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
+    <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
+    <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+    <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
+  </g>
+  <text x="872" y="118" class="small" fill="#a855f7" text-anchor="middle">claw-3</text>
+  <rect x="840" y="122" width="66" height="24" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
+  <text x="873" y="133" class="small" fill="#a855f7" text-anchor="middle">monitoring</text>
+  <text x="873" y="143" class="small" fill="#a855f7" text-anchor="middle">repos... 🦞</text>
+
+  <!-- Shared memory hub -->
+  <rect x="720" y="156" width="130" height="26" rx="3" fill="#1a001a" stroke="#ff00ff" stroke-width="1.5"/>
+  <text x="785" y="167" class="caption" fill="#ff00ff" text-anchor="middle" font-weight="bold">SHARED MEMORY</text>
+  <text x="785" y="178" class="small" fill="#a855f7" text-anchor="middle">~/.va-claw/memory.db</text>
+
+  <!-- Connection lines from claws to memory -->
+  <line x1="701" y1="147" x2="745" y2="156" stroke="#00ff41" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
+  <line x1="786" y1="150" x2="786" y2="156" stroke="#00ffff" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
+  <line x1="872" y1="147" x2="826" y2="156" stroke="#a855f7" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
+
+  <!-- Caption -->
+  <rect x="664" y="192" width="242" height="32" rx="2" fill="#12001a"/>
+  <text x="785" y="206" class="caption" fill="#ffff00" text-anchor="middle" font-weight="bold">va-claw start — spawn infinite claws.</text>
+  <text x="785" y="220" class="caption" fill="#ff00ff" text-anchor="middle">One subscription. One memory. Many workers.</text>
+
+</svg>

package/docs/releases/v0.1.3.md

@@ -0,0 +1,20 @@
+# va-claw v0.1.3
+
+## What is va-claw?
+
+`va-claw` turns Claude Code or Codex into a persistent local agent by adding memory, identity, and a wake-loop daemon without introducing a new gateway or cloud dependency.
+
+## Highlights
+
+- **Memory CRUD + Ebbinghaus reinforcement**: store, list, update, forget, recall, consolidate, and reflect memories in local SQLite with forgetting-curve based strength updates.
+- **Identity injection**: inject a persistent persona and system prompt into Claude Code or Codex startup instructions.
+- **Wake-loop daemon**: run scheduled autonomous wake cycles in the background so the agent can resume work without manual prompting.
+- **Channels**: connect the same local agent flow to Discord, Telegram, and Slack.
+- **Skills**: install, list, search, and inject reusable markdown skills into wake runs and interactive sessions.
+- **Global install bundle**: ship the CLI through the locked `bin/va-claw` -> `dist/va-claw-bundle.mjs` esbuild bundle path for stable global installs.
+
+## Notes for this release
+
+- Node 22 is the supported runtime.
+- Everything runs offline-first with no cloud dependency added by this release.
+- This tag gives users a stable GitHub release reference that matches the published package version `0.1.3`.

package/index.html

@@ -106,23 +106,90 @@
         }
 
         .pixel-border-violet {
-            box-shadow: 
-                4px 0 0 var(--violet), 
-                -4px 0 0 var(--violet), 
-                0 4px 0 var(--violet), 
+            box-shadow:
+                4px 0 0 var(--violet),
+                -4px 0 0 var(--violet),
+                0 4px 0 var(--violet),
                 0 -4px 0 var(--violet);
             margin: 4px;
         }
 
         .pixel-border-cyan {
-            box-shadow: 
-                4px 0 0 var(--cyan), 
-                -4px 0 0 var(--cyan), 
-                0 4px 0 var(--cyan), 
+            box-shadow:
+                4px 0 0 var(--cyan),
+                -4px 0 0 var(--cyan),
+                0 4px 0 var(--cyan),
                 0 -4px 0 var(--cyan);
             margin: 4px;
         }
 
+        .pixel-border-amber {
+            box-shadow:
+                4px 0 0 var(--amber),
+                -4px 0 0 var(--amber),
+                0 4px 0 var(--amber),
+                0 -4px 0 var(--amber);
+            margin: 4px;
+        }
+
+        .pixel-border-green {
+            box-shadow:
+                4px 0 0 var(--green),
+                -4px 0 0 var(--green),
+                0 4px 0 var(--green),
+                0 -4px 0 var(--green);
+            margin: 4px;
+        }
+
+        /* COMIC STRIP */
+        .comic-strip-section {
+            margin-bottom: 80px;
+        }
+
+        .comic-strip {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 24px;
+        }
+
+        @media (max-width: 800px) {
+            .comic-strip {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 500px) {
+            .comic-strip {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .comic-panel {
+            background: #080810;
+            padding: 12px;
+            position: relative;
+            cursor: default;
+            transition: transform 0.1s steps(2);
+        }
+
+        .comic-panel:hover {
+            transform: translate(-2px, -2px);
+        }
+
+        .panel-num {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 9px;
+            margin-bottom: 8px;
+            opacity: 0.8;
+        }
+
+        .panel-svg {
+            width: 100%;
+            height: auto;
+            display: block;
+            image-rendering: pixelated;
+        }
+
         .btn {
             display: inline-block;
             padding: 16px 24px;
@@ -473,6 +540,200 @@
             </div>
         </section>
 
+        <!-- COMIC STRIP: WHY VA-CLAW EXISTS -->
+        <section class="comic-strip-section">
+            <h2 class="section-title neon-text" style="text-align:center; margin-bottom:40px; font-size:14px;">// WHY VA-CLAW EXISTS</h2>
+            <div class="comic-strip">
+
+                <!-- PANEL 1: The Problem -->
+                <div class="comic-panel pixel-border-amber">
+                    <div class="panel-num" style="color:var(--amber)">01</div>
+                    <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
+                        <!-- Background -->
+                        <rect width="200" height="160" fill="#0a0a0f"/>
+                        <!-- Desk -->
+                        <rect x="20" y="120" width="160" height="8" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
+                        <!-- Monitor -->
+                        <rect x="60" y="55" width="80" height="55" rx="2" fill="#0d0d1a" stroke="#00ffff" stroke-width="1.5"/>
+                        <rect x="65" y="60" width="70" height="42" fill="#001a00"/>
+                        <!-- Screen text: session reset -->
+                        <text x="68" y="72" font-family="monospace" font-size="5" fill="#ff4444">SESSION RESET</text>
+                        <text x="68" y="82" font-family="monospace" font-size="5" fill="#ff6b35">Who are you?</text>
+                        <text x="68" y="92" font-family="monospace" font-size="5" fill="#ff4444">No memory found</text>
+                        <text x="68" y="102" font-family="monospace" font-size="4" fill="#666">▋</text>
+                        <!-- Monitor stand -->
+                        <rect x="95" y="110" width="10" height="10" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
+                        <!-- Person (pixel art style) -->
+                        <!-- Head -->
+                        <rect x="22" y="60" width="20" height="20" rx="2" fill="#ffcc99" stroke="#cc9966" stroke-width="1"/>
+                        <rect x="26" y="65" width="4" height="4" fill="#333"/>
+                        <rect x="32" y="65" width="4" height="4" fill="#333"/>
+                        <rect x="27" y="73" width="8" height="2" fill="#cc6666"/>
+                        <!-- Hair -->
+                        <rect x="22" y="58" width="20" height="5" fill="#4a3000"/>
+                        <!-- Body -->
+                        <rect x="18" y="80" width="28" height="28" rx="2" fill="#2244aa" stroke="#1133aa" stroke-width="1"/>
+                        <!-- Arms up frustrated -->
+                        <rect x="4" y="78" width="14" height="6" rx="2" fill="#ffcc99" transform="rotate(-30 11 81)"/>
+                        <rect x="46" y="78" width="14" height="6" rx="2" fill="#ffcc99" transform="rotate(30 53 81)"/>
+                        <!-- Legs -->
+                        <rect x="22" y="108" width="10" height="12" fill="#1a1a5e"/>
+                        <rect x="32" y="108" width="10" height="12" fill="#1a1a5e"/>
+                        <!-- Sweat drops / frustration -->
+                        <text x="44" y="58" font-family="monospace" font-size="10" fill="#ff4444">😤</text>
+                        <!-- Caption -->
+                        <text x="100" y="148" font-family="monospace" font-size="4.5" fill="#ff6b35" text-anchor="middle">CLAUDE CODE FORGETS</text>
+                        <text x="100" y="156" font-family="monospace" font-size="4.5" fill="#ff4444" text-anchor="middle">YOU. EVERY. SESSION.</text>
+                    </svg>
+                </div>
+
+                <!-- PANEL 2: The Transformation -->
+                <div class="comic-panel pixel-border-cyan">
+                    <div class="panel-num" style="color:var(--cyan)">02</div>
+                    <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
+                        <rect width="200" height="160" fill="#0a0a0f"/>
+                        <!-- Terminal glow effect -->
+                        <rect x="10" y="20" width="180" height="70" rx="3" fill="#001a00" stroke="#00ff41" stroke-width="1.5"/>
+                        <rect x="14" y="24" width="172" height="62" fill="#000d00"/>
+                        <!-- Terminal content -->
+                        <text x="18" y="37" font-family="monospace" font-size="5.5" fill="#00ff41">$ npm install -g va-claw</text>
+                        <text x="18" y="49" font-family="monospace" font-size="5" fill="#666">added 1 package in 4s</text>
+                        <text x="18" y="59" font-family="monospace" font-size="5.5" fill="#00ff41">$ va-claw install</text>
+                        <text x="18" y="69" font-family="monospace" font-size="5" fill="#a855f7">✓ identity injected</text>
+                        <text x="18" y="79" font-family="monospace" font-size="5" fill="#a855f7">✓ memory online</text>
+                        <!-- Magic sparkles coming from screen -->
+                        <text x="15" y="110" font-family="monospace" font-size="14" fill="#ffff00">✨</text>
+                        <text x="85" y="120" font-family="monospace" font-size="14" fill="#a855f7">✨</text>
+                        <text x="155" y="105" font-family="monospace" font-size="14" fill="#00ffff">✨</text>
+                        <!-- Arrow transformation -->
+                        <text x="100" y="108" font-family="monospace" font-size="20" fill="#00ff41" text-anchor="middle">⚡</text>
+                        <!-- Caption -->
+                        <text x="100" y="140" font-family="monospace" font-size="5" fill="#00ff41" text-anchor="middle">ONE COMMAND.</text>
+                        <text x="100" y="150" font-family="monospace" font-size="5" fill="#00ffff" text-anchor="middle">30 SECONDS.</text>
+                        <text x="100" y="158" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">EVERYTHING CHANGES.</text>
+                    </svg>
+                </div>
+
+                <!-- PANEL 3: The OpenClaw -->
+                <div class="comic-panel pixel-border-violet">
+                    <div class="panel-num" style="color:var(--violet)">03</div>
+                    <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
+                        <rect width="200" height="160" fill="#0a0a0f"/>
+                        <!-- Glow backdrop for claw -->
+                        <ellipse cx="100" cy="85" rx="65" ry="55" fill="#1a0030" opacity="0.8"/>
+                        <!-- Big pixel lobster / claw mascot -->
+                        <!-- Body -->
+                        <rect x="75" y="65" width="50" height="35" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                        <!-- Shell segments -->
+                        <line x1="75" y1="76" x2="125" y2="76" stroke="#cc3300" stroke-width="1"/>
+                        <line x1="75" y1="87" x2="125" y2="87" stroke="#cc3300" stroke-width="1"/>
+                        <!-- Eyes -->
+                        <circle cx="88" cy="60" r="6" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
+                        <circle cx="112" cy="60" r="6" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
+                        <circle cx="88" cy="60" r="3" fill="#00ff41"/>
+                        <circle cx="112" cy="60" r="3" fill="#00ff41"/>
+                        <circle cx="89" cy="59" r="1" fill="#000"/>
+                        <circle cx="113" cy="59" r="1" fill="#000"/>
+                        <!-- Antennae -->
+                        <line x1="88" y1="54" x2="72" y2="35" stroke="#ff6b35" stroke-width="1.5"/>
+                        <line x1="112" y1="54" x2="128" y2="35" stroke="#ff6b35" stroke-width="1.5"/>
+                        <circle cx="72" cy="35" r="2" fill="#ffff00"/>
+                        <circle cx="128" cy="35" r="2" fill="#ffff00"/>
+                        <!-- Left big claw -->
+                        <rect x="35" y="68" width="40" height="18" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                        <rect x="30" y="63" width="18" height="12" rx="2" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
+                        <rect x="30" y="77" width="18" height="12" rx="2" fill="#cc3300" stroke="#ff6b35" stroke-width="1"/>
+                        <!-- Right big claw -->
+                        <rect x="125" y="68" width="40" height="18" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                        <rect x="152" y="63" width="18" height="12" rx="2" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
+                        <rect x="152" y="77" width="18" height="12" rx="2" fill="#cc3300" stroke="#ff6b35" stroke-width="1"/>
+                        <!-- Legs -->
+                        <line x1="85" y1="100" x2="78" y2="118" stroke="#ff4400" stroke-width="2"/>
+                        <line x1="93" y1="100" x2="88" y2="120" stroke="#ff4400" stroke-width="2"/>
+                        <line x1="107" y1="100" x2="112" y2="120" stroke="#ff4400" stroke-width="2"/>
+                        <line x1="115" y1="100" x2="122" y2="118" stroke="#ff4400" stroke-width="2"/>
+                        <!-- Memory chip on back -->
+                        <rect x="86" y="68" width="28" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+                        <text x="100" y="79" font-family="monospace" font-size="5" fill="#fff" text-anchor="middle">MEM</text>
+                        <!-- Status badges floating -->
+                        <rect x="12" y="20" width="42" height="14" rx="2" fill="#003300" stroke="#00ff41" stroke-width="1"/>
+                        <text x="33" y="30" font-family="monospace" font-size="4" fill="#00ff41" text-anchor="middle">🧠 MEMORY</text>
+                        <rect x="146" y="20" width="44" height="14" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
+                        <text x="168" y="30" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">⏰ LOOP</text>
+                        <rect x="74" y="125" width="52" height="14" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
+                        <text x="100" y="135" font-family="monospace" font-size="4" fill="#00ffff" text-anchor="middle">🎭 IDENTITY</text>
+                        <!-- Caption -->
+                        <text x="100" y="153" font-family="monospace" font-size="5" fill="#ff6b35" text-anchor="middle">YOUR CLAUDE CODE</text>
+                        <text x="100" y="161" font-family="monospace" font-size="5" fill="#ff4400" text-anchor="middle">IS NOW AN OPENCLAW 🦞</text>
+                    </svg>
+                </div>
+
+                <!-- PANEL 4: Multi-claw fleet -->
+                <div class="comic-panel pixel-border-green">
+                    <div class="panel-num" style="color:var(--green)">04</div>
+                    <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
+                        <rect width="200" height="160" fill="#0a0a0f"/>
+                        <!-- Three small claws working in parallel -->
+                        <!-- Claw 1 -->
+                        <g transform="translate(10, 30) scale(0.5)">
+                            <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
+                            <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
+                            <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
+                            <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+                        </g>
+                        <!-- Claw 2 -->
+                        <g transform="translate(75, 20) scale(0.5)">
+                            <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
+                            <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
+                            <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
+                            <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+                        </g>
+                        <!-- Claw 3 -->
+                        <g transform="translate(140, 30) scale(0.5)">
+                            <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
+                            <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
+                            <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
+                            <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
+                            <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
+                        </g>
+                        <!-- Work bubbles -->
+                        <rect x="5" y="80" width="55" height="22" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
+                        <text x="32" y="89" font-family="monospace" font-size="4" fill="#00ff41" text-anchor="middle">reviewing PR</text>
+                        <text x="32" y="98" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-1 🦞</text>
+                        <rect x="73" y="68" width="55" height="22" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
+                        <text x="100" y="77" font-family="monospace" font-size="4" fill="#00ffff" text-anchor="middle">writing tests</text>
+                        <text x="100" y="86" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-2 🦞</text>
+                        <rect x="140" y="80" width="55" height="22" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
+                        <text x="167" y="89" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">monitoring</text>
+                        <text x="167" y="98" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-3 🦞</text>
+                        <!-- Shared memory hub -->
+                        <rect x="70" y="108" width="60" height="20" rx="3" fill="#1a001a" stroke="#ff00ff" stroke-width="1.5"/>
+                        <text x="100" y="118" font-family="monospace" font-size="4" fill="#ff00ff" text-anchor="middle">SHARED MEMORY</text>
+                        <text x="100" y="125" font-family="monospace" font-size="3.5" fill="#a855f7" text-anchor="middle">~/.va-claw/memory.db</text>
+                        <!-- Connection lines -->
+                        <line x1="32" y1="103" x2="90" y2="108" stroke="#00ff41" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
+                        <line x1="100" y1="90" x2="100" y2="108" stroke="#00ffff" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
+                        <line x1="167" y1="103" x2="110" y2="108" stroke="#a855f7" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
+                        <!-- Caption -->
+                        <text x="100" y="146" font-family="monospace" font-size="4.5" fill="#ffff00" text-anchor="middle">SPAWN A FLEET.</text>
+                        <text x="100" y="156" font-family="monospace" font-size="4.5" fill="#00ff41" text-anchor="middle">ONE MEMORY. INFINITE CLAWS.</text>
+                    </svg>
+                </div>
+
+            </div>
+        </section>
+
         <!-- THE PITCH -->
         <section class="pitch">
             <div class="pitch-grid">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "va-claw",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Persistent memory, identity, and wake-loop daemon for Claude Code & Codex",
   "keywords": [
     "claude-code",