Simplify sidebar state: session storage, always start collapsed

Remove media query resize listener and responsive auto-expand/collapse logic.
Start collapsed by default, persist user choice in sessionStorage (cleared on
browser close). No width-based rules — same behavior on desktop and mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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",

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",

src/components/AppSidebar.vue

@@ -29,6 +29,10 @@
                 <ChatBubbleLeftRightIcon class="w-4 h-4" />
                 <span>nyx</span>
             </button>
+            <RouterLink v-if="isLoggedIn" to="/tests" class="sidebar-link" :class="{ active: route.name === 'tests' }" @click="collapse">
+                <BeakerIcon class="w-4 h-4" />
+                <span>Tests</span>
+            </RouterLink>
         </div>
 
         <!-- Spacer -->
@@ -84,6 +88,7 @@ import {
     DocumentTextIcon,
     ShieldCheckIcon,
     HomeIcon,
+    BeakerIcon,
 } from '@heroicons/vue/20/solid';
 import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
 import { auth } from '../store';
@@ -97,32 +102,17 @@ const navLogo = computed(() => THEME_LOGOS[theme.value]);
 
 const { isLoggedIn, currentUser } = auth;
 
-const isMobile = window.innerWidth <= 480;
+const isOpen = ref(sessionStorage.getItem('sidebar_open') === 'true');
-const isLarge = window.innerWidth >= 1024;
-const isOpen = ref(isMobile ? false : isLarge ? true : localStorage.getItem('sidebar_open') !== 'false');
 const userMenuOpen = ref(false);
 
-// Auto-collapse when crossing from lg → md
-const lgQuery = window.matchMedia('(min-width: 1024px)');
-lgQuery.addEventListener('change', (e) => {
-    if (e.matches && !isOpen.value) {
-        isOpen.value = true;
-        localStorage.setItem('sidebar_open', 'true');
-    } else if (!e.matches && isOpen.value) {
-        isOpen.value = false;
-        localStorage.setItem('sidebar_open', 'false');
-    }
-});
-
 function toggle() {
     isOpen.value = !isOpen.value;
-    localStorage.setItem('sidebar_open', String(isOpen.value));
+    sessionStorage.setItem('sidebar_open', String(isOpen.value));
 }
 
 function collapse() {
-    if (window.innerWidth >= 1024) return;
     isOpen.value = false;
-    localStorage.setItem('sidebar_open', 'false');
+    sessionStorage.setItem('sidebar_open', 'false');
 }
 
 function goNyx() {

src/components/AppToolbar.vue

@@ -1,13 +1,49 @@
 <template>
     <div v-if="isLoggedIn" class="app-toolbar">
         <!-- Connection pill -->
-        <button class="toolbar-pill" :class="{ active: connActive }" @click="togglePanel('conn')" :title="connLabel || 'Connection'">
+        <button class="toolbar-pill" :class="{ active: connActive }" @click="toggleDropdown('conn')" :title="connLabel || 'Connection'">
             <WifiIcon class="w-4 h-4" />
             <span v-if="connLabel" class="toolbar-pill-label">{{ connLabel }}</span>
         </button>
 
         <div class="toolbar-spacer" />
 
+        <!-- Pane toggles -->
+        <button
+            class="toolbar-pill toolbar-pill-icon"
+            :class="{ active: isPaneOpen('chat') }"
+            @click="togglePane('chat')"
+            title="Chat"
+        >
+            <ChatBubbleLeftIcon class="w-4 h-4" />
+        </button>
+        <button
+            class="toolbar-pill toolbar-pill-icon"
+            :class="{ active: isPaneOpen('dashboard') }"
+            @click="togglePane('dashboard')"
+            title="Display"
+        >
+            <RectangleGroupIcon class="w-4 h-4" />
+        </button>
+        <button
+            class="toolbar-pill toolbar-pill-icon"
+            :class="{ active: isPaneOpen('files') }"
+            @click="togglePane('files')"
+            title="Files"
+        >
+            <FolderIcon class="w-4 h-4" />
+        </button>
+        <button
+            class="toolbar-pill toolbar-pill-icon"
+            :class="{ active: isPaneOpen('artifacts') }"
+            @click="togglePane('artifacts')"
+            title="Konsole"
+        >
+            <SparklesIcon class="w-4 h-4" />
+        </button>
+
+        <div class="toolbar-divider" />
+
         <!-- Theme pills (icon only) -->
         <button
             v-for="t in THEMES"
@@ -20,12 +56,24 @@
             <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"
             class="toolbar-pill"
             :class="{ active: captureActive }"
-            @click="togglePanel('takeover')"
+            @click="toggleDropdown('takeover')"
             title="Takeover"
         >
             <SignalIcon class="w-4 h-4" />
@@ -37,10 +85,10 @@
         </button>
 
         <!-- Panels (dropdown from toolbar) -->
-        <div v-if="openPanel" class="toolbar-panel-backdrop" @click="openPanel = null" />
+        <div v-if="openDropdown" class="toolbar-panel-backdrop" @click="openDropdown = null" />
 
         <!-- Connection panel -->
-        <div v-if="openPanel === 'conn'" class="toolbar-panel" style="right: auto; left: 0;">
+        <div v-if="openDropdown === 'conn'" class="toolbar-panel" style="right: auto; left: 0;">
             <div class="toolbar-panel-header">Connection</div>
             <div class="toolbar-panel-row"><span>HTTP</span><span>{{ chatStore.connectionState }}</span></div>
             <div class="toolbar-panel-row"><span>Channel</span><span>{{ chatStore.channelState }}</span></div>
@@ -49,7 +97,7 @@
         </div>
 
         <!-- Takeover panel -->
-        <div v-if="openPanel === 'takeover'" class="toolbar-panel" style="right: 0;">
+        <div v-if="openDropdown === 'takeover'" class="toolbar-panel" style="right: 0;">
             <div class="toolbar-panel-header">Takeover</div>
             <div class="toolbar-panel-token" @click="copyToken" :title="tokenCopied ? 'Copied!' : 'Click to copy'">
                 <code>{{ takeoverToken }}</code>
@@ -69,12 +117,13 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'AppToolbar' });
-import { ref, computed } from 'vue';
+import { ref, computed, type Component } from 'vue';
-import { WifiIcon, SignalIcon } from '@heroicons/vue/20/solid';
+import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon, ChatBubbleLeftIcon, RectangleGroupIcon, FolderIcon, SparklesIcon } 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, type PaneId } from '../composables/usePanels';
 
 const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
 
@@ -83,6 +132,20 @@ const { selectedAgent, selectedMode } = agents;
 const { theme, setTheme } = useTheme();
 const chatStore = useChatStore();
 
