saymon-syswatch-linux 1.0.7 → 1.0.8

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 (2) hide show
  1. package/package.json +1 -1
  2. package/public/index.html +280 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "saymon-syswatch-linux",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "Linux system monitor & learning dashboard — HTTP/HTTPS, journal logs, services, processes",
5
5
  "main": "src/server.js",
6
6
  "bin": {
package/public/index.html CHANGED
@@ -444,6 +444,286 @@ body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13
444
444
  </div>
445
445
  </div>
446
446
 
447
+ <!-- ─── SECTION 07: DATA SOURCE ─── -->
448
+ <div style="grid-column:1/-1;background:rgba(57,208,216,.04);border:1px solid rgba(57,208,216,.2);border-radius:10px;padding:22px">
449
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--cyan);margin-bottom:16px;display:flex;align-items:center;gap:8px">
450
+ <span style="background:rgba(57,208,216,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 07</span>
451
+ journalctl কোথা থেকে data নেয়?
452
+ </div>
453
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px">
454
+ <div>
455
+ <p style="font-size:13px;color:var(--text);line-height:2;margin-bottom:14px">
456
+ Linux এ সব system logs একটা জায়গায় জমা হয় —
457
+ <code class="ic">systemd-journald</code> নামের একটা service এটা manage করে।
458
+ এটা একটা <strong style="color:var(--cyan)">binary format</strong> এ store করে —
459
+ তাই সরাসরি <code class="ic">cat</code> করলে কাজ হবে না, <code class="ic">journalctl</code> দিয়েই পড়তে হয়।
460
+ </p>
461
+ <div style="background:rgba(0,0,0,.3);border-radius:6px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.8">
462
+ <div style="color:var(--green);margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em">এই folders এ actual data আছে</div>
463
+ <code style="color:var(--cyan);display:block;margin-bottom:4px">ls /run/log/journal/</code>
464
+ <code style="color:var(--cyan);display:block">ls /var/log/journal/ <span style="color:var(--muted)"># persistent হলে</span></code>
465
+ </div>
466
+ </div>
467
+ <div style="background:#060c0d;border-radius:8px;padding:16px;font-size:12px;color:var(--cyan);line-height:2.4;font-family:var(--mono)">
468
+ <span style="color:var(--text)">তোমার programs/services</span>
469
+ <br> ↓
470
+ <br><span style="color:var(--purple)">systemd-journald</span> <span style="color:var(--muted)">← সব logs collect করে</span>
471
+ <br> ↓
472
+ <br><span style="color:var(--cyan)">/run/log/journal/</span> <span style="color:var(--muted)">← binary format এ store</span>
473
+ <br> ↓
474
+ <br><span style="color:var(--green)">journalctl</span> <span style="color:var(--muted)">← binary files পড়ে দেখায়</span>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <!-- ─── SECTION 08: STREAMING ─── -->
480
+ <div style="background:rgba(188,140,255,.05);border:1px solid rgba(188,140,255,.2);border-radius:10px;padding:22px">
481
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--purple);margin-bottom:16px;display:flex;align-items:center;gap:8px">
482
+ <span style="background:rgba(188,140,255,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 08</span>
483
+ journalctl কিভাবে stream করে?
484
+ </div>
485
+ <p style="font-size:13px;color:var(--text);line-height:1.9;margin-bottom:14px">
486
+ <code class="ic">journalctl -f</code> দিলে দুইটা কাজ হয়:
487
+ <strong style="color:var(--purple)"> প্রথমে</strong> পুরনো কিছু logs দেখায়,
488
+ <strong style="color:var(--purple)"> তারপর</strong> নতুন log আসলে সাথে সাথে print করে।
489
+ এটা সম্ভব হয় <strong style="color:var(--yellow)">inotify</strong> দিয়ে — Linux kernel এর একটা feature।
490
+ </p>
491
+ <div style="background:#0a060f;border-radius:7px;padding:14px;font-size:12px;color:var(--purple);line-height:2.3;font-family:var(--mono);margin-bottom:14px">
492
+ <span style="color:var(--text)">নতুন log entry আসলো</span>
493
+ <br> ↓
494
+ <br><span style="color:var(--yellow)">kernel inotify</span> <span style="color:var(--muted)">দিয়ে journald কে জানালো</span>
495
+ <br> ↓
496
+ <br><span style="color:var(--purple)">journald</span> <span style="color:var(--muted)">binary file এ লিখলো</span>
497
+ <br> ↓
498
+ <br><span style="color:var(--green)">journalctl</span> <span style="color:var(--muted)">সেটা পড়ে terminal এ print করলো</span>
499
+ </div>
500
+ <div style="background:rgba(227,179,65,.06);border:1px solid rgba(227,179,65,.2);border-radius:6px;padding:12px 14px;font-size:12px;color:var(--text);line-height:1.9">
501
+ <strong style="color:var(--yellow)">💡 inotify কী?</strong> File polling (বারবার check করা) না —
502
+ kernel event-driven ভাবে notify করে। File change হলে <em>instantly</em> জানায়।
503
+ এই জন্যই <code class="ic">journalctl -f</code> এত fast।
504
+ </div>
505
+ <div style="margin-top:12px;background:#060a14;border-radius:6px;padding:12px 14px;font-size:12px;line-height:1.9">
506
+ <div style="color:var(--muted);margin-bottom:6px"><code class="ic" style="color:var(--cyan)">journalctl -f -o json</code> দিলে প্রতিটা entry একটা JSON line:</div>
507
+ <code style="color:#a0c4ff;font-size:11px;word-break:break-all">{"MESSAGE":"nginx started","_SYSTEMD_UNIT":"nginx.service","PRIORITY":"6","__REALTIME_TIMESTAMP":"1234567890"}</code>
508
+ <div style="color:var(--muted);margin-top:6px;font-size:11px">এই format টাই Node.js এর জন্য perfect — JSON.parse() করেই কাজ শুরু।</div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- ─── SECTION 09: NODE → BROWSER ─── -->
513
+ <div style="background:rgba(88,166,255,.05);border:1px solid rgba(88,166,255,.2);border-radius:10px;padding:22px">
514
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:8px">
515
+ <span style="background:rgba(88,166,255,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 09</span>
516
+ Node.js এটা browser এ কিভাবে পাঠায়?
517
+ </div>
518
+ <p style="font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:14px">তিনটা ধাপে কাজ হয় —</p>
519
+
520
+ <div style="margin-bottom:12px">
521
+ <div style="font-size:11px;color:var(--blue);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em">ধাপ ১ — journalctl কে child process হিসেবে চালায়</div>
522
+ <div style="background:#060a14;border-radius:6px;overflow:hidden">
523
+ <div style="padding:8px 12px;background:rgba(88,166,255,.07);font-size:10px;color:var(--muted)">Node.js — server side</div>
524
+ <pre style="padding:12px 14px;font-size:11.5px;color:#a0c4ff;line-height:1.9;margin:0;overflow-x:auto"><span style="color:var(--muted)">const</span> { spawn } = <span style="color:var(--muted)">require</span>(<span style="color:#99cc99">'child_process'</span>);
525
+
526
+ <span style="color:var(--muted)">// ঠিক terminal এ লেখার মতোই</span>
527
+ <span style="color:var(--muted)">// journalctl -f -o json</span>
528
+ <span style="color:var(--muted)">const</span> proc = spawn(<span style="color:#99cc99">'journalctl'</span>, [<span style="color:#99cc99">'-f'</span>, <span style="color:#99cc99">'-o'</span>, <span style="color:#99cc99">'json'</span>]);</pre>
529
+ </div>
530
+ </div>
531
+
532
+ <div style="margin-bottom:12px">
533
+ <div style="font-size:11px;color:var(--blue);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em">ধাপ ২ — stdout থেকে real-time পড়ে</div>
534
+ <div style="background:#060a14;border-radius:6px;overflow:hidden">
535
+ <pre style="padding:12px 14px;font-size:11.5px;color:#a0c4ff;line-height:1.9;margin:0;overflow-x:auto">proc.stdout.<span style="color:#6bc5f8">on</span>(<span style="color:#99cc99">'data'</span>, (chunk) => {
536
+ <span style="color:var(--muted)">// journalctl যখনই নতুন log print করে</span>
537
+ <span style="color:var(--muted)">// Node.js এখানে পায় — real-time</span>
538
+ <span style="color:var(--muted)">const</span> json = chunk.<span style="color:#6bc5f8">toString</span>();
539
+ });</pre>
540
+ </div>
541
+ </div>
542
+
543
+ <div>
544
+ <div style="font-size:11px;color:var(--blue);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em">ধাপ ৩ — SSE দিয়ে browser এ push করে</div>
545
+ <div style="background:#060a14;border-radius:6px;overflow:hidden">
546
+ <pre style="padding:12px 14px;font-size:11.5px;color:#a0c4ff;line-height:1.9;margin:0;overflow-x:auto">res.<span style="color:#6bc5f8">setHeader</span>(<span style="color:#99cc99">'Content-Type'</span>, <span style="color:#99cc99">'text/event-stream'</span>);
547
+ <span style="color:var(--muted)">// ↑ Browser কে বলছি — connection খোলা রাখো</span>
548
+
549
+ proc.stdout.<span style="color:#6bc5f8">on</span>(<span style="color:#99cc99">'data'</span>, chunk => {
550
+ res.<span style="color:#6bc5f8">write</span>(<span style="color:#99cc99">`data: ${chunk}\n\n`</span>);
551
+ <span style="color:var(--muted">// ↑ SSE format</span>
552
+ <span style="color:var(--muted)">// "data: " দিয়ে শুরু, "\n\n" দিয়ে শেষ</span>
553
+ });
554
+
555
+ req.<span style="color:#6bc5f8">on</span>(<span style="color:#99cc99">'close'</span>, () => proc.<span style="color:#6bc5f8">kill</span>());
556
+ <span style="color:var(--muted)">// Browser disconnect করলে process kill</span></pre>
557
+ </div>
558
+ <div style="margin-top:10px;background:#060a14;border-radius:6px;overflow:hidden">
559
+ <div style="padding:8px 12px;background:rgba(63,185,80,.06);font-size:10px;color:var(--muted)">Browser side — মাত্র এটুকুই লাগে</div>
560
+ <pre style="padding:12px 14px;font-size:11.5px;color:#a0c4ff;line-height:1.9;margin:0;overflow-x:auto"><span style="color:var(--muted)">const</span> source = <span style="color:var(--muted)">new</span> <span style="color:#6bc5f8">EventSource</span>(<span style="color:#99cc99">'/api/logs/stream'</span>);
561
+
562
+ source.onmessage = (event) => {
563
+ <span style="color:var(--muted)">const</span> log = JSON.<span style="color:#6bc5f8">parse</span>(event.data);
564
+ <span style="color:var(--muted)">// log.MESSAGE, log._SYSTEMD_UNIT পাওয়া গেলো</span>
565
+ console.<span style="color:#6bc5f8">log</span>(log.MESSAGE);
566
+ };</pre>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- ─── SECTION 10: WHAT JOURNALCTL COVERS ─── -->
572
+ <div style="background:rgba(240,136,62,.05);border:1px solid rgba(240,136,62,.2);border-radius:10px;padding:22px">
573
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px">
574
+ <span style="background:rgba(240,136,62,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 10</span>
575
+ journalctl — শুধু systemd logs, নাকি সব?
576
+ </div>
577
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px">
578
+ <div style="background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:7px;padding:12px">
579
+ <div style="font-size:11px;color:var(--green);font-weight:600;margin-bottom:10px">✅ journalctl তে পাবে</div>
580
+ <div style="font-size:12px;color:var(--text);line-height:2">
581
+ <div>Systemd services (nginx, sshd, docker)</div>
582
+ <div>Kernel messages — <code class="ic">journalctl -k</code></div>
583
+ <div>Boot logs — <code class="ic">journalctl -b</code></div>
584
+ <div>sudo / auth logs</div>
585
+ <div>Cron jobs output</div>
586
+ <div>তোমার নিজের বানানো .service</div>
587
+ </div>
588
+ </div>
589
+ <div style="background:rgba(248,81,73,.06);border:1px solid rgba(248,81,73,.2);border-radius:7px;padding:12px">
590
+ <div style="font-size:11px;color:var(--red);font-weight:600;margin-bottom:10px">❌ journalctl তে পাবে না</div>
591
+ <div style="font-size:12px;color:var(--text);line-height:2">
592
+ <div><code class="ic">/var/log/nginx/access.log</code></div>
593
+ <div><code class="ic">/var/log/mysql/error.log</code></div>
594
+ <div>Apache / Nginx HTTP access logs</div>
595
+ <div>Custom app.log যেগুলো code লেখে</div>
596
+ <div>যেকোনো plain text log file</div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ <div style="background:rgba(0,0,0,.25);border-radius:7px;padding:14px;font-size:12px;line-height:1.9">
601
+ <div style="color:var(--muted);margin-bottom:10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em">Real example — nginx এর দুই ধরনের log</div>
602
+ <div style="background:#060810;border-radius:5px;padding:10px 12px;font-family:var(--mono);font-size:11.5px;line-height:1.9;margin-bottom:8px">
603
+ <div style="color:var(--muted);margin-bottom:4px"># service start/stop/crash — journalctl তে</div>
604
+ <code style="color:var(--cyan)">journalctl -u nginx</code>
605
+ <br><span style="color:var(--muted)"># Mar 07 systemd: Started nginx</span>
606
+ <br><span style="color:var(--muted)"># Mar 07 systemd: nginx crashed (exit code 1)</span>
607
+ <br><br>
608
+ <div style="color:var(--muted);margin-bottom:4px"># HTTP requests — /var/log/ তে আছে</div>
609
+ <code style="color:var(--cyan)">tail -f /var/log/nginx/access.log</code>
610
+ <br><span style="color:var(--muted)"># 192.168.1.1 - GET /index.html 200</span>
611
+ </div>
612
+ <div style="background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:5px;padding:10px 12px;font-size:12px;color:var(--text)">
613
+ <strong style="color:var(--green)">💡 সহজ rule:</strong>
614
+ <span style="color:var(--muted)"> systemd দিয়ে চলে? → journalctl ✅ &nbsp; নিজে file এ লেখে? → /var/log/ ✅</span>
615
+ </div>
616
+ </div>
617
+ </div>
618
+
619
+ <!-- ─── SECTION 11: DEEP ARCHITECTURE ─── -->
620
+ <div style="grid-column:1/-1;background:rgba(63,185,80,.04);border:1px solid rgba(63,185,80,.2);border-radius:10px;padding:22px">
621
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--green);margin-bottom:16px;display:flex;align-items:center;gap:8px">
622
+ <span style="background:rgba(63,185,80,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 11</span>
623
+ Deep Architecture — Service থেকে Dashboard পর্যন্ত
624
+ </div>
625
+ <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:18px">
626
+
627
+ <!-- Step 1 -->
628
+ <div style="background:rgba(0,0,0,.3);border-radius:8px;padding:14px">
629
+ <div style="font-size:11px;color:var(--cyan);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">ধাপ ১ — Service চালু</div>
630
+ <div style="background:#060c08;border-radius:5px;padding:10px;font-size:11px;color:var(--green);line-height:2;font-family:var(--mono);margin-bottom:10px">
631
+ <span style="color:var(--text)">তুমি</span><br>
632
+ ↓ systemctl start nginx<br>
633
+ <span style="color:var(--yellow)">systemd (PID 1)</span><br>
634
+ ↓ fork করলো<br>
635
+ <span style="color:var(--green)">nginx process</span><br>
636
+ ↓ stdout pipe<br>
637
+ <span style="color:var(--purple)">journald socket</span>
638
+ </div>
639
+ <div style="font-size:11.5px;color:var(--muted);line-height:1.8">
640
+ Key point: systemd নিজেই nginx এর output pipe করে journald এ দেয়।
641
+ nginx জানেও না কোথায় log যাচ্ছে।
642
+ </div>
643
+ </div>
644
+
645
+ <!-- Step 2 -->
646
+ <div style="background:rgba(0,0,0,.3);border-radius:8px;padding:14px">
647
+ <div style="font-size:11px;color:var(--purple);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">ধাপ ২ — journald তিন source থেকে নেয়</div>
648
+ <div style="font-size:11.5px;color:var(--text);line-height:1.9">
649
+ <div style="margin-bottom:8px"><span style="color:var(--yellow)">① /dev/log socket</span><br><span style="color:var(--muted)">পুরনো programs যেগুলো syslog() call করে</span></div>
650
+ <div style="margin-bottom:8px"><span style="color:var(--green)">② systemd journal socket</span><br><span style="color:var(--muted)">services এর stdout/stderr সরাসরি</span></div>
651
+ <div><span style="color:var(--cyan)">③ kernel /dev/kmsg</span><br><span style="color:var(--muted)">hardware, driver, network messages — same as dmesg</span></div>
652
+ </div>
653
+ </div>
654
+
655
+ <!-- Step 3 -->
656
+ <div style="background:rgba(0,0,0,.3);border-radius:8px;padding:14px">
657
+ <div style="font-size:11px;color:var(--yellow);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">ধাপ ৩ — metadata add করে store</div>
658
+ <div style="background:#0a0a06;border-radius:5px;padding:10px;font-size:10.5px;color:#a0c4ff;line-height:1.8;font-family:var(--mono)">
659
+ <span style="color:var(--muted)">{</span><br>
660
+ &nbsp;<span style="color:var(--green)">MESSAGE</span>: <span style="color:#99cc99">"worker started"</span>,<br>
661
+ &nbsp;<span style="color:var(--green)">_SYSTEMD_UNIT</span>: <span style="color:#99cc99">"nginx.service"</span>,<br>
662
+ &nbsp;<span style="color:var(--green)">_PID</span>: <span style="color:var(--orange)">"1234"</span>,<br>
663
+ &nbsp;<span style="color:var(--green)">_EXE</span>: <span style="color:#99cc99">"/usr/sbin/nginx"</span>,<br>
664
+ &nbsp;<span style="color:var(--green)">PRIORITY</span>: <span style="color:var(--orange)">"6"</span>,<br>
665
+ &nbsp;<span style="color:var(--green)">__CURSOR</span>: <span style="color:#99cc99">"s=abc...xyz"</span>,<br>
666
+ &nbsp;<span style="color:var(--green)">_BOOT_ID</span>: <span style="color:#99cc99">"abc123..."</span><br>
667
+ <span style="color:var(--muted)">}</span>
668
+ </div>
669
+ <div style="font-size:11px;color:var(--muted);margin-top:8px">Program কিছু না করলেও journald নিজেই সব metadata add করে।</div>
670
+ </div>
671
+ </div>
672
+
673
+ <!-- Filter explanation -->
674
+ <div style="background:rgba(88,166,255,.05);border:1px solid rgba(88,166,255,.15);border-radius:8px;padding:14px;margin-bottom:14px">
675
+ <div style="font-size:11px;color:var(--blue);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">ধাপ ৪ — Filter কিভাবে কাজ করে?</div>
676
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
677
+ <div>
678
+ <div style="font-size:12px;color:var(--text);line-height:1.9;margin-bottom:10px">
679
+ <code class="ic">journalctl -u nginx</code> internally যা করে:
680
+ binary files খোলে → index এ <code class="ic">_SYSTEMD_UNIT == "nginx.service"</code>
681
+ খোঁজে → matching entries বের করে → timestamp sort → দেখায়।
682
+ </div>
683
+ <div style="background:#060a14;border-radius:5px;padding:10px 12px;font-size:11.5px;font-family:var(--mono);color:var(--cyan);line-height:2">
684
+ <span style="color:var(--muted)"># Multiple filters একসাথে</span><br>
685
+ journalctl -u nginx -p err --since <span style="color:#99cc99">"1h ago"</span><br><br>
686
+ <span style="color:var(--muted)"># Specific PID</span><br>
687
+ journalctl _PID=1234<br><br>
688
+ <span style="color:var(--muted)"># Kernel only (= dmesg)</span><br>
689
+ journalctl -k<br><br>
690
+ <span style="color:var(--muted)"># Previous boot</span><br>
691
+ journalctl -b -1
692
+ </div>
693
+ </div>
694
+ <div>
695
+ <div style="font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em">Plain text vs Binary — কেন binary better?</div>
696
+ <div style="font-size:12px;color:var(--text);line-height:2">
697
+ <div style="display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)">
698
+ <span style="color:var(--red);width:90px;flex-shrink:0">Plain text</span>
699
+ <span style="color:var(--muted)">grep করতে হয়, slow, metadata আলাদা রাখতে হয়</span>
700
+ </div>
701
+ <div style="display:flex;gap:8px;padding:5px 0">
702
+ <span style="color:var(--green);width:90px;flex-shrink:0">Binary</span>
703
+ <span style="color:var(--muted)">indexed, instant filter, metadata একসাথে, compressed</span>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
+
710
+ <!-- Full end-to-end flow -->
711
+ <div style="background:rgba(0,0,0,.3);border-radius:8px;padding:16px">
712
+ <div style="font-size:11px;color:var(--green);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em">পুরো flow — Browser request থেকে Dashboard পর্যন্ত</div>
713
+ <div style="display:grid;grid-template-columns:repeat(9,1fr);align-items:center;gap:4px;font-size:11px;text-align:center">
714
+ <div style="background:rgba(88,166,255,.1);border:1px solid rgba(88,166,255,.3);border-radius:6px;padding:8px 4px;color:var(--blue)">Browser<br><span style="color:var(--muted);font-size:10px">HTTP request</span></div>
715
+ <div style="color:var(--muted)">→</div>
716
+ <div style="background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3);border-radius:6px;padding:8px 4px;color:var(--green)">nginx<br><span style="color:var(--muted);font-size:10px">stdout</span></div>
717
+ <div style="color:var(--muted)">→</div>
718
+ <div style="background:rgba(188,140,255,.1);border:1px solid rgba(188,140,255,.3);border-radius:6px;padding:8px 4px;color:var(--purple)">journald<br><span style="color:var(--muted);font-size:10px">binary store</span></div>
719
+ <div style="color:var(--muted)">→</div>
720
+ <div style="background:rgba(57,208,216,.1);border:1px solid rgba(57,208,216,.3);border-radius:6px;padding:8px 4px;color:var(--cyan)">Node.js<br><span style="color:var(--muted);font-size:10px">spawn + SSE</span></div>
721
+ <div style="color:var(--muted)">→</div>
722
+ <div style="background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3);border-radius:6px;padding:8px 4px;color:var(--green)">SysWatch<br><span style="color:var(--muted);font-size:10px">Dashboard ✅</span></div>
723
+ </div>
724
+ </div>
725
+ </div>
726
+
447
727
  <!-- ─── TRY IT NOW ─── -->
448
728
  <div style="grid-column:1/-1;background:rgba(63,185,80,.04);border:1px solid rgba(63,185,80,.25);border-radius:10px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px">
449
729
  <div>