aboutsummaryrefslogtreecommitdiff
path: root/downloads/evolution_plan/system_review.html
blob: 101a54564243f45aff9590ba1fed72c70cdc2750 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>newOS4 — System Review & Training Proposal</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a25;--border:#2a2a3a;
  --accent:#e85d2f;--accent2:#f0a020;--green:#22c55e;--red:#ef4444;
  --blue:#3b82f6;--purple:#a855f7;--text:#e5e5e5;--text2:#888;
  --radius:12px;--safe:env(safe-area-inset-bottom,0px);
}
html,body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.5;overflow-x:hidden}
body{padding-top:env(safe-area-inset-top,0px);padding-bottom:var(--safe)}
.deck{width:100%;overflow:hidden;position:relative}
.slide{
  min-height:calc(100vh - 0px);padding:20px 18px 80px;
  display:none;flex-direction:column;
  animation:fadeIn .4s ease;
}
.slide.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
h1{font-size:1.7rem;font-weight:800;margin-bottom:8px;line-height:1.2}
h2{font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:10px;line-height:1.2}
h3{font-size:1.05rem;font-weight:700;margin:14px 0 6px;color:var(--accent2)}
p{margin-bottom:10px;color:var(--text)}
.small{font-size:.82rem;color:var(--text2)}
.emoji{font-size:1.1em}
.tag{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:.72rem;margin:2px;color:var(--text2)}
.tag.green{border-color:var(--green);color:var(--green)}
.tag.orange{border-color:var(--accent);color:var(--accent)}
.tag.blue{border-color:var(--blue);color:var(--blue)}
.tag.purple{border-color:var(--purple);color:var(--purple)}
.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.stat-box{flex:1;min-width:90px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;text-align:center}
.stat-box .num{font-size:1.6rem;font-weight:800;color:var(--accent)}
.stat-box .label{font-size:.7rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:8px 0}
.card.accent{border-color:var(--accent)}
.card.green{border-color:var(--green)}
.card.blue{border-color:var(--blue)}
.card.red{border-color:var(--red)}
.card.purple{border-color:var(--purple)}
table{width:100%;border-collapse:collapse;font-size:.8rem;margin:8px 0}
th{text-align:left;padding:6px 8px;background:var(--surface2);border-bottom:2px solid var(--border);color:var(--accent2);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--border)}
ul{list-style:none;padding:0}
ul li{padding:5px 0 5px 18px;position:relative;font-size:.88rem}
ul li::before{content:'▸';position:absolute;left:0;color:var(--accent)}
ul.check li::before{content:'✅';position:absolute;left:0;color:var(--green)}
.timeline{position:relative;padding-left:22px;margin:10px 0}
.timeline::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--border)}
.t-item{position:relative;padding:8px 0 8px 0}
.t-item::before{content:'';position:absolute;left:-19px;top:12px;width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:var(--bg)}
.t-item.done::before{background:var(--green);border-color:var(--green)}
.t-item.active::before{background:var(--accent);border-color:var(--accent);animation:pulse 2s infinite}
.t-item.future::before{background:var(--bg);border-color:var(--text2)}
.t-item .t-date{font-size:.7rem;color:var(--text2)}
.t-item .t-title{font-size:.9rem;font-weight:600}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.bar-chart{margin:10px 0}
.bar-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.bar-label{width:80px;font-size:.75rem;color:var(--text2);text-align:right;flex-shrink:0}
.bar-track{flex:1;height:20px;background:var(--surface2);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify:flex-end;padding-right:6px;font-size:.65rem;color:#fff;font-weight:600;min-width:30px;transition:width .8s ease}
.bar-fill.green{background:linear-gradient(90deg,#16a34a,#22c55e)}
.bar-fill.orange{background:linear-gradient(90deg,#c2410c,#e85d2f)}
.bar-fill.blue{background:linear-gradient(90deg,#1e40af,#3b82f6)}
.bar-fill.purple{background:linear-gradient(90deg,#7e22ce,#a855f7)}
.bar-fill.red{background:linear-gradient(90deg,#b91c1c,#ef4444)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border-radius:20px;padding:4px 10px;font-size:.72rem;margin:2px;border:1px solid var(--border)}
.highlight-box{background:linear-gradient(135deg,rgba(232,93,47,.12),rgba(240,160,32,.08));border:1px solid var(--accent);border-radius:var(--radius);padding:16px;margin:12px 0}
.highlight-box h3{color:var(--accent);margin-top:0}
.highlight-box .big{font-size:1.4rem;font-weight:800;color:var(--accent2)}
.vs-box{display:flex;gap:0;margin:10px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.vs-side{flex:1;padding:12px}
.vs-side.left{background:rgba(239,68,68,.08)}
.vs-side.right{background:rgba(34,197,94,.08);border-left:1px solid var(--border)}
.vs-side h4{font-size:.85rem;margin-bottom:6px}
.vs-side.left h4{color:var(--red)}
.vs-side.right h4{color:var(--green)}
.vs-side ul{font-size:.75rem}
.vs-side li{padding:3px 0 3px 14px;font-size:.75rem}
.vs-side li::before{font-size:.7rem}
code{background:var(--surface2);padding:1px 5px;border-radius:4px;font-family:'SF Mono',Menlo,monospace;font-size:.8rem;color:var(--accent2)}
.nav{position:fixed;bottom:0;left:0;right:0;background:rgba(10,10,15,.95);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:10px 16px calc(10px + var(--safe));display:flex;align-items:center;justify-content:space-between;z-index:100}
.nav-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 14px;font-size:.8rem;cursor:pointer;transition:all .2s}
.nav-btn:active{transform:scale(.95);background:var(--accent);color:#fff}
.nav-btn:disabled{opacity:.3;cursor:default}
.dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;max-width:50%}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;cursor:pointer}
.dot.active{background:var(--accent);transform:scale(1.3)}
.dot.done{background:var(--green)}
.counter{font-size:.75rem;color:var(--text2);min-width:50px;text-align:center}
.title-slide{justify-content:center;align-items:center;text-align:center}
.title-slide .fire{font-size:3rem;margin-bottom:10px}
.subtitle{font-size:1rem;color:var(--text2);margin-top:4px}
.divider{height:1px;background:var(--border);margin:14px 0}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.badge.live{background:rgba(34,197,94,.15);color:var(--green);border:1px solid var(--green)}
.badge.new{background:rgba(232,93,47,.15);color:var(--accent);border:1px solid var(--accent)}
.badge.core{background:rgba(59,130,246,.15);color:var(--blue);border:1px solid var(--blue)}
.badge.ext{background:rgba(168,85,247,.15);color:var(--purple);border:1px solid var(--purple)}
.badge.done{background:rgba(34,197,94,.15);color:var(--green);border:1px solid var(--green)}
.badge.next{background:rgba(240,160,32,.15);color:var(--accent2);border:1px solid var(--accent2)}
.flow{display:flex;flex-direction:column;gap:0;margin:10px 0}
.flow-step{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:.82rem;position:relative}
.flow-step:not(:last-child)::after{content:'↓';position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);color:var(--accent);font-size:1rem;font-weight:700}
.flow-step .flow-title{font-weight:700;color:var(--accent2);font-size:.85rem}
.flow-step .flow-desc{font-size:.75rem;color:var(--text2);margin-top:2px}
.arch-diagram{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:10px 0;font-size:.8rem}
.arch-layer{padding:8px 10px;border-radius:6px;margin:4px 0;text-align:center}
.arch-layer.ai{background:rgba(168,85,247,.1);border:1px solid var(--purple);color:var(--purple)}
.arch-layer.core{background:rgba(59,130,246,.1);border:1px solid var(--blue);color:var(--blue)}
.arch-layer.ext{background:rgba(232,93,47,.1);border:1px solid var(--accent);color:var(--accent)}
.arch-layer.vfs{background:rgba(34,197,94,.1);border:1px solid var(--green);color:var(--green)}
.arch-layer .arch-items{font-size:.68rem;color:var(--text2);margin-top:2px}
.agent-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;margin:6px 0}
.agent-card .agent-name{font-weight:700;font-size:.85rem;color:var(--accent2)}
.agent-card .agent-role{font-size:.72rem;color:var(--text2)}
.agent-card .agent-caps{margin-top:4px}
.compare-table th{font-size:.7rem}
.compare-table td{font-size:.72rem}
</style>
</head>
<body>
<div class="deck" id="deck">

<!-- ===== SLIDE 1: TITLE ===== -->
<div class="slide title-slide active" data-title="Title">
<div class="fire">🐴🔥</div>
<h1>newOS4 v4.6.10</h1>
<p class="subtitle">System Review & Custom Model Training Proposal</p>
<div style="margin-top:20px">
<span class="badge core">22 Core Modules</span>
<span class="badge ext">21 Ext Modules</span>
<span class="badge new">v4.6.10</span>
</div>
<div style="margin-top:14px">
<span class="badge live">● System Online</span>
<span class="badge done">44 Modules Loaded</span>
<span class="badge done">0 JS Errors</span>
</div>
<p class="small" style="margin-top:20px">Prepared for review · July 2026</p>
</div>

<!-- ===== SLIDE 2: WHAT IS newOS4 ===== -->
<div class="slide" data-title="What is newOS4">
<h2>🧠 What is newOS4?</h2>
<p>newOS4 is a <strong>browser-based operating system</strong> with a built-in AI agent. It runs entirely in the browser — no server-side compute needed. Think of it as a self-contained, self-aware desktop environment where:</p>
<div class="card accent">
<ul>
<li><strong>The AI lives inside the OS</strong> — not as a chatbot, but as the system's brain</li>
<li><strong>Everything is a terminal command</strong> — 90+ commands across 43 modules</li>
<li><strong>It can modify itself</strong> — view, edit, test, and ship its own source code</li>
<li><strong>It has memory</strong> — session history, user profile, skill library, memory graph</li>
<li><strong>It can spawn agents</strong> — multi-agent orchestration for parallel work</li>
<li><strong>It self-heals</strong> — DebugSupervisorModule catches & classifies errors, suggests fixes</li>
</ul>
</div>
<div class="stat-row">
<div class="stat-box"><div class="num">44</div><div class="label">Modules</div></div>
<div class="stat-box"><div class="num">90+</div><div class="label">Commands</div></div>
<div class="stat-box"><div class="num">17</div><div class="label">Skills</div></div>
<div class="stat-box"><div class="num">296</div><div class="label">Files</div></div>
</div>
</div>

<!-- ===== SLIDE 3: SYSTEM ARCHITECTURE ===== -->
<div class="slide" data-title="Architecture">
<h2>🏗️ System Architecture</h2>
<p>The system is built in layers. Each layer can talk to the one below, but the AI sits on top and can access everything.</p>
<div class="arch-diagram">
<div class="arch-layer ai">
<strong>AI Layer</strong> — Agent Loop · LLM Router · Smart Context
<div class="arch-items">glm-5.2 · gemma4:31b · mistral-large-3:675b · minimax-m3</div>
</div>
<div style="text-align:center;color:var(--accent);margin:2px 0">↓ ↑</div>
<div class="arch-layer core">
<strong>Core Modules (22)</strong> — Terminal · VFS · AI Assistant · Config · Security
<div class="arch-items">Debug Supervisor · Neural VFS · Ollama · Orchestrator · Agent Registry · SearXNG · Server Monitor · Secret Vault</div>
</div>
<div style="text-align:center;color:var(--accent);margin:2px 0">↓ ↑</div>
<div class="arch-layer ext">
<strong>Extension Modules (21)</strong> — Editor · Shell · Cron · WebDAV · Voice · Mindmap
<div class="arch-items">Debug Panel · Floating UI · Media · JS Console · File Manager · Theme · Tutorial · WPM</div>
</div>
<div style="text-align:center;color:var(--accent);margin:2px 0">↓ ↑</div>
<div class="arch-layer vfs">
<strong>Virtual File System</strong> — 296 files · 149 dirs · 836KB
<div class="arch-items">localStorage-backed · WebDAV sync · Neural search index</div>
</div>
</div>
<p class="small">The AI agent sits at the top and can read/write any layer. This is what makes it self-aware and self-modifying.</p>
</div>

<!-- ===== SLIDE 4: CAPABILITY MAP ===== -->
<div class="slide" data-title="Capabilities">
<h2>⚡ Full Capability Map</h2>
<h3>🖥️ System & OS</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">Terminal (90+ cmds)</span>
<span class="pill">Virtual FS</span>
<span class="pill">Config Manager</span>
<span class="pill">Security Levels</span>
<span class="pill">Secret Vault</span>
<span class="pill">Module Loader</span>
<span class="pill">Debug Supervisor</span>
</div>
<h3>🤖 AI & Agents</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">AI Assistant (Agent Loop)</span>
<span class="pill">Ollama Integration</span>
<span class="pill">Multi-Model Router</span>
<span class="pill">Agent Registry</span>
<span class="pill">Orchestrator</span>
<span class="pill">Lease System</span>
<span class="pill">Smart Context Profiles</span>
</div>
<h3>🔧 Development</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">Code Editor</span>
<span class="pill">Module View/Edit/Test</span>
<span class="pill">JS Console</span>
<span class="pill">Diff Tool</span>
<span class="pill">Shell (script/export)</span>
<span class="pill">WPM Package Manager</span>
</div>
<h3>🌐 Web & Research</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">Web Search (SearXNG)</span>
<span class="pill">Web Fetch</span>
<span class="pill">URL Content Extract</span>
</div>
<h3>💾 Data & Sync</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">WebDAV Cloud Sync</span>
<span class="pill">Backup/Restore</span>
<span class="pill">Crypto + Gzip</span>
<span class="pill">File Manager</span>
</div>
<h3>🎨 UI & Productivity</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">Mindmaps (SVG)</span>
<span class="pill">Floating UI</span>
<span class="pill">Voice Control</span>
<span class="pill">Themes</span>
<span class="pill">Tutorials</span>
<span class="pill">Simple GUI</span>
<span class="pill">Chat Studio</span>
</div>
<h3>🛡️ Self-Healing</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px">
<span class="pill">Error Interception</span>
<span class="pill">Root-Cause Analysis</span>
<span class="pill">Auto-Fix Pipeline</span>
<span class="pill">Self-Diagnostic</span>
<span class="pill">Health Check</span>
</div>
</div>

<!-- ===== SLIDE 5: AI ENGINE ===== -->
<div class="slide" data-title="AI Engine">
<h2>🤖 The AI Engine</h2>
<p>The AI is not a simple chatbot. It's a full <strong>agent loop</strong> — it thinks, plans, uses tools, observes results, and iterates.</p>
<div class="flow">
<div class="flow-step">
<div class="flow-title">1. User Request</div>
<div class="flow-desc">Natural language → system prompt + context + memory</div>
</div>
<div class="flow-step">
<div class="flow-title">2. Smart Context Selection</div>
<div class="flow-desc">8 profiles: coding, debug, creative, technical, chat, system-admin, research, security</div>
</div>
<div class="flow-step">
<div class="flow-title">3. Tool Selection & Execution</div>
<div class="flow-desc">40+ tools available — filesystem, web, modules, agents, VFS, skills, etc.</div>
</div>
<div class="flow-step">
<div class="flow-title">4. Observation</div>
<div class="flow-desc">Tool results fed back → analyze → decide next action</div>
</div>
<div class="flow-step">
<div class="flow-title">5. Multi-Agent Delegation</div>
<div class="flow-desc">Spawn workers (auto-learner, kernel-architect, searcher) for parallel tasks</div>
</div>
<div class="flow-step">
<div class="flow-title">6. Response + Memory</div>
<div class="flow-desc">Answer user → save session → update memory graph → auto-improve</div>
</div>
</div>
<div class="card blue">
<h3 style="margin-top:0">📊 Current LLM Usage (7 days)</h3>
<div class="stat-row">
<div class="stat-box"><div class="num">500</div><div class="label">Requests</div></div>
<div class="stat-box"><div class="num">8M</div><div class="label">Tokens</div></div>
<div class="stat-box"><div class="num">4</div><div class="label">Models</div></div>
</div>
<table class="compare-table" style="margin-top:8px">
<tr><th>Model</th><th>Requests</th><th>Tokens</th></tr>
<tr><td>glm-5.2:cloud</td><td>214</td><td>4.99M</td></tr>
<tr><td>minimax-m3:cloud</td><td>219</td><td>2.60M</td></tr>
<tr><td>gemma4:31b-cloud</td><td>35</td><td>219K</td></tr>
<tr><td>mistral-large-3:675b</td><td>32</td><td>237K</td></tr>
</table>
<p class="small" style="margin-top:6px">All inference via Ollama (self-hosted API). Zero external API costs.</p>
</div>
</div>

<!-- ===== SLIDE 6: MULTI-AGENT SYSTEM ===== -->
<div class="slide" data-title="Multi-Agent">
<h2>👥 Multi-Agent System</h2>
<p>newOS4 can spawn <strong>specialized worker agents</strong> that run tasks in parallel. Each agent has its own role and capabilities.</p>
<div class="grid-3" style="margin:10px 0">
<div class="agent-card">
<div class="agent-name">🔍 Searcher</div>
<div class="agent-role">Web research & data gathering</div>
<div class="agent-caps"><span class="tag blue">web_search</span><span class="tag blue">read_file</span></div>
</div>
<div class="agent-card">
<div class="agent-name">🏗️ Kernel Architect</div>
<div class="agent-role">Code writing & system changes</div>
<div class="agent-caps"><span class="tag orange">write_file</span><span class="tag orange">run_command</span></div>
</div>
<div class="agent-card">
<div class="agent-name">📚 Auto-Learner</div>
<div class="agent-role">Pattern extraction & learning</div>
<div class="agent-caps"><span class="tag purple">view_module</span><span class="tag purple">write_file</span></div>
</div>
</div>
<div class="card">
<h3 style="margin-top:0">How it works</h3>
<ul>
<li><strong>Agent Registry</strong> — agents register with capabilities and contracts</li>
<li><strong>Lease System</strong> — tasks assigned via time-limited leases</li>
<li><strong>Orchestrator</strong> — spawns, monitors, and kills agents</li>
<li><strong>A2A Contracts</strong> — agents communicate via structured contracts</li>
<li><strong>Failure Recovery</strong> — auto-restart policies, failure counting</li>
</ul>
</div>
<p class="small">Current state: 3 agent types registered, 35 lifetime spawns. All idle/sleeping — ready for tasking.</p>
</div>

<!-- ===== SLIDE 7: SELF-HEALING ===== -->
<div class="slide" data-title="Self-Healing">
<h2>🛡️ Self-Healing System (NEW in v4.6.10)</h2>
<p>The DebugSupervisorModule gives the system a full <strong>immune system</strong> — it catches errors, classifies them, finds root causes, and can auto-apply fixes.</p>
<div class="flow">
<div class="flow-step">
<div class="flow-title">1. Error Interception</div>
<div class="flow-desc">console.error · window.onerror · unhandledrejection · fetch failures · tool errors</div>
</div>
<div class="flow-step">
<div class="flow-title">2. Classification</div>
<div class="flow-desc">Type (ReferenceError/TypeError/HTTP/timeout) · Severity (fatal/error/warning) · Category (module/network/tool/security/vfs)</div>
</div>
<div class="flow-step">
<div class="flow-title">3. Dedup & Persistence</div>
<div class="flow-desc">Jaccard similarity 0.35 dedup · LRU eviction · localStorage-backed · quota monitoring</div>
</div>
<div class="flow-step">
<div class="flow-title">4. Root-Cause Analysis</div>
<div class="flow-desc">Traces: tool fail → module not loaded · HTTP → network · ReferenceError → bundle</div>
</div>
<div class="flow-step">
<div class="flow-title">5. Auto-Fix Pipeline</div>
<div class="flow-desc">Confidence-gated: 0.7 = suggest to AI · 0.9 = auto-apply · fixes injected into AI system prompt</div>
</div>
<div class="flow-step">
<div class="flow-title">6. Self-Diagnostic</div>
<div class="flow-desc">_healthy flag · fallback to original error log · health check command</div>
</div>
</div>
<div class="card green">
<p style="margin:0"><strong>6 terminal commands:</strong> <code>debug-stats</code> · <code>debug-history</code> · <code>debug-analyze</code> · <code>debug-trends</code> · <code>debug-fix</code> · <code>debug-health</code></p>
</div>
</div>

<!-- ===== SLIDE 8: MEMORY & LEARNING ===== -->
<div class="slide" data-title="Memory & Learning">
<h2>🧬 Memory & Learning</h2>
<p>The system doesn't start fresh each time. It has multiple memory systems:</p>
<div class="grid-2">
<div class="card blue">
<h3 style="margin-top:0">📦 Session Memory</h3>
<ul style="font-size:.82rem">
<li>Save/load sessions by date</li>
<li>Recent session list</li>
<li>Aggregate stats per session</li>
<li>Terminal output history</li>
</ul>
</div>
<div class="card purple">
<h3 style="margin-top:0">👤 User Profile</h3>
<ul style="font-size:.82rem">
<li>Preferred model</li>
<li>Custom preferences</li>
<li>Persistent across reloads</li>
<li>Forgetting supported</li>
</ul>
</div>
<div class="card green">
<h3 style="margin-top:0">🎓 Skills Library</h3>
<ul style="font-size:.82rem">
<li>17 skills across 6 categories</li>
<li>Procedural memory (how-to guides)</li>
<li>Auto-loaded by context</li>
<li>Create/patch/list/search</li>
</ul>
</div>
<div class="card accent">
<h3 style="margin-top:0">🕸️ Memory Graph</h3>
<ul style="font-size:.82rem">
<li>83 nodes, 88+ edges</li>
<li>File access patterns</li>
<li>Task correlation</li>
<li>Auto-growing knowledge base</li>
</ul>
</div>
</div>
<div class="card">
<h3>🧠 Neural VFS</h3>
<p class="small">The Virtual File System has a <strong>semantic search index</strong> — you can search files by concept, not just by name. <code>nvfs-resolve "security"</code> finds security-related files even if they're named differently.</p>
<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
<span class="pill">nvfs-index</span>
<span class="pill">nvfs-resolve</span>
<span class="pill">nvfs-status</span>
<span class="pill">nvfs-tree</span>
</div>
</div>
</div>

<!-- ===== SLIDE 9: MODULE ECOSYSTEM ===== -->
<div class="slide" data-title="Module Ecosystem">
<h2>📦 Module Ecosystem</h2>
<p>43 modules total (22 core + 21 ext). Each module is a self-contained JS class with its own commands and lifecycle.</p>
<h3>Core Modules (always loaded)</h3>
<div class="table-scroll">
<table>
<tr><th>Module</th><th>Class</th><th>Key Commands</th></tr>
<tr><td>AI Assistant</td><td>WebX11AIAssistantModule</td><td>ai, ask, ai-system</td></tr>
<tr><td>Debug Supervisor</td><td>DebugSupervisorModule</td><td>debug-stats, debug-fix</td></tr>
<tr><td>Terminal</td><td>WebX11SecurityManager</td><td>clear, help, security</td></tr>
<tr><td>Virtual FS</td><td>VirtualFileSystem</td><td>save, load, import</td></tr>
<tr><td>Neural VFS</td><td>NeuralVFSModule</td><td>nvfs-index, nvfs-resolve</td></tr>
<tr><td>Ollama</td><td>OllamaModule</td><td>ollama, models, model-info</td></tr>
<tr><td>Agent Registry</td><td>AgentRegistryModule</td><td>agent-list, agent-register</td></tr>
<tr><td>Orchestrator</td><td>OrchestratorModule</td><td>orchestrate, orchestrator-spawn</td></tr>
<tr><td>SearXNG</td><td>SearXNGModule</td><td>search, images, videos</td></tr>
<tr><td>Server Monitor</td><td>ServerMonitorModule</td><td>server, system-health</td></tr>
<tr><td>Config Manager</td><td>ConfigManagerModule</td><td>config, config-set</td></tr>
<tr><td>Secret Vault</td><td>SecretVault</td><td>secret-set, secret-get</td></tr>
<tr><td>Module Manager</td><td>ModuleManager</td><td>modules, loadmod</td></tr>
<tr><td>Lease System</td><td>LeaseModule</td><td>lease-list, lease-create</td></tr>
<tr><td>Web Fetcher</td><td>WebFetcherModule</td><td>fetch, web, extract</td></tr>
<tr><td>System</td><td>SystemModule</td><td>help, status, logs</td></tr>
<tr><td>Chat Studio</td><td>ChatStudioModule</td><td>chat</td></tr>
<tr><td>Simple GUI</td><td>SimpleGUIModule</td><td>gui, gui-button</td></tr>
<tr><td>AI Alias</td><td>WebXAIAliasModule</td><td>webxai, wx, webx</td></tr>
</table>
</div>
<h3>Extension Modules (load on demand)</h3>
<div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px">
<span class="pill">Editor</span><span class="pill">Shell</span><span class="pill">Cron</span>
<span class="pill">WebDAV</span><span class="pill">Voice</span><span class="pill">Mindmap</span>
<span class="pill">Floating UI</span><span class="pill">Media</span><span class="pill">JS Console</span>
<span class="pill">File Manager</span><span class="pill">Finder</span><span class="pill">Theme</span>
<span class="pill">Tutorial</span><span class="pill">WPM</span><span class="pill">Calc</span>
<span class="pill">Diff</span><span class="pill">BusyBox</span><span class="pill">Crypto/Gzip</span>
<span class="pill">Alias</span><span class="pill">Debug Panel</span><span class="pill">Skill Pack</span>
</div>
</div>

<!-- ===== SLIDE 10: WHAT'S BEEN ACCOMPLISHED ===== -->
<div class="slide" data-title="Accomplished">
<h2>✅ What We've Built So Far</h2>
<div class="timeline">
<div class="t-item done">
<div class="t-date">Phase 1</div>
<div class="t-title">System Foundation</div>
<p class="small">44 modules · 17 skills · 296 files · 90+ commands · terminal · VFS · security</p>
</div>
<div class="t-item done">
<div class="t-date">Phase 2</div>
<div class="t-title">AI Integration</div>
<p class="small">Agent loop · multi-model routing · Ollama integration · smart context profiles</p>
</div>
<div class="t-item done">
<div class="t-date">Phase 3</div>
<div class="t-title">Multi-Agent System</div>
<p class="small">Agent registry · orchestrator · leases · A2A contracts · 35 lifetime agent spawns</p>
</div>
<div class="t-item done">
<div class="t-date">Phase 4</div>
<div class="t-title">Memory & Persistence</div>
<p class="small">Session save/load · user profile · skills library · memory graph (83 nodes) · Neural VFS</p>
</div>
<div class="t-item done">
<div class="t-date">Phase 5</div>
<div class="t-title">Self-Healing (v4.6.10)</div>
<p class="small">DebugSupervisorModule · error interception · root-cause analysis · auto-fix pipeline</p>
</div>
<div class="t-item done">
<div class="t-date">Phase 6</div>
<div class="t-title">Cloud & Sync</div>
<p class="small">WebDAV backup · crypto/gzip · file manager · floating UI · voice control</p>
</div>
<div class="t-item active">
<div class="t-date">Phase 7 — Current</div>
<div class="t-title">Custom Model Training</div>
<p class="small">Planning phase — dataset strategy, MoE architecture, budget defined</p>
</div>
<div class="t-item future">
<div class="t-date">Phase 8 — Next</div>
<div class="t-title">Custom MoE Model</div>
<p class="small">QLoRA fine-tune → MoE deep training → self-hosted inference</p>
</div>
</div>
<div class="stat-row">
<div class="stat-box"><div class="num" style="color:var(--green)">6/6</div><div class="label">Planning Done</div></div>
<div class="stat-box"><div class="num" style="color:var(--accent)">1</div><div class="label">Active Phase</div></div>
<div class="stat-box"><div class="num" style="color:var(--text2)">1</div><div class="label">Upcoming</div></div>
<div class="stat-box"><div class="num" style="color:var(--green)">€0</div><div class="label">Spent on AI</div></div>
</div>
</div>

<!-- ===== SLIDE 11: THE PROBLEM ===== -->
<div class="slide" data-title="The Problem">
<h2>⚠️ The Current Bottleneck</h2>
<p>The system is powerful, but it depends on <strong>external LLMs</strong> for intelligence. Here's why that limits us:</p>
<div class="vs-box">
<div class="vs-side left">
<h4>❌ Current State</h4>
<ul>
<li>Depends on Ollama-hosted models</li>
<li>Generic models — no domain specialization</li>
<li>No memory of past sessions baked in</li>
<li>Token costs scale with usage (8M/week)</li>
<li>Latency: 2-27s avg per request</li>
<li>Can't customize reasoning style</li>
<li>No multi-token generation</li>
<li>Model behavior changes with updates</li>
</ul>
</div>
<div class="vs-side right">
<h4>✅ With Custom Model</h4>
<ul>
<li>Self-hosted, fully owned</li>
<li>Specialized for OS operations</li>
<li>Training data from real sessions</li>
<li>Fixed compute cost (one-time training)</li>
<li>Latency: <0.5s with speculative decoding</li>
<li>Custom reasoning chain style</li>
<li>Multi-token generation (Medusa heads)</li>
<li>Full control — no surprise updates</li>
</ul>
</div>
</div>
<div class="card red">
<h3 style="margin-top:0">The Core Insight</h3>
<p style="margin:0">The system already has <strong>500 real interaction sessions</strong>, <strong>8M tokens of reasoning data</strong>, and <strong>17 skills</strong> with structured procedures. This is a ready-made training dataset. No other project has this kind of organic, domain-specific data.</p>
</div>
</div>

<!-- ===== SLIDE 12: HOW CUSTOM MODEL IMPROVES ===== -->
<div class="slide" data-title="Training Impact">
<h2>🚀 How a Custom Model Improves Everything</h2>
<h3>1. Speed — Multi-Token Generation</h3>
<div class="vs-box">
<div class="vs-side left">
<h4>Current: 1 token/step</h4>
<ul>
<li>Sequential generation</li>
<li>~20-40 tokens/sec</li>
<li>Long responses take 10-30s</li>
</ul>
</div>
<div class="vs-side right">
<h4>With Medusa Heads: 3-5 tokens/step</h4>
<ul>
<li>Parallel prediction branches</li>
<li>~100-200 tokens/sec</li>
<li>Same response in 2-5s</li>
</ul>
</div>
</div>
<h3>2. Intelligence — Domain Specialization</h3>
<div class="card blue">
<ul>
<li><strong>Module management</strong> — model knows the 43-module API without RAG lookup</li>
<li><strong>Error diagnosis</strong> — trained on debug-history patterns, faster root-cause</li>
<li><strong>Code generation</strong> — knows the system's architecture, generates compatible code</li>
<li><strong>Command routing</strong> — maps natural language to 90+ commands accurately</li>
<li><strong>Agent delegation</strong> — learns optimal task decomposition from past sessions</li>
</ul>
</div>
<h3>3. Cost — One-Time Training vs Endless API</h3>
<div class="card green">
<table>
<tr><th>Approach</th><th>Cost Model</th><th>Per Week</th></tr>
<tr><td>Current (Ollama API)</td><td>Per-request tokens</td><td>~8M tokens</td></tr>
<tr><td>Custom Model (fine-tuned)</td><td>One-time training</td><td>~0 marginal cost</td></tr>
<tr><td>Custom MoE (full train)</td><td>One-time + hosting</td><td>~0 marginal cost</td></tr>
</table>
</div>
<h3>4. MoE Architecture — Sparse Expert Routing</h3>
<div class="card purple">
<ul>
<li><strong>Expert 1:</strong> System operations (VFS, modules, config)</li>
<li><strong>Expert 2:</strong> Code generation & debugging</li>
<li><strong>Expert 3:</strong> Web research & information synthesis</li>
<li><strong>Expert 4:</strong> Natural language & user communication</li>
<li><strong>Router:</strong> Dynamically selects 2 experts per token — 2x speed, same quality</li>
</ul>
<p class="small" style="margin-top:6px">Only the relevant experts activate → less compute per token → faster + cheaper inference.</p>
</div>
</div>

<!-- ===== SLIDE 13: TRAINING PIPELINE ===== -->
<div class="slide" data-title="Training Pipeline">
<h2>🔬 Training Pipeline</h2>
<p>How we turn system data into a custom model:</p>
<div class="flow">
<div class="flow-step">
<div class="flow-title">Phase 0 — Dataset Engineering</div>
<div class="flow-desc">Extract 500 sessions · 8M tokens · 17 skills · error/fix pairs · format as instruction-response pairs · synthetic expansion</div>
</div>
<div class="flow-step">
<div class="flow-title">Phase 1 — QLoRA Proof of Concept</div>
<div class="flow-desc">Fine-tune Qwen2.5-14B with Unsloth on 1× A100 (20 hrs) · validate on held-out sessions · cost: €35-100</div>
</div>
<div class="flow-step">
<div class="flow-title">Phase 2 — MoE Fine-Tune</div>
<div class="flow-desc">Fine-tune Mixtral 8x7B MoE on full dataset · 2× A100 (48 hrs) · validate expert routing · cost: €200-500</div>
</div>
<div class="flow-step">
<div class="flow-title">Phase 3 — Deep MoE + Multi-Token</div>
<div class="flow-desc">DeepSeek-V3 or Mixtral 8x22B + Medusa heads · 8× H100 cluster (72 hrs) · cost: €2,000-8,000</div>
</div>
<div class="flow-step">
<div class="flow-title">Phase 4 — Deploy & Integrate</div>
<div class="flow-desc">Self-host on local GPU or rented instance · wire into Ollama module · replace external models · cost: €0-200/mo</div>
</div>
</div>
<div class="highlight-box">
<h3 style="margin-top:0">📊 The Ask</h3>
<p style="margin:0"><strong>Phase 0 + Phase 1 only: €300-500</strong> — proves the concept works. Phase 2/3 funding decided after PoC results.</p>
</div>
</div>

<!-- ===== SLIDE 14: WHAT WE HAVE THAT OTHERS DON'T ===== -->
<div class="slide" data-title="Unique Advantages">
<h2>🏆 What We Have That Others Don't</h2>
<div class="card accent">
<h3 style="margin-top:0">1. Organic Training Data</h3>
<p>Most AI projects buy or scrape data. We have <strong>500 real sessions</strong> of a human working with an AI on system-building tasks. This is gold-standard data.</p>
</div>
<div class="card green">
<h3 style="margin-top:0">2. Built-in Evaluation Harness</h3>
<p>The system has a <strong>module test pipeline</strong> (edit → test → health check → regression). We can evaluate model quality by running it against the actual system — no external benchmark needed.</p>
</div>
<div class="card blue">
<h3 style="margin-top:0">3. Closed-Loop Improvement</h3>
<p>DebugSupervisorModule captures errors → auto-fix suggestions → model learns from fixes → fewer errors next time. The system <strong>teaches itself</strong>.</p>
</div>
<div class="card purple">
<h3 style="margin-top:0">4. Multi-Model Today, Custom Tomorrow</h3>
<p>We already run 4 models (glm-5.2, gemma4:31b, mistral-large, minimax-m3). The routing infrastructure is built. A custom model just becomes <strong>another model in the pool</strong> — but specialized.</p>
</div>
<div class="card red">
<h3 style="margin-top:0">5. Skills as Structured Training Data</h3>
<p>17 skills are already written as step-by-step procedures. These are perfect <strong>instruction-response training pairs</strong> — zero formatting work needed.</p>
</div>
</div>

<!-- ===== SLIDE 15: RISK & FALLBACK ===== -->
<div class="slide" data-title="Risk & Fallback">
<h2>⚖️ Risks & Fallback Plans</h2>
<h3>Risk Matrix</h3>
<div class="table-scroll">
<table class="compare-table">
<tr><th>Risk</th><th>Prob</th><th>Impact</th><th>Mitigation</th></tr>
<tr><td>QLoRA overfitting</td><td>Medium</td><td>Low</td><td>Held-out validation · early stopping</td></tr>
<tr><td>MoE training unstable</td><td>Low</td><td>High</td><td>Start with Mixtral (proven MoE) · skip Phase 3</td></tr>
<tr><td>GPU costs exceed budget</td><td>Medium</td><td>Medium</td><td>Spot instances · Unsloth 2x efficiency</td></tr>
<tr><td>Dataset too small</td><td>Low</td><td>Medium</td><td>Synthetic expansion · augment with skills</td></tr>
<tr><td>Model quality < baseline</td><td>Low</td><td>High</td><td>PoC validates before committing funds</td></tr>
<tr><td>Inference too slow</td><td>Low</td><td>Low</td><td>Quantize to 4-bit · Medusa heads</td></tr>
</table>
</div>
<h3>Fallback Plans</h3>
<div class="card">
<ul>
<li><strong>Ultra-budget (€20):</strong> Google Colab free tier + QLoRA 7B model — proves concept with zero risk</li>
<li><strong>Zero-budget (€0):</strong> Enhanced RAG pipeline — index all sessions/skills into Neural VFS, retrieve context dynamically. No training, but better prompting.</li>
<li><strong>Mid-budget (€500):</strong> Phase 0+1 only — QLoRA on 14B, self-host on existing Ollama setup</li>
<li><strong>Full vision (€8K+):</strong> All phases — custom MoE with multi-token generation</li>
</ul>
</div>
</div>

<!-- ===== SLIDE 16: SUMMARY ===== -->
<div class="slide" data-title="Summary">
<h2>📋 Summary for Review</h2>
<div class="card blue">
<h3 style="margin-top:0">What exists today</h3>
<div class="stat-row" style="margin-top:6px">
<div class="stat-box"><div class="num">44</div><div class="label">Modules</div></div>
<div class="stat-box"><div class="num">90+</div><div class="label">Commands</div></div>
<div class="stat-box"><div class="num">17</div><div class="label">Skills</div></div>
<div class="stat-box"><div class="num">296</div><div class="label">Files</div></div>
</div>
<div class="stat-row">
<div class="stat-box"><div class="num">3</div><div class="label">Agent Types</div></div>
<div class="stat-box"><div class="num">4</div><div class="label">LLM Models</div></div>
<div class="stat-box"><div class="num">500</div><div class="label">Sessions</div></div>
<div class="stat-box"><div class="num">8M</div><div class="label">Tokens/Week</div></div>
</div>
</div>
<div class="card accent">
<h3 style="margin-top:0">What custom training adds</h3>
<ul>
<li>⚡ <strong>5-10x faster</strong> inference (multi-token generation)</li>
<li>🧠 <strong>Domain-specialized</strong> (OS operations, debugging, code gen)</li>
<li>💰 <strong>Near-zero marginal cost</strong> after one-time training</li>
<li>🔒 <strong>Full ownership</strong> — no external model dependency</li>
<li>🔄 <strong>Self-improving</strong> — learns from its own error fixes</li>
</ul>
</div>
<div class="card green">
<h3 style="margin-top:0">Why now</h3>
<ul>
<li>We have 500 sessions of real training data already</li>
<li>QLoRA + Unsloth make training 70% cheaper than 1 year ago</li>
<li>The system's self-healing layer generates new training data automatically</li>
<li>The Ollama integration is already built — deployment is plug-and-play</li>
</ul>
</div>
</div>

<!-- ===== SLIDE 17: THANK YOU ===== -->
<div class="slide title-slide" data-title="Thank You">
<h1>🐴🔥</h1>
<h2 style="text-align:center">Year of the Firehorse</h2>
<p class="subtitle" style="margin-top:10px">newOS4 is a living system that can build, repair, and improve itself.</p>
<p class="subtitle" style="margin-top:4px">A custom model makes it truly autonomous.</p>
<div class="highlight-box" style="margin-top:20px;text-align:center">
<h3 style="text-align:center;margin-top:0">The Ask</h3>
<p style="text-align:center;margin:0"><strong>€300-500</strong> for Phase 0+1 (dataset + PoC)</p>
<p class="small" style="text-align:center;margin-top:6px">Proves the concept. Everything else is optional.</p>
</div>
<p class="small" style="margin-top:24px;text-align:center">
This is not a pitch for a product.<br>
This is a plan to give a system its own brain.
</p>
<p style="margin-top:20px;text-align:center;font-size:1.5rem">🙏</p>
</div>

</div>

<!-- ===== NAVIGATION ===== -->
<div class="nav">
<button class="nav-btn" id="prevBtn" onclick="nav(-1)">← Prev</button>
<div style="display:flex;align-items:center;gap:10px">
<div class="dots" id="dots"></div>
<span class="counter" id="counter">1/17</span>
</div>
<button class="nav-btn" id="nextBtn" onclick="nav(1)">Next →</button>
</div>

<script>
let current=0;
const slides=document.querySelectorAll('.slide');
const total=slides.length;
const dotsEl=document.getElementById('dots');
const counterEl=document.getElementById('counter');
const prevBtn=document.getElementById('prevBtn');
const nextBtn=document.getElementById('nextBtn');

for(let i=0;i<total;i++){
  const d=document.createElement('div');
  d.className='dot'+(i===0?' active':'')+(i<current?' done':'');
  d.onclick=()=>{current=i;render()};
  dotsEl.appendChild(d);
}

function render(){
  slides.forEach((s,i)=>s.classList.toggle('active',i===current));
  const dots=dotsEl.querySelectorAll('.dot');
  dots.forEach((d,i)=>{
    d.classList.remove('active','done');
    if(i<current)d.classList.add('done');
    if(i===current)d.classList.add('active');
  });
  counterEl.textContent=(current+1)+'/'+total;
  prevBtn.disabled=current===0;
  nextBtn.disabled=current===total-1;
}

function nav(dir){
  current=Math.max(0,Math.min(total-1,current+dir));
  render();
  window.scrollTo(0,0);
}

document.addEventListener('keydown',e=>{
  if(e.key==='ArrowLeft')nav(-1);
  if(e.key==='ArrowRight')nav(1);
});

let startX=0;
document.addEventListener('touchstart',e=>{startX=e.touches[0].clientX});
document.addEventListener('touchend',e=>{
  const diff=e.changedTouches[0].clientX-startX;
  if(Math.abs(diff)>50)nav(diff>0?-1:1);
});

render();
</script>
</body>
</html>