aboutsummaryrefslogtreecommitdiff
path: root/downloads/memory/newos-architecture-3d.html
diff options
context:
space:
mode:
authorAgando <roduccomm@gmail.com>2026-07-09 06:00:32 +0200
committerAgando <roduccomm@gmail.com>2026-07-09 06:00:32 +0200
commitcf7461ffeb4f53f3f50c9c692a2e4fdcecf17e82 (patch)
treee7780cd41271381cf108c9c81d71a3cb65cfd555 /downloads/memory/newos-architecture-3d.html
parentea4d09fb5ccba12ed774fcf7c913edfa1e6a851a (diff)
auto: 2026-07-09_06:00 changes
Diffstat (limited to 'downloads/memory/newos-architecture-3d.html')
-rw-r--r--downloads/memory/newos-architecture-3d.html612
1 files changed, 612 insertions, 0 deletions
diff --git a/downloads/memory/newos-architecture-3d.html b/downloads/memory/newos-architecture-3d.html
new file mode 100644
index 0000000..c1f30e5
--- /dev/null
+++ b/downloads/memory/newos-architecture-3d.html
@@ -0,0 +1,612 @@
+<!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>