synabun 1.3.0 → 2.0.0-beta

package/neural-interface/public/variant/2d/main.js

@@ -1,521 +1,556 @@
-// ═══════════════════════════════════════════
-// SynaBun Neural Interface — 2D Variant Entry Point
-// ═══════════════════════════════════════════
-//
-// Registers the 2D variant, imports all shared & variant modules,
-// wires event listeners, and boots the application.
-
-// ── Storage (self-hydrating — importing it populates the cache) ──
-import { storage } from '../../shared/storage.js';
-
-// ── Shared foundation ──
-import { state, emit, on } from '../../shared/state.js';
-import { registerVariant, registerMenuItem, registerHelpSection } from '../../shared/registry.js';
-
-import { injectSharedHTML } from '../../shared/html-shell.js';
-import { KEYS } from '../../shared/constants.js';
-import { normalizeNodes } from '../../shared/utils.js';
-import { initI18n, t } from '../../shared/i18n.js';
-
-// ── Shared UI modules (side-effect: each registers its own event listeners) ──
-import { initTooltip } from '../../shared/ui-tooltip.js';
-import { initPanelSystem, initPinToggle, clampPanelsToViewport } from '../../shared/ui-panels.js';
-import { initLoading, showLoadingError, hideLoading } from '../../shared/ui-loading.js';
-import { initNavbar } from '../../shared/ui-navbar.js';
-import { initMenubar } from '../../shared/ui-menubar.js';
-import { initSearch } from '../../shared/ui-search.js';
-import { buildCategorySidebar, initSidebar, loadCategories } from '../../shared/ui-sidebar.js';
-import { openMemoryCard, restoreOpenCards, initDetailPanel, setDetailCallbacks } from '../../shared/ui-detail.js';
-import { initSettings, restoreInterfaceConfig, restoreSkin, loadIfaceConfig } from '../../shared/ui-settings.js';
-import { initTrash } from '../../shared/ui-trash.js';
-import { initBookmarks } from '../../shared/ui-bookmarks.js';
-import { initResume } from '../../shared/ui-resume.js';
-import { initLayouts } from '../../shared/ui-layouts.js';
-import { initHelp } from '../../shared/ui-help.js';
-import { initMultiSelect } from '../../shared/ui-multiselect.js';
-import { updateStats, initStats } from '../../shared/ui-stats.js';
-import { initExplorer } from '../../shared/ui-explorer.js';
-import { initFileExplorer } from '../../shared/ui-file-explorer.js';
-import { initSkillsStudio } from '../../shared/ui-skills.js';
-import { initTerminal } from '../../shared/ui-terminal.js';
-import { initLink } from '../../shared/ui-link.js';
-import { initWhiteboard } from '../../shared/ui-whiteboard.js';
-import { initCostWidget } from '../../shared/ui-cost-widget.js';
-import { initGames, clearGameOnLoad } from '../../shared/ui-games.js';
-import { initWorkspaces } from '../../shared/ui-workspaces.js';
-import { initInvite } from '../../shared/ui-invite.js';
-import { initSync } from '../../shared/ui-sync.js';
-import { initKeybinds, registerAction, getDisplayKey } from '../../shared/ui-keybinds.js';
-import { initTutorial } from '../../shared/ui-tutorial.js';
-import { initImageGallery } from '../../shared/ui-image-gallery.js';
-
-// ── 2D variant modules ──
-import { gfx, saveGfxConfig } from './gfx.js';
-import './settings-gfx.js'; // side-effect: self-registers Graphics tab
-import { initAutomationStudio } from '../../shared/ui-automation-studio.js';
-import { initCommandRunner } from '../../shared/ui-command-runner.js';
-import { stopBackground } from './background.js';
-import { initMinimap, drawMinimap, toggleMinimap, isMinimapVisible, forceHideMinimap, restoreMinimap } from './minimap.js';
-import { initLasso, clearLasso } from './lasso.js';
-import { initContextMenu, hideContextMenu } from './context-menu.js';
-import {
-  initGraph, getGraph, applyGraphData,
-  preloadCategoryLogos, scheduleGraphRemoval, cancelScheduledRemoval,
-  refreshGraph, reheatSimulation, getAllCards,
-  stopAnimation, startAnimation,
-  pauseInteraction, resumeInteraction,
-} from './graph.js';
-
-
-// ═══════════════════════════════════════════
-// 1. REGISTER VARIANT
-// ═══════════════════════════════════════════
-
-registerVariant({
-  variant: '2d',
-  capabilities: ['minimap', 'lasso', 'context-menu', 'orbital-layout'],
-});
-
-
-// ═══════════════════════════════════════════
-// 2. REGISTER VARIANT-SPECIFIC MENU ITEMS
-// ═══════════════════════════════════════════
-
-registerMenuItem({
-  menu: 'view',
-  order: 25,
-  type: 'toggle',
-  id: 'menu-region-glow',
-  label: 'Region Glow',
-  init: (el) => {
-    el.classList.toggle('active', gfx.regionGlowOpacity > 0);
-    el.addEventListener('click', () => {
-      if (gfx.regionGlowOpacity > 0) {
-        gfx.regionGlowOpacity = 0;
-      } else {
-        gfx.regionGlowOpacity = 0.05;
-      }
-      saveGfxConfig(gfx);
-      el.classList.toggle('active', gfx.regionGlowOpacity > 0);
-    });
-  },
-});
-
-registerMenuItem({
-  menu: 'view',
-  order: 26,
-  type: 'toggle',
-  id: 'menu-minimap',
-  label: 'Minimap',
-  shortcut: 'M',
-  init: (el) => {
-    // Set initial active state (minimap starts visible)
-    el.classList.add('active');
-
-    const doToggle = () => {
-      toggleMinimap();
-      el.classList.toggle('active', isMinimapVisible());
-    };
-
-    el.addEventListener('click', doToggle);
-
-    // Register keybind action so the central dispatcher can trigger it
-    registerAction('toggle-minimap', doToggle);
-  },
-});
-
-
-// ═══════════════════════════════════════════
-// 3. REGISTER VARIANT HELP SECTION
-// ═══════════════════════════════════════════
-
-registerHelpSection({
-  order: 50,
-  html: `
-    <h4>2D Canvas Controls</h4>
-    <div class="help-key-row"><span class="help-key">Mouse Drag</span> Pan the canvas</div>
-    <div class="help-key-row"><span class="help-key">Scroll</span> Zoom in/out</div>
-    <div class="help-key-row"><span class="help-key">Click Card</span> Select &amp; open detail</div>
-    <div class="help-key-row"><span class="help-key">Click Category</span> Zoom to category</div>
-    <div class="help-key-row"><span class="help-key">Double-Click Card</span> Unpin card</div>
-    <div class="help-key-row"><span class="help-key">Double-Click BG</span> Zoom to fit all</div>
-    <div class="help-key-row"><span class="help-key">Right-Click Card</span> Context menu</div>
-    <div class="help-key-row"><span class="help-key">Shift + Drag</span> Lasso select</div>
-    <div class="help-key-row"><span class="help-key">Drag Card</span> Move &amp; pin card</div>
-    <div class="help-key-row"><span class="help-key">Drag Category</span> Move entire group</div>
-  `,
-});
-
-
-// ═══════════════════════════════════════════
-// 4. LOAD TRANSLATIONS & INJECT SHARED HTML
-// ═══════════════════════════════════════════
-
-await initI18n();
-injectSharedHTML();
-
-
-// ═══════════════════════════════════════════
-// 5. WIRE EVENT BUS — connect shared events to variant actions
-// ═══════════════════════════════════════════
-
-// When shared UI emits graph:navigate, center on node
-on('graph:navigate', ({ node, zoom }) => {
-  const g = getGraph();
-  if (!node || !g) return;
-  const cards = getAllCards();
-  const card = cards.find(c => c.node.id === node.id);
-  if (card) {
-    g.centerAt(card.x, card.y, 500);
-    if (zoom === 'close') g.zoom(4, 500);
-  }
-});
-
-// Data reload (e.g. after OpenClaw bridge sync)
-on('data:reload', async () => {
-  try {
-    await refreshGraph();
-    const presentCats = new Set(state.allNodes.map(n => n.payload.category));
-    buildCategorySidebar(presentCats);
-    updateStats();
-  } catch (err) {
-    console.error('data:reload failed:', err);
-  }
-});
-
-// Categories changed
-on('categories-changed', () => {
-  applyGraphData();
-});
-
-// Search apply/clear
-on('search:apply', () => {
-  // No layout recompute needed — just re-renders with dimming
-});
-
-on('search:clear', () => {
-  // No layout recompute needed
-});
-
-// Link mode changes — just triggers re-render (no API call needed)
-on('link-mode-changed', () => {
-  // Render loop picks up state.linkMode automatically
-});
-
-on('link-type-changed', () => {
-  // Render loop picks up state.linkTypeFilter automatically
-});
-
-// Node selection — center camera on selected card + open detail card
-on('node-selected', (node) => {
-  if (!node) return;
-  const g = getGraph();
-  if (g) {
-    const cards = getAllCards();
-    const card = cards.find(c => c.node.id === node.id);
-    if (card) {
-      g.centerAt(card.x, card.y, 500);
-    }
-  }
-  openMemoryCard(node);
-});
-
-// Graph refresh
-on('graph:refresh', () => {
-  applyGraphData();
-});
-
-// Category removal scheduling
-on('category:schedule-removal', () => {
-  scheduleGraphRemoval();
-});
-
-on('category:cancel-removal', () => {
-  cancelScheduledRemoval();
-});
-
-// Layout commands
-on('layout:reset', () => {
-  reheatSimulation(); // clears saved positions + recomputes layout
-});
-
-on('layout:frame', () => {
-  const g = getGraph();
-  if (g) g.zoomToFit(400, 60);
-});
-
-// Stats update
-on('stats-changed', () => {
-  updateStats();
-});
-
-// Context menu hide
-on('context-menu-hide', () => {
-  hideContextMenu();
-});
-
-// Render frame post — draw minimap
-on('render-frame-post', () => {
-  if (isMinimapVisible()) drawMinimap();
-});
-
-
-// ═══════════════════════════════════════════
-// 6. DETAIL PANEL CALLBACKS
-// ═══════════════════════════════════════════
-
-setDetailCallbacks({
-  navigateToNode: (node) => {
-    const g = getGraph();
-    if (!g || !node) return;
-    const cards = getAllCards();
-    const card = cards.find(c => c.node.id === node.id);
-    if (card) g.centerAt(card.x, card.y, 500);
-  },
-  refreshGraph: () => applyGraphData(),
-  scheduleRemoval: () => scheduleGraphRemoval(),
-  cancelRemoval: () => cancelScheduledRemoval(),
-});
-
-
-// ═══════════════════════════════════════════
-// 7. BOOT SEQUENCE
-// ═══════════════════════════════════════════
-
-async function boot() {
-  try {
-    // Restore interface customization + active skin before anything renders
-    restoreInterfaceConfig();
-    restoreSkin();
-
-    // Pre-flight health check
-    try {
-      const healthRes = await fetch('/api/health');
-      const health = await healthRes.json();
-      if (!health.ok) {
-        const messages = {
-          db_missing:         [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
-          db_error:           [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
-          remote_unreachable: [t('loading.health.remoteUnreachable.title'), health.detail || t('loading.health.remoteUnreachable.sub')],
-          auth_error:         [t('loading.health.authError.title'), health.detail || t('loading.health.authError.sub')],
-        };
-        const [title, sub] = messages[health.reason] || [t('loading.health.connectionError.title'), health.detail || t('loading.health.connectionError.sub')];
-        showLoadingError(title, sub, !!health.canAutoStart);
-        return;
-      }
-    } catch {}
-
-    // Fetch all memories
-    const res = await fetch('/api/memories');
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const data = await res.json();
-
-    state.allNodes = normalizeNodes(data.nodes);
-    state.allLinks = data.links;
-
-    // Fetch category definitions
-    await loadCategories();
-
-    // Discover all categories
-    const presentCats = new Set(state.allNodes.map(n => n.payload.category));
-    state.activeCategories = new Set([...presentCats, ...state.allCategoryNames]);
-
-    // Build category sidebar
-    buildCategorySidebar(presentCats);
-
-    // Init the 2D canvas renderer (skip if visualization is disabled)
-    const container = document.getElementById('graph-container');
-    const vizEnabled = loadIfaceConfig().visualizationEnabled !== false;
-    let g = null;
-
-    if (vizEnabled && !getGraph()) {
-      g = initGraph(container, {
-        onRenderFramePost: () => {
-          if (isMinimapVisible()) drawMinimap();
-        },
-      });
-
-      // Init overlays
-      initMinimap(g);
-      initLasso(g);
-      initContextMenu(g);
-    }
-
-    // Apply data to compute layout and start rendering
-    applyGraphData();
-
-    // Update stats
-    updateStats();
-
-    // Signal data is ready
-    emit('data-loaded', data);
-
-    // Restore previously open memory cards
-    restoreOpenCards();
-
-    // Handle view-switch handoff
-    const switchNodeId = sessionStorage.getItem('neural-selected-node-switch');
-    if (switchNodeId) {
-      sessionStorage.removeItem('neural-selected-node-switch');
-      const node = state.allNodes.find(n => n.id === switchNodeId);
-      if (node) {
-        state.selectedNodeId = switchNodeId;
-        openMemoryCard(node);
-        setTimeout(() => {
-          if (g) {
-            const cards = getAllCards();
-            const card = cards.find(c => c.node.id === switchNodeId);
-            if (card) g.centerAt(card.x, card.y, 500);
-          }
-        }, 600);
-      }
-    }
-
-    // Fetch trash count
-    try { emit('trash:refresh'); } catch {}
-
-    // Fade out loading
-    hideLoading(400);
-
-    // Mark boot complete
-    _bootComplete = true;
-
-  } catch (err) {
-    console.error('Init error:', err);
-    const isNetworkError = err.message === 'Failed to fetch' || err.name === 'TypeError';
-    showLoadingError(
-      isNetworkError ? t('loading.serverOffline') : t('loading.connectionFailed'),
-      isNetworkError ? t('loading.serverNotRunning') : err.message,
-      false,
-      isNetworkError
-    );
-  }
-}
-
-
-// ═══════════════════════════════════════════
-// 8. INIT ALL SHARED UI SYSTEMS
-// ═══════════════════════════════════════════
-
-initLoading({ onInit: boot });
-initKeybinds();
-initTooltip();
-initPanelSystem();
-initPinToggle();
-initNavbar();
-initMenubar();
-initSearch();
-initSidebar();
-initDetailPanel();
-initSettings();
-initTrash();
-initBookmarks();
-initResume();
-initLayouts();
-initWorkspaces();
-initInvite();
-initSync();
-initHelp();
-initMultiSelect();
-initStats();
-initExplorer();
-initFileExplorer();
-initSkillsStudio();
-initAutomationStudio();
-initImageGallery();
-initCommandRunner();
-initTerminal();
-initLink();
-clearGameOnLoad();
-initWhiteboard();
-initCostWidget();
-initGames();
-initTutorial();
-
-// View switch handler
-{
-  const switchBtn = document.querySelector('.view-toggle-btn:not(.active)');
-  if (switchBtn) {
-    switchBtn.addEventListener('click', (e) => {
-      e.preventDefault();
-      if (state.selectedNodeId) sessionStorage.setItem('neural-selected-node-switch', state.selectedNodeId);
-      window.location.href = switchBtn.getAttribute('href');
-    });
-  }
-}
-
-// Window resize handler
-window.addEventListener('resize', () => {
-  clampPanelsToViewport();
-});
-
-// Visualization toggle — pause/resume 2D rendering
-let _bootComplete = false;
-on('viz:toggle', (enabled) => {
-  if (!_bootComplete) return;
-  if (enabled) {
-    if (!getGraph()) {
-      // First-time init if graph was never created (was disabled at boot)
-      const container = document.getElementById('graph-container');
-      const g = initGraph(container, {
-        onRenderFramePost: () => {
-          if (isMinimapVisible()) drawMinimap();
-        },
-      });
-      initMinimap(g);
-      initLasso(g);
-      initContextMenu(g);
-      applyGraphData();
-    }
-    // Show the main canvas (it's position:fixed, not affected by container opacity)
-    const mainCanvas = document.getElementById('canvas-main');
-    if (mainCanvas) mainCanvas.classList.remove('viz-hidden-2d');
-    // Restart the render loop
-    startAnimation();
-    // Restore minimap to user's preference
-    restoreMinimap();
-  } else {
-    // Stop the render loop entirely — no wasted frames in focus mode
-    stopAnimation();
-    stopBackground();
-    // Hide the main canvas when entering focus mode
-    const mainCanvas = document.getElementById('canvas-main');
-    if (mainCanvas) mainCanvas.classList.add('viz-hidden-2d');
-    // Always hide minimap in focus mode
-    forceHideMinimap();
-  }
-});
-
-// Focus mode isolation — zero-resource mode for 2D
-on('focus:enter', () => {
-  state.hoveredNodeId = null;
-  clearLasso();
-  hideContextMenu();
-  pauseInteraction();
-});
-
-on('focus:exit', () => {
-  resumeInteraction();
-});
-
-// Workspace scene snapshot (2D)
-on('workspace:get-scene', (callback) => {
-  const graph = getGraph();
-  if (!graph) return callback({ nodePositions: {}, camera: null });
-  const gd = graph.graphData();
-  const positions = {};
-  for (const n of gd.nodes) {
-    if (n.x != null) positions[n.id] = { x: n.x, y: n.y };
-  }
-  callback({ nodePositions: positions, camera: null });
-});
-
-on('workspace:restore-scene', ({ nodePositions }) => {
-  if (nodePositions && Object.keys(nodePositions).length > 0) {
-    storage.setItem(KEYS.NODE_POS_2D, JSON.stringify(nodePositions));
-  }
-  applyGraphData();
-});
-
-// Boot
-boot();
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — 2D Variant Entry Point
+// ═══════════════════════════════════════════
+//
+// Registers the 2D variant, imports all shared & variant modules,
+// wires event listeners, and boots the application.
+
+// ── Storage (self-hydrating — importing it populates the cache) ──
+import { storage } from '../../shared/storage.js';
+import { posStore } from '../../shared/node-positions-store.js';
+
+// ── Shared foundation ──
+import { state, emit, on } from '../../shared/state.js';
+import { registerVariant, registerMenuItem, registerHelpSection } from '../../shared/registry.js';
+
+import { injectSharedHTML } from '../../shared/html-shell.js';
+import { KEYS } from '../../shared/constants.js';
+import { normalizeNodes } from '../../shared/utils.js';
+import { initI18n, t } from '../../shared/i18n.js';
+
+// ── Shared UI modules (side-effect: each registers its own event listeners) ──
+import { initTooltip } from '../../shared/ui-tooltip.js';
+import { initPanelSystem, initPinToggle, clampPanelsToViewport } from '../../shared/ui-panels.js';
+import { initLoading, showLoadingError, hideLoading } from '../../shared/ui-loading.js';
+import { initNavbar } from '../../shared/ui-navbar.js';
+import { initMenubar } from '../../shared/ui-menubar.js';
+import { initSearch } from '../../shared/ui-search.js';
+import { buildCategorySidebar, initSidebar, loadCategories } from '../../shared/ui-sidebar.js';
+import { openMemoryCard, restoreOpenCards, initDetailPanel, setDetailCallbacks } from '../../shared/ui-detail.js';
+import { initSettings, restoreInterfaceConfig, restoreSkin, loadIfaceConfig } from '../../shared/ui-settings.js';
+import { initTrash } from '../../shared/ui-trash.js';
+import { initBookmarks } from '../../shared/ui-bookmarks.js';
+import { initResume } from '../../shared/ui-resume.js';
+import { initLayouts } from '../../shared/ui-layouts.js';
+import { initHelp } from '../../shared/ui-help.js';
+import { initMultiSelect, clearMultiSelect } from '../../shared/ui-multiselect.js';
+import { updateStats, initStats } from '../../shared/ui-stats.js';
+import { initExplorer } from '../../shared/ui-explorer.js';
+import { initFileExplorer } from '../../shared/ui-file-explorer.js';
+import { initSkillsStudio } from '../../shared/ui-skills.js';
+import { initStyleGuide } from '../../shared/ui-styleguide.js';
+import { initTerminal } from '../../shared/ui-terminal.js';
+import { initLink } from '../../shared/ui-link.js';
+import { initWhiteboard } from '../../shared/ui-whiteboard.js';
+import { initCostWidget } from '../../shared/ui-cost-widget.js';
+import { initGames, clearGameOnLoad } from '../../shared/ui-games.js';
+import { initWorkspaces } from '../../shared/ui-workspaces.js';
+import { initInvite } from '../../shared/ui-invite.js';
+import { initSync } from '../../shared/ui-sync.js';
+import { initKeybinds, registerAction, getDisplayKey } from '../../shared/ui-keybinds.js';
+import { initTutorial } from '../../shared/ui-tutorial.js';
+import { initImageGallery } from '../../shared/ui-image-gallery.js';
+import { initScheduleQueue } from '../../shared/ui-schedule-queue.js';
+
+// ── 2D variant modules ──
+import { gfx, saveGfxConfig } from './gfx.js';
+import './settings-gfx.js'; // side-effect: self-registers Graphics tab
+import { initAutomationStudio } from '../../shared/ui-automation-studio.js';
+import { initSchedulesStudio } from '../../shared/ui-schedules-studio.js';
+import { initNativeLoopRouter } from '../../shared/ui-native-loop-router.js';
+import { initCommandRunner } from '../../shared/ui-command-runner.js';
+import { stopBackground } from './background.js';
+import { initMinimap, drawMinimap, toggleMinimap, isMinimapVisible, forceHideMinimap, restoreMinimap } from './minimap.js';
+import { initLasso, clearLasso } from './lasso.js';
+import { initContextMenu, hideContextMenu } from './context-menu.js';
+import {
+  initGraph, getGraph, applyGraphData,
+  preloadCategoryLogos, scheduleGraphRemoval, cancelScheduledRemoval,
+  refreshGraph, reheatSimulation, getAllCards,
+  stopAnimation, startAnimation,
+  pauseInteraction, resumeInteraction,
+} from './graph.js';
+
+
+// ═══════════════════════════════════════════
+// 1. REGISTER VARIANT
+// ═══════════════════════════════════════════
+
+registerVariant({
+  variant: '2d',
+  capabilities: ['minimap', 'lasso', 'context-menu', 'orbital-layout'],
+});
+
+
+// ═══════════════════════════════════════════
+// 2. REGISTER VARIANT-SPECIFIC MENU ITEMS
+// ═══════════════════════════════════════════
+
+registerMenuItem({
+  menu: 'view',
+  order: 25,
+  type: 'toggle',
+  id: 'menu-region-glow',
+  label: 'Region Glow',
+  init: (el) => {
+    el.classList.toggle('active', gfx.regionGlowOpacity > 0);
+    el.addEventListener('click', () => {
+      if (gfx.regionGlowOpacity > 0) {
+        gfx.regionGlowOpacity = 0;
+      } else {
+        gfx.regionGlowOpacity = 0.05;
+      }
+      saveGfxConfig(gfx);
+      el.classList.toggle('active', gfx.regionGlowOpacity > 0);
+    });
+  },
+});
+
+registerMenuItem({
+  menu: 'view',
+  order: 26,
+  type: 'toggle',
+  id: 'menu-minimap',
+  label: 'Minimap',
+  shortcut: 'M',
+  init: (el) => {
+    // Set initial active state (minimap starts visible)
+    el.classList.add('active');
+
+    const doToggle = () => {
+      toggleMinimap();
+      el.classList.toggle('active', isMinimapVisible());
+    };
+
+    el.addEventListener('click', doToggle);
+
+    // Register keybind action so the central dispatcher can trigger it
+    registerAction('toggle-minimap', doToggle);
+  },
+});
+
+
+// ═══════════════════════════════════════════
+// 3. REGISTER VARIANT HELP SECTION
+// ═══════════════════════════════════════════
+
+registerHelpSection({
+  order: 50,
+  html: `
+    <h4>2D Canvas Controls</h4>
+    <div class="help-key-row"><span class="help-key">Mouse Drag</span> Pan the canvas</div>
+    <div class="help-key-row"><span class="help-key">Scroll</span> Zoom in/out</div>
+    <div class="help-key-row"><span class="help-key">Click Card</span> Select &amp; open detail</div>
+    <div class="help-key-row"><span class="help-key">Click Category</span> Zoom to category</div>
+    <div class="help-key-row"><span class="help-key">Double-Click Card</span> Unpin card</div>
+    <div class="help-key-row"><span class="help-key">Double-Click BG</span> Zoom to fit all</div>
+    <div class="help-key-row"><span class="help-key">Right-Click Card</span> Context menu</div>
+    <div class="help-key-row"><span class="help-key">Shift + Drag</span> Lasso select</div>
+    <div class="help-key-row"><span class="help-key">Drag Card</span> Move &amp; pin card</div>
+    <div class="help-key-row"><span class="help-key">Drag Category</span> Move entire group</div>
+  `,
+});
+
+
+// ═══════════════════════════════════════════
+// 4. LOAD TRANSLATIONS & INJECT SHARED HTML
+// ═══════════════════════════════════════════
+
+await initI18n();
+injectSharedHTML();
+
+
+// ═══════════════════════════════════════════
+// 5. WIRE EVENT BUS — connect shared events to variant actions
+// ═══════════════════════════════════════════
+
+// When shared UI emits graph:navigate, center on node
+on('graph:navigate', ({ node, zoom }) => {
+  const g = getGraph();
+  if (!node || !g) return;
+  const cards = getAllCards();
+  const card = cards.find(c => c.node.id === node.id);
+  if (card) {
+    g.centerAt(card.x, card.y, 500);
+    if (zoom === 'close') g.zoom(4, 500);
+  }
+});
+
+// Data reload (e.g. after OpenClaw bridge sync)
+on('data:reload', async () => {
+  try {
+    await refreshGraph();
+    const presentCats = new Set(state.allNodes.map(n => n.payload.category));
+    buildCategorySidebar(presentCats);
+    updateStats();
+  } catch (err) {
+    console.error('data:reload failed:', err);
+  }
+});
+
+// Categories changed
+on('categories-changed', () => {
+  applyGraphData();
+});
+
+// Search apply/clear
+on('search:apply', () => {
+  // No layout recompute needed — just re-renders with dimming
+});
+
+on('search:clear', () => {
+  // No layout recompute needed
+});
+
+// Link mode changes — just triggers re-render (no API call needed)
+on('link-mode-changed', () => {
+  // Render loop picks up state.linkMode automatically
+});
+
+on('link-type-changed', () => {
+  // Render loop picks up state.linkTypeFilter automatically
+});
+
+// Node selection — center camera on selected card + open detail card
+on('node-selected', (node) => {
+  if (!node) return;
+  const g = getGraph();
+  if (g) {
+    const cards = getAllCards();
+    const card = cards.find(c => c.node.id === node.id);
+    if (card) {
+      g.centerAt(card.x, card.y, 500);
+    }
+  }
+  openMemoryCard(node);
+});
+
+// Graph refresh
+on('graph:refresh', () => {
+  applyGraphData();
+});
+
+// Category removal scheduling
+on('category:schedule-removal', () => {
+  scheduleGraphRemoval();
+});
+
+on('category:cancel-removal', () => {
+  cancelScheduledRemoval();
+});
+
+// Layout commands
+on('layout:reset', () => {
+  reheatSimulation(); // clears saved positions + recomputes layout
+});
+
+on('layout:frame', () => {
+  const g = getGraph();
+  if (g) g.zoomToFit(400, 60);
+});
+
+// Stats update
+on('stats-changed', () => {
+  updateStats();
+});
+
+// Context menu hide
+on('context-menu-hide', () => {
+  hideContextMenu();
+});
+
+// Render frame post — draw minimap
+on('render-frame-post', () => {
+  if (isMinimapVisible()) drawMinimap();
+});
+
+
+// ═══════════════════════════════════════════
+// 6. DETAIL PANEL CALLBACKS
+// ═══════════════════════════════════════════
+
+setDetailCallbacks({
+  navigateToNode: (node) => {
+    const g = getGraph();
+    if (!g || !node) return;
+    const cards = getAllCards();
+    const card = cards.find(c => c.node.id === node.id);
+    if (card) g.centerAt(card.x, card.y, 500);
+  },
+  refreshGraph: () => applyGraphData(),
+  scheduleRemoval: () => scheduleGraphRemoval(),
+  cancelRemoval: () => cancelScheduledRemoval(),
+  // The names ui-detail.js actually calls (card delete, focus, category move).
+  applyGraphData: () => applyGraphData(),
+  updateStats: () => updateStats(),
+  buildCategorySidebar: (cats) => buildCategorySidebar(cats),
+  clearMultiSelect: () => clearMultiSelect(),
+  fetchTrashItems: () => emit('trash:refresh'),
+  refreshNodeAppearance: () => refreshGraph(),
+});
+
+
+// ═══════════════════════════════════════════
+// 7. BOOT SEQUENCE
+// ═══════════════════════════════════════════
+
+async function boot() {
+  try {
+    // Restore interface customization + active skin before anything renders
+    restoreInterfaceConfig();
+    restoreSkin();
+
+    // Pre-flight health check
+    try {
+      const healthRes = await fetch('/api/health');
+      const health = await healthRes.json();
+      if (!health.ok) {
+        const messages = {
+          db_missing:         [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
+          db_error:           [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
+          remote_unreachable: [t('loading.health.remoteUnreachable.title'), health.detail || t('loading.health.remoteUnreachable.sub')],
+          auth_error:         [t('loading.health.authError.title'), health.detail || t('loading.health.authError.sub')],
+        };
+        const [title, sub] = messages[health.reason] || [t('loading.health.connectionError.title'), health.detail || t('loading.health.connectionError.sub')];
+        showLoadingError(title, sub, !!health.canAutoStart);
+        return;
+      }
+    } catch {}
+
+    // Fetch all memories
+    const res = await fetch('/api/memories?fields=graph');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const data = await res.json();
+
+    state.allNodes = normalizeNodes(data.nodes);
+    state.allLinks = data.links;
+
+    // Fetch category definitions
+    await loadCategories();
+
+    // Discover all categories
+    const presentCats = new Set(state.allNodes.map(n => n.payload.category));
+    state.activeCategories = new Set([...presentCats, ...state.allCategoryNames]);
+
+    // Build category sidebar
+    buildCategorySidebar(presentCats);
+
+    // Init the 2D canvas renderer (skip if visualization is disabled)
+    const container = document.getElementById('graph-container');
+    const vizEnabled = loadIfaceConfig().visualizationEnabled !== false;
+    let g = null;
+
+    if (vizEnabled && !getGraph()) {
+      g = initGraph(container, {
+        onRenderFramePost: () => {
+          if (isMinimapVisible()) drawMinimap();
+        },
+      });
+
+      // Init overlays
+      initMinimap(g);
+      initLasso(g);
+      initContextMenu(g);
+    }
+
+    // Apply data to compute layout and start rendering
+    applyGraphData();
+
+    // Update stats
+    updateStats();
+
+    // Signal data is ready
+    emit('data-loaded', data);
+
+    // Restore previously open memory cards
+    restoreOpenCards();
+
+    // Handle view-switch handoff
+    const switchNodeId = sessionStorage.getItem('neural-selected-node-switch');
+    if (switchNodeId) {
+      sessionStorage.removeItem('neural-selected-node-switch');
+      const node = state.allNodes.find(n => n.id === switchNodeId);
+      if (node) {
+        state.selectedNodeId = switchNodeId;
+        openMemoryCard(node);
+        setTimeout(() => {
+          if (g) {
+            const cards = getAllCards();
+            const card = cards.find(c => c.node.id === switchNodeId);
+            if (card) g.centerAt(card.x, card.y, 500);
+          }
+        }, 600);
+      }
+    }
+
+    // Fetch trash count
+    try { emit('trash:refresh'); } catch {}
+
+    // Fade out loading
+    hideLoading(400);
+
+    // Mark boot complete
+    _bootComplete = true;
+
+    // Focus mode restored at load: the viz:toggle emitted by applyIfaceConfig
+    // ran before boot and was ignored above, so apply the persisted state to
+    // the main canvas now — otherwise it keeps intercepting pointer events on
+    // top of the whiteboard (the board looks completely locked).
+    if (!_vizEnabled) document.getElementById('canvas-main')?.classList.add('viz-hidden-2d');
+
+  } catch (err) {
+    console.error('Init error:', err);
+    const isNetworkError = err.message === 'Failed to fetch' || err.name === 'TypeError';
+    showLoadingError(
+      isNetworkError ? t('loading.serverOffline') : t('loading.connectionFailed'),
+      isNetworkError ? t('loading.serverNotRunning') : err.message,
+      false,
+      isNetworkError
+    );
+  }
+}
+
+
+// ═══════════════════════════════════════════
+// 8. INIT ALL SHARED UI SYSTEMS
+// ═══════════════════════════════════════════
+
+initLoading({ onInit: boot });
+initKeybinds();
+initTooltip();
+initPanelSystem();
+initPinToggle();
+initNavbar();
+initMenubar();
+initSearch();
+initSidebar();
+initDetailPanel();
+initSettings();
+initTrash();
+initBookmarks();
+initResume();
+initLayouts();
+initWorkspaces();
+initInvite();
+initSync();
+initHelp();
+initMultiSelect();
+initStats();
+initExplorer();
+initFileExplorer();
+initSkillsStudio();
+initStyleGuide();
+initAutomationStudio();
+initSchedulesStudio();
+initNativeLoopRouter();
+initImageGallery();
+initScheduleQueue();
+initCommandRunner();
+initTerminal();
+initLink();
+clearGameOnLoad();
+initWhiteboard();
+initCostWidget();
+initGames();
+initTutorial();
+
+// View switch handler
+{
+  const switchBtn = document.querySelector('.view-toggle-btn:not(.active)');
+  if (switchBtn) {
+    switchBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      if (state.selectedNodeId) sessionStorage.setItem('neural-selected-node-switch', state.selectedNodeId);
+      window.location.href = switchBtn.getAttribute('href');
+    });
+  }
+}
+
+// Window resize handler
+window.addEventListener('resize', () => {
+  clampPanelsToViewport();
+});
+
+// Visualization toggle — pause/resume 2D rendering
+let _bootComplete = false;
+// The render loop has two independent stop reasons: viz disabled or focus mode
+// (whiteboard) active. It runs ONLY when viz is on AND not in focus — so toggling
+// viz while the whiteboard is up never restarts it, and re-entering focus re-pauses.
+let _vizEnabled = loadIfaceConfig().visualizationEnabled !== false;
+let _inFocusMode = false;
+function _applyGraphAnimation() {
+  if (_vizEnabled && !_inFocusMode) startAnimation();
+  else stopAnimation();
+}
+on('viz:toggle', (enabled) => {
+  if (!_bootComplete) return;
+  _vizEnabled = enabled;
+  if (enabled) {
+    if (!getGraph()) {
+      // First-time init if graph was never created (was disabled at boot)
+      const container = document.getElementById('graph-container');
+      const g = initGraph(container, {
+        onRenderFramePost: () => {
+          if (isMinimapVisible()) drawMinimap();
+        },
+      });
+      initMinimap(g);
+      initLasso(g);
+      initContextMenu(g);
+      applyGraphData();
+    }
+    // Show the main canvas (it's position:fixed, not affected by container opacity)
+    const mainCanvas = document.getElementById('canvas-main');
+    if (mainCanvas) mainCanvas.classList.remove('viz-hidden-2d');
+    // Restore minimap to user's preference
+    restoreMinimap();
+  } else {
+    stopBackground();
+    // Hide the main canvas
+    const mainCanvas = document.getElementById('canvas-main');
+    if (mainCanvas) mainCanvas.classList.add('viz-hidden-2d');
+    // Always hide minimap
+    forceHideMinimap();
+  }
+  _applyGraphAnimation();
+});
+
+// Focus mode isolation — zero-resource mode for 2D
+on('focus:enter', () => {
+  state.hoveredNodeId = null;
+  clearLasso();
+  hideContextMenu();
+  // Whiteboard is up — stop the canvas loop (it ran at 15fps). _applyGraphAnimation
+  // re-evaluates viz + focus together, so a viz toggle during focus won't restart it.
+  _inFocusMode = true;
+  _applyGraphAnimation();
+  pauseInteraction();
+});
+
+on('focus:exit', () => {
+  _inFocusMode = false;
+  resumeInteraction();
+  _applyGraphAnimation();
+});
+
+// Workspace scene snapshot (2D)
+on('workspace:get-scene', (callback) => {
+  const graph = getGraph();
+  if (!graph) return callback({ nodePositions: {}, camera: null });
+  const gd = graph.graphData();
+  const positions = {};
+  for (const n of gd.nodes) {
+    if (n.x != null) positions[n.id] = { x: n.x, y: n.y };
+  }
+  callback({ nodePositions: positions, camera: null });
+});
+
+on('workspace:restore-scene', ({ nodePositions }) => {
+  if (nodePositions && Object.keys(nodePositions).length > 0) {
+    posStore.setItem(KEYS.NODE_POS_2D, JSON.stringify(nodePositions));
+  }
+  applyGraphData();
+});
+
+// Boot
+boot();