From 4d4e1e198c068cf62c04b7356ad1431e6a2b8db4 Mon Sep 17 00:00:00 2001
From: Nico <nico@openclaw>
Date: Thu, 2 Apr 2026 19:08:50 +0200
Subject: [PATCH] Panel system: replace quad DevPanel with composable panel
 architecture

- PanelShell layout: main content + stacked side panels (320px)
- usePanels composable: role-based registry, localStorage persistence
- Lazy-loaded panels: Graph (Cytoscape+Cola), Trace, Nodes, State
- Fix HUD protocol: map assay node-level events to nyx tree format
- Graph: edge filtering for missing nodes, Tailwind canvas opacity fix
- Remove FramesPanel and TaskPanel (data merged into State panel)
- Toolbar panel toggles with heroicon badges

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package-lock.json                        |  78 +++++
 package.json                             |   2 +
 src/components/AppToolbar.vue            |  31 +-
 src/components/PanelShell.vue            | 159 ++++++++++
 src/components/panels/AwarenessPanel.vue |  93 ++++++
 src/components/panels/GraphPanel.vue     | 380 +++++++++++++++++++++++
 src/components/panels/NodesPanel.vue     | 140 +++++++++
 src/components/panels/TracePanel.vue     | 114 +++++++
 src/composables/sessionHistory.ts        |  97 +++++-
 src/composables/usePanels.ts             | 143 +++++++++
 src/composables/ws.ts                    |  47 ++-
 src/views/AgentsView.vue                 |   3 +
 vite.config.ts                           |   7 +-
 13 files changed, 1282 insertions(+), 12 deletions(-)
 create mode 100644 src/components/PanelShell.vue
 create mode 100644 src/components/panels/AwarenessPanel.vue
 create mode 100644 src/components/panels/GraphPanel.vue
 create mode 100644 src/components/panels/NodesPanel.vue
 create mode 100644 src/components/panels/TracePanel.vue
 create mode 100644 src/composables/usePanels.ts

diff --git a/package-lock.json b/package-lock.json
index a725f1c..d1d072f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/vue": "^2.2.0",
+        "cytoscape": "^3.33.1",
+        "cytoscape-cola": "^2.5.1",
         "marked": "^17.0.4",
         "overlayscrollbars": "^2.0.0",
         "overlayscrollbars-vue": "^0.5.9",
@@ -1559,6 +1561,70 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/cytoscape": {
+      "version": "3.33.1",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
+      "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cola": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz",
+      "integrity": "sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==",
+      "license": "MIT",
+      "dependencies": {
+        "webcola": "^3.4.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-selection": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
+      "integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2696,6 +2762,18 @@
         "typescript": ">=5.0.0"
       }
     },
+    "node_modules/webcola": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz",
+      "integrity": "sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-dispatch": "^1.0.3",
+        "d3-drag": "^1.0.4",
+        "d3-shape": "^1.3.5",
+        "d3-timer": "^1.0.5"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
diff --git a/package.json b/package.json
index 1114746..5c5adac 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
+    "cytoscape": "^3.33.1",
+    "cytoscape-cola": "^2.5.1",
     "marked": "^17.0.4",
     "overlayscrollbars": "^2.0.0",
     "overlayscrollbars-vue": "^0.5.9",
diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index b7267f1..cd5b578 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -20,6 +20,18 @@
             <component :is="THEME_ICONS[t]" class="w-4 h-4" />
         </button>
 
+        <!-- Panel toggles (dev/operator tools) -->
+        <button
+            v-for="panel in availablePanels"
+            :key="panel.id"
+            class="toolbar-pill toolbar-pill-icon"
+            :class="{ active: isPanelOpen(panel.id) }"
+            @click="togglePanelBtn(panel.id)"
+            :title="panel.label"
+        >
+            <component :is="panelIcon(panel.id)" class="w-4 h-4" />
+        </button>
+
         <!-- Takeover / Capture -->
         <button
             v-if="takeoverToken"
@@ -69,12 +81,13 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'AppToolbar' });
-import { ref, computed } from 'vue';
-import { WifiIcon, SignalIcon } from '@heroicons/vue/20/solid';
+import { ref, computed, type Component } from 'vue';
+import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon } from '@heroicons/vue/20/solid';
 import { THEME_ICONS, THEME_NAMES, useTheme, type Theme } from '../composables/useTheme';
 import { ws, auth, agents, takeover } from '../store';
 import { useChatStore } from '../store/chat';
 import { useUI } from '../composables/ui';
+import { usePanels, type PanelId } from '../composables/usePanels';
 
 const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
 
@@ -83,6 +96,20 @@ const { selectedAgent, selectedMode } = agents;
 const { theme, setTheme } = useTheme();
 const chatStore = useChatStore();
 
