npm - opencroc - Versions diffs - 1.6.9 → 1.7.0 - Mend

opencroc 1.6.9 → 1.7.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 (11) hide show

package/dist/web/index-v2-pixel.html +1571 -0
package/dist/web/index.html +517 -1512
package/dist/web/js/agents.js +465 -0
package/dist/web/js/camera.js +125 -0
package/dist/web/js/dataviz.js +288 -0
package/dist/web/js/effects.js +345 -0
package/dist/web/js/engine.js +489 -0
package/dist/web/js/office.js +816 -0
package/dist/web/js/state.js +37 -0
package/dist/web/js/ui.js +384 -0
package/package.json +1 -1

package/dist/web/index.html CHANGED Viewed

@@ -1,1568 +1,573 @@
 <!DOCTYPE html>
-<html lang="zh-CN" data-theme="dark">
+<html lang="zh-CN" data-theme="light">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>OpenCroc Studio</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>OpenCroc Studio · 3D</title>
 <style>
-  /* ═══════════════════════════════════════════════════════
-     Design System — CSS Variables (borrowed from OpenClaw)
-     ═══════════════════════════════════════════════════════ */
-  :root {
-    --bg:         #0a0f1a;
-    --bg-panel:   #111827;
-    --bg-card:    #1a2332;
-    --bg-hover:   #243044;
-    --bg-soft:    rgba(30, 41, 59, 0.5);
-    --accent:     #34d399;
-    --accent-dim: #059669;
-    --accent-bg:  rgba(52, 211, 153, 0.12);
-    --red:        #f87171;
-    --red-bg:     rgba(248, 113, 113, 0.12);
-    --orange:     #fbbf24;
-    --orange-bg:  rgba(251, 191, 36, 0.12);
-    --blue:       #60a5fa;
-    --blue-bg:    rgba(96, 165, 250, 0.12);
-    --purple:     #a78bfa;
-    --purple-bg:  rgba(167, 139, 250, 0.12);
-    --text:       #f1f5f9;
-    --text-dim:   #94a3b8;
-    --text-subtle:#64748b;
-    --border:     rgba(148, 163, 184, 0.15);
-    --border-accent: rgba(52, 211, 153, 0.3);
-    --shadow-lg:  0 20px 40px rgba(0, 0, 0, 0.4);
-    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.3);
-    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.2);
-    --radius-lg:  14px;
-    --radius-md:  10px;
-    --radius-sm:  6px;
-    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  [data-theme="light"] {
-    --bg:         #f1f5f9;
-    --bg-panel:   #ffffff;
-    --bg-card:    #f8fafc;
-    --bg-hover:   #e2e8f0;
-    --bg-soft:    rgba(241, 245, 249, 0.8);
-    --accent:     #059669;
-    --accent-dim: #047857;
-    --accent-bg:  rgba(5, 150, 105, 0.1);
-    --red:        #dc2626;
-    --red-bg:     rgba(220, 38, 38, 0.08);
-    --orange:     #d97706;
-    --orange-bg:  rgba(217, 119, 6, 0.08);
-    --blue:       #2563eb;
-    --blue-bg:    rgba(37, 99, 235, 0.08);
-    --purple:     #7c3aed;
-    --purple-bg:  rgba(124, 58, 237, 0.08);
-    --text:       #0f172a;
-    --text-dim:   #475569;
-    --text-subtle:#94a3b8;
-    --border:     rgba(100, 116, 139, 0.2);
-    --border-accent: rgba(5, 150, 105, 0.35);
-    --shadow-lg:  0 20px 40px rgba(0, 0, 0, 0.08);
-    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.06);
-    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.04);
-  }
-  /* ═══════════════════════════════════════════════════════
-     Base Reset & Typography (system font stack)
-     ═══════════════════════════════════════════════════════ */
-  * { margin:0; padding:0; box-sizing:border-box; }
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", sans-serif;
-    overflow: hidden;
-    height: 100vh;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-  }
-  /* Scrollbar styling */
-  ::-webkit-scrollbar { width: 5px; height: 5px; }
-  ::-webkit-scrollbar-track { background: transparent; }
-  ::-webkit-scrollbar-thumb { background: var(--text-subtle); border-radius: 4px; }
-  ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
-  /* ═══════════════════════════════════════════════════════
-     Layout Grid — Responsive
-     ═══════════════════════════════════════════════════════ */
-  .app {
-    display: grid;
-    grid-template-rows: 56px 1fr 220px;
-    grid-template-columns: 240px 1fr 320px;
-    grid-template-areas:
-      "header header header"
-      "sidebar main panel"
-      "office office office";
-    height: 100vh;
-    gap: 6px;
-    padding: 6px;
-  }
-  @media (max-width: 1200px) {
-    .app {
-      grid-template-columns: 200px 1fr 280px;
-    }
-  }
-  @media (max-width: 960px) {
-    .app {
-      grid-template-columns: 1fr;
-      grid-template-rows: 56px 1fr 200px;
-      grid-template-areas:
-        "header"
-        "main"
-        "office";
-    }
-    .sidebar, .log-panel { display: none; }
-    .sidebar.mobile-open, .log-panel.mobile-open {
-      display: flex;
-      position: fixed;
-      top: 62px; bottom: 0;
-      width: 280px;
-      z-index: 150;
-    }
-    .sidebar.mobile-open { left: 0; }
-    .log-panel.mobile-open { right: 0; }
-  }
-  /* ═══════════════════════════════════════════════════════
-     Header
-     ═══════════════════════════════════════════════════════ */
-  .header {
-    grid-area: header;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    display: flex;
-    align-items: center;
-    padding: 0 14px;
-    gap: 10px;
-    box-shadow: var(--shadow-sm);
-  }
-  .header .logo {
-    width: 36px; height: 36px;
-    border-radius: var(--radius-md);
-    display: grid; place-items: center;
-    background: var(--accent-bg);
-    border: 1px solid var(--border-accent);
-    flex-shrink: 0;
-  }
-  .header .logo svg { width: 22px; height: 22px; }
-  .header .title-wrap { display:flex; flex-direction:column; gap:1px; min-width:0; }
-  .header h1 { font-size:14px; font-weight:700; color:var(--accent); letter-spacing:.3px; white-space:nowrap; }
-  .header .subtitle { font-size:10px; color:var(--text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-  .header .actions { display:flex; gap:5px; flex-shrink:0; }
-  .header .spacer { flex:1; }
-  /* View Switch */
-  .view-switch {
-    display: flex;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 2px;
-    margin-right: 2px;
-  }
-  .view-switch button {
-    background: transparent;
-    color: var(--text-dim);
-    border: none;
-    font-family: inherit;
-    font-size: 11px;
-    padding: 5px 12px;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition: all var(--transition);
-    display: flex; align-items: center; gap: 4px;
-  }
-  .view-switch button:hover { color: var(--text); background: var(--bg-hover); }
-  .view-switch button.active {
-    background: var(--accent-bg);
-    color: var(--accent);
-    box-shadow: 0 0 0 1px var(--border-accent);
-  }
-  /* Buttons */
-  .btn {
-    background: var(--accent-dim);
-    color: #fff;
-    border: 1px solid var(--border-accent);
-    padding: 5px 12px;
-    font-family: inherit;
-    font-size: 11px;
-    font-weight: 500;
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition: all var(--transition);
-    display: flex; align-items: center; gap: 4px;
-    white-space: nowrap;
-  }
-  .btn:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
-  .btn:active { transform: translateY(0); }
-  .btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
-  .btn.danger { background: #991b1b; border-color: rgba(248,113,113,.3); }
-  .btn.danger:hover { background: #b91c1c; }
-  .btn svg { width: 14px; height: 14px; }
-  .mode-select {
-    background: var(--bg-card);
-    color: var(--text);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    font-family: inherit;
-    font-size: 11px;
-    padding: 5px 8px;
-    min-width: 80px;
-    cursor: pointer;
-  }
-  /* Stats */
-  .header .stats { display:flex; gap:6px; font-size:10px; color:var(--text-dim); flex-shrink:0; }
-  .header .stats > div {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 4px 8px;
-    min-width: 60px;
-    text-align: center;
-  }
-  .header .stats .label { font-size:9px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.5px; }
-  .header .stats .value { display:block; color:var(--accent); font-weight:700; font-size:13px; margin-top:1px; }
-  .conn-dot {
-    width: 10px; height: 10px;
-    border-radius: 50%;
-    background: var(--red);
-    box-shadow: 0 0 0 3px var(--red-bg);
-    transition: all .3s;
-    flex-shrink: 0;
-  }
-  .conn-dot.on { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); animation: conn-pulse 2s infinite; }
-  @keyframes conn-pulse { 0%,100%{ box-shadow: 0 0 0 3px var(--accent-bg) } 50%{ box-shadow: 0 0 0 6px var(--accent-bg) } }
-  /* Theme toggle */
-  .theme-toggle {
-    background: none; border: 1px solid var(--border); color: var(--text-dim);
-    width: 32px; height: 32px; border-radius: var(--radius-sm);
-    display: grid; place-items: center; cursor: pointer;
-    transition: all var(--transition);
-  }
-  .theme-toggle:hover { background: var(--bg-hover); color: var(--text); }
-  .theme-toggle svg { width: 16px; height: 16px; }
-  /* ═══════════════════════════════════════════════════════
-     Sidebar
-     ═══════════════════════════════════════════════════════ */
-  .sidebar {
-    grid-area: sidebar;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    overflow-y: auto;
-    padding: 10px;
-    box-shadow: var(--shadow-sm);
-  }
-  .sidebar h3 {
-    font-size: 10px; text-transform: uppercase; color: var(--text-subtle);
-    padding: 10px 4px 6px; letter-spacing: 1.2px; font-weight: 600;
-    display: flex; align-items: center; gap: 6px;
-  }
-  .sidebar h3 svg { width: 14px; height: 14px; opacity: 0.6; }
-  .mod-item {
-    padding: 7px 10px;
-    border-radius: var(--radius-sm);
-    font-size: 12px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    transition: all var(--transition);
-    margin-bottom: 2px;
-    border: 1px solid transparent;
-    color: var(--text-dim);
-  }
-  .mod-item:hover {
-    background: var(--bg-hover);
-    border-color: var(--border);
-    color: var(--text);
-    transform: translateX(2px);
-  }
-  .mod-count {
-    margin-left: auto; font-size: 9px; color: var(--text-subtle);
-    background: var(--bg-card); padding: 1px 6px; border-radius: 8px;
-  }
-  .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
-  .dot.idle { background: var(--text-subtle); }
-  .dot.testing, .dot.working { background: var(--orange); animation: dot-pulse 1s infinite; }
-  .dot.thinking { background: var(--blue); animation: dot-pulse 1.4s infinite; }
-  .dot.passed, .dot.done { background: var(--accent); }
-  .dot.failed, .dot.error { background: var(--red); animation: dot-shake .3s infinite; }
-  @keyframes dot-pulse { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(.85) } }
-  @keyframes dot-shake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-1px) } 75%{ transform:translateX(1px) } }
-  /* ═══════════════════════════════════════════════════════
-     Main Content
-     ═══════════════════════════════════════════════════════ */
-  .main {
-    grid-area: main;
-    position: relative;
-    overflow: hidden;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-  }
-  #graph-canvas { width:100%; height:100%; display:block; cursor:grab; }
-  .view { position:absolute; inset:0; }
-  .view.hidden { display:none; }
-  /* Pixel Office Stage */
-  .pixel-stage {
-    position: relative; width:100%; height:100%; overflow:hidden;
-    background:
-      linear-gradient(rgba(8,12,20,.15), rgba(8,12,20,.4)),
-      url('./assets/star/office_bg_small.webp') center/cover no-repeat;
-  }
-  .pixel-stage::before {
-    content:''; position:absolute; inset:0;
-    background-image:
-      linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
-    background-size: 32px 32px;
-    pointer-events:none;
-  }
-  .pixel-stage .asset {
-    position:absolute; image-rendering:pixelated; z-index:2;
-    filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
-    transition: opacity .3s;
-  }
-  .pixel-stage .desk-asset { width:180px; bottom:90px; left:40px; }
-  .pixel-stage .server-asset { width:110px; top:24px; right:34px; }
-  .pixel-stage .coffee-asset { width:72px; top:100px; right:180px; }
-  .pixel-stage .walls-asset { width:220px; top:10px; left:46%; transform:translateX(-50%); opacity:.4; }
-  .pixel-agent-layer { position:absolute; inset:0; z-index:3; }
-  .pixel-agent {
-    position:absolute; width:44px;
-    transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1);
-    image-rendering:pixelated;
-    filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
-  }
-  /* Sprite-canvas replaces static img for animated agents */
-  .pixel-sprite-canvas {
-    position:absolute; width:48px; height:48px;
-    image-rendering:pixelated;
-    transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1);
-    filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
-  }
-  .pixel-agent.working,.pixel-agent.testing { animation: agent-bob .5s ease-in-out infinite alternate; }
-  .pixel-agent.thinking { animation: agent-think 1.2s ease-in-out infinite; }
-  .pixel-agent.error,.pixel-agent.failed { animation: agent-shake .25s ease-in-out infinite; }
-  .pixel-agent.done,.pixel-agent.passed { animation: agent-pulse .9s ease-in-out infinite; }
-  .pixel-sprite-canvas.working,.pixel-sprite-canvas.testing { animation: agent-bob .5s ease-in-out infinite alternate; }
-  .pixel-sprite-canvas.thinking { animation: agent-think 1.2s ease-in-out infinite; }
-  .pixel-sprite-canvas.error,.pixel-sprite-canvas.failed { animation: agent-shake .25s ease-in-out infinite; }
-  .pixel-sprite-canvas.done,.pixel-sprite-canvas.passed { animation: agent-pulse .9s ease-in-out infinite; }
-  @keyframes agent-bob { from{transform:translateY(0)} to{transform:translateY(-4px)} }
-  @keyframes agent-think { 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(-3deg) scale(1.02)} }
-  @keyframes agent-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
-  @keyframes agent-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
-  /* Pixel Agent Label — enhanced with status bubble */
-  .pixel-label {
-    position:absolute; transform:translate(-50%,-50%);
-    background: var(--bg-panel);
-    border: 1px solid var(--border-accent);
-    border-radius: var(--radius-sm);
-    padding: 3px 8px;
-    font-size: 10px;
-    color: var(--text);
-    white-space:nowrap;
-    z-index:4;
-    box-shadow: var(--shadow-sm);
-    backdrop-filter: blur(4px);
-  }
-  .pixel-label .status-tag {
-    display:inline-block; font-size:8px; padding:1px 4px; border-radius:4px; margin-left:4px;
-    font-weight:600; text-transform:uppercase; letter-spacing:.3px;
-  }
-  .pixel-label .status-tag.working { background:var(--orange-bg); color:var(--orange); }
-  .pixel-label .status-tag.thinking { background:var(--blue-bg); color:var(--blue); }
-  .pixel-label .status-tag.done { background:var(--accent-bg); color:var(--accent); }
-  .pixel-label .status-tag.error { background:var(--red-bg); color:var(--red); }
-  /* Pixel KPIs */
-  .pixel-kpis { position:absolute; left:14px; top:14px; display:flex; gap:6px; z-index:4; }
-  .pixel-kpi {
-    min-width:80px;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 8px 10px;
-    box-shadow: var(--shadow-md);
-    backdrop-filter: blur(8px);
-  }
-  .pixel-kpi .t { font-size:9px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.5px; }
-  .pixel-kpi .v { font-size:16px; color:var(--accent); font-weight:700; margin-top:2px; }
-  .pixel-kpi.errors .v { color:var(--red); }
-  .pixel-kpi.done .v { color:var(--accent); }
-  /* Bubble messages (Star-Office style) */
-  .pixel-bubble {
-    position:absolute; z-index:5; pointer-events:none;
-    background: var(--bg-panel);
-    border: 1px solid var(--border-accent);
-    border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 2px;
-    padding: 4px 10px;
-    font-size: 10px;
-    color: var(--text);
-    box-shadow: var(--shadow-sm);
-    animation: bubble-in .3s ease-out, bubble-out .3s ease-in 2.7s forwards;
-    white-space: nowrap;
-  }
-  @keyframes bubble-in { from{opacity:0;transform:translateY(6px) scale(.9)} to{opacity:1;transform:translateY(0) scale(1)} }
-  @keyframes bubble-out { from{opacity:1} to{opacity:0;transform:translateY(-4px)} }
-  /* Tooltip */
-  .tooltip {
-    position:absolute;
-    background: var(--bg-panel);
-    border: 1px solid var(--border-accent);
-    border-radius: var(--radius-md);
-    padding: 10px 14px;
-    font-size: 12px;
-    pointer-events:none;
-    z-index:100;
-    display:none;
-    max-width:300px;
-    box-shadow: var(--shadow-lg);
-    line-height: 1.6;
-  }
-  .tooltip.visible { display:block; }
-  .tooltip b { color: var(--accent); }
-  /* ═══════════════════════════════════════════════════════
-     Right Panel (Log/Tests/Results/Reports)
-     ═══════════════════════════════════════════════════════ */
-  .log-panel {
-    grid-area: panel;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    display: flex; flex-direction: column;
-    overflow: hidden;
-    box-shadow: var(--shadow-sm);
-  }
-  .panel-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--border);
-    background: var(--bg-card);
-    flex-shrink: 0;
-  }
-  .panel-tabs .tab {
-    background: none; border: none;
-    color: var(--text-dim);
-    font-family: inherit;
-    font-size: 11px;
-    padding: 10px 12px;
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-    transition: all var(--transition);
-    display: flex; align-items: center; gap: 4px;
-  }
-  .panel-tabs .tab:hover { color: var(--text); background: var(--bg-hover); }
-  .panel-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
-  .panel-tabs .tab svg { width: 14px; height: 14px; }
-  .tab-badge {
-    display:inline-block; background:var(--accent); color:var(--bg);
-    border-radius:8px; padding:0 5px; font-size:9px; font-weight:700;
-  }
-  .tab-badge.alert { background:var(--red); color:#fff; }
-  .file-list { flex:1; overflow-y:auto; padding:6px 8px; font-size:11px; }
-  .file-item {
-    padding: 8px 10px;
-    border-bottom: 1px solid var(--border);
-    cursor: pointer;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition);
-    margin-bottom:2px;
-  }
-  .file-item:hover { background: var(--bg-hover); }
-  .file-item .fname { color: var(--accent); font-weight: 600; font-size:12px; }
-  .file-item .fmeta { color: var(--text-dim); font-size: 10px; margin-top: 3px; }
-  .file-preview {
-    position: fixed; top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(800px, 90vw);
-    max-height: 80vh;
-    background: var(--bg-panel);
-    border: 1px solid var(--border-accent);
-    border-radius: var(--radius-lg);
-    z-index: 200;
-    display: none; flex-direction: column;
-    box-shadow: var(--shadow-lg);
-  }
-  .file-preview.visible { display: flex; }
-  .file-preview .fp-header {
-    display: flex; justify-content: space-between; align-items: center;
-    padding: 12px 16px;
-    border-bottom: 1px solid var(--border);
-  }
-  .file-preview .fp-header h4 { font-size: 13px; color: var(--accent); font-weight: 600; }
-  .file-preview .fp-close {
-    background: none; border: none; color: var(--text-dim);
-    font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
-    transition: all var(--transition);
-  }
-  .file-preview .fp-close:hover { background: var(--bg-hover); color: var(--text); }
-  .file-preview pre {
-    flex:1; overflow:auto; padding:16px; margin:0;
-    font-size: 12px; line-height: 1.6;
-    font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
-    color: var(--text); background: var(--bg);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-  }
-  .log-list { flex:1; overflow-y:auto; padding:6px 10px; font-size:11px; line-height:1.7; }
-  .log-list .log-entry {
-    padding: 4px 0;
-    border-bottom: 1px solid var(--border);
-    word-break: break-word;
-    font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
-    font-size: 10px;
-  }
-  .log-list .log-entry .timestamp { color: var(--text-subtle); margin-right: 6px; }
-  .log-list .log-entry.warn { color: var(--orange); }
-  .log-list .log-entry.error { color: var(--red); }
-  .log-list .log-entry.info { color: var(--text-dim); }
-  /* ═══════════════════════════════════════════════════════
-     Bottom: Croc Office (Agent Desks)
-     ═══════════════════════════════════════════════════════ */
-  .office {
-    grid-area: office;
-    background: var(--bg-panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    display: flex;
-    overflow-x: auto;
-    padding: 10px;
-    gap: 8px;
-    box-shadow: var(--shadow-sm);
-  }
-  .desk {
-    flex: 0 0 180px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
-    padding: 12px 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    position: relative;
-    overflow: hidden;
-    transition: all var(--transition);
-    box-shadow: var(--shadow-sm);
-  }
-  .desk:hover { border-color: var(--border-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
-  .desk .badge { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; }
-  /* SVG Croc sprites replace emoji */
-  .desk .croc-sprite {
-    width: 48px; height: 48px;
-    position: relative; z-index: 1;
-    display: grid; place-items: center;
-  }
-  .desk .croc-sprite svg { width:44px; height:44px; }
-  .desk.idle .croc-sprite { animation: croc-idle 3s ease-in-out infinite; }
-  .desk.working .croc-sprite, .desk.testing .croc-sprite { animation: croc-work .5s ease-in-out infinite alternate; }
-  .desk.thinking .croc-sprite { animation: croc-think 1.2s ease-in-out infinite; }
-  .desk.done .croc-sprite, .desk.passed .croc-sprite { animation: croc-done .8s ease-out 1; }
-  .desk.error .croc-sprite, .desk.failed .croc-sprite { animation: croc-error .3s ease-in-out 3; }
-  @keyframes croc-idle { 0%,90%,100%{transform:translateY(0)} 95%{transform:translateY(-3px)} }
-  @keyframes croc-work { from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(-5px) rotate(2deg)} }
-  @keyframes croc-think { 0%,100%{transform:scale(1) rotate(0)} 25%{transform:scale(1.04) rotate(-2deg)} 75%{transform:scale(1.04) rotate(2deg)} }
-  @keyframes croc-done { 0%{transform:scale(1)} 50%{transform:scale(1.15) translateY(-6px)} 100%{transform:scale(1)} }
-  @keyframes croc-error { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
-  .desk .croc-name { font-size: 12px; font-weight: 600; color: var(--accent); }
-  .desk .croc-role {
-    font-size: 9px; color: var(--text-subtle); text-transform: uppercase;
-    letter-spacing: .5px; font-weight: 500;
-  }
-  .desk .croc-task {
-    font-size: 10px; color: var(--orange); text-align: center;
-    max-width: 160px; overflow: hidden; text-overflow: ellipsis;
-    white-space: nowrap; min-height: 14px;
-  }
-  .desk .progress-bar {
-    width: 90%; height: 3px; background: var(--bg-hover);
-    border-radius: 2px; margin-top: 3px; overflow: hidden;
-  }
-  .desk .progress-bar .fill {
-    height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent));
-    transition: width .4s cubic-bezier(.4,0,.2,1); border-radius: 2px;
-  }
-  .desk .desk-icon {
-    position: absolute; bottom: 6px; right: 8px; opacity: .25;
-  }
-  .desk .desk-icon svg { width: 16px; height: 16px; }
-  /* Loading skeleton */
-  .skeleton { background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
-  @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
+/* ═══════════════════════════════════════════════════════════════════════════════
+   OpenCroc Studio 3D — Glass-morphism Design System
+   ═══════════════════════════════════════════════════════════════════════════════ */
+/* ─── CSS Reset ─────────────────────────────────────────────────────────────── */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC","Helvetica Neue",Arial,sans-serif}
+body{background:#000;color:var(--text)}
+::-webkit-scrollbar{width:6px;height:6px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--text-subtle);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}
+::selection{background:var(--accent);color:#000}
+/* ─── Design Tokens: Dark (Default) ────────────────────────────────────────── */
+:root{
+  --bg-void:#050510;--bg-deep:#0a0f1e;
+  --bg-panel:rgba(12,18,36,0.75);--bg-panel-solid:#0c1224;
+  --bg-card:rgba(18,26,50,0.6);--bg-hover:rgba(30,42,72,0.5);
+  --bg-glass:rgba(15,22,42,0.55);--bg-glass-strong:rgba(15,22,42,0.8);
+  --bg-frosted:rgba(20,28,52,0.45);--bg-input:rgba(15,22,44,0.6);
+  --accent:#34d399;--accent-rgb:52,211,153;--accent-dim:#059669;
+  --accent-glow:rgba(52,211,153,0.4);--accent-bg:rgba(52,211,153,0.1);
+  --red:#f87171;--red-rgb:248,113,113;--red-glow:rgba(248,113,113,0.35);--red-bg:rgba(248,113,113,0.1);
+  --orange:#fbbf24;--orange-rgb:251,191,36;--orange-glow:rgba(251,191,36,0.35);--orange-bg:rgba(251,191,36,0.1);
+  --blue:#60a5fa;--blue-rgb:96,165,250;--blue-glow:rgba(96,165,250,0.35);--blue-bg:rgba(96,165,250,0.1);
+  --purple:#a78bfa;--purple-rgb:167,139,250;--purple-glow:rgba(167,139,250,0.35);--purple-bg:rgba(167,139,250,0.1);
+  --cyan:#22d3ee;--cyan-rgb:34,211,238;--cyan-glow:rgba(34,211,238,0.35);--cyan-bg:rgba(34,211,238,0.1);
+  --pink:#f472b6;--pink-rgb:244,114,182;
+  --text:#f1f5f9;--text-dim:#94a3b8;--text-subtle:#4a5568;--text-muted:#2d3748;
+  --border:rgba(148,163,184,0.12);--border-accent:rgba(52,211,153,0.25);--border-glass:rgba(255,255,255,0.06);
+  --shadow-xl:0 25px 50px -12px rgba(0,0,0,0.6);--shadow-lg:0 20px 40px rgba(0,0,0,0.4);
+  --shadow-md:0 8px 24px rgba(0,0,0,0.3);--shadow-sm:0 2px 8px rgba(0,0,0,0.2);
+  --shadow-glow:0 0 30px rgba(52,211,153,0.15);--shadow-inset:inset 0 1px 0 rgba(255,255,255,0.05);
+  --blur-lg:blur(24px);--blur-md:blur(16px);--blur-sm:blur(8px);--blur-xs:blur(4px);
+  --radius-xl:20px;--radius-lg:14px;--radius-md:10px;--radius-sm:6px;--radius-xs:4px;--radius-full:9999px;
+  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.175,0.885,0.32,1.275);
+  --transition-fast:0.15s var(--ease-out-expo);--transition:0.25s var(--ease-out-expo);
+  --transition-slow:0.4s var(--ease-out-expo);--transition-spring:0.5s var(--ease-spring);
+  --z-canvas:0;--z-overlay:10;--z-panel:20;--z-header:30;--z-modal:40;--z-tooltip:50;--z-notify:60;
+}
-  /* Typewriter cursor */
-  .typewriter-cursor {
-    display:inline-block; width:1px; height:1em; background:var(--accent);
-    margin-left:2px; vertical-align:text-bottom;
-    animation: cursor-blink .6s steps(1) infinite;
-  }
-  @keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }
+/* ─── Design Tokens: Light ─────────────────────────────────────────────────── */
+[data-theme="light"]{
+  --bg-void:#e8ecf4;--bg-deep:#f0f4fa;
+  --bg-panel:rgba(255,255,255,0.78);--bg-panel-solid:#ffffff;
+  --bg-card:rgba(248,250,255,0.7);--bg-hover:rgba(226,232,240,0.6);
+  --bg-glass:rgba(255,255,255,0.6);--bg-glass-strong:rgba(255,255,255,0.85);
+  --bg-frosted:rgba(255,255,255,0.5);--bg-input:rgba(241,245,249,0.8);
+  --accent:#059669;--accent-rgb:5,150,105;--accent-dim:#047857;
+  --accent-glow:rgba(5,150,105,0.25);--accent-bg:rgba(5,150,105,0.08);
+  --red:#dc2626;--red-rgb:220,38,38;--red-glow:rgba(220,38,38,0.2);--red-bg:rgba(220,38,38,0.06);
+  --orange:#d97706;--orange-rgb:217,119,6;--orange-glow:rgba(217,119,6,0.2);--orange-bg:rgba(217,119,6,0.06);
+  --blue:#2563eb;--blue-rgb:37,99,235;--blue-glow:rgba(37,99,235,0.2);--blue-bg:rgba(37,99,235,0.06);
+  --purple:#7c3aed;--purple-rgb:124,58,237;--purple-glow:rgba(124,58,237,0.2);--purple-bg:rgba(124,58,237,0.06);
+  --cyan:#0891b2;--cyan-rgb:8,145,178;--cyan-glow:rgba(8,145,178,0.2);--cyan-bg:rgba(8,145,178,0.06);
+  --pink:#db2777;--pink-rgb:219,39,119;
+  --text:#0f172a;--text-dim:#475569;--text-subtle:#94a3b8;--text-muted:#cbd5e1;
+  --border:rgba(100,116,139,0.15);--border-accent:rgba(5,150,105,0.3);--border-glass:rgba(0,0,0,0.04);
+  --shadow-xl:0 25px 50px -12px rgba(0,0,0,0.12);--shadow-lg:0 20px 40px rgba(0,0,0,0.06);
+  --shadow-md:0 8px 24px rgba(0,0,0,0.05);--shadow-sm:0 2px 8px rgba(0,0,0,0.03);
+  --shadow-glow:0 0 30px rgba(5,150,105,0.08);--shadow-inset:inset 0 1px 0 rgba(255,255,255,0.8);
+}
-  /* Keyboard shortcuts legend */
-  .shortcut-legend {
-    position:fixed; bottom:12px; right:12px; z-index:90;
-    background:var(--bg-panel); border:1px solid var(--border);
-    border-radius:var(--radius-md); padding:10px 14px;
-    font-size:10px; color:var(--text-dim);
-    box-shadow:var(--shadow-md); opacity:0; pointer-events:none;
-    transition:opacity .2s;
-    display:grid; grid-template-columns:auto auto; gap:3px 12px;
-  }
-  .shortcut-legend.visible { opacity:1; pointer-events:auto; }
-  .shortcut-legend kbd {
-    display:inline-block; min-width:18px; text-align:center;
-    background:var(--bg-card); border:1px solid var(--border);
-    border-radius:3px; padding:1px 5px; font-family:inherit;
-    font-size:9px; font-weight:600; color:var(--text);
-  }
+/* ─── 3D Canvas ────────────────────────────────────────────────────────────── */
+#three-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-canvas);display:block}
+/* ─── Glass Panel Base ─────────────────────────────────────────────────────── */
+.glass{background:var(--bg-glass);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border:1px solid var(--border-glass);box-shadow:var(--shadow-md),var(--shadow-inset);border-radius:var(--radius-lg);transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}
+.glass:hover{background:var(--bg-glass-strong);border-color:var(--border);box-shadow:var(--shadow-lg),var(--shadow-inset)}
+.glass-strong{background:var(--bg-glass-strong);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border:1px solid var(--border);box-shadow:var(--shadow-lg),var(--shadow-inset);border-radius:var(--radius-lg)}
+/* ─── Header ───────────────────────────────────────────────────────────────── */
+.header{position:fixed;top:12px;left:12px;right:12px;height:52px;z-index:var(--z-header);display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg-glass-strong);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border:1px solid var(--border-glass);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg),var(--shadow-inset);transition:all var(--transition)}
+.header::before{content:'';position:absolute;inset:0;border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(var(--accent-rgb),0.05),transparent 60%);pointer-events:none}
+.logo{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);border:1px solid var(--border-accent);border-radius:var(--radius-md);transition:all var(--transition)}
+.logo:hover{transform:scale(1.08) rotate(-3deg);box-shadow:var(--shadow-glow)}
+.logo svg{width:20px;height:20px}
+.title-wrap{display:flex;flex-direction:column;gap:0;margin-right:16px;min-width:0}
+.title-wrap h1{font-size:14px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.2;white-space:nowrap}
+.title-wrap .subtitle{font-size:10px;color:var(--text-subtle);letter-spacing:0.05em;text-transform:uppercase;line-height:1}
+.h-divider{width:1px;height:28px;flex-shrink:0;background:var(--border);margin:0 4px}
+/* View Switch */
+.view-switch{display:flex;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:2px}
+.view-switch button{display:flex;align-items:center;gap:5px;padding:5px 12px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:500;color:var(--text-dim);cursor:pointer;background:transparent;transition:all var(--transition);white-space:nowrap}
+.view-switch button:hover{color:var(--text);background:var(--bg-hover)}
+.view-switch button.active{color:var(--text);background:var(--bg-panel);box-shadow:var(--shadow-sm)}
+.view-switch button svg{width:14px;height:14px;flex-shrink:0}
+/* Actions */
+.actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
+.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600;transition:all var(--transition);white-space:nowrap;position:relative;overflow:hidden}
+.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);pointer-events:none}
+.btn-primary{background:var(--accent);color:#000;border-color:var(--accent-dim)}
+.btn-primary:hover{background:var(--accent-dim);transform:translateY(-1px);box-shadow:0 4px 16px var(--accent-glow)}
+.btn-danger{background:var(--red-bg);color:var(--red);border-color:rgba(var(--red-rgb),0.25)}
+.btn-danger:hover{background:rgba(var(--red-rgb),0.18);transform:translateY(-1px);box-shadow:0 4px 16px var(--red-glow)}
+.btn-secondary{background:var(--bg-card);color:var(--text-dim)}
+.btn-secondary:hover{background:var(--bg-hover);color:var(--text);transform:translateY(-1px)}
+.btn:disabled{opacity:0.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
+.btn svg{width:14px;height:14px;flex-shrink:0}
+.btn:active{transform:translateY(0)}
+/* Run Mode */
+.run-mode-wrap{position:relative}
+.run-mode-wrap select{appearance:none;background:var(--bg-card);color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 28px 5px 10px;font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition);outline:none}
+.run-mode-wrap select:hover{border-color:var(--border-accent);color:var(--text)}
+.run-mode-wrap::after{content:'▾';position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--text-subtle);font-size:10px;pointer-events:none}
+/* Stats */
+.stats{display:flex;gap:2px;margin-left:auto;flex-shrink:0}
+.stat-box{display:flex;flex-direction:column;align-items:center;padding:4px 12px;min-width:56px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:all var(--transition)}
+.stat-box:first-child{border-radius:var(--radius-sm) var(--radius-xs) var(--radius-xs) var(--radius-sm)}
+.stat-box:last-child{border-radius:var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs)}
+.stat-box:hover{background:var(--bg-hover);border-color:var(--border-accent)}
+.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-subtle);line-height:1}
+.stat-value{font-size:16px;font-weight:700;color:var(--accent);line-height:1.3;font-variant-numeric:tabular-nums}
+/* Header end */
+.header-end{display:flex;align-items:center;gap:6px;margin-left:8px}
+#theme-toggle{width:32px;height:32px;border:none;background:var(--bg-card);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all var(--transition);border:1px solid var(--border)}
+#theme-toggle:hover{background:var(--bg-hover);color:var(--text);transform:scale(1.05)}
+#theme-toggle svg{width:16px;height:16px}
+#conn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-subtle);transition:background 0.3s}
+#conn-dot.connected{background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:conn-pulse 2s infinite}
+/* ─── Sidebar ──────────────────────────────────────────────────────────────── */
+.sidebar{position:fixed;top:76px;left:12px;bottom:240px;width:220px;z-index:var(--z-panel);display:flex;flex-direction:column;overflow:hidden;background:var(--bg-glass);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md),var(--shadow-inset);transition:all var(--transition-slow)}
+.sidebar.collapsed{width:48px}
+.sidebar.collapsed .sidebar-content{opacity:0;pointer-events:none}
+.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
+.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;flex-shrink:0}
+.sidebar-header h3{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-subtle);font-weight:600}
+.sidebar-toggle{width:24px;height:24px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-subtle);border-radius:var(--radius-xs);transition:all var(--transition)}
+.sidebar-toggle:hover{background:var(--bg-hover);color:var(--text)}
+.sidebar-toggle svg{width:14px;height:14px;transition:transform var(--transition)}
+.sidebar-content{flex:1;overflow-y:auto;padding:0 8px 8px;transition:opacity var(--transition)}
+.mod-item{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:2px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
+.mod-item:hover{background:var(--bg-hover)}
+.mod-item.active{background:var(--accent-bg);color:var(--accent)}
+.mod-item .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--accent);opacity:0.6;transition:all var(--transition)}
+.mod-item:hover .dot{opacity:1;transform:scale(1.3)}
+.mod-item .name{flex:1;font-size:12px;font-weight:500;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color var(--transition)}
+.mod-item:hover .name{color:var(--text)}
+.mod-item .count{font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums;padding:1px 6px;background:var(--bg-card);border-radius:var(--radius-xs);font-weight:500;transition:all var(--transition)}
+.mod-item:hover .count{background:var(--bg-hover);color:var(--text-dim)}
+.agent-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;border-radius:var(--radius-sm);transition:all var(--transition)}
+.agent-item .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:all 0.3s}
+.agent-item .status-dot.working{background:var(--accent);box-shadow:0 0 6px var(--accent-glow);animation:dot-pulse 1s infinite}
+.agent-item .status-dot.testing{background:var(--blue);box-shadow:0 0 6px var(--blue-glow);animation:dot-pulse 1s infinite}
+.agent-item .status-dot.thinking{background:var(--purple);box-shadow:0 0 6px var(--purple-glow);animation:dot-pulse 1.2s infinite}
+.agent-item .status-dot.error,.agent-item .status-dot.failed{background:var(--red);box-shadow:0 0 6px var(--red-glow);animation:dot-shake 0.3s infinite}
+.agent-item .status-dot.done,.agent-item .status-dot.passed{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}
+.agent-item .status-dot.idle{background:var(--text-subtle)}
+.agent-item .agent-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.agent-item .agent-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.agent-item .agent-role{font-size:10px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:0.04em}
+/* ─── Right Panel ──────────────────────────────────────────────────────────── */
+.right-panel{position:fixed;top:76px;right:12px;bottom:240px;width:320px;z-index:var(--z-panel);display:flex;flex-direction:column;background:var(--bg-glass);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md),var(--shadow-inset);overflow:hidden;transition:all var(--transition-slow)}
+.panel-tabs{display:flex;gap:0;padding:6px 6px 0;flex-shrink:0;border-bottom:1px solid var(--border)}
+.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 4px;border:none;background:transparent;font-size:12px;font-weight:500;color:var(--text-subtle);cursor:pointer;position:relative;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all var(--transition);white-space:nowrap}
+.tab:hover{color:var(--text-dim);background:var(--bg-hover)}
+.tab.active{color:var(--accent);background:var(--bg-card)}
+.tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--accent);border-radius:1px}
+.tab svg{width:13px;height:13px;flex-shrink:0}
+.tab-badge{font-size:9px;font-weight:700;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent);border-radius:var(--radius-full);padding:0 4px;font-variant-numeric:tabular-nums}
+.tab-badge.alert{background:var(--red-bg);color:var(--red)}
+.panel-content{flex:1;overflow-y:auto;padding:8px}
+.panel-content.hidden{display:none}
+/* Log */
+.log-entry{padding:5px 10px;margin-bottom:2px;border-radius:var(--radius-xs);font-size:12px;line-height:1.5;font-family:"SF Mono","Fira Code","Cascadia Code",Consolas,monospace;transition:background var(--transition);display:flex;gap:8px;align-items:flex-start}
+.log-entry:hover{background:var(--bg-hover)}
+.log-entry .timestamp{color:var(--text-subtle);font-size:10px;flex-shrink:0;font-variant-numeric:tabular-nums;padding-top:1px}
+.log-entry .message{color:var(--text-dim);word-break:break-word;flex:1}
+.log-entry.warn .message{color:var(--orange)}
+.log-entry.error .message{color:var(--red)}
+.log-entry.success .message{color:var(--accent)}
+.tw-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:tw-blink 0.6s step-end infinite}
+@keyframes tw-blink{0%,100%{opacity:1}50%{opacity:0}}
+/* Files */
+.file-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}
+.file-item:hover{background:var(--bg-hover)}
+.file-item svg{width:14px;height:14px;flex-shrink:0;color:var(--text-subtle)}
+.file-item .file-name{flex:1;font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.file-item:hover .file-name{color:var(--text)}
+/* Results */
+.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px}
+.result-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:4px;transition:all var(--transition)}
+.result-card:hover{border-color:var(--border-accent);background:var(--bg-hover)}
+.result-card .label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-subtle)}
+.result-card .value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
+.result-card.passed .value{color:var(--accent)}
+.result-card.failed .value{color:var(--red)}
+.result-card.skipped .value{color:var(--orange)}
+.result-card.timeout .value{color:var(--purple)}
+.pass-rate-bar{height:6px;background:var(--bg-card);border-radius:3px;overflow:hidden;margin:8px 4px;border:1px solid var(--border)}
+.pass-rate-bar .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width 0.8s var(--ease-out-expo)}
+.quality-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:4px}
+.quality-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;text-align:center;transition:all var(--transition)}
+.quality-item:hover{border-color:var(--border-accent)}
+.quality-item .q-label{font-size:9px;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-subtle)}
+.quality-item .q-value{font-size:14px;font-weight:700;color:var(--blue);margin-top:2px}
+/* ─── Bottom Bar ───────────────────────────────────────────────────────────── */
+.bottom-bar{position:fixed;bottom:12px;left:12px;right:12px;height:216px;z-index:var(--z-panel);display:flex;flex-direction:column;background:var(--bg-glass);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),var(--shadow-inset);overflow:hidden;transition:all var(--transition-slow)}
+.bottom-bar.collapsed{height:40px}
+.bottom-bar.collapsed .desk-row{opacity:0;pointer-events:none}
+.bottom-bar-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--border);cursor:pointer}
+.bottom-bar-header h3{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-subtle);font-weight:600}
+.bottom-bar-header .toggle-icon{color:var(--text-subtle);transition:transform var(--transition)}
+.bottom-bar.collapsed .toggle-icon{transform:rotate(180deg)}
+.desk-row{flex:1;display:flex;gap:8px;padding:8px 12px;overflow-x:auto;overflow-y:hidden;transition:opacity var(--transition)}
+/* Desk Cards */
+.desk-card{flex:0 0 200px;display:flex;flex-direction:column;gap:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;position:relative;overflow:hidden;transition:all var(--transition)}
+.desk-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:0;transition:opacity var(--transition)}
+.desk-card:hover{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
+.desk-card:hover::before{opacity:1}
+.desk-card.working::before{background:var(--accent);opacity:1}
+.desk-card.error::before,.desk-card.failed::before{background:var(--red);opacity:1}
+.desk-card.thinking::before{background:var(--purple);opacity:1}
+.desk-card.testing::before{background:var(--blue);opacity:1}
+.desk-card .card-top{display:flex;align-items:center;gap:8px}
+.desk-card .card-avatar{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-sm)}
+.desk-card .card-avatar svg{width:20px;height:20px}
+.desk-card .card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.desk-card .card-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.desk-card .card-role{font-size:10px;color:var(--text-subtle);text-transform:uppercase;letter-spacing:0.04em}
+.desk-card .status-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:2px 6px;border-radius:var(--radius-xs)}
+.desk-card .status-badge.working{background:var(--accent-bg);color:var(--accent)}
+.desk-card .status-badge.testing{background:var(--blue-bg);color:var(--blue)}
+.desk-card .status-badge.thinking{background:var(--purple-bg);color:var(--purple)}
+.desk-card .status-badge.error,.desk-card .status-badge.failed{background:var(--red-bg);color:var(--red)}
+.desk-card .status-badge.done,.desk-card .status-badge.passed{background:var(--accent-bg);color:var(--accent)}
+.desk-card .status-badge.idle{background:var(--bg-hover);color:var(--text-subtle)}
+.desk-card .card-task{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}
+.desk-card .progress-bar{height:3px;background:var(--bg-hover);border-radius:2px;overflow:hidden}
+.desk-card .progress-bar .fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--cyan));transition:width 0.4s var(--ease-out-expo)}
+/* ─── File Preview Modal ───────────────────────────────────────────────────── */
+.file-preview{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition)}
+.file-preview.visible{opacity:1;pointer-events:auto}
+.file-preview .backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:var(--blur-sm)}
+.file-preview .fp-dialog{position:relative;width:min(800px,90vw);height:min(600px,80vh);background:var(--bg-glass-strong);backdrop-filter:var(--blur-lg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;transform:scale(0.95) translateY(10px);transition:transform var(--transition-spring)}
+.file-preview.visible .fp-dialog{transform:scale(1) translateY(0)}
+.fp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
+.fp-header .fp-title{font-size:13px;font-weight:600;color:var(--text)}
+.fp-header .fp-close{width:28px;height:28px;border:none;background:var(--bg-card);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all var(--transition);border:1px solid var(--border)}
+.fp-header .fp-close:hover{background:var(--red-bg);color:var(--red);border-color:rgba(var(--red-rgb),0.25)}
+.fp-code{flex:1;overflow:auto;padding:16px;font-family:"SF Mono","Fira Code","Cascadia Code",Consolas,monospace;font-size:12px;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;word-break:break-all;tab-size:2}
+/* ─── Tooltip ──────────────────────────────────────────────────────────────── */
+.tooltip{position:fixed;z-index:var(--z-tooltip);padding:6px 10px;background:var(--bg-glass-strong);backdrop-filter:var(--blur-md);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);font-size:11px;color:var(--text);pointer-events:none;opacity:0;transition:opacity 0.15s;max-width:280px}
+.tooltip.visible{opacity:1}
+/* ─── Shortcut Legend ──────────────────────────────────────────────────────── */
+.shortcut-legend{position:fixed;bottom:240px;right:12px;z-index:var(--z-notify);display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:12px 16px;background:var(--bg-glass-strong);backdrop-filter:var(--blur-lg);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(8px) scale(0.96);pointer-events:none;transition:all var(--transition-spring)}
+.shortcut-legend.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
+.shortcut-legend kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:11px;font-weight:600;color:var(--text);font-family:inherit;box-shadow:0 1px 2px rgba(0,0,0,0.15)}
+.shortcut-legend span{font-size:12px;color:var(--text-dim);display:flex;align-items:center}
+/* ─── Loading ──────────────────────────────────────────────────────────────── */
+.loading-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--bg-void);transition:opacity 0.8s var(--ease-out-expo)}
+.loading-overlay.hidden{opacity:0;pointer-events:none}
+.loading-bar{width:200px;height:3px;background:var(--bg-card);border-radius:2px;overflow:hidden}
+.loading-bar .fill{width:0%;height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:2px;transition:width 0.3s var(--ease-out-expo)}
+.loading-text{font-size:12px;color:var(--text-subtle);letter-spacing:0.04em}
+/* ─── Toast ────────────────────────────────────────────────────────────────── */
+.toast-container{position:fixed;top:76px;right:12px;z-index:var(--z-notify);display:flex;flex-direction:column;gap:8px;pointer-events:none}
+.toast{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-glass-strong);backdrop-filter:var(--blur-md);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:12px;color:var(--text);pointer-events:auto;animation:toast-in 0.4s var(--ease-spring),toast-out 0.3s ease-in 3.7s forwards;max-width:320px}
+.toast.success{border-left:3px solid var(--accent)}
+.toast.error{border-left:3px solid var(--red)}
+.toast.warning{border-left:3px solid var(--orange)}
+.toast.info{border-left:3px solid var(--blue)}
+/* ─── 3D HUD ───────────────────────────────────────────────────────────────── */
+.bubble-3d{padding:6px 12px;background:var(--bg-glass-strong);backdrop-filter:var(--blur-sm);border:1px solid var(--border-accent);border-radius:12px 12px 12px 2px;font-size:12px;color:var(--text);box-shadow:var(--shadow-sm);animation:bubble-3d-in 0.3s var(--ease-spring);pointer-events:none;white-space:nowrap}
+.agent-label-3d{padding:3px 8px;background:var(--bg-glass);backdrop-filter:var(--blur-xs);border:1px solid var(--border-glass);border-radius:var(--radius-sm);font-size:10px;font-weight:600;color:var(--text);text-align:center;pointer-events:none;box-shadow:var(--shadow-sm);white-space:nowrap}
+.agent-label-3d .role{display:block;font-size:8px;font-weight:400;color:var(--text-subtle);text-transform:uppercase;letter-spacing:0.04em}
+/* ─── Animations ───────────────────────────────────────────────────────────── */
+@keyframes conn-pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
+@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}}
+@keyframes dot-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}
+@keyframes toast-in{from{opacity:0;transform:translateX(40px) scale(0.9)}to{opacity:1;transform:translateX(0) scale(1)}}
+@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
+@keyframes bubble-3d-in{from{opacity:0;transform:translateY(6px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
+@keyframes float-gentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
+@keyframes rotate-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
+@keyframes glow-pulse{0%,100%{opacity:0.6}50%{opacity:1}}
+.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease infinite;border-radius:var(--radius-sm)}
+/* ─── Responsive ───────────────────────────────────────────────────────────── */
+@media(max-width:1200px){.sidebar{width:180px}.right-panel{width:280px}.stats{display:none}}
+@media(max-width:960px){.sidebar{display:none}.right-panel{width:260px}}
+@media(max-width:768px){.header{padding:0 10px;gap:4px}.right-panel{display:none}.bottom-bar{height:180px}}
+@media print{.header,.sidebar,.bottom-bar,.right-panel,.shortcut-legend,.tooltip,.file-preview,.loading-overlay,.toast-container{display:none!important}#three-canvas{position:static;width:100%;height:auto}}
 </style>
 </head>
 <body>
-<div class="app">
-  <header class="header">
-    <div class="logo">
-      <svg viewBox="0 0 16 16" fill="none"><rect x="4" y="2" width="8" height="3" rx="1" fill="var(--accent)"/><rect x="3" y="5" width="10" height="6" rx="2" fill="var(--accent)" opacity=".8"/><rect x="5" y="11" width="2" height="2" fill="var(--accent)" opacity=".6"/><rect x="9" y="11" width="2" height="2" fill="var(--accent)" opacity=".6"/><rect x="5" y="6" width="2" height="2" rx="1" fill="var(--bg)"/><rect x="9" y="6" width="2" height="2" rx="1" fill="var(--bg)"/><rect x="6" y="9" width="4" height="1" fill="var(--bg)" opacity=".5"/></svg>
-    </div>
-    <div class="title-wrap">
-      <h1>OpenCroc Studio</h1>
-      <div class="subtitle">Pixel Ops Dashboard · Real-time Multi-Agent Runtime</div>
-    </div>
-    <div class="actions">
-      <div class="view-switch">
-        <button id="view-dashboard" class="active">
-          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="3" rx="1"/><rect x="9" y="6" width="6" height="6" rx="1" opacity=".6"/><rect x="1" y="9" width="6" height="3" rx="1" opacity=".6"/></svg>
-          Dashboard
-        </button>
-        <button id="view-office">
-          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="2" y="8" width="12" height="6" rx="1"/><rect x="5" y="3" width="6" height="5" rx="1" opacity=".6"/><rect x="4" y="14" width="2" height="1"/><rect x="10" y="14" width="2" height="1"/></svg>
-          Pixel Office
-        </button>
-      </div>
-      <button class="btn" id="btn-scan" title="Scan project">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4"/><line x1="10" y1="10" x2="14" y2="14"/></svg>
-        Scan
-      </button>
-      <button class="btn" id="btn-pipeline" title="Run full pipeline">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><polygon points="4,2 14,8 4,14"/></svg>
-        Pipeline
-      </button>
-      <select id="run-mode" class="mode-select" title="Test run mode">
-        <option value="auto">Auto</option>
-        <option value="reuse">Reuse</option>
-        <option value="managed">Managed</option>
-      </select>
-      <button class="btn" id="btn-run-tests" title="Run generated tests" disabled>
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8l3 3 7-7"/></svg>
-        Tests
-      </button>
-      <button class="btn" id="btn-reports" title="Generate reports" disabled>
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="1" width="12" height="14" rx="2"/><line x1="5" y1="5" x2="11" y2="5"/><line x1="5" y1="8" x2="11" y2="8"/><line x1="5" y1="11" x2="9" y2="11"/></svg>
-        Reports
-      </button>
-      <button class="btn danger" id="btn-reset" title="Reset agents">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>
-        Reset
-      </button>
-    </div>
-    <div class="spacer"></div>
-    <div class="stats">
-      <div><div class="label">Modules</div><span class="value" id="s-mod">-</span></div>
-      <div><div class="label">Models</div><span class="value" id="s-mdl">-</span></div>
-      <div><div class="label">APIs</div><span class="value" id="s-api">-</span></div>
-      <div><div class="label">Tests</div><span class="value" id="s-files">-</span></div>
-      <div id="s-results-wrap" style="display:none"><div class="label">Results</div><span class="value" id="s-results">-</span></div>
-    </div>
-    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
-      <svg id="theme-icon-dark" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 1 0 0 14A5 5 0 0 1 8 1z"/></svg>
-      <svg id="theme-icon-light" viewBox="0 0 16 16" fill="currentColor" style="display:none"><circle cx="8" cy="8" r="3"/><g stroke="currentColor" stroke-width="1.2"><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/><line x1="3.05" y1="3.05" x2="4.46" y2="4.46"/><line x1="11.54" y1="11.54" x2="12.95" y2="12.95"/><line x1="3.05" y1="12.95" x2="4.46" y2="11.54"/><line x1="11.54" y1="4.46" x2="12.95" y2="3.05"/></g></svg>
-    </button>
-    <div class="conn-dot" id="conn-dot" title="WebSocket"></div>
-  </header>
-  <aside class="sidebar">
-    <h3>
-      <svg viewBox="0 0 16 16" fill="currentColor"><path d="M1 2h14v2H1zm0 4h10v2H1zm0 4h12v2H1zm0 4h8v2H1z"/></svg>
-      Modules
-    </h3>
-    <div id="mod-list"></div>
-    <h3 style="margin-top:12px">
-      <svg viewBox="0 0 16 16" fill="var(--accent)"><rect x="4" y="2" width="8" height="3" rx="1"/><rect x="3" y="5" width="10" height="6" rx="2" opacity=".8"/><rect x="5" y="11" width="2" height="2" opacity=".6"/><rect x="9" y="11" width="2" height="2" opacity=".6"/></svg>
-      Agents
-    </h3>
-    <div id="agent-sidebar"></div>
-  </aside>
+<!-- Loading Overlay -->
+<div class="loading-overlay" id="loading-overlay">
+  <svg width="48" height="48" viewBox="0 0 16 16" fill="none" style="opacity:0.8"><rect x="2" y="4" width="12" height="10" rx="1" fill="none" stroke="var(--accent)" stroke-width="1.5"/><circle cx="8" cy="9" r="2.5" fill="var(--accent)"/><rect x="5" y="2" width="6" height="2" rx="0.5" fill="var(--accent)" opacity="0.6"/></svg>
+  <div class="loading-bar"><div class="fill" id="loading-fill"></div></div>
+  <div class="loading-text" id="loading-text">Initializing 3D Engine…</div>
+</div>
+<!-- 3D Canvas -->
+<canvas id="three-canvas"></canvas>
+<!-- Header -->
+<div class="header" id="header">
+  <div class="logo"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="10" rx="1" fill="none" stroke="var(--accent)" stroke-width="1.5"/><circle cx="8" cy="9" r="2.5" fill="var(--accent)"/><rect x="5" y="2" width="6" height="2" rx="0.5" fill="var(--accent)" opacity="0.6"/></svg></div>
+  <div class="title-wrap"><h1>OpenCroc Studio</h1><span class="subtitle">3D Ops Dashboard · Real-time Multi-Agent Runtime</span></div>
+  <div class="h-divider"></div>
+  <div class="view-switch">
+    <button id="view-3d" class="active"><svg viewBox="0 0 16 16" fill="none"><path d="M8 1L14.5 5v6L8 15 1.5 11V5z" stroke="currentColor" stroke-width="1.2"/><path d="M8 1v14M1.5 5L8 9l6.5-4" stroke="currentColor" stroke-width="1" opacity="0.5"/></svg>3D Office</button>
+    <button id="view-graph"><svg viewBox="0 0 16 16" fill="none"><circle cx="4" cy="4" r="2" fill="currentColor" opacity="0.6"/><circle cx="12" cy="4" r="2" fill="currentColor" opacity="0.6"/><circle cx="8" cy="12" r="2" fill="currentColor" opacity="0.6"/><line x1="4" y1="6" x2="8" y2="10" stroke="currentColor" stroke-width="1"/><line x1="12" y1="6" x2="8" y2="10" stroke="currentColor" stroke-width="1"/></svg>Graph</button>
+  </div>
+  <div class="h-divider"></div>
+  <div class="actions">
+    <button class="btn btn-secondary" id="btn-scan"><svg viewBox="0 0 16 16" fill="none"><path d="M2 8h12M4 4h8M6 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Scan</button>
+    <button class="btn btn-primary" id="btn-pipeline"><svg viewBox="0 0 16 16" fill="none"><path d="M2 8h3l2-4 2 8 2-4h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Pipeline</button>
+    <div class="run-mode-wrap"><select id="run-mode"><option value="auto">Auto</option><option value="reuse">Reuse</option><option value="managed">Managed</option></select></div>
+    <button class="btn btn-secondary" id="btn-run-tests"><svg viewBox="0 0 16 16" fill="none"><path d="M4 2v12l8-6z" fill="currentColor" opacity="0.7"/></svg>Tests</button>
+    <button class="btn btn-secondary" id="btn-reports"><svg viewBox="0 0 16 16" fill="none"><rect x="3" y="1" width="10" height="14" rx="1" stroke="currentColor" stroke-width="1.2"/><line x1="5" y1="5" x2="11" y2="5" stroke="currentColor" stroke-width="1" opacity="0.5"/><line x1="5" y1="8" x2="11" y2="8" stroke="currentColor" stroke-width="1" opacity="0.5"/><line x1="5" y1="11" x2="9" y2="11" stroke="currentColor" stroke-width="1" opacity="0.5"/></svg>Reports</button>
+    <button class="btn btn-danger" id="btn-reset"><svg viewBox="0 0 16 16" fill="none"><path d="M2 8a6 6 0 0111.3-2.8M14 8a6 6 0 01-11.3 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M14 2v4h-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Reset</button>
+  </div>
+  <div class="stats">
+    <div class="stat-box"><span class="stat-label">MODULES</span><span class="stat-value" id="s-mod">0</span></div>
+    <div class="stat-box"><span class="stat-label">MODELS</span><span class="stat-value" id="s-mdl">0</span></div>
+    <div class="stat-box"><span class="stat-label">APIs</span><span class="stat-value" id="s-api">0</span></div>
+    <div class="stat-box"><span class="stat-label">TESTS</span><span class="stat-value" id="s-files">-</span></div>
+  </div>
+  <div class="header-end">
+    <button id="theme-toggle" title="Toggle theme"><svg id="theme-icon-dark" viewBox="0 0 16 16" fill="none"><path d="M8 1a7 7 0 100 14 5 5 0 010-14z" fill="currentColor"/></svg><svg id="theme-icon-light" viewBox="0 0 16 16" fill="none" style="display:none"><circle cx="8" cy="8" r="3" fill="currentColor"/><g stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/><line x1="3.05" y1="3.05" x2="4.46" y2="4.46"/><line x1="11.54" y1="11.54" x2="12.95" y2="12.95"/><line x1="3.05" y1="12.95" x2="4.46" y2="11.54"/><line x1="11.54" y1="4.46" x2="12.95" y2="3.05"/></g></svg></button>
+    <div id="conn-dot" title="WebSocket"></div>
+  </div>
+</div>
-  <main class="main">
-    <div class="view" id="graph-view">
-      <canvas id="graph-canvas"></canvas>
-    </div>
-    <div class="view hidden" id="pixel-view">
-      <div class="pixel-stage">
-        <img class="asset desk-asset" src="./assets/star/desk-v3.webp" alt="desk">
-        <img class="asset server-asset" src="./assets/botreview/server.gif" alt="server">
-        <img class="asset coffee-asset" src="./assets/botreview/coffee-machine.gif" alt="coffee">
-        <img class="asset walls-asset" src="./assets/botreview/walls.png" alt="walls">
-        <div class="pixel-kpis">
-          <div class="pixel-kpi"><div class="t">Working</div><div class="v" id="kpi-working">0</div></div>
-          <div class="pixel-kpi errors"><div class="t">Errors</div><div class="v" id="kpi-errors">0</div></div>
-          <div class="pixel-kpi done"><div class="t">Done</div><div class="v" id="kpi-done">0</div></div>
-        </div>
-        <div class="pixel-agent-layer" id="pixel-agent-layer"></div>
-      </div>
-    </div>
-    <div class="tooltip" id="tooltip"></div>
-  </main>
+<!-- Sidebar -->
+<div class="sidebar" id="sidebar">
+  <div class="sidebar-header"><h3>Modules</h3><button class="sidebar-toggle" id="sidebar-toggle"><svg viewBox="0 0 16 16" fill="none"><path d="M10 3L5 8l5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div>
+  <div class="sidebar-content" id="sidebar-content"><div id="mod-list"></div><div id="agent-sidebar" style="margin-top:12px"></div></div>
+</div>
-  <div class="log-panel">
-    <div class="panel-tabs">
-      <button class="tab active" data-tab="log">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><rect x="1" y="2" width="14" height="12" rx="2" opacity=".2"/><line x1="4" y1="5" x2="12" y2="5" stroke="currentColor" stroke-width="1.2"/><line x1="4" y1="8" x2="10" y2="8" stroke="currentColor" stroke-width="1.2"/><line x1="4" y1="11" x2="8" y2="11" stroke="currentColor" stroke-width="1.2"/></svg>
-        Log
-      </button>
-      <button class="tab" data-tab="files">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor"><path d="M3 1h7l3 3v11H3V1z" opacity=".3"/><path d="M10 1v3h3" fill="none" stroke="currentColor" stroke-width="1"/></svg>
-        Tests <span id="file-badge" class="tab-badge" style="display:none">0</span>
-      </button>
-      <button class="tab" data-tab="results">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M3 8l3 3 7-7"/></svg>
-        Results <span id="result-badge" class="tab-badge" style="display:none">0</span>
-      </button>
-      <button class="tab" data-tab="reports">
-        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" opacity=".7"><rect x="1" y="3" width="5" height="10" rx="1"/><rect x="7" y="1" width="8" height="14" rx="1"/></svg>
-        Reports
-      </button>
-    </div>
-    <div class="log-list" id="log-list"></div>
-    <div class="file-list" id="file-list" style="display:none"></div>
-    <div class="file-list" id="results-panel" style="display:none"></div>
-    <div class="file-list" id="reports-panel" style="display:none"></div>
+<!-- Right Panel -->
+<div class="right-panel" id="right-panel">
+  <div class="panel-tabs">
+    <button class="tab active" data-tab="log"><svg viewBox="0 0 16 16" fill="none"><path d="M2 3h12M2 7h8M2 11h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>Log</button>
+    <button class="tab" data-tab="files"><svg viewBox="0 0 16 16" fill="none"><path d="M3 1h6l4 4v10H3z" stroke="currentColor" stroke-width="1.2"/><path d="M9 1v4h4" stroke="currentColor" stroke-width="1" opacity="0.5"/></svg>Tests</button>
+    <button class="tab" data-tab="results"><svg viewBox="0 0 16 16" fill="none"><polyline points="2,12 5,6 9,10 14,3" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>Results</button>
+    <button class="tab" data-tab="reports"><svg viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="1" stroke="currentColor" stroke-width="1.2"/><path d="M5 10V7M8 10V5M11 10V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>Reports</button>
   </div>
+  <div class="panel-content" id="log-list"></div>
+  <div class="panel-content hidden" id="file-list"></div>
+  <div class="panel-content hidden" id="results-panel"></div>
+  <div class="panel-content hidden" id="reports-panel"></div>
+</div>
-  <section class="office" id="croc-office"></section>
+<!-- Bottom Bar -->
+<div class="bottom-bar" id="bottom-bar">
+  <div class="bottom-bar-header" id="bottom-bar-toggle"><h3>Agent Desks</h3><svg class="toggle-icon" width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M4 10l4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+  <div class="desk-row" id="desk-row"></div>
 </div>
+<!-- File Preview -->
 <div class="file-preview" id="file-preview">
-  <div class="fp-header"><h4 id="fp-title">file.spec.ts</h4><button class="fp-close" id="fp-close">&times;</button></div>
-  <pre id="fp-code"></pre>
+  <div class="backdrop" id="fp-backdrop"></div>
+  <div class="fp-dialog"><div class="fp-header"><span class="fp-title" id="fp-title">File Preview</span><button class="fp-close" id="fp-close"><svg viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button></div><pre class="fp-code" id="fp-code"></pre></div>
 </div>
-<!-- Keyboard shortcut legend -->
+<!-- Tooltip -->
+<div class="tooltip" id="tooltip"><div class="tt-name"></div><div class="tt-module"></div><div class="tt-type"></div></div>
+<!-- Shortcut Legend -->
 <div class="shortcut-legend" id="shortcut-legend">
-  <kbd>1</kbd><span>Dashboard</span>
-  <kbd>2</kbd><span>Pixel Office</span>
-  <kbd>S</kbd><span>Scan</span>
-  <kbd>P</kbd><span>Pipeline</span>
-  <kbd>T</kbd><span>Run Tests</span>
-  <kbd>R</kbd><span>Reports</span>
-  <kbd>X</kbd><span>Reset</span>
-  <kbd>D</kbd><span>Dark/Light</span>
-  <kbd>?</kbd><span>Show shortcuts</span>
-  <kbd>Esc</kbd><span>Close panel</span>
+  <kbd>1</kbd><span>3D Office</span><kbd>2</kbd><span>Graph View</span>
+  <kbd>S</kbd><span>Scan</span><kbd>P</kbd><span>Pipeline</span>
+  <kbd>T</kbd><span>Run Tests</span><kbd>R</kbd><span>Reports</span>
+  <kbd>X</kbd><span>Reset</span><kbd>D</kbd><span>Dark/Light</span>
+  <kbd>?</kbd><span>Shortcuts</span><kbd>Esc</kbd><span>Close</span>
 </div>
-<script>
-/* ═══════════════════════════════════════════════════════
-   SVG Icon Library (replaces emoji) — inspired by OpenClaw PixelSvg
-   ═══════════════════════════════════════════════════════ */
-const ICONS = {
-  croc: `<svg viewBox="0 0 16 16" fill="none"><rect x="4" y="1" width="8" height="3" rx="1" fill="var(--accent)"/><rect x="3" y="4" width="10" height="7" rx="2" fill="var(--accent)" opacity=".85"/><rect x="5" y="5" width="2" height="2" rx="1" fill="var(--bg)"/><rect x="9" y="5" width="2" height="2" rx="1" fill="var(--bg)"/><rect x="6" y="8" width="4" height="1" fill="var(--bg)" opacity=".4"/><rect x="5" y="11" width="2" height="3" rx="1" fill="var(--accent)" opacity=".6"/><rect x="9" y="11" width="2" height="3" rx="1" fill="var(--accent)" opacity=".6"/></svg>`,
-  parser: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--blue)" stroke-width="1.3"><rect x="2" y="2" width="12" height="12" rx="2"/><line x1="5" y1="6" x2="11" y2="6"/><line x1="5" y1="9" x2="9" y2="9"/></svg>`,
-  analyzer: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--purple)" stroke-width="1.3"><rect x="1" y="11" width="3" height="4"/><rect x="5" y="7" width="3" height="8"/><rect x="9" y="3" width="3" height="12"/><rect x="13" y="1" width="2" height="14"/></svg>`,
-  tester: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.3"><path d="M6 2v4l-3 8h10l-3-8V2"/><line x1="4" y1="2" x2="12" y2="2"/></svg>`,
-  healer: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--orange)" stroke-width="1.5"><path d="M5 3l-2 5h4l-2 5 7-7h-4l2-3z"/></svg>`,
-  planner: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--blue)" stroke-width="1.3"><rect x="2" y="1" width="12" height="14" rx="2"/><line x1="5" y1="5" x2="11" y2="5"/><line x1="5" y1="8" x2="11" y2="8"/><line x1="5" y1="11" x2="8" y2="11"/></svg>`,
-  reporter: `<svg viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.3"><rect x="1" y="2" width="14" height="12" rx="2"/><polyline points="4,10 6,6 8,9 10,4 12,7"/></svg>`,
+<!-- Toast Container -->
+<div class="toast-container" id="toast-container"></div>
+<!-- Import Map -->
+<script type="importmap">{"imports":{"three":"https://unpkg.com/three@0.170.0/build/three.module.js","three/addons/":"https://unpkg.com/three@0.170.0/examples/jsm/"}}</script>
+<!-- Main App -->
+<script type="module">
+import { createEngine, resizeEngine, getRenderer, getScene, getCamera, getComposer, getClock } from './js/engine.js';
+import { createOffice, updateOfficeLighting, getFloorY } from './js/office.js';
+import { AgentManager } from './js/agents.js';
+import { ParticleManager } from './js/effects.js';
+import { CameraController } from './js/camera.js';
+import { GraphViz, HologramDisplay } from './js/dataviz.js';
+import { StateManager } from './js/state.js';
+import { UIManager } from './js/ui.js';
+/* ─── Constants ────────────────────────────────────────────────────────────── */
+const ICONS={
+  croc:'<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="10" rx="1" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="9" r="2.5" fill="currentColor"/><rect x="5" y="2" width="6" height="2" rx="0.5" fill="currentColor" opacity="0.6"/></svg>',
+  parser:'<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="9" width="3" height="5" rx="0.5" fill="currentColor" opacity="0.7"/><rect x="6.5" y="5" width="3" height="9" rx="0.5" fill="currentColor" opacity="0.8"/><rect x="11" y="2" width="3" height="12" rx="0.5" fill="currentColor"/></svg>',
+  analyzer:'<svg viewBox="0 0 16 16" fill="none"><rect x="2" y="8" width="2.5" height="6" rx="0.5" fill="currentColor" opacity="0.5"/><rect x="5.5" y="5" width="2.5" height="9" rx="0.5" fill="currentColor" opacity="0.7"/><rect x="9" y="3" width="2.5" height="11" rx="0.5" fill="currentColor" opacity="0.85"/><rect x="12.5" y="6" width="2.5" height="8" rx="0.5" fill="currentColor"/></svg>',
+  tester:'<svg viewBox="0 0 16 16" fill="none"><path d="M6 2h4v4l3 7a1 1 0 01-1 1H4a1 1 0 01-1-1l3-7V2z" stroke="currentColor" stroke-width="1.2"/><line x1="5" y1="2" x2="11" y2="2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>',
+  healer:'<svg viewBox="0 0 16 16" fill="none"><path d="M8 2L3 9h4l-1 5 6-7H8l1-5z" fill="currentColor" opacity="0.8"/></svg>',
+  planner:'<svg viewBox="0 0 16 16" fill="none"><rect x="3" y="1" width="10" height="14" rx="1" stroke="currentColor" stroke-width="1.2"/><path d="M6 1V3M10 1V3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><line x1="5" y1="6" x2="11" y2="6" stroke="currentColor" stroke-width="1" opacity="0.4"/><line x1="5" y1="9" x2="11" y2="9" stroke="currentColor" stroke-width="1" opacity="0.4"/><line x1="5" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="1" opacity="0.4"/></svg>',
+  reporter:'<svg viewBox="0 0 16 16" fill="none"><polyline points="2,12 5,6 8,9 11,4 14,7" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 };
-const ROLE_ICONS = { parser:ICONS.parser, analyzer:ICONS.analyzer, tester:ICONS.tester, healer:ICONS.healer, planner:ICONS.planner, reporter:ICONS.reporter };
-/* Bubble messages (Star-Office style) */
-const BUBBLE_TEXTS = {
-  working: ['正在执行...', '快了快了', '处理中...', '加油 💪'],
-  testing: ['跑测试中...', '验证 API...', '等结果...'],
-  thinking: ['让我想想...', '分析中...', '推理...', '🤔'],
-  error: ['出错了!', '修复中...', '糟糕...', '排查问题...'],
-  idle: ['摸鱼中~', '等任务...', '☕ 喝咖啡', 'zzZ'],
-  done: ['搞定!', '完成 ✓', '下一个!'],
-  passed: ['全绿 ✓', '测试通过!'],
-  failed: ['有失败...', '需要修复'],
+const ROLE_ICONS={parser:ICONS.parser,analyzer:ICONS.analyzer,tester:ICONS.tester,healer:ICONS.healer,planner:ICONS.planner,reporter:ICONS.reporter};
+const BUBBLE_TEXTS={
+  working:['正在执行...','快了快了','处理中...','加油 💪'],testing:['跑测试中...','验证 API...','等结果...'],
+  thinking:['让我想想...','分析中...','推理...','🤔'],error:['出错了!','修复中...','糟糕...','排查问题...'],
+  idle:['摸鱼中~','等任务...','☕ 喝咖啡','zzZ'],done:['搞定!','完成 ✓','下一个!'],
+  passed:['全绿 ✓','测试通过!'],failed:['有失败...','需要修复'],
 };
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
-const S = {
-  project:null, graph:{nodes:[],edges:[]}, agents:[], ws:null,
-  pan:{x:0,y:0}, zoom:1, dragging:false, dragStart:{x:0,y:0},
-  nodePos:new Map(), hoveredNode:null, running:false, _userPanned:false,
-  generatedFiles:[], testMetrics:null, testQuality:null, reports:[], runMode:'auto',
-  currentView:'dashboard', theme:'dark', bubbleTimers:new Map(),
-  spriteSheets:new Map(), spriteAnimFrames:new Map(), spriteAnimTimers:new Map()
-};
+/* ─── Managers ─────────────────────────────────────────────────────────────── */
+const state=new StateManager();
+const ui=new UIManager(state,{ICONS,ROLE_ICONS,BUBBLE_TEXTS,esc});
+let agentMgr, particleMgr, camCtrl, graphViz, hologram;
-/* ═══════════════════════════════════════════════════════
-   Spritesheet Animation Engine (inspired by Star-Office Phaser)
-   ═══════════════════════════════════════════════════════ */
-const SPRITE_CONFIG = {
-  // Each character sprite: image src, frame grid, frame count, FPS per status
-  chars: [
-    { key:'char_0', src:'./assets/botreview/char_0.png', cols:1, rows:1, total:1 },
-    { key:'char_1', src:'./assets/botreview/char_1.png', cols:1, rows:1, total:1 },
-    { key:'char_2', src:'./assets/botreview/char_2.png', cols:1, rows:1, total:1 },
-  ],
-  // FPS by status — active states get faster animation
-  fps: { idle:2, working:8, testing:8, thinking:4, error:10, failed:10, done:4, passed:4 },
-};
+/* ─── Boot ─────────────────────────────────────────────────────────────────── */
+async function boot(){
+  ui.setLoading(5,'Creating state…');
+  state.set({project:null,graph:{nodes:[],edges:[]},agents:[],ws:null,running:false,
+    generatedFiles:[],testMetrics:null,testQuality:null,reports:[],runMode:'auto',
+    currentView:'3d',theme:localStorage.getItem('opencroc-theme')||'light',modMeta:new Map(),nodePos:new Map()});
-// Preload sprite images
-function preloadSprites(){
-  SPRITE_CONFIG.chars.forEach(cfg=>{
-    if(S.spriteSheets.has(cfg.key)) return;
-    const img=new Image(); img.src=cfg.src;
-    img.onload=()=>{ S.spriteSheets.set(cfg.key, {img,cols:cfg.cols,rows:cfg.rows,total:cfg.total}); };
-  });
-}
+  const theme=state.get('theme');
+  document.documentElement.setAttribute('data-theme',theme);
+  if(theme==='light'){document.getElementById('theme-icon-dark').style.display='none';document.getElementById('theme-icon-light').style.display=''}
-// Render a single frame of a sprite to a canvas element
-function renderSpriteFrame(canvas, spriteKey, frameIdx){
-  const sheet=S.spriteSheets.get(spriteKey);
-  if(!sheet||!canvas) return;
-  const ctx=canvas.getContext('2d');
-  const fw=sheet.img.naturalWidth/sheet.cols;
-  const fh=sheet.img.naturalHeight/sheet.rows;
-  const col=frameIdx%sheet.cols;
-  const row=Math.floor(frameIdx/sheet.cols);
-  ctx.clearRect(0,0,canvas.width,canvas.height);
-  ctx.imageSmoothingEnabled=false; // pixel-art crisp
-  ctx.drawImage(sheet.img, col*fw,row*fh,fw,fh, 0,0,canvas.width,canvas.height);
-}
+  ui.setLoading(10,'Initializing 3D engine…');
+  const canvas=document.getElementById('three-canvas');
+  await createEngine(canvas,theme);
-// Start/manage sprite animation loop for an agent
-function startSpriteAnim(canvasId, spriteKey, status){
-  // Stop existing timer
-  if(S.spriteAnimTimers.has(canvasId)){
-    clearInterval(S.spriteAnimTimers.get(canvasId));
-  }
-  const sheet=S.spriteSheets.get(spriteKey);
-  if(!sheet) return;
-  const fps=SPRITE_CONFIG.fps[status]||SPRITE_CONFIG.fps.idle;
-  let frame=S.spriteAnimFrames.get(canvasId)||0;
-  const canvas=document.getElementById(canvasId);
-  if(!canvas) return;
-  renderSpriteFrame(canvas, spriteKey, frame);
-  if(sheet.total<=1){ S.spriteAnimTimers.delete(canvasId); return; }
-  const timer=setInterval(()=>{
-    frame=(frame+1)%sheet.total;
-    S.spriteAnimFrames.set(canvasId, frame);
-    const c=document.getElementById(canvasId);
-    if(c) renderSpriteFrame(c, spriteKey, frame);
-    else { clearInterval(timer); S.spriteAnimTimers.delete(canvasId); }
-  }, 1000/fps);
-  S.spriteAnimTimers.set(canvasId, timer);
-}
+  ui.setLoading(25,'Building office…');
+  await createOffice(theme);
-/* ═══════════════════════════════════════════════════════
-   Typewriter Effect (inspired by Star-Office)
-   ═══════════════════════════════════════════════════════ */
-function typewriterLog(msg, level, charDelay){
-  level=level||'info';
-  charDelay=charDelay||35;
-  const el=document.getElementById('log-list');
-  const d=document.createElement('div'); d.className='log-entry '+level;
-  const ts=document.createElement('span'); ts.className='timestamp';
-  ts.textContent=new Date().toLocaleTimeString();
-  d.appendChild(ts);
-  const textSpan=document.createElement('span');
-  const cursor=document.createElement('span'); cursor.className='typewriter-cursor';
-  d.appendChild(textSpan); d.appendChild(cursor);
-  el.appendChild(d); el.scrollTop=el.scrollHeight;
-  let i=0;
-  const interval=setInterval(()=>{
-    if(i<msg.length){
-      textSpan.textContent+=msg[i]; i++;
-      el.scrollTop=el.scrollHeight;
-    }else{
-      clearInterval(interval); cursor.remove();
-    }
-  }, charDelay);
-  return d;
-}
+  ui.setLoading(40,'Setting up camera…');
+  camCtrl=new CameraController(canvas,getCamera(),getScene());
-async function fetchProject(){
-  try{
-    const r=await fetch('/api/project'); S.project=await r.json();
-    S.graph=S.project.graph||{nodes:[],edges:[]}; S.agents=S.project.agents||[];
-    layoutGraph(); updateAll();
-  }catch(e){addLog('Failed to load: '+e.message,'error');}
-}
-async function doScan(){
-  if(S.running)return; S.running=true; updateBtns();
-  addLog('🔍 Starting scan...','info',true);
-  try{await fetch('/api/scan',{method:'POST'});}
-  catch(e){addLog('Scan failed: '+e.message,'error');S.running=false;updateBtns();}
-}
-async function doPipeline(){
-  if(S.running)return; S.running=true; updateBtns();
-  addLog('▶ Starting pipeline...','info',true);
-  try{await fetch('/api/pipeline',{method:'POST'});}
-  catch(e){addLog('Pipeline failed: '+e.message,'error');S.running=false;updateBtns();}
-}
-async function doReset(){
-  try{await fetch('/api/reset',{method:'POST'});}catch(e){addLog('Reset failed','error');}
-  S.running=false; updateBtns(); addLog('⏹ Agents reset','info',true);
-}
-async function doRunTests(){
-  if(S.running)return; S.running=true; updateBtns();
-  addLog('🧪 Starting test execution ('+S.runMode+')...','info',true);
-  try{
-    const r=await fetch('/api/run-tests',{
-      method:'POST',
-      headers:{'content-type':'application/json'},
-      body:JSON.stringify({mode:S.runMode}),
-    });
-    if(!r.ok){
-      const body=await r.json().catch(()=>({error:'unknown error'}));
-      throw new Error(body.error||('HTTP '+r.status));
-    }
-  }
-  catch(e){addLog('Run tests failed: '+e.message,'error');S.running=false;updateBtns();}
-}
-async function doReports(){
-  if(S.running)return; S.running=true; updateBtns();
-  addLog('📊 Generating reports...','info',true);
-  try{await fetch('/api/reports/generate',{method:'POST'});}
-  catch(e){addLog('Report gen failed: '+e.message,'error');S.running=false;updateBtns();}
-}
-function updateBtns(){
-  document.getElementById('btn-scan').disabled=S.running;
-  document.getElementById('btn-pipeline').disabled=S.running;
-  document.getElementById('run-mode').disabled=S.running||S.generatedFiles.length===0;
-  document.getElementById('btn-run-tests').disabled=S.running||S.generatedFiles.length===0;
-  document.getElementById('btn-reports').disabled=S.running||S.generatedFiles.length===0;
-}
+  ui.setLoading(50,'Creating agents…');
+  agentMgr=new AgentManager(getScene());
-function connectWS(){
-  const p=location.protocol==='https:'?'wss:':'ws:';
-  S.ws=new WebSocket(p+'//'+location.host+'/ws');
-  S.ws.onopen=()=>{document.getElementById('conn-dot').classList.add('on');};
-  S.ws.onmessage=(e)=>{
-    try{
-      const m=JSON.parse(e.data);
-      if(m.type==='agent:update'&&Array.isArray(m.payload)){
-        S.agents=m.payload; renderOffice(); renderAgentSB(); renderPixelOffice();
-      }else if(m.type==='graph:update'){
-        S.graph=m.payload; layoutGraph(); renderCanvas(); renderModList(); updateStats();
-      }else if(m.type==='log'){
-        addLog(m.payload.message, m.payload.level);
-      }else if(m.type==='files:generated'){
-        S.generatedFiles=m.payload||[];
-        renderFileList();
-        document.getElementById('s-files').textContent=S.generatedFiles.length;
-        const badge=document.getElementById('file-badge');
-        badge.textContent=S.generatedFiles.length;badge.style.display='inline';
-      }else if(m.type==='pipeline:complete'){
-        S.running=false; updateBtns();
-        if(m.payload.status==='success') addLog('✅ Pipeline complete!','info',true);
-        else addLog('❌ Pipeline failed: '+(m.payload.error||''),'error',true);
-        setTimeout(fetchProject,500);
-      }else if(m.type==='test:complete'){
-        S.running=false; S.testMetrics=m.payload.metrics||null; S.testQuality=m.payload.quality||null; updateBtns(); renderResults();
-        const met=m.payload.metrics;
-        document.getElementById('s-results-wrap').style.display='';
-        if(met){
-          document.getElementById('s-results').textContent=met.passed+'✓ '+met.failed+'✗';
-          document.getElementById('s-results').style.color=met.failed>0?'var(--red)':'var(--accent)';
-        }else{
-          document.getElementById('s-results').textContent='setup fail';
-          document.getElementById('s-results').style.color='var(--red)';
-        }
-        const rb=document.getElementById('result-badge');
-        rb.textContent=m.payload.total||0; rb.style.display='inline';
-        rb.className='tab-badge'+((met&&met.failed>0)?' alert':'');
-      }else if(m.type==='reports:generated'){
-        S.running=false; S.reports=m.payload||[]; updateBtns(); renderReports();
-        addLog('📊 '+S.reports.length+' reports generated');
-      }
-    }catch{}
-  };
-  S.ws.onclose=()=>{document.getElementById('conn-dot').classList.remove('on');setTimeout(connectWS,3000);};
-}
+  ui.setLoading(60,'Creating effects…');
+  particleMgr=new ParticleManager(getScene());
-function addLog(msg,level,useTypewriter){
-  level=level||'info';
-  // Use typewriter for important messages (pipeline, scan, reset, test)
-  if(useTypewriter){
-    typewriterLog(msg,level,30);
-    return;
-  }
-  const el=document.getElementById('log-list');
-  const d=document.createElement('div'); d.className='log-entry '+level;
-  const ts=document.createElement('span'); ts.className='timestamp'; ts.textContent=new Date().toLocaleTimeString();
-  d.appendChild(ts); d.appendChild(document.createTextNode(msg));
-  el.appendChild(d); el.scrollTop=el.scrollHeight;
-}
-function updateStats(){
-  document.getElementById('s-mod').textContent=S.graph.nodes.filter(n=>n.type==='module').length;
-  document.getElementById('s-mdl').textContent=S.graph.nodes.filter(n=>n.type==='model').length;
-  document.getElementById('s-api').textContent=S.graph.nodes.filter(n=>n.type==='controller'||n.type==='api').length;
-}
-function layoutGraph(){
-  const nodes=S.graph.nodes; if(!nodes.length)return;
-  const c=document.getElementById('graph-canvas');
-  const w=c.clientWidth||800,h=c.clientHeight||500;
-  // Group non-module nodes by module
-  const mods=new Map();
-  S.modMeta=new Map();
-  for(const n of nodes){
-    if(n.type==='module') continue;
-    const m=n.module||'other';
-    if(!mods.has(m)) mods.set(m,[]);
-    mods.get(m).push(n);
-  }
-  // Sort by size descending
-  const keys=[...mods.keys()].sort((a,b)=>(mods.get(b).length-mods.get(a).length));
-  const nMods=keys.length||1;
-  const palette=['#4ecca3','#e94560','#f39c12','#3498db','#9b59b6','#1abc9c','#e67e22','#2ecc71','#e84393','#00cec9'];
-  const RING_CAP=24; // max nodes per ring layer
-  // Calculate each module's outer radius (for spacing)
-  const modRadii=[];
-  for(let i=0;i<keys.length;i++){
-    const cnt=mods.get(keys[i]).length;
-    const rings=Math.ceil(cnt/RING_CAP);
-    const outerR=rings===1?Math.max(40,cnt*6):rings*32+20;
-    modRadii.push(outerR);
-  }
-  // Adaptive base ring: sum of all module diameters / (2*PI) gives minimum perimeter
-  const totalDiam=modRadii.reduce((s,r)=>s+r*2+60,0); // 60px gap between modules
-  const baseRadius=Math.max(400, totalDiam/(Math.PI*2));
-  // Place modules with angular spacing proportional to their size
-  const totalWeight=modRadii.reduce((s,r)=>s+r+30,0);
-  let angle=-Math.PI/2;
-  for(let i=0;i<keys.length;i++){
-    const mn=mods.get(keys[i]); if(!mn)continue;
-    const cnt=mn.length;
-    const col=palette[i%palette.length];
-    const rings=Math.ceil(cnt/RING_CAP);
-    const outerR=modRadii[i];
-    // Angular span for this module proportional to its size
-    const span=((outerR+30)/totalWeight)*Math.PI*2;
-    const modAngle=angle+span/2;
-    angle+=span;
+  ui.setLoading(70,'Creating data visualization…');
+  graphViz=new GraphViz(getScene());
+  hologram=new HologramDisplay(getScene());
-    const mcx=w/2+Math.cos(modAngle)*baseRadius;
-    const mcy=h/2+Math.sin(modAngle)*baseRadius;
-    const modNodeId='module:'+keys[i];
-    S.nodePos.set(modNodeId,{x:mcx,y:mcy});
-    S.modMeta.set(keys[i],{cx:mcx,cy:mcy,radius:outerR+20,color:col,count:cnt});
-    // Spread nodes across concentric rings
-    let placed=0;
-    for(let ring=0;ring<rings;ring++){
-      const nodesInRing=Math.min(RING_CAP,cnt-placed);
-      const r=rings===1?Math.max(40,nodesInRing*6):(ring+1)*32;
-      for(let j=0;j<nodesInRing;j++){
-        const na=(j/nodesInRing)*Math.PI*2;
-        S.nodePos.set(mn[placed].id,{x:mcx+Math.cos(na)*r,y:mcy+Math.sin(na)*r});
-        placed++;
-      }
-    }
-  }
-  // Auto-center
-  if(nodes.length>0&&!S._userPanned){
-    let minX=Infinity,maxX=-Infinity,minY=Infinity,maxY=-Infinity;
-    for(const[,p] of S.nodePos){minX=Math.min(minX,p.x);maxX=Math.max(maxX,p.x);minY=Math.min(minY,p.y);maxY=Math.max(maxY,p.y);}
-    const gw=maxX-minX+300,gh=maxY-minY+300,gcx=minX+(maxX-minX)/2,gcy=minY+(maxY-minY)/2;
-    S.zoom=Math.min(1, Math.min(w/gw, h/gh));
-    S.pan.x=w/2-gcx*S.zoom;S.pan.y=h/2-gcy*S.zoom;
-  }
-}
-function renderCanvas(){
-  const canvas=document.getElementById('graph-canvas'),ctx=canvas.getContext('2d');
-  const dpr=window.devicePixelRatio||1;
-  canvas.width=canvas.clientWidth*dpr; canvas.height=canvas.clientHeight*dpr;
-  ctx.scale(dpr,dpr);
-  const w=canvas.clientWidth,h=canvas.clientHeight;
-  const isDark=S.theme==='dark';
-  ctx.clearRect(0,0,w,h);
-  // Background fill
-  ctx.fillStyle=isDark?'#0a0f1a':'#f8fafc';
-  ctx.fillRect(0,0,w,h);
-  ctx.save(); ctx.translate(S.pan.x,S.pan.y); ctx.scale(S.zoom,S.zoom);
-  // Subtle grid
-  ctx.strokeStyle=isDark?'rgba(148,163,184,.06)':'rgba(100,116,139,.08)';ctx.lineWidth=.5;
-  const gridStep=40;
-  for(let x=-2000;x<4000;x+=gridStep){ctx.beginPath();ctx.moveTo(x,-2000);ctx.lineTo(x,4000);ctx.stroke();}
-  for(let y=-2000;y<4000;y+=gridStep){ctx.beginPath();ctx.moveTo(-2000,y);ctx.lineTo(4000,y);ctx.stroke();}
-  const edges=S.graph.edges||[],nodes=S.graph.nodes||[];
-  // Draw module cluster backgrounds
-  if(S.modMeta){
-    for(const[name,m] of S.modMeta){
-      ctx.beginPath(); ctx.arc(m.cx,m.cy,m.radius,0,Math.PI*2);
-      ctx.fillStyle=m.color+(isDark?'0a':'08'); ctx.fill();
-      ctx.strokeStyle=m.color+(isDark?'25':'20'); ctx.lineWidth=1.5; ctx.setLineDash([6,4]); ctx.stroke(); ctx.setLineDash([]);
-      ctx.font='600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-      ctx.fillStyle=m.color+(isDark?'cc':'aa'); ctx.textAlign='center'; ctx.textBaseline='bottom';
-      ctx.fillText(name+' ('+m.count+')',m.cx,m.cy-m.radius-8);
-    }
-  }
+  ui.setLoading(80,'Connecting…');
+  ui.init({doScan,doPipeline,doReset,doRunTests,doReports,toggleTheme,setView,openFilePreview,openReportPreview});
+  await fetchProject();
-  // Draw edges with curved lines + gradient
-  for(const e of edges){
-    if(e.relation==='contains') continue;
-    const s=S.nodePos.get(e.source),t=S.nodePos.get(e.target);if(!s||!t)continue;
-    const dx=t.x-s.x,dy=t.y-s.y;
-    const mx=(s.x+t.x)/2+dy*0.15, my=(s.y+t.y)/2-dx*0.15;
-    const grad=ctx.createLinearGradient(s.x,s.y,t.x,t.y);
-    grad.addColorStop(0,isDark?'rgba(248,113,113,.35)':'rgba(220,38,38,.25)');
-    grad.addColorStop(1,isDark?'rgba(52,211,153,.35)':'rgba(5,150,105,.25)');
-    ctx.strokeStyle=grad;ctx.lineWidth=1.5;
-    ctx.beginPath();ctx.moveTo(s.x,s.y);ctx.quadraticCurveTo(mx,my,t.x,t.y);ctx.stroke();
-    const t2=0.95,at2x=(1-t2)*(1-t2)*s.x+2*(1-t2)*t2*mx+t2*t2*t.x,at2y=(1-t2)*(1-t2)*s.y+2*(1-t2)*t2*my+t2*t2*t.y;
-    const a=Math.atan2(t.y-at2y,t.x-at2x),al=7;
-    ctx.fillStyle=isDark?'rgba(52,211,153,.5)':'rgba(5,150,105,.4)';ctx.beginPath();ctx.moveTo(t.x,t.y);
-    ctx.lineTo(t.x-al*Math.cos(a-.4),t.y-al*Math.sin(a-.4));
-    ctx.lineTo(t.x-al*Math.cos(a+.4),t.y-al*Math.sin(a+.4));ctx.closePath();ctx.fill();
-  }
+  ui.setLoading(90,'Starting WebSocket…');
+  connectWS();
-  // Draw nodes
-  const tc={model:'#34d399',controller:'#f87171',api:'#fbbf24',dto:'#60a5fa',module:'#a78bfa'};
-  const sc={idle:isDark?'#475569':'#94a3b8',testing:'#fbbf24',passed:'#34d399',failed:'#f87171'};
-  for(const n of nodes){
-    if(n.type==='module') continue;
-    const p=S.nodePos.get(n.id);if(!p)continue;
-    const sz=9,c=tc[n.type]||'#888',ol=sc[n.status]||sc.idle,hov=S.hoveredNode===n.id;
-    if(n.status==='testing'){ctx.shadowColor=sc.testing;ctx.shadowBlur=12;}
-    else if(n.status==='passed'){ctx.shadowColor=sc.passed;ctx.shadowBlur=8;}
-    else if(n.status==='failed'){ctx.shadowColor=sc.failed;ctx.shadowBlur=10;}
-    ctx.beginPath();ctx.arc(p.x,p.y,sz,0,Math.PI*2);
-    ctx.fillStyle=c;ctx.fill();
-    ctx.shadowBlur=0;
-    ctx.strokeStyle=hov?(isDark?'#fff':'#0f172a'):ol;ctx.lineWidth=hov?2.5:1.2;ctx.stroke();
-    // Label
-    if(S.zoom>0.4||hov){
-      ctx.font='500 9px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-      ctx.fillStyle=hov?(isDark?'#fff':'#0f172a'):(isDark?'#94a3b8':'#64748b');
-      ctx.textAlign='center';ctx.textBaseline='top';
-      ctx.fillText((n.label||n.id.split(':').pop()).substring(0,18),p.x,p.y+sz+4);
-    }
-  }
-  ctx.restore();
+  ui.setLoading(100,'Ready!');
+  setTimeout(()=>document.getElementById('loading-overlay').classList.add('hidden'),400);
-  // HUD legend
-  ctx.font='500 10px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';ctx.textAlign='left';
-  const legBg=isDark?'rgba(10,15,26,.8)':'rgba(255,255,255,.85)';
-  ctx.fillStyle=legBg; ctx.beginPath(); ctx.roundRect(6,h-56,120,48,6); ctx.fill();
-  ctx.strokeStyle=isDark?'rgba(148,163,184,.15)':'rgba(100,116,139,.2)';ctx.lineWidth=1;ctx.stroke();
-  const leg=[['● Model','#34d399'],['● Controller','#f87171'],['─ uses',isDark?'rgba(200,150,160,.7)':'rgba(150,80,100,.6)']];
-  for(let i=0;i<leg.length;i++){ctx.fillStyle=leg[i][1];ctx.fillText(leg[i][0],14,h-42+i*14);}
+  requestAnimationFrame(renderLoop);
+  ui.addLog('OpenCroc Studio 3D ready — press ? for shortcuts','info',true);
 }
-function setupCanvas(){
-  const c=document.getElementById('graph-canvas');
-  c.addEventListener('mousedown',e=>{S.dragging=true;S._userPanned=true;S.dragStart={x:e.clientX-S.pan.x,y:e.clientY-S.pan.y};c.style.cursor='grabbing';});
-  c.addEventListener('mousemove',e=>{
-    if(S.dragging){S.pan.x=e.clientX-S.dragStart.x;S.pan.y=e.clientY-S.dragStart.y;renderCanvas();}
-    const rect=c.getBoundingClientRect(),mx=(e.clientX-rect.left-S.pan.x)/S.zoom,my=(e.clientY-rect.top-S.pan.y)/S.zoom;
-    let hit=null;
-    for(const n of S.graph.nodes){const p=S.nodePos.get(n.id);if(!p)continue;const sz=n.type==='module'?22:14;if(mx>=p.x-sz&&mx<=p.x+sz&&my>=p.y-sz&&my<=p.y+sz){hit=n;break;}}
-    const tt=document.getElementById('tooltip');
-    if(hit){
-      S.hoveredNode=hit.id;
-      const sc={idle:'#888',testing:'#f39c12',passed:'#4ecca3',failed:'#e94560'};
-      tt.innerHTML='<b>'+esc(hit.label||hit.id)+'</b><br>Type: '+hit.type+'<br>Status: <span style="color:'+(sc[hit.status]||'#888')+'">'+hit.status+'</span>'+(hit.module?'<br>Module: '+esc(hit.module):'');
-      tt.style.left=(e.clientX+12)+'px';tt.style.top=(e.clientY+12)+'px';tt.classList.add('visible');c.style.cursor='pointer';
-    }else{if(S.hoveredNode)S.hoveredNode=null;tt.classList.remove('visible');if(!S.dragging)c.style.cursor='grab';}
-    renderCanvas();
-  });
-  c.addEventListener('mouseup',()=>{S.dragging=false;c.style.cursor='grab';});
-  c.addEventListener('mouseleave',()=>{S.dragging=false;document.getElementById('tooltip').classList.remove('visible');});
-  c.addEventListener('wheel',e=>{e.preventDefault();S.zoom=Math.max(.2,Math.min(3,S.zoom*(e.deltaY>0?.92:1.08)));renderCanvas();},{passive:false});
+/* ─── Render Loop ──────────────────────────────────────────────────────────── */
+function renderLoop(){
+  requestAnimationFrame(renderLoop);
+  const dt=getClock().getDelta();
+  if(dt>0.1) return;
+  if(camCtrl) camCtrl.update(dt);
+  if(particleMgr) particleMgr.update(dt);
+  if(agentMgr) agentMgr.update(dt);
+  if(hologram) hologram.update(dt,state.get('graph'));
+  const composer=getComposer();
+  if(composer) composer.render(dt); else getRenderer().render(getScene(),getCamera());
 }
-function updateAll(){
-  if(S.project){
-    document.getElementById('s-mod').textContent=S.project.stats?.modules||0;
-    document.getElementById('s-mdl').textContent=S.project.stats?.models||0;
-    document.getElementById('s-api').textContent=S.project.stats?.endpoints||0;
-  }
-  renderModList();renderOffice();renderAgentSB();renderPixelOffice();renderCanvas();
-}
-function renderModList(){
-  const el=document.getElementById('mod-list'),mods=S.graph.nodes.filter(n=>n.type==='module');
-  if(!mods.length){el.innerHTML='<div style="padding:12px;color:var(--text-subtle);font-size:11px">No modules found</div>';return;}
-  const sorted=mods.sort((a,b)=>{
-    const ca=S.modMeta&&S.modMeta.get(a.label)?S.modMeta.get(a.label).count:0;
-    const cb=S.modMeta&&S.modMeta.get(b.label)?S.modMeta.get(b.label).count:0;
-    return cb-ca;
-  });
-  el.innerHTML=sorted.map(m=>{
-    const meta=S.modMeta&&S.modMeta.get(m.label);
-    const cnt=meta?meta.count:'';
-    const col=meta?meta.color:'var(--text-subtle)';
-    return '<div class="mod-item" data-mod="'+esc(m.label)+'" style="border-left:3px solid '+col+'">'
-      +'<div class="dot '+m.status+'"></div>'
-      +esc(m.label)+'<span class="mod-count">'+cnt+'</span></div>';
-  }).join('');
-  // Click to navigate
-  el.querySelectorAll('.mod-item').forEach(item=>{
-    item.addEventListener('click',()=>{
-      const name=item.getAttribute('data-mod');
-      const meta=S.modMeta&&S.modMeta.get(name);
-      if(meta){
-        const c=document.getElementById('graph-canvas');
-        S.zoom=0.8;S._userPanned=true;
-        S.pan.x=c.clientWidth/2-meta.cx*S.zoom;
-        S.pan.y=c.clientHeight/2-meta.cy*S.zoom;
-        renderCanvas();
-      }
-    });
-  });
-}
-function renderAgentSB(){
-  document.getElementById('agent-sidebar').innerHTML=S.agents.map(a=>
-    '<div class="mod-item"><div class="dot '+a.status+'"></div>'+esc(a.name)+'<span class="mod-count">'+a.status+'</span></div>'
-  ).join('');
-}
-function renderOffice(){
-  document.getElementById('croc-office').innerHTML=S.agents.map(a=>{
-    const prog=typeof a.progress==='number'?a.progress:0;
-    const roleIcon=ROLE_ICONS[a.role]||ICONS.croc;
-    return '<div class="desk '+a.status+'"><div class="badge dot '+a.status+'"></div>'+
-      '<div class="croc-sprite">'+ICONS.croc+'</div><div class="croc-name">'+esc(a.name)+'</div>'+
-      '<div class="croc-role">'+esc(a.role)+'</div>'+
-      '<div class="croc-task">'+(a.currentTask?esc(a.currentTask):'')+'</div>'+
-      '<div class="progress-bar"><div class="fill" style="width:'+prog+'%"></div></div>'+
-      '<div class="desk-icon">'+roleIcon+'</div></div>';
-  }).join('');
+/* ─── API ──────────────────────────────────────────────────────────────────── */
+async function fetchProject(){
+  try{const r=await fetch('/api/project');const d=await r.json();
+    state.set({project:d,graph:d.graph||state.get('graph'),agents:d.agents||state.get('agents')});
+    updateAll();
+  }catch(e){ui.addLog('Failed to fetch project: '+e.message,'error')}
 }
-function renderPixelOffice(){
-  const el=document.getElementById('pixel-agent-layer');
-  const stageWidth=(document.getElementById('pixel-view').clientWidth||900)-80;
-  const stageHeight=(document.getElementById('pixel-view').clientHeight||520)-120;
-  const presets=[
-    {x:.18,y:.64},{x:.3,y:.66},{x:.42,y:.62},{x:.56,y:.6},{x:.72,y:.63},{x:.82,y:.52},
-    {x:.22,y:.45},{x:.48,y:.42},{x:.66,y:.4},{x:.78,y:.72}
-  ];
-  const roles=['char_0','char_1','char_2'];
-  const working=S.agents.filter(a=>a.status==='working'||a.status==='testing').length;
-  const errors=S.agents.filter(a=>a.status==='error'||a.status==='failed').length;
-  const done=S.agents.filter(a=>a.status==='done'||a.status==='passed').length;
-  document.getElementById('kpi-working').textContent=String(working);
-  document.getElementById('kpi-errors').textContent=String(errors);
-  document.getElementById('kpi-done').textContent=String(done);
-  if(!S.agents.length){el.innerHTML='';return;}
-  // Stop all existing sprite timers
-  for(const [id,timer] of S.spriteAnimTimers){ clearInterval(timer); }
-  S.spriteAnimTimers.clear();
+async function doScan(){if(state.get('running'))return;state.set({running:true});updateBtns();ui.addLog('🔍 Starting codebase scan…','info',true);try{await fetch('/api/scan',{method:'POST'})}catch(e){ui.addLog('Scan error: '+e.message,'error');state.set({running:false});updateBtns()}}
+async function doPipeline(){if(state.get('running'))return;state.set({running:true});updateBtns();ui.addLog('⚡ Pipeline started…','info',true);try{await fetch('/api/pipeline',{method:'POST'})}catch(e){ui.addLog('Pipeline error: '+e.message,'error');state.set({running:false});updateBtns()}}
+async function doReset(){try{await fetch('/api/reset',{method:'POST'})}catch(e){ui.addLog('Reset error: '+e.message,'error')}state.set({running:false});updateBtns();ui.addLog('♻️ Agents reset','info',true)}
+async function doRunTests(){if(state.get('running'))return;state.set({running:true});updateBtns();ui.addLog('🧪 Running tests (mode: '+state.get('runMode')+')…','info',true);try{const r=await fetch('/api/run-tests',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({mode:state.get('runMode')})});const d=await r.json();if(d.error){ui.addLog('Test error: '+d.error,'error');state.set({running:false});updateBtns()}}catch(e){ui.addLog('Test error: '+e.message,'error');state.set({running:false});updateBtns()}}
+async function doReports(){if(state.get('running'))return;state.set({running:true});updateBtns();ui.addLog('📊 Generating reports…','info',true);try{await fetch('/api/reports/generate',{method:'POST'})}catch(e){ui.addLog('Report error: '+e.message,'error');state.set({running:false});updateBtns()}}
-  el.innerHTML=S.agents.map((a,i)=>{
-    const p=presets[i%presets.length];
-    const x=Math.max(16,Math.round(stageWidth*p.x));
-    const y=Math.max(20,Math.round(stageHeight*p.y));
-    const roleSprite=roles[i%roles.length];
-    const labelY=Math.max(16,y-12);
-    const statusClass=(['working','testing'].includes(a.status)?'working':
-                       ['done','passed'].includes(a.status)?'done':
-                       ['error','failed'].includes(a.status)?'error':
-                       a.status==='thinking'?'thinking':'');
-    const canvasId='sprite-'+i;
-    // Use canvas element for spritesheet-based rendering
-    return '<canvas id="'+canvasId+'" class="pixel-sprite-canvas '+a.status+'" width="48" height="48" style="left:'+x+'px;top:'+y+'px"></canvas>'
-      +'<div class="pixel-label" style="left:'+(x+24)+'px;top:'+labelY+'px">'+esc(a.name)
-      +(statusClass?'<span class="status-tag '+statusClass+'">'+esc(a.status)+'</span>':'')+'</div>';
-  }).join('');
-  // Start sprite animations for each agent
-  S.agents.forEach((a,i)=>{
-    const roleSprite=roles[i%roles.length];
-    const canvasId='sprite-'+i;
-    // Delay to ensure DOM is ready
-    requestAnimationFrame(()=>startSpriteAnim(canvasId, roleSprite, a.status));
-  });
-  // Trigger bubbles for active agents (Star-Office style)
-  scheduleBubbles();
+/* ─── WebSocket ────────────────────────────────────────────────────────────── */
+function connectWS(){
+  const prot=location.protocol==='https:'?'wss:':'ws:';
+  const ws=new WebSocket(prot+'//'+location.host);
+  ws.onopen=()=>{document.getElementById('conn-dot').classList.add('connected');state.set({ws})};
+  ws.onclose=()=>{document.getElementById('conn-dot').classList.remove('connected');setTimeout(connectWS,3000)};
+  ws.onmessage=ev=>{try{handleWS(JSON.parse(ev.data))}catch(e){}};
 }
-function scheduleBubbles(){
-  S.agents.forEach((a,i)=>{
-    if(S.bubbleTimers.has(a.name)) return;
-    const texts=BUBBLE_TEXTS[a.status]||BUBBLE_TEXTS.idle;
-    const show=()=>{
-      const el=document.getElementById('pixel-agent-layer');
-      if(!el||S.currentView!=='office') return;
-      const presets=[
-        {x:.18,y:.64},{x:.3,y:.66},{x:.42,y:.62},{x:.56,y:.6},{x:.72,y:.63},{x:.82,y:.52},
-        {x:.22,y:.45},{x:.48,y:.42},{x:.66,y:.4},{x:.78,y:.72}
-      ];
-      const stageW=(document.getElementById('pixel-view').clientWidth||900)-80;
-      const stageH=(document.getElementById('pixel-view').clientHeight||520)-120;
-      const p=presets[i%presets.length];
-      const x=Math.max(16,Math.round(stageW*p.x));
-      const y=Math.max(20,Math.round(stageH*p.y));
-      const bubble=document.createElement('div');
-      bubble.className='pixel-bubble';
-      bubble.textContent=texts[Math.floor(Math.random()*texts.length)];
-      bubble.style.left=(x+50)+'px'; bubble.style.top=(y-20)+'px';
-      el.appendChild(bubble);
-      setTimeout(()=>bubble.remove(),3000);
-    };
-    const interval=setInterval(show, 6000+Math.random()*8000);
-    S.bubbleTimers.set(a.name, interval);
-    setTimeout(show, 1000+Math.random()*3000);
-  });
-  // Clear timers for agents that no longer exist
-  for(const [name,timer] of S.bubbleTimers){
-    if(!S.agents.find(a=>a.name===name)){clearInterval(timer);S.bubbleTimers.delete(name);}
+function handleWS(msg){
+  switch(msg.type){
+    case'agent:update':state.set({agents:msg.data});agentMgr.sync(msg.data);ui.updateDeskCards(msg.data);ui.updateSidebar(null,msg.data);break;
+    case'graph:update':state.set({graph:msg.data});graphViz.update(msg.data);ui.updateSidebar(msg.data,null);ui.updateStats(msg.data);break;
+    case'log':ui.addLog(msg.data.message,msg.data.level);break;
+    case'files:generated':state.set({generatedFiles:msg.data});ui.updateFileList(msg.data);break;
+    case'pipeline:complete':state.set({running:false});updateBtns();
+      if(msg.data.error)ui.addLog('Pipeline failed: '+msg.data.error,'error');
+      else{ui.addLog('✅ Pipeline complete','success',true);ui.showToast('Pipeline completed','success');particleMgr.triggerCelebration()}
+      fetchProject();break;
+    case'test:complete':state.set({running:false,testMetrics:msg.data.metrics,testQuality:msg.data.quality});updateBtns();
+      ui.updateResults(msg.data);ui.addLog(`Tests: ${msg.data.metrics?.passed||0}✓ ${msg.data.metrics?.failed||0}✗`,'info',true);
+      ui.showToast(`Tests: ${msg.data.metrics?.passed||0}✓ ${msg.data.metrics?.failed||0}✗`,msg.data.metrics?.failed?'warning':'success');break;
+    case'reports:generated':state.set({running:false,reports:msg.data});updateBtns();
+      ui.updateReports(msg.data);ui.addLog('📊 '+msg.data.length+' reports generated','success',true);break;
   }
 }
-function setView(view){
-  S.currentView=view;
-  const dashboard=view==='dashboard';
-  document.getElementById('graph-view').classList.toggle('hidden',!dashboard);
-  document.getElementById('pixel-view').classList.toggle('hidden',dashboard);
-  document.getElementById('view-dashboard').classList.toggle('active',dashboard);
-  document.getElementById('view-office').classList.toggle('active',!dashboard);
-  document.getElementById('tooltip').classList.remove('visible');
-  if(dashboard){
-    setTimeout(()=>{layoutGraph();renderCanvas();},0);
-  }else{
-    renderPixelOffice();
-  }
+/* ─── Helpers ──────────────────────────────────────────────────────────────── */
+function updateAll(){
+  const g=state.get('graph'),a=state.get('agents');
+  ui.updateSidebar(g,a);ui.updateStats(g);ui.updateDeskCards(a);
+  if(a) agentMgr.sync(a);
+  if(g) graphViz.update(g);
 }
-function esc(s){return s?s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'):'';}
+function updateBtns(){const r=state.get('running');['btn-scan','btn-pipeline','btn-reset','btn-run-tests','btn-reports'].forEach(id=>document.getElementById(id).disabled=r)}
+async function openFilePreview(idx){try{const r=await fetch('/api/files/'+idx);const d=await r.json();document.getElementById('fp-title').textContent=d.filePath||'File';document.getElementById('fp-code').textContent=d.content||'';document.getElementById('file-preview').classList.add('visible')}catch(e){ui.showToast('Failed to load file','error')}}
+async function openReportPreview(fmt){try{const r=await fetch('/api/reports/'+fmt);const t=await r.text();if(fmt==='html'){const w=window.open('','_blank');if(w){w.document.write(t);w.document.close()}return}document.getElementById('fp-title').textContent='Report: '+fmt;document.getElementById('fp-code').textContent=t;document.getElementById('file-preview').classList.add('visible')}catch(e){ui.showToast('Failed to load report','error')}}
+function toggleTheme(){const cur=state.get('theme');const nxt=cur==='dark'?'light':'dark';state.set({theme:nxt});document.documentElement.setAttribute('data-theme',nxt);localStorage.setItem('opencroc-theme',nxt);document.getElementById('theme-icon-dark').style.display=nxt==='dark'?'':'none';document.getElementById('theme-icon-light').style.display=nxt==='light'?'':'none';updateOfficeLighting(nxt)}
+function setView(v){state.set({currentView:v});document.getElementById('view-3d').classList.toggle('active',v==='3d');document.getElementById('view-graph').classList.toggle('active',v==='graph');if(v==='3d')camCtrl.flyTo('office');else camCtrl.flyTo('graph')}
+/* ─── Events ───────────────────────────────────────────────────────────────── */
 document.getElementById('btn-scan').addEventListener('click',doScan);
 document.getElementById('btn-pipeline').addEventListener('click',doPipeline);
 document.getElementById('btn-reset').addEventListener('click',doReset);
 document.getElementById('btn-run-tests').addEventListener('click',doRunTests);
 document.getElementById('btn-reports').addEventListener('click',doReports);
-document.getElementById('run-mode').addEventListener('change',e=>{S.runMode=e.target.value;});
-document.getElementById('view-dashboard').addEventListener('click',()=>setView('dashboard'));
-document.getElementById('view-office').addEventListener('click',()=>setView('office'));
-// Tab switching
-document.querySelectorAll('.panel-tabs .tab').forEach(tab=>{
-  tab.addEventListener('click',()=>{
-    document.querySelectorAll('.panel-tabs .tab').forEach(t=>t.classList.remove('active'));
-    tab.classList.add('active');
-    const t=tab.getAttribute('data-tab');
-    document.getElementById('log-list').style.display=t==='log'?'':'none';
-    document.getElementById('file-list').style.display=t==='files'?'':'none';
-    document.getElementById('results-panel').style.display=t==='results'?'':'none';
-    document.getElementById('reports-panel').style.display=t==='reports'?'':'none';
-  });
-});
-// File list rendering
-function renderFileList(){
-  const el=document.getElementById('file-list');
-  if(!S.generatedFiles.length){el.innerHTML='<div style="padding:12px;color:var(--text-subtle);font-size:11px">No test files generated yet. Run Pipeline first.</div>';return;}
-  el.innerHTML=S.generatedFiles.map((f,i)=>
-    '<div class="file-item" data-idx="'+i+'"><div class="fname">'+esc(f.filePath.split('/').pop()||f.filePath)+'</div>'+
-    '<div class="fmeta">'+esc(f.module)+' / '+esc(f.chain)+' — '+f.lines+' lines</div></div>'
-  ).join('');
-  el.querySelectorAll('.file-item').forEach(item=>{
-    item.addEventListener('click',async()=>{
-      const idx=item.getAttribute('data-idx');
-      try{
-        const r=await fetch('/api/files/'+idx); const file=await r.json();
-        document.getElementById('fp-title').textContent=file.filePath;
-        document.getElementById('fp-code').textContent=file.content;
-        document.getElementById('file-preview').classList.add('visible');
-      }catch(e){addLog('Failed to load file: '+e.message,'error');}
-    });
-  });
-}
-// File preview close
-document.getElementById('fp-close').addEventListener('click',()=>{
-  document.getElementById('file-preview').classList.remove('visible');
-});
-document.addEventListener('keydown',e=>{
-  if(e.key==='Escape') document.getElementById('file-preview').classList.remove('visible');
-});
-// Test Results rendering
-function renderResults(){
-  const el=document.getElementById('results-panel');
-  if(!S.testMetrics&&!S.testQuality){el.innerHTML='<div style="padding:12px;color:var(--text-subtle);font-size:11px">No test results yet. Run Tests first.</div>';return;}
-  const q=S.testQuality;
-  if(!S.testMetrics&&q){
-    el.innerHTML='<div style="padding:10px">'
-      +'<div style="font-size:13px;font-weight:bold;margin-bottom:8px">🧪 Test Execution Results</div>'
-      +'<div style="padding:10px;border-radius:var(--radius-sm);background:var(--red-bg);color:var(--red);font-size:11px;margin-bottom:10px">Setup failed before test execution.</div>'
-      +'<div style="font-size:11px;margin-bottom:6px">Gate Level: <span style="color:'+(q.level==='fail'?'var(--red)':q.level==='warn'?'var(--orange)':'var(--accent)')+';font-weight:bold">'+q.level.toUpperCase()+'</span></div>'
-      +'<div style="font-size:10px;color:var(--text-dim)">Auth: '+q.authStatus+' | Backend: '+q.backendStatus+'</div>'
-      +'<div style="font-size:10px;color:var(--text-dim);margin-top:4px">Reasons: '+(q.reasons&&q.reasons.length?q.reasons.join(', '):'-')+'</div>'
-      +'</div>';
-    return;
-  }
-  const m=S.testMetrics, total=m.passed+m.failed+m.skipped+m.timedOut;
-  const passRate=total>0?Math.round(m.passed/total*100):0;
-  const barColor=m.failed>0?'var(--red)':'var(--accent)';
-  let qualityHtml='';
-  if(q){
-    const gateColor=q.level==='fail'?'var(--red)':q.level==='warn'?'var(--orange)':'var(--accent)';
-    qualityHtml='<div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--border)">'
-      +'<div style="font-size:12px;font-weight:bold;margin-bottom:8px">🧭 Execution Quality</div>'
-      +'<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px">'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Gate: <span style="color:'+gateColor+';font-weight:600">'+q.level.toUpperCase()+'</span></div>'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Setup Fail: '+q.setupFail+'</div>'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Skip Ratio: '+Math.round((q.skipRatio||0)*100)+'%</div>'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Auth Fail Ratio: '+Math.round((q.authFailRatio||0)*100)+'%</div>'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Effective Rate: '+Math.round((q.effectiveExecutionRate||0)*100)+'%</div>'
-      +'<div style="background:var(--bg-card);padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border)">Auth/Backend: '+q.authStatus+' / '+q.backendStatus+'</div>'
-      +'</div>'
-      +'<div style="font-size:10px;color:var(--text-dim);margin-top:6px">Reasons: '+(q.reasons&&q.reasons.length?q.reasons.join(', '):'-')+'</div>'
-      +'</div>';
-  }
-  el.innerHTML='<div style="padding:10px">'
-    +'<div style="font-size:13px;font-weight:bold;margin-bottom:8px">🧪 Test Execution Results</div>'
-    +'<div style="display:flex;gap:12px;margin-bottom:10px">'
-    +'<div style="flex:1;text-align:center;background:var(--accent-bg);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border)"><div style="font-size:22px;font-weight:700;color:var(--accent)">'+m.passed+'</div><div style="font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px">PASSED</div></div>'
-    +'<div style="flex:1;text-align:center;background:var(--red-bg);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border)"><div style="font-size:22px;font-weight:700;color:var(--red)">'+m.failed+'</div><div style="font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px">FAILED</div></div>'
-    +'<div style="flex:1;text-align:center;background:var(--orange-bg);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border)"><div style="font-size:22px;font-weight:700;color:var(--orange)">'+m.skipped+'</div><div style="font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px">SKIPPED</div></div>'
-    +'<div style="flex:1;text-align:center;background:var(--blue-bg);padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border)"><div style="font-size:22px;font-weight:700;color:var(--blue)">'+m.timedOut+'</div><div style="font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px">TIMEOUT</div></div>'
-    +'</div>'
-    +'<div style="background:var(--bg-hover);border-radius:4px;height:8px;overflow:hidden">'
-    +'<div style="height:100%;width:'+passRate+'%;background:'+barColor+';transition:width .5s"></div></div>'
-    +'<div style="text-align:center;font-size:10px;color:var(--text-dim);margin-top:4px">Pass Rate: '+passRate+'% ('+total+' total)</div>'
-    +qualityHtml
-    +'</div>';
-}
-// Reports rendering
-function renderReports(){
-  const el=document.getElementById('reports-panel');
-  if(!S.reports.length){el.innerHTML='<div style="padding:12px;color:var(--text-subtle);font-size:11px">No reports generated yet. Click Reports to generate.</div>';return;}
-  el.innerHTML='<div style="padding:10px"><div style="font-size:13px;font-weight:bold;margin-bottom:8px">📊 Generated Reports</div>'
-    +S.reports.map(r=>{
-      const icon=r.format==='html'?'🌐':r.format==='json'?'📋':'📝';
-      const sizeKB=(r.size/1024).toFixed(1);
-      return '<div class="file-item" data-format="'+esc(r.format)+'" style="cursor:pointer">'
-        +'<div class="fname">'+icon+' '+esc(r.filename)+'</div>'
-        +'<div class="fmeta">'+r.format.toUpperCase()+' — '+sizeKB+' KB</div></div>';
-    }).join('')+'</div>';
-  el.querySelectorAll('.file-item').forEach(item=>{
-    item.addEventListener('click',async()=>{
-      const fmt=item.getAttribute('data-format');
-      try{
-        const r=await fetch('/api/reports/'+fmt);
-        const content=await r.text();
-        if(fmt==='html'){
-          const w=window.open('','_blank','width=900,height=700');
-          w.document.write(content);w.document.close();
-        }else{
-          document.getElementById('fp-title').textContent='report.'+fmt;
-          document.getElementById('fp-code').textContent=content;
-          document.getElementById('file-preview').classList.add('visible');
-        }
-      }catch(e){addLog('Failed to load report: '+e.message,'error');}
-    });
-  });
-}
-// Theme toggle (borrowed from OpenClaw)
-function toggleTheme(){
-  S.theme=S.theme==='dark'?'light':'dark';
-  document.documentElement.setAttribute('data-theme',S.theme);
-  localStorage.setItem('opencroc-theme',S.theme);
-  document.getElementById('theme-icon-dark').style.display=S.theme==='dark'?'':'none';
-  document.getElementById('theme-icon-light').style.display=S.theme==='light'?'':'none';
-  renderCanvas();
-}
+document.getElementById('run-mode').addEventListener('change',e=>state.set({runMode:e.target.value}));
+document.getElementById('view-3d').addEventListener('click',()=>setView('3d'));
+document.getElementById('view-graph').addEventListener('click',()=>setView('graph'));
 document.getElementById('theme-toggle').addEventListener('click',toggleTheme);
-// Restore saved theme
-(function initTheme(){
-  const saved=localStorage.getItem('opencroc-theme');
-  if(saved&&saved==='light'){S.theme='light';document.documentElement.setAttribute('data-theme','light');
-    document.getElementById('theme-icon-dark').style.display='none';
-    document.getElementById('theme-icon-light').style.display='';
-  }
-})();
-/* ═══════════════════════════════════════════════════════
-   Keyboard Shortcuts System
-   ═══════════════════════════════════════════════════════ */
-let shortcutLegendTimer=null;
-function showShortcutLegend(){
-  const el=document.getElementById('shortcut-legend');
-  el.classList.add('visible');
-  if(shortcutLegendTimer) clearTimeout(shortcutLegendTimer);
-  shortcutLegendTimer=setTimeout(()=>el.classList.remove('visible'), 4000);
-}
-document.addEventListener('keydown',e=>{
-  // Don't capture when typing in inputs/selects
-  const tag=e.target.tagName.toLowerCase();
-  if(tag==='input'||tag==='textarea'||tag==='select') return;
-  const key=e.key.toLowerCase();
-  // Escape — close file preview, close shortcut legend
-  if(e.key==='Escape'){
-    document.getElementById('file-preview').classList.remove('visible');
-    document.getElementById('shortcut-legend').classList.remove('visible');
-    return;
-  }
-  // ? — Show shortcut legend
-  if(key==='?'||e.key==='/'&&e.shiftKey){
-    e.preventDefault(); showShortcutLegend(); return;
-  }
-  // 1 — Dashboard view
-  if(key==='1'){ e.preventDefault(); setView('dashboard'); return; }
-  // 2 — Pixel Office view
-  if(key==='2'){ e.preventDefault(); setView('office'); return; }
-  // S — Scan
-  if(key==='s'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); doScan(); return; }
-  // P — Pipeline
-  if(key==='p'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); doPipeline(); return; }
-  // T — Tests
-  if(key==='t'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); doRunTests(); return; }
-  // R — Reports
-  if(key==='r'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); doReports(); return; }
-  // X — Reset
-  if(key==='x'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); doReset(); return; }
-  // D — Dark/Light toggle
-  if(key==='d'&&!e.ctrlKey&&!e.metaKey){ e.preventDefault(); toggleTheme(); return; }
-});
-(async()=>{
-  preloadSprites();
-  setupCanvas();
-  await fetchProject();
-  connectWS();
-  addLog('OpenCroc Studio ready — press ? for shortcuts','info',true);
-  window.addEventListener('resize',()=>{layoutGraph();renderCanvas();renderPixelOffice();});
-})();
+document.getElementById('sidebar-toggle').addEventListener('click',()=>document.getElementById('sidebar').classList.toggle('collapsed'));
+document.getElementById('bottom-bar-toggle').addEventListener('click',()=>document.getElementById('bottom-bar').classList.toggle('collapsed'));
+document.getElementById('fp-close').addEventListener('click',()=>document.getElementById('file-preview').classList.remove('visible'));
+document.getElementById('fp-backdrop').addEventListener('click',()=>document.getElementById('file-preview').classList.remove('visible'));
+document.querySelectorAll('.panel-tabs .tab').forEach(tab=>{tab.addEventListener('click',()=>{document.querySelectorAll('.panel-tabs .tab').forEach(t=>t.classList.remove('active'));tab.classList.add('active');const tgt=tab.dataset.tab;document.getElementById('log-list').classList.toggle('hidden',tgt!=='log');document.getElementById('file-list').classList.toggle('hidden',tgt!=='files');document.getElementById('results-panel').classList.toggle('hidden',tgt!=='results');document.getElementById('reports-panel').classList.toggle('hidden',tgt!=='reports')})});
+window.addEventListener('resize',()=>resizeEngine());
+let slt=null;
+document.addEventListener('keydown',e=>{const tag=e.target.tagName.toLowerCase();if(tag==='input'||tag==='textarea'||tag==='select')return;const k=e.key.toLowerCase();if(e.key==='Escape'){document.getElementById('file-preview').classList.remove('visible');document.getElementById('shortcut-legend').classList.remove('visible');return}if(k==='?'||(e.key==='/'&&e.shiftKey)){e.preventDefault();const el=document.getElementById('shortcut-legend');el.classList.add('visible');if(slt)clearTimeout(slt);slt=setTimeout(()=>el.classList.remove('visible'),4000);return}if(k==='1'){e.preventDefault();setView('3d');return}if(k==='2'){e.preventDefault();setView('graph');return}if(k==='s'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();doScan();return}if(k==='p'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();doPipeline();return}if(k==='t'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();doRunTests();return}if(k==='r'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();doReports();return}if(k==='x'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();doReset();return}if(k==='d'&&!e.ctrlKey&&!e.metaKey){e.preventDefault();toggleTheme();return}});
+boot().catch(e=>console.error('Boot failed:',e));
 </script>
 </body>
 </html>