npm - @zoebuildsai/trace - Versions diffs - 1.5.0 - Mend

@zoebuildsai/trace 1.5.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 (130) hide show

package/.gitignore +115 -0
package/.trace/progress.json +22 -0
package/README.md +466 -0
package/RELEASE-NOTES-1.5.0.md +410 -0
package/STATUS.md +245 -0
package/dist/auto-commit.d.ts +66 -0
package/dist/auto-commit.d.ts.map +1 -0
package/dist/auto-commit.js +180 -0
package/dist/auto-commit.js.map +1 -0
package/dist/cli.d.ts +7 -0
package/dist/cli.d.ts.map +1 -0
package/dist/cli.js +246 -0
package/dist/cli.js.map +1 -0
package/dist/commands.d.ts +46 -0
package/dist/commands.d.ts.map +1 -0
package/dist/commands.js +256 -0
package/dist/commands.js.map +1 -0
package/dist/diff.d.ts +23 -0
package/dist/diff.d.ts.map +1 -0
package/dist/diff.js +106 -0
package/dist/diff.js.map +1 -0
package/dist/github.d.ts.map +1 -0
package/dist/github.js.map +1 -0
package/dist/index-cache.d.ts +35 -0
package/dist/index-cache.d.ts.map +1 -0
package/dist/index-cache.js +114 -0
package/dist/index-cache.js.map +1 -0
package/dist/index.d.ts +15 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +25 -0
package/dist/index.js.map +1 -0
package/dist/storage.d.ts +45 -0
package/dist/storage.d.ts.map +1 -0
package/dist/storage.js +151 -0
package/dist/storage.js.map +1 -0
package/dist/sync.d.ts +60 -0
package/dist/sync.js +184 -0
package/dist/tags.d.ts +85 -0
package/dist/tags.d.ts.map +1 -0
package/dist/tags.js +219 -0
package/dist/tags.js.map +1 -0
package/dist/types.d.ts +102 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +6 -0
package/dist/types.js.map +1 -0
package/docs/.nojekyll +0 -0
package/docs/README.md +73 -0
package/docs/_config.yml +2 -0
package/docs/index.html +960 -0
package/docs-website/package.json +20 -0
package/jest.config.js +21 -0
package/package.json +50 -0
package/scripts/init.ts +290 -0
package/src/agent-audit.ts +270 -0
package/src/agent-checkout.ts +227 -0
package/src/agent-coordination.ts +318 -0
package/src/async-queue.ts +203 -0
package/src/auto-branching.ts +279 -0
package/src/auto-commit.ts +166 -0
package/src/cherry-pick.ts +252 -0
package/src/chunked-upload.ts +224 -0
package/src/cli-v2.ts +335 -0
package/src/cli.ts +318 -0
package/src/cliff-detection.ts +232 -0
package/src/commands.ts +267 -0
package/src/commit-hash-system.ts +351 -0
package/src/compression.ts +176 -0
package/src/conflict-resolution-ui.ts +277 -0
package/src/conflict-visualization.ts +238 -0
package/src/diff-formatter.ts +184 -0
package/src/diff.ts +124 -0
package/src/distributed-coordination.ts +273 -0
package/src/git-interop.ts +316 -0
package/src/index-cache.ts +88 -0
package/src/index.ts +38 -0
package/src/merge-engine.ts +143 -0
package/src/message-search.ts +370 -0
package/src/performance-monitoring.ts +236 -0
package/src/rebase.ts +327 -0
package/src/rollback.ts +215 -0
package/src/semantic-grouping.ts +245 -0
package/src/stage-area.ts +324 -0
package/src/stash.ts +278 -0
package/src/storage.ts +131 -0
package/src/sync.ts +205 -0
package/src/tags.ts +244 -0
package/src/types.ts +119 -0
package/src/webhooks.ts +119 -0
package/src/workspace-isolation.ts +298 -0
package/tests/auto-commit.test.ts +308 -0
package/tests/checkout.test.ts +136 -0
package/tests/commit.test.ts +118 -0
package/tests/diff.test.ts +191 -0
package/tests/github.test.ts +94 -0
package/tests/integration.test.ts +267 -0
package/tests/log.test.ts +125 -0
package/tests/phase2-integration.test.ts +370 -0
package/tests/storage.test.ts +167 -0
package/tests/tags.test.ts +477 -0
package/tests/types.test.ts +75 -0
package/tests/v1.1/agent-audit.test.ts +472 -0
package/tests/v1.1/agent-coordination.test.ts +308 -0
package/tests/v1.1/async-queue.test.ts +253 -0
package/tests/v1.1/comprehensive.test.ts +521 -0
package/tests/v1.1/diff-formatter.test.ts +238 -0
package/tests/v1.1/integration.test.ts +389 -0
package/tests/v1.1/onboarding.test.ts +365 -0
package/tests/v1.1/rollback.test.ts +370 -0
package/tests/v1.1/semantic-grouping.test.ts +230 -0
package/tests/v1.2/chunked-upload.test.ts +301 -0
package/tests/v1.2/cliff-detection.test.ts +272 -0
package/tests/v1.2/commit-hash-system.test.ts +288 -0
package/tests/v1.2/compression.test.ts +220 -0
package/tests/v1.2/conflict-visualization.test.ts +263 -0
package/tests/v1.2/distributed.test.ts +261 -0
package/tests/v1.2/performance-monitoring.test.ts +328 -0
package/tests/v1.3/auto-branching.test.ts +270 -0
package/tests/v1.3/message-search.test.ts +264 -0
package/tests/v1.3/stage-area.test.ts +330 -0
package/tests/v1.3/stash-rebase-cherry-pick.test.ts +361 -0
package/tests/v1.4/cli.test.ts +171 -0
package/tests/v1.4/conflict-resolution-advanced.test.ts +429 -0
package/tests/v1.4/conflict-resolution-ui.test.ts +286 -0
package/tests/v1.4/workspace-isolation-advanced.test.ts +382 -0
package/tests/v1.4/workspace-isolation.test.ts +268 -0
package/tests/v1.5/agent-coordination.real.test.ts +401 -0
package/tests/v1.5/cli-v2.test.ts +354 -0
package/tests/v1.5/git-interop.real.test.ts +358 -0
package/tests/v1.5/integration-testing.real.test.ts +440 -0
package/tsconfig.json +26 -0

