path: root/downloads/memory/newos-architecture-3d.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#0a0e1a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>newOS4 · Mobile Architecture</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  html, body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #0a0e1a;
    color: #e8eef7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overscroll-behavior: none;
    touch-action: none;
  }
  body {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #131a2c 0%, #0a0e1a 70%);
  }
  #scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
  }
  #scene.dragging { cursor: grabbing; }

  /* HUD — top-left, always visible, big enough to read on phone */
  #hud {
    position: absolute;
    top: max(env(safe-area-inset-top, 0px), 12px);
    left: 12px;
    z-index: 10;
    pointer-events: none;
    line-height: 1.35;
  }
  #hud .title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #7dd3fc;
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
  }
  #hud .sub {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 2px;
  }
  #hud .hint {
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
    max-width: 220px;
  }

  /* Node info card — top-right, big text */
  #card {
    position: absolute;
    top: max(env(safe-area-inset-top, 0px), 12px);
    right: 12px;
    z-index: 20;
    max-width: min(78vw, 320px);
    background: rgba(15, 22, 38, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: 12px;
    padding: 14px 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(125,211,252,0.08) inset;
    pointer-events: none;
    transform: translateX(20px);
    opacity: 0;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  }
  #card.visible {
    transform: translateX(0);
    opacity: 1;
  }
  #card .name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
  }
  #card .layer {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  #card .desc {
    font-size: 14px;
    line-height: 1.45;
    color: #cbd5e1;
  }
  #card .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #94a3b8;
    pointer-events: auto;
    cursor: pointer;
  }

  /* Control bar — bottom-center, big touch targets */
  #controls {
    position: absolute;
    bottom: max(env(safe-area-inset-bottom, 0px), 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(15, 22, 38, 0.75);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .btn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .btn:active {
    background: rgba(125, 211, 252, 0.2);
    transform: scale(0.92);
  }
  .btn.active {
    background: rgba(125, 211, 252, 0.18);
    color: #7dd3fc;
    border-color: rgba(125, 211, 252, 0.4);
  }

  /* Status — bottom-left */
  #status {
    position: absolute;
    bottom: max(env(safe-area-inset-bottom, 0px), 24px);
    left: 12px;
    z-index: 10;
    font-size: 11px;
    color: #64748b;
    pointer-events: none;
  }
  #status .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #22c55e;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 6px #22c55e;
  }

  /* SVG node label — big, never tiny */
  .label {
    font-size: 13px;
    font-weight: 600;
    fill: #e2e8f0;
    paint-order: stroke;
    stroke: #0a0e1a;
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .label.sub {
    font-size: 10px;
    font-weight: 500;
    fill: #94a3b8;
  }
  .node-hit {
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .node-hit.pinned {
    opacity: 1;
  }
  .node-circle {
    transition: r 0.15s, filter 0.15s;
  }
  .node-circle.pinned {
    filter: drop-shadow(0 0 6px currentColor);
  }

  /* Pulse animation overlay (CSS, fires once on demand) */
  @keyframes pulseRing {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  .pulse-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #7dd3fc;
    pointer-events: none;
    animation: pulseRing 1.2s ease-out forwards;
    z-index: 5;
  }
</style>
</head>
<body>

<div id="hud">
  <div class="title">newOS4</div>
  <div class="sub">41 modules · 24 skills · 303 files</div>
  <div class="hint">Drag to orbit · Tap a node</div>
</div>

<div id="card">
  <div class="close" id="cardClose">×</div>
  <div class="layer" id="cardLayer">CORE</div>
  <div class="name" id="cardName">—</div>
  <div class="desc" id="cardDesc">—</div>
</div>

<div id="controls">
  <button class="btn" id="btnReset" title="Reset view">⌂</button>
  <button class="btn" id="btnPulse" title="Pulse">~</button>
  <button class="btn" id="btnLabels" title="Toggle labels">A</button>
  <button class="btn" id="btnFlows" title="Toggle flows">◉</button>
  <button class="btn" id="btnHelp" title="Help">?</button>
</div>

<div id="status"><span class="dot"></span><span id="statusText">idle</span></div>

<svg id="scene" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 700" preserveAspectRatio="xMidYMid meet">
  <defs>
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#1a2440" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#0a0e1a" stop-opacity="0"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Star field (static, cheap) -->
  <g id="stars" opacity="0.6"></g>

  <!-- Background gradient overlay -->
  <rect x="0" y="0" width="400" height="700" fill="url(#bgGrad)" pointer-events="none"/>

  <!-- Edges layer -->
  <g id="edges" fill="none" stroke-linecap="round"></g>

  <!-- Nodes layer -->
  <g id="nodes"></g>

  <!-- Labels layer -->
  <g id="labels"></g>
</svg>

<script>
(() => {
  'use strict';

  // ---------- DATA ----------
  const layers = {
    core:    { color: '#7dd3fc', name: 'Core',         y:  90 },
    ai:      { color: '#a78bfa', name: 'AI Engine',    y: 200 },
    ext:     { color: '#34d399', name: 'Extensions',   y: 310 },
    user:    { color: '#fbbf24', name: 'User Space',   y: 430 },
    world:   { color: '#f472b6', name: 'World Model',  y: 560 },
  };

  const nodes = [
    // Core
    { id: 'kernel',   layer: 'core', label: 'Kernel',      x: 200, r: 22 },
    { id: 'vfs',      layer: 'core', label: 'VFS',         x: 110, r: 18 },
    { id: 'modules',  layer: 'core', label: 'Modules',     x: 290, r: 18 },
    { id: 'skills',   layer: 'core', label: 'Skills',      x:  60, r: 16 },
    { id: 'agents',   layer: 'core', label: 'Agents',      x: 340, r: 16 },

    // AI
    { id: 'llm',      layer: 'ai',   label: 'LLM',         x: 200, r: 22 },
    { id: 'router',   layer: 'ai',   label: 'Router',      x: 100, r: 17 },
    { id: 'memory',   layer: 'ai',   label: 'Memory',      x: 300, r: 18 },
    { id: 'tools',    layer: 'ai',   label: 'Tools',       x:  40, r: 15 },
    { id: 'prompts',  layer: 'ai',   label: 'Prompts',     x: 360, r: 15 },

    // Extensions
    { id: 'wallet',   layer: 'ext',  label: 'Wallet',      x: 150, r: 20 },
    { id: 'wpm',      layer: 'ext',  label: 'WPM',         x: 270, r: 17 },
    { id: 'webdav',   layer: 'ext',  label: 'WebDAV',      x:  60, r: 16 },
    { id: 'cron',     layer: 'ext',  label: 'Cron',        x: 340, r: 16 },
    { id: 'sandbox',  layer: 'ext',  label: 'Sandbox',     x: 220, r: 15 },

    // User
    { id: 'profile',  layer: 'user', label: 'Profile',     x: 100, r: 17 },
    { id: 'sessions', layer: 'user', label: 'Sessions',    x: 220, r: 18 },
    { id: 'vault',    layer: 'user', label: 'Vault',       x: 320, r: 17 },

    // World Model
    { id: 'wm',       layer: 'world', label: 'WorldModel', x: 200, r: 22 },
    { id: 'graph',    layer: 'world', label: 'Graph',      x: 100, r: 17 },
    { id: 'predict',  layer: 'world', label: 'Predict',    x: 300, r: 18 },
  ];

  const descs = {
    kernel:  'System core. Mounts modules, routes commands, owns the event loop.',
    vfs:     'Virtual filesystem. Resolves paths, lists dirs, reads/writes files.',
    modules: '41 modules loaded. Core + extension. Hot-reloadable.',
    skills:  '24 markdown skills. Searchable, patchable, versioned.',
    agents:  '3 worker agents. Delegate tasks with capabilities.',
    llm:     'MiniMax-M3 by MiniMax. Coding-tuned, 2026-01 cutoff.',
    router:  'Routes tool calls to the right module. Zero-fallback chain.',
    memory:  '37 nodes, 51 edges in the memory graph. Auto-pruned.',
    tools:   '21 tools: read/write, modules, web, vault, agents.',
    prompts: 'System + per-task prompts. Editable via edit_module.',
    wallet:  'Wallet lookup, no auth. Read-only Hyperliquid queries.',
    wpm:     'WebX11 Package Manager. Install modules with one command.',
    webdav:  'Remote filesystem. Mount, browse, edit over HTTPS.',
    cron:    'Scheduled tasks. Cron expressions in skill files.',
    sandbox: 'Isolated JS execution. node -e, browser JS only.',
    profile: 'User preferences. preferredModel, history, settings.',
    sessions: 'Session save/load. Date-keyed, terminal-aware.',
    vault:   'Secret vault. Hyperliquid keys, API tokens, encrypted.',
    wm:      'Self-awareness model. Ask about state, health, projects.',
    graph:   'Knowledge graph. 37 nodes linking tasks to files.',
    predict: 'Predict task duration, tokens, confidence. ML-trained.',
  };

  const edges = [
    ['kernel','vfs'], ['kernel','modules'], ['kernel','skills'], ['kernel','agents'],
    ['llm','router'], ['llm','memory'], ['llm','tools'], ['llm','prompts'],
    ['modules','wallet'], ['modules','wpm'], ['modules','webdav'], ['modules','cron'], ['modules','sandbox'],
    ['profile','sessions'], ['profile','vault'],
    ['wm','graph'], ['wm','predict'],
    ['llm','wm'], ['kernel','llm'],
  ];

  // ---------- RENDER ----------
  const svg = document.getElementById('scene');
  const starsG = document.getElementById('stars');
  const edgesG = document.getElementById('edges');
  const nodesG = document.getElementById('nodes');
  const labelsG = document.getElementById('labels');
  const card = document.getElementById('card');
  const cardName = document.getElementById('cardName');
  const cardDesc = document.getElementById('cardDesc');
  const cardLayer = document.getElementById('cardLayer');
  const cardClose = document.getElementById('cardClose');
  const statusText = document.getElementById('statusText');

  // Stars
  (function makeStars() {
    let s = '';
    for (let i = 0; i < 60; i++) {
      const x = Math.random() * 400;
      const y = Math.random() * 700;
      const r = Math.random() * 0.8 + 0.3;
      const o = Math.random() * 0.6 + 0.2;
      s += `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="${r.toFixed(2)}" fill="#cbd5e1" opacity="${o.toFixed(2)}"/>`;
    }
    starsG.innerHTML = s;
  })();

  // Edges
  const nodeMap = Object.fromEntries(nodes.map(n => [n.id, n]));
  let edgeHTML = '';
  edges.forEach(([a, b]) => {
    const na = nodeMap[a], nb = nodeMap[b];
    if (!na || !nb) return;
    const la = layers[na.layer], lb = layers[nb.layer];
    const c = la.color;
    const opacity = (la === lb) ? 0.45 : 0.3;
    edgeHTML += `<line x1="${na.x}" y1="${la.y}" x2="${nb.x}" y2="${lb.y}" stroke="${c}" stroke-width="1.2" opacity="${opacity}"/>`;
  });
  edgesG.innerHTML = edgeHTML;

  // Nodes
  let nodeHTML = '';
  let labelHTML = '';
  let showLabels = true;
  let showFlows = true;
  nodes.forEach(n => {
    const L = layers[n.layer];
    nodeHTML += `
      <g class="node-hit" data-id="${n.id}">
        <circle class="node-circle" cx="${n.x}" cy="${L.y}" r="${n.r}" fill="${L.color}" fill-opacity="0.18" stroke="${L.color}" stroke-width="2" filter="url(#glow)"/>
      </g>`;
    labelHTML += `<text class="label" x="${n.x}" y="${L.y + n.r + 14}">${n.label}</text>`;
  });
  nodesG.innerHTML = nodeHTML;
  labelsG.innerHTML = labelHTML;

  // ---------- INTERACTION ----------
  let pinned = null;
  let camYaw = 0;     // -1..1 mapped to dx
  let dragging = false;
  let dragStart = null;
  let lastTap = null;

  function setStatus(t) { statusText.textContent = t; }

  function showCard(id) {
    const n = nodeMap[id];
    if (!n) return;
    const L = layers[n.layer];
    cardName.textContent = n.label;
    cardDesc.textContent = descs[id] || '';
    cardLayer.textContent = L.name;
    cardLayer.style.background = L.color;
    cardLayer.style.color = '#0a0e1a';
    card.classList.add('visible');
    setStatus('viewing ' + n.label);

    // Highlight node
    document.querySelectorAll('.node-circle').forEach(c => c.classList.remove('pinned'));
    document.querySelectorAll('.node-hit').forEach(g => g.classList.remove('pinned'));
    const hit = document.querySelector(`.node-hit[data-id="${id}"]`);
    if (hit) {
      hit.classList.add('pinned');
      hit.querySelector('.node-circle').classList.add('pinned');
    }
    pinned = id;
  }

  function hideCard() {
    card.classList.remove('visible');
    document.querySelectorAll('.node-circle').forEach(c => c.classList.remove('pinned'));
    document.querySelectorAll('.node-hit').forEach(g => g.classList.remove('pinned'));
    pinned = null;
    setStatus('idle');
  }

  cardClose.addEventListener('click', (e) => {
    e.stopPropagation();
    hideCard();
  });

  // Find node by touch/click coordinates
  function hitTest(clientX, clientY) {
    const rect = svg.getBoundingClientRect();
    // Map client coords into viewBox 400x700
    const x = (clientX - rect.left) * (400 / rect.width);
    const y = (clientY - rect.top)  * (700 / rect.height);
    let best = null, bestD = Infinity;
    for (const n of nodes) {
      const ny = layers[n.layer].y;
      const dx = x - n.x, dy = y - ny;
      const d = Math.sqrt(dx*dx + dy*dy);
      // Big hit radius on mobile (24-32)
      const hr = Math.max(n.r + 14, 24);
      if (d < hr && d < bestD) { bestD = d; best = n; }
    }
    return best;
  }

  // Camera orbit (horizontal drag only — most natural on phone)
  function applyCamera() {
    const maxDx = 25;
    const dx = camYaw * maxDx;
    edgesG.setAttribute('transform', `translate(${dx} 0)`);
    nodesG.setAttribute('transform', `translate(${dx} 0)`);
    labelsG.setAttribute('transform', `translate(${dx} 0)`);
  }

  function onPointerDown(e) {
    dragging = true;
    svg.classList.add('dragging');
    const t = (e.touches ? e.touches[0] : e);
    dragStart = { x: t.clientX, y: t.clientY, t: Date.now(), dx: 0, dy: 0 };
    setStatus('dragging');
  }

  function onPointerMove(e) {
    if (!dragging) return;
    e.preventDefault();
    const t = (e.touches ? e.touches[0] : e);
    dragStart.dx = t.clientX - dragStart.x;
    dragStart.dy = t.clientY - dragStart.y;
    // Map horizontal drag to yaw (-1..1)
    camYaw = Math.max(-1, Math.min(1, dragStart.dx / 120));
    applyCamera();
  }

  function onPointerUp(e) {
    if (!dragging) return;
    dragging = false;
    svg.classList.remove('dragging');
    const moved = Math.abs(dragStart.dx) + Math.abs(dragStart.dy);
    const dt = Date.now() - dragStart.t;
    // Tap = small movement, short time
    if (moved < 8 && dt < 400) {
      const t = (e.changedTouches ? e.changedTouches[0] : e);
      const hit = hitTest(t.clientX, t.clientY);
      if (hit) {
        if (pinned === hit.id) hideCard();
        else showCard(hit.id);
      } else {
        hideCard();
      }
    } else {
      setStatus('idle');
    }
  }

  // Touch
  svg.addEventListener('touchstart', (e) => { onPointerDown(e); }, { passive: false });
  svg.addEventListener('touchmove',  (e) => { onPointerMove(e); }, { passive: false });
  svg.addEventListener('touchend',   (e) => { onPointerUp(e); },   { passive: false });
  svg.addEventListener('touchcancel',(e) => { dragging = false; svg.classList.remove('dragging'); setStatus('idle'); });

  // Mouse (desktop fallback)
  svg.addEventListener('mousedown',  onPointerDown);
  window.addEventListener('mousemove', onPointerMove);
  window.addEventListener('mouseup',  onPointerUp);

  // Pinch zoom (simple)
  let pinchStart = 0;
  svg.addEventListener('gesturestart', (e) => { pinchStart = e.scale; });
  svg.addEventListener('gesturechange', (e) => {
    const s = e.scale / pinchStart;
    svg.style.transform = `scale(${Math.max(0.6, Math.min(2, s))})`;
    svg.style.transformOrigin = 'center center';
  });

  // ---------- CONTROLS ----------
  document.getElementById('btnReset').addEventListener('click', () => {
    camYaw = 0; applyCamera();
    svg.style.transform = '';
    hideCard();
  });

  document.getElementById('btnPulse').addEventListener('click', (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const ring = document.createElement('div');
    ring.className = 'pulse-ring';
    ring.style.left = (r.left + r.width/2 - 40) + 'px';
    ring.style.top  = (r.top + r.height/2 - 40) + 'px';
    document.body.appendChild(ring);
    setTimeout(() => ring.remove(), 1300);
    setStatus('pulse');
    setTimeout(() => { if (!pinned) setStatus('idle'); }, 1200);
  });

  document.getElementById('btnLabels').addEventListener('click', (e) => {
    showLabels = !showLabels;
    labelsG.style.display = showLabels ? '' : 'none';
    e.currentTarget.classList.toggle('active', showLabels);
  });
  document.getElementById('btnLabels').classList.add('active');

  document.getElementById('btnFlows').addEventListener('click', (e) => {
    showFlows = !showFlows;
    edgesG.style.display = showFlows ? '' : 'none';
    e.currentTarget.classList.toggle('active', showFlows);
  });
  document.getElementById('btnFlows').classList.add('active');

  document.getElementById('btnHelp').addEventListener('click', () => {
    showCard('kernel');
  });

  // Initial status
  setStatus('idle');
})();
</script>

</body>
</html>