npm - yakmesh - Versions diffs - 2.8.2 → 3.0.0 - Mend

yakmesh 2.8.2 → 3.0.0

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 (232) hide show

package/CHANGELOG.md +637 -0
package/CONTRIBUTING.md +42 -0
package/Caddyfile +77 -0
package/README.md +119 -29
package/adapters/adapter-mlv-bible/README.md +124 -0
package/adapters/adapter-mlv-bible/index.js +400 -0
package/adapters/chat-mod-adapter.js +532 -0
package/adapters/content-adapter.js +273 -0
package/content/api.js +50 -41
package/content/index.js +2 -2
package/content/store.js +355 -173
package/dashboard/index.html +19 -3
package/database/replication.js +117 -37
package/docs/CRYPTO-AGILITY.md +204 -0
package/docs/MTLS-RESEARCH.md +367 -0
package/docs/NAMCHE-SPEC.md +681 -0
package/docs/PEERQUANTA-YAKMESH-INTEGRATION.md +407 -0
package/docs/PRECISION-DISCLOSURE.md +96 -0
package/docs/README.md +76 -0
package/docs/ROADMAP-2.4.0.md +447 -0
package/docs/ROADMAP-2.5.0.md +244 -0
package/docs/SECURITY-AUDIT-REPORT.md +306 -0
package/docs/SST-INTEGRATION.md +712 -0
package/docs/STEADYWATCH-IMPLEMENTATION.md +303 -0
package/docs/TERNARY-AUDIT-REPORT.md +247 -0
package/docs/TME-FAQ.md +221 -0
package/docs/WHITEPAPER.md +623 -0
package/docs/adapters.html +1001 -0
package/docs/advanced-systems.html +1045 -0
package/docs/annex.html +1046 -0
package/docs/api.html +970 -0
package/docs/business/response-templates.md +160 -0
package/docs/c2c.html +1225 -0
package/docs/cli.html +1332 -0
package/docs/configuration.html +1248 -0
package/docs/darshan.html +1085 -0
package/docs/dharma.html +966 -0
package/docs/docs-bundle.html +1075 -0
package/docs/docs.css +3120 -0
package/docs/docs.js +556 -0
package/docs/doko.html +969 -0
package/docs/geo-proof.html +858 -0
package/docs/getting-started.html +840 -0
package/docs/gumba-tutorial.html +1144 -0
package/docs/gumba.html +1098 -0
package/docs/index.html +914 -0
package/docs/jhilke.html +1312 -0
package/docs/karma.html +1100 -0
package/docs/katha.html +1037 -0
package/docs/lama.html +978 -0
package/docs/mandala.html +1067 -0
package/docs/mani.html +964 -0
package/docs/mantra.html +967 -0
package/docs/mesh.html +1409 -0
package/docs/nakpak.html +869 -0
package/docs/namche.html +928 -0
package/docs/nav-order.json +53 -0
package/docs/prahari.html +1043 -0
package/docs/prism-bash.min.js +1 -0
package/docs/prism-javascript.min.js +1 -0
package/docs/prism-json.min.js +1 -0
package/docs/prism-tomorrow.min.css +1 -0
package/docs/prism.min.js +1 -0
package/docs/privacy.html +699 -0
package/docs/quick-reference.html +1181 -0
package/docs/sakshi.html +1402 -0
package/docs/sandboxing.md +386 -0
package/docs/seva.html +911 -0
package/docs/sherpa.html +871 -0
package/docs/studio.html +860 -0
package/docs/stupa.html +995 -0
package/docs/tailwind.min.css +2 -0
package/docs/tattva.html +1332 -0
package/docs/terms.html +686 -0
package/docs/time-server-deployment.md +166 -0
package/docs/time-sources.html +1392 -0
package/docs/tivra.html +1127 -0
package/docs/trademark-policy.html +686 -0
package/docs/tribhuj.html +1183 -0
package/docs/trust-security.html +1029 -0
package/docs/tutorials/backup-recovery.html +654 -0
package/docs/tutorials/dashboard.html +604 -0
package/docs/tutorials/domain-setup.html +605 -0
package/docs/tutorials/host-website.html +456 -0
package/docs/tutorials/mesh-network.html +505 -0
package/docs/tutorials/mobile-access.html +445 -0
package/docs/tutorials/privacy.html +467 -0
package/docs/tutorials/raspberry-pi.html +600 -0
package/docs/tutorials/security-basics.html +539 -0
package/docs/tutorials/share-files.html +431 -0
package/docs/tutorials/troubleshooting.html +637 -0
package/docs/tutorials/trust-karma.html +419 -0
package/docs/tutorials/yak-protocol.html +456 -0
package/docs/tutorials.html +1034 -0
package/docs/vani.html +1270 -0
package/docs/webserver.html +809 -0
package/docs/yak-protocol.html +940 -0
package/docs/yak-timeserver-design.md +475 -0
package/docs/yakapp.html +1015 -0
package/docs/ypc27.html +1069 -0
package/docs/yurt.html +1344 -0
package/embedded-docs/bundle.js +334 -74
package/gossip/protocol.js +247 -27
package/identity/key-resolver.js +262 -0
package/identity/machine-seed.js +632 -0
package/identity/node-key.js +669 -368
package/identity/tribhuj-ratchet.js +506 -0
package/knowledge-base.js +37 -8
package/launcher/yakmesh.bat +62 -0
package/launcher/yakmesh.sh +70 -0
package/mesh/annex.js +462 -108
package/mesh/beacon-broadcast.js +113 -1
package/mesh/darshan.js +1718 -0
package/mesh/gumba.js +1567 -0
package/mesh/jhilke.js +651 -0
package/mesh/katha.js +1012 -0
package/mesh/nakpak-routing.js +8 -5
package/mesh/network.js +724 -34
package/mesh/pulse-sync.js +4 -1
package/mesh/rate-limiter.js +127 -15
package/mesh/seva.js +526 -0
package/mesh/sherpa-discovery.js +89 -8
package/mesh/sybil-defense.js +19 -5
package/mesh/temporal-encoder.js +4 -3
package/mesh/vani.js +1364 -0
package/mesh/yurt.js +1340 -0
package/models/entropy-sentinel.onnx +0 -0
package/models/karma-trust.onnx +0 -0
package/models/manifest.json +43 -0
package/models/sakshi-anomaly.onnx +0 -0
package/oracle/code-proof-protocol.js +7 -6
package/oracle/codebase-lock.js +257 -28
package/oracle/index.js +74 -15
package/oracle/ma902-snmp.js +678 -0
package/oracle/module-sealer.js +5 -3
package/oracle/network-identity.js +16 -0
package/oracle/packet-checksum.js +201 -0
package/oracle/sst.js +579 -0
package/oracle/ternary-144t.js +714 -0
package/oracle/ternary-ml.js +481 -0
package/oracle/time-api.js +239 -0
package/oracle/time-source.js +137 -47
package/oracle/validation-oracle-hardened.js +1111 -1071
package/oracle/validation-oracle.js +4 -2
package/oracle/ypc27.js +211 -0
package/package.json +20 -3
package/protocol/yak-handler.js +35 -9
package/protocol/yak-protocol.js +28 -13
package/reference/cpp/yakmesh_mceliece_shard.cpp +168 -0
package/reference/cpp/yakmesh_ypc27.cpp +179 -0
package/sbom.json +87 -0
package/scripts/security-audit.mjs +264 -0
package/scripts/update-docs-nav.js +194 -0
package/scripts/update-docs-sidebar.cjs +164 -0
package/security/crypto-config.js +4 -3
package/security/dharma-moderation.js +517 -0
package/security/doko-identity.js +193 -143
package/security/domain-consensus.js +86 -85
package/security/fs-hardening.js +620 -0
package/security/hardware-attestation.js +5 -3
package/security/hybrid-trust.js +227 -87
package/security/karma-rate-limiter.js +692 -0
package/security/khata-protocol.js +22 -21
package/security/khata-trust-integration.js +277 -150
package/security/memory-safety.js +635 -0
package/security/mesh-auth.js +11 -10
package/security/mesh-revocation.js +373 -5
package/security/namche-gateway.js +298 -69
package/security/sakshi.js +460 -3
package/security/sangha.js +770 -0
package/security/secure-config.js +473 -0
package/security/silicon-parity.js +13 -10
package/security/steadywatch.js +1142 -0
package/security/strike-system.js +32 -3
package/security/temporal-signing.js +488 -0
package/security/trit-commitment.js +464 -0
package/server/crypto/annex.js +247 -0
package/server/darshan-api.js +343 -0
package/server/index.js +3259 -362
package/server/komm-api.js +668 -0
package/utils/accel.js +2273 -0
package/utils/ternary-id.js +79 -0
package/utils/verify-worker.js +57 -0
package/webserver/index.js +95 -5
package/assets/yakmesh-logo.png +0 -0
package/assets/yakmesh-logo.svg +0 -80
package/assets/yakmesh-logo2.png +0 -0
package/assets/yakmesh-logo2sm.png +0 -0
package/assets/ymsm.png +0 -0
package/website/assets/silhouettes/adapters.svg +0 -107
package/website/assets/silhouettes/api-endpoints.svg +0 -115
package/website/assets/silhouettes/atomic-clock.svg +0 -83
package/website/assets/silhouettes/base-camp.svg +0 -81
package/website/assets/silhouettes/bridge.svg +0 -69
package/website/assets/silhouettes/docs-bundle.svg +0 -113
package/website/assets/silhouettes/doko-basket.svg +0 -70
package/website/assets/silhouettes/fortress.svg +0 -93
package/website/assets/silhouettes/gateway.svg +0 -54
package/website/assets/silhouettes/gears.svg +0 -93
package/website/assets/silhouettes/globe-satellite.svg +0 -67
package/website/assets/silhouettes/karma-wheel.svg +0 -137
package/website/assets/silhouettes/lama-council.svg +0 -141
package/website/assets/silhouettes/mandala-network.svg +0 -169
package/website/assets/silhouettes/mani-stones.svg +0 -149
package/website/assets/silhouettes/mantra-wheel.svg +0 -116
package/website/assets/silhouettes/mesh-nodes.svg +0 -113
package/website/assets/silhouettes/nakpak.svg +0 -56
package/website/assets/silhouettes/peak-lightning.svg +0 -73
package/website/assets/silhouettes/sherpa.svg +0 -69
package/website/assets/silhouettes/stupa-tower.svg +0 -119
package/website/assets/silhouettes/tattva-eye.svg +0 -78
package/website/assets/silhouettes/terminal.svg +0 -74
package/website/assets/silhouettes/webserver.svg +0 -145
package/website/assets/silhouettes/yak.svg +0 -78
package/website/assets/yakmesh-logo.png +0 -0
package/website/assets/yakmesh-logo.webp +0 -0
package/website/assets/yakmesh-logo128x140.webp +0 -0
package/website/assets/yakmesh-logo2.png +0 -0
package/website/assets/yakmesh-logo2.svg +0 -51
package/website/assets/yakmesh-logo40x44.webp +0 -0
package/website/assets/yakmesh.gif +0 -0
package/website/assets/yakmesh.ico +0 -0
package/website/assets/yakmesh.jpg +0 -0
package/website/assets/yakmesh.pdf +0 -0
package/website/assets/yakmesh.png +0 -0
package/website/assets/yakmesh.svg +0 -70
package/website/assets/yakmesh128.webp +0 -0
package/website/assets/yakmesh32.png +0 -0
package/website/assets/yakmesh32.svg +0 -65
package/website/assets/yakmesh32o.ico +0 -2
package/website/assets/yakmesh32o.svg +0 -65
package/website/assets/yakmesh32o.svgz +0 -0

