npm - @hitechclaw/clawspark - Versions diffs - 2.0.0 - Mend

@hitechclaw/clawspark 2.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 (49) hide show

package/CHANGELOG.md +35 -0
package/LICENSE +21 -0
package/README.md +378 -0
package/clawspark +2715 -0
package/configs/models.yaml +108 -0
package/configs/skill-packs.yaml +44 -0
package/configs/skills.yaml +37 -0
package/install.sh +387 -0
package/lib/common.sh +249 -0
package/lib/detect-hardware.sh +156 -0
package/lib/diagnose.sh +636 -0
package/lib/render-diagram.sh +47 -0
package/lib/sandbox-commands.sh +415 -0
package/lib/secure.sh +244 -0
package/lib/select-model.sh +442 -0
package/lib/setup-browser.sh +138 -0
package/lib/setup-dashboard.sh +228 -0
package/lib/setup-inference.sh +128 -0
package/lib/setup-mcp.sh +142 -0
package/lib/setup-messaging.sh +242 -0
package/lib/setup-models.sh +121 -0
package/lib/setup-openclaw.sh +808 -0
package/lib/setup-sandbox.sh +188 -0
package/lib/setup-skills.sh +113 -0
package/lib/setup-systemd.sh +224 -0
package/lib/setup-tailscale.sh +188 -0
package/lib/setup-voice.sh +101 -0
package/lib/skill-audit.sh +449 -0
package/lib/verify.sh +177 -0
package/package.json +57 -0
package/scripts/release.sh +133 -0
package/uninstall.sh +161 -0
package/v2/README.md +50 -0
package/v2/configs/providers.yaml +79 -0
package/v2/configs/skills.yaml +36 -0
package/v2/install.sh +116 -0
package/v2/lib/common.sh +285 -0
package/v2/lib/detect-hardware.sh +119 -0
package/v2/lib/select-runtime.sh +273 -0
package/v2/lib/setup-extras.sh +95 -0
package/v2/lib/setup-openclaw.sh +187 -0
package/v2/lib/setup-provider.sh +131 -0
package/v2/lib/verify.sh +133 -0
package/web/index.html +1835 -0
package/web/install.sh +387 -0
package/web/logo-hero.svg +11 -0
package/web/logo-icon.svg +12 -0
package/web/logo.svg +17 -0
package/web/vercel.json +8 -0

package/web/index.html ADDED Viewed

