saymon-syswatch-linux 1.0.5 → 1.0.7

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 +413 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "saymon-syswatch-linux",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
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
@@ -180,6 +180,10 @@ body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13
180
180
  <div class="app">
181
181
  <!-- SIDEBAR -->
182
182
  <nav class="sidebar">
183
+ <div class="nav-group">
184
+ <div class="nav-group-label">Learn</div>
185
+ <div class="nav-item" id="nav-learn" onclick="goto('learn')"><span class="nav-icon">📖</span>What is journalctl?</div>
186
+ </div>
183
187
  <div class="nav-group">
184
188
  <div class="nav-group-label">Monitor</div>
185
189
  <div class="nav-item active" id="nav-overview" onclick="goto('overview')"><span class="nav-icon">◈</span>Overview</div>
@@ -203,6 +207,262 @@ body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13
203
207
  <!-- CONTENT -->
204
208
  <div class="content">
205
209
 
210
+ <!-- ══════════ LEARN: WHAT IS JOURNALCTL ══════════ -->
211
+ <div class="page" id="page-learn">
212
+ <div style="flex:1;overflow-y:auto;padding:28px 32px;background:var(--bg)">
213
+
214
+ <!-- Page header -->
215
+ <div style="margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)">
216
+ <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px">
217
+ <div style="width:36px;height:36px;background:rgba(188,140,255,.15);border:1px solid rgba(188,140,255,.35);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px">📖</div>
218
+ <div>
219
+ <div style="font-family:var(--sans);font-size:20px;font-weight:700;color:#fff">What is journalctl?</div>
220
+ <div style="font-size:12px;color:var(--muted);margin-top:2px">Banglish (বাংলা + English) গাইড — Linux logging system সম্পূর্ণ বোঝার জন্য</div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- GRID LAYOUT -->
226
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px">
227
+
228
+ <!-- ─── WHAT IS ─── -->
229
+ <div style="grid-column:1/-1;background:rgba(188,140,255,.06);border:1px solid rgba(188,140,255,.22);border-radius:10px;padding:22px">
230
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--purple);margin-bottom:14px;display:flex;align-items:center;gap:8px">
231
+ <span style="background:rgba(188,140,255,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 01</span>
232
+ journalctl কী?
233
+ </div>
234
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:18px">
235
+ <div>
236
+ <p style="font-size:13px;color:var(--text);line-height:2;margin-bottom:12px">
237
+ <code class="ic">journalctl</code> হলো <strong style="color:var(--purple)">systemd</strong>-এর official log reading tool।
238
+ তোমার Linux system এ যা কিছু হচ্ছে — service start হচ্ছে, error আসছে,
239
+ kernel কিছু বলছে — সব কিছু <code class="ic">systemd-journald</code> নামের
240
+ একটা daemon collect করে রাখে।
241
+ </p>
242
+ <p style="font-size:13px;color:var(--text);line-height:2">
243
+ <code class="ic">journalctl</code> হলো সেই stored data পড়ার tool —
244
+ filter করা যায়, search করা যায়, real-time stream করা যায়।
245
+ একটাই tool দিয়ে system এর সব কিছু monitor করা যায়।
246
+ </p>
247
+ </div>
248
+ <div>
249
+ <div style="background:rgba(0,0,0,.3);border-radius:8px;padding:14px;font-size:12px;line-height:2">
250
+ <div style="color:var(--muted);margin-bottom:10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em">পুরনো vs নতুন</div>
251
+ <div style="display:flex;gap:10px;margin-bottom:8px">
252
+ <span style="color:var(--red);width:80px;flex-shrink:0">/var/log/syslog</span>
253
+ <span style="color:var(--muted)">Plain text — search করতে grep লাগে, structured data নেই</span>
254
+ </div>
255
+ <div style="display:flex;gap:10px">
256
+ <span style="color:var(--green);width:80px;flex-shrink:0">journald</span>
257
+ <span style="color:var(--muted)">Binary + indexed — fast search, metadata, JSON output, filters</span>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- ─── ARCHITECTURE ─── -->
265
+ <div style="background:rgba(57,208,216,.06);border:1px solid rgba(57,208,216,.22);border-radius:10px;padding:22px">
266
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--cyan);margin-bottom:14px;display:flex;align-items:center;gap:8px">
267
+ <span style="background:rgba(57,208,216,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 02</span>
268
+ Architecture
269
+ </div>
270
+ <div style="background:#060c0d;border-radius:7px;padding:16px;font-size:12px;color:var(--cyan);line-height:2.2;font-family:var(--mono);margin-bottom:14px">
271
+ <span style="color:var(--yellow)">┌─[Kernel]</span> <span style="color:var(--green)">┌─[Services]</span> <span style="color:var(--blue)">┌─[Apps]</span>
272
+ <span style="color:var(--yellow)">│ /dev/kmsg</span> <span style="color:var(--green)">│ stdout/stderr</span> <span style="color:var(--blue)">│ syslog()</span>
273
+ <span style="color:var(--muted)">└──────┬─────┘──────┬──────┘────┬──┘</span>
274
+ <span style="color:var(--muted)"> └────────────┴───────────┘</span>
275
+ <span style="color:var(--purple)">↓</span>
276
+ <span style="color:var(--purple)">systemd-journald</span>
277
+ <span style="color:var(--purple)">↓</span>
278
+ <span style="color:var(--cyan)">/var/log/journal/</span> <span style="color:var(--muted)">(binary, persistent)</span>
279
+ <span style="color:var(--muted)">/run/log/journal/</span> <span style="color:var(--muted)">(RAM, volatile)</span>
280
+ <span style="color:var(--purple)">↓</span>
281
+ <span style="color:var(--green)">journalctl</span> <span style="color:var(--muted)">← তুমি এটা দিয়ে পড়ো</span>
282
+ </div>
283
+ <div style="font-size:12px;color:var(--text);line-height:1.9">
284
+ <div style="margin-bottom:6px"><span style="color:var(--yellow)">Kernel</span> — hardware error, driver issue <code class="ic">/dev/kmsg</code> থেকে আসে</div>
285
+ <div style="margin-bottom:6px"><span style="color:var(--green)">Services</span> — nginx, sshd এর stdout/stderr সরাসরি journald এ যায়, কোনো file লেখার দরকার নেই</div>
286
+ <div><span style="color:var(--blue)">Apps</span> — <code class="ic">sd_journal_send()</code> বা <code class="ic">syslog()</code> দিয়ে যেকোনো program log পাঠাতে পারে</div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- ─── LOG ENTRY STRUCTURE ─── -->
291
+ <div style="background:rgba(88,166,255,.06);border:1px solid rgba(88,166,255,.22);border-radius:10px;padding:22px">
292
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:8px">
293
+ <span style="background:rgba(88,166,255,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 03</span>
294
+ একটা Log Entry তে কী থাকে?
295
+ </div>
296
+ <p style="font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:10px">
297
+ <code class="ic">journalctl -o json</code> দিলে প্রতিটা entry এরকম দেখায়:
298
+ </p>
299
+ <div style="background:#060a14;border-radius:7px;padding:14px;font-size:12px;color:#a0c4ff;line-height:2;font-family:var(--mono);margin-bottom:14px">
300
+ <span style="color:var(--muted)">{</span>
301
+ <span style="color:var(--green)">"MESSAGE"</span>: <span style="color:#99cc99">"nginx started"</span>,
302
+ <span style="color:var(--green)">"_SYSTEMD_UNIT"</span>: <span style="color:#99cc99">"nginx.service"</span>,
303
+ <span style="color:var(--green)">"PRIORITY"</span>: <span style="color:var(--orange)">"6"</span>, <span style="color:var(--muted)">← 0=emerg…7=debug</span>
304
+ <span style="color:var(--green)">"_PID"</span>: <span style="color:var(--orange)">"1234"</span>,
305
+ <span style="color:var(--green)">"_HOSTNAME"</span>: <span style="color:#99cc99">"my-server"</span>,
306
+ <span style="color:var(--green)">"__REALTIME_TIMESTAMP"</span>: <span style="color:var(--orange)">"1741..."</span> <span style="color:var(--muted)">← microseconds</span>
307
+ <span style="color:var(--muted)">}</span>
308
+ </div>
309
+ <p style="font-size:12px;color:var(--text);line-height:1.9">
310
+ SysWatch এই JSON parse করে <code class="ic">MESSAGE</code>, <code class="ic">_SYSTEMD_UNIT</code>,
311
+ <code class="ic">PRIORITY</code> নিয়ে dashboard এ দেখায়।
312
+ <code class="ic">jq</code> দিয়ে terminal এ filter করতে পারো:
313
+ <code class="ic" style="display:block;margin-top:6px;color:var(--cyan)">journalctl -o json | jq '.MESSAGE'</code>
314
+ </p>
315
+ </div>
316
+
317
+ <!-- ─── PRIORITY ─── -->
318
+ <div style="background:rgba(227,179,65,.06);border:1px solid rgba(227,179,65,.22);border-radius:10px;padding:22px">
319
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--yellow);margin-bottom:14px;display:flex;align-items:center;gap:8px">
320
+ <span style="background:rgba(227,179,65,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 04</span>
321
+ Priority Levels — 0 থেকে 7
322
+ </div>
323
+ <div style="font-size:12.5px;line-height:0">
324
+ <div style="display:grid;grid-template-columns:28px 90px 1fr;gap:0;line-height:1">
325
+ <div style="color:var(--red);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">0</div>
326
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(248,81,73,.15);color:var(--red)">emerg</code></div>
327
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">System crash — কিছুই কাজ করছে না</div>
328
+
329
+ <div style="color:var(--red);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">1</div>
330
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(248,81,73,.15);color:var(--red)">alert</code></div>
331
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">এখনই action নিতে হবে</div>
332
+
333
+ <div style="color:var(--red);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">2</div>
334
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(248,81,73,.15);color:var(--red)">crit</code></div>
335
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">Critical failure</div>
336
+
337
+ <div style="color:var(--red);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">3</div>
338
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(248,81,73,.15);color:var(--red)">err</code></div>
339
+ <div style="padding:7px 0;color:var(--text);border-bottom:1px solid var(--border);font-size:12px"><strong>Error — সবচেয়ে বেশি দেখবে, fix করতে হবে</strong></div>
340
+
341
+ <div style="color:var(--yellow);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">4</div>
342
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(227,179,65,.12);color:var(--yellow)">warning</code></div>
343
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">সতর্ক থাকো, এখনই problem না</div>
344
+
345
+ <div style="color:var(--yellow);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">5</div>
346
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic" style="background:rgba(227,179,65,.12);color:var(--yellow)">notice</code></div>
347
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">Normal কিন্তু noteworthy</div>
348
+
349
+ <div style="color:var(--green);font-weight:700;padding:7px 0;border-bottom:1px solid var(--border)">6</div>
350
+ <div style="padding:7px 8px;border-bottom:1px solid var(--border)"><code class="ic">info</code></div>
351
+ <div style="padding:7px 0;color:var(--muted);border-bottom:1px solid var(--border);font-size:12px">Normal operational messages</div>
352
+
353
+ <div style="color:var(--muted);font-weight:700;padding:7px 0">7</div>
354
+ <div style="padding:7px 8px"><code class="ic">debug</code></div>
355
+ <div style="padding:7px 0;color:var(--muted);font-size:12px">Verbose — সাধারণত filter করে রাখো</div>
356
+ </div>
357
+ </div>
358
+ <div style="margin-top:12px;background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.2);border-radius:6px;padding:10px 13px;font-size:12px;color:var(--text);line-height:1.8">
359
+ <strong style="color:var(--green)">💡 টিপস:</strong> <code class="ic">-p err</code> দিলে 0–3 সব দেখায় — শুধু 3 না। Lower number = বেশি severe।
360
+ </div>
361
+ </div>
362
+
363
+ <!-- ─── HOW SYSWATCH USES IT ─── -->
364
+ <div style="background:rgba(63,185,80,.06);border:1px solid rgba(63,185,80,.22);border-radius:10px;padding:22px">
365
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--green);margin-bottom:14px;display:flex;align-items:center;gap:8px">
366
+ <span style="background:rgba(63,185,80,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 05</span>
367
+ SysWatch কীভাবে journalctl ব্যবহার করছে?
368
+ </div>
369
+ <div style="font-size:12px;color:var(--text);line-height:1.9;margin-bottom:12px">
370
+ Browser কখনো directly journalctl চালাতে পারে না — security issue।
371
+ তাই Node.js server <strong style="color:var(--green)">trusted intermediary</strong> হিসেবে কাজ করছে।
372
+ </div>
373
+ <div style="background:#060c08;border-radius:7px;padding:14px;font-size:12px;color:var(--green);line-height:2.2;font-family:var(--mono);margin-bottom:12px">
374
+ <span style="color:var(--muted)">তুমি filter select করো</span> <span style="color:var(--text)">(unit, priority)</span>
375
+ ↓
376
+ <span style="color:var(--cyan)">Node.js</span> <span style="color:var(--muted)">→</span> <span style="color:var(--green)">spawn('journalctl', ['-f', '-u', 'nginx', ...])</span>
377
+ ↓
378
+ <span style="color:var(--cyan)">proc.stdout</span> <span style="color:var(--muted)">→ line-by-line JSON parse</span>
379
+ ↓
380
+ <span style="color:var(--cyan)">SSE</span> <span style="color:var(--muted)">(text/event-stream)</span> <span style="color:var(--muted)">→ HTTP push</span>
381
+ ↓
382
+ <span style="color:var(--cyan)">Browser EventSource</span> <span style="color:var(--muted)">→ auto-reconnects</span>
383
+ ↓
384
+ <span style="color:var(--text)">তুমি screen এ real-time দেখছো</span>
385
+ </div>
386
+ <div style="font-size:12px;color:var(--muted);line-height:1.9">
387
+ Unit বা priority change করলে — পুরনো <code class="ic">journalctl</code> process kill হয়,
388
+ নতুন args দিয়ে আবার start হয়। এটাই তুমি Journal Logs page এ করছো।
389
+ </div>
390
+ </div>
391
+
392
+ <!-- ─── QUICK REFERENCE ─── -->
393
+ <div style="background:rgba(240,136,62,.06);border:1px solid rgba(240,136,62,.22);border-radius:10px;padding:22px">
394
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:var(--orange);margin-bottom:14px;display:flex;align-items:center;gap:8px">
395
+ <span style="background:rgba(240,136,62,.2);padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.08em">SECTION 06</span>
396
+ Quick Reference — কাজের Commands
397
+ </div>
398
+ <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
399
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
400
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Live stream</div>
401
+ <code style="font-size:12px;color:var(--cyan)">journalctl -f</code>
402
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">সব unit, real-time</div>
403
+ </div>
404
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
405
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Specific unit</div>
406
+ <code style="font-size:12px;color:var(--cyan)">journalctl -u nginx -f</code>
407
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">শুধু nginx এর live logs</div>
408
+ </div>
409
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
410
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Errors only</div>
411
+ <code style="font-size:12px;color:var(--cyan)">journalctl -p err -f</code>
412
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">শুধু errors (0–3)</div>
413
+ </div>
414
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
415
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">This boot</div>
416
+ <code style="font-size:12px;color:var(--cyan)">journalctl -b</code>
417
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">শুধু এই boot এর logs</div>
418
+ </div>
419
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
420
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Previous boot</div>
421
+ <code style="font-size:12px;color:var(--cyan)">journalctl -b -1</code>
422
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">আগের boot এর logs</div>
423
+ </div>
424
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
425
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Time filter</div>
426
+ <code style="font-size:12px;color:var(--cyan)">journalctl --since "1h ago"</code>
427
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">শেষ ১ ঘন্টার logs</div>
428
+ </div>
429
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
430
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">JSON output</div>
431
+ <code style="font-size:12px;color:var(--cyan)">journalctl -o json | jq</code>
432
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">Structured, parseable</div>
433
+ </div>
434
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px">
435
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Disk usage</div>
436
+ <code style="font-size:12px;color:var(--cyan)">journalctl --disk-usage</code>
437
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">Journal কতটুকু disk নিচ্ছে</div>
438
+ </div>
439
+ <div style="background:rgba(0,0,0,.25);border-radius:6px;padding:10px 12px;grid-column:1/-1">
440
+ <div style="font-size:10px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em">Cleanup</div>
441
+ <code style="font-size:12px;color:var(--cyan)">journalctl --vacuum-size=500M</code>
442
+ <div style="font-size:11px;color:var(--muted);margin-top:4px">500MB এর বেশি পুরনো logs মুছে দাও। <code style="color:var(--muted)">--vacuum-time=7d</code> দিয়ে 7 দিনের বেশি পুরনো মুছতে পারো।</div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- ─── TRY IT NOW ─── -->
448
+ <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
+ <div>
450
+ <div style="font-family:var(--sans);font-size:15px;font-weight:700;color:#fff;margin-bottom:6px">এখন চেষ্টা করো!</div>
451
+ <div style="font-size:12px;color:var(--muted);line-height:1.8">
452
+ Journal Logs page এ যাও → unit বা priority filter change করো →
453
+ right panel এ <strong style="color:var(--green)">"▶ RUNNING NOW"</strong> block এ দেখো
454
+ কোন command টা exactly চলছে — flags সহ explain করা আছে।
455
+ </div>
456
+ </div>
457
+ <button onclick="goto('logs')" style="flex-shrink:0;background:var(--green);color:#000;border:none;padding:10px 22px;border-radius:7px;font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s" onmouseover="this.style.opacity='.8'" onmouseout="this.style.opacity='1'">
458
+ → Journal Logs খোলো
459
+ </button>
460
+ </div>
461
+
462
+ </div><!-- end grid -->
463
+ </div>
464
+ </div>
465
+
206
466
  <!-- ══════════ OVERVIEW ══════════ -->
