path: root/mindmap.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>newOS4 v4.5.22 — Architecture Mindmap</title>
    <script src="mermaid.min.js?v=11"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background-color: #0a0a14;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow: auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            padding: 20px;
            border-bottom: 2px solid #00ff88;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 30px;
        }
        .header h1 { color: #00ff88; font-size: 1.8em; }
        .header p { color: #888; margin-top: 8px; font-size: 0.9em; }
        .header .stats { color: #666; font-size: 0.8em; margin-top: 4px; }
        .mermaid {
            background: #0a0a14;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0, 255, 136, 0.1);
            max-width: 100%;
            overflow: auto;
        }
        .legend {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 20px 0 30px;
            padding: 15px 25px;
            background: #12121e;
            border-radius: 10px;
            border: 1px solid #1e1e30;
        }
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85em;
            color: #aaa;
        }
        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .footer {
            margin-top: 40px;
            color: #444;
            font-size: 0.75em;
            text-align: center;
            border-top: 1px solid #1a1a2e;
            padding-top: 20px;
            width: 100%;
        }
        .footer a { color: #00ff88; text-decoration: none; }
        .tab-bar {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
            background: #12121e;
            border-radius: 10px;
            padding: 4px;
            border: 1px solid #1e1e30;
        }
        .tab-btn {
            padding: 8px 20px;
            background: transparent;
            color: #888;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em;
            transition: all 0.2s;
        }
        .tab-btn:hover { color: #e0e0e0; background: #1e1e30; }
        .tab-btn.active { color: #00ff88; background: #00ff8818; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
    </style>
</head>
<body>
    <div class="header">
        <h1>🧠 newOS4 v4.5.22</h1>
        <p>Full architecture mindmap — 62 nodes across 5 layers</p>
        <div class="stats">39 modules · 266 commands · 7 core services · 18 ext modules</div>
    </div>

    <div class="legend">
        <div class="legend-item"><span class="legend-dot" style="background:#818cf8"></span> Terminal Core</div>
        <div class="legend-item"><span class="legend-dot" style="background:#22d3ee"></span> Core Modules</div>
        <div class="legend-item"><span class="legend-dot" style="background:#34d399"></span> Ext Modules</div>
        <div class="legend-item"><span class="legend-dot" style="background:#fbbf24"></span> Data Layer</div>
        <div class="legend-item"><span class="legend-dot" style="background:#e879f9"></span> AI Integration</div>
    </div>

    <div class="tab-bar">
        <button class="tab-btn active" onclick="switchTab('mermaid')">📊 Mermaid</button>
        <button class="tab-btn" onclick="switchTab('mindmap')">🌳 Console</button>
    </div>

    <div id="tab-mermaid" class="tab-content active">
        <pre class="mermaid">
mindmap
  root(("newOS4 v4.5.22 — WebX11 Module System"))
    Terminal Core
      WebX11Terminal - input/output/autocomplete
      WebX11SecurityManager - 4-level security
      VirtualFileSystem - localStorage-backed in-memory FS
      ModuleManager - register/load/discover modules
      OllamaManager - AI provider bridge
      ConfigRegistry - unified config command
      SecretVault - encrypted secrets
    Core Modules
      SystemModule - help, mem, status, checkpoint
      FileSystemModule - ls, cat, rm, mv, cp, trash
      ModuleManagerModule - modules, loadmod
      ConfigManagerModule - config-set, list, export
      OllamaModule - ollama, models, pull, run
      WebFetcherModule - fetch, web, extract
      WebXAIAliasModule - webxai, wx, webx
      SearXNGModule - search, s, images, videos
      ChatStudioModule - chat
      AgentRegistryModule - agent-list, contract-register
      LeaseModule - lease-create, revoke, list
      OrchestratorModule - a2a, consensus, pipeline
      NeuralVFSModule - nvfs-index, resolve, alias
      SandboxModule - sandbox-run, status
      MemoryGraphModule - memgraph-search, stats
      PredictorModule - predict, status
      WorldModelModule - world-model, ask, refresh
      ServerMonitorModule - server, servers, system-health
      SimpleGUIModule - gui, gui-button, run
    Ext Modules
      WebDAVModule - webdav-ls, push, pull, backup
      SkillPackCoreModule - skill-list, view, create
      FloatingModule - floating-add, remove, pos, toggle
      EditorModule - edit
      DiffModule - diff
      AliasModule - alias, unalias, ll, h, cls
      ShellModule - sh, export, script, set
      FinderModule - find
      CryptoGzipModule - gzip, gunzip, encrypt
      BusyBoxModule - which, env, date, cal, base64
      CalcModule - calc
      VoiceModule - voice
      CronModule - cron-every, list, stop
      ThemeModule - theme
      WpmModule - wpm
      MindmapModule - mindmap (this tool)
      TutorialModule - tutorial
      FileManagerModule - files, preview
    Data Layer
      VirtualFileSystem (in-memory tree + localStorage)
      SecretVault (encrypted credential storage)
      Neural VFS (semantic indexing + fuzzy search)
      Memory Graph (entity-relation knowledge graph)
      World Model (runtime state synthesis)
      Config Registry (unified config API)
      Session System (save/load/export state)
    AI Integration
      WebX11AIAssistantModule (agent loop + tool calling)
      OllamaManager (model switching, context)
      Guardrail Layer (policy, shadow mode, violations)
      Agent Registry (A2A protocol, orchestration)
      Predictor (usage prediction, smart suggestions)
        </pre>
    </div>

    <div id="tab-mindmap" class="tab-content">
        <div style="background:#0a0a14;border-radius:15px;padding:20px;border:1px solid #1e1e30;font-family:monospace;font-size:0.85em;line-height:1.6;max-width:800px">
<pre style="color:#e0e0e0">
<span style="color:#e0e0e0">ROOT: newOS4 v4.5.22 — WebX11 Module System</span>
<span style="color:#818cf8">  Terminal Core (7 components)</span>
<span style="color:#818cf8">    └ WebX11Terminal — input/output/autocomplete</span>
<span style="color:#818cf8">    └ WebX11SecurityManager — 4-level security</span>
<span style="color:#818cf8">    └ VirtualFileSystem — localStorage-backed in-memory FS</span>
<span style="color:#818cf8">    └ ModuleManager — register/load/discover modules</span>
<span style="color:#818cf8">    └ OllamaManager — AI provider bridge</span>
<span style="color:#818cf8">    └ ConfigRegistry — unified config command</span>
<span style="color:#818cf8">    └ SecretVault — encrypted secrets</span>
<span style="color:#22d3ee">  Core Modules (19 modules)</span>
<span style="color:#22d3ee">    └ SystemModule — help, mem, status, checkpoint</span>
<span style="color:#22d3ee">    └ FileSystemModule — ls, cat, rm, mv, cp, trash</span>
<span style="color:#22d3ee">    └ ModuleManagerModule — modules, loadmod</span>
<span style="color:#22d3ee">    └ ConfigManagerModule — config-set, list, export</span>
<span style="color:#22d3ee">    └ OllamaModule — ollama, models, pull, run</span>
<span style="color:#22d3ee">    └ WebFetcherModule — fetch, web, extract</span>
<span style="color:#22d3ee">    └ WebXAIAliasModule — webxai, wx, webx</span>
<span style="color:#22d3ee">    └ SearXNGModule — search, s, images, videos</span>
<span style="color:#22d3ee">    └ ChatStudioModule — chat</span>
<span style="color:#22d3ee">    └ AgentRegistryModule — agent-list, contract-register</span>
<span style="color:#22d3ee">    └ LeaseModule — lease-create, revoke, list</span>
<span style="color:#22d3ee">    └ OrchestratorModule — a2a, consensus, pipeline</span>
<span style="color:#22d3ee">    └ NeuralVFSModule — nvfs-index, resolve, alias</span>
<span style="color:#22d3ee">    └ SandboxModule — sandbox-run, status</span>
<span style="color:#22d3ee">    └ MemoryGraphModule — memgraph-search, stats</span>
<span style="color:#22d3ee">    └ PredictorModule — predict, status</span>
<span style="color:#22d3ee">    └ WorldModelModule — world-model, ask, refresh</span>
<span style="color:#22d3ee">    └ ServerMonitorModule — server, servers, system-health</span>
<span style="color:#22d3ee">    └ SimpleGUIModule — gui, gui-button, run</span>
<span style="color:#34d399">  Ext Modules (18 modules)</span>
<span style="color:#34d399">    └ WebDAVModule — webdav-ls, push, pull, backup</span>
<span style="color:#34d399">    └ SkillPackCoreModule — skill-list, view, create</span>
<span style="color:#34d399">    └ FloatingModule — floating-add, remove, pos, toggle</span>
<span style="color:#34d399">    └ EditorModule — edit</span>
<span style="color:#34d399">    └ DiffModule — diff</span>
<span style="color:#34d399">    └ AliasModule — alias, unalias, ll, h, cls</span>
<span style="color:#34d399">    └ ShellModule — sh, export, script, set</span>
<span style="color:#34d399">    └ FinderModule — find</span>
<span style="color:#34d399">    └ CryptoGzipModule — gzip, gunzip, encrypt</span>
<span style="color:#34d399">    └ BusyBoxModule — which, env, date, cal, base64</span>
<span style="color:#34d399">    └ CalcModule — calc</span>
<span style="color:#34d399">    └ VoiceModule — voice</span>
<span style="color:#34d399">    └ CronModule — cron-every, list, stop</span>
<span style="color:#34d399">    └ ThemeModule — theme</span>
<span style="color:#34d399">    └ WpmModule — wpm</span>
<span style="color:#34d399">    └ MindmapModule — mindmap (this tool)</span>
<span style="color:#34d399">    └ TutorialModule — tutorial</span>
<span style="color:#34d399">    └ FileManagerModule — files, preview</span>
<span style="color:#fbbf24">  Data Layer (7 components)</span>
<span style="color:#fbbf24">    └ VirtualFileSystem (in-memory tree + localStorage)</span>
<span style="color:#fbbf24">    └ SecretVault (encrypted credential storage)</span>
<span style="color:#fbbf24">    └ Neural VFS (semantic indexing + fuzzy search)</span>
<span style="color:#fbbf24">    └ Memory Graph (entity-relation knowledge graph)</span>
<span style="color:#fbbf24">    └ World Model (runtime state synthesis)</span>
<span style="color:#fbbf24">    └ Config Registry (unified config API)</span>
<span style="color:#fbbf24">    └ Session System (save/load/export state)</span>
<span style="color:#e879f9">  AI Integration (5 modules)</span>
<span style="color:#e879f9">    └ WebX11AIAssistantModule (agent loop + tool calling)</span>
<span style="color:#e879f9">    └ OllamaManager (model switching, context)</span>
<span style="color:#e879f9">    └ Guardrail Layer (policy, shadow mode, violations)</span>
<span style="color:#e879f9">    └ Agent Registry (A2A protocol, orchestration)</span>
<span style="color:#e879f9">    └ Predictor (usage prediction, smart suggestions)</span>
</pre>
        </div>
    </div>

    <div class="footer">
        <p>newOS4 · WebX11 Module System · <a href="/spaces/newos4/">main.html</a></p>
        <p>Generated from live 266-command module scan · Agando · 2026-06-05</p>
    </div>

    <script>
        function switchTab(name) {
            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('tab-' + name).classList.add('active');
            document.querySelector('.tab-btn[onclick*="' + name + '"]').classList.add('active');
        }
        window.addEventListener('load', function() {
            if (typeof mermaid !== 'undefined') {
                try { mermaid.initialize({ startOnLoad: true, theme: 'base', themeVariables: { background: '#0a0a14', primaryColor: '#00ff88', primaryBorderColor: '#00ff88', primaryTextColor: '#e0e0e0', lineColor: '#2a2a4a', secondaryColor: '#12121e', tertiaryColor: '#1a1a2e', fontFamily: 'monospace' } }); } catch(e) {}
            }
        });
    </script>
</body>
</html>