@@ -0,0 +1,1835 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Clawspark - One Command. Private AI Agent. Your Hardware.</title>
+  <meta name="description" content="One-click installer for a fully private AI agent on your own hardware. Code, research, browse the web, analyze images, and automate tasks on DGX Spark, RTX GPUs, Mac, or Jetson. No cloud. No API keys. No data leaves your machine.">
+  <link rel="icon" type="image/svg+xml" href="logo-icon.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: #0a0a0a;
+      color: #e0e0e0;
+      line-height: 1.6;
+      overflow-x: hidden;
+    }
+    /* Utility */
+    .container {
+      max-width: 1140px;
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+    a {
+      color: #76b900;
+      text-decoration: none;
+      transition: color 0.2s ease;
+    }
+    a:hover {
+      color: #8ed600;
+    }
+    /* Navigation */
+    nav {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 100;
+      background: rgba(10, 10, 10, 0.85);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border-bottom: 1px solid rgba(118, 185, 0, 0.1);
+      padding: 16px 0;
+    }
+    nav .container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    nav .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 1.25rem;
+      font-weight: 800;
+      color: #76b900;
+      letter-spacing: -0.02em;
+    }
+    nav .logo img {
+      height: 32px;
+      width: 32px;
+    }
+    nav .nav-links {
+      display: flex;
+      gap: 28px;
+      list-style: none;
+    }
+    nav .nav-links a {
+      color: #999;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: color 0.2s ease;
+    }
+    nav .nav-links a:hover {
+      color: #fff;
+    }
+    /* Fade-in animation */
+    .fade-in {
+      opacity: 0;
+      transform: translateY(30px);
+      transition: opacity 0.7s ease, transform 0.7s ease;
+    }
+    .fade-in.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    /* Section styling */
+    section {
+      padding: 100px 0;
+    }
+    .section-title {
+      font-size: 2.25rem;
+      font-weight: 800;
+      color: #fff;
+      margin-bottom: 16px;
+      letter-spacing: -0.03em;
+    }
+    .section-subtitle {
+      font-size: 1.1rem;
+      color: #888;
+      margin-bottom: 56px;
+      max-width: 560px;
+    }
+    /* ===================== */
+    /* HERO                  */
+    /* ===================== */
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding-top: 80px;
+      position: relative;
+      background:
+        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(118, 185, 0, 0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 50% 50% at 80% 80%, rgba(255, 107, 53, 0.04) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .hero-content {
+      max-width: 740px;
+    }
+    .hero-badge {
+      display: inline-block;
+      padding: 6px 16px;
+      border: 1px solid rgba(118, 185, 0, 0.3);
+      border-radius: 100px;
+      font-size: 0.8rem;
+      font-weight: 500;
+      color: #76b900;
+      margin-bottom: 32px;
+      background: rgba(118, 185, 0, 0.06);
+    }
+    .hero-title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      margin-bottom: 20px;
+    }
+    .hero-title img {
+      width: clamp(60px, 10vw, 90px);
+      height: clamp(60px, 10vw, 90px);
+    }
+    .hero h1 {
+      font-size: clamp(3.5rem, 8vw, 6rem);
+      font-weight: 900;
+      letter-spacing: -0.04em;
+      line-height: 1;
+      color: #fff;
+      margin-bottom: 0;
+      text-shadow:
+        0 0 80px rgba(118, 185, 0, 0.3),
+        0 0 160px rgba(118, 185, 0, 0.1);
+    }
+    .hero h1 .accent {
+      background: linear-gradient(135deg, #76b900, #8ed600);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero .tagline {
+      font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+      font-weight: 400;
+      color: #bbb;
+      margin-bottom: 16px;
+      letter-spacing: -0.01em;
+    }
+    .hero .description {
+      font-size: 1rem;
+      color: #777;
+      max-width: 520px;
+      margin: 0 auto 40px;
+      line-height: 1.7;
+    }
+    /* Code block (terminal style) */
+    .code-block {
+      position: relative;
+      background: #111;
+      border: 1px solid #222;
+      border-radius: 12px;
+      padding: 20px 24px;
+      margin: 0 auto;
+      max-width: 600px;
+      text-align: left;
+      overflow: hidden;
+    }
+    .code-block::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(118, 185, 0, 0.3), transparent);
+    }
+    .code-block .terminal-dots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 14px;
+    }
+    .code-block .terminal-dots span {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: block;
+    }
+    .code-block .terminal-dots span:nth-child(1) { background: #ff5f57; }
+    .code-block .terminal-dots span:nth-child(2) { background: #ffbd2e; }
+    .code-block .terminal-dots span:nth-child(3) { background: #28ca41; }
+    .code-block code {
+      font-family: 'JetBrains Mono', 'Fira Code', monospace;
+      font-size: 0.9rem;
+      color: #76b900;
+      word-break: break-all;
+      display: block;
+      line-height: 1.6;
+    }
+    .code-block code .prompt {
+      color: #ff6b35;
+    }
+    .copy-btn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid #333;
+      color: #888;
+      padding: 6px 14px;
+      border-radius: 6px;
+      font-size: 0.75rem;
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .copy-btn:hover {
+      background: rgba(118, 185, 0, 0.1);
+      border-color: #76b900;
+      color: #76b900;
+    }
+    .copy-btn.copied {
+      background: rgba(118, 185, 0, 0.15);
+      border-color: #76b900;
+      color: #76b900;
+    }
+    /* ===================== */
+    /* FEATURES              */
+    /* ===================== */
+    .features {
+      background:
+        radial-gradient(ellipse 50% 30% at 20% 50%, rgba(118, 185, 0, 0.04) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+    }
+    .feature-card {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid #1a1a1a;
+      border-radius: 16px;
+      padding: 32px 28px;
+      transition: all 0.3s ease;
+    }
+    .feature-card:hover {
+      border-color: rgba(118, 185, 0, 0.2);
+      background: rgba(118, 185, 0, 0.03);
+      transform: translateY(-2px);
+    }
+    .feature-icon {
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      font-size: 1.3rem;
+      background: rgba(118, 185, 0, 0.1);
+      color: #76b900;
+    }
+    .feature-card:nth-child(even) .feature-icon {
+      background: rgba(255, 107, 53, 0.1);
+      color: #ff6b35;
+    }
+    .feature-card h3 {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 10px;
+      letter-spacing: -0.01em;
+    }
+    .feature-card p {
+      font-size: 0.9rem;
+      color: #777;
+      line-height: 1.6;
+    }
+    /* ===================== */
+    /* SECURITY              */
+    /* ===================== */
+    .security {
+      background:
+        radial-gradient(ellipse 50% 35% at 70% 40%, rgba(118, 185, 0, 0.05) 0%, transparent 60%),
+        radial-gradient(ellipse 40% 30% at 20% 70%, rgba(255, 107, 53, 0.03) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .security-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
+    }
+    .security-item {
+      display: flex;
+      gap: 18px;
+      align-items: flex-start;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid #1a1a1a;
+      border-radius: 16px;
+      padding: 28px 24px;
+      transition: all 0.3s ease;
+    }
+    .security-item:hover {
+      border-color: rgba(118, 185, 0, 0.2);
+      background: rgba(118, 185, 0, 0.03);
+      transform: translateY(-2px);
+    }
+    .security-icon {
+      flex-shrink: 0;
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(118, 185, 0, 0.1);
+      color: #76b900;
+    }
+    .security-item:nth-child(even) .security-icon {
+      background: rgba(255, 107, 53, 0.1);
+      color: #ff6b35;
+    }
+    .security-content h3 {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 6px;
+      letter-spacing: -0.01em;
+    }
+    .security-content p {
+      font-size: 0.9rem;
+      color: #777;
+      line-height: 1.6;
+    }
+    /* ===================== */
+    /* ARCHITECTURE          */
+    /* ===================== */
+    .architecture {
+      background:
+        radial-gradient(ellipse 50% 40% at 50% 30%, rgba(118, 185, 0, 0.04) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .architecture .section-subtitle {
+      max-width: 600px;
+    }
+    .arch-diagram {
+      position: relative;
+      background: #111;
+      border: 1px solid #222;
+      border-radius: 12px;
+      padding: 20px 24px 28px;
+      margin: 0 auto 48px;
+      max-width: 620px;
+      overflow: hidden;
+    }
+    .arch-diagram::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(118, 185, 0, 0.3), transparent);
+    }
+    .arch-diagram .terminal-dots {
+      display: flex;
+      gap: 6px;
+      margin-bottom: 14px;
+    }
+    .arch-diagram .terminal-dots span {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: block;
+    }
+    .arch-diagram .terminal-dots span:nth-child(1) { background: #ff5f57; }
+    .arch-diagram .terminal-dots span:nth-child(2) { background: #ffbd2e; }
+    .arch-diagram .terminal-dots span:nth-child(3) { background: #28ca41; }
+    .arch-diagram pre {
+      font-family: 'JetBrains Mono', 'Fira Code', monospace;
+      font-size: 0.82rem;
+      line-height: 1.55;
+      color: #999;
+      overflow-x: auto;
+    }
+    .arch-diagram pre .arch-highlight {
+      color: #76b900;
+      font-weight: 500;
+    }
+    .arch-diagram pre .arch-accent {
+      color: #ff6b35;
+    }
+    .arch-diagram pre .arch-dim {
+      color: #555;
+    }
+    .arch-visual {
+      max-width: 680px;
+      margin: 0 auto 48px;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid #2a2a2a;
+      background: #0f0f0f;
+    }
+    .arch-layer {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      padding: 28px 24px 20px;
+    }
+    .arch-layer + .arch-layer {
+      border-top: 1px solid #222;
+    }
+    .arch-layer-label {
+      position: absolute;
+      top: 6px;
+      left: 14px;
+      font-size: 0.6rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: #555;
+    }
+    .arch-arrow {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 28px;
+      color: #444;
+      font-size: 0.75rem;
+      position: relative;
+    }
+    .arch-arrow::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 8px;
+      width: 1px;
+      background: linear-gradient(to bottom, #333, #76b900);
+      transform: translateX(-50%);
+    }
+    .arch-arrow::after {
+      content: '';
+      position: absolute;
+      bottom: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid #76b900;
+    }
+    .arch-node {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 3px;
+      padding: 10px 16px;
+      border-radius: 8px;
+      border: 1px solid #333;
+      background: #161616;
+      min-width: 90px;
+      text-align: center;
+      transition: all 0.25s ease;
+    }
+    .arch-node:hover {
+      border-color: #76b900;
+      background: rgba(118, 185, 0, 0.06);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 16px rgba(118, 185, 0, 0.1);
+    }
+    .arch-node-name {
+      font-size: 0.78rem;
+      font-weight: 600;
+      color: #ddd;
+      font-family: 'JetBrains Mono', monospace;
+    }
+    .arch-node-desc {
+      font-size: 0.65rem;
+      color: #666;
+    }
+    .arch-node.primary { border-color: rgba(118, 185, 0, 0.25); background: rgba(118, 185, 0, 0.04); }
+    .arch-node.primary .arch-node-name { color: #76b900; }
+    .arch-node.accent { border-color: rgba(255, 107, 53, 0.25); background: rgba(255, 107, 53, 0.04); }
+    .arch-node.accent .arch-node-name { color: #ff6b35; }
+    .arch-node.wide { flex: 1; max-width: 100%; }
+    @media (max-width: 640px) {
+      .arch-node { min-width: 75px; padding: 8px 10px; }
+      .arch-node-name { font-size: 0.7rem; }
+    }
+    .stat-boxes {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      max-width: 720px;
+      margin: 0 auto;
+    }
+    .stat-box {
+      text-align: center;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid #1a1a1a;
+      border-radius: 12px;
+      padding: 24px 16px;
+      transition: all 0.3s ease;
+    }
+    .stat-box:hover {
+      border-color: rgba(118, 185, 0, 0.2);
+      background: rgba(118, 185, 0, 0.03);
+      transform: translateY(-2px);
+    }
+    .stat-box .stat-value {
+      font-size: 1.5rem;
+      font-weight: 800;
+      color: #76b900;
+      letter-spacing: -0.02em;
+      margin-bottom: 4px;
+    }
+    .stat-box:nth-child(even) .stat-value {
+      color: #ff6b35;
+    }
+    .stat-box .stat-label {
+      font-size: 0.78rem;
+      color: #666;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    /* ===================== */
+    /* HARDWARE TABLE        */
+    /* ===================== */
+    .hardware {
+      background:
+        radial-gradient(ellipse 60% 30% at 80% 20%, rgba(255, 107, 53, 0.04) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .table-wrapper {
+      overflow-x: auto;
+      border-radius: 16px;
+      border: 1px solid #1a1a1a;
+      background: rgba(255, 255, 255, 0.01);
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 600px;
+    }
+    thead th {
+      text-align: left;
+      padding: 18px 24px;
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #666;
+      border-bottom: 1px solid #1a1a1a;
+      background: rgba(255, 255, 255, 0.02);
+    }
+    tbody td {
+      padding: 18px 24px;
+      font-size: 0.95rem;
+      border-bottom: 1px solid #111;
+      color: #ccc;
+    }
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+    tbody tr:hover {
+      background: rgba(118, 185, 0, 0.03);
+    }
+    .hw-name {
+      font-weight: 600;
+      color: #fff;
+    }
+    .hw-vram {
+      color: #76b900;
+      font-weight: 500;
+    }
+    .hw-perf {
+      font-weight: 500;
+    }
+    .perf-excellent { color: #76b900; }
+    .perf-great { color: #8ed600; }
+    .perf-good { color: #ff6b35; }
+    /* ===================== */
+    /* HOW IT WORKS          */
+    /* ===================== */
+    .how-it-works {
+      background:
+        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(118, 185, 0, 0.03) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .timeline {
+      position: relative;
+      max-width: 600px;
+      margin: 0 auto;
+      padding-left: 48px;
+    }
+    .timeline::before {
+      content: '';
+      position: absolute;
+      left: 15px;
+      top: 8px;
+      bottom: 8px;
+      width: 2px;
+      background: linear-gradient(to bottom, #76b900, rgba(255, 107, 53, 0.6), #76b900);
+      border-radius: 2px;
+    }
+    .timeline-step {
+      position: relative;
+      margin-bottom: 36px;
+    }
+    .timeline-step:last-child {
+      margin-bottom: 0;
+    }
+    .timeline-dot {
+      position: absolute;
+      left: -41px;
+      top: 4px;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: #0a0a0a;
+      border: 2px solid #76b900;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .timeline-dot::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #76b900;
+    }
+    .timeline-step:last-child .timeline-dot {
+      border-color: #ff6b35;
+    }
+    .timeline-step:last-child .timeline-dot::after {
+      background: #ff6b35;
+    }
+    .timeline-step h4 {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 4px;
+    }
+    .timeline-step .step-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #76b900;
+      margin-bottom: 6px;
+    }
+    .timeline-step p {
+      font-size: 0.9rem;
+      color: #777;
+      line-height: 1.5;
+    }
+    /* ===================== */
+    /* TOOLS INSTALLED       */
+    /* ===================== */
+    .tools-section {
+      background:
+        radial-gradient(ellipse 50% 35% at 30% 40%, rgba(118, 185, 0, 0.04) 0%, transparent 60%),
+        radial-gradient(ellipse 40% 30% at 80% 70%, rgba(255, 107, 53, 0.03) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .tools-groups {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+    }
+    .tools-group {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid #1a1a1a;
+      border-radius: 16px;
+      padding: 32px 28px;
+      transition: all 0.3s ease;
+    }
+    .tools-group:hover {
+      border-color: rgba(118, 185, 0, 0.15);
+      background: rgba(118, 185, 0, 0.02);
+    }
+    .tools-group-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid #1a1a1a;
+    }
+    .tools-group-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .tools-group-icon.green {
+      background: rgba(118, 185, 0, 0.1);
+      color: #76b900;
+    }
+    .tools-group-icon.orange {
+      background: rgba(255, 107, 53, 0.1);
+      color: #ff6b35;
+    }
+    .tools-group-icon.grey {
+      background: rgba(255, 255, 255, 0.06);
+      color: #999;
+    }
+    .tools-group-header h3 {
+      font-size: 1rem;
+      font-weight: 700;
+      color: #fff;
+      letter-spacing: -0.01em;
+    }
+    .tools-list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .tools-list.scrollable {
+      max-height: 182px;
+      overflow-y: auto;
+      padding-right: 6px;
+      mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
+      -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
+    }
+    .tools-list.scrollable::-webkit-scrollbar {
+      width: 4px;
+    }
+    .tools-list.scrollable::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .tools-list.scrollable::-webkit-scrollbar-thumb {
+      background: rgba(118, 185, 0, 0.3);
+      border-radius: 4px;
+    }
+    .tools-list.scrollable::-webkit-scrollbar-thumb:hover {
+      background: rgba(118, 185, 0, 0.5);
+    }
+    .tools-scroll-hint {
+      text-align: center;
+      font-size: 0.75rem;
+      color: #555;
+      margin-top: 8px;
+      letter-spacing: 0.03em;
+    }
+    .tools-list li {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      font-size: 0.9rem;
+      color: #999;
+      line-height: 1.5;
+    }
+    .tool-bullet {
+      flex-shrink: 0;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin-top: 7px;
+    }
+    .tool-bullet.green {
+      background: #76b900;
+    }
+    .tool-bullet.orange {
+      background: #ff6b35;
+    }
+    .tool-bullet.grey {
+      background: #666;
+    }
+    .tools-list .tool-name {
+      color: #fff;
+      font-weight: 600;
+    }
+    .tools-list .tool-cmd {
+      font-family: 'JetBrains Mono', 'Fira Code', monospace;
+      font-size: 0.82rem;
+      color: #76b900;
+      background: rgba(118, 185, 0, 0.08);
+      padding: 1px 6px;
+      border-radius: 4px;
+    }
+    .tool-desc {
+      color: #666;
+      font-size: 0.82rem;
+    }
+    /* ===================== */
+    /* INSTALL SECTION       */
+    /* ===================== */
+    .install-section {
+      text-align: center;
+      background:
+        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(118, 185, 0, 0.06) 0%, transparent 60%),
+        #0a0a0a;
+    }
+    .install-section .section-subtitle {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .install-section .code-block {
+      max-width: 600px;
+    }
+    /* ===================== */
+    /* FOOTER                */
+    /* ===================== */
+    footer {
+      border-top: 1px solid #151515;
+      padding: 48px 0;
+      text-align: center;
+    }
+    footer .footer-links {
+      display: flex;
+      justify-content: center;
+      gap: 32px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+    footer .footer-links a {
+      color: #666;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+    footer .footer-links a:hover {
+      color: #76b900;
+    }
+    footer .footer-note {
+      font-size: 0.8rem;
+      color: #444;
+      line-height: 1.7;
+    }
+    footer .footer-note .heart {
+      color: #ff6b35;
+    }
+    /* ===================== */
+    /* RESPONSIVE            */
+    /* ===================== */
+    @media (max-width: 768px) {
+      section {
+        padding: 72px 0;
+      }
+      .section-title {
+        font-size: 1.75rem;
+      }
+      .features-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+      .security-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+      .features-grid {
+        grid-template-columns: 1fr;
+      }
+      .stat-boxes {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+      }
+      .tools-groups {
+        grid-template-columns: 1fr;
+        gap: 16px;
+      }
+      nav .nav-links {
+        display: none;
+      }
+      .hero {
+        padding-top: 100px;
+        min-height: auto;
+        padding-bottom: 80px;
+      }
+      .code-block code {
+        font-size: 0.78rem;
+      }
+      .arch-diagram pre {
+        font-size: 0.7rem;
+      }
+      .timeline {
+        padding-left: 40px;
+      }
+      .timeline::before {
+        left: 11px;
+      }
+      .timeline-dot {
+        left: -37px;
+        width: 20px;
+        height: 20px;
+      }
+      .timeline-dot::after {
+        width: 6px;
+        height: 6px;
+      }
+    }
+    @media (max-width: 1024px) and (min-width: 769px) {
+      .features-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .security-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .tools-groups {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .tools-groups .tools-group:last-child {
+        grid-column: 1 / -1;
+        max-width: 50%;
+        justify-self: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Navigation -->
+  <nav>
+    <div class="container">
+      <div class="logo"><img src="logo-hero.svg" alt="clawspark logo">clawspark</div>
+      <ul class="nav-links">
+        <li><a href="#features">Features</a></li>
+        <li><a href="#security">Security</a></li>
+        <li><a href="#architecture">Architecture</a></li>
+        <li><a href="#hardware">Hardware</a></li>
+        <li><a href="#how-it-works">How It Works</a></li>
+        <li><a href="#install">Install</a></li>
+        <li><a href="https://github.com/thanhan92-f1/clawspark" target="_blank" rel="noopener">GitHub</a></li>
+      </ul>
+    </div>
+  </nav>
+  <!-- Hero -->
+  <section class="hero">
+    <div class="hero-content fade-in">
+      <div class="hero-title">
+        <img src="logo-hero.svg" alt="clawspark logo">
+        <h1><span class="accent">claw</span>spark</h1>
+      </div>
+      <p class="tagline">One command. Private AI agent. Your hardware.</p>
+      <p class="description">
+        Turn your DGX Spark, RTX GPU, Mac, or Jetson into a private AI agent that can code, research, browse the web, analyze images, and run tasks. Everything runs locally. Your data never leaves your machine.
+      </p>
+      <div class="code-block">
+        <div class="terminal-dots">
+          <span></span><span></span><span></span>
+        </div>
+        <code><span class="prompt">$</span> curl -fsSL https://clawspark.hitechclaw.com/install.sh | bash</code>
+        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+      </div>
+    </div>
+  </section>
+  <!-- What It Does -->
+  <section class="features" id="features">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">What Your Agent Can Do</h2>
+        <p class="section-subtitle">Not just a chatbot. A full AI agent that writes code, browses the web, analyzes images, and runs tasks on your hardware.</p>
+      </div>
+      <div class="features-grid">
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+          </div>
+          <h3>Write and Run Code</h3>
+          <p>Ask it to build apps, scripts, or tools. It writes the code, tests it in a Docker sandbox, and iterates until it works.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          </div>
+          <h3>Deep Research</h3>
+          <p>Spawns parallel sub-agents that each research a subtopic, then merges everything into one report. Web search via DuckDuckGo, no API key needed.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+          </div>
+          <h3>Browser Automation</h3>
+          <p>Headless Chromium built in. Navigate websites, fill forms, click buttons, take screenshots. All running locally.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+          </div>
+          <h3>Vision and Image Analysis</h3>
+          <p>Send a screenshot, photo, or diagram. The vision model (qwen2.5-vl) analyzes it and describes what it sees. Multi-model support built in.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+          </div>
+          <h3>Voice Enabled</h3>
+          <p>Send WhatsApp or Telegram voice notes. Whisper transcribes them locally on your GPU. No audio ever leaves your machine.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+          </div>
+          <h3>Docker Sandbox</h3>
+          <p>Agent-generated code runs in isolated containers. No network, read-only root, all capabilities dropped, custom seccomp profile.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+          </div>
+          <h3>Sub-Agent Orchestration</h3>
+          <p>Spawns background agents for parallel work. Up to 4 concurrent sub-agents with 2 levels of depth. Complex tasks broken into threads.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          </div>
+          <h3>Skill Packs</h3>
+          <p>Curated bundles for research, coding, productivity, and voice. Install a full skill pack with one command or pick individual skills.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h2l2 3 4-6h2"/></svg>
+          </div>
+          <h3>Diagrams and Architecture</h3>
+          <p>Ask for a flowchart, architecture diagram, or mindmap. MCP-powered Mermaid generates real PNG images from text. 20+ diagram types.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          </div>
+          <h3>Survives Reboots</h3>
+          <p>Systemd services auto-start everything on boot. Gateway, node host, dashboard, Ollama. No manual restarts, ever.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+          </div>
+          <h3>Skill Security Audit</h3>
+          <p>Scans installed skills for malicious patterns: credential theft, network exfiltration, obfuscation. Protects against the 341+ malicious ClawHub skills found in the wild.</p>
+        </div>
+        <div class="feature-card fade-in">
+          <div class="feature-icon">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+          </div>
+          <h3>Built-in Diagnostics</h3>
+          <p>Run <code style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:#76b900;background:rgba(118,185,0,0.08);padding:1px 6px;border-radius:4px;">clawspark diagnose</code> for a full system health check: GPU, Ollama, OpenClaw, skills, ports, security, and logs. Shareable debug reports.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Security -->
+  <section class="security" id="security">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">Security</h2>
+        <p class="section-subtitle">Your AI runs on your hardware and stays locked down. Every layer is hardened by default.</p>
+      </div>
+      <div class="security-grid">
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Localhost Only</h3>
+            <p>Gateway binds to 127.0.0.1. Your AI is not accessible from the network.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Token Authentication</h3>
+            <p>Random 256-bit token generated at install. Every API call requires it.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Tool Restrictions</h3>
+            <p>Dangerous tools (exec, write, browser, process) blocked by default. Bot cannot run commands on your machine.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Hardened Agent</h3>
+            <p>SOUL.md and TOOLS.md are read-only. The AI cannot modify its own guardrails.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Firewall Rules</h3>
+            <p>UFW configured automatically. Deny incoming, allow outgoing, SSH only.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Docker Sandbox</h3>
+            <p>Code execution isolated in containers: no network, read-only root, all capabilities dropped, custom seccomp profile, 200 PID limit.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Skill Audit</h3>
+            <p>Scans skills for 30+ malicious patterns (credential theft, exfiltration, obfuscation). Tracks file hashes to detect tampering. Curated allowlist of verified skills.</p>
+          </div>
+        </div>
+        <div class="security-item fade-in">
+          <div class="security-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          </div>
+          <div class="security-content">
+            <h3>Air Gap Mode</h3>
+            <p>Optional complete network isolation via <code style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:#76b900;background:rgba(118,185,0,0.08);padding:1px 6px;border-radius:4px;">clawspark airgap on</code>. Zero outbound traffic.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Architecture -->
+  <section class="architecture" id="architecture">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">Architecture</h2>
+        <p class="section-subtitle">A clean stack from messaging layer to GPU. Everything runs locally on a single machine.</p>
+      </div>
+      <div class="arch-visual fade-in">
+        <div class="arch-layer">
+          <span class="arch-layer-label">Channels</span>
+          <div class="arch-node accent">
+            <span class="arch-node-name">WhatsApp</span>
+            <span class="arch-node-desc">Baileys</span>
+          </div>
+          <div class="arch-node accent">
+            <span class="arch-node-name">Telegram</span>
+            <span class="arch-node-desc">Bot API</span>
+          </div>
+          <div class="arch-node accent">
+            <span class="arch-node-name">Web UI</span>
+            <span class="arch-node-desc">:18789</span>
+          </div>
+          <div class="arch-node accent">
+            <span class="arch-node-name">Voice</span>
+            <span class="arch-node-desc">Whisper</span>
+          </div>
+        </div>
+        <div class="arch-arrow"></div>
+        <div class="arch-layer">
+          <span class="arch-layer-label">Gateway</span>
+          <div class="arch-node primary wide">
+            <span class="arch-node-name">OpenClaw Gateway</span>
+            <span class="arch-node-desc">Routing, auth, tool dispatch (port 18789)</span>
+          </div>
+        </div>
+        <div class="arch-arrow"></div>
+        <div class="arch-layer">
+          <span class="arch-layer-label">Runtime</span>
+          <div class="arch-node primary">
+            <span class="arch-node-name">Agent</span>
+            <span class="arch-node-desc">LLM reasoning</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">Node Host</span>
+            <span class="arch-node-desc">28+ tools</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">Sub-Agents</span>
+            <span class="arch-node-desc">Parallel tasks</span>
+          </div>
+          <div class="arch-node primary">
+            <span class="arch-node-name">MCP Servers</span>
+            <span class="arch-node-desc">Memory, Diagrams</span>
+          </div>
+        </div>
+        <div class="arch-arrow"></div>
+        <div class="arch-layer">
+          <span class="arch-layer-label">Tools</span>
+          <div class="arch-node">
+            <span class="arch-node-name">exec</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">browser</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">read/write</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">web_search</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">vision</span>
+          </div>
+          <div class="arch-node accent">
+            <span class="arch-node-name">Sandbox</span>
+            <span class="arch-node-desc">Isolated Docker</span>
+          </div>
+        </div>
+        <div class="arch-arrow"></div>
+        <div class="arch-layer">
+          <span class="arch-layer-label">Inference</span>
+          <div class="arch-node primary">
+            <span class="arch-node-name">Ollama</span>
+            <span class="arch-node-desc">:11434</span>
+          </div>
+          <div class="arch-node primary">
+            <span class="arch-node-name">Chat Model</span>
+            <span class="arch-node-desc">Qwen 3.5 35B</span>
+          </div>
+          <div class="arch-node accent">
+            <span class="arch-node-name">Vision Model</span>
+            <span class="arch-node-desc">Qwen VL 7B</span>
+          </div>
+          <div class="arch-node">
+            <span class="arch-node-name">GB10 GPU</span>
+            <span class="arch-node-desc">128 GB unified</span>
+          </div>
+        </div>
+      </div>
+      <div class="stat-boxes">
+        <div class="stat-box fade-in">
+          <div class="stat-value">128 GB</div>
+          <div class="stat-label">Unified Memory</div>
+        </div>
+        <div class="stat-box fade-in">
+          <div class="stat-value">~59 tok/s</div>
+          <div class="stat-label">Generation Speed</div>
+        </div>
+        <div class="stat-box fade-in">
+          <div class="stat-value">1 PFLOP</div>
+          <div class="stat-label">AI Compute</div>
+        </div>
+        <div class="stat-box fade-in">
+          <div class="stat-value">28+ Tools</div>
+          <div class="stat-label">Agent + MCP Tools</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Supported Hardware -->
+  <section class="hardware" id="hardware">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">Supported Hardware</h2>
+        <p class="section-subtitle">clawspark automatically detects your hardware and selects the best model configuration.</p>
+      </div>
+      <div class="table-wrapper fade-in">
+        <table>
+          <thead>
+            <tr>
+              <th>Hardware</th>
+              <th>Memory</th>
+              <th>Default Model</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="hw-name">NVIDIA DGX Spark</td>
+              <td class="hw-vram">128 GB unified</td>
+              <td>Qwen 3.5 35B-A3B</td>
+              <td class="hw-perf perf-excellent">~59 tok/s (tested)</td>
+            </tr>
+            <tr>
+              <td class="hw-name">Mac M1 / M2 / M3 / M4</td>
+              <td class="hw-vram">16-128 GB unified</td>
+              <td>llmfit-selected</td>
+              <td class="hw-perf perf-great">untested</td>
+            </tr>
+            <tr>
+              <td class="hw-name">RTX 5090 / 4090</td>
+              <td class="hw-vram">24-32 GB VRAM</td>
+              <td>llmfit-selected</td>
+              <td class="hw-perf perf-great">untested</td>
+            </tr>
+            <tr>
+              <td class="hw-name">RTX 4080 / 4070</td>
+              <td class="hw-vram">8-16 GB VRAM</td>
+              <td>llmfit-selected</td>
+              <td class="hw-perf perf-good">untested</td>
+            </tr>
+            <tr>
+              <td class="hw-name">Jetson AGX Orin / Thor</td>
+              <td class="hw-vram">64-128 GB unified</td>
+              <td>llmfit-selected</td>
+              <td class="hw-perf perf-great">untested</td>
+            </tr>
+          </tbody>
+        </table>
+        <p style="color:#888;font-size:0.85rem;margin-top:12px;text-align:center;">DGX Spark is the only platform with full end-to-end testing. Other platforms should work -- community testing welcome.</p>
+      </div>
+    </div>
+  </section>
+  <!-- How It Works -->
+  <section class="how-it-works" id="how-it-works">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">How It Works</h2>
+        <p class="section-subtitle">From bare hardware to a fully capable AI agent in about 5 minutes.</p>
+      </div>
+      <div class="timeline">
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 1</span>
+          <h4>Detect Hardware</h4>
+          <p>Scans for GPUs, identifies your hardware model, and measures available VRAM or unified memory.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 2</span>
+          <h4>Pick the Best Model</h4>
+          <p>Uses llmfit to select the optimal chat model for your hardware. Pulls a vision model automatically for image analysis.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 3</span>
+          <h4>Install Everything</h4>
+          <p>Ollama, OpenClaw, skills, Whisper for voice, Chromium for browser automation. All handled automatically.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 4</span>
+          <h4>Set Up Sandbox</h4>
+          <p>Installs Docker if needed, builds an isolated container image with seccomp, no-network, and read-only rootfs for safe code execution.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 5</span>
+          <h4>Create Services</h4>
+          <p>Systemd services for gateway, node host, and dashboard. Everything auto-starts on boot and restarts on failure.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Step 6</span>
+          <h4>Harden Security</h4>
+          <p>Firewall rules, auth tokens, localhost binding, read-only guardrails. Your agent is locked down by default.</p>
+        </div>
+        <div class="timeline-step fade-in">
+          <div class="timeline-dot"></div>
+          <span class="step-label">Done</span>
+          <h4>Agent Ready</h4>
+          <p>Your private AI agent is live. Code, research, browse, analyze images, run tasks. All on your hardware, all private.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Tools Installed -->
+  <section class="tools-section" id="tools">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">Tools Installed</h2>
+        <p class="section-subtitle">26+ agent tools, 10 skills, and a full management CLI ship with every clawspark installation.</p>
+      </div>
+      <div class="tools-groups">
+        <div class="tools-group fade-in">
+          <div class="tools-group-header">
+            <div class="tools-group-icon green">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+            </div>
+            <h3>Agent Skills</h3>
+          </div>
+          <ul class="tools-list">
+            <li>
+              <span class="tool-bullet green"></span>
+              <span><span class="tool-name">Web Search</span> <span class="tool-desc">-- DuckDuckGo, no API key needed</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet green"></span>
+              <span><span class="tool-name">Deep Research</span> <span class="tool-desc">-- Multi-source synthesis</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet green"></span>
+              <span><span class="tool-name">Voice Transcription</span> <span class="tool-desc">-- Local Whisper on GPU</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet green"></span>
+              <span><span class="tool-name">Prompt Guard</span> <span class="tool-desc">-- Injection defense</span></span>
+            </li>
+          </ul>
+        </div>
+        <div class="tools-group fade-in">
+          <div class="tools-group-header">
+            <div class="tools-group-icon orange">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
+            </div>
+            <h3>Agent Tools <span style="font-size:0.7em;color:#888;font-weight:400">(26+ tools, work out of the box)</span></h3>
+          </div>
+          <ul class="tools-list scrollable">
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">exec</span> <span class="tool-desc">-- Shell commands (bash, docker, kubectl)</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">web_fetch</span> <span class="tool-desc">-- HTTP requests, API calls, web search via DDG</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">read</span> <span class="tool-desc">-- Read files on the host</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">write</span> <span class="tool-desc">-- Write and create files</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">edit</span> <span class="tool-desc">-- Edit files in place</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">message</span> <span class="tool-desc">-- WhatsApp / Telegram replies</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">canvas</span> <span class="tool-desc">-- Interactive web UI</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">process</span> <span class="tool-desc">-- List, monitor, kill processes</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">cron</span> <span class="tool-desc">-- Scheduled tasks</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">nodes</span> <span class="tool-desc">-- Remote node execution (paired devices)</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">memory_search</span> <span class="tool-desc">-- Search stored context</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">memory_store</span> <span class="tool-desc">-- Save info across sessions</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">transcribe</span> <span class="tool-desc">-- Audio/voice transcription (local Whisper)</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">vision</span> <span class="tool-desc">-- Image analysis (qwen2.5-vl)</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">browser</span> <span class="tool-desc">-- Navigate websites, click, fill forms, screenshot</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">web_search</span> <span class="tool-desc">-- DuckDuckGo search, no API key</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">image</span> <span class="tool-desc">-- Download and process images</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">pdf</span> <span class="tool-desc">-- Read and extract PDF content</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet orange"></span>
+              <span><span class="tool-cmd">sessions_spawn</span> <span class="tool-desc">-- Sub-agent sessions for parallel work</span></span>
+            </li>
+          </ul>
+          <div class="tools-scroll-hint">Scroll for all tools</div>
+        </div>
+        <div class="tools-group fade-in">
+          <div class="tools-group-header">
+            <div class="tools-group-icon grey">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+            </div>
+            <h3>Management CLI</h3>
+          </div>
+          <ul class="tools-list scrollable">
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark status</span> <span class="tool-desc">-- Check all components</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark start</span> <span class="tool-desc">-- Start all services</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark stop</span> <span class="tool-desc">-- Stop all services</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark restart</span> <span class="tool-desc">-- Restart services</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark model list</span> <span class="tool-desc">-- Show all models</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark model switch</span> <span class="tool-desc">-- Change chat model</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark sandbox on</span> <span class="tool-desc">-- Enable Docker sandbox</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark skills pack</span> <span class="tool-desc">-- Install skill bundles</span></span>
+            </li>
+            <li>
+              <span class="tool-bullet grey"></span>
+              <span><span class="tool-cmd">clawspark logs</span> <span class="tool-desc">-- View logs</span></span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- The Install -->
+  <section class="install-section" id="install">
+    <div class="container">
+      <div class="fade-in">
+        <h2 class="section-title">Get Started</h2>
+        <p class="section-subtitle" style="margin-left:auto;margin-right:auto;">One command is all it takes. Run it on any supported machine.</p>
+      </div>
+      <div class="code-block fade-in" style="margin-bottom: 24px;">
+        <div class="terminal-dots">
+          <span></span><span></span><span></span>
+        </div>
+        <code><span class="prompt">$</span> curl -fsSL https://clawspark.hitechclaw.com/install.sh | bash</code>
+        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+      </div>
+      <p class="fade-in" style="color:#555;font-size:0.85rem;text-align:center;">Works on DGX Spark, RTX GPUs (Linux + CUDA), Mac (Apple Silicon), and Jetson. Fully tested on DGX Spark.</p>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <div class="footer-links">
+        <a href="https://github.com/thanhan92-f1/clawspark" target="_blank" rel="noopener">GitHub</a>
+        <a href="#features">Features</a>
+        <a href="#security">Security</a>
+        <a href="#architecture">Architecture</a>
+        <a href="#hardware">Hardware</a>
+        <a href="#how-it-works">How It Works</a>
+      </div>
+      <p class="footer-note">
+        Built <span class="heart">with care</span> for the OpenClaw community.<br>
+        MIT License. Free and open source, forever.
+      </p>
+    </div>
+  </footer>
+  <script>
+    // Copy command to clipboard
+    function copyCommand(btn) {
+      var command = 'curl -fsSL https://clawspark.hitechclaw.com/install.sh | bash';
+      navigator.clipboard.writeText(command).then(function() {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(function() {
+          btn.textContent = 'Copy';
+          btn.classList.remove('copied');
+        }, 2000);
+      }).catch(function() {
+        // Fallback for older browsers
+        var textarea = document.createElement('textarea');
+        textarea.value = command;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textarea);
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(function() {
+          btn.textContent = 'Copy';
+          btn.classList.remove('copied');
+        }, 2000);
+      });
+    }
+    // Fade-in on scroll using IntersectionObserver
+    (function() {
+      var elements = document.querySelectorAll('.fade-in');
+      if ('IntersectionObserver' in window) {
+        var observer = new IntersectionObserver(function(entries) {
+          entries.forEach(function(entry) {
+            if (entry.isIntersecting) {
+              entry.target.classList.add('visible');
+              observer.unobserve(entry.target);
+            }
+          });
+        }, {
+          threshold: 0.1,
+          rootMargin: '0px 0px -40px 0px'
+        });
+        elements.forEach(function(el) {
+          observer.observe(el);
+        });
+      } else {
+        // Fallback: just show everything
+        elements.forEach(function(el) {
+          el.classList.add('visible');
+        });
+      }
+    })();
+  </script>
+</body>
+</html>