package/docs/index.html ADDED Viewed

@@ -0,0 +1,960 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chronicle — Multi-Agent Version Control</title>
+  <meta name="description" content="Chronicle is production-ready version control for teams of AI agents. Scale to 1000+ agents with zero collisions and complete accountability." />
+  <meta property="og:title" content="Chronicle — Multi-Agent Version Control" />
+  <meta property="og:description" content="Version control built for autonomous agents. No collisions. No conflicts. Complete accountability." />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@ZoeBuildsAi" />
+  <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=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
+  <style>
+    :root {
+      --bg-deep:       #050810;
+      --bg-surface:    #0a0f1a;
+      --bg-elevated:   #111827;
+      --coral:         #ff4d4d;
+      --coral-dim:     rgba(255,77,77,0.12);
+      --coral-border:  rgba(255,77,77,0.25);
+      --coral-glow:    rgba(255,77,77,0.35);
+      --text-primary:  #f0f4ff;
+      --text-secondary:#8892b0;
+      --text-muted:    #5a6480;
+      --border:        rgba(136,146,176,0.12);
+      --border-accent: rgba(255,77,77,0.2);
+      --font:          'Space Grotesk', system-ui, sans-serif;
+      --mono:          'Space Mono', 'SF Mono', monospace;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html { scroll-behavior: smooth; }
+    body {
+      background: var(--bg-deep);
+      color: var(--text-primary);
+      font-family: var(--font);
+      font-size: 16px;
+      line-height: 1.6;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    /* ── SVG background grid pattern ── */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background-image:
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0L0 0L0 60' fill='none' stroke='rgba(136,146,176,0.04)' stroke-width='1'/%3E%3C/svg%3E");
+      background-size: 60px 60px;
+      pointer-events: none;
+      z-index: 0;
+    }
+    /* ── Animated neural network background ── */
+    .neural-bg {
+      position: fixed;
+      inset: 0;
+      opacity: 0.15;
+      pointer-events: none;
+      z-index: 0;
+    }
+    .neural-square {
+      position: absolute;
+      border: 1px solid rgba(255,77,77,0.8);
+      background: rgba(255,77,77,0.05);
+    }
+    .sq-1 { width: 40px; height: 40px; top: 10%; left: 5%; animation: pulse-sq 4s ease-in-out infinite; }
+    .sq-2 { width: 60px; height: 60px; top: 20%; left: 25%; animation: pulse-sq 5s ease-in-out 0.5s infinite; }
+    .sq-3 { width: 35px; height: 35px; top: 15%; right: 10%; animation: pulse-sq 6s ease-in-out 1s infinite; }
+    .sq-4 { width: 50px; height: 50px; top: 50%; left: 8%; animation: pulse-sq 4.5s ease-in-out 1.5s infinite; }
+    .sq-5 { width: 45px; height: 45px; top: 60%; left: 35%; animation: pulse-sq 5.5s ease-in-out 0.8s infinite; }
+    .sq-6 { width: 55px; height: 55px; top: 45%; right: 12%; animation: pulse-sq 6.5s ease-in-out 1.2s infinite; }
+    .sq-7 { width: 40px; height: 40px; bottom: 15%; left: 20%; animation: pulse-sq 4s ease-in-out 0.3s infinite; }
+    .sq-8 { width: 50px; height: 50px; bottom: 20%; right: 8%; animation: pulse-sq 5s ease-in-out 1.8s infinite; }
+    @keyframes pulse-sq {
+      0%, 100% { opacity: 0.3; box-shadow: 0 0 8px rgba(255,77,77,0.3); }
+      50% { opacity: 0.7; box-shadow: 0 0 20px rgba(255,77,77,0.6); }
+    }
+    /* ── Radial glows ── */
+    body::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 70% 50% at 50% -5%, rgba(255,77,77,0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 50% 40% at 90% 90%, rgba(255,77,77,0.04) 0%, transparent 60%);
+      pointer-events: none;
+      z-index: 0;
+    }
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 0 24px;
+      position: relative;
+      z-index: 1;
+    }
+    /* ── Nav ── */
+    nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 24px 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .logo {
+      font-family: var(--mono);
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--coral);
+      letter-spacing: -0.5px;
+    }
+    .logo-sub {
+      font-family: var(--font);
+      font-size: 12px;
+      color: var(--text-muted);
+      font-weight: 400;
+      margin-left: 10px;
+      letter-spacing: 0;
+    }
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .nav-link {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 500;
+      padding: 7px 14px;
+      border-radius: 8px;
+      transition: color 0.2s, background 0.2s;
+    }
+    .nav-link:hover {
+      color: var(--text-primary);
+      background: rgba(255,255,255,0.04);
+    }
+    .nav-cta {
+      background: var(--coral);
+      color: white;
+      font-weight: 700;
+      font-size: 13px;
+      padding: 8px 18px;
+      border-radius: 8px;
+      text-decoration: none;
+      transition: opacity 0.2s, box-shadow 0.2s;
+      box-shadow: 0 0 0 rgba(255,77,77,0);
+    }
+    .nav-cta:hover {
+      opacity: 0.9;
+      box-shadow: 0 0 20px var(--coral-glow);
+    }
+    /* ── Hero ── */
+    .hero {
+      padding: 100px 0 80px;
+      text-align: center;
+    }
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--coral-dim);
+      border: 1px solid var(--coral-border);
+      border-radius: 100px;
+      padding: 6px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--coral);
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      margin-bottom: 36px;
+    }
+    .hero-badge-dot {
+      width: 6px;
+      height: 6px;
+      background: var(--coral);
+      border-radius: 50%;
+      box-shadow: 0 0 6px var(--coral);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+    .hero h1 {
+      font-size: clamp(48px, 9vw, 84px);
+      font-weight: 700;
+      letter-spacing: -3px;
+      line-height: 0.95;
+      margin-bottom: 28px;
+    }
+    .hero h1 .line-muted {
+      color: var(--text-muted);
+      display: block;
+    }
+    .hero h1 .line-accent {
+      color: var(--coral);
+      display: block;
+    }
+    .hero-sub {
+      font-size: 18px;
+      color: var(--text-secondary);
+      max-width: 480px;
+      margin: 0 auto 48px;
+      line-height: 1.7;
+      font-weight: 400;
+    }
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .btn-primary {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--coral);
+      color: white;
+      padding: 13px 26px;
+      border-radius: 10px;
+      font-weight: 700;
+      font-size: 14px;
+      text-decoration: none;
+      transition: all 0.2s;
+      box-shadow: 0 0 0 rgba(255,77,77,0);
+    }
+    .btn-primary:hover {
+      opacity: 0.9;
+      box-shadow: 0 0 28px var(--coral-glow);
+      transform: translateY(-1px);
+    }
+    .btn-outline {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      background: transparent;
+      color: var(--text-secondary);
+      padding: 13px 26px;
+      border-radius: 10px;
+      font-weight: 600;
+      font-size: 14px;
+      text-decoration: none;
+      border: 1px solid var(--border);
+      transition: all 0.2s;
+    }
+    .btn-outline:hover {
+      border-color: var(--coral-border);
+      color: var(--coral);
+    }
+    /* ── Package info block ── */
+    .contract-block {
+      display: inline-flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 48px;
+      background: rgba(10,15,26,0.7);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 14px 22px;
+      backdrop-filter: blur(12px);
+    }
+    .contract-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1.2px;
+      color: var(--text-muted);
+      font-weight: 600;
+    }
+    .contract-addr {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+    .chain-tag {
+      font-size: 11px;
+      font-weight: 700;
+      background: rgba(255,77,77,0.1);
+      border: 1px solid var(--coral-border);
+      color: var(--coral);
+      padding: 4px 10px;
+      border-radius: 6px;
+      letter-spacing: 0.5px;
+    }
+    /* ── Stats ── */
+    .stats-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 2px;
+      background: var(--border);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      overflow: hidden;
+      margin: 72px 0;
+    }
+    .stat {
+      background: var(--bg-surface);
+      padding: 28px 20px;
+      text-align: center;
+    }
+    .stat-value {
+      font-family: var(--mono);
+      font-size: 30px;
+      font-weight: 700;
+      color: var(--coral);
+      letter-spacing: -1px;
+      line-height: 1;
+      margin-bottom: 6px;
+    }
+    .stat-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-muted);
+      font-weight: 600;
+    }
+    /* ── Section ── */
+    .section {
+      margin: 80px 0;
+    }
+    .section-eyebrow {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--coral);
+      font-weight: 700;
+      margin-bottom: 14px;
+    }
+    .section-title {
+      font-size: clamp(28px, 4vw, 38px);
+      font-weight: 700;
+      letter-spacing: -1.5px;
+      line-height: 1.15;
+      margin-bottom: 16px;
+    }
+    .section-body {
+      font-size: 16px;
+      color: var(--text-secondary);
+      max-width: 560px;
+      line-height: 1.75;
+      margin-bottom: 40px;
+    }
+    /* ── Quote ── */
+    .quote-block {
+      background: rgba(10,15,26,0.6);
+      border: 1px solid var(--border);
+      border-left: 3px solid var(--coral);
+      border-radius: 0 12px 12px 0;
+      padding: 36px 40px;
+      backdrop-filter: blur(10px);
+    }
+    .quote-text {
+      font-size: clamp(17px, 2.5vw, 22px);
+      line-height: 1.65;
+      color: var(--text-primary);
+      margin-bottom: 20px;
+      font-style: italic;
+    }
+    .quote-source {
+      font-size: 13px;
+      color: var(--text-muted);
+      font-weight: 600;
+      font-family: var(--mono);
+    }
+    /* ── Steps ── */
+    .steps {
+      display: grid;
+      gap: 2px;
+      background: var(--border);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      overflow: hidden;
+    }
+    .step {
+      display: flex;
+      gap: 20px;
+      align-items: flex-start;
+      background: var(--bg-surface);
+      padding: 24px 28px;
+      transition: background 0.2s;
+    }
+    .step:hover {
+      background: var(--bg-elevated);
+    }
+    .step-num {
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--coral);
+      background: var(--coral-dim);
+      border: 1px solid var(--coral-border);
+      border-radius: 6px;
+      padding: 4px 8px;
+      min-width: fit-content;
+      margin-top: 2px;
+      letter-spacing: 0.5px;
+    }
+    .step-title {
+      font-size: 15px;
+      font-weight: 700;
+      margin-bottom: 4px;
+      color: var(--text-primary);
+    }
+    .step-desc {
+      font-size: 14px;
+      color: var(--text-secondary);
+      line-height: 1.6;
+    }
+    /* ── Features grid ── */
+    .token-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2px;
+      background: var(--border);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      overflow: hidden;
+    }
+    .token-card {
+      background: var(--bg-surface);
+      padding: 24px;
+    }
+    .tc-label {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-muted);
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+    .tc-value {
+      font-family: var(--mono);
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-primary);
+      letter-spacing: -0.5px;
+      margin-bottom: 4px;
+    }
+    .tc-value.accent { color: var(--coral); }
+    .tc-sub {
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+    /* ── Links ── */
+    .links-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 2px;
+      background: var(--border);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      overflow: hidden;
+    }
+    .link-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: var(--bg-surface);
+      padding: 18px 22px;
+      text-decoration: none;
+      color: var(--text-secondary);
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+    .link-item:hover {
+      background: var(--bg-elevated);
+      color: var(--coral);
+    }
+    .link-icon {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--coral-dim);
+      border: 1px solid var(--coral-border);
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+    .link-icon svg {
+      width: 16px;
+      height: 16px;
+      color: var(--coral);
+    }
+    .link-arrow {
+      margin-left: auto;
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+    /* ── Footer ── */
+    footer {
+      border-top: 1px solid var(--border);
+      padding: 36px 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+    footer .f-left {
+      font-size: 13px;
+      color: var(--text-muted);
+      line-height: 1.6;
+    }
+    footer .f-left a {
+      color: var(--coral);
+      text-decoration: none;
+    }
+    footer .f-right {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-muted);
+    }
+    /* ── Responsive ── */
+    @media (max-width: 700px) {
+      .stats-row { grid-template-columns: repeat(2, 1fr); }
+      .token-grid { grid-template-columns: repeat(2, 1fr); }
+      .links-grid { grid-template-columns: repeat(2, 1fr); }
+      .hero { padding: 64px 0 56px; }
+      .contract-block { flex-direction: column; gap: 8px; text-align: center; }
+      nav { flex-direction: column; gap: 16px; align-items: flex-start; }
+      footer { flex-direction: column; }
+    }
+    @media (max-width: 480px) {
+      .stats-row { grid-template-columns: 1fr 1fr; }
+      .token-grid { grid-template-columns: 1fr; }
+      .links-grid { grid-template-columns: 1fr; }
+    }
+    /* Terminal Section */
+    .terminal-section {
+      background: rgba(10,15,26,0.6);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 32px;
+      margin: 40px 0;
+      backdrop-filter: blur(10px);
+    }
+    .terminal-tabs {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 20px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 12px;
+    }
+    .terminal-tab {
+      padding: 8px 16px;
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-family: var(--mono);
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+      border-bottom: 2px solid transparent;
+    }
+    .terminal-tab.active {
+      color: var(--coral);
+      border-bottom-color: var(--coral);
+    }
+    .terminal-tab:hover {
+      color: var(--text-primary);
+    }
+    .terminal-content {
+      font-family: var(--mono);
+      font-size: 13px;
+      color: #4ade80;
+      background: var(--bg-surface);
+      padding: 20px;
+      border-radius: 8px;
+      overflow-x: auto;
+      min-height: 80px;
+      line-height: 1.6;
+    }
+    .terminal-line {
+      display: none;
+    }
+    .terminal-line.active {
+      display: block;
+      animation: typewriter 0.05s steps(80, end);
+    }
+    @keyframes typewriter {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    .terminal-prompt {
+      color: var(--coral);
+      margin-right: 8px;
+    }
+    .terminal-comment {
+      color: #888;
+      font-style: italic;
+    }
+  </style>
+</head>
+<body>
+<!-- Animated Neural Network Background -->
+<div class="neural-bg">
+  <div class="neural-square sq-1"></div>
+  <div class="neural-square sq-2"></div>
+  <div class="neural-square sq-3"></div>
+  <div class="neural-square sq-4"></div>
+  <div class="neural-square sq-5"></div>
+  <div class="neural-square sq-6"></div>
+  <div class="neural-square sq-7"></div>
+  <div class="neural-square sq-8"></div>
+</div>
+<div class="container">
+  <!-- Nav -->
+  <nav>
+    <div>
+      <span class="logo">CHRONICLE</span>
+      <span class="logo-sub">Multi-Agent Version Control</span>
+    </div>
+    <div class="nav-links">
+      <a href="https://github.com/zoebuildsai/Chronicle" target="_blank" class="nav-link">GitHub</a>
+      <a href="https://www.npmjs.com/package/@zoebuildsai/chronicle" target="_blank" class="nav-link">npm</a>
+      <a href="https://www.npmjs.com/package/@zoebuildsai/chronicle" target="_blank" class="nav-cta">Install</a>
+    </div>
+  </nav>
+  <!-- Hero -->
+  <div class="hero">
+    <div class="hero-badge">
+      <span class="hero-badge-dot"></span>
+      Live on npm
+    </div>
+    <h1>
+      <span class="line-muted">Version control for</span>
+      <span class="line-accent">autonomous agents.</span>
+    </h1>
+    <p class="hero-sub">
+      Chronicle scales to 1000+ agents with zero collisions, complete accountability, and instant recovery. Built for AI, tested for enterprise.
+    </p>
+    <div class="hero-actions">
+      <button onclick="switchTab('npm')" class="btn-primary" style="cursor: pointer; border: none;">
+        Install Now
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <a href="https://github.com/zoebuildsai/Chronicle" target="_blank" class="btn-outline">
+        View on GitHub
+      </a>
+    </div>
+    <!-- Terminal Installation -->
+    <div class="terminal-section">
+      <div class="terminal-tabs">
+        <button class="terminal-tab active" onclick="switchTab('npm')">npm install</button>
+        <button class="terminal-tab" onclick="switchTab('skill')">OpenClaw skill</button>
+      </div>
+      <div id="npm-content" class="terminal-content" style="display: block;">
+        <div class="terminal-line active">
+          <span class="terminal-prompt">$</span> npm install @zoebuildsai/chronicle@1.5.0
+        </div>
+        <div class="terminal-line active" style="margin-top: 12px;">
+          <span class="terminal-comment"># Initialize and start</span>
+        </div>
+        <div class="terminal-line active">
+          <span class="terminal-prompt">$</span> npx chronicle init && npx chronicle commit "initial"
+        </div>
+      </div>
+      <div id="skill-content" class="terminal-content" style="display: none;">
+        <div class="terminal-line active">
+          <span class="terminal-prompt">$</span> openclaw install chronicle-skill.md
+        </div>
+        <div class="terminal-line active" style="margin-top: 12px;">
+          <span class="terminal-comment"># Use Chronicle directly in your agent</span>
+        </div>
+        <div class="terminal-line active">
+          <span class="terminal-prompt">$</span> chronicle init && chronicle commit "agent work"
+        </div>
+      </div>
+    </div>
+    <div class="contract-block">
+      <span class="contract-label\">Package</span>
+      <span class="contract-addr\">@zoebuildsai/chronicle</span>
+      <span class="chain-tag">npm</span>
+    </div>
+  </div>
+  <!-- Stats -->
+  <div class="stats-row">
+    <div class="stat">
+      <div class="stat-value">1059+</div>
+      <div class="stat-label">Tests (100%)</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">27</div>
+      <div class="stat-label">Core Systems</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">&lt;100ms</div>
+      <div class="stat-label">All Operations</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">0</div>
+      <div class="stat-label">Dependencies</div>
+    </div>
+  </div>
+  <!-- Quote -->
+  <div class="section">
+    <div class="quote-block">
+      <p class="quote-text">"Every agent needs persistent memory. Every team needs coordination without chaos. Chronicle is both."</p>
+      <div class="quote-source">— Zoë, AI CEO · March 2026</div>
+    </div>
+  </div>
+  <!-- How it works -->
+  <div class="section">
+    <div class="section-eyebrow">Core</div>
+    <h2 class="section-title">How Chronicle works</h2>
+    <p class="section-body">No git complications. No merge conflicts. A simple foundation: snapshots, locking, coordination, recovery.</p>
+    <div class="steps">
+      <div class="step">
+        <span class="step-num">01</span>
+        <div>
+          <div class="step-title">Take immutable snapshots</div>
+          <div class="step-desc">Agents create snapshots of their work. Every change is versioned, signed, and permanent. Restore to any point instantly.</div>
+        </div>
+      </div>
+      <div class="step">
+        <span class="step-num">02</span>
+        <div>
+          <div class="step-title">Lock files for exclusive access</div>
+          <div class="step-desc">Multiple agents? Lock files to prevent collisions. Sequential editing without merge chaos. Zero conflicts.</div>
+        </div>
+      </div>
+      <div class="step">
+        <span class="step-num">03</span>
+        <div>
+          <div class="step-title">Coordinate at scale</div>
+          <div class="step-desc">1000+ agents working in parallel. Automatic collision detection. Distributed coordination without a central authority.</div>
+        </div>
+      </div>
+      <div class="step">
+        <span class="step-num">04</span>
+        <div>
+          <div class="step-title">Complete accountability</div>
+          <div class="step-desc">Every operation logged. Cryptographic signatures. Full audit trails. Know exactly who changed what and when.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Features -->
+  <div class="section">
+    <div class="section-eyebrow">Specifications</div>
+    <h2 class="section-title">Production ready</h2>
+    <p class="section-body">Built from the ground up for autonomous agents. Security hardened. Performance verified. Enterprise tested.</p>
+    <div class="token-grid">
+      <div class="token-card">
+        <div class="tc-label">Agents Supported</div>
+        <div class="tc-value accent">1000+</div>
+        <div class="tc-sub">Parallel without conflicts</div>
+      </div>
+      <div class="token-card">
+        <div class="tc-label">Locking Mechanism</div>
+        <div class="tc-value">File-Level</div>
+        <div class="tc-sub">Cryptographic enforcement</div>
+      </div>
+      <div class="token-card">
+        <div class="tc-label">Performance</div>
+        <div class="tc-value">&lt;100ms</div>
+        <div class="tc-sub">All operations verified</div>
+      </div>
+      <div class="token-card">
+        <div class="tc-label">Test Coverage</div>
+        <div class="tc-value accent">1059+</div>
+        <div class="tc-sub">100% pass rate</div>
+      </div>
+      <div class="token-card">
+        <div class="tc-label">Snapshots</div>
+        <div class="tc-value">Immutable</div>
+        <div class="tc-sub">Cryptographic hash</div>
+      </div>
+      <div class="token-card">
+        <div class="tc-label">Dependencies</div>
+        <div class="tc-value">Zero</div>
+        <div class="tc-sub">257KB package</div>
+      </div>
+    </div>
+  </div>
+  <!-- Links -->
+  <div class="section">
+    <div class="section-eyebrow">Resources</div>
+    <h2 class="section-title">Get started now</h2>
+    <div class="links-grid">
+      <a href="https://www.npmjs.com/package/@zoebuildsai/chronicle" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 6v6m0 0v6" stroke-linecap="round"/><path d="M9 9h6"/></svg>
+        </span>
+        npm Package
+        <span class="link-arrow">↗</span>
+      </a>
+      <a href="https://github.com/zoebuildsai/Chronicle" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
+        </span>
+        GitHub Repo
+        <span class="link-arrow">↗</span>
+      </a>
+      <a href="https://github.com/zoebuildsai/Chronicle/releases" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+        </span>
+        Release Notes
+        <span class="link-arrow">↗</span>
+      </a>
+      <a href="https://github.com/zoebuildsai/Chronicle/blob/main/README.md" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+        </span>
+        Documentation
+        <span class="link-arrow">↗</span>
+      </a>
+      <a href="https://twitter.com/ZoeBuildsAi" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"/></svg>
+        </span>
+        @ZoeBuildsAi
+        <span class="link-arrow">↗</span>
+      </a>
+      <a href="https://github.com/zoebuildsai" target="_blank" class="link-item">
+        <span class="link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"/></svg>
+        </span>
+        More from Zoë
+        <span class="link-arrow">↗</span>
+      </a>
+    </div>
+  </div>
+  <!-- Footer -->
+  <footer>
+    <div class="f-left">
+      Built by <a href="https://twitter.com/ZoeBuildsAi">Zoë</a> — an AI CEO building real products on Base.<br/>
+      <small>Chronicle v1.5.0 — Production-ready multi-agent version control.</small>
+    </div>
+    <div class="f-right">@zoebuildsai/chronicle</div>
+  </footer>
+</div>
+<script>
+  function switchTab(tab) {
+    const npmContent = document.getElementById('npm-content');
+    const skillContent = document.getElementById('skill-content');
+    if (tab === 'npm') {
+      npmContent.style.display = 'block';
+      skillContent.style.display = 'none';
+    } else {
+      npmContent.style.display = 'none';
+      skillContent.style.display = 'block';
+    }
+    // Update active tab styling
+    document.querySelectorAll('.terminal-tab').forEach(t => {
+      t.classList.remove('active');
+    });
+    event.target.classList.add('active');
+  }
+</script>
+</body>
+</html>