va-claw 0.1.2 → 0.1.3

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 (4) hide show
  1. package/README.md +4 -0
  2. package/docs/comic.svg +264 -0
  3. package/index.html +269 -8
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -32,6 +32,10 @@
32
32
 
33
33
  ## What is va-claw?
34
34
 
35
+ <p align="center">
36
+ <img src="docs/comic.svg" alt="va-claw comic strip: from session-reset pain to OpenClaw fleet" width="900"/>
37
+ </p>
38
+
35
39
  **va-claw** is a minimal plugin that adds OpenClaw's three core superpowers to any CLI agent you already have:
36
40
 
37
41
  | | Without va-claw | With va-claw |
package/docs/comic.svg ADDED
@@ -0,0 +1,264 @@
1
+ <svg viewBox="0 0 920 240" xmlns="http://www.w3.org/2000/svg" font-family="monospace">
2
+ <defs>
3
+ <style>
4
+ .label { font-family: monospace; font-size: 11px; font-weight: bold; }
5
+ .caption { font-family: monospace; font-size: 10px; }
6
+ .small { font-family: monospace; font-size: 8px; }
7
+ .code { font-family: monospace; font-size: 9px; }
8
+ </style>
9
+ </defs>
10
+
11
+ <!-- Background -->
12
+ <rect width="920" height="240" fill="#0a0a0f" rx="8"/>
13
+
14
+ <!-- Grid lines background -->
15
+ <g opacity="0.04" stroke="#00ffff" stroke-width="0.5">
16
+ <line x1="0" y1="40" x2="920" y2="40"/>
17
+ <line x1="0" y1="80" x2="920" y2="80"/>
18
+ <line x1="0" y1="120" x2="920" y2="120"/>
19
+ <line x1="0" y1="160" x2="920" y2="160"/>
20
+ <line x1="0" y1="200" x2="920" y2="200"/>
21
+ <line x1="40" y1="0" x2="40" y2="240"/>
22
+ <line x1="80" y1="0" x2="80" y2="240"/>
23
+ <line x1="120" y1="0" x2="120" y2="240"/>
24
+ <line x1="160" y1="0" x2="160" y2="240"/>
25
+ <line x1="200" y1="0" x2="200" y2="240"/>
26
+ <line x1="240" y1="0" x2="240" y2="240"/>
27
+ </g>
28
+
29
+ <!-- ═══ PANEL 1: The Pain (x=10) ═══ -->
30
+ <rect x="10" y="10" width="200" height="220" fill="#0d0d1a" rx="2"/>
31
+ <rect x="10" y="10" width="200" height="220" fill="none" stroke="#ff6b35" stroke-width="2" rx="2"/>
32
+ <!-- Panel number -->
33
+ <text x="18" y="26" class="small" fill="#ff6b35">01 / THE PAIN</text>
34
+ <line x1="10" y1="30" x2="210" y2="30" stroke="#ff6b35" stroke-width="1" opacity="0.5"/>
35
+
36
+ <!-- Monitor -->
37
+ <rect x="65" y="45" width="90" height="65" rx="2" fill="#0a0a1a" stroke="#00ffff" stroke-width="1.5"/>
38
+ <rect x="70" y="50" width="80" height="48" fill="#000d00"/>
39
+ <text x="74" y="63" class="small" fill="#ff4444">SESSION RESET</text>
40
+ <text x="74" y="75" class="small" fill="#ff6b35">Who are you?</text>
41
+ <text x="74" y="87" class="small" fill="#666666">No memory found.</text>
42
+ <text x="74" y="99" class="small" fill="#333">I don't know you▋</text>
43
+ <!-- Monitor stand -->
44
+ <rect x="104" y="110" width="12" height="8" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
45
+ <rect x="96" y="118" width="28" height="4" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
46
+
47
+ <!-- Frustrated person -->
48
+ <!-- Head -->
49
+ <rect x="24" y="52" width="24" height="24" rx="3" fill="#f5c58a" stroke="#cc9966" stroke-width="1"/>
50
+ <rect x="28" y="58" width="5" height="5" fill="#333"/>
51
+ <rect x="37" y="58" width="5" height="5" fill="#333"/>
52
+ <rect x="30" y="67" width="9" height="2" fill="#cc3333"/>
53
+ <!-- Hair -->
54
+ <rect x="24" y="50" width="24" height="6" rx="2" fill="#3a2000"/>
55
+ <!-- Sweat -->
56
+ <ellipse cx="50" cy="54" rx="3" ry="5" fill="#4488ff" opacity="0.7"/>
57
+ <!-- Body -->
58
+ <rect x="20" y="76" width="32" height="32" rx="2" fill="#2244bb" stroke="#1133aa" stroke-width="1"/>
59
+ <!-- Frustrated arms up -->
60
+ <rect x="6" y="72" width="15" height="7" rx="3" fill="#f5c58a" transform="rotate(-35 13 75)"/>
61
+ <rect x="52" y="72" width="15" height="7" rx="3" fill="#f5c58a" transform="rotate(35 59 75)"/>
62
+ <!-- Legs -->
63
+ <rect x="24" y="108" width="11" height="16" fill="#1a1a5e"/>
64
+ <rect x="37" y="108" width="11" height="16" fill="#1a1a5e"/>
65
+
66
+ <!-- Speech bubble: cry -->
67
+ <rect x="50" y="38" width="80" height="20" rx="10" fill="#1a0000" stroke="#ff4444" stroke-width="1"/>
68
+ <polygon points="58,58 65,58 62,64" fill="#1a0000" stroke="#ff4444" stroke-width="1"/>
69
+ <text x="90" y="52" class="small" fill="#ff4444" text-anchor="middle">WHY NO MEMORY?!</text>
70
+
71
+ <!-- Caption -->
72
+ <rect x="14" y="196" width="192" height="28" rx="2" fill="#1a0000"/>
73
+ <text x="110" y="210" class="caption" fill="#ff6b35" text-anchor="middle">Every new session,</text>
74
+ <text x="110" y="222" class="caption" fill="#ff4444" text-anchor="middle">your AI starts from zero. 😤</text>
75
+
76
+
77
+ <!-- ═══ PANEL 2: One Command (x=220) ═══ -->
78
+ <rect x="220" y="10" width="200" height="220" fill="#0d0d1a" rx="2"/>
79
+ <rect x="220" y="10" width="200" height="220" fill="none" stroke="#00ff41" stroke-width="2" rx="2"/>
80
+ <text x="228" y="26" class="small" fill="#00ff41">02 / 30 SECONDS</text>
81
+ <line x1="220" y1="30" x2="420" y2="30" stroke="#00ff41" stroke-width="1" opacity="0.5"/>
82
+
83
+ <!-- Terminal window -->
84
+ <rect x="230" y="38" width="180" height="105" rx="3" fill="#000d00" stroke="#00ff41" stroke-width="1.5"/>
85
+ <!-- Terminal title bar -->
86
+ <rect x="230" y="38" width="180" height="14" rx="3" fill="#001a00"/>
87
+ <circle cx="242" cy="45" r="4" fill="#ff4444"/>
88
+ <circle cx="254" cy="45" r="4" fill="#ffaa00"/>
89
+ <circle cx="266" cy="45" r="4" fill="#00ff41"/>
90
+ <text x="320" y="48" class="small" fill="#00ff41" text-anchor="middle" opacity="0.6">terminal</text>
91
+ <!-- Commands -->
92
+ <text x="236" y="66" class="code" fill="#00ff41">$ npm install -g va-claw</text>
93
+ <text x="236" y="78" class="code" fill="#666">added 1 package (4s)</text>
94
+ <text x="236" y="92" class="code" fill="#00ff41">$ va-claw install</text>
95
+ <text x="236" y="104" class="code" fill="#a855f7">✓ identity injected</text>
96
+ <text x="236" y="116" class="code" fill="#a855f7">✓ memory online</text>
97
+ <text x="236" y="128" class="code" fill="#00ff41">$ va-claw start</text>
98
+ <text x="236" y="140" class="code" fill="#a855f7">✓ daemon running ⏰</text>
99
+
100
+ <!-- Magic sparkles -->
101
+ <text x="240" y="170" font-size="18" fill="#ffff00">✨</text>
102
+ <text x="295" y="178" font-size="22" fill="#a855f7">⚡</text>
103
+ <text x="356" y="168" font-size="18" fill="#00ffff">✨</text>
104
+
105
+ <!-- Caption -->
106
+ <rect x="224" y="196" width="192" height="28" rx="2" fill="#001a00"/>
107
+ <text x="320" y="210" class="caption" fill="#00ff41" text-anchor="middle">One install. Zero extra cost.</text>
108
+ <text x="320" y="222" class="caption" fill="#00ffff" text-anchor="middle">Uses your existing subscription. 💰</text>
109
+
110
+
111
+ <!-- ═══ PANEL 3: The OpenClaw (x=430) ═══ -->
112
+ <rect x="430" y="10" width="220" height="220" fill="#0d0d1a" rx="2"/>
113
+ <rect x="430" y="10" width="220" height="220" fill="none" stroke="#ff4400" stroke-width="2" rx="2"/>
114
+ <text x="438" y="26" class="small" fill="#ff6b35">03 / YOUR OPENCLAW</text>
115
+ <line x1="430" y1="30" x2="650" y2="30" stroke="#ff4400" stroke-width="1" opacity="0.5"/>
116
+
117
+ <!-- Big lobster centered -->
118
+ <!-- Body -->
119
+ <rect x="500" y="75" width="60" height="45" rx="5" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
120
+ <!-- Shell segments -->
121
+ <line x1="500" y1="90" x2="560" y2="90" stroke="#aa2200" stroke-width="1.5"/>
122
+ <line x1="500" y1="105" x2="560" y2="105" stroke="#aa2200" stroke-width="1.5"/>
123
+ <!-- Stripe highlights -->
124
+ <rect x="508" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
125
+ <rect x="524" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
126
+ <rect x="540" y="76" width="8" height="43" fill="#ff4400" rx="1" opacity="0.4"/>
127
+
128
+ <!-- Eyes on stalks -->
129
+ <line x1="512" y1="75" x2="504" y2="60" stroke="#ff6b35" stroke-width="2"/>
130
+ <line x1="548" y1="75" x2="556" y2="60" stroke="#ff6b35" stroke-width="2"/>
131
+ <circle cx="504" cy="60" r="8" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
132
+ <circle cx="556" cy="60" r="8" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
133
+ <circle cx="504" cy="60" r="4" fill="#00ff41"/>
134
+ <circle cx="556" cy="60" r="4" fill="#00ff41"/>
135
+ <circle cx="505" cy="59" r="1.5" fill="#000"/>
136
+ <circle cx="557" cy="59" r="1.5" fill="#000"/>
137
+
138
+ <!-- Antennae -->
139
+ <line x1="500" y1="62" x2="476" y2="40" stroke="#ff6b35" stroke-width="1.5"/>
140
+ <line x1="560" y1="62" x2="584" y2="40" stroke="#ff6b35" stroke-width="1.5"/>
141
+ <circle cx="476" cy="40" r="3" fill="#ffff00"/>
142
+ <circle cx="584" cy="40" r="3" fill="#ffff00"/>
143
+
144
+ <!-- Big left claw -->
145
+ <rect x="445" y="80" width="56" height="22" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
146
+ <rect x="440" y="73" width="24" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
147
+ <rect x="440" y="90" width="24" height="14" rx="3" fill="#aa2200" stroke="#ff6b35" stroke-width="1.5"/>
148
+
149
+ <!-- Big right claw -->
150
+ <rect x="559" y="80" width="56" height="22" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
151
+ <rect x="596" y="73" width="24" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
152
+ <rect x="596" y="90" width="24" height="14" rx="3" fill="#aa2200" stroke="#ff6b35" stroke-width="1.5"/>
153
+
154
+ <!-- Walking legs -->
155
+ <line x1="510" y1="120" x2="500" y2="148" stroke="#dd3300" stroke-width="2.5"/>
156
+ <line x1="520" y1="120" x2="513" y2="150" stroke="#dd3300" stroke-width="2.5"/>
157
+ <line x1="540" y1="120" x2="547" y2="150" stroke="#dd3300" stroke-width="2.5"/>
158
+ <line x1="550" y1="120" x2="560" y2="148" stroke="#dd3300" stroke-width="2.5"/>
159
+
160
+ <!-- Memory chip badge on body -->
161
+ <rect x="506" y="80" width="48" height="20" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1.5"/>
162
+ <text x="530" y="93" class="small" fill="#fff" text-anchor="middle" font-weight="bold">🧠 MEM</text>
163
+
164
+ <!-- Floating badges -->
165
+ <rect x="434" y="38" width="52" height="18" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
166
+ <text x="460" y="51" class="small" fill="#00ff41" text-anchor="middle">⏰ LOOP</text>
167
+
168
+ <rect x="572" y="38" width="72" height="18" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
169
+ <text x="608" y="51" class="small" fill="#a855f7" text-anchor="middle">🎭 IDENTITY</text>
170
+
171
+ <!-- Caption -->
172
+ <rect x="434" y="162" width="212" height="28" rx="2" fill="#1a0000"/>
173
+ <text x="540" y="176" class="caption" fill="#ff6b35" text-anchor="middle">Claude Code + va-claw</text>
174
+ <text x="540" y="188" class="caption" fill="#ff4400" text-anchor="middle">= Your own OpenClaw 🦞</text>
175
+
176
+ <!-- ═══ PANEL 4: The Fleet (x=660) ═══ -->
177
+ <rect x="660" y="10" width="250" height="220" fill="#0d0d1a" rx="2"/>
178
+ <rect x="660" y="10" width="250" height="220" fill="none" stroke="#ff00ff" stroke-width="2" rx="2"/>
179
+ <text x="668" y="26" class="small" fill="#ff00ff">04 / SPAWN A FLEET</text>
180
+ <line x1="660" y1="30" x2="910" y2="30" stroke="#ff00ff" stroke-width="1" opacity="0.5"/>
181
+
182
+ <!-- Three mini claws -->
183
+ <!-- Claw A -->
184
+ <g transform="translate(672, 38) scale(0.55)">
185
+ <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
186
+ <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
187
+ <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
188
+ <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
189
+ <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
190
+ <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
191
+ <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
192
+ <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
193
+ <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
194
+ <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
195
+ <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
196
+ <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
197
+ <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
198
+ <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
199
+ </g>
200
+ <text x="700" y="118" class="small" fill="#00ff41" text-anchor="middle">claw-1</text>
201
+ <rect x="668" y="122" width="66" height="24" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
202
+ <text x="701" y="133" class="small" fill="#00ff41" text-anchor="middle">reviewing</text>
203
+ <text x="701" y="143" class="small" fill="#00ff41" text-anchor="middle">PRs... 🦞</text>
204
+
205
+ <!-- Claw B (center, slightly larger) -->
206
+ <g transform="translate(749, 30) scale(0.62)">
207
+ <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
208
+ <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
209
+ <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
210
+ <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
211
+ <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
212
+ <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
213
+ <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
214
+ <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
215
+ <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
216
+ <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
217
+ <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
218
+ <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
219
+ <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
220
+ <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
221
+ </g>
222
+ <text x="786" y="120" class="small" fill="#00ffff" text-anchor="middle">claw-2</text>
223
+ <rect x="754" y="124" width="66" height="24" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
224
+ <text x="787" y="135" class="small" fill="#00ffff" text-anchor="middle">writing</text>
225
+ <text x="787" y="145" class="small" fill="#00ffff" text-anchor="middle">tests... 🦞</text>
226
+
227
+ <!-- Claw C -->
228
+ <g transform="translate(840, 38) scale(0.55)">
229
+ <rect x="20" y="28" width="40" height="30" rx="4" fill="#dd3300" stroke="#ff6b35" stroke-width="2"/>
230
+ <line x1="20" y1="40" x2="60" y2="40" stroke="#aa2200" stroke-width="1.5"/>
231
+ <circle cx="30" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
232
+ <circle cx="50" cy="22" r="7" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
233
+ <circle cx="30" cy="22" r="3.5" fill="#00ff41"/>
234
+ <circle cx="50" cy="22" r="3.5" fill="#00ff41"/>
235
+ <rect x="4" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
236
+ <rect x="58" y="33" width="18" height="14" rx="3" fill="#dd3300" stroke="#ff6b35" stroke-width="1.5"/>
237
+ <line x1="26" y1="58" x2="20" y2="76" stroke="#dd3300" stroke-width="2"/>
238
+ <line x1="34" y1="58" x2="30" y2="78" stroke="#dd3300" stroke-width="2"/>
239
+ <line x1="46" y1="58" x2="50" y2="78" stroke="#dd3300" stroke-width="2"/>
240
+ <line x1="54" y1="58" x2="60" y2="76" stroke="#dd3300" stroke-width="2"/>
241
+ <rect x="22" y="30" width="36" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
242
+ <text x="40" y="41" font-family="monospace" font-size="7" fill="#fff" text-anchor="middle">MEM</text>
243
+ </g>
244
+ <text x="872" y="118" class="small" fill="#a855f7" text-anchor="middle">claw-3</text>
245
+ <rect x="840" y="122" width="66" height="24" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
246
+ <text x="873" y="133" class="small" fill="#a855f7" text-anchor="middle">monitoring</text>
247
+ <text x="873" y="143" class="small" fill="#a855f7" text-anchor="middle">repos... 🦞</text>
248
+
249
+ <!-- Shared memory hub -->
250
+ <rect x="720" y="156" width="130" height="26" rx="3" fill="#1a001a" stroke="#ff00ff" stroke-width="1.5"/>
251
+ <text x="785" y="167" class="caption" fill="#ff00ff" text-anchor="middle" font-weight="bold">SHARED MEMORY</text>
252
+ <text x="785" y="178" class="small" fill="#a855f7" text-anchor="middle">~/.va-claw/memory.db</text>
253
+
254
+ <!-- Connection lines from claws to memory -->
255
+ <line x1="701" y1="147" x2="745" y2="156" stroke="#00ff41" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
256
+ <line x1="786" y1="150" x2="786" y2="156" stroke="#00ffff" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
257
+ <line x1="872" y1="147" x2="826" y2="156" stroke="#a855f7" stroke-width="1" stroke-dasharray="4,3" opacity="0.7"/>
258
+
259
+ <!-- Caption -->
260
+ <rect x="664" y="192" width="242" height="32" rx="2" fill="#12001a"/>
261
+ <text x="785" y="206" class="caption" fill="#ffff00" text-anchor="middle" font-weight="bold">va-claw start — spawn infinite claws.</text>
262
+ <text x="785" y="220" class="caption" fill="#ff00ff" text-anchor="middle">One subscription. One memory. Many workers.</text>
263
+
264
+ </svg>
package/index.html CHANGED
@@ -106,23 +106,90 @@
106
106
  }
