shmakk 1.2.0 → 1.2.2
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.
- package/README.md +68 -2
- package/package.json +2 -2
- package/scripts/demo/record.py +196 -0
- package/scripts/demo/scenes.html +913 -0
- package/skills/media-video-compose.md +320 -0
- package/skills/media-video-script.md +204 -0
- package/skills/media-video-voice.md +184 -0
- package/src/agent-overview.js +320 -0
- package/src/agent-roster.js +53 -0
- package/src/agent.js +178 -18
- package/src/cli.js +220 -86
- package/src/completions.js +3 -1
- package/src/correction.js +11 -4
- package/src/endpoints.js +94 -31
- package/src/guard.js +101 -0
- package/src/index.js +19 -5
- package/src/llm.js +462 -52
- package/src/markdown.js +217 -0
- package/src/notify.js +34 -0
- package/src/pty.js +1 -1
- package/src/review.js +8 -1
- package/src/self-commands.js +108 -2
- package/src/session.js +58 -2
- package/src/ssh.js +255 -0
- package/src/subagent.js +12 -1
- package/src/taskClassifier.js +2 -2
- package/src/team.js +22 -0
- package/src/tools.js +487 -1
- package/src/workflows.js +32 -0
|
@@ -0,0 +1,913 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>shmakk demo scenes</title>
|
|
7
|
+
<style>
|
|
8
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
background: #0f1117;
|
|
12
|
+
font-family: 'JetBrains Mono', 'Fira Mono', monospace;
|
|
13
|
+
color: #d4d4d4;
|
|
14
|
+
width: 1920px;
|
|
15
|
+
height: 1080px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
position: relative;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* ---- SCENE CONTAINERS ---- */
|
|
25
|
+
.scene {
|
|
26
|
+
position: absolute;
|
|
27
|
+
inset: 0;
|
|
28
|
+
display: none;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
.scene.active { display: flex; }
|
|
34
|
+
|
|
35
|
+
/* ---- TITLE SCENE ---- */
|
|
36
|
+
.title-scene {
|
|
37
|
+
background: radial-gradient(ellipse at center, #1a1f2e 0%, #0f1117 70%);
|
|
38
|
+
}
|
|
39
|
+
.title-scene .logo {
|
|
40
|
+
font-family: 'JetBrains Mono', monospace;
|
|
41
|
+
font-size: 120px;
|
|
42
|
+
font-weight: 700;
|
|
43
|
+
letter-spacing: 0.04em;
|
|
44
|
+
background: linear-gradient(135deg, #4af073 20%, #4da6ff 80%);
|
|
45
|
+
-webkit-background-clip: text;
|
|
46
|
+
-webkit-text-fill-color: transparent;
|
|
47
|
+
background-clip: text;
|
|
48
|
+
margin-bottom: 16px;
|
|
49
|
+
}
|
|
50
|
+
.title-scene .tagline {
|
|
51
|
+
font-size: 22px;
|
|
52
|
+
color: #666;
|
|
53
|
+
letter-spacing: 0.06em;
|
|
54
|
+
}
|
|
55
|
+
.title-scene .sub-tagline {
|
|
56
|
+
font-size: 14px;
|
|
57
|
+
color: #3a3a3a;
|
|
58
|
+
margin-top: 8px;
|
|
59
|
+
font-style: italic;
|
|
60
|
+
}
|
|
61
|
+
.title-scene .install-line {
|
|
62
|
+
margin-top: 40px;
|
|
63
|
+
font-size: 16px;
|
|
64
|
+
color: #4af073;
|
|
65
|
+
background: #111;
|
|
66
|
+
border: 1px solid #2a2a2a;
|
|
67
|
+
border-radius: 4px;
|
|
68
|
+
padding: 10px 24px;
|
|
69
|
+
}
|
|
70
|
+
.title-scene .install-line .muted { color: #555; }
|
|
71
|
+
|
|
72
|
+
/* ---- TERMINAL SCENE ---- */
|
|
73
|
+
.terminal-scene {
|
|
74
|
+
justify-content: center;
|
|
75
|
+
align-items: center;
|
|
76
|
+
background: #0f1117;
|
|
77
|
+
}
|
|
78
|
+
.terminal-scene .window {
|
|
79
|
+
width: 900px;
|
|
80
|
+
background: #0a0c11;
|
|
81
|
+
border: 1px solid #2a2d35;
|
|
82
|
+
border-radius: 8px;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
85
|
+
}
|
|
86
|
+
.terminal-scene .titlebar {
|
|
87
|
+
background: #181b22;
|
|
88
|
+
padding: 10px 16px;
|
|
89
|
+
display: flex; align-items: center; gap: 8px;
|
|
90
|
+
border-bottom: 1px solid #2a2d35;
|
|
91
|
+
}
|
|
92
|
+
.terminal-scene .dot { width: 12px; height: 12px; border-radius: 50%; }
|
|
93
|
+
.terminal-scene .dot-r { background: #ff5f57; }
|
|
94
|
+
.terminal-scene .dot-y { background: #febc2e; }
|
|
95
|
+
.terminal-scene .dot-g { background: #28c840; }
|
|
96
|
+
.terminal-scene .win-title {
|
|
97
|
+
margin-left: 10px;
|
|
98
|
+
font-size: 12px;
|
|
99
|
+
color: #444;
|
|
100
|
+
}
|
|
101
|
+
.terminal-scene .term {
|
|
102
|
+
padding: 18px 22px 28px;
|
|
103
|
+
font-size: 15px;
|
|
104
|
+
line-height: 1.75;
|
|
105
|
+
min-height: 420px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* terminal colors */
|
|
109
|
+
.hostname { color: #4af073; }
|
|
110
|
+
.path { color: #5c9cf5; }
|
|
111
|
+
.exitcode { color: #ff6b6b; }
|
|
112
|
+
.muted { color: #555; }
|
|
113
|
+
.white { color: #fff; }
|
|
114
|
+
.user-input { color: #e0e0e0; }
|
|
115
|
+
.cmd-first { color: #e0e0e0; }
|
|
116
|
+
.task-label { color: #888; }
|
|
117
|
+
.thinking { color: #888; }
|
|
118
|
+
.ai-out { color: #d4d4d4; }
|
|
119
|
+
.tool-arrow { color: #4af073; }
|
|
120
|
+
.tool-name { color: #d4d4d4; }
|
|
121
|
+
.tool-result { color: #888; }
|
|
122
|
+
.corr-old { color: #ff6b6b; text-decoration: line-through; }
|
|
123
|
+
.corr-arrow { color: #888; }
|
|
124
|
+
.corr-new { color: #4af073; }
|
|
125
|
+
.code { color: #4af073; }
|
|
126
|
+
.warn-val { color: #ffb830; }
|
|
127
|
+
.confirm { color: #d4d4d4; }
|
|
128
|
+
|
|
129
|
+
.ln { opacity: 0; transition: opacity 0.08s; }
|
|
130
|
+
.ln.show { opacity: 1; }
|
|
131
|
+
|
|
132
|
+
.cur {
|
|
133
|
+
display: inline-block; width: 9px; height: 16px;
|
|
134
|
+
background: #d4d4d4; vertical-align: text-bottom;
|
|
135
|
+
animation: blink 1.1s step-end infinite; margin-left: 2px;
|
|
136
|
+
}
|
|
137
|
+
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
138
|
+
|
|
139
|
+
.prompt-line { margin-top: 4px; }
|
|
140
|
+
|
|
141
|
+
/* ---- OVERLAY ---- */
|
|
142
|
+
.overlay {
|
|
143
|
+
position: absolute;
|
|
144
|
+
inset: 0;
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
align-items: center;
|
|
149
|
+
pointer-events: none;
|
|
150
|
+
z-index: 10;
|
|
151
|
+
}
|
|
152
|
+
.overlay-label {
|
|
153
|
+
font-family: 'JetBrains Mono', monospace;
|
|
154
|
+
font-size: 13px;
|
|
155
|
+
letter-spacing: 0.15em;
|
|
156
|
+
text-transform: uppercase;
|
|
157
|
+
color: #4af073;
|
|
158
|
+
background: rgba(15,17,23,0.85);
|
|
159
|
+
border: 1px solid rgba(74,240,115,0.3);
|
|
160
|
+
border-radius: 4px;
|
|
161
|
+
padding: 8px 20px;
|
|
162
|
+
opacity: 0;
|
|
163
|
+
transition: opacity 0.4s;
|
|
164
|
+
position: absolute;
|
|
165
|
+
top: 60px;
|
|
166
|
+
}
|
|
167
|
+
.overlay-label.show { opacity: 1; }
|
|
168
|
+
|
|
169
|
+
/* ---- SCENE BADGE ---- */
|
|
170
|
+
.scene-badge {
|
|
171
|
+
position: absolute;
|
|
172
|
+
bottom: 40px;
|
|
173
|
+
left: 50%;
|
|
174
|
+
transform: translateX(-50%);
|
|
175
|
+
font-size: 11px;
|
|
176
|
+
color: #2a2a2a;
|
|
177
|
+
letter-spacing: 0.1em;
|
|
178
|
+
z-index: 5;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* pulse ring for voice scene */
|
|
182
|
+
.mic-ring {
|
|
183
|
+
display: inline-block;
|
|
184
|
+
width: 10px; height: 10px;
|
|
185
|
+
border-radius: 50%;
|
|
186
|
+
background: #4af073;
|
|
187
|
+
animation: mic-pulse 1.5s ease-in-out infinite;
|
|
188
|
+
margin-right: 6px;
|
|
189
|
+
}
|
|
190
|
+
@keyframes mic-pulse {
|
|
191
|
+
0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(74,240,115,0.4); }
|
|
192
|
+
50% { transform: scale(1.2); opacity: 0.7; box-shadow: 0 0 0 6px rgba(74,240,115,0); }
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* feature callout */
|
|
196
|
+
.callout {
|
|
197
|
+
position: absolute;
|
|
198
|
+
right: 80px;
|
|
199
|
+
top: 50%;
|
|
200
|
+
transform: translateY(-50%);
|
|
201
|
+
font-family: 'JetBrains Mono', monospace;
|
|
202
|
+
font-size: 12px;
|
|
203
|
+
color: #4af073;
|
|
204
|
+
text-align: right;
|
|
205
|
+
opacity: 0;
|
|
206
|
+
transition: opacity 0.5s;
|
|
207
|
+
z-index: 8;
|
|
208
|
+
}
|
|
209
|
+
.callout.show { opacity: 1; }
|
|
210
|
+
.callout .callout-title {
|
|
211
|
+
font-size: 10px;
|
|
212
|
+
color: #555;
|
|
213
|
+
letter-spacing: 0.1em;
|
|
214
|
+
text-transform: uppercase;
|
|
215
|
+
margin-bottom: 6px;
|
|
216
|
+
}
|
|
217
|
+
.callout .callout-body {
|
|
218
|
+
font-size: 14px;
|
|
219
|
+
color: #d4d4d4;
|
|
220
|
+
line-height: 1.6;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* mobile notice scene */
|
|
224
|
+
.notice-scene {
|
|
225
|
+
background: radial-gradient(ellipse at center, #1a1f2e 0%, #0f1117 70%);
|
|
226
|
+
text-align: center;
|
|
227
|
+
}
|
|
228
|
+
.notice-scene .notice-text {
|
|
229
|
+
font-size: 24px;
|
|
230
|
+
color: #aaa;
|
|
231
|
+
line-height: 1.8;
|
|
232
|
+
}
|
|
233
|
+
.notice-scene .notice-cta {
|
|
234
|
+
margin-top: 30px;
|
|
235
|
+
font-size: 18px;
|
|
236
|
+
color: #4af073;
|
|
237
|
+
background: #111;
|
|
238
|
+
border: 1px solid #2a2a2a;
|
|
239
|
+
border-radius: 4px;
|
|
240
|
+
padding: 14px 28px;
|
|
241
|
+
}
|
|
242
|
+
</style>
|
|
243
|
+
</head>
|
|
244
|
+
<body>
|
|
245
|
+
|
|
246
|
+
<!-- ====== SCENE 0: TITLE ====== -->
|
|
247
|
+
<div class="scene active" id="scene-title">
|
|
248
|
+
<div class="title-scene" style="position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;">
|
|
249
|
+
<div class="logo" id="title-logo" style="opacity:0;transform:translateY(20px);transition:all 0.8s ease-out;">shmakk</div>
|
|
250
|
+
<div class="tagline" id="title-tagline" style="opacity:0;transform:translateY(15px);transition:all 0.8s ease-out 0.3s;">AI-supervised terminal</div>
|
|
251
|
+
<div class="sub-tagline" id="title-sub" style="opacity:0;transition:all 0.8s ease-out 0.6s;">No GUI. No bloat. Just your shell, smarter.</div>
|
|
252
|
+
<div class="install-line" id="title-install" style="opacity:0;transition:all 0.8s ease-out 0.9s;">
|
|
253
|
+
npm install -g <span class="muted">shmakk</span>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- ====== SCENE 1: INSTALL ====== -->
|
|
259
|
+
<div class="scene" id="scene-install">
|
|
260
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
261
|
+
<div class="overlay-label" id="ol-install">getting started</div>
|
|
262
|
+
<div class="window">
|
|
263
|
+
<div class="titlebar">
|
|
264
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
265
|
+
<span class="win-title">shmakk : setup</span>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="term" id="term-install"></div>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="scene-badge">scene 1/8</div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
<!-- ====== SCENE 2: TYPO CORRECTION ====== -->
|
|
274
|
+
<div class="scene" id="scene-typo">
|
|
275
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
276
|
+
<div class="overlay-label" id="ol-typo">typo correction</div>
|
|
277
|
+
<div class="callout" id="co-typo">
|
|
278
|
+
<div class="callout-title">feature</div>
|
|
279
|
+
<div class="callout-body">Mistyped a command?<br>shmakk detects it,<br>suggests a fix, and<br>re-runs automatically.</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="window">
|
|
282
|
+
<div class="titlebar">
|
|
283
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
284
|
+
<span class="win-title">shmakk : MainThread</span>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="term" id="term-typo"></div>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="scene-badge">scene 2/8</div>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
|
|
292
|
+
<!-- ====== SCENE 3: CHAT ====== -->
|
|
293
|
+
<div class="scene" id="scene-chat">
|
|
294
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
295
|
+
<div class="overlay-label" id="ol-chat">natural language</div>
|
|
296
|
+
<div class="callout" id="co-chat">
|
|
297
|
+
<div class="callout-title">feature</div>
|
|
298
|
+
<div class="callout-body">Ask questions in plain<br>English. shmakk understands<br>intent, not just syntax.</div>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="window">
|
|
301
|
+
<div class="titlebar">
|
|
302
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
303
|
+
<span class="win-title">shmakk : MainThread</span>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="term" id="term-chat"></div>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="scene-badge">scene 3/8</div>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
|
|
311
|
+
<!-- ====== SCENE 4: PROJECT BUILDER ====== -->
|
|
312
|
+
<div class="scene" id="scene-project">
|
|
313
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
314
|
+
<div class="overlay-label" id="ol-project">project builder</div>
|
|
315
|
+
<div class="callout" id="co-project">
|
|
316
|
+
<div class="callout-title">feature</div>
|
|
317
|
+
<div class="callout-body">"Set up a new project"<br>shmakk plans, scaffolds,<br>and builds — hands-free.</div>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="window">
|
|
320
|
+
<div class="titlebar">
|
|
321
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
322
|
+
<span class="win-title">shmakk : MainThread</span>
|
|
323
|
+
</div>
|
|
324
|
+
<div class="term" id="term-project"></div>
|
|
325
|
+
</div>
|
|
326
|
+
<div class="scene-badge">scene 4/8</div>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<!-- ====== SCENE 5: SAFETY ====== -->
|
|
331
|
+
<div class="scene" id="scene-safety">
|
|
332
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
333
|
+
<div class="overlay-label" id="ol-safety">safety controls</div>
|
|
334
|
+
<div class="callout" id="co-safety">
|
|
335
|
+
<div class="callout-title">feature</div>
|
|
336
|
+
<div class="callout-body">Dangerous commands are<br>intercepted. shmakk asks<br>for confirmation before<br>anything destructive.</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="window">
|
|
339
|
+
<div class="titlebar">
|
|
340
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
341
|
+
<span class="win-title">shmakk : MainThread</span>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="term" id="term-safety"></div>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="scene-badge">scene 5/8</div>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<!-- ====== SCENE 6: SKILLS & PROFILES ====== -->
|
|
350
|
+
<div class="scene" id="scene-skills">
|
|
351
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
352
|
+
<div class="overlay-label" id="ol-skills">skills & profiles</div>
|
|
353
|
+
<div class="callout" id="co-skills">
|
|
354
|
+
<div class="callout-title">feature</div>
|
|
355
|
+
<div class="callout-body">32 built-in skills for<br>code review, research,<br>devops, and more.<br><br>4 runtime profiles from<br>tiny to large-app.</div>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="window">
|
|
358
|
+
<div class="titlebar">
|
|
359
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
360
|
+
<span class="win-title">shmakk : MainThread</span>
|
|
361
|
+
</div>
|
|
362
|
+
<div class="term" id="term-skills"></div>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="scene-badge">scene 6/8</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<!-- ====== SCENE 7: VOICE ====== -->
|
|
369
|
+
<div class="scene" id="scene-voice">
|
|
370
|
+
<div class="terminal-scene" style="position:absolute;inset:0;display:flex;">
|
|
371
|
+
<div class="overlay-label" id="ol-voice">voice mode</div>
|
|
372
|
+
<div class="callout" id="co-voice">
|
|
373
|
+
<div class="callout-title">feature</div>
|
|
374
|
+
<div class="callout-body">Speak naturally.<br>shmakk listens, responds,<br>and reads answers aloud.<br>No push-to-talk needed.</div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="window">
|
|
377
|
+
<div class="titlebar">
|
|
378
|
+
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
|
|
379
|
+
<span class="win-title">shmakk : voice</span>
|
|
380
|
+
</div>
|
|
381
|
+
<div class="term" id="term-voice"></div>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="scene-badge">scene 7/8</div>
|
|
384
|
+
</div>
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<!-- ====== SCENE 8: OUTRO ====== -->
|
|
388
|
+
<div class="scene" id="scene-outro">
|
|
389
|
+
<div class="title-scene" style="position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;">
|
|
390
|
+
<div class="logo" id="outro-logo" style="opacity:0;transform:translateY(20px);transition:all 0.8s ease-out;">shmakk</div>
|
|
391
|
+
<div class="tagline" id="outro-tagline" style="opacity:0;transition:all 0.8s ease-out 0.3s;">Your terminal, supercharged.</div>
|
|
392
|
+
<div class="install-line" id="outro-install" style="opacity:0;transition:all 0.8s ease-out 0.6s;">
|
|
393
|
+
npm install -g <span class="muted">shmakk</span>
|
|
394
|
+
</div>
|
|
395
|
+
<div style="margin-top:30px;opacity:0;transition:all 0.8s ease-out 0.9s;" id="outro-gh">
|
|
396
|
+
<span style="font-size:14px;color:#555;">github.com/marbad1994/shmakk</span>
|
|
397
|
+
</div>
|
|
398
|
+
<div style="margin-top:20px;opacity:0;transition:all 0.8s ease-out 1.2s;" id="outro-star">
|
|
399
|
+
<span style="font-size:12px;color:#3a3a3a;">star the repo if this was useful</span>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<!-- ====== MOBILE NOTICE ====== -->
|
|
405
|
+
<div class="scene" id="scene-mobile">
|
|
406
|
+
<div class="notice-scene" style="position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;">
|
|
407
|
+
<div class="notice-text">shmakk works everywhere,<br>on every platform.</div>
|
|
408
|
+
<div class="notice-cta">One install. Your terminal, smarter.</div>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
|
|
412
|
+
<script>
|
|
413
|
+
// ---- SCENE DIRECTOR ----
|
|
414
|
+
const SCENES = [
|
|
415
|
+
'scene-title', // 0
|
|
416
|
+
'scene-install', // 1
|
|
417
|
+
'scene-typo', // 2
|
|
418
|
+
'scene-chat', // 3
|
|
419
|
+
'scene-project', // 4
|
|
420
|
+
'scene-safety', // 5
|
|
421
|
+
'scene-skills', // 6
|
|
422
|
+
'scene-voice', // 7
|
|
423
|
+
'scene-outro', // 8
|
|
424
|
+
];
|
|
425
|
+
|
|
426
|
+
let currentScene = 0;
|
|
427
|
+
|
|
428
|
+
function showScene(idx) {
|
|
429
|
+
document.querySelectorAll('.scene').forEach(s => s.classList.remove('active'));
|
|
430
|
+
const id = SCENES[idx];
|
|
431
|
+
document.getElementById(id).classList.add('active');
|
|
432
|
+
currentScene = idx;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
function typeLines(containerId, lines, delayMs, callback) {
|
|
436
|
+
const el = document.getElementById(containerId);
|
|
437
|
+
if (!el) { if (callback) callback(); return; }
|
|
438
|
+
el.innerHTML = '';
|
|
439
|
+
let i = 0;
|
|
440
|
+
function next() {
|
|
441
|
+
if (i >= lines.length) {
|
|
442
|
+
if (callback) callback();
|
|
443
|
+
return;
|
|
444
|
+
}
|
|
445
|
+
const div = document.createElement('div');
|
|
446
|
+
div.className = 'ln';
|
|
447
|
+
div.innerHTML = lines[i];
|
|
448
|
+
el.appendChild(div);
|
|
449
|
+
requestAnimationFrame(() => {
|
|
450
|
+
requestAnimationFrame(() => { div.classList.add('show'); });
|
|
451
|
+
});
|
|
452
|
+
i++;
|
|
453
|
+
setTimeout(next, delayMs);
|
|
454
|
+
}
|
|
455
|
+
next();
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
function clearAndRun(containerId, sequence, done) {
|
|
459
|
+
const el = document.getElementById(containerId);
|
|
460
|
+
if (!el) { if (done) done(); return; }
|
|
461
|
+
el.innerHTML = '';
|
|
462
|
+
let step = 0;
|
|
463
|
+
function runStep() {
|
|
464
|
+
if (step >= sequence.length) {
|
|
465
|
+
if (done) done();
|
|
466
|
+
return;
|
|
467
|
+
}
|
|
468
|
+
const s = sequence[step];
|
|
469
|
+
if (s.clear) {
|
|
470
|
+
el.innerHTML = '';
|
|
471
|
+
step++;
|
|
472
|
+
runStep();
|
|
473
|
+
return;
|
|
474
|
+
}
|
|
475
|
+
if (s.wait) {
|
|
476
|
+
step++;
|
|
477
|
+
setTimeout(runStep, s.wait);
|
|
478
|
+
return;
|
|
479
|
+
}
|
|
480
|
+
if (s.lines) {
|
|
481
|
+
let li = 0;
|
|
482
|
+
function addLine() {
|
|
483
|
+
if (li >= s.lines.length) {
|
|
484
|
+
step++;
|
|
485
|
+
if (s.afterWait) setTimeout(runStep, s.afterWait);
|
|
486
|
+
else runStep();
|
|
487
|
+
return;
|
|
488
|
+
}
|
|
489
|
+
const div = document.createElement('div');
|
|
490
|
+
div.className = 'ln';
|
|
491
|
+
div.innerHTML = s.lines[li];
|
|
492
|
+
el.appendChild(div);
|
|
493
|
+
requestAnimationFrame(() => {
|
|
494
|
+
requestAnimationFrame(() => { div.classList.add('show'); });
|
|
495
|
+
});
|
|
496
|
+
li++;
|
|
497
|
+
setTimeout(addLine, s.delay || 120);
|
|
498
|
+
}
|
|
499
|
+
addLine();
|
|
500
|
+
return;
|
|
501
|
+
}
|
|
502
|
+
step++;
|
|
503
|
+
runStep();
|
|
504
|
+
}
|
|
505
|
+
runStep();
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
// ---- SCENE SCRIPTS ----
|
|
509
|
+
function runTitleScene(done) {
|
|
510
|
+
showScene(0);
|
|
511
|
+
requestAnimationFrame(() => {
|
|
512
|
+
requestAnimationFrame(() => {
|
|
513
|
+
document.getElementById('title-logo').style.opacity = '1';
|
|
514
|
+
document.getElementById('title-logo').style.transform = 'translateY(0)';
|
|
515
|
+
});
|
|
516
|
+
});
|
|
517
|
+
setTimeout(() => {
|
|
518
|
+
document.getElementById('title-tagline').style.opacity = '1';
|
|
519
|
+
document.getElementById('title-tagline').style.transform = 'translateY(0)';
|
|
520
|
+
}, 400);
|
|
521
|
+
setTimeout(() => {
|
|
522
|
+
document.getElementById('title-sub').style.opacity = '1';
|
|
523
|
+
}, 800);
|
|
524
|
+
setTimeout(() => {
|
|
525
|
+
document.getElementById('title-install').style.opacity = '1';
|
|
526
|
+
}, 1200);
|
|
527
|
+
setTimeout(done, 4000);
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
function runInstallScene(done) {
|
|
531
|
+
showScene(1);
|
|
532
|
+
setTimeout(() => { document.getElementById('ol-install').classList.add('show'); }, 200);
|
|
533
|
+
|
|
534
|
+
const seq = [
|
|
535
|
+
{ lines: [
|
|
536
|
+
'<span class="hostname">marcus@workstation</span> <span class="path">~</span><span class="muted">></span> <span class="white">npm install -g shmakk</span>',
|
|
537
|
+
], delay: 100 },
|
|
538
|
+
{ wait: 800 },
|
|
539
|
+
{ lines: [
|
|
540
|
+
'<span class="muted">added 47 packages in 3s</span>',
|
|
541
|
+
], delay: 80 },
|
|
542
|
+
{ wait: 500 },
|
|
543
|
+
{ lines: [
|
|
544
|
+
'',
|
|
545
|
+
'<span class="hostname">marcus@workstation</span> <span class="path">~</span><span class="muted">></span> <span class="white">export SHMAKK_API_KEY="sk-..."</span>',
|
|
546
|
+
], delay: 80 },
|
|
547
|
+
{ wait: 300 },
|
|
548
|
+
{ lines: [
|
|
549
|
+
'<span class="hostname">marcus@workstation</span> <span class="path">~</span><span class="muted">></span> <span class="white">shmakk</span>',
|
|
550
|
+
], delay: 80 },
|
|
551
|
+
{ wait: 400 },
|
|
552
|
+
{ lines: [
|
|
553
|
+
'<span class="muted">session started. type commands or questions naturally.</span>',
|
|
554
|
+
], delay: 80 },
|
|
555
|
+
{ wait: 1200 },
|
|
556
|
+
];
|
|
557
|
+
|
|
558
|
+
clearAndRun('term-install', seq, () => {
|
|
559
|
+
setTimeout(done, 400);
|
|
560
|
+
});
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
function runTypoScene(done) {
|
|
564
|
+
showScene(2);
|
|
565
|
+
setTimeout(() => { document.getElementById('ol-typo').classList.add('show'); }, 200);
|
|
566
|
+
setTimeout(() => { document.getElementById('co-typo').classList.add('show'); }, 2000);
|
|
567
|
+
|
|
568
|
+
const seq = [
|
|
569
|
+
{ lines: [
|
|
570
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">gti status</span>',
|
|
571
|
+
], delay: 100 },
|
|
572
|
+
{ wait: 500 },
|
|
573
|
+
{ lines: [
|
|
574
|
+
'<span class="exitcode">fish: Unknown command: gti</span>',
|
|
575
|
+
], delay: 60 },
|
|
576
|
+
{ wait: 400 },
|
|
577
|
+
{ lines: [
|
|
578
|
+
'<span class="corr-old">gti status</span> <span class="corr-arrow">→</span> <span class="corr-new">git status</span>',
|
|
579
|
+
], delay: 80 },
|
|
580
|
+
{ wait: 200 },
|
|
581
|
+
{ lines: [
|
|
582
|
+
'<span class="muted">[shmakk] corrected and re-running...</span>',
|
|
583
|
+
], delay: 80 },
|
|
584
|
+
{ wait: 600 },
|
|
585
|
+
{ lines: [
|
|
586
|
+
'',
|
|
587
|
+
'<span class="white">On branch main</span>',
|
|
588
|
+
'<span class="white">nothing to commit, working tree clean</span>',
|
|
589
|
+
], delay: 60 },
|
|
590
|
+
{ wait: 800 },
|
|
591
|
+
{ lines: [
|
|
592
|
+
'',
|
|
593
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">git diff --staged<span class="cur"></span></span>',
|
|
594
|
+
], delay: 80 },
|
|
595
|
+
{ wait: 400 },
|
|
596
|
+
];
|
|
597
|
+
|
|
598
|
+
clearAndRun('term-typo', seq, () => {
|
|
599
|
+
setTimeout(done, 300);
|
|
600
|
+
});
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
function runChatScene(done) {
|
|
604
|
+
showScene(3);
|
|
605
|
+
setTimeout(() => { document.getElementById('ol-chat').classList.add('show'); }, 200);
|
|
606
|
+
setTimeout(() => { document.getElementById('co-chat').classList.add('show'); }, 3000);
|
|
607
|
+
|
|
608
|
+
const seq = [
|
|
609
|
+
{ lines: [
|
|
610
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">Hey can we chat?</span>',
|
|
611
|
+
], delay: 100 },
|
|
612
|
+
{ wait: 600 },
|
|
613
|
+
{ lines: [
|
|
614
|
+
'<span class="task-label">[shmakk task] (Ctrl-C to interrupt)</span>',
|
|
615
|
+
], delay: 80 },
|
|
616
|
+
{ wait: 400 },
|
|
617
|
+
{ lines: [
|
|
618
|
+
'<span class="thinking">thinking...</span>',
|
|
619
|
+
], delay: 80 },
|
|
620
|
+
{ wait: 800 },
|
|
621
|
+
{ lines: [
|
|
622
|
+
'<span class="ai-out">Sure! What\'s on your mind? Need help with</span>',
|
|
623
|
+
'<span class="ai-out">something in your project, or just want to bounce</span>',
|
|
624
|
+
'<span class="ai-out">around some ideas?</span>',
|
|
625
|
+
], delay: 40 },
|
|
626
|
+
{ wait: 1500 },
|
|
627
|
+
{ lines: [
|
|
628
|
+
'',
|
|
629
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">What does this codebase do?<span class="cur"></span></span>',
|
|
630
|
+
], delay: 80 },
|
|
631
|
+
{ wait: 600 },
|
|
632
|
+
{ lines: [
|
|
633
|
+
'<span class="task-label">[shmakk task] (Ctrl-C to interrupt)</span>',
|
|
634
|
+
'<span class="thinking">reading source files...</span>',
|
|
635
|
+
], delay: 60 },
|
|
636
|
+
{ wait: 1000 },
|
|
637
|
+
{ lines: [
|
|
638
|
+
'<span class="ai-out">This is a Node.js CLI tool that wraps your shell</span>',
|
|
639
|
+
'<span class="ai-out">with AI supervision. It corrects typos, handles</span>',
|
|
640
|
+
'<span class="ai-out">multi-step tasks, and keeps you safe from</span>',
|
|
641
|
+
'<span class="ai-out">destructive commands. Built on node-pty.</span>',
|
|
642
|
+
], delay: 35 },
|
|
643
|
+
{ wait: 1000 },
|
|
644
|
+
];
|
|
645
|
+
|
|
646
|
+
clearAndRun('term-chat', seq, () => {
|
|
647
|
+
setTimeout(done, 300);
|
|
648
|
+
});
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
function runProjectScene(done) {
|
|
652
|
+
showScene(4);
|
|
653
|
+
setTimeout(() => { document.getElementById('ol-project').classList.add('show'); }, 200);
|
|
654
|
+
setTimeout(() => { document.getElementById('co-project').classList.add('show'); }, 2000);
|
|
655
|
+
|
|
656
|
+
const seq = [
|
|
657
|
+
{ lines: [
|
|
658
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/projects</span><span class="muted">></span> <span class="user-input">set up a new React + TypeScript project with Tailwind</span>',
|
|
659
|
+
], delay: 80 },
|
|
660
|
+
{ wait: 600 },
|
|
661
|
+
{ lines: [
|
|
662
|
+
'<span class="task-label">[shmakk task] planning...</span>',
|
|
663
|
+
], delay: 80 },
|
|
664
|
+
{ wait: 500 },
|
|
665
|
+
{ lines: [
|
|
666
|
+
'<span class="thinking">analyzing request...</span>',
|
|
667
|
+
], delay: 80 },
|
|
668
|
+
{ wait: 700 },
|
|
669
|
+
{ lines: [
|
|
670
|
+
'<span class="ai-out">I\'ll scaffold a React + TypeScript project with</span>',
|
|
671
|
+
'<span class="ai-out">Tailwind CSS. Running:</span>',
|
|
672
|
+
], delay: 50 },
|
|
673
|
+
{ wait: 300 },
|
|
674
|
+
{ lines: [
|
|
675
|
+
'',
|
|
676
|
+
'<span class="tool-arrow">→</span> <span class="tool-name">run</span> <span class="code">npx create-react-app my-app --template typescript</span>',
|
|
677
|
+
], delay: 60 },
|
|
678
|
+
{ wait: 1000 },
|
|
679
|
+
{ lines: [
|
|
680
|
+
'<span class="tool-result">Creating a new React app...</span>',
|
|
681
|
+
'<span class="tool-result">Installing packages. This might take a minute.</span>',
|
|
682
|
+
], delay: 50 },
|
|
683
|
+
{ wait: 1200 },
|
|
684
|
+
{ lines: [
|
|
685
|
+
'<span class="tool-result">Success! Created my-app</span>',
|
|
686
|
+
], delay: 60 },
|
|
687
|
+
{ wait: 400 },
|
|
688
|
+
{ lines: [
|
|
689
|
+
'',
|
|
690
|
+
'<span class="tool-arrow">→</span> <span class="tool-name">run</span> <span class="code">cd my-app && npm install -D tailwindcss</span>',
|
|
691
|
+
], delay: 60 },
|
|
692
|
+
{ wait: 800 },
|
|
693
|
+
{ lines: [
|
|
694
|
+
'<span class="tool-result">added 12 packages in 2s</span>',
|
|
695
|
+
], delay: 60 },
|
|
696
|
+
{ wait: 500 },
|
|
697
|
+
{ lines: [
|
|
698
|
+
'',
|
|
699
|
+
'<span class="ai-out">Project ready at ~/projects/my-app</span>',
|
|
700
|
+
'<span class="ai-out">Run `npm start` to launch the dev server.</span>',
|
|
701
|
+
], delay: 50 },
|
|
702
|
+
{ wait: 800 },
|
|
703
|
+
];
|
|
704
|
+
|
|
705
|
+
clearAndRun('term-project', seq, () => {
|
|
706
|
+
setTimeout(done, 300);
|
|
707
|
+
});
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
function runSafetyScene(done) {
|
|
711
|
+
showScene(5);
|
|
712
|
+
setTimeout(() => { document.getElementById('ol-safety').classList.add('show'); }, 200);
|
|
713
|
+
setTimeout(() => { document.getElementById('co-safety').classList.add('show'); }, 2500);
|
|
714
|
+
|
|
715
|
+
const seq = [
|
|
716
|
+
{ lines: [
|
|
717
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">rm -rf node_modules</span>',
|
|
718
|
+
], delay: 100 },
|
|
719
|
+
{ wait: 500 },
|
|
720
|
+
{ lines: [
|
|
721
|
+
'',
|
|
722
|
+
'<span class="warn-val">[shmakk] This will delete 2,847 files. Proceed?</span>',
|
|
723
|
+
], delay: 80 },
|
|
724
|
+
{ wait: 300 },
|
|
725
|
+
{ lines: [
|
|
726
|
+
'<span class="confirm">[y/N]</span> <span class="user-input">y</span>',
|
|
727
|
+
], delay: 100 },
|
|
728
|
+
{ wait: 600 },
|
|
729
|
+
{ lines: [
|
|
730
|
+
'<span class="muted">deleting node_modules/...</span>',
|
|
731
|
+
], delay: 80 },
|
|
732
|
+
{ wait: 800 },
|
|
733
|
+
{ lines: [
|
|
734
|
+
'',
|
|
735
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">git push --force origin main</span>',
|
|
736
|
+
], delay: 80 },
|
|
737
|
+
{ wait: 500 },
|
|
738
|
+
{ lines: [
|
|
739
|
+
'',
|
|
740
|
+
'<span class="warn-val">[shmakk] Force pushing rewrites remote history.</span>',
|
|
741
|
+
'<span class="warn-val">This can cause data loss for collaborators.</span>',
|
|
742
|
+
], delay: 80 },
|
|
743
|
+
{ wait: 300 },
|
|
744
|
+
{ lines: [
|
|
745
|
+
'<span class="confirm">[y/N]</span> <span class="user-input">n</span>',
|
|
746
|
+
], delay: 100 },
|
|
747
|
+
{ wait: 400 },
|
|
748
|
+
{ lines: [
|
|
749
|
+
'<span class="muted">aborted.</span>',
|
|
750
|
+
], delay: 80 },
|
|
751
|
+
{ wait: 800 },
|
|
752
|
+
];
|
|
753
|
+
|
|
754
|
+
clearAndRun('term-safety', seq, () => {
|
|
755
|
+
setTimeout(done, 300);
|
|
756
|
+
});
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
function runSkillsScene(done) {
|
|
760
|
+
showScene(6);
|
|
761
|
+
setTimeout(() => { document.getElementById('ol-skills').classList.add('show'); }, 200);
|
|
762
|
+
setTimeout(() => { document.getElementById('co-skills').classList.add('show'); }, 1500);
|
|
763
|
+
|
|
764
|
+
const seq = [
|
|
765
|
+
{ lines: [
|
|
766
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">shmakk --skill code-review</span>',
|
|
767
|
+
], delay: 100 },
|
|
768
|
+
{ wait: 400 },
|
|
769
|
+
{ lines: [
|
|
770
|
+
'<span class="task-label">[shmakk] loaded skill: code-review v1</span>',
|
|
771
|
+
], delay: 80 },
|
|
772
|
+
{ wait: 400 },
|
|
773
|
+
{ lines: [
|
|
774
|
+
'',
|
|
775
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">review src/agent.js for issues</span>',
|
|
776
|
+
], delay: 80 },
|
|
777
|
+
{ wait: 600 },
|
|
778
|
+
{ lines: [
|
|
779
|
+
'<span class="task-label">[shmakk task] code review in progress...</span>',
|
|
780
|
+
'<span class="thinking">analyzing src/agent.js...</span>',
|
|
781
|
+
], delay: 80 },
|
|
782
|
+
{ wait: 1000 },
|
|
783
|
+
{ lines: [
|
|
784
|
+
'',
|
|
785
|
+
'<span class="ai-out">CODE REVIEW: src/agent.js</span>',
|
|
786
|
+
'',
|
|
787
|
+
'<span class="ai-out">IMPORTANT — Should fix</span>',
|
|
788
|
+
'<span class="ai-out">[Line 47] Missing timeout on fetch call — may hang indefinitely</span>',
|
|
789
|
+
'<span class="ai-out">[Line 112] Large response not streamed — memory concern for big payloads</span>',
|
|
790
|
+
'',
|
|
791
|
+
'<span class="ai-out">LOOKS GOOD</span>',
|
|
792
|
+
'<span class="ai-out">Error handling on tool failures is consistent</span>',
|
|
793
|
+
'<span class="ai-out">Input sanitization before shell execution</span>',
|
|
794
|
+
], delay: 40 },
|
|
795
|
+
{ wait: 1500 },
|
|
796
|
+
{ lines: [
|
|
797
|
+
'',
|
|
798
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="user-input">shmakk --profile-set deep</span>',
|
|
799
|
+
], delay: 80 },
|
|
800
|
+
{ wait: 400 },
|
|
801
|
+
{ lines: [
|
|
802
|
+
'<span class="muted">[shmakk] profile switched: balanced → deep</span>',
|
|
803
|
+
'<span class="muted">[shmakk] larger context, deeper investigation mode</span>',
|
|
804
|
+
], delay: 80 },
|
|
805
|
+
{ wait: 1000 },
|
|
806
|
+
];
|
|
807
|
+
|
|
808
|
+
clearAndRun('term-skills', seq, () => {
|
|
809
|
+
setTimeout(done, 300);
|
|
810
|
+
});
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
function runVoiceScene(done) {
|
|
814
|
+
showScene(7);
|
|
815
|
+
setTimeout(() => { document.getElementById('ol-voice').classList.add('show'); }, 200);
|
|
816
|
+
setTimeout(() => { document.getElementById('co-voice').classList.add('show'); }, 2000);
|
|
817
|
+
|
|
818
|
+
const seq = [
|
|
819
|
+
{ lines: [
|
|
820
|
+
'<span class="hostname">marcus@tobarko.ai</span> <span class="path">~/project</span><span class="muted">></span> <span class="white">shmakk --sts</span>',
|
|
821
|
+
], delay: 100 },
|
|
822
|
+
{ wait: 400 },
|
|
823
|
+
{ lines: [
|
|
824
|
+
'<span class="muted">voice mode active. speak naturally.</span>',
|
|
825
|
+
], delay: 80 },
|
|
826
|
+
{ wait: 600 },
|
|
827
|
+
{ lines: [
|
|
828
|
+
'',
|
|
829
|
+
'<span class="mic-ring"></span><span class="voice-txt">"what ports are listening right now?"</span>',
|
|
830
|
+
], delay: 80 },
|
|
831
|
+
{ wait: 600 },
|
|
832
|
+
{ lines: [
|
|
833
|
+
'<span class="thinking">transcribing... processing...</span>',
|
|
834
|
+
], delay: 80 },
|
|
835
|
+
{ wait: 800 },
|
|
836
|
+
{ lines: [
|
|
837
|
+
'',
|
|
838
|
+
'<span class="ai-out">Running ss -tlnp to check listening ports.</span>',
|
|
839
|
+
], delay: 50 },
|
|
840
|
+
{ wait: 600 },
|
|
841
|
+
{ lines: [
|
|
842
|
+
'<span class="tool-result">LISTEN 0.0.0.0:3015 (node)</span>',
|
|
843
|
+
'<span class="tool-result">LISTEN 127.0.0.1:5491 (postgres)</span>',
|
|
844
|
+
'<span class="tool-result">LISTEN 127.0.0.1:6342 (redis-server)</span>',
|
|
845
|
+
], delay: 50 },
|
|
846
|
+
{ wait: 800 },
|
|
847
|
+
{ lines: [
|
|
848
|
+
'',
|
|
849
|
+
'<span class="voice-resp">[TTS] You have three services listening:</span>',
|
|
850
|
+
'<span class="voice-resp"> a Node app on port 3015, Postgres on 5491,</span>',
|
|
851
|
+
'<span class="voice-resp"> and Redis on 6342.</span>',
|
|
852
|
+
], delay: 60 },
|
|
853
|
+
{ wait: 1500 },
|
|
854
|
+
];
|
|
855
|
+
|
|
856
|
+
clearAndRun('term-voice', seq, () => {
|
|
857
|
+
setTimeout(done, 300);
|
|
858
|
+
});
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
function runOutroScene(done) {
|
|
862
|
+
showScene(8);
|
|
863
|
+
requestAnimationFrame(() => {
|
|
864
|
+
requestAnimationFrame(() => {
|
|
865
|
+
document.getElementById('outro-logo').style.opacity = '1';
|
|
866
|
+
document.getElementById('outro-logo').style.transform = 'translateY(0)';
|
|
867
|
+
});
|
|
868
|
+
});
|
|
869
|
+
setTimeout(() => {
|
|
870
|
+
document.getElementById('outro-tagline').style.opacity = '1';
|
|
871
|
+
document.getElementById('outro-tagline').style.transform = 'translateY(0)';
|
|
872
|
+
}, 400);
|
|
873
|
+
setTimeout(() => {
|
|
874
|
+
document.getElementById('outro-install').style.opacity = '1';
|
|
875
|
+
}, 800);
|
|
876
|
+
setTimeout(() => {
|
|
877
|
+
document.getElementById('outro-gh').style.opacity = '1';
|
|
878
|
+
}, 1200);
|
|
879
|
+
setTimeout(() => {
|
|
880
|
+
document.getElementById('outro-star').style.opacity = '1';
|
|
881
|
+
}, 1600);
|
|
882
|
+
setTimeout(done, 5000);
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
// ---- MAIN SEQUENCE ----
|
|
886
|
+
const sceneRunners = [
|
|
887
|
+
runTitleScene,
|
|
888
|
+
runInstallScene,
|
|
889
|
+
runTypoScene,
|
|
890
|
+
runChatScene,
|
|
891
|
+
runProjectScene,
|
|
892
|
+
runSafetyScene,
|
|
893
|
+
runSkillsScene,
|
|
894
|
+
runVoiceScene,
|
|
895
|
+
runOutroScene,
|
|
896
|
+
];
|
|
897
|
+
|
|
898
|
+
function runAll(idx) {
|
|
899
|
+
if (idx >= sceneRunners.length) {
|
|
900
|
+
// all done — signal to Playwright
|
|
901
|
+
document.title = 'DONE';
|
|
902
|
+
return;
|
|
903
|
+
}
|
|
904
|
+
sceneRunners[idx](() => {
|
|
905
|
+
runAll(idx + 1);
|
|
906
|
+
});
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
// start after a short delay so the page renders
|
|
910
|
+
setTimeout(() => { runAll(0); }, 500);
|
|
911
|
+
</script>
|
|
912
|
+
</body>
|
|
913
|
+
</html>
|