+// Panels + panes
+const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen, togglePane, isPaneOpen } = 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) {
@@ -117,7 +180,7 @@ function copyToken() {
 
 function revokeAndClose() {
     takeover.revoke();
-    openPanel.value = null;
+    openDropdown.value = null;
 }
 
 // Version
@@ -134,11 +197,11 @@ function copyVersionDetails() {
     setTimeout(() => { versionCopied.value = false; }, 2000);
 }
 
-// Panel toggle
+// Toolbar dropdown (conn/takeover panels — distinct from debug panel toggles)
-const openPanel = ref<'conn' | 'takeover' | null>(null);
+const openDropdown = ref<'conn' | 'takeover' | null>(null);
 
-function togglePanel(panel: 'conn' | 'takeover') {
+function toggleDropdown(panel: 'conn' | 'takeover') {
-    openPanel.value = openPanel.value === panel ? null : panel;
+    openDropdown.value = openDropdown.value === panel ? null : panel;
 }
 </script>
 
@@ -155,6 +218,14 @@ function togglePanel(panel: 'conn' | 'takeover') {
 
 .toolbar-spacer { flex: 1; }
 
+.toolbar-divider {
+    width: 1px;
+    height: 18px;
+    background: var(--border);
+    opacity: 0.5;
+    flex-shrink: 0;
+}
+
 .toolbar-pill {
     display: flex;
     align-items: center;

src/components/ChatPane.vue

@@ -0,0 +1,861 @@
+<template>
+  <div class="chat-pane flex flex-col h-full min-h-0">
+    <div class="chat-frame flex-1 flex flex-col overflow-visible relative">
+      <div class="content flex-1 min-h-0">
+        <OverlayScrollbarsComponent class="messages h-full pb-4 flex flex-col gap-3 relative" :class="{ 'is-switching': isHidden }" :options="scrollbarOptions" ref="messagesEl" element="div">
+            <!-- Previous sessions (server-fetched, fully interactive) -->
+            <template v-if="prevSessions.length">
+                <!-- Load more button -->
+                <button v-if="prevHasMore" class="prev-load-more" @click="fetchPreviousSession(true)" :disabled="prevLoading">
+                    {{ prevLoading ? 'Loading...' : 'Load older session' }}
+                </button>
+
+                <template v-for="(session, si) in prevSessions" :key="'ps-'+si">
+                    <div class="prev-session-header">
+                        Session {{ prevSessions.length - si }}{{ session.timeLabel ? ' \u2014 ' + session.timeLabel : '' }}
+                    </div>
+                    <div class="prev-session-wrapper">
+                        <template v-for="(msg, mi) in session.messages" :key="'prev-'+si+'-'+mi">
+                            <UserMessage v-if="msg.role === 'user'" :msg="msg" />
+                            <AssistantMessage
+                                v-else-if="msg.role === 'assistant'"
+                                :msg="msg"
+                                :agentDisplayName="getFormattedAgentName(msg.agentId || selectedAgent)"
+                                :isAgentRunning="false"
+                                :allAgents="allAgents"
+                                :getToolsForTurn="() => []"
+                                :hudVersion="0"
+                            />
+                        </template>
+                    </div>
+                </template>
+
+                <div class="session-divider">
+                    <span class="session-divider-text">Current session</span>
+                </div>
+            </template>
+            <template v-for="(msg, i) in groupedVisibleMsgs" :key="i">
+                <!-- Branch 0: NO_SESSION marker -->
+                <div v-if="msg.type === 'no_session'" class="no-session-center">— NO SESSION —</div>
+
+                <!-- Branch 1: System, Groups, and Headlines (skip footer headlines — rendered below) -->
+                <SystemMessage
+                    v-if="msg.type !== 'no_session' && (msg.role === 'system' || msg.role === 'system_group' || msg.type === 'headline') && msg.position !== 'footer'"
+                    :msg="msg"
+                />
+                <!-- Load more button: after the first header headline -->
+                <button v-if="hasMore && msg.type === 'headline' && msg.position !== 'footer' && i === 0" class="load-more-btn" @click="loadMore">↑ Load previous messages</button>
+
+                <!-- Branch 1b: Session Context (injected prompt) -->
+                <div v-else-if="msg.role === 'session_context'" class="session-context-badge">
+                    <span class="session-context-text">{{ msg.content }}</span>
+                </div>
+
+                <!-- Branch 2: User Messages -->
+                <UserMessage
+                    v-else-if="msg.role === 'user'"
+                    :msg="msg"
+                />
+
+                <!-- Branch 3: Thinking Messages -->
+                <div v-else-if="msg.role === 'thinking'" class="message thinking">
+                    <details :open="!msg.collapsed">
+                        <summary><ChatBubbleBottomCenterTextIcon class="w-4 h-4 inline" /> thinking…</summary>
+                        <pre class="thinking-content">{{ typeof msg.content === 'object' ? msg.content.value : msg.content }}</pre>
+                    </details>
+                </div>
+
+                <!-- Branch 4: Assistant Messages -->
+                <AssistantMessage
+                    v-else-if="msg.role === 'assistant'"
+                    :msg="msg"
+                    :agentDisplayName="getFormattedAgentName(msg.agentId)"
+                    :isAgentRunning="isAgentRunning"
+                    :allAgents="allAgents"
+                    :getToolsForTurn="getToolsForTurn"
+                    :hudVersion="hudVersion"
+                />
+
+                <!-- SM status bar: after last real message, before any footer headline -->
+                <div v-if="i === lastRealMsgIdx" class="sm-status-bar">
+                    <div class="sm-dot" :class="smState"></div>
+                    <span class="sm-status-label">{{ smLabel }}</span>
+                </div>
+            </template>
+
+            <!-- SM badge fallback: shown when there are no real messages -->
+            <div v-if="lastRealMsgIdx === -1" class="sm-status-bar">
+                <div class="sm-dot" :class="smState"></div>
+                <span class="sm-status-label">{{ smLabel }}</span>
+            </div>
+
+            <!-- Footer headline -->
+            <SystemMessage v-if="footerHeadline" :msg="footerHeadline" />
+
+            <!-- Controls: immediately after last message -->
+            <div class="msg-controls" ref="controlsEl">
+                <HudControls
+                    :smState="smState"
+                    :connected="connected"
+                    :isAgentRunning="chatStore.isRunning"
+                    :handoverPending="chatStore.handoverPending"
+                    :isPublic="selectedMode === 'public'"
+                    @new="onNew"
+                    @handover="chatStore.handover()"
+                    @confirm-new="onConfirmNew"
+                    @stay="chatStore.stay()"
+                />
+            </div>
+
+            <!-- Spacer: separate element so measurements don't oscillate -->
+            <div class="scroll-spacer" :style="{ height: spacerHeight + 'px', flexShrink: 0 }"></div>
+        </OverlayScrollbarsComponent>
+      </div>
+
+        <div class="input-area"
+            @dragover.prevent="onDragOver"
+            @dragleave.prevent="onDragLeave"
+            @drop.prevent="onDrop">
+            <!-- Mic denied hint -->
+            <div v-if="micDenied" class="mic-denied-hint">Mic access denied — enable in browser settings</div>
+            <!-- Recording indicator -->
+            <div v-if="isRecording" class="recording-strip">
+                <span class="rec-dot"></span>
+                <div class="rec-level-bar"><div class="rec-level-fill" :style="{ width: (audioLevel * 100) + '%' }"></div></div>
+                <span class="rec-time">{{ formatDuration(duration) }}</span>
+                <button class="rec-cancel" @click.stop="cancelRecording" title="Cancel">&times;</button>
+            </div>
+            <!-- Attachment thumbnails -->
+            <div v-if="attachments.length" class="attachment-strip">
+                <div v-for="(att, i) in attachments" :key="i" class="attachment-thumb" :class="{ 'audio-thumb': att.mimeType.startsWith('audio/') }">
+                    <template v-if="att.mimeType.startsWith('audio/')">
+                        <span class="audio-icon">&#9835;</span>
+                        <span class="audio-name">{{ att.fileName }}</span>
+                    </template>
+                    <img v-else :src="att.preview" :alt="att.fileName" />
+                    <button class="remove-att" @click.stop="removeAttachment(i)">&times;</button>
+                </div>
+            </div>
+            <div class="input-box" :class="{ 'drag-over': isDragOver }" @click="inputEl?.focus()">
+                <button class="attach-btn" @click.stop="fileInputEl?.click()" title="Attach file">
+                    <PaperClipIcon class="w-4 h-4" />
+                </button>
+                <button class="mic-btn" :class="{ recording: isRecording }" @click.stop="toggleRecording" :title="isRecording ? 'Stop recording' : 'Record audio'">
+                    <MicrophoneIcon class="w-4 h-4" />
+                </button>
+                    <input type="file" ref="fileInputEl" class="hidden" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf,audio/webm,audio/mp4,audio/ogg,audio/mpeg,audio/wav" multiple @change="onFileSelect" />
+                <textarea
+                    ref="inputEl"
+                    v-model="input"
+                    @keydown="(e: KeyboardEvent) => {
+                        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
+                    }"
+                    @input="autoGrow(); onInputChange()"
+                    @paste="onPaste"
+                    placeholder="Message..."
+                    rows="1"
+                    class="chat-input"
+                    :class="{ shake: isShaking }"
+                ></textarea>
+                <!-- Stop button during agent run (subtle, right side) -->
+                <button v-if="smState === 'AGENT_RUNNING' || smState === 'STOP_PENDING'"
+                    class="stop-btn"
+                    :disabled="smState === 'STOP_PENDING'"
+                    @click="chatStore.stop()"
+                    :title="smState === 'STOP_PENDING' ? 'Stopping...' : 'Stop'">
+                    <StopIcon class="w-3.5 h-3.5" />
+                </button>
+                <!-- Send button -->
+                <button class="send-btn" @click="send"
+                    :disabled="!connected || sending || (!input.trim() && !hasAttachments())">
+                    <ArrowUpIcon v-if="!sending" class="w-4 h-4" />
+                    <span v-else style="font-size:11px">…</span>
+                </button>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ChatPane' });
+import { ref, watch, nextTick, onMounted, onUnmounted, computed, toRef } from 'vue';
+import { useChatStore } from '../store/chat';
+import { useMessages } from '../composables/useMessages';
+import { useMessageGrouping } from '../composables/useMessageGrouping';
+import { useInputAutogrow } from '../composables/useInputAutogrow';
+import { useAgentDisplay } from '../composables/useAgentDisplay';
+import { useAgentSocket } from '../composables/useAgentSocket';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import { scrollbarOptions } from '../composables/useScrollbar';
+import { ArrowUpIcon, StopIcon, ChatBubbleBottomCenterTextIcon, PaperClipIcon, MicrophoneIcon } from '@heroicons/vue/20/solid';
+import { useAttachments } from '../composables/useAttachments';
+import { useAudioRecorder } from '../composables/useAudioRecorder';
+import UserMessage from './UserMessage.vue';
+import AssistantMessage from './AssistantMessage.vue';
+import SystemMessage from './SystemMessage.vue';
+import HudControls from './HudControls.vue';
+import { relativeTime } from '../utils/relativeTime';
+import { getApiBase } from '../utils/apiBase';
+
+const props = defineProps<{
+    connected: boolean;
+    selectedAgent: string;
+    selectedMode: 'private' | 'public';
+    allAgents: any[];
+    defaultAgent: string;
+    wsSend: (...args: any[]) => void;
+    viewActive: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'hud-update', payload: { hudTree: any[]; hudVersion: number; connected: boolean }): void;
+}>();
+
+const chatStore = useChatStore();
+const smState = toRef(chatStore, 'smState');
+const channelState = toRef(chatStore, 'channelState');
+const connectionState = toRef(chatStore, 'connectionState');
+const smLabel = toRef(chatStore, 'smLabel');
+
+// UI hidden when not synced
+const isHidden = computed(() => connectionState.value !== 'SYNCED');
+
+// Previous sessions (server-fetched, supports load-more)
+interface PrevSession { messages: any[]; timestamp: string | null; timeLabel: string }
+const prevSessions = ref<PrevSession[]>([]);
+const prevHasMore = ref(false);
+const prevLoading = ref(false);
+const prevSkip = ref(0);
+const prevMessages = computed(() => prevSessions.value.flatMap(s => s.messages));
+
+async function fetchPreviousSession(loadMore = false) {
+    if (!props.selectedAgent || prevLoading.value) return;
+    prevLoading.value = true;
+    try {
+        const token = localStorage.getItem('nyx_session') || localStorage.getItem('titan_token') || '';
+        const skip = loadMore ? prevSkip.value : 0;
+        const apiBase = getApiBase();
+        const res = await fetch(`${apiBase}/api/session-history?agent=${props.selectedAgent}&mode=${props.selectedMode}&skip=${skip}&count=1`, {
+            headers: { 'Authorization': `Bearer ${token}` },
+        });
+        if (!res.ok) return;
+        const data = await res.json();
+        const newSessions: PrevSession[] = (data.sessions || []).map((s: any) => ({
+            messages: (s.entries || []).map((e: any) => ({
+                role: e.role,
+                content: e.content,
+                timestamp: e.timestamp,
+                agentId: props.selectedAgent,
+                streaming: false,
+            })),
+            timestamp: s.resetTimestamp,
+            timeLabel: s.resetTimestamp ? relativeTime(s.resetTimestamp) : '',
+        }));
+        if (loadMore) {
+            prevSessions.value = [...newSessions, ...prevSessions.value];
+        } else {
+            prevSessions.value = newSessions;
+        }
+        prevSkip.value = skip + newSessions.length;
+        prevHasMore.value = data.hasMore ?? false;
+    } catch (err) { console.warn('[chat] session history fetch failed:', err); }
+    finally { prevLoading.value = false; }
+}
+
+// Messages
+const { sending, input, messagesEl, scrollToBottom, scrollIfAtBottom, send: _send, onInputChange, navigateHistory, restoreLastSent } = useMessages(props.wsSend);
+
+const controlsEl = ref<HTMLElement | null>(null);
+
+const footerHeadline = computed(() => {
+    const msgs = groupedVisibleMsgs.value;
+    const last = msgs[msgs.length - 1];
+    return last?.position === 'footer' ? last : null;
+});
+
+const lastRealMsgIdx = computed(() => {
+    const msgs = groupedVisibleMsgs.value;
+    for (let i = msgs.length - 1; i >= 0; i--) {
+        if (msgs[i].type !== 'headline') return i;
+    }
+    return -1;
+});
+
+const VISIBLE_PAGE = 50;
+const visibleCount = ref(VISIBLE_PAGE);
+
+const { groupedVisibleMsgs, hasMore, loadMore, getFormattedAgentName } = useMessageGrouping(
+    computed(() => chatStore.messages),
+    visibleCount,
+    toRef(props, 'selectedAgent'),
+    toRef(props, 'allAgents'),
+    toRef(chatStore, 'sessionKey'),
+);
+
+const sentMessages = new Set<string>();
+const lastUsage = ref<null | any>(null);
+const pendingClearRef = ref(false);
+
+const { mount, lastSystemMsg, hudTree, hudVersion, getToolsForTurn, hudSnapshot, toolCallMapSnapshot, hasActiveStreamingMessage, sessionHistoryComplete } = useAgentSocket(visibleCount, lastUsage, pendingClearRef, sentMessages, restoreLastSent);
+
+// Expose HUD data to parent for debug panels
+watch([hudTree, hudVersion, () => props.connected], () => {
+    emit('hud-update', { hudTree: hudTree.value, hudVersion: hudVersion.value, connected: props.connected });
+}, { immediate: true });
+
+// Expose to devtools / console
+if (typeof window !== 'undefined') {
+    (window as any).__hudSnapshot = hudSnapshot;
+    (window as any).__toolCallMap = toolCallMapSnapshot;
+}
+
+// --- Scroll logic ---
+let userSendInFlight = false;
+const spacerHeight = ref(0);
+
+function getViewport(): HTMLElement | null {
+    const el = messagesEl.value;
+    if (!el) return null;
+    const root = el.$el || el;
+    return root.querySelector('[data-overlayscrollbars-viewport]') as HTMLElement | null;
+}
+
+function recalcSpacerSync(): number {
+    const viewport = getViewport();
+    if (!viewport) return 0;
+    const controls = (controlsEl.value || viewport.querySelector('.msg-controls')) as HTMLElement | null;
+    if (!controls) return 0;
+    const userMsgs = viewport.querySelectorAll('.message.user');
+    const last = userMsgs[userMsgs.length - 1] as HTMLElement;
+    if (!last) return 0;
+    const vpRect = viewport.getBoundingClientRect();
+    const st = viewport.scrollTop;
+    const msgTop = last.getBoundingClientRect().top - vpRect.top + st;
+    const ctrlBottom = controls.getBoundingClientRect().bottom - vpRect.top + st;
+    const vpH = viewport.clientHeight;
+    const needed = msgTop - 40 + vpH;
+    const h = Math.max(0, needed - ctrlBottom);
+    spacerHeight.value = h;
+    return h;
+}
+
+let _spacerInterval: ReturnType<typeof setInterval> | null = null;
+
+function scrollToUserMsg(smooth = true) {
+    nextTick(() => nextTick(() => {
+        recalcSpacerSync();
+        nextTick(() => {
+            const viewport = getViewport();
+            if (!viewport) return;
+            void viewport.offsetHeight;
+            const userMsgs = viewport.querySelectorAll('.message.user');
+            const last = userMsgs[userMsgs.length - 1] as HTMLElement;
+            if (!last) return;
+            const vpRect = viewport.getBoundingClientRect();
+            const msgRect = last.getBoundingClientRect();
+            const offset = viewport.scrollTop + (msgRect.top - vpRect.top) - 40;
+            viewport.scrollTo({ top: Math.max(0, offset), behavior: smooth ? 'smooth' : 'instant' });
+        });
+    }));
+}
+
+// Connection SM: when SYNCED, scroll to bottom and fetch previous session
+watch(connectionState, (val) => {
+    if (!props.viewActive) return;
+    if (val === 'SYNCED') {
+        if (!prevMessages.value.length) fetchPreviousSession();
+        scrollToBottom();
+    }
+});
+
+// Channel SM: handle agent done
+watch(channelState, (val, prev) => {
+    if (!props.viewActive) return;
+    if (prev === 'AGENT_RUNNING' && (val === 'READY' || val === 'FRESH')) {
+        userSendInFlight = false;
+    }
+    if (val === 'AGENT_RUNNING' && prev !== 'AGENT_RUNNING') {
+        if (!userSendInFlight) {
+            scrollToBottom();
+        }
+    }
+});
+
+function send() {
+    const content = input.value.trim();
+    const hasAtt = hasAttachments();
+    if (!content && !hasAtt) { triggerShake(); return; }
+    chatStore.truncatedWarning = false;
+    const ch = channelState.value;
+    const conn = connectionState.value;
+    if (conn !== 'SYNCED') {
+        chatStore.pushSystem('Not connected yet -- please wait.', props.selectedAgent);
+        triggerShake();
+    } else if (ch === 'READY' || ch === 'FRESH') {
+        if (content) sentMessages.add(content);
+        userSendInFlight = true;
+        const payload = hasAtt ? toPayload() : undefined;
+        _send(payload);
+        clearAttachments();
+        scrollToUserMsg();
+    } else if (ch === 'AGENT_RUNNING') {
+        chatStore.queuedThought = content;
+        input.value = '';
+        clearAttachments();
+        chatStore.pushSystem('Queued -- will send when agent finishes.', props.selectedAgent);
+    } else if (ch === 'NO_SESSION') {
+        triggerShake();
+    } else {
+        triggerShake();
+    }
+}
+
+function onNew() {
+    chatStore.newSession();
+    scrollToBottom();
+}
+function onConfirmNew() {
+    chatStore.confirmNew();
+    scrollToBottom();
+}
+
+const { inputEl, isShaking, autoGrow, triggerShake } = useInputAutogrow(input);
+const { isAgentRunning } = useAgentDisplay(toRef(props, 'selectedAgent'), toRef(props, 'defaultAgent'), toRef(props, 'allAgents'));
+
+// Attachments
+const { attachments, addFiles, removeAttachment, clearAttachments, toPayload, hasAttachments } = useAttachments();
+const fileInputEl = ref<HTMLInputElement | null>(null);
+const isDragOver = ref(false);
+
+// Audio recorder
+const { isRecording, duration, audioLevel, micDenied, startRecording, stopRecording, cancelRecording, formatDuration } = useAudioRecorder();
+
+async function toggleRecording() {
+    if (isRecording.value) {
+        const file = await stopRecording();
+        if (file) addFiles([file]);
+    } else {
+        await startRecording();
+    }
+}
+
+function onFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (input.files?.length) addFiles(input.files);
+    input.value = '';
+}
+
+function onPaste(e: ClipboardEvent) {
+    const items = e.clipboardData?.files;
+    if (items?.length) {
+        const media = Array.from(items).filter(f => f.type.startsWith('image/') || f.type.startsWith('audio/'));
+        if (media.length) {
+            e.preventDefault();
+            addFiles(media);
+        }
+    }
+}
+
+function onDragOver(e: DragEvent) {
+    if (e.dataTransfer?.types.includes('Files')) isDragOver.value = true;
+}
+function onDragLeave() { isDragOver.value = false; }
+function onDrop(e: DragEvent) {
+    isDragOver.value = false;
+    if (e.dataTransfer?.files.length) addFiles(e.dataTransfer.files);
+}
+
+// Agent switch reset — called by parent
+function resetForAgentSwitch() {
+    lastUsage.value = null;
+    sentMessages.clear();
+    prevSessions.value = [];
+    prevHasMore.value = false;
+    prevSkip.value = 0;
+    chatStore.resetLocalSession();
+}
+
+defineExpose({ resetForAgentSwitch });
+
+onMounted(() => {
+    chatStore.setWsSend(props.wsSend);
+    const unsubscribe = mount();
+    if (connectionState.value === 'SYNCED') fetchPreviousSession();
+    const viewport = getViewport();
+    let ro: ResizeObserver | null = null;
+    if (viewport) {
+        ro = new ResizeObserver(() => recalcSpacerSync());
+        ro.observe(viewport);
+    }
+    recalcSpacerSync();
+    _spacerInterval = setInterval(recalcSpacerSync, 200);
+    onUnmounted(() => {
+        unsubscribe();
+        ro?.disconnect();
+        if (_spacerInterval) clearInterval(_spacerInterval);
+    });
+});
+</script>
+
+<style scoped>
+/* Hide messages during agent switch to prevent scroll flicker */
+.messages.is-switching { opacity: 0; }
+
+.input-toolbar { display: flex; align-items: center; justify-content: flex-end; }
+.truncated-banner {
+  margin: 0 12px 8px;
+  padding: 8px 12px;
+  background: rgba(234, 179, 8, 0.12);
+  border: 1px solid rgba(234, 179, 8, 0.35);
+  border-radius: 8px;
+  color: #fbbf24;
+  line-height: 1.4;
+}
+.send-btn {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  flex-shrink: 0;
+  align-self: flex-end;
+  margin-bottom: 1px;
+  border-radius: 50%;
+  border: none;
+  background: var(--send-btn-bg, var(--accent));
+  color: var(--send-btn-color, white);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, opacity 0.15s;
+  padding: 0;
+}
+.send-btn svg { display: block; }
+.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
+.send-btn:disabled { opacity: 0.25; cursor: not-allowed; background: var(--muted); }
+
+/* Controls: right after last message, always nearby */
+.msg-controls {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+/* Stop button — subtle, next to send */
+.stop-btn {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  align-self: flex-end;
+  margin-bottom: 3px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+  padding: 0;
+  opacity: 0.6;
+}
+.stop-btn:hover:not(:disabled) { opacity: 1; color: var(--text); background: var(--hover-bg, rgba(255,255,255,0.05)); }
+.stop-btn:disabled { opacity: 0.2; cursor: not-allowed; }
+.sm-status-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0 0.1rem 0.75rem; }
+.sm-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
+.sm-dot.AGENT_RUNNING, .sm-dot.STOP_PENDING { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: pulse 2s infinite; }
+.sm-dot.HANDOVER_PENDING { background: #f59e0b; }
+.sm-dot.IDLE { background: #22c55e; }
+.sm-dot.ERROR { background: #ef4444; }
+.sm-dot.NO_SESSION { background: #f59e0b; animation: pulse 2s infinite; }
+
+/* --- Previous sessions (server-fetched) --- */
+.prev-load-more {
+    display: block;
+    margin: 4px auto 8px;
+    padding: 4px 16px;
+    font-size: 0.72rem;
+    color: var(--text-dim);
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.15s, border-color 0.15s;
+}
+.prev-load-more:hover:not(:disabled) { opacity: 1; border-color: var(--accent); }
+.prev-load-more:disabled { cursor: default; }
+.prev-session-header {
+    text-align: center;
+    font-size: 0.72rem;
+    color: var(--text-dim);
+    opacity: 0.5;
+    padding: 8px 0 4px;
+    user-select: none;
+}
+.prev-session-wrapper {
+    opacity: 0.6;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.session-divider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+}
+.session-divider::before,
+.session-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border);
+}
+.session-divider-text {
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    opacity: 0.5;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.no-session-center {
+  text-align: center;
+  font-weight: 700;
+  color: var(--text-dim);
+  opacity: 0.45;
+  padding: 1.5rem 0;
+}
+.session-context-badge {
+  display: flex;
+  align-self: center;
+  max-width: 85%;
+  padding: 0.35rem 0.75rem;
+  margin: -0.25rem 0;
+  background: rgba(219, 39, 119, 0.08);
+  border: 1px solid rgba(219, 39, 119, 0.25);
+  border-radius: 8px;
+}
+.session-context-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(219, 39, 119, 0.7);
+  line-height: 1.3;
+}
+.sm-status-label { font-weight: 600; color: var(--text-dim); }
+@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
+
+.load-more-btn {
+  align-self: center;
+  margin-bottom: 0.25rem;
+  background: var(--bg-dim);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 0.4rem 1rem;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+/* Mobile: larger touch targets */
+@media (max-width: 480px) {
+  .send-btn {
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+/* --- Attachment UI --- */
+.attach-btn {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  flex-shrink: 0;
+  align-self: flex-end;
+  margin-bottom: 1px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s;
+  padding: 0;
+}
+.attach-btn:hover { color: var(--text); }
+
+.attachment-strip {
+  display: flex;
+  gap: 6px;
+  padding: 6px 4px 2px;
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+.attachment-thumb {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.attachment-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.remove-att {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0,0,0,0.6);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.remove-att:hover { background: rgba(239,68,68,0.8); }
+
+.input-box.drag-over {
+  outline: 2px dashed var(--accent);
+  outline-offset: -2px;
+  background: rgba(59,130,246,0.05);
+}
+
+.hidden { display: none; }
+
+/* --- Mic button --- */
+.mic-btn {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  flex-shrink: 0;
+  align-self: flex-end;
+  margin-bottom: 1px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+  padding: 0;
+}
+.mic-btn:hover { color: var(--text); }
+.mic-btn.recording {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.12);
+  animation: pulse-mic 1.2s infinite;
+}
+@keyframes pulse-mic {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* --- Mic denied hint --- */
+.mic-denied-hint {
+  padding: 6px 12px;
+  font-size: 0.78rem;
+  color: #e06c75;
+  background: rgba(224, 108, 117, 0.1);
+  border-radius: 8px 8px 0 0;
+  text-align: center;
+  animation: fadeInOut 5s ease-in-out forwards;
+}
+@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
+
+/* --- Recording indicator --- */
+.recording-strip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 2px;
+  flex-shrink: 0;
+}
+.rec-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ef4444;
+  flex-shrink: 0;
+  animation: pulse-mic 1s infinite;
+}
+.rec-level-bar {
+  flex: 1;
+  height: 4px;
+  background: rgba(239, 68, 68, 0.15);
+  border-radius: 2px;
+  overflow: hidden;
+  max-width: 120px;
+}
+.rec-level-fill {
+  height: 100%;
+  background: #ef4444;
+  border-radius: 2px;
+  transition: width 0.08s linear;
+}
+.rec-time {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #ef4444;
+  font-variant-numeric: tabular-nums;
+}
+.rec-cancel {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.rec-cancel:hover { background: rgba(239, 68, 68, 0.3); }
+
+/* --- Audio attachment thumb --- */
+.attachment-thumb.audio-thumb {
+  width: auto;
+  min-width: 56px;
+  max-width: 160px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  background: var(--surface);
+}
+.audio-icon {
+  font-size: 1.1rem;
+  opacity: 0.6;
+}
+.audio-name {
+  font-size: 0.65rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-dim);
+}
+</style>

src/components/ContentLayout.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="content-layout" :class="direction" ref="containerRef">
+
+    <div v-if="isChatOpen" class="slot slot-chat">
+      <slot name="chat" />
+    </div>
+
+    <div v-if="isDashboardOpen" class="slot slot-dashboard">
+      <slot name="dashboard" />
+    </div>
+
+    <!-- Files + Artifacts share one "thin" wrapper.
+         In row mode:  thin is a vertical strip on the right.
+         In col mode:  thin is a horizontal bar at the bottom. -->
+    <div v-if="isThinVisible" class="slot slot-thin">
+      <div v-if="isFilesOpen" class="slot slot-files">
+        <slot name="files" />
+      </div>
+      <div v-if="isArtifactsOpen" class="slot slot-artifacts">
+        <slot name="artifacts" />
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'ContentLayout' });
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { usePanels } from '../composables/usePanels';
+
+const { isChatOpen, isDashboardOpen, isFilesOpen, isArtifactsOpen } = usePanels();
+
+const isThinVisible = computed(() => isFilesOpen.value || isArtifactsOpen.value);
+
+// --- Direction: row when landscape, col when portrait-ish ---
+const containerRef = ref<HTMLElement | null>(null);
+const direction = ref<'row' | 'col'>('row');
+
+let ro: ResizeObserver | null = null;
+
+function onResize(entries: ResizeObserverEntry[]) {
+  const entry = entries[0];
+  if (!entry) return;
+  const { width, height } = entry.contentRect;
+  // Flip to col when width is not at least 1.5× height
+  direction.value = width >= height * 1.5 ? 'row' : 'col';
+}
+
+onMounted(() => {
+  if (!containerRef.value) return;
+  ro = new ResizeObserver(onResize);
+  ro.observe(containerRef.value);
+});
+
+onBeforeUnmount(() => {
+  ro?.disconnect();
+});
+</script>
+
+<style scoped>
+.content-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── Slots ─────────────────────────────────────────────── */
+.slot {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Row mode: horizontal distribution ─────────────────── */
+.content-layout.row {
+  flex-direction: row;
+}
+.content-layout.row .slot-chat      { flex: 40 1 0; border-right: 1px solid var(--border); }
+.content-layout.row .slot-dashboard { flex: 40 1 0; border-right: 1px solid var(--border); }
+.content-layout.row .slot-thin      { flex: 10 1 0; display: flex; flex-direction: column; }
+.content-layout.row .slot-files     { flex: 1 1 0; border-bottom: 1px solid var(--border); }
+.content-layout.row .slot-artifacts { flex: 1 1 0; }
+
+/* Remove trailing border on last visible slot in row */
+.content-layout.row .slot-thin:last-child,
+.content-layout.row .slot-dashboard:last-child,
+.content-layout.row .slot-chat:last-child {
+  border-right: none;
+}
+
+/* ── Col mode: vertical distribution ───────────────────── */
+.content-layout.col {
+  flex-direction: column;
+}
+.content-layout.col .slot-chat      { flex: 40 1 0; border-bottom: 1px solid var(--border); }
+.content-layout.col .slot-dashboard { flex: 40 1 0; border-bottom: 1px solid var(--border); }
+.content-layout.col .slot-thin      { flex: 10 1 0; display: flex; flex-direction: row; }
+.content-layout.col .slot-files     { flex: 1 1 0; border-right: 1px solid var(--border); }
+.content-layout.col .slot-artifacts { flex: 1 1 0; }
+
+/* Remove trailing border on last visible slot in col */
+.content-layout.col .slot-thin:last-child,
+.content-layout.col .slot-dashboard:last-child,
+.content-layout.col .slot-chat:last-child {
+  border-bottom: none;
+}
+</style>

src/components/DebugColumn.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="debug-column">
+        <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>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'DebugColumn' });
+import { shallowRef, watch, defineAsyncComponent, type Component } from 'vue';
+import { usePanels, type PanelId } from '../composables/usePanels';
+
+const props = defineProps<{
+    hudTree: any[];
+    hudVersion: number;
+    connected: boolean;
+}>();
+
+const { openSidePanels, closePanel } = usePanels();
+
+// Resolve async components once
+const resolvedComponents = shallowRef<Record<string, Component>>({});
+
+watch(openSidePanels, (panels) => {
+    const current = resolvedComponents.value;
+    let changed = false;
+    const updates = { ...current };
+    for (const panel of panels) {
+        if (!updates[panel.id]) {
+            updates[panel.id] = defineAsyncComponent(panel.component);
+            changed = true;
+        }
+    }
+    if (changed) resolvedComponents.value = updates;
+}, { 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>
+.debug-column {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    gap: 1px;
+    background: var(--border);
+    overflow-y: auto;
+}
+
+.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;
+}
+</style>

src/components/DisplayPane.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="display-pane">
+
+    <div v-if="!displayArtifacts.length" class="display-empty">
+      <span class="display-label">Anzeige</span>
+      <span class="display-hint">Tables, pages and cards appear here</span>
+    </div>
+
+    <div v-else class="display-scroll">
+      <template v-for="art in displayArtifacts" :key="art.id">
+
+        <!-- data_table -->
+        <div v-if="art.type === 'data_table'" class="ws-artifact ws-data-table">
+          <div v-if="art.data.title" class="ws-artifact-header">{{ art.data.title }}</div>
+          <div class="ws-table-wrap">
+            <table class="ws-table">
+              <thead>
+                <tr>
+                  <th v-for="col in art.data.columns" :key="col">{{ col }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, i) in (art.data.rows || art.data.data || [])" :key="i">
+                  <td v-for="col in art.data.columns" :key="col">{{ row[col] ?? '' }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div v-if="art.meta?.source" class="ws-artifact-meta">{{ art.meta.source }}</div>
+        </div>
+
+        <!-- entity_detail: single card or list -->
+        <div v-else-if="art.type === 'entity_detail'" class="ws-artifact ws-entity-detail">
+          <div v-if="art.data.title" class="ws-card-title">{{ art.data.title }}</div>
+          <div v-if="art.data.subtitle" class="ws-card-subtitle">{{ art.data.subtitle }}</div>
+
+          <!-- list mode -->
+          <div v-if="art.data.items?.length" class="ws-list">
+            <div v-for="(item, i) in art.data.items" :key="i" class="ws-card-nested">
+              <div v-if="item.title" class="ws-card-title">{{ item.title }}</div>
+              <div v-if="item.fields?.length" class="ws-card-fields">
+                <div v-for="f in item.fields" :key="f.label" class="ws-card-field">
+                  <span class="ws-card-key">{{ f.label }}</span>
+                  <span class="ws-card-val">{{ f.value ?? '' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- single entity fields -->
+          <div v-if="art.data.fields?.length" class="ws-card-fields">
+            <div v-for="f in art.data.fields" :key="f.label" class="ws-card-field">
+              <span class="ws-card-key">{{ f.label }}</span>
+              <span v-if="f.action" class="ws-card-link" @click="sendAction(f.action)">{{ f.value ?? '' }}</span>
+              <span v-else class="ws-card-val">{{ f.value ?? '' }}</span>
+            </div>
+          </div>
+
+          <div v-if="art.actions?.length" class="ws-card-actions">
+            <button v-for="a in art.actions" :key="a.action" class="ws-btn" @click="sendAction(a.action, a.payload)">{{ a.label }}</button>
+          </div>
+        </div>
+
+        <!-- document_page -->
+        <div v-else-if="art.type === 'document_page'" class="ws-artifact ws-document-page">
+          <div v-if="art.data.title" class="ws-doc-title">{{ art.data.title }}</div>
+          <div v-for="(section, i) in (art.data.sections || [])" :key="i" class="ws-doc-section">
+            <div v-if="section.heading" class="ws-doc-heading">{{ section.heading }}</div>
+            <div v-if="section.content" class="ws-doc-content" v-html="renderMd(section.content)" />
+          </div>
+          <div v-if="art.actions?.length" class="ws-card-actions">
+            <button v-for="a in art.actions" :key="a.action" class="ws-btn" @click="sendAction(a.action, a.payload)">{{ a.label }}</button>
+          </div>
+        </div>
+
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'DisplayPane' });
+import { storeToRefs } from 'pinia';
+import { useChatStore } from '../store/chat';
+
+const chatStore = useChatStore();
+const { displayArtifacts } = storeToRefs(chatStore);
+const { sendAction } = chatStore;
+
+function renderMd(text: string): string {
+  return text
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code>$1</code>')
+    .replace(/\n/g, '<br>');
+}
+</script>
+
+<style scoped>
+.display-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--bg);
+}
+.display-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  color: var(--text-dim);
+  opacity: 0.4;
+}
+.display-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.display-hint { font-size: 0.72rem; text-align: center; max-width: 160px; }
+
+.display-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ws-artifact {
+  background: var(--panel-bg, var(--bg-dim));
+  border-radius: 8px;
+  overflow: hidden;
+}
+.ws-artifact-header {
+  padding: 8px 12px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ws-artifact-meta {
+  padding: 4px 12px 8px;
+  font-size: 0.68rem;
+  color: var(--text-dim);
+  opacity: 0.5;
+}
+
+/* Table */
+.ws-table-wrap { overflow-x: auto; }
+.ws-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
+.ws-table th {
+  text-align: left; padding: 6px 10px; font-weight: 600;
+  color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap;
+}
+.ws-table td {
+  padding: 5px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  color: var(--text);
+}
+.ws-table tr:last-child td { border-bottom: none; }
+.ws-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
+
+/* Entity */
+.ws-entity-detail { padding: 12px; }
+.ws-card-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
+.ws-card-subtitle { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; }
+.ws-list { display: flex; flex-direction: column; gap: 8px; }
+.ws-card-nested {
+  background: color-mix(in srgb, var(--border) 30%, transparent);
+  border-radius: 6px; padding: 8px 10px;
+}
+.ws-card-fields { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
+.ws-card-field { display: flex; gap: 8px; font-size: 0.8rem; }
+.ws-card-key { color: var(--text-dim); flex: 0 0 auto; min-width: 80px; }
+.ws-card-val { color: var(--text); }
+.ws-card-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.ws-card-link:hover { opacity: 0.8; }
+.ws-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+
+/* Document */
+.ws-document-page { padding: 16px; }
+.ws-doc-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
+.ws-doc-section { margin-bottom: 12px; }
+.ws-doc-heading {
+  font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
+  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em;
+}
+.ws-doc-content { font-size: 0.85rem; color: var(--text); line-height: 1.6; }
+.ws-doc-content :deep(code) {
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+  border-radius: 3px; padding: 1px 4px; font-size: 0.8em;
+}
+
+/* Shared button */
+.ws-btn {
+  padding: 5px 12px;
+  background: var(--bg-dim);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--text);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s;
+}
+.ws-btn:hover { border-color: var(--accent); color: var(--accent); }
+</style>

src/components/FilesPane.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="files-pane" :class="orientation">
+    <div class="files-bar">
+      <span class="files-label">Files</span>
+      <button class="orient-btn" @click="toggleOrientation" :title="orientation === 'vertical' ? 'Switch to horizontal' : 'Switch to vertical'">
+        <component :is="orientation === 'vertical' ? Bars3Icon : Bars3BottomLeftIcon" class="w-3.5 h-3.5" />
+      </button>
+    </div>
+    <div class="files-body">
+      <span class="files-hint">file tree</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'FilesPane' });
+import { ref } from 'vue';
+import { Bars3Icon, Bars3BottomLeftIcon } from '@heroicons/vue/20/solid';
+
+const orientation = ref<'vertical' | 'horizontal'>('vertical');
+function toggleOrientation() {
+  orientation.value = orientation.value === 'vertical' ? 'horizontal' : 'vertical';
+}
+</script>
+
+<style scoped>
+.files-pane {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  background: var(--bg);
+}
+
+/* Vertical: bar on top, body below */
+.files-pane.vertical {
+  flex-direction: column;
+}
+.files-pane.vertical .files-bar {
+  flex-direction: row;
+  border-bottom: 1px solid var(--border);
+  padding: 0 8px;
+  height: 32px;
+}
+.files-pane.vertical .files-body {
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Horizontal: bar on left, body to the right */
+.files-pane.horizontal {
+  flex-direction: row;
+}
+.files-pane.horizontal .files-bar {
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  padding: 8px 0;
+  width: 32px;
+}
+.files-pane.horizontal .files-body {
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.files-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  flex-shrink: 0;
+  background: var(--bg-dim, var(--bg));
+}
+
+.files-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  opacity: 0.5;
+  writing-mode: initial;
+}
+.files-pane.horizontal .files-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}
+
+.orient-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  border-radius: 4px;
+  opacity: 0.5;
+  transition: opacity 0.12s;
+  flex-shrink: 0;
+}
+.orient-btn:hover { opacity: 1; }
+
+.files-body {
+  display: flex;
+  opacity: 0.25;
+  color: var(--text-dim);
+  font-size: 0.65rem;
+}
+</style>