+// Panels
+const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen } = usePanels();
+
+const PANEL_ICONS: Record<PanelId, Component> = {
+    graph: CircleStackIcon,
+    trace: QueueListIcon,
+    nodes: CpuChipIcon,
+    awareness: EyeIcon,
+};
+
+function panelIcon(id: PanelId): Component {
+    return PANEL_ICONS[id] || CpuChipIcon;
+}
+
 // Connection
 const connLabel = computed(() => {
     switch (chatStore.connectionState) {
diff --git a/src/components/PanelShell.vue b/src/components/PanelShell.vue
new file mode 100644
index 0000000..618b6ea
--- /dev/null
+++ b/src/components/PanelShell.vue
@@ -0,0 +1,159 @@
+<template>
+    <div class="panel-shell" :class="{ 'has-side': hasSidePanels }">
+        <!-- Main content area -->
+        <div class="panel-main">
+            <slot />
+        </div>
+
+        <!-- Side panel column -->
+        <div v-if="hasSidePanels" class="panel-side">
+            <div
+                v-for="panel in openSidePanels"
+                :key="panel.id"
+                class="panel-section"
+            >
+                <div class="panel-header">
+                    <span class="panel-title">{{ panel.label }}</span>
+                    <button class="panel-close" @click="closePanel(panel.id)" title="Close">&times;</button>
+                </div>
+                <Suspense>
+                    <component
+                        :is="resolvedComponents[panel.id]"
+                        v-bind="panelProps(panel.id)"
+                    />
+                    <template #fallback>
+                        <div class="panel-loading">Loading...</div>
+                    </template>
+                </Suspense>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { shallowRef, watch, defineAsyncComponent, type Component } from 'vue';
+import { usePanels, type PanelId, type PanelDef } from '../composables/usePanels';
+
+const props = defineProps<{
+    hudTree: any[];
+    hudVersion: number;
+    connected: boolean;
+}>();
+
+const { openSidePanels, openBottomPanels, hasSidePanels, hasBottomPanels, closePanel } = usePanels();
+
+// Resolve async components once
+const resolvedComponents = shallowRef<Record<string, Component>>({});
+
+watch(openSidePanels, (panels) => {
+    const current = { ...resolvedComponents.value };
+    for (const panel of panels) {
+        if (!current[panel.id]) {
+            current[panel.id] = defineAsyncComponent(panel.component);
+        }
+    }
+    resolvedComponents.value = current;
+}, { immediate: true });
+
+function panelProps(id: PanelId): Record<string, any> {
+    switch (id) {
+        case 'graph':
+            return { connected: props.connected, hudTree: props.hudTree, hudVersion: props.hudVersion };
+        case 'trace':
+            return { hudTree: props.hudTree, hudVersion: props.hudVersion };
+        case 'nodes':
+            return { connected: props.connected };
+        case 'awareness':
+            return { connected: props.connected, hudVersion: props.hudVersion };
+        default:
+            return {};
+    }
+}
+</script>
+
+<style scoped>
+.panel-shell {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.panel-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-side {
+    width: 320px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    background: var(--border);
+    border-left: 1px solid var(--border);
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.panel-section {
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    min-height: 120px;
+    flex: 1;
+    overflow: hidden;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.panel-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-dim);
+}
+
+.panel-close {
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0 2px;
+}
+.panel-close:hover { color: var(--text); }
+
+.panel-loading {
+    padding: 1.5rem;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+
+/* Mobile: side panels stack below */
+@media (max-width: 768px) {
+    .panel-shell {
+        flex-direction: column;
+    }
+    .panel-side {
+        width: 100%;
+        max-height: 40vh;
+        border-left: none;
+        border-top: 1px solid var(--border);
+    }
+}
+</style>
diff --git a/src/components/panels/AwarenessPanel.vue b/src/components/panels/AwarenessPanel.vue
new file mode 100644
index 0000000..efa3266
--- /dev/null
+++ b/src/components/panels/AwarenessPanel.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="panel-body">
+        <div v-if="!stateData" class="panel-empty">No state yet</div>
+        <template v-else>
+            <div class="state-row">
+                <span class="state-label">Status</span>
+                <span class="state-val">{{ stateData.status }}</span>
+            </div>
+            <div class="state-row">
+                <span class="state-label">History</span>
+                <span class="state-val">{{ stateData.history_len }} msgs</span>
+            </div>
+            <div class="state-row">
+                <span class="state-label">Transport</span>
+                <span class="state-val" :class="connected ? 'val-ok' : 'val-off'">{{ connected ? 'connected' : 'disconnected' }}</span>
+            </div>
+            <div v-if="stateData.memorizer" class="state-section">
+                <div class="state-section-title">Memorizer</div>
+                <div v-for="(v, k) in stateData.memorizer" :key="k" class="state-row">
+                    <span class="state-label">{{ k }}</span>
+                    <span class="state-val">{{ typeof v === 'object' ? JSON.stringify(v) : v }}</span>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { getApiBase } from '../../utils/apiBase';
+
+const props = defineProps<{
+    connected: boolean;
+    hudVersion: number;
+}>();
+
+const stateData = ref<any>(null);
+
+function authHeaders(): Record<string, string> {
+    const token = localStorage.getItem('nyx_session');
+    return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+async function fetchState() {
+    try {
+        const res = await fetch(`${getApiBase()}/api/state`, { headers: authHeaders() });
+        if (res.ok) stateData.value = await res.json();
+    } catch { /* ignore */ }
+}
+
+watch(() => props.connected, (c) => { if (c) fetchState(); }, { immediate: true });
+watch(() => props.hudVersion, () => fetchState());
+</script>
+
+<style scoped>
+.panel-body {
+    padding: 6px 8px;
+    font-size: 0.75rem;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+}
+.panel-empty {
+    padding: 1.5rem 0.5rem;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+.state-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 0;
+    gap: 8px;
+}
+.state-label { color: var(--text-dim); flex-shrink: 0; }
+.state-val {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    text-align: right;
+    word-break: break-word;
+    min-width: 0;
+}
+.val-ok { color: #22c55e; }
+.val-off { color: #ef4444; }
+.state-section { margin-top: 8px; }
+.state-section-title {
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--text-dim);
+    margin-bottom: 2px;
+}
+</style>
diff --git a/src/components/panels/GraphPanel.vue b/src/components/panels/GraphPanel.vue
new file mode 100644
index 0000000..80e23b1
--- /dev/null
+++ b/src/components/panels/GraphPanel.vue
@@ -0,0 +1,380 @@
+<template>
+    <div class="graph-panel" ref="panelEl">
+        <div v-if="!graphData" class="panel-empty">No graph</div>
+        <div v-show="graphData" class="graph-container" ref="containerEl"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import cytoscape from 'cytoscape';
+import cola from 'cytoscape-cola';
+import { getApiBase } from '../../utils/apiBase';
+
+// Register cola layout once
+cytoscape.use(cola);
+
+const props = defineProps<{
+    connected: boolean;
+    hudTree: any[];
+    hudVersion: number;
+}>();
+
+const panelEl = ref<HTMLElement | null>(null);
+const containerEl = ref<HTMLElement | null>(null);
+const graphData = ref<any>(null);
+
+let cy: cytoscape.Core | null = null;
+let physicsLayout: any = null;
+
+// ── Node colors (ported from cog-frontend app.js) ───────────────────────────
+
+const NODE_COLORS: Record<string, string> = {
+    user: '#444', input: '#f59e0b', sensor: '#3b82f6',
+    director: '#a855f7', pa: '#a855f7', pa_v1: '#a855f7',
+    thinker: '#f97316', interpreter: '#06b6d4',
+    expert_eras: '#ef4444', expert_plankiste: '#ef4444',
+    output: '#10b981', ui: '#10b981',
+    memorizer: '#a855f7', s3_audit: '#ef4444',
+    frame_engine: '#6366f1', runtime: '#6366f1',
+};
+
+// ── Node weights for Cola physics ────────────────────────────────────────────
+
+const NODE_WEIGHTS: Record<string, number> = {
+    pa: 80, pa_v1: 80, thinker: 80, director: 80,
+    input: 50, output: 50, memorizer: 40,
+    ui: 30, sensor: 20, interpreter: 40,
+    expert_eras: 60, expert_plankiste: 60,
+};
+
+function authHeaders(): Record<string, string> {
+    const token = localStorage.getItem('nyx_session');
+    return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+async function fetchGraph() {
+    try {
+        const res = await fetch(`${getApiBase()}/api/graph/active`, { headers: authHeaders() });
+        if (res.ok) {
+            graphData.value = await res.json();
+            await nextTick();
+            waitForContainerAndInit();
+        }
+    } catch { /* ignore */ }
+}
+
+/** Wait until container has real dimensions (flex layout settled), then init */
+function waitForContainerAndInit() {
+    if (!containerEl.value || !graphData.value?.cytoscape) return;
+    const rect = containerEl.value.getBoundingClientRect();
+    if (rect.width > 10 && rect.height > 10) {
+        initCytoscape();
+        return;
+    }
+    // Container not laid out yet — use a one-shot ResizeObserver
+    const obs = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry && entry.contentRect.width > 10 && entry.contentRect.height > 10) {
+            obs.disconnect();
+            initCytoscape();
+        }
+    });
+    obs.observe(containerEl.value);
+}
+
+function initCytoscape() {
+    if (!containerEl.value || !graphData.value?.cytoscape) return;
+
+    // Destroy previous instance
+    if (cy) { stopPhysics(); cy.destroy(); cy = null; }
+
+    const cyData = graphData.value.cytoscape;
+
+    // Filter edges: remove any that reference non-existent nodes (graph may define
+    // edges to nodes like 'runtime' / 'frame_engine' that aren't in the cytoscape export)
+    const nodeIds = new Set(cyData.nodes.map((n: any) => n.data.id));
+    const validEdges = cyData.edges.filter((e: any) =>
+        nodeIds.has(e.data.source) && nodeIds.has(e.data.target)
+    );
+
+    try {
+    cy = cytoscape({
+        container: containerEl.value,
+        elements: [...cyData.nodes, ...validEdges],
+        style: [
+            // ── Nodes ────────────────────────────────────────────────────────
+            { selector: 'node', style: {
+                'label': 'data(label)',
+                'text-valign': 'center',
+                'text-halign': 'center',
+                'font-size': '14px',
+                'min-zoomed-font-size': 8,
+                'font-family': 'system-ui, sans-serif',
+                'font-weight': 700,
+                'color': '#aaa',
+                'background-color': '#181818',
+                'border-width': 1,
+                'border-opacity': 0.3,
+                'border-color': '#444',
+                'width': 44,
+                'height': 44,
+                'transition-property': 'background-color, border-color, width, height',
+                'transition-duration': '0.3s',
+            } as any },
+            // Per-node colors
+            ...Object.entries(NODE_COLORS).map(([id, color]) => ({
+                selector: `#${id}`,
+                style: { 'border-color': color, 'color': color } as any,
+            })),
+            // Smaller nodes
+            { selector: '#sensor', style: { 'width': 36, 'height': 36, 'font-size': '12px' } as any },
+            // Active node (pulsed)
+            { selector: 'node.active', style: {
+                'background-color': '#333',
+                'border-width': 3,
+                'width': 52,
+                'height': 52,
+            } as any },
+            // ── Edges ────────────────────────────────────────────────────────
+            { selector: 'edge', style: {
+                'width': 1.5,
+                'line-color': '#333',
+                'target-arrow-color': '#333',
+                'target-arrow-shape': 'triangle',
+                'arrow-scale': 0.7,
+                'curve-style': 'bezier',
+                'transition-property': 'line-color, target-arrow-color, width',
+                'transition-duration': '0.3s',
+            } as any },
+            // Context edges (dotted)
+            { selector: 'edge[edge_type="context"]', style: {
+                'line-style': 'dotted', 'line-color': '#1a1a2e', 'width': 1,
+            } as any },
+            // State edges (dashed, dim)
+            { selector: 'edge[edge_type="state"]', style: {
+                'line-style': 'dashed', 'line-dash-pattern': [4, 4] as any, 'line-color': '#1a1a2e', 'width': 0.8,
+            } as any },
+            // Reflex edges (dashed)
+            { selector: 'edge[condition="reflex"]', style: {
+                'line-style': 'dashed', 'line-dash-pattern': [4, 4] as any, 'line-color': '#2a2a2a',
+            } as any },
+            // Active edge (flashed)
+            { selector: 'edge.active', style: {
+                'line-color': '#888', 'target-arrow-color': '#888', 'width': 2.5,
+            } as any },
+        ],
+        layout: { name: 'random', padding: 20 },
+        userZoomingEnabled: true,
+        userPanningEnabled: true,
+        wheelSensitivity: 0.3,
+        boxSelectionEnabled: false,
+        autoungrabify: false,
+        selectionType: 'single',
+    });
+    } catch (err) {
+        console.warn('[graph] cytoscape init failed:', err instanceof Error ? err.message : err);
+        return;
+    }
+
+    // Right-click passthrough
+    containerEl.value.addEventListener('contextmenu', (e: Event) => e.stopPropagation(), true);
+
+    // Resize after container is laid out (async component may not have final dims yet)
+    setTimeout(() => {
+        if (cy) {
+            cy.resize();
+            cy.fit(undefined, 20);
+            startPhysics();
+        }
+    }, 100);
+
+    // Font size stays readable at any zoom
+    cy.on('zoom', () => {
+        if (!cy) return;
+        const z = cy.zoom();
+        const fontSize = Math.round(12 / z);
+        cy.nodes().style('font-size', fontSize + 'px');
+    });
+
+    startPhysics();
+}
+
+// ── Cola physics ─────────────────────────────────────────────────────────────
+
+function startPhysics() {
+    if (!cy) return;
+    stopPhysics();
+    try {
+        const rect = containerEl.value?.getBoundingClientRect();
+        if (!rect || rect.width < 10) return;
+        physicsLayout = cy.layout({
+            name: 'cola',
+            animate: true,
+            infinite: true,
+            fit: false,
+            nodeSpacing: 25,
+            nodeWeight: (n: any) => NODE_WEIGHTS[n.id()] || 30,
+            edgeElasticity: (e: any) => {
+                const edgeType = e.data('edge_type');
+                if (edgeType === 'context') return 0.1;
+                if (edgeType === 'state') return 0.05;
+                if (e.data('condition') === 'reflex') return 0.2;
+                return 0.6;
+            },
+            boundingBox: { x1: 0, y1: 0, w: rect.width, h: rect.height },
+        } as any);
+        physicsLayout.run();
+    } catch (e) {
+        console.warn('[graph] physics failed:', e);
+    }
+}
+
+function stopPhysics() {
+    if (physicsLayout) {
+        try { physicsLayout.stop(); } catch { /* ignore */ }
+        physicsLayout = null;
+    }
+}
+
+// ── Live HUD animations ──────────────────────────────────────────────────────
+
+function pulseNode(id: string) {
+    if (!cy) return;
+    const node = cy.getElementById(id);
+    if (!node.length) return;
+    node.addClass('active');
+    setTimeout(() => node.removeClass('active'), 1500);
+}
+
+function flashEdge(sourceId: string, targetId: string) {
+    if (!cy) return;
+    const edge = cy.edges().filter((e: any) =>
+        e.data('source') === sourceId && e.data('target') === targetId
+    );
+    if (!edge.length) return;
+    edge.addClass('active');
+    setTimeout(() => edge.removeClass('active'), 1000);
+}
+
+function animateHudEvent(event: string, node?: string) {
+    if (!cy) return;
+    // Pulse source node if it exists
+    if (node && cy.getElementById(node).length) pulseNode(node);
+
+    switch (event) {
+        case 'perceived':
+            pulseNode('input');
+            break;
+        case 'routed':
+            pulseNode('pa'); pulseNode('pa_v1');
+            break;
+        case 'reflex_path':
+            pulseNode('input'); flashEdge('input', 'output');
+            break;
+        case 'streaming':
+            if (node === 'output') pulseNode('output');
+            break;
+        case 'decided':
+            pulseNode('ui');
+            break;
+        case 'updated':
+            pulseNode('memorizer'); flashEdge('output', 'memorizer');
+            break;
+        case 'tick':
+            pulseNode('sensor');
+            break;
+        case 'thinking':
+            if (node) pulseNode(node);
+            break;
+        case 'tool_call':
+            pulseNode(node || 'expert_eras');
+            break;
+        case 'tool_result':
+            if (cy.getElementById('interpreter').length) pulseNode('interpreter');
+            break;
+        case 'interpreted':
+            pulseNode('interpreter'); flashEdge('interpreter', 'output');
+            break;
+    }
+}
+
+// Watch hudVersion for new HUD events → animate
+let lastProcessedVersion = 0;
+
+watch(() => props.hudVersion, (ver) => {
+    if (ver <= lastProcessedVersion) return;
+    lastProcessedVersion = ver;
+    // Animate from the latest hudTree root node
+    const latest = props.hudTree[0];
+    if (!latest) return;
+    // node_activity events from assay have the node name in the label
+    if (latest.type === 'node_activity' && latest.label) {
+        const parts = latest.label.split(':');
+        const nodeName = parts[0]?.trim();
+        const eventName = parts[1]?.trim().split(' ')[0];
+        if (nodeName && eventName) animateHudEvent(eventName, nodeName);
+    }
+});
+
+// ── Lifecycle ────────────────────────────────────────────────────────────────
+
+let resizeObserver: ResizeObserver | null = null;
+
+watch(() => props.connected, (c) => { if (c) fetchGraph(); }, { immediate: true });
+
+onMounted(() => {
+    // Observe the parent panel (not the absolute container) for resize events
+    const target = panelEl.value;
+    if (target) {
+        resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry || entry.contentRect.width < 10 || entry.contentRect.height < 10) return;
+            // Update container pixel dimensions to match parent
+            if (containerEl.value) {
+                containerEl.value.style.width = entry.contentRect.width + 'px';
+                containerEl.value.style.height = entry.contentRect.height + 'px';
+            }
+            if (cy) {
+                cy.resize();
+                cy.fit(undefined, 20);
+            }
+        });
+        resizeObserver.observe(target);
+    }
+});
+
+onUnmounted(() => {
+    stopPhysics();
+    if (cy) { cy.destroy(); cy = null; }
+    if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; }
+});
+</script>
+
+<style scoped>
+.graph-panel {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    overflow: hidden;
+}
+.panel-empty {
+    padding: 1.5rem 0.5rem;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+.graph-container {
+    position: absolute;
+    inset: 0;
+    background: #0d0d0d;
+    border-radius: 4px;
+}
+/* Tailwind v4 preflight adds transition-property (incl. opacity) to *.
+   Cytoscape's dynamically-created canvases inherit this, which can
+   prevent them from becoming visible. Reset here. */
+.graph-container :deep(canvas) {
+    opacity: 1 !important;
+    transition-property: none !important;
+}
+</style>
diff --git a/src/components/panels/NodesPanel.vue b/src/components/panels/NodesPanel.vue
new file mode 100644
index 0000000..8bcb0b7
--- /dev/null
+++ b/src/components/panels/NodesPanel.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="panel-body">
+        <div v-if="!graphData" class="panel-empty">No graph</div>
+        <div v-else class="nodes-view">
+            <div class="graph-header">
+                <span class="graph-title">{{ graphData.name }}</span>
+                <span v-if="graphData.description" class="graph-desc">{{ graphData.description }}</span>
+            </div>
+            <div v-for="(impl, nodeId) in graphData.nodes" :key="nodeId" class="node-card">
+                <div class="node-header">
+                    <span class="node-id">{{ nodeId }}</span>
+                    <span class="node-impl">{{ impl }}</span>
+                    <span v-if="graphData.node_details?.[nodeId]?.model" class="node-model">{{ graphData.node_details[nodeId].model }}</span>
+                </div>
+                <div v-if="nodeEdges(nodeId as string).length" class="node-edges">
+                    <div v-for="(edge, i) in nodeEdges(nodeId as string)" :key="i" class="node-edge">
+                        <span class="edge-arrow">{{'\u2192'}}</span>
+                        <span class="edge-target">{{ edge.to }}</span>
+                        <span v-if="edge.carries" class="edge-tag">{{ edge.carries }}</span>
+                        <span v-if="edge.condition" class="edge-cond">if {{ edge.condition }}</span>
+                        <span v-if="edge.type === 'context'" class="edge-type-tag ctx">ctx</span>
+                        <span v-if="edge.type === 'state'" class="edge-type-tag state">state</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { getApiBase } from '../../utils/apiBase';
+
+const props = defineProps<{
+    connected: boolean;
+}>();
+
+const graphData = ref<any>(null);
+
+function authHeaders(): Record<string, string> {
+    const token = localStorage.getItem('nyx_session');
+    return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+async function fetchGraph() {
+    try {
+        const res = await fetch(`${getApiBase()}/api/graph/active`, { headers: authHeaders() });
+        if (res.ok) graphData.value = await res.json();
+    } catch { /* ignore */ }
+}
+
+function nodeEdges(nodeId: string): any[] {
+    if (!graphData.value?.edges) return [];
+    return graphData.value.edges.filter((e: any) => {
+        if (typeof e.from === 'string') return e.from === nodeId;
+        return false;
+    }).map((e: any) => {
+        const target = Array.isArray(e.to) ? e.to.join(', ') : e.to;
+        return { ...e, to: target };
+    });
+}
+
+watch(() => props.connected, (c) => { if (c) fetchGraph(); }, { immediate: true });
+</script>
+
+<style scoped>
+.panel-body {
+    padding: 6px 8px;
+    font-size: 0.75rem;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+}
+.panel-empty {
+    padding: 1.5rem 0.5rem;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+.graph-header {
+    margin-bottom: 8px;
+}
+.graph-title { font-weight: 600; font-size: 0.8rem; }
+.graph-desc { display: block; color: var(--text-dim); font-size: 0.7rem; margin-top: 2px; }
+
+.node-card {
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 8px;
+    margin-bottom: 4px;
+}
+.node-header {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+.node-id { font-weight: 600; font-size: 0.75rem; }
+.node-impl { color: var(--text-dim); font-size: 0.65rem; }
+.node-model { color: var(--accent); font-size: 0.6rem; font-family: var(--font-mono); }
+
+.node-edges {
+    margin-top: 3px;
+    padding-top: 3px;
+    border-top: 1px solid var(--border);
+}
+.node-edge {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 1px 0;
+    font-size: 0.65rem;
+}
+.edge-arrow { color: var(--text-dim); font-size: 0.6rem; }
+.edge-target { font-weight: 500; }
+.edge-tag {
+    background: color-mix(in srgb, var(--accent) 15%, transparent);
+    color: var(--accent);
+    padding: 0 4px;
+    border-radius: 3px;
+    font-size: 0.55rem;
+}
+.edge-cond { color: var(--text-dim); font-style: italic; font-size: 0.55rem; }
+.edge-type-tag {
+    padding: 0 3px;
+    border-radius: 2px;
+    font-size: 0.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.edge-type-tag.ctx {
+    background: color-mix(in srgb, #3b82f6 15%, transparent);
+    color: #3b82f6;
+}
+.edge-type-tag.state {
+    background: color-mix(in srgb, #a855f7 15%, transparent);
+    color: #a855f7;
+}
+</style>
diff --git a/src/components/panels/TracePanel.vue b/src/components/panels/TracePanel.vue
new file mode 100644
index 0000000..43215c4
--- /dev/null
+++ b/src/components/panels/TracePanel.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="panel-body">
+        <div v-if="!hudTree.length" class="panel-empty">No trace data</div>
+        <div v-else class="trace-tree">
+            <div v-for="node in hudTree" :key="node.id" class="trace-node" :class="[node.state, node.type]">
+                <div class="trace-row" @click="toggleNode(node.id)">
+                    <ChevronRightIcon v-if="node.children.length" class="w-3 h-3 chevron" :class="{ open: expandedNodes.has(node.id) }" />
+                    <span v-else class="chevron-spacer" />
+                    <span class="trace-dot" :class="node.state" />
+                    <span class="trace-label">{{ node.label }}</span>
+                    <span v-if="node.durationMs" class="trace-ms">{{ node.durationMs }}ms</span>
+                </div>
+                <div v-if="expandedNodes.has(node.id) && node.children.length" class="trace-children">
+                    <div v-for="child in node.children" :key="child.id" class="trace-node" :class="[child.state, child.type]">
+                        <div class="trace-row">
+                            <span class="chevron-spacer" />
+                            <span class="trace-dot" :class="child.state" />
+                            <span class="trace-label">{{ child.label }}</span>
+                            <span v-if="child.durationMs" class="trace-ms">{{ child.durationMs }}ms</span>
+                        </div>
+                        <div v-if="child.args || child.result" class="trace-detail">
+                            <pre v-if="child.args" class="trace-json">{{ JSON.stringify(child.args, null, 2) }}</pre>
+                            <pre v-if="child.result" class="trace-json trace-result">{{ JSON.stringify(child.result, null, 2) }}</pre>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { ChevronRightIcon } from '@heroicons/vue/20/solid';
+
+defineProps<{
+    hudTree: any[];
+    hudVersion: number;
+}>();
+
+const expandedNodes = reactive(new Set<string>());
+
+function toggleNode(id: string) {
+    if (expandedNodes.has(id)) expandedNodes.delete(id);
+    else expandedNodes.add(id);
+}
+</script>
+
+<style scoped>
+.panel-body {
+    padding: 6px 8px;
+    font-size: 0.75rem;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+}
+.panel-empty {
+    padding: 1.5rem 0.5rem;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.8rem;
+}
+.trace-tree { font-size: 0.75rem; }
+.trace-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 4px;
+    cursor: pointer;
+    border-radius: 3px;
+}
+.trace-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+.chevron {
+    flex-shrink: 0;
+    transition: transform 0.15s;
+    color: var(--text-dim);
+}
+.chevron.open { transform: rotate(90deg); }
+.chevron-spacer { width: 12px; flex-shrink: 0; }
+.trace-dot {
+    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+}
+.trace-dot.running { background: var(--accent); animation: pulse 1s infinite; }
+.trace-dot.done { background: #22c55e; }
+.trace-dot.error { background: #ef4444; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.trace-label {
+    flex: 1; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.trace-ms {
+    flex-shrink: 0;
+    color: var(--text-dim);
+    font-size: 0.65rem;
+    font-family: var(--font-mono);
+}
+.trace-children { padding-left: 16px; }
+.trace-detail { padding: 4px 4px 4px 28px; }
+.trace-json {
+    font-size: 0.65rem;
+    font-family: var(--font-mono);
+    color: var(--text-dim);
+    background: var(--panel-bg);
+    border-radius: 4px;
+    padding: 4px 6px;
+    margin: 2px 0;
+    overflow-x: auto;
+    max-height: 150px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+.trace-result { border-left: 2px solid #22c55e; }
+</style>
diff --git a/src/composables/sessionHistory.ts b/src/composables/sessionHistory.ts
index d1a17a1..691efe4 100644
--- a/src/composables/sessionHistory.ts
+++ b/src/composables/sessionHistory.ts
@@ -6,7 +6,7 @@ import { useChatStore } from '../store/chat';
 export interface HudNode {
     id: string
     correlationId?: string
-    type: 'turn' | 'tool' | 'think' | 'received'
+    type: 'turn' | 'tool' | 'think' | 'received' | 'node_activity'
     subtype?: string
     state: 'running' | 'done' | 'error'
     label: string
@@ -223,6 +223,101 @@ export function useSessionHistory(
                 addHudNode(node);
                 break;
             }
+
+            // ── assay frame_trace: complete pipeline summary → turn-like root node ──
+            case 'frame_trace': {
+                const trace = event.trace;
+                if (!trace) break;
+                const turnNode = makeNode({
+                    type: 'turn', state: 'done',
+                    label: `${trace.path || 'pipeline'} — ${trace.total_frames}F ${trace.total_ms?.toFixed(0)}ms`,
+                    startedAt: ts - (trace.total_ms || 0),
+                    endedAt: ts,
+                    durationMs: Math.round(trace.total_ms || 0),
+                    replay,
+                });
+                if (trace.frames) {
+                    for (const f of trace.frames) {
+                        turnNode.children.push(makeNode({
+                            type: 'node_activity', state: f.error ? 'error' : 'done',
+                            label: `${f.node}${f.route ? ' → ' + f.route : ''}`,
+                            durationMs: Math.round(f.duration_ms || 0),
+                            startedAt: ts - (f.duration_ms || 0),
+                            endedAt: ts,
+                            args: f.input ? { input: f.input } : undefined,
+                            result: f.output ? { output: f.output } : undefined,
+                            replay,
+                        }));
+                    }
+                }
+                addHudNode(turnNode);
+                break;
+            }
+
+            default: {
+                // ── assay node-level events (thinking, perceived, streaming, etc.) ──
+                // These have {node, event} but no correlationId or turn lifecycle.
+                // Create flat activity nodes so the trace panel shows something.
+                if (event.node && event.event) {
+                    const nodeName = event.node;
+                    const evtName = event.event;
+
+                    // Skip context events (too verbose — LLM prompts)
+                    if (evtName === 'context') break;
+
+                    // Running events: thinking, streaming
+                    const isRunning = evtName === 'thinking' || evtName === 'streaming';
+                    const label = `${nodeName}: ${evtName}${event.detail ? ' — ' + event.detail : ''}`;
+
+                    if (isRunning) {
+                        // Create running node, track by composite key
+                        const key = `assay:${nodeName}`;
+                        const node = makeNode({
+                            type: 'node_activity', state: 'running',
+                            label,
+                            correlationId: key,
+                            startedAt: ts, replay,
+                        });
+                        hudPending.set(key, node);
+                        addHudNode(node);
+                    } else {
+                        // Completion events: perceived, routed, done, decided, updated, tick, started
+                        // Try to close the running node for this assay node
+                        const key = `assay:${nodeName}`;
+                        const running = hudPending.get(key);
+                        if (running) {
+                            running.state = 'done';
+                            running.endedAt = ts;
+                            running.durationMs = ts - running.startedAt;
+                            // Enrich label with result info
+                            if (evtName === 'perceived' && event.analysis) {
+                                running.label = `${nodeName}: ${event.analysis.intent || evtName}/${event.analysis.complexity || ''}`;
+                                running.result = event.analysis;
+                            } else if (evtName === 'routed' && event.expert !== undefined) {
+                                running.label = `${nodeName}: → ${event.expert || 'direct'}`;
+                                running.result = { expert: event.expert, job: event.job };
+                            } else if (evtName === 'updated' && event.state) {
+                                running.label = `${nodeName}: updated`;
+                                running.result = event.state;
+                            }
+                            hudPending.delete(key);
+                            triggerRef(hudTree); hudVersion.value++;
+                        } else if (evtName !== 'tick' && evtName !== 'started') {
+                            // No running node to close — create standalone done node
+                            const doneNode = makeNode({
+                                type: 'node_activity', state: 'done',
+                                label,
+                                startedAt: ts, endedAt: ts, replay,
+                            });
+                            if (event.analysis) doneNode.result = event.analysis;
+                            if (event.state) doneNode.result = event.state;
+                            addHudNode(doneNode);
+                        }
+                        // tick and started are ambient — skip if no running node
+                    }
+                }
+                break;
+            }
         }
     }
 
diff --git a/src/composables/usePanels.ts b/src/composables/usePanels.ts
new file mode 100644
index 0000000..6a12cb2
--- /dev/null
+++ b/src/composables/usePanels.ts
@@ -0,0 +1,143 @@
+/**
+ * usePanels.ts — Role-based panel system
+ *
+ * Determines which panels are available based on tenant features,
+ * manages open/closed state persisted to localStorage.
+ *
+ * Roles (future: from Zitadel JWT claims):
+ *   user     — end consumer (default)
+ *   creator  — content creator, agent designer
+ *   operator — monitors agents, runs tests
+ *   dev      — full access to all debug tools
+ *
+ * For now, role is derived from tenant.features.devTools:
+ *   devTools=true  → dev role (all panels)
+ *   devTools=false → user role (no side/bottom panels)
+ */
+
+import { ref, computed, type Component } from 'vue';
+import tenant from '../tenant';
+
+export type PanelId = 'graph' | 'trace' | 'nodes' | 'awareness';
+export type PanelLocation = 'side' | 'bottom';
+export type UserRole = 'user' | 'creator' | 'operator' | 'dev';
+
+export interface PanelDef {
+    id: PanelId;
+    label: string;
+    location: PanelLocation;
+    component: () => Promise<{ default: Component }>;
+    roles: UserRole[];
+}
+
+const PANELS: PanelDef[] = [
+    {
+        id: 'graph',
+        label: 'Graph',
+        location: 'side',
+        component: () => import('../components/panels/GraphPanel.vue'),
+        roles: ['creator', 'operator', 'dev'],
+    },
+    {
+        id: 'trace',
+        label: 'Trace',
+        location: 'side',
+        component: () => import('../components/panels/TracePanel.vue'),
+        roles: ['operator', 'dev'],
+    },
+    {
+        id: 'nodes',
+        label: 'Nodes',
+        location: 'side',
+        component: () => import('../components/panels/NodesPanel.vue'),
+        roles: ['creator', 'operator', 'dev'],
+    },
+    {
+        id: 'awareness',
+        label: 'State',
+        location: 'side',
+        component: () => import('../components/panels/AwarenessPanel.vue'),
+        roles: ['operator', 'dev'],
+    },
+];
+
+const STORAGE_KEY = 'nyx_panels_open';
+
+function loadOpenPanels(): Set<PanelId> {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) return new Set(JSON.parse(stored));
+    } catch { /* ignore */ }
+    return new Set();
+}
+
+function saveOpenPanels(ids: Set<PanelId>) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
+}
+
+// Module-level state (survives HMR)
+const openPanelIds = ref<Set<PanelId>>(loadOpenPanels());
+
+export function usePanels() {
+    // Current role — derived from tenant features for now.
+    // Future: extract from JWT project roles via Zitadel.
+    const role = computed<UserRole>(() => {
+        if (tenant.features.devTools) return 'dev';
+        return 'user';
+    });
+
+    const availablePanels = computed(() =>
+        PANELS.filter(p => p.roles.includes(role.value))
+    );
+
+    const openSidePanels = computed(() =>
+        availablePanels.value.filter(p =>
+            p.location === 'side' && openPanelIds.value.has(p.id)
+        )
+    );
+
+    const openBottomPanels = computed(() =>
+        availablePanels.value.filter(p =>
+            p.location === 'bottom' && openPanelIds.value.has(p.id)
+        )
+    );
+
+    const hasSidePanels = computed(() => openSidePanels.value.length > 0);
+    const hasBottomPanels = computed(() => openBottomPanels.value.length > 0);
+
+    function togglePanel(id: PanelId) {
+        const next = new Set(openPanelIds.value);
+        if (next.has(id)) {
+            next.delete(id);
+        } else {
+            next.add(id);
+        }
+        openPanelIds.value = next;
+        saveOpenPanels(next);
+    }
+
+    function isPanelOpen(id: PanelId): boolean {
+        return openPanelIds.value.has(id);
+    }
+
+    function closePanel(id: PanelId) {
+        if (!openPanelIds.value.has(id)) return;
+        const next = new Set(openPanelIds.value);
+        next.delete(id);
+        openPanelIds.value = next;
+        saveOpenPanels(next);
+    }
+
+    return {
+        role,
+        availablePanels,
+        openSidePanels,
+        openBottomPanels,
+        hasSidePanels,
+        hasBottomPanels,
+        togglePanel,
+        isPanelOpen,
+        closePanel,
+        openPanelIds,
+    };
+}
diff --git a/src/composables/ws.ts b/src/composables/ws.ts
index f4c284c..ccb303d 100644
--- a/src/composables/ws.ts
+++ b/src/composables/ws.ts
@@ -106,13 +106,27 @@ async function _startHealthStream(): Promise<void> {
             _dispatch({ type: 'connection_state', state: 'SYNCED' });
         }
 
+        let sseBuf = '';
         while (true) {
             const { done, value } = await reader.read();
             if (done) break;
-            const text = decoder.decode(value, { stream: true });
-            if (text.includes('heartbeat')) {
-                connected.value = true;
-                status.value = 'Connected';
+            sseBuf += decoder.decode(value, { stream: true });
+            // Parse SSE events from buffer
+            const parts = sseBuf.split('\n\n');
+            sseBuf = parts.pop()!; // keep incomplete
+            for (const block of parts) {
+                let eventType = '';
+                let data = '';
+                for (const line of block.split('\n')) {
+                    if (line.startsWith('event: ')) eventType = line.slice(7);
+                    else if (line.startsWith('data: ')) data = line.slice(6);
+                }
+                if (eventType === 'heartbeat') {
+                    connected.value = true;
+                    status.value = 'Connected';
+                } else if (eventType === 'debug_cmd' && data) {
+                    try { _handleDebugCmd(JSON.parse(data)); } catch { /* ignore */ }
+                }
             }
         }
     } catch (e: any) {
@@ -131,6 +145,31 @@ async function _startHealthStream(): Promise<void> {
     }, 3000);
 }
 
+/**
+ * Handle a debug command received via SSE health-stream.
+ */
+function _handleDebugCmd(cmd: { cmd_id: string; cmd: string; args: any }): void {
+    if (!_takeover) return;
+    const base = getApiBase();
+    const token = getToken();
+    _takeover.dispatch(cmd.cmd_id, cmd.cmd, cmd.args, async (resultMsg: any) => {
+        try {
+            await fetch(`${base}/api/debug/result`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    cmd_id: resultMsg.cmdId,
+                    result: resultMsg.result,
+                    error: resultMsg.error,
+                }),
+            });
+        } catch { /* ignore */ }
+    });
+}
+
 /**
  * Connect: fetch or create session via GET /api/session, then mark connected.
  */
diff --git a/src/views/AgentsView.vue b/src/views/AgentsView.vue
index 844c306..fcad4df 100644
--- a/src/views/AgentsView.vue
+++ b/src/views/AgentsView.vue
@@ -1,4 +1,5 @@
 <template>
+    <PanelShell :hudTree="hudTree" :hudVersion="hudVersion" :connected="connected">
     <div class="agents-view flex flex-col h-full overflow-hidden bg-bg" v-if="isLoggedIn">
       <!-- NO_AGENT_SELECTED or overview mode: show agent picker -->
       <div v-show="showPicker" class="agent-picker">
@@ -207,6 +208,7 @@
         <p><LockClosedIcon class="w-5 h-5 inline" /> Not logged in</p>
         <RouterLink to="/login">Sign in →</RouterLink>
     </div>
+    </PanelShell>
 </template>
 
 <script setup lang="ts">
@@ -230,6 +232,7 @@ import UserMessage from '../components/UserMessage.vue';
 import AssistantMessage from '../components/AssistantMessage.vue';
 import SystemMessage from '../components/SystemMessage.vue';
 import HudControls from '../components/HudControls.vue';
+import PanelShell from '../components/PanelShell.vue';
 import { agentLogo as getAgentLogo } from '../composables/useTheme';
 
 import router from '../router';
diff --git a/vite.config.ts b/vite.config.ts
index 857fba2..45a047d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,16 +13,13 @@ export default defineConfig({
     port: 5173,
     proxy: {
       '/ws': {
-        target: 'wss://assay.loop42.de',
+        target: 'ws://localhost:8000',
         ws: true,
-        rewriteWsOrigin: true,
-        secure: true,
         changeOrigin: true,
       },
       '/api': {
-        target: 'https://assay.loop42.de',
+        target: 'http://localhost:8000',
         changeOrigin: true,
-        secure: true,
       },
     },
   },