package/docs/tutorials/dashboard.html ADDED Viewed

@@ -0,0 +1,604 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="tutorials">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../favicon.ico" sizes="32x32">
+    <link rel="icon" href="../icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="../apple-touch-icon.png">
+    <title>Understanding the Dashboard - YAKMESH Tutorials</title>
+    <meta name="description" content="Learn what each metric and indicator means on the YAKMESH dashboard. Understand node status, peer connections, time sync, and content storage in plain English.">
+    <link rel="stylesheet" href="../tailwind.min.css">
+    <link rel="stylesheet" href="../prism-tomorrow.min.css">
+    <link rel="stylesheet" href="../docs.css">
+    <style>
+        .theme-accent { color: #10b981; }
+        .theme-badge { background: rgba(16, 185, 129, 0.2); color: #34d399; }
+        .tutorial-card { background: rgba(30, 41, 59, 0.5); border: 1px solid #334155; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; }
+        .tutorial-card:hover { border-color: #10b981; }
+        .step-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: #10b981; color: white; border-radius: 50%; font-weight: bold; margin-right: 0.75rem; }
+        .warning-box { background: rgba(251, 191, 36, 0.1); border: 1px solid #fbbf24; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; }
+        .tip-box { background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; }
+        .info-box { background: rgba(59, 130, 246, 0.1); border: 1px solid #3b82f6; border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; }
+        .status-green { color: #22c55e; }
+        .status-yellow { color: #eab308; }
+        .status-red { color: #ef4444; }
+        .metric-box { background: rgba(15, 23, 42, 0.6); border-radius: 0.5rem; padding: 1rem; margin: 0.5rem 0; }
+        .indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
+        .indicator-green { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
+        .indicator-yellow { background: #eab308; box-shadow: 0 0 8px #eab308; }
+        .indicator-red { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
+    </style>
+</head>
+<body class="bg-mountain-900 text-white min-h-screen">
+  <nav class="docs-sidebar" id="sidebar">
+    <a href="../index.html" class="sidebar-logo">
+      <span class="logo-icon">🏔️</span>
+      <span class="logo-text">Yakmesh</span>
+    </a>
+    <a href="/dashboard" class="sidebar-dashboard-link"><span>📊</span> <span>Dashboard</span></a>
+    <ul class="sidebar-nav">
+      <li><a href="../index.html"><span>🏠</span> <span>Overview</span></a></li>
+      <li><a href="../getting-started.html"><span>🚀</span> <span>Getting Started</span></a></li>
+      <li><a href="../tutorials.html"><span>📖</span> <span>Tutorials</span></a></li>
+      <li><a href="../yak-protocol.html"><span class="yak-icon"></span> <span>YAK://</span></a></li>
+      <li><a href="../annex.html"><span>🌉</span> <span>ANNEX</span></a></li>
+      <li><a href="../nakpak.html"><span>🎒</span> <span>NAKPAK</span></a></li>
+      <li><a href="../namche.html"><span>🚪</span> <span>NAMCHE</span></a></li>
+      <li><a href="../doko.html"><span>🧺</span> <span>DOKO</span></a></li>
+      <li><a href="../sherpa.html"><span>🧗</span> <span>SHERPA</span></a></li>
+      <li><a href="../mandala.html"><span>🌐</span> <span>MANDALA</span></a></li>
+      <li><a href="../mantra.html"><span>🕉️</span> <span>MANTRA</span></a></li>
+      <li><a href="../gumba.html"><span>🛕</span> <span>GUMBA</span></a></li>
+      <li><a href="../yurt.html"><span>🏕️</span> <span>YURT</span></a></li>
+      <li><a href="../katha.html"><span>💬</span> <span>KATHA</span></a></li>
+      <li><a href="../vani.html"><span>🎙️</span> <span>VANI</span></a></li>
+      <li><a href="../darshan.html"><span>👁️</span> <span>DARSHAN</span></a></li>
+      <li><a href="../stupa.html"><span>🛕</span> <span>STUPA</span></a></li>
+      <li><a href="../lama.html"><span>🔮</span> <span>LAMA</span></a></li>
+      <li><a href="../mani.html"><span>⏱️</span> <span>MANI</span></a></li>
+      <li><a href="../karma.html"><span>☯️</span> <span>KARMA</span></a></li>
+      <li><a href="../tattva.html"><span>🔯</span> <span>TATTVA</span></a></li>
+      <li><a href="../tribhuj.html"><span>🔺</span> <span>TRIBHUJ</span></a></li>
+      <li><a href="../ypc27.html"><span>🔐</span> <span>YPC-27</span></a></li>
+      <li><a href="../sakshi.html"><span>👁️</span> <span>SAKSHI</span></a></li>
+      <li><a href="../geo-proof.html"><span>🌍</span> <span>PRAMAAN</span></a></li>
+      <li><a href="../trust-security.html"><span>🔒</span> <span>SURAKSHA</span></a></li>
+      <li><a href="../docs-bundle.html"><span>📚</span> <span>GRANTH</span></a></li>
+      <li><a href="../api.html"><span>📡</span> <span>API</span></a></li>
+      <li><a href="../adapters.html"><span>🔌</span> <span>Adapters</span></a></li>
+      <li><a href="../studio.html"><span>🎨</span> <span>Studio</span></a></li>
+      <li><a href="../quick-reference.html"><span>📋</span> <span>Quick Ref</span></a></li>
+    </ul>
+  </nav>
+  <button class="sidebar-toggle" id="sidebarToggle" title="Toggle sidebar">☰</button>
+  <div class="sidebar-overlay" id="sidebarOverlay"></div>
+  <main class="docs-main" id="mainContent">
+    <div class="docs-content">
+      <div class="mb-6">
+        <a href="../tutorials.html" class="theme-accent hover:underline">← Back to Tutorials</a>
+      </div>
+      <!-- Header -->
+      <header class="mb-8">
+        <div class="flex items-center gap-3 mb-4">
+          <span class="text-4xl">📊</span>
+          <div>
+            <h1 class="text-3xl font-bold">Understanding the Dashboard</h1>
+            <p class="text-gray-400">Learn what each metric means and how to interpret health indicators</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-4 text-sm text-gray-400">
+          <span class="theme-badge px-3 py-1 rounded-full">Beginner</span>
+          <span>⏱️ 8 min read</span>
+          <span>📊 Node Monitoring</span>
+        </div>
+      </header>
+      <!-- Introduction -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4 theme-accent">What You'll Learn</h2>
+        <p class="text-gray-300 mb-4">
+          The YAKMESH dashboard is your window into how your node is performing on the mesh network.
+          This tutorial explains every section of the dashboard in plain English, so you'll know exactly
+          what's happening with your node at a glance.
+        </p>
+        <ul class="list-disc list-inside text-gray-300 space-y-2">
+          <li>Understand the Node Status section</li>
+          <li>Read Peer Connection metrics</li>
+          <li>Interpret Time Sync information</li>
+          <li>Monitor Content Storage usage</li>
+          <li>Recognize health indicators (green/yellow/red)</li>
+        </ul>
+      </div>
+      <!-- Accessing the Dashboard -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">🖥️ Accessing the Dashboard</h2>
+        <p class="text-gray-300 mb-4">There are two ways to open your dashboard:</p>
+        <h3 class="font-semibold mt-4 mb-3 text-gray-200">Method 1: Web Browser</h3>
+        <p class="text-gray-300 mb-2">Open your browser and go to:</p>
+        <pre><code class="language-bash">http://localhost:8080</code></pre>
+        <p class="text-gray-300 mt-2 text-sm">(The port may differ if you configured a custom port)</p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Method 2: Command Line</h3>
+        <pre><code class="language-bash"># Open dashboard in default browser
+yakmesh dashboard
+# Or get a text-based summary
+yakmesh status --detailed</code></pre>
+      </div>
+      <!-- Section 1: Node Status -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">
+          <span class="step-number">1</span>
+          Node Status Section
+        </h2>
+        <p class="text-gray-300 mb-4">
+          This is the most important section - it tells you if your node is working properly.
+          You'll typically see it at the top of your dashboard.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Node ID</h3>
+        <div class="metric-box">
+          <code class="text-sm text-gray-400">Node ID: doko-node-qubit-lattice-pq-a7x9</code>
+        </div>
+        <p class="text-gray-300 mt-2">
+          <strong>What it means:</strong> This is your unique DOKO identity on the mesh network - a human-readable
+          identifier derived from your cryptographic keys. The format is <code>doko-<type>-<iO-name>-<short-id></code>.
+          It never changes unless you create a new identity.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Online Status</h3>
+        <div class="metric-box">
+          <span class="indicator indicator-green"></span>
+          <span class="status-green font-semibold">Online</span>
+          <span class="text-gray-400 ml-4">Uptime: 3d 14h 22m</span>
+        </div>
+        <p class="text-gray-300 mt-2 mb-4">
+          <strong>What it means:</strong> Shows whether your node is connected to the mesh network and how long
+          it's been running. The uptime resets when you restart YAKMESH.
+        </p>
+        <div class="space-y-3">
+          <div class="flex items-center">
+            <span class="indicator indicator-green"></span>
+            <span><strong class="status-green">Online</strong> - Your node is connected and working normally</span>
+          </div>
+          <div class="flex items-center">
+            <span class="indicator indicator-yellow"></span>
+            <span><strong class="status-yellow">Connecting</strong> - Your node is starting up or reconnecting</span>
+          </div>
+          <div class="flex items-center">
+            <span class="indicator indicator-red"></span>
+            <span><strong class="status-red">Offline</strong> - Your node can't reach the network (check your internet)</span>
+          </div>
+        </div>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Version</h3>
+        <div class="metric-box">
+          <code class="text-sm text-gray-400">Version: 0.9.4 (latest: 0.9.4) ✓</code>
+        </div>
+        <p class="text-gray-300 mt-2">
+          <strong>What it means:</strong> The YAKMESH software version running on your node.
+          A checkmark means you're up to date. If there's a newer version available, you'll see an update notification.
+        </p>
+      </div>
+      <!-- Section 2: Peer Connections -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">
+          <span class="step-number">2</span>
+          Peer Connections Section
+        </h2>
+        <p class="text-gray-300 mb-4">
+          This section shows how well your node is connected to other nodes in the mesh network.
+          More connections generally means better performance and reliability.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Connected Peers</h3>
+        <div class="metric-box">
+          <div class="flex justify-between items-center">
+            <span>Connected Peers</span>
+            <span class="text-2xl font-bold status-green">47</span>
+          </div>
+          <div class="w-full bg-gray-700 rounded-full h-2 mt-2">
+            <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>
+          </div>
+          <div class="text-sm text-gray-400 mt-1">Target: 60 peers</div>
+        </div>
+        <p class="text-gray-300 mt-3 mb-4">
+          <strong>What it means:</strong> The number of other YAKMESH nodes your computer is directly connected to.
+          Your node automatically maintains connections - you don't need to manage this manually.
+        </p>
+        <div class="space-y-2 text-sm">
+          <p><span class="status-green">● 40+ peers:</span> Excellent connectivity - your node is well-integrated</p>
+          <p><span class="status-yellow">● 10-39 peers:</span> Adequate - works fine but could be better</p>
+          <p><span class="status-red">● Less than 10:</span> Low connectivity - may experience slower transfers</p>
+        </div>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Peer Types Breakdown</h3>
+        <div class="metric-box">
+          <div class="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div class="text-lg font-bold">23</div>
+              <div class="text-xs text-gray-400">Direct</div>
+            </div>
+            <div>
+              <div class="text-lg font-bold">18</div>
+              <div class="text-xs text-gray-400">Relayed</div>
+            </div>
+            <div>
+              <div class="text-lg font-bold">6</div>
+              <div class="text-xs text-gray-400">Bootstrap</div>
+            </div>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What these mean:</strong>
+        </p>
+        <ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
+          <li><strong>Direct:</strong> Peers you can connect to without intermediaries - fastest connections</li>
+          <li><strong>Relayed:</strong> Peers reached through other nodes (when firewalls block direct connections)</li>
+          <li><strong>Bootstrap:</strong> Well-known nodes that help you find other peers when starting up</li>
+        </ul>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Bandwidth Usage</h3>
+        <div class="metric-box">
+          <div class="flex justify-between">
+            <div>
+              <span class="text-green-400">↓</span> Download
+              <div class="text-lg font-bold">1.2 MB/s</div>
+            </div>
+            <div class="text-right">
+              <span class="text-blue-400">↑</span> Upload
+              <div class="text-lg font-bold">856 KB/s</div>
+            </div>
+          </div>
+          <div class="text-xs text-gray-400 mt-2">Total today: ↓ 2.4 GB / ↑ 1.1 GB</div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> Current network speed being used by YAKMESH. Includes file transfers,
+          mesh protocol messages, and synchronization traffic.
+        </p>
+        <div class="tip-box mt-4">
+          <p class="text-sm"><strong>💡 Tip:</strong> If bandwidth is too high, you can set limits in your config:
+          <code class="bg-gray-800 px-2 py-1 rounded">yakmesh config set bandwidth.max_up 5mb</code></p>
+        </div>
+      </div>
+      <!-- Section 3: Time Sync (MANI) -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">
+          <span class="step-number">3</span>
+          Time Sync (MANI) Section
+        </h2>
+        <p class="text-gray-300 mb-4">
+          MANI is YAKMESH's time synchronization system. Accurate time is critical for security and
+          ensuring all nodes agree on when events happened.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Sync Status</h3>
+        <div class="metric-box">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center">
+              <span class="indicator indicator-green"></span>
+              <span class="font-semibold status-green">Synchronized</span>
+            </div>
+            <span class="text-gray-400">Drift: +2ms</span>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3 mb-4">
+          <strong>What it means:</strong> Whether your node's clock is in sync with the mesh network's consensus time.
+          The "drift" value shows how much your clock differs from network time.
+        </p>
+        <div class="space-y-2 text-sm">
+          <p><span class="status-green">● Drift under 50ms:</span> Excellent - your clock is accurate</p>
+          <p><span class="status-yellow">● Drift 50-500ms:</span> Acceptable - still works but consider syncing your system clock</p>
+          <p><span class="status-red">● Drift over 500ms:</span> Problem - some operations may fail; sync your system clock</p>
+        </div>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Time Sources</h3>
+        <div class="metric-box">
+          <div class="text-sm text-gray-300 space-y-1">
+            <div class="flex justify-between"><span>📡 Mesh Consensus</span><span class="status-green">Active (47 peers)</span></div>
+            <div class="flex justify-between"><span>🌐 NTP Fallback</span><span class="text-gray-400">Standby</span></div>
+            <div class="flex justify-between"><span>⏰ Local Clock</span><span class="text-gray-400">Reference</span></div>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> YAKMESH uses multiple sources to determine accurate time. The mesh consensus
+          is the primary method - your node asks many peers what time they think it is and calculates the truth.
+        </p>
+        <div class="info-box mt-4">
+          <p class="text-sm"><strong>ℹ️ Why time matters:</strong> Accurate time prevents replay attacks (someone
+          resending old messages), ensures correct ordering of events, and is required for cryptographic
+          operations. If time sync fails, some features may be temporarily disabled for security.</p>
+        </div>
+      </div>
+      <!-- Section 4: Content Storage (DOKO) -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">
+          <span class="step-number">4</span>
+          Content Storage (DOKO) Section
+        </h2>
+        <p class="text-gray-300 mb-4">
+          This section shows what content you're storing and sharing through the DOKO system.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Storage Overview</h3>
+        <div class="metric-box">
+          <div class="flex justify-between items-center mb-2">
+            <span>Used Space</span>
+            <span class="font-bold">4.7 GB / 50 GB</span>
+          </div>
+          <div class="w-full bg-gray-700 rounded-full h-3">
+            <div class="bg-emerald-500 h-3 rounded-full" style="width: 9.4%"></div>
+          </div>
+          <div class="text-xs text-gray-400 mt-1">9.4% of allocated storage</div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> How much disk space YAKMESH is using for stored content.
+          This includes files you're sharing and any content you've chosen to help host for the network.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Content Breakdown</h3>
+        <div class="metric-box">
+          <div class="space-y-2 text-sm">
+            <div class="flex justify-between">
+              <span>📤 Your Shares</span>
+              <span>3.2 GB (12 items)</span>
+            </div>
+            <div class="flex justify-between">
+              <span>📥 Received Content</span>
+              <span>1.1 GB (8 items)</span>
+            </div>
+            <div class="flex justify-between">
+              <span>🌐 Hosted for Network</span>
+              <span>0.4 GB (156 chunks)</span>
+            </div>
+            <div class="flex justify-between text-gray-400">
+              <span>📦 Cache</span>
+              <span>0.1 GB</span>
+            </div>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What these mean:</strong>
+        </p>
+        <ul class="list-disc list-inside text-gray-300 space-y-2 mt-2">
+          <li><strong>Your Shares:</strong> Files and folders you're actively sharing with others</li>
+          <li><strong>Received Content:</strong> Files you've downloaded from other nodes</li>
+          <li><strong>Hosted for Network:</strong> Content chunks you're storing to help the mesh (optional)</li>
+          <li><strong>Cache:</strong> Temporary data that speeds up repeated accesses</li>
+        </ul>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">Active Shares</h3>
+        <div class="metric-box">
+          <div class="text-sm space-y-2">
+            <div class="flex justify-between items-center">
+              <span>vacation-photos</span>
+              <span class="text-xs text-gray-400">234 MB • 2 downloads</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span>project-files</span>
+              <span class="text-xs text-gray-400">1.8 GB • 0 downloads</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-yellow-400">work-docs (expires 2d)</span>
+              <span class="text-xs text-gray-400">45 MB • 3/5 downloads</span>
+            </div>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> A quick list of your active file shares. Yellow items are expiring soon.
+        </p>
+      </div>
+      <!-- Section 5: Additional Metrics -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">
+          <span class="step-number">5</span>
+          Additional Metrics
+        </h2>
+        <p class="text-gray-300 mb-4">
+          Your dashboard may show additional information depending on what features you're using.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">KARMA Score</h3>
+        <div class="metric-box">
+          <div class="flex items-center justify-between">
+            <span>Your Karma Score</span>
+            <span class="text-2xl font-bold theme-accent">847</span>
+          </div>
+          <div class="text-xs text-gray-400 mt-1">Top 15% of network</div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> Your reputation on the mesh network. Higher karma means you're a reliable
+          participant - you keep your node online, help host content, and complete transfers successfully. Some features
+          may require a minimum karma score.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">NAMCHE Gateway Status</h3>
+        <div class="metric-box">
+          <div class="flex items-center">
+            <span class="indicator indicator-green"></span>
+            <span>NAT Traversal: <strong class="status-green">Full Cone</strong></span>
+          </div>
+          <div class="text-xs text-gray-400 mt-1">Direct connections available</div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> NAMCHE helps your node be reachable even behind routers and firewalls.
+          "Full Cone" is ideal - it means others can connect to you directly. "Symmetric NAT" is harder but still works.
+        </p>
+        <h3 class="font-semibold mt-6 mb-3 text-gray-200">SHERPA Services</h3>
+        <div class="metric-box">
+          <div class="text-sm space-y-1">
+            <div class="flex justify-between">
+              <span>Discovery Service</span>
+              <span class="status-green">Running</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Relay Service</span>
+              <span class="text-gray-400">Disabled</span>
+            </div>
+            <div class="flex justify-between">
+              <span>Bootstrap Service</span>
+              <span class="text-gray-400">Disabled</span>
+            </div>
+          </div>
+        </div>
+        <p class="text-gray-300 mt-3">
+          <strong>What it means:</strong> SHERPA services you might be running to help other nodes. Discovery helps
+          others find peers, Relay assists nodes behind difficult NATs, and Bootstrap helps new nodes join.
+        </p>
+      </div>
+      <!-- Health Indicators -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">🚦 Understanding Health Indicators</h2>
+        <p class="text-gray-300 mb-4">
+          Throughout the dashboard, you'll see colored indicators. Here's what each color means:
+        </p>
+        <div class="space-y-4">
+          <div class="metric-box">
+            <div class="flex items-center mb-2">
+              <span class="indicator indicator-green"></span>
+              <span class="font-semibold status-green">Green - Healthy</span>
+            </div>
+            <p class="text-sm text-gray-300">
+              Everything is working as expected. No action needed.
+            </p>
+          </div>
+          <div class="metric-box">
+            <div class="flex items-center mb-2">
+              <span class="indicator indicator-yellow"></span>
+              <span class="font-semibold status-yellow">Yellow - Warning</span>
+            </div>
+            <p class="text-sm text-gray-300">
+              Something needs attention but isn't critical. Your node still works, but performance might be affected.
+              Common causes: low peer count, time drift, storage almost full.
+            </p>
+          </div>
+          <div class="metric-box">
+            <div class="flex items-center mb-2">
+              <span class="indicator indicator-red"></span>
+              <span class="font-semibold status-red">Red - Critical</span>
+            </div>
+            <p class="text-sm text-gray-300">
+              A serious issue needs immediate attention. Some features may not work.
+              Common causes: offline, severe time desync, disk full, authentication errors.
+            </p>
+          </div>
+        </div>
+        <div class="tip-box mt-4">
+          <p class="text-sm"><strong>💡 Tip:</strong> Click on any yellow or red indicator to see suggested fixes.
+          Most issues resolve automatically or have simple solutions.</p>
+        </div>
+      </div>
+      <!-- Command Line Alternative -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4">⌨️ Command Line Dashboard</h2>
+        <p class="text-gray-300 mb-4">
+          If you prefer the terminal, you can get all this information via commands:
+        </p>
+        <pre><code class="language-bash"># Quick status overview
+yakmesh status
+# Detailed status with all sections
+yakmesh status --detailed
+# Just peer information
+yakmesh peers
+# Just storage information
+yakmesh doko status
+# Time sync status
+yakmesh mani status
+# Watch live updates (refreshes every 2 seconds)
+yakmesh status --watch</code></pre>
+        <p class="text-gray-300 mt-4">
+          Example output from <code class="bg-gray-800 px-2 py-1 rounded">yakmesh status</code>:
+        </p>
+        <pre><code class="language-bash">🏔️ YAKMESH Node Status
+═══════════════════════════════════════
+Node ID:    doko-node-qubit-lattice-pq-a7x9
+Status:     🟢 Online (uptime: 3d 14h 22m)
+Version:    0.9.4 ✓
+Peers:      47 connected (23 direct, 18 relayed)
+Bandwidth:  ↓ 1.2 MB/s  ↑ 856 KB/s
+Time Sync:  🟢 Synchronized (drift: +2ms)
+Storage:    4.7 GB / 50 GB (9.4%)
+Karma:      847 (top 15%)</code></pre>
+      </div>
+      <!-- Summary -->
+      <div class="tutorial-card">
+        <h2 class="text-xl font-semibold mb-4 theme-accent">🎉 Summary</h2>
+        <p class="text-gray-300 mb-4">
+          You now understand all the major sections of the YAKMESH dashboard:
+        </p>
+        <ul class="list-disc list-inside text-gray-300 space-y-2">
+          <li><strong>Node Status:</strong> Is your node running and up to date?</li>
+          <li><strong>Peer Connections:</strong> How well are you connected to the mesh?</li>
+          <li><strong>Time Sync:</strong> Is your clock accurate for secure operations?</li>
+          <li><strong>Content Storage:</strong> What are you sharing and storing?</li>
+          <li><strong>Health Indicators:</strong> Green = good, Yellow = check it, Red = fix it</li>
+        </ul>
+        <p class="text-gray-300 mt-4">
+          Check your dashboard occasionally to ensure your node is healthy. Most of the time, everything runs
+          automatically - but knowing how to read these metrics helps you troubleshoot if something goes wrong.
+        </p>
+      </div>
+      <!-- Navigation Footer -->
+      <div class="border-t border-mountain-700 mt-12 pt-8">
+        <div class="flex flex-col sm:flex-row gap-4">
+          <a href="share-files.html" class="flex-1 block bg-mountain-800 border border-mountain-700 rounded-xl p-4 hover:border-emerald-500 transition group">
+            <div class="text-xs text-mountain-400 mb-1">← Previous</div>
+            <div class="flex items-center gap-2">
+              <span class="text-xl">📤</span>
+              <span class="font-semibold group-hover:text-emerald-400">Share Files with Friends</span>
+            </div>
+          </a>
+          <a href="backup-recovery.html" class="flex-1 block bg-mountain-800 border border-mountain-700 rounded-xl p-4 hover:border-emerald-500 transition group">
+            <div class="text-xs text-mountain-400 mb-1">Next →</div>
+            <div class="flex items-center gap-2">
+              <span class="text-xl">💾</span>
+              <span class="font-semibold group-hover:text-emerald-400">Backup & Recovery</span>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script src="../prism.min.js"></script>
+  <script src="../prism-javascript.min.js"></script>
+  <script src="../prism-bash.min.js"></script>
+  <script src="../docs.js"></script>
+</body>
+</html>