src/components/KonsolePane.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="konsole-pane" :class="orientation">
+
+    <div class="konsole-bar">
+      <span class="konsole-label">Konsole</span>
+      <button class="orient-btn" @click="toggleOrientation" :title="orientation === 'vertical' ? 'Switch to horizontal' : 'Switch to vertical'">
+        <component :is="orientation === 'vertical' ? Bars3Icon : Bars3BottomLeftIcon" class="w-3.5 h-3.5" />
+      </button>
+    </div>
+
+    <div class="konsole-body">
+
+      <div v-if="!konsoleArtifacts.length" class="konsole-empty">
+        <span class="konsole-hint">Konsole</span>
+      </div>
+
+      <div v-else class="konsole-scroll">
+        <template v-for="art in konsoleArtifacts" :key="art.id">
+
+          <!-- machine -->
+          <div v-if="art.type === 'machine'" class="kw-artifact kw-machine">
+            <div class="kw-machine-header">
+              <span class="kw-machine-name">{{ art.data.machine_id }}</span>
+              <span class="kw-machine-state">{{ art.data.current }}</span>
+            </div>
+            <div v-for="(text, i) in (art.data.content || [])" :key="i" class="kw-machine-content">{{ text }}</div>
+            <div v-if="Object.keys(art.data.stored_data || {}).length" class="kw-machine-data">
+              <span v-for="(v, k) in art.data.stored_data" :key="k" class="kw-machine-datum">{{ k }}={{ v }}</span>
+            </div>
+            <div v-if="art.actions?.length" class="kw-actions">
+              <button
+                v-for="a in art.actions"
+                :key="a.action"
+                class="kw-btn"
+                @click="sendAction(a.action)"
+              >{{ a.label }}</button>
+            </div>
+          </div>
+
+          <!-- action_bar -->
+          <div v-else-if="art.type === 'action_bar'" class="kw-artifact kw-action-bar">
+            <button
+              v-for="a in art.actions"
+              :key="a.action"
+              class="kw-btn"
+              @click="sendAction(a.action, a.payload)"
+            >{{ a.label }}</button>
+          </div>
+
+          <!-- status -->
+          <div v-else-if="art.type === 'status'" class="kw-artifact kw-status" :class="'kw-dt-' + (art.data.display_type || 'text')">
+            <!-- progress bar -->
+            <template v-if="art.data.display_type === 'progress'">
+              <span class="kw-label">{{ art.data.label }}</span>
+              <div class="kw-bar"><div class="kw-fill" :style="{ width: clamp(art.data.value) + '%' }" /></div>
+              <span class="kw-pct">{{ clamp(art.data.value) }}%</span>
+            </template>
+            <!-- info -->
+            <template v-else-if="art.data.display_type === 'info'">
+              <span class="kw-icon">ℹ</span>
+              <span class="kw-label">{{ art.data.label }}</span>
+            </template>
+            <!-- text / default -->
+            <template v-else>
+              <span class="kw-label">{{ art.data.label }}</span>
+              <span v-if="art.data.value" class="kw-value">{{ art.data.value }}</span>
+            </template>
+          </div>
+
+        </template>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'KonsolePane' });
+import { ref } from 'vue';
+import { Bars3Icon, Bars3BottomLeftIcon } from '@heroicons/vue/20/solid';
+import { storeToRefs } from 'pinia';
+import { useChatStore } from '../store/chat';
+
+const chatStore = useChatStore();
+const { konsoleArtifacts } = storeToRefs(chatStore);
+const { sendAction } = chatStore;
+
+const orientation = ref<'vertical' | 'horizontal'>('vertical');
+function toggleOrientation() {
+  orientation.value = orientation.value === 'vertical' ? 'horizontal' : 'vertical';
+}
+
+function clamp(v: any): number {
+  return Math.min(100, Math.max(0, Number(v) || 0));
+}
+</script>
+
+<style scoped>
+.konsole-pane {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  background: var(--bg);
+}
+
+/* Vertical: bar on top */
+.konsole-pane.vertical { flex-direction: column; }
+.konsole-pane.vertical .konsole-bar {
+  flex-direction: row;
+  border-bottom: 1px solid var(--border);
+  padding: 0 8px;
+  height: 32px;
+}
+.konsole-pane.vertical .konsole-body { flex: 1; overflow-y: auto; }
+
+/* Horizontal: bar on left */
+.konsole-pane.horizontal { flex-direction: row; }
+.konsole-pane.horizontal .konsole-bar {
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  padding: 8px 0;
+  width: 32px;
+}
+.konsole-pane.horizontal .konsole-body { flex: 1; overflow-y: auto; }
+
+.konsole-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  flex-shrink: 0;
+  background: var(--bg-dim, var(--bg));
+}
+
+.konsole-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  opacity: 0.5;
+}
+.konsole-pane.horizontal .konsole-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+}
+
+.orient-btn {
+  display: flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px;
+  border: none; background: none; color: var(--text-dim);
+  cursor: pointer; border-radius: 4px;
+  opacity: 0.5; transition: opacity 0.12s; flex-shrink: 0;
+}
+.orient-btn:hover { opacity: 1; }
+
+.konsole-body { display: flex; flex-direction: column; }
+
+.konsole-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  opacity: 0.25;
+  font-size: 0.7rem;
+}
+
+.konsole-scroll {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Artifact base */
+.kw-artifact {
+  background: var(--panel-bg, var(--bg-dim));
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* Machine */
+.kw-machine { padding: 10px; }
+.kw-machine-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.kw-machine-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.kw-machine-state {
+  font-size: 0.72rem;
+  color: var(--accent);
+  font-weight: 600;
+}
+.kw-machine-content {
+  font-size: 0.82rem;
+  color: var(--text);
+  padding: 2px 0;
+}
+.kw-machine-data {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+.kw-machine-datum {
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  background: color-mix(in srgb, var(--border) 40%, transparent);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+/* Action bar */
+.kw-action-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px;
+}
+
+/* Status */
+.kw-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 0.8rem;
+}
+.kw-label { color: var(--text-dim); flex: 0 0 auto; }
+.kw-value { color: var(--text); font-weight: 500; }
+.kw-icon { font-size: 0.85rem; }
+.kw-bar {
+  flex: 1;
+  height: 6px;
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.kw-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+.kw-pct { color: var(--text-dim); font-size: 0.75rem; flex: 0 0 auto; }
+
+/* Actions */
+.kw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.kw-btn {
+  padding: 5px 12px;
+  background: var(--bg-dim);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--text);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s;
+}
+.kw-btn:hover { border-color: var(--accent); color: var(--accent); }
+</style>

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>

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>

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>

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>

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;
+            }
         }
     }
 

