npm - opencroc - Versions diffs - 1.8.0 → 1.8.2 - Mend

opencroc 1.8.0 → 1.8.2

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 (71) hide show

package/dist/cli/index.js +1107 -49
package/dist/cli/index.js.map +1 -1
package/dist/index.d.ts +128 -1
package/dist/index.js +548 -0
package/dist/index.js.map +1 -1
package/dist/web/dist/assets/main-Ccg3eDNK.js +1 -0
package/dist/web/dist/assets/office-runtime-B3iNctxE.css +1 -0
package/dist/web/dist/assets/office-runtime-BsCh82Pj.js +183 -0
package/dist/web/dist/assets/pixel-page-3BYGm7dH.js +470 -0
package/dist/web/dist/assets/react-vendor-C8RhVn0h.js +49 -0
package/dist/web/dist/assets/studio-page-BInoyoV2.css +1 -0
package/dist/web/dist/assets/studio-page-o3SCvE_v.js +351 -0
package/dist/web/dist/assets/three-addons-BdrPp04O.js +470 -0
package/dist/web/dist/assets/three-core-CsxM1PCY.js +4057 -0
package/dist/web/dist/index.html +15 -0
package/dist/web/index.html +11 -572
package/dist/web/public/botreview/char_0.png +0 -0
package/dist/web/public/botreview/char_1.png +0 -0
package/dist/web/public/botreview/char_2.png +0 -0
package/dist/web/public/botreview/coffee-machine.gif +0 -0
package/dist/web/public/botreview/server.gif +0 -0
package/dist/web/public/botreview/walls.png +0 -0
package/dist/web/public/star/desk-v3.webp +0 -0
package/dist/web/public/star/office_bg_small.webp +0 -0
package/dist/web/public/star/star-idle-v5.png +0 -0
package/dist/web/public/star/star-working-spritesheet-grid.webp +0 -0
package/dist/web/src/app/AppLayout.tsx +34 -0
package/dist/web/src/app/AppRouter.tsx +46 -0
package/dist/web/src/app/bootstrap.tsx +22 -0
package/dist/web/src/app/routes.tsx +52 -0
package/dist/web/src/features/office/runtime/index.ts +1 -0
package/dist/web/src/features/office/runtime/mount.ts +809 -0
package/dist/web/src/features/pixel/runtime/index.ts +1 -0
package/dist/web/src/features/pixel/runtime/mount.ts +728 -0
package/dist/web/src/features/studio/runtime/index.ts +1 -0
package/dist/web/src/features/studio/runtime/mount.ts +664 -0
package/dist/web/src/features/three/engine/index.ts +1 -0
package/dist/web/src/main.tsx +7 -0
package/dist/web/src/pages/office/index.ts +1 -0
package/dist/web/src/pages/office/page.tsx +283 -0
package/dist/web/src/pages/pixel/index.ts +1 -0
package/dist/web/src/pages/pixel/page.tsx +564 -0
package/dist/web/src/pages/studio/index.ts +1 -0
package/dist/web/src/pages/studio/page.tsx +446 -0
package/dist/web/{js/agents.js → src/runtime/agents.ts} +304 -31
package/dist/web/{js/camera.js → src/runtime/camera.ts} +12 -5
package/dist/web/{js/dataviz.js → src/runtime/dataviz.ts} +38 -14
package/dist/web/{js/effects.js → src/runtime/effects.ts} +139 -2
package/dist/web/{js/engine.js → src/runtime/engine.ts} +45 -6
package/dist/web/{js/office.js → src/runtime/office.ts} +136 -20
package/dist/web/{js/ui.js → src/runtime/ui.ts} +11 -7
package/dist/web/src/shared/assets.ts +4 -0
package/dist/web/src/shared/navigation.ts +47 -0
package/dist/web/src/styles/app-layout.css +19 -0
package/dist/web/src/styles/office.css +268 -0
package/dist/web/tsconfig.json +28 -0
package/dist/web/vite.config.ts +93 -0
package/package.json +11 -2
package/dist/web/index-studio.html +0 -804
package/dist/web/index-v2-pixel.html +0 -1571
/package/dist/web/{assets → dist}/botreview/char_0.png +0 -0
/package/dist/web/{assets → dist}/botreview/char_1.png +0 -0
/package/dist/web/{assets → dist}/botreview/char_2.png +0 -0
/package/dist/web/{assets → dist}/botreview/coffee-machine.gif +0 -0
/package/dist/web/{assets → dist}/botreview/server.gif +0 -0
/package/dist/web/{assets → dist}/botreview/walls.png +0 -0
/package/dist/web/{assets → dist}/star/desk-v3.webp +0 -0
/package/dist/web/{assets → dist}/star/office_bg_small.webp +0 -0
/package/dist/web/{assets → dist}/star/star-idle-v5.png +0 -0
/package/dist/web/{assets → dist}/star/star-working-spritesheet-grid.webp +0 -0
/package/dist/web/{js/state.js → src/runtime/state.ts} +0 -0

package/dist/web/index.html CHANGED Viewed

@@ -1,573 +1,12 @@
-<!DOCTYPE html>
-<html lang="zh-CN" data-theme="light">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1.0">
-<title>OpenCroc Studio · 3D</title>
-<style>
-/* ═══════════════════════════════════════════════════════════════════════════════
-   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;
-}
-/* ─── 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);
-}
-/* ─── 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>
-<!-- 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>
-<!-- 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>
-<!-- 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>
-<!-- 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="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>
-<!-- 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>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>
-<!-- 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};
-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;')}
-/* ─── Managers ─────────────────────────────────────────────────────────────── */
-const state=new StateManager();
-const ui=new UIManager(state,{ICONS,ROLE_ICONS,BUBBLE_TEXTS,esc});
-let agentMgr, particleMgr, camCtrl, graphViz, hologram;
-/* ─── 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()});
-  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=''}
-  ui.setLoading(10,'Initializing 3D engine…');
-  const canvas=document.getElementById('three-canvas');
-  await createEngine(canvas,theme);
-  ui.setLoading(25,'Building office…');
-  await createOffice(theme);
-  ui.setLoading(40,'Setting up camera…');
-  camCtrl=new CameraController(canvas,getCamera(),getScene());
-  ui.setLoading(50,'Creating agents…');
-  agentMgr=new AgentManager(getScene());
-  ui.setLoading(60,'Creating effects…');
-  particleMgr=new ParticleManager(getScene());
-  ui.setLoading(70,'Creating data visualization…');
-  graphViz=new GraphViz(getScene());
-  hologram=new HologramDisplay(getScene());
-  ui.setLoading(80,'Connecting…');
-  ui.init({doScan,doPipeline,doReset,doRunTests,doReports,toggleTheme,setView,openFilePreview,openReportPreview});
-  await fetchProject();
-  ui.setLoading(90,'Starting WebSocket…');
-  connectWS();
-  ui.setLoading(100,'Ready!');
-  setTimeout(()=>document.getElementById('loading-overlay').classList.add('hidden'),400);
-  requestAnimationFrame(renderLoop);
-  ui.addLog('OpenCroc Studio 3D ready — press ? for shortcuts','info',true);
-}
-/* ─── 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());
-}
-/* ─── 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')}
-}
-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()}}
-/* ─── 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 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;
-  }
-}
-/* ─── 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 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=>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);
-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>
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>OpenCroc Studio</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
 </html>