207
467
  <div class="page active" id="page-overview">
208
468
  <div class="split">
@@ -371,6 +631,159 @@ es.<span class="fn2">onmessage</span> = e => {
371
631
  };</div></div>
372
632
  <div class="note"><strong>💡 SSE vs WebSocket:</strong> SSE is one-way (server→browser), auto-reconnects, and works over plain HTTP. Perfect for log streaming. Use WebSockets only if you need bidirectional messaging.</div>
373
633
  </div>
634
+
635
+ <!-- ══ SHORTCUT TO LEARN PAGE ══ -->
636
+ <div class="ls" style="margin-top:8px">
637
+ <div style="background:rgba(188,140,255,.07);border:1px solid rgba(188,140,255,.2);border-radius:7px;padding:12px 14px;cursor:pointer" onclick="goto('learn')">
638
+ <div style="font-size:12px;color:var(--purple);font-weight:600;margin-bottom:4px">📖 বাংলা গাইড পড়তে চাও?</div>
639
+ <div style="font-size:11px;color:var(--muted);line-height:1.6">journalctl কী, architecture, priority levels — সব Banglish এ explain করা আছে।</div>
640
+ <div style="font-size:11px;color:var(--purple);margin-top:8px">→ "What is journalctl?" page এ যাও</div>
641
+ </div>
642
+ <div style="display:none">
643
+
644
+ <!-- ─── WHAT IS ─── -->
645
+ <div style="background:rgba(188,140,255,.05);border:1px solid rgba(188,140,255,.18);border-radius:7px;padding:14px;margin-bottom:12px">
646
+ <div style="font-size:11px;font-weight:600;color:var(--purple);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">journalctl কী?</div>
647
+ <p style="font-size:12px;color:var(--text);line-height:1.9;margin-bottom:8px">
648
+ <code class="ic">journalctl</code> হলো <strong style="color:var(--purple)">systemd</strong>-এর official log reading tool।
649
+ তোমার Linux system এ যা কিছু হচ্ছে — service start হচ্ছে, error আসছে,
650
+ kernel কিছু বলছে — সব কিছু <code class="ic">systemd-journald</code> নামের
651
+ একটা daemon collect করে রাখে। আর <code class="ic">journalctl</code> সেই
652
+ data পড়ার CLI tool।
653
+ </p>
654
+ <p style="font-size:12px;color:var(--muted);line-height:1.9">
655
+ পুরনো system এ <code class="ic">/var/log/syslog</code> ছিল plain text file।
656
+ কিন্তু journald <strong style="color:var(--yellow)">binary format</strong> এ store করে —
657
+ faster search, structured metadata, automatically indexed।
658
+ প্রতিটা log entry একটা JSON object এর মতো — timestamp, PID, unit name,
659
+ priority সব আলাদা field হিসেবে থাকে।
660
+ </p>
661
+ </div>
662
+
663
+ <!-- ─── ARCHITECTURE ─── -->
664
+ <div style="background:rgba(57,208,216,.05);border:1px solid rgba(57,208,216,.18);border-radius:7px;padding:14px;margin-bottom:12px">
665
+ <div style="font-size:11px;font-weight:600;color:var(--cyan);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">Architecture — কীভাবে কাজ করে?</div>
666
+ <div style="background:#060c0d;border-radius:5px;padding:12px;font-size:11px;color:var(--cyan);line-height:2;margin-bottom:10px;font-family:var(--mono)">
667
+ <span style="color:var(--muted)">╔══════════════════════════════════════╗</span>
668
+ <span style="color:var(--muted)">║</span> <span style="color:var(--yellow)">[Kernel]</span> <span style="color:var(--green)">[Services]</span> <span style="color:var(--blue)">[Apps]</span> <span style="color:var(--muted)">║</span>
669
+ <span style="color:var(--muted)">║</span> ↓ ↓ ↓ <span style="color:var(--muted)">║</span>
670
+ <span style="color:var(--muted)">║</span> <span style="color:var(--purple)">systemd-journald</span> ← সব এখানে আসে <span style="color:var(--muted)">║</span>
671
+ <span style="color:var(--muted)">║</span> ↓ <span style="color:var(--muted)">║</span>
672
+ <span style="color:var(--muted)">║</span> <span style="color:var(--cyan)">/var/log/journal/</span> (binary files) <span style="color:var(--muted)">║</span>
673
+ <span style="color:var(--muted)">║</span> ↓ <span style="color:var(--muted)">║</span>
674
+ <span style="color:var(--muted)">║</span> <span style="color:var(--green)">journalctl</span> ← তুমি এটা দিয়ে পড়ো <span style="color:var(--muted)">║</span>
675
+ <span style="color:var(--muted)">╚══════════════════════════════════════╝</span>
676
+ </div>
677
+ <div style="font-size:12px;color:var(--text);line-height:1.9">
678
+ <div style="margin-bottom:6px">
679
+ <span style="color:var(--yellow)">① Kernel logs</span> — <code class="ic">/dev/kmsg</code> থেকে journald নেয়।
680
+ Hardware error, driver issue এখানে আসে।
681
+ </div>
682
+ <div style="margin-bottom:6px">
683
+ <span style="color:var(--green)">② Service logs</span> — nginx, sshd এর মতো service এর
684
+ <code class="ic">stdout</code> / <code class="ic">stderr</code> সরাসরি journald এ যায়।
685
+ কোনো file লেখার দরকার নেই।
686
+ </div>
687
+ <div style="margin-bottom:6px">
688
+ <span style="color:var(--blue)">③ App logs</span> — যেকোনো program <code class="ic">sd_journal_send()</code>
689
+ বা <code class="ic">syslog()</code> দিয়ে log পাঠাতে পারে।
690
+ </div>
691
+ <div>
692
+ <span style="color:var(--purple)">④ journald</span> সব collect করে binary journal files এ লেখে।
693
+ <code class="ic">/var/log/journal/</code> — persistent (reboot এর পরেও থাকে)।
694
+ <code class="ic">/run/log/journal/</code> — volatile (RAM এ, reboot এ মুছে যায়)।
695
+ </div>
696
+ </div>
697
+ </div>
698
+
699
+ <!-- ─── EACH LOG ENTRY ─── -->
700
+ <div style="background:rgba(88,166,255,.05);border:1px solid rgba(88,166,255,.18);border-radius:7px;padding:14px;margin-bottom:12px">
701
+ <div style="font-size:11px;font-weight:600;color:var(--blue);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">একটা Log Entry তে কী থাকে?</div>
702
+ <p style="font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:8px">
703
+ <code class="ic">-o json</code> দিলে প্রতিটা entry এরকম দেখায়:
704
+ </p>
705
+ <div style="background:#060a14;border-radius:5px;padding:11px;font-size:11px;color:#a0c4ff;line-height:1.9;font-family:var(--mono)">
706
+ <span style="color:var(--muted)">{</span>
707
+ <span style="color:var(--green)">"MESSAGE"</span>: <span style="color:#99cc99">"Started nginx service"</span>,
708
+ <span style="color:var(--green)">"_SYSTEMD_UNIT"</span>: <span style="color:#99cc99">"nginx.service"</span>,
709
+ <span style="color:var(--green)">"PRIORITY"</span>: <span style="color:var(--orange)">"6"</span>, <span style="color:var(--muted)">← info</span>
710
+ <span style="color:var(--green)">"_PID"</span>: <span style="color:var(--orange)">"1234"</span>,
711
+ <span style="color:var(--green)">"_HOSTNAME"</span>: <span style="color:#99cc99">"my-server"</span>,
712
+ <span style="color:var(--green)">"__REALTIME_TIMESTAMP"</span>: <span style="color:var(--orange)">"1741..."</span> <span style="color:var(--muted)">← microseconds</span>
713
+ <span style="color:var(--muted)">}</span>
714
+ </div>
715
+ <p style="font-size:12px;color:var(--text);line-height:1.9;margin-top:10px">
716
+ SysWatch এই JSON parse করে <code class="ic">MESSAGE</code>, <code class="ic">_SYSTEMD_UNIT</code>,
717
+ <code class="ic">PRIORITY</code> নিয়ে তোমাকে দেখায়। Raw journalctl output এর চেয়ে
718
+ অনেক বেশি structured।
719
+ </p>
720
+ </div>
721
+
722
+ <!-- ─── PRIORITY ─── -->
723
+ <div style="background:rgba(227,179,65,.05);border:1px solid rgba(227,179,65,.18);border-radius:7px;padding:14px;margin-bottom:12px">
724
+ <div style="font-size:11px;font-weight:600;color:var(--yellow);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">Priority Levels — কোনটা কতটা গুরুত্বপূর্ণ?</div>
725
+ <div style="font-size:11.5px;line-height:2.1">
726
+ <div><span style="color:var(--red);min-width:22px;display:inline-block;font-weight:600">0</span> <code class="ic">emerg</code> — System crash হয়ে গেছে, কিছুই কাজ করছে না</div>
727
+ <div><span style="color:var(--red);min-width:22px;display:inline-block;font-weight:600">1</span> <code class="ic">alert</code> — এখনই action নিতে হবে</div>
728
+ <div><span style="color:var(--red);min-width:22px;display:inline-block;font-weight:600">2</span> <code class="ic">crit</code> — Critical failure (hardware/software)</div>
729
+ <div><span style="color:var(--red);min-width:22px;display:inline-block;font-weight:600">3</span> <code class="ic">err</code> — Error — <span style="color:var(--muted)">সবচেয়ে বেশি দেখবে, fix করতে হবে</span></div>
730
+ <div><span style="color:var(--yellow);min-width:22px;display:inline-block;font-weight:600">4</span> <code class="ic">warning</code> — Warning — এখনই problem না, কিন্তু নজর রাখো</div>
731
+ <div><span style="color:var(--yellow);min-width:22px;display:inline-block;font-weight:600">5</span> <code class="ic">notice</code> — Normal কিন্তু noteworthy কিছু হয়েছে</div>
732
+ <div><span style="color:var(--green);min-width:22px;display:inline-block;font-weight:600">6</span> <code class="ic">info</code> — Normal operational messages</div>
733
+ <div><span style="color:var(--muted);min-width:22px;display:inline-block;font-weight:600">7</span> <code class="ic">debug</code> — Verbose debug info — সাধারণত filter করে রাখো</div>
734
+ </div>
735
+ <div class="note" style="margin-top:10px">
736
+ <strong>💡 টিপস:</strong> <code class="ic">-p err</code> দিলে 0–3 (emerg, alert, crit, err) সব দেখায় — শুধু error না।
737
+ জানো — lower number = বেশি severe। এটা syslog এর পুরনো convention।
738
+ </div>
739
+ </div>
740
+
741
+ <!-- ─── HOW SYSWATCH USES IT ─── -->
742
+ <div style="background:rgba(63,185,80,.05);border:1px solid rgba(63,185,80,.18);border-radius:7px;padding:14px;margin-bottom:12px">
743
+ <div style="font-size:11px;font-weight:600;color:var(--green);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">SysWatch কীভাবে journalctl ব্যবহার করছে?</div>
744
+ <div style="font-size:12px;color:var(--text);line-height:1.9;margin-bottom:10px">
745
+ SysWatch Node.js এ <code class="ic">child_process.spawn()</code> দিয়ে journalctl
746
+ চালায় এবং output কে browser এ real-time push করে। Flow টা এরকম:
747
+ </div>
748
+ <div style="background:#060c08;border-radius:5px;padding:11px;font-size:11px;color:var(--green);line-height:2;font-family:var(--mono);margin-bottom:10px">
749
+ <span style="color:var(--muted)">journalctl -f -o json</span> <span style="color:var(--muted)">← child process</span>
750
+ ↓
751
+ <span style="color:var(--muted)">proc.stdout</span> (stream) <span style="color:var(--muted)">← line by line JSON</span>
752
+ ↓
753
+ <span style="color:var(--muted)">SSE event: data: {...}</span> <span style="color:var(--muted)">← HTTP text/event-stream</span>
754
+ ↓
755
+ <span style="color:var(--muted)">Browser EventSource</span> <span style="color:var(--muted)">← auto reconnects</span>
756
+ ↓
757
+ <span style="color:var(--muted)">DOM update</span> <span style="color:var(--muted)">← তুমি screen এ দেখছো</span>
758
+ </div>
759
+ <div style="font-size:12px;color:var(--muted);line-height:1.9">
760
+ Browser কখনো directly journalctl চালাতে পারে না — security issue।
761
+ তাই Node.js server টা <strong style="color:var(--text)">trusted intermediary</strong> হিসেবে কাজ করছে।
762
+ Unit বা priority filter change করলে — পুরনো connection বন্ধ করে,
763
+ নতুন args দিয়ে আবার journalctl start হয়।
764
+ </div>
765
+ </div>
766
+
767
+ <!-- ─── USEFUL COMMANDS ─── -->
768
+ <div style="background:rgba(240,136,62,.05);border:1px solid rgba(240,136,62,.18);border-radius:7px;padding:14px">
769
+ <div style="font-size:11px;font-weight:600;color:var(--orange);margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em">কাজের Commands — চট করে মনে রাখার জন্য</div>
770
+ <div style="font-size:11.5px;line-height:2.2;color:var(--text)">
771
+ <div><code class="ic" style="color:var(--cyan)">journalctl -f</code> — live stream, সব unit</div>
772
+ <div><code class="ic" style="color:var(--cyan)">journalctl -u nginx -f</code> — শুধু nginx এর live logs</div>
773
+ <div><code class="ic" style="color:var(--cyan)">journalctl -p err -f</code> — শুধু errors, live</div>
774
+ <div><code class="ic" style="color:var(--cyan)">journalctl -b</code> — শুধু এই boot এর logs</div>
775
+ <div><code class="ic" style="color:var(--cyan)">journalctl -b -1</code> — আগের boot এর logs</div>
776
+ <div><code class="ic" style="color:var(--cyan)">journalctl --since "1h ago"</code> — শেষ ১ ঘন্টার logs</div>
777
+ <div><code class="ic" style="color:var(--cyan)">journalctl --since today</code> — আজকের সব logs</div>
778
+ <div><code class="ic" style="color:var(--cyan)">journalctl --disk-usage</code> — journal কতটুকু disk নিচ্ছে</div>
779
+ <div><code class="ic" style="color:var(--cyan)">journalctl --vacuum-size=500M</code> — 500MB এর বেশি পুরনো logs মুছে দাও</div>
780
+ <div><code class="ic" style="color:var(--cyan)">journalctl -o json | jq</code> — JSON parse করে সুন্দর করে দেখো</div>
781
+ </div>
782
+ </div>
783
+
784
+ </div><!-- end banglishGuide -->
785
+ </div><!-- end ls -->
786
+
374
787
  </div>
375
788
  </div>
376
789
  </div>