src/composables/useAgentSocket.ts

@@ -56,14 +56,12 @@ export function useAgentSocket(
                 if (data.session_id) chatStore.sessionKey = data.session_id;
             },
 
-            // assay UI controls — store for later rendering
+            // assay UI controls (legacy flat list) — kept for compat, ignored for now
-            controls(_data) {
+            controls(_data) {},
-                // TODO: render controls in workspace panel
-            },
 
-            // assay artifacts — store for later rendering
+            // assay artifacts — split into Display (pages/tables) and Konsole (machines/controls)
-            artifacts(_data) {
+            artifacts(data) {
-                // TODO: render artifacts in workspace panel
+                chatStore.setArtifacts(data.artifacts || []);
             },
 
             // assay session cleared

src/composables/usePanels.ts

@@ -0,0 +1,170 @@
+/**
+ * usePanels.ts — Pane + panel system
+ *
+ * Three top-level panes: chat, workspace, debug
+ * Each pane toggles independently. Debug column contains stacked panels.
+ *
+ * Roles (future: from Zitadel JWT claims):
+ *   user     — end consumer (chat + workspace)
+ *   creator  — + graph, nodes
+ *   operator — + trace, awareness
+ *   dev      — full access to all debug tools
+ */
+
+import { ref, computed, type Component } from 'vue';
+import tenant from '../tenant';
+
+// Top-level panes (columns)
+export type PaneId = 'chat' | 'dashboard' | 'files' | 'artifacts';
+// Debug panels (stacked inside the debug column)
+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 PANELS_KEY = 'nyx_panels_open';
+const PANES_KEY = 'nyx_panes_open';
+
+function loadSet<T extends string>(key: string, defaults: T[]): Set<T> {
+    try {
+        const stored = localStorage.getItem(key);
+        if (stored) return new Set(JSON.parse(stored));
+    } catch { /* ignore */ }
+    return new Set(defaults);
+}
+
+function saveSet(key: string, ids: Set<string>) {
+    localStorage.setItem(key, JSON.stringify([...ids]));
+}
+
+// Module-level state (survives HMR)
+const openPanelIds = ref<Set<PanelId>>(loadSet<PanelId>(PANELS_KEY, []));
+const openPaneIds = ref<Set<PaneId>>(loadSet<PaneId>(PANES_KEY, ['chat', 'dashboard']));
+
+export function usePanels() {
+    // Current role
+    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);
+    // Any debug panel open = debug column visible
+    const hasDebugColumn = hasSidePanels;
+
+    // Pane state
+    const isChatOpen      = computed(() => openPaneIds.value.has('chat'));
+    const isDashboardOpen = computed(() => openPaneIds.value.has('dashboard'));
+    const isFilesOpen     = computed(() => openPaneIds.value.has('files'));
+    const isArtifactsOpen = computed(() => openPaneIds.value.has('artifacts'));
+
+    function togglePanel(id: PanelId) {
+        const next = new Set(openPanelIds.value);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        openPanelIds.value = next;
+        saveSet(PANELS_KEY, 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;
+        saveSet(PANELS_KEY, next);
+    }
+
+    function togglePane(id: PaneId) {
+        const next = new Set(openPaneIds.value);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        openPaneIds.value = next;
+        saveSet(PANES_KEY, next);
+    }
+
+    function isPaneOpen(id: PaneId): boolean {
+        return openPaneIds.value.has(id);
+    }
+
+    return {
+        role,
+        // Debug panels
+        availablePanels,
+        openSidePanels,
+        openBottomPanels,
+        hasSidePanels,
+        hasBottomPanels,
+        hasDebugColumn,
+        togglePanel,
+        isPanelOpen,
+        closePanel,
+        openPanelIds,
+        // Top-level panes
+        isChatOpen,
+        isDashboardOpen,
+        isFilesOpen,
+        isArtifactsOpen,
+        togglePane,
+        isPaneOpen,
+        openPaneIds,
+    };
+}

src/composables/useTakeover.ts

@@ -162,11 +162,36 @@ export function useTakeover(wsSend: (msg: any) => void) {
     }
 
     function screenshot() {
+        function paneState(sel: string) {
+            const el = document.querySelector(sel);
+            if (!el) return null;
+            const rect = (el as HTMLElement).getBoundingClientRect();
             return {
-            url: window.location.hash,
+                visible: rect.width > 0 && rect.height > 0,
+                w: Math.round(rect.width),
+                h: Math.round(rect.height),
+                text: (el as HTMLElement).innerText?.slice(0, 300) ?? '',
+            };
+        }
+        return {
+            url: window.location.href,
+            hash: window.location.hash,
             title: document.title,
             viewport: { w: window.innerWidth, h: window.innerHeight },
-            body: document.body.innerText.slice(0, 2000),
+            panes: {
+                chat:    paneState('.chat-pane'),
+                display: paneState('.display-pane'),
+                konsole: paneState('.konsole-pane'),
+                files:   paneState('.files-pane'),
+            },
+            artifacts: (() => {
+                const arts = document.querySelectorAll('.ws-artifact, .kw-artifact');
+                return Array.from(arts).slice(0, 20).map(a => ({
+                    cls: (a as HTMLElement).className,
+                    text: (a as HTMLElement).innerText?.slice(0, 80),
+                }));
+            })(),
+            messages: document.querySelectorAll('.message').length,
         };
     }
 
@@ -240,12 +265,9 @@ export function useTakeover(wsSend: (msg: any) => void) {
             return;
         }
 
-        // eval — requires user confirmation
         if (cmd === 'eval') {
             const js = args.js;
             if (!js) { sendResult({ type: 'dev_cmd_result', cmdId, error: 'js required' }); return; }
-            const ok = window.confirm(`Dev takeover eval request:\n\n${js.slice(0, 500)}\n\nAllow?`);
-            if (!ok) { sendResult({ type: 'dev_cmd_result', cmdId, error: 'rejected by user' }); return; }
             try {
                 const result = new Function('return (' + js + ')')();
                 const serialized = result instanceof Element

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 });
+            sseBuf += decoder.decode(value, { stream: true });
-            if (text.includes('heartbeat')) {
+            // 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.
  */

src/main.ts

@@ -32,6 +32,11 @@ import App from './App.vue';
 import router from './router';
 
 const app = createApp(App);
-app.use(createPinia());
+const pinia = createPinia();
+app.use(pinia);
 app.use(router);
 app.mount('#app');
+
+if (import.meta.env.DEV) {
+    (window as any).__pinia = pinia;
+}

src/store/chat.ts

@@ -16,9 +16,25 @@ export interface FinanceData {
     pricing: { prompt: number, completion: number };
 }
 
+// Artifact types that belong to each pane
+const DISPLAY_TYPES = new Set(['data_table', 'document_page', 'entity_detail']);
+const KONSOLE_TYPES = new Set(['machine', 'action_bar', 'status']);
+
 export const useChatStore = defineStore('chat', () => {
     // --- State ---
     const messages = ref<any[]>([]);
+
+    // --- Artifacts ---
+    const artifacts = ref<any[]>([]);
+    const displayArtifacts = computed(() => artifacts.value.filter(a => DISPLAY_TYPES.has(a.type)));
+    const konsoleArtifacts = computed(() => artifacts.value.filter(a => KONSOLE_TYPES.has(a.type)));
+
+    function setArtifacts(arts: any[]) {
+        artifacts.value = arts;
+    }
+    function clearArtifacts() {
+        artifacts.value = [];
+    }
     // Two-SM architecture: channel (shared) + connection (per-user)
     const channelState = ref<ChannelState>('NO_SESSION');
     const connectionState = ref<ConnectionState>('CONNECTING');
@@ -66,6 +82,11 @@ export const useChatStore = defineStore('chat', () => {
     let _wsSend: ((payload: any) => void) | null = null;
     function setWsSend(fn: (payload: any) => void) { _wsSend = fn; }
 
+    // Artifact action dispatch — sends {type:'action', action, data} over WS
+    function sendAction(action: string, data: any = {}) {
+        _wsSend?.({ type: 'action', action, data });
+    }
+
     // Session actions (called from HudControls / HudRow)
     function newSession() {
         stashMessages();
@@ -201,6 +222,7 @@ export const useChatStore = defineStore('chat', () => {
         messages.value = [];
         sessionTotalTokens.value = null;
         finance.value = null;
+        artifacts.value = [];
         resetStreamingState();
     }
 
@@ -434,10 +456,16 @@ export const useChatStore = defineStore('chat', () => {
         handoverPending,
         isRunning,
         setWsSend,
+        sendAction,
         newSession,
         handover,
         stop,
         confirmNew,
         stay,
+        artifacts,
+        displayArtifacts,
+        konsoleArtifacts,
+        setArtifacts,
+        clearArtifacts,
     };
 });

src/views/TestsView.vue

@@ -0,0 +1,324 @@
+<template>
+    <div class="tests-view">
+        <div class="tests-header">
+            <div class="tests-header-left">
+                <h2>Test Results</h2>
+                <div v-if="startedAt" class="tests-timestamps">
+                    <span :title="startedAt">Started {{ relativeTime(startedAt) }}</span>
+                    <span v-if="updatedAt && updatedAt !== startedAt" :title="updatedAt"> · Updated {{ relativeTime(updatedAt) }}</span>
+                </div>
+            </div>
+            <div class="tests-meta">
+                <span :class="['status-badge', overallStatus]">{{ overallStatus }}</span>
+                <span class="summary">{{ passedCount }}/{{ totalCount }} passed</span>
+                <span v-if="totalDuration" class="duration">{{ (totalDuration / 1000).toFixed(1) }}s</span>
+            </div>
+        </div>
+
+        <div v-if="results.length === 0" class="tests-empty">
+            No test results yet. Run <code>bash infra/test-run.sh</code> to start.
+        </div>
+
+        <div v-else class="tests-list">
+            <div
+                v-for="r in displayResults"
+                :key="r.test"
+                :class="['test-row', r.status]"
+                @click="toggleExpand(r.test)"
+            >
+                <span class="test-icon">
+                    <span v-if="r.status === 'pass'" class="icon-pass">&#10003;</span>
+                    <span v-else-if="r.status === 'fail' || r.status === 'error'" class="icon-fail">&#10007;</span>
+                    <span v-else-if="r.status === 'running'" class="icon-running">&#9679;</span>
+                    <span v-else class="icon-pending">&#9675;</span>
+                </span>
+                <span class="test-suite">{{ r.suite }}</span>
+                <span class="test-name">{{ r.test }}</span>
+                <span v-if="r.stats && r.stats.runs > 1" class="test-stats">
+                    <span class="stat">×{{ r.stats.runs }}</span>
+                    <span class="stat">p50 {{ r.stats.p50_ms }}ms</span>
+                    <span class="stat">p95 {{ r.stats.p95_ms }}ms</span>
+                    <span class="stat">{{ r.stats.pass_rate }}%</span>
+                </span>
+                <span v-else class="test-duration">{{ r.duration_ms ? r.duration_ms + 'ms' : '' }}</span>
+                <span :class="['test-status', r.status]">{{ r.status }}</span>
+            </div>
+
+            <!-- Expanded error detail -->
+            <div
+                v-for="r in displayResults.filter(r => expanded.has(r.test) && r.error)"
+                :key="r.test + '-error'"
+                class="test-error"
+            >
+                <pre>{{ r.error }}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { getApiBase } from '../utils/apiBase';
+import { relativeTime } from '../utils/relativeTime';
+
+interface TestStats {
+    runs: number;
+    passed: number;
+    pass_rate: number;
+    min_ms: number;
+    avg_ms: number;
+    p50_ms: number;
+    p95_ms: number;
+    max_ms: number;
+}
+
+interface TestResult {
+    run_id: string;
+    test: string;
+    suite: string;
+    status: 'pass' | 'fail' | 'error' | 'running' | 'pending';
+    duration_ms: number;
+    error: string;
+    stats?: TestStats;
+}
+
+const results = ref<TestResult[]>([]);
+const runId = ref('');
+const startedAt = ref('');
+const updatedAt = ref('');
+const expanded = ref<Set<string>>(new Set());
+let eventSource: EventSource | null = null;
+
+
+const displayResults = computed(() =>
+    results.value.filter(r => r.test !== '__summary__')
+);
+
+const passedCount = computed(() => displayResults.value.filter(r => r.status === 'pass').length);
+const failedCount = computed(() => displayResults.value.filter(r => r.status === 'fail' || r.status === 'error').length);
+const totalCount = computed(() => displayResults.value.length);
+const totalDuration = computed(() => displayResults.value.reduce((sum, r) => sum + (r.duration_ms || 0), 0));
+
+const overallStatus = computed(() => {
+    if (displayResults.value.some(r => r.status === 'running')) return 'running';
+    if (failedCount.value > 0) return 'fail';
+    if (passedCount.value > 0) return 'pass';
+    return 'pending';
+});
+
+function toggleExpand(test: string) {
+    if (expanded.value.has(test)) {
+        expanded.value.delete(test);
+    } else {
+        expanded.value.add(test);
+    }
+}
+
+function handleResult(data: any) {
+    if (data.run_id && data.run_id !== runId.value) {
+        // New run — clear old
+        results.value = [];
+        runId.value = data.run_id;
+        startedAt.value = data.ts || new Date().toISOString();
+    }
+    updatedAt.value = data.ts || new Date().toISOString();
+
+    // Update or append
+    const idx = results.value.findIndex(r => r.test === data.test && r.suite === data.suite);
+    if (idx >= 0) {
+        results.value[idx] = data;
+    } else {
+        results.value.push(data);
+    }
+}
+
+onMounted(() => {
+    const base = getApiBase();
+
+    // First fetch snapshot
+    fetch(`${base}/api/test-results/latest`)
+        .then(r => r.json())
+        .then(data => {
+            if (data.run_id) runId.value = data.run_id;
+            if (data.results) {
+                results.value = data.results;
+                // Extract timestamps from results
+                const timestamps = data.results.map((r: any) => r.ts).filter(Boolean).sort();
+                if (timestamps.length) {
+                    startedAt.value = timestamps[0];
+                    updatedAt.value = timestamps[timestamps.length - 1];
+                }
+            }
+        })
+        .catch(() => {});
+
+    // Then connect SSE for live updates
+    eventSource = new EventSource(`${base}/api/test-results`);
+    eventSource.onmessage = (e) => {
+        try {
+            const data = JSON.parse(e.data);
+            if (data.run_id) handleResult(data);
+        } catch {}
+    };
+});
+
+onUnmounted(() => {
+    eventSource?.close();
+    eventSource = null;
+});
+</script>
+
+<style scoped>
+.tests-view {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 24px;
+    color: var(--text);
+}
+
+.tests-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.tests-header-left {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.tests-header h2 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.tests-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 0.85rem;
+    color: var(--text-dim);
+}
+
+.tests-timestamps {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+    opacity: 0.7;
+}
+
+.run-id {
+    font-family: monospace;
+    opacity: 0.6;
+}
+
+.status-badge {
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+}
+.status-badge.pass { background: #166534; color: #bbf7d0; }
+.status-badge.fail { background: #991b1b; color: #fecaca; }
+.status-badge.running { background: #854d0e; color: #fef08a; }
+.status-badge.pending { background: var(--panel-bg); color: var(--text-dim); }
+
+.tests-empty {
+    padding: 40px;
+    text-align: center;
+    color: var(--text-dim);
+    font-size: 0.9rem;
+}
+.tests-empty code {
+    background: var(--panel-bg);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+}
+
+.tests-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.test-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: var(--panel-bg);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.12s;
+    font-size: 0.85rem;
+}
+.test-row:hover { background: color-mix(in srgb, var(--panel-bg) 80%, var(--text) 5%); }
+
+.test-icon { width: 20px; text-align: center; flex-shrink: 0; }
+.icon-pass { color: #22c55e; }
+.icon-fail { color: #ef4444; }
+.icon-running { color: #eab308; animation: pulse 1s infinite; }
+.icon-pending { color: var(--text-dim); }
+
+@keyframes pulse { 50% { opacity: 0.4; } }
+
+.test-suite {
+    color: var(--text-dim);
+    min-width: 80px;
+    font-family: monospace;
+    font-size: 0.75rem;
+}
+
+.test-name { flex: 1; }
+
+.test-duration {
+    font-family: monospace;
+    color: var(--text-dim);
+    font-size: 0.75rem;
+    min-width: 60px;
+    text-align: right;
+}
+
+.test-status {
+    min-width: 50px;
+    text-align: right;
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+}
+.test-status.pass { color: #22c55e; }
+.test-status.fail, .test-status.error { color: #ef4444; }
+.test-status.running { color: #eab308; }
+
+.test-error {
+    margin: 0 0 2px 30px;
+    padding: 8px 12px;
+    background: #1a0000;
+    border-left: 3px solid #ef4444;
+    border-radius: 0 6px 6px 0;
+}
+.test-error pre {
+    margin: 0;
+    font-size: 0.8rem;
+    color: #fca5a5;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.test-stats {
+    display: flex;
+    gap: 8px;
+    font-family: monospace;
+    font-size: 0.7rem;
+    color: var(--text-dim);
+}
+.test-stats .stat {
+    background: color-mix(in srgb, var(--panel-bg) 60%, var(--text) 8%);
+    padding: 1px 5px;
+    border-radius: 3px;
+}
+</style>

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,
       },
     },
   },