107
107
 
108
108
  .pixel-border-violet {
109
- box-shadow:
110
- 4px 0 0 var(--violet),
111
- -4px 0 0 var(--violet),
112
- 0 4px 0 var(--violet),
109
+ box-shadow:
110
+ 4px 0 0 var(--violet),
111
+ -4px 0 0 var(--violet),
112
+ 0 4px 0 var(--violet),
113
113
  0 -4px 0 var(--violet);
114
114
  margin: 4px;
115
115
  }
116
116
 
117
117
  .pixel-border-cyan {
118
- box-shadow:
119
- 4px 0 0 var(--cyan),
120
- -4px 0 0 var(--cyan),
121
- 0 4px 0 var(--cyan),
118
+ box-shadow:
119
+ 4px 0 0 var(--cyan),
120
+ -4px 0 0 var(--cyan),
121
+ 0 4px 0 var(--cyan),
122
122
  0 -4px 0 var(--cyan);
123
123
  margin: 4px;
124
124
  }
125
125
 
126
+ .pixel-border-amber {
127
+ box-shadow:
128
+ 4px 0 0 var(--amber),
129
+ -4px 0 0 var(--amber),
130
+ 0 4px 0 var(--amber),
131
+ 0 -4px 0 var(--amber);
132
+ margin: 4px;
133
+ }
134
+
135
+ .pixel-border-green {
136
+ box-shadow:
137
+ 4px 0 0 var(--green),
138
+ -4px 0 0 var(--green),
139
+ 0 4px 0 var(--green),
140
+ 0 -4px 0 var(--green);
141
+ margin: 4px;
142
+ }
143
+
144
+ /* COMIC STRIP */
145
+ .comic-strip-section {
146
+ margin-bottom: 80px;
147
+ }
148
+
149
+ .comic-strip {
150
+ display: grid;
151
+ grid-template-columns: repeat(4, 1fr);
152
+ gap: 24px;
153
+ }
154
+
155
+ @media (max-width: 800px) {
156
+ .comic-strip {
157
+ grid-template-columns: repeat(2, 1fr);
158
+ }
159
+ }
160
+
161
+ @media (max-width: 500px) {
162
+ .comic-strip {
163
+ grid-template-columns: 1fr;
164
+ }
165
+ }
166
+
167
+ .comic-panel {
168
+ background: #080810;
169
+ padding: 12px;
170
+ position: relative;
171
+ cursor: default;
172
+ transition: transform 0.1s steps(2);
173
+ }
174
+
175
+ .comic-panel:hover {
176
+ transform: translate(-2px, -2px);
177
+ }
178
+
179
+ .panel-num {
180
+ font-family: 'Press Start 2P', cursive;
181
+ font-size: 9px;
182
+ margin-bottom: 8px;
183
+ opacity: 0.8;
184
+ }
185
+
186
+ .panel-svg {
187
+ width: 100%;
188
+ height: auto;
189
+ display: block;
190
+ image-rendering: pixelated;
191
+ }
192
+
126
193
  .btn {
127
194
  display: inline-block;
128
195
  padding: 16px 24px;
@@ -473,6 +540,200 @@
473
540
  </div>
474
541
  </section>
475
542
 
543
+ <!-- COMIC STRIP: WHY VA-CLAW EXISTS -->
544
+ <section class="comic-strip-section">
545
+ <h2 class="section-title neon-text" style="text-align:center; margin-bottom:40px; font-size:14px;">// WHY VA-CLAW EXISTS</h2>
546
+ <div class="comic-strip">
547
+
548
+ <!-- PANEL 1: The Problem -->
549
+ <div class="comic-panel pixel-border-amber">
550
+ <div class="panel-num" style="color:var(--amber)">01</div>
551
+ <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
552
+ <!-- Background -->
553
+ <rect width="200" height="160" fill="#0a0a0f"/>
554
+ <!-- Desk -->
555
+ <rect x="20" y="120" width="160" height="8" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
556
+ <!-- Monitor -->
557
+ <rect x="60" y="55" width="80" height="55" rx="2" fill="#0d0d1a" stroke="#00ffff" stroke-width="1.5"/>
558
+ <rect x="65" y="60" width="70" height="42" fill="#001a00"/>
559
+ <!-- Screen text: session reset -->
560
+ <text x="68" y="72" font-family="monospace" font-size="5" fill="#ff4444">SESSION RESET</text>
561
+ <text x="68" y="82" font-family="monospace" font-size="5" fill="#ff6b35">Who are you?</text>
562
+ <text x="68" y="92" font-family="monospace" font-size="5" fill="#ff4444">No memory found</text>
563
+ <text x="68" y="102" font-family="monospace" font-size="4" fill="#666">▋</text>
564
+ <!-- Monitor stand -->
565
+ <rect x="95" y="110" width="10" height="10" fill="#1a1a2e" stroke="#00ffff" stroke-width="1"/>
566
+ <!-- Person (pixel art style) -->
567
+ <!-- Head -->
568
+ <rect x="22" y="60" width="20" height="20" rx="2" fill="#ffcc99" stroke="#cc9966" stroke-width="1"/>
569
+ <rect x="26" y="65" width="4" height="4" fill="#333"/>
570
+ <rect x="32" y="65" width="4" height="4" fill="#333"/>
571
+ <rect x="27" y="73" width="8" height="2" fill="#cc6666"/>
572
+ <!-- Hair -->
573
+ <rect x="22" y="58" width="20" height="5" fill="#4a3000"/>
574
+ <!-- Body -->
575
+ <rect x="18" y="80" width="28" height="28" rx="2" fill="#2244aa" stroke="#1133aa" stroke-width="1"/>
576
+ <!-- Arms up frustrated -->
577
+ <rect x="4" y="78" width="14" height="6" rx="2" fill="#ffcc99" transform="rotate(-30 11 81)"/>
578
+ <rect x="46" y="78" width="14" height="6" rx="2" fill="#ffcc99" transform="rotate(30 53 81)"/>
579
+ <!-- Legs -->
580
+ <rect x="22" y="108" width="10" height="12" fill="#1a1a5e"/>
581
+ <rect x="32" y="108" width="10" height="12" fill="#1a1a5e"/>
582
+ <!-- Sweat drops / frustration -->
583
+ <text x="44" y="58" font-family="monospace" font-size="10" fill="#ff4444">😤</text>
584
+ <!-- Caption -->
585
+ <text x="100" y="148" font-family="monospace" font-size="4.5" fill="#ff6b35" text-anchor="middle">CLAUDE CODE FORGETS</text>
586
+ <text x="100" y="156" font-family="monospace" font-size="4.5" fill="#ff4444" text-anchor="middle">YOU. EVERY. SESSION.</text>
587
+ </svg>
588
+ </div>
589
+
590
+ <!-- PANEL 2: The Transformation -->
591
+ <div class="comic-panel pixel-border-cyan">
592
+ <div class="panel-num" style="color:var(--cyan)">02</div>
593
+ <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
594
+ <rect width="200" height="160" fill="#0a0a0f"/>
595
+ <!-- Terminal glow effect -->
596
+ <rect x="10" y="20" width="180" height="70" rx="3" fill="#001a00" stroke="#00ff41" stroke-width="1.5"/>
597
+ <rect x="14" y="24" width="172" height="62" fill="#000d00"/>
598
+ <!-- Terminal content -->
599
+ <text x="18" y="37" font-family="monospace" font-size="5.5" fill="#00ff41">$ npm install -g va-claw</text>
600
+ <text x="18" y="49" font-family="monospace" font-size="5" fill="#666">added 1 package in 4s</text>
601
+ <text x="18" y="59" font-family="monospace" font-size="5.5" fill="#00ff41">$ va-claw install</text>
602
+ <text x="18" y="69" font-family="monospace" font-size="5" fill="#a855f7">✓ identity injected</text>
603
+ <text x="18" y="79" font-family="monospace" font-size="5" fill="#a855f7">✓ memory online</text>
604
+ <!-- Magic sparkles coming from screen -->
605
+ <text x="15" y="110" font-family="monospace" font-size="14" fill="#ffff00">✨</text>
606
+ <text x="85" y="120" font-family="monospace" font-size="14" fill="#a855f7">✨</text>
607
+ <text x="155" y="105" font-family="monospace" font-size="14" fill="#00ffff">✨</text>
608
+ <!-- Arrow transformation -->
609
+ <text x="100" y="108" font-family="monospace" font-size="20" fill="#00ff41" text-anchor="middle">⚡</text>
610
+ <!-- Caption -->
611
+ <text x="100" y="140" font-family="monospace" font-size="5" fill="#00ff41" text-anchor="middle">ONE COMMAND.</text>
612
+ <text x="100" y="150" font-family="monospace" font-size="5" fill="#00ffff" text-anchor="middle">30 SECONDS.</text>
613
+ <text x="100" y="158" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">EVERYTHING CHANGES.</text>
614
+ </svg>
615
+ </div>
616
+
617
+ <!-- PANEL 3: The OpenClaw -->
618
+ <div class="comic-panel pixel-border-violet">
619
+ <div class="panel-num" style="color:var(--violet)">03</div>
620
+ <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
621
+ <rect width="200" height="160" fill="#0a0a0f"/>
622
+ <!-- Glow backdrop for claw -->
623
+ <ellipse cx="100" cy="85" rx="65" ry="55" fill="#1a0030" opacity="0.8"/>
624
+ <!-- Big pixel lobster / claw mascot -->
625
+ <!-- Body -->
626
+ <rect x="75" y="65" width="50" height="35" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
627
+ <!-- Shell segments -->
628
+ <line x1="75" y1="76" x2="125" y2="76" stroke="#cc3300" stroke-width="1"/>
629
+ <line x1="75" y1="87" x2="125" y2="87" stroke="#cc3300" stroke-width="1"/>
630
+ <!-- Eyes -->
631
+ <circle cx="88" cy="60" r="6" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
632
+ <circle cx="112" cy="60" r="6" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
633
+ <circle cx="88" cy="60" r="3" fill="#00ff41"/>
634
+ <circle cx="112" cy="60" r="3" fill="#00ff41"/>
635
+ <circle cx="89" cy="59" r="1" fill="#000"/>
636
+ <circle cx="113" cy="59" r="1" fill="#000"/>
637
+ <!-- Antennae -->
638
+ <line x1="88" y1="54" x2="72" y2="35" stroke="#ff6b35" stroke-width="1.5"/>
639
+ <line x1="112" y1="54" x2="128" y2="35" stroke="#ff6b35" stroke-width="1.5"/>
640
+ <circle cx="72" cy="35" r="2" fill="#ffff00"/>
641
+ <circle cx="128" cy="35" r="2" fill="#ffff00"/>
642
+ <!-- Left big claw -->
643
+ <rect x="35" y="68" width="40" height="18" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
644
+ <rect x="30" y="63" width="18" height="12" rx="2" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
645
+ <rect x="30" y="77" width="18" height="12" rx="2" fill="#cc3300" stroke="#ff6b35" stroke-width="1"/>
646
+ <!-- Right big claw -->
647
+ <rect x="125" y="68" width="40" height="18" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
648
+ <rect x="152" y="63" width="18" height="12" rx="2" fill="#ff4400" stroke="#ff6b35" stroke-width="1"/>
649
+ <rect x="152" y="77" width="18" height="12" rx="2" fill="#cc3300" stroke="#ff6b35" stroke-width="1"/>
650
+ <!-- Legs -->
651
+ <line x1="85" y1="100" x2="78" y2="118" stroke="#ff4400" stroke-width="2"/>
652
+ <line x1="93" y1="100" x2="88" y2="120" stroke="#ff4400" stroke-width="2"/>
653
+ <line x1="107" y1="100" x2="112" y2="120" stroke="#ff4400" stroke-width="2"/>
654
+ <line x1="115" y1="100" x2="122" y2="118" stroke="#ff4400" stroke-width="2"/>
655
+ <!-- Memory chip on back -->
656
+ <rect x="86" y="68" width="28" height="16" rx="2" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
657
+ <text x="100" y="79" font-family="monospace" font-size="5" fill="#fff" text-anchor="middle">MEM</text>
658
+ <!-- Status badges floating -->
659
+ <rect x="12" y="20" width="42" height="14" rx="2" fill="#003300" stroke="#00ff41" stroke-width="1"/>
660
+ <text x="33" y="30" font-family="monospace" font-size="4" fill="#00ff41" text-anchor="middle">🧠 MEMORY</text>
661
+ <rect x="146" y="20" width="44" height="14" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
662
+ <text x="168" y="30" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">⏰ LOOP</text>
663
+ <rect x="74" y="125" width="52" height="14" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
664
+ <text x="100" y="135" font-family="monospace" font-size="4" fill="#00ffff" text-anchor="middle">🎭 IDENTITY</text>
665
+ <!-- Caption -->
666
+ <text x="100" y="153" font-family="monospace" font-size="5" fill="#ff6b35" text-anchor="middle">YOUR CLAUDE CODE</text>
667
+ <text x="100" y="161" font-family="monospace" font-size="5" fill="#ff4400" text-anchor="middle">IS NOW AN OPENCLAW 🦞</text>
668
+ </svg>
669
+ </div>
670
+
671
+ <!-- PANEL 4: Multi-claw fleet -->
672
+ <div class="comic-panel pixel-border-green">
673
+ <div class="panel-num" style="color:var(--green)">04</div>
674
+ <svg viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg" class="panel-svg">
675
+ <rect width="200" height="160" fill="#0a0a0f"/>
676
+ <!-- Three small claws working in parallel -->
677
+ <!-- Claw 1 -->
678
+ <g transform="translate(10, 30) scale(0.5)">
679
+ <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
680
+ <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
681
+ <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
682
+ <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
683
+ <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
684
+ <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
685
+ <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
686
+ <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
687
+ </g>
688
+ <!-- Claw 2 -->
689
+ <g transform="translate(75, 20) scale(0.5)">
690
+ <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
691
+ <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
692
+ <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
693
+ <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
694
+ <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
695
+ <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
696
+ <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
697
+ <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
698
+ </g>
699
+ <!-- Claw 3 -->
700
+ <g transform="translate(140, 30) scale(0.5)">
701
+ <rect x="50" y="40" width="40" height="28" rx="4" fill="#ff4400" stroke="#ff6b35" stroke-width="2"/>
702
+ <circle cx="62" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
703
+ <circle cx="78" cy="35" r="5" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
704
+ <circle cx="62" cy="35" r="2.5" fill="#00ff41"/>
705
+ <circle cx="78" cy="35" r="2.5" fill="#00ff41"/>
706
+ <rect x="30" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
707
+ <rect x="88" y="44" width="22" height="14" rx="3" fill="#ff4400" stroke="#ff6b35" stroke-width="1.5"/>
708
+ <rect x="60" y="43" width="20" height="13" rx="1" fill="#a855f7" stroke="#cc77ff" stroke-width="1"/>
709
+ </g>
710
+ <!-- Work bubbles -->
711
+ <rect x="5" y="80" width="55" height="22" rx="2" fill="#001a00" stroke="#00ff41" stroke-width="1"/>
712
+ <text x="32" y="89" font-family="monospace" font-size="4" fill="#00ff41" text-anchor="middle">reviewing PR</text>
713
+ <text x="32" y="98" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-1 🦞</text>
714
+ <rect x="73" y="68" width="55" height="22" rx="2" fill="#001a1a" stroke="#00ffff" stroke-width="1"/>
715
+ <text x="100" y="77" font-family="monospace" font-size="4" fill="#00ffff" text-anchor="middle">writing tests</text>
716
+ <text x="100" y="86" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-2 🦞</text>
717
+ <rect x="140" y="80" width="55" height="22" rx="2" fill="#1a0030" stroke="#a855f7" stroke-width="1"/>
718
+ <text x="167" y="89" font-family="monospace" font-size="4" fill="#a855f7" text-anchor="middle">monitoring</text>
719
+ <text x="167" y="98" font-family="monospace" font-size="4" fill="#666" text-anchor="middle">claw-3 🦞</text>
720
+ <!-- Shared memory hub -->
721
+ <rect x="70" y="108" width="60" height="20" rx="3" fill="#1a001a" stroke="#ff00ff" stroke-width="1.5"/>
722
+ <text x="100" y="118" font-family="monospace" font-size="4" fill="#ff00ff" text-anchor="middle">SHARED MEMORY</text>
723
+ <text x="100" y="125" font-family="monospace" font-size="3.5" fill="#a855f7" text-anchor="middle">~/.va-claw/memory.db</text>
724
+ <!-- Connection lines -->
725
+ <line x1="32" y1="103" x2="90" y2="108" stroke="#00ff41" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
726
+ <line x1="100" y1="90" x2="100" y2="108" stroke="#00ffff" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
727
+ <line x1="167" y1="103" x2="110" y2="108" stroke="#a855f7" stroke-width="0.8" opacity="0.6" stroke-dasharray="3,2"/>
728
+ <!-- Caption -->
729
+ <text x="100" y="146" font-family="monospace" font-size="4.5" fill="#ffff00" text-anchor="middle">SPAWN A FLEET.</text>
730
+ <text x="100" y="156" font-family="monospace" font-size="4.5" fill="#00ff41" text-anchor="middle">ONE MEMORY. INFINITE CLAWS.</text>
731
+ </svg>
732
+ </div>
733
+
734
+ </div>
735
+ </section>
736
+
476
737
  <!-- THE PITCH -->
477
738
  <section class="pitch">
478
739
  <div class="pitch-grid">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "va-claw",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Persistent memory, identity, and wake-loop daemon for Claude Code & Codex",
5
5
  "keywords": [
6
6
  "claude-code",