From e948caf13229d5ca07775f5ffad6123f099333c0 Mon Sep 17 00:00:00 2001
From: Nico <nico@openclaw>
Date: Thu, 2 Apr 2026 20:12:59 +0200
Subject: [PATCH] 3-column layout: extract ChatPane, add WorkspacePane +
 DebugColumn

- Extract ChatPane.vue from AgentsView (messages, input, scroll, attachments, audio)
- Create WorkspacePane.vue placeholder (dashboard, files, artifacts)
- Create DebugColumn.vue (replaces PanelShell side panels)
- AgentsView.vue reduced from 1062 to ~140 lines (thin orchestrator)
- usePanels: add pane toggles (chat, workspace) alongside debug panel toggles
- AppToolbar: chat + workspace toggle buttons with divider
- Delete PanelShell.vue (replaced by DebugColumn)
- Any combo of columns works: chat|workspace|debug, all toggleable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/AppToolbar.vue                 |  36 +-
 src/components/ChatPane.vue                   | 861 ++++++++++++++++
 .../{PanelShell.vue => DebugColumn.vue}       |  84 +-
 src/components/WorkspacePane.vue              |  41 +
 src/composables/usePanels.ts                  |  75 +-
 src/views/AgentsView.vue                      | 950 ++----------------
 6 files changed, 1080 insertions(+), 967 deletions(-)
 create mode 100644 src/components/ChatPane.vue
 rename src/components/{PanelShell.vue => DebugColumn.vue} (55%)
 create mode 100644 src/components/WorkspacePane.vue

diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue
index cd5b578..eced096 100644
--- a/src/components/AppToolbar.vue
+++ b/src/components/AppToolbar.vue
@@ -8,6 +8,26 @@
 
         <div class="toolbar-spacer" />
 
+        <!-- Pane toggles (chat, workspace) -->
+        <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('workspace') }"
+            @click="togglePane('workspace')"
+            title="Workspace"
+        >
+            <RectangleStackIcon class="w-4 h-4" />
+        </button>
+
+        <div class="toolbar-divider" />
+
         <!-- Theme pills (icon only) -->
         <button
             v-for="t in THEMES"
@@ -82,12 +102,12 @@
 <script setup lang="ts">
 defineOptions({ name: 'AppToolbar' });
 import { ref, computed, type Component } from 'vue';
-import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon } from '@heroicons/vue/20/solid';
+import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon, ChatBubbleLeftIcon, RectangleStackIcon } from '@heroicons/vue/20/solid';
 import { THEME_ICONS, THEME_NAMES, useTheme, type Theme } from '../composables/useTheme';
 import { ws, auth, agents, takeover } from '../store';
 import { useChatStore } from '../store/chat';
 import { useUI } from '../composables/ui';
-import { usePanels, type PanelId } from '../composables/usePanels';
+import { usePanels, type PanelId, type PaneId } from '../composables/usePanels';
 
 const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
 
@@ -96,8 +116,8 @@ const { selectedAgent, selectedMode } = agents;
 const { theme, setTheme } = useTheme();
 const chatStore = useChatStore();
 
-// Panels
-const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen } = usePanels();
+// Panels + panes
+const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen, togglePane, isPaneOpen } = usePanels();
 
 const PANEL_ICONS: Record<PanelId, Component> = {
     graph: CircleStackIcon,
@@ -182,6 +202,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;
diff --git a/src/components/ChatPane.vue b/src/components/ChatPane.vue
new file mode 100644
index 0000000..7cc626d
--- /dev/null
+++ b/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 { /* silently fail */ }
+    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,
+    computed(() => props.selectedAgent),
+    computed(() => 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(computed(() => props.selectedAgent), computed(() => props.defaultAgent), computed(() => 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>
diff --git a/src/components/PanelShell.vue b/src/components/DebugColumn.vue
similarity index 55%
rename from src/components/PanelShell.vue
rename to src/components/DebugColumn.vue
index 618b6ea..ef74834 100644
--- a/src/components/PanelShell.vue
+++ b/src/components/DebugColumn.vue
@@ -1,38 +1,31 @@
 <template>
-    <div class="panel-shell" :class="{ 'has-side': hasSidePanels }">
-        <!-- Main content area -->
-        <div class="panel-main">
-            <slot />
-        </div>
-
-        <!-- Side panel column -->
-        <div v-if="hasSidePanels" class="panel-side">
-            <div
-                v-for="panel in openSidePanels"
-                :key="panel.id"
-                class="panel-section"
-            >
-                <div class="panel-header">
-                    <span class="panel-title">{{ panel.label }}</span>
-                    <button class="panel-close" @click="closePanel(panel.id)" title="Close">&times;</button>
-                </div>
-                <Suspense>
-                    <component
-                        :is="resolvedComponents[panel.id]"
-                        v-bind="panelProps(panel.id)"
-                    />
-                    <template #fallback>
-                        <div class="panel-loading">Loading...</div>
-                    </template>
-                </Suspense>
+    <div 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, type PanelDef } from '../composables/usePanels';
+import { usePanels, type PanelId } from '../composables/usePanels';
 
 const props = defineProps<{
     hudTree: any[];
@@ -40,7 +33,7 @@ const props = defineProps<{
     connected: boolean;
 }>();
 
-const { openSidePanels, openBottomPanels, hasSidePanels, hasBottomPanels, closePanel } = usePanels();
+const { openSidePanels, closePanel } = usePanels();
 
 // Resolve async components once
 const resolvedComponents = shallowRef<Record<string, Component>>({});
@@ -72,32 +65,14 @@ function panelProps(id: PanelId): Record<string, any> {
 </script>
 
 <style scoped>
-.panel-shell {
+.debug-column {
     display: flex;
-    width: 100%;
+    flex-direction: column;
     height: 100%;
     min-height: 0;
-    overflow: hidden;
-}
-
-.panel-main {
-    flex: 1;
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.panel-side {
-    width: 320px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
     gap: 1px;
     background: var(--border);
-    border-left: 1px solid var(--border);
     overflow-y: auto;
-    min-height: 0;
 }
 
 .panel-section {
@@ -143,17 +118,4 @@ function panelProps(id: PanelId): Record<string, any> {
     color: var(--text-dim);
     font-size: 0.8rem;
 }
-
-/* Mobile: side panels stack below */
-@media (max-width: 768px) {
-    .panel-shell {
-        flex-direction: column;
-    }
-    .panel-side {
-        width: 100%;
-        max-height: 40vh;
-        border-left: none;
-        border-top: 1px solid var(--border);
-    }
-}
 </style>
diff --git a/src/components/WorkspacePane.vue b/src/components/WorkspacePane.vue
new file mode 100644
index 0000000..155c734
--- /dev/null
+++ b/src/components/WorkspacePane.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="workspace-pane">
+    <div class="workspace-empty">
+      <span class="workspace-label">Workspace</span>
+      <span class="workspace-hint">Dashboard, files, artifacts</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'WorkspacePane' });
+</script>
+
+<style scoped>
+.workspace-pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    background: var(--bg);
+}
+.workspace-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    color: var(--text-dim);
+    opacity: 0.4;
+}
+.workspace-label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.workspace-hint {
+    font-size: 0.72rem;
+}
+</style>
diff --git a/src/composables/usePanels.ts b/src/composables/usePanels.ts
index 6a12cb2..9614c47 100644
--- a/src/composables/usePanels.ts
+++ b/src/composables/usePanels.ts
@@ -1,23 +1,22 @@
 /**
- * usePanels.ts — Role-based panel system
+ * usePanels.ts — Pane + panel system
  *
- * Determines which panels are available based on tenant features,
- * manages open/closed state persisted to localStorage.
+ * 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 (default)
- *   creator  — content creator, agent designer
- *   operator — monitors agents, runs tests
+ *   user     — end consumer (chat + workspace)
+ *   creator  — + graph, nodes
+ *   operator — + trace, awareness
  *   dev      — full access to all debug tools
- *
- * For now, role is derived from tenant.features.devTools:
- *   devTools=true  → dev role (all panels)
- *   devTools=false → user role (no side/bottom panels)
  */
 
 import { ref, computed, type Component } from 'vue';
 import tenant from '../tenant';
 
+// Top-level panes (columns)
+export type PaneId = 'chat' | 'workspace';
+// 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';
@@ -61,26 +60,27 @@ const PANELS: PanelDef[] = [
     },
 ];
 
-const STORAGE_KEY = 'nyx_panels_open';
+const PANELS_KEY = 'nyx_panels_open';
+const PANES_KEY = 'nyx_panes_open';
 
-function loadOpenPanels(): Set<PanelId> {
+function loadSet<T extends string>(key: string, defaults: T[]): Set<T> {
     try {
-        const stored = localStorage.getItem(STORAGE_KEY);
+        const stored = localStorage.getItem(key);
         if (stored) return new Set(JSON.parse(stored));
     } catch { /* ignore */ }
-    return new Set();
+    return new Set(defaults);
 }
 
-function saveOpenPanels(ids: Set<PanelId>) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
+function saveSet(key: string, ids: Set<string>) {
+    localStorage.setItem(key, JSON.stringify([...ids]));
 }
 
 // Module-level state (survives HMR)
-const openPanelIds = ref<Set<PanelId>>(loadOpenPanels());
+const openPanelIds = ref<Set<PanelId>>(loadSet<PanelId>(PANELS_KEY, []));
+const openPaneIds = ref<Set<PaneId>>(loadSet<PaneId>(PANES_KEY, ['chat']));
 
 export function usePanels() {
-    // Current role — derived from tenant features for now.
-    // Future: extract from JWT project roles via Zitadel.
+    // Current role
     const role = computed<UserRole>(() => {
         if (tenant.features.devTools) return 'dev';
         return 'user';
@@ -104,16 +104,19 @@ export function usePanels() {
 
     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 isWorkspaceOpen = computed(() => openPaneIds.value.has('workspace'));
 
     function togglePanel(id: PanelId) {
         const next = new Set(openPanelIds.value);
-        if (next.has(id)) {
-            next.delete(id);
-        } else {
-            next.add(id);
-        }
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
         openPanelIds.value = next;
-        saveOpenPanels(next);
+        saveSet(PANELS_KEY, next);
     }
 
     function isPanelOpen(id: PanelId): boolean {
@@ -125,19 +128,39 @@ export function usePanels() {
         const next = new Set(openPanelIds.value);
         next.delete(id);
         openPanelIds.value = next;
-        saveOpenPanels(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,
+        isWorkspaceOpen,
+        togglePane,
+        isPaneOpen,
+        openPaneIds,
     };
 }
diff --git a/src/views/AgentsView.vue b/src/views/AgentsView.vue
index fcad4df..8b22982 100644
--- a/src/views/AgentsView.vue
+++ b/src/views/AgentsView.vue
@@ -1,5 +1,4 @@
 <template>
-    <PanelShell :hudTree="hudTree" :hudVersion="hudVersion" :connected="connected">
     <div class="agents-view flex flex-col h-full overflow-hidden bg-bg" v-if="isLoggedIn">
       <!-- NO_AGENT_SELECTED or overview mode: show agent picker -->
       <div v-show="showPicker" class="agent-picker">
@@ -24,183 +23,38 @@
           </div>
         </div>
       </div>
-      <div v-show="!showPicker" class="page flex flex-col flex-1 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>
+      <!-- 3-column layout: chat | workspace | debug -->
+      <div v-show="!showPicker" class="pane-layout">
+        <!-- Chat column -->
+        <ChatPane
+            v-if="isChatOpen"
+            ref="chatPaneRef"
+            class="pane-column"
+            :connected="connected"
+            :selectedAgent="selectedAgent"
+            :selectedMode="selectedMode"
+            :allAgents="allAgents"
+            :defaultAgent="defaultAgent || ''"
+            :wsSend="wsSend"
+            :viewActive="viewActive"
+            @hud-update="onHudUpdate"
+        />
 
-                    <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>
+        <!-- Workspace column -->
+        <WorkspacePane
+            v-if="isWorkspaceOpen"
+            class="pane-column"
+        />
 
-                    <!-- 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>
+        <!-- Debug column (stacked panels) -->
+        <DebugColumn
+            v-if="hasDebugColumn"
+            class="pane-column pane-debug"
+            :hudTree="hudState.hudTree"
+            :hudVersion="hudState.hudVersion"
+            :connected="hudState.connected"
+        />
       </div>
     </div>
 
@@ -208,92 +62,33 @@
         <p><LockClosedIcon class="w-5 h-5 inline" /> Not logged in</p>
         <RouterLink to="/login">Sign in →</RouterLink>
     </div>
-    </PanelShell>
 </template>
 
 <script setup lang="ts">
 defineOptions({ name: 'AgentsView' });
-import { ref, watch, nextTick, onMounted, onUnmounted, computed, toRef } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useChatStore } from '../store/chat';
 import { ws, auth, agents } from '../store';
-import { useUI } from '../composables/ui';
-import { useAgentSocket } from '../composables/useAgentSocket';
-import { useMessages } from '../composables/useMessages';
-import { useMessageGrouping } from '../composables/useMessageGrouping';
-import { useInputAutogrow } from '../composables/useInputAutogrow';
-import { useAgentDisplay } from '../composables/useAgentDisplay';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
-import { scrollbarOptions } from '../composables/useScrollbar';
-import { ArrowUpIcon, StopIcon, LockClosedIcon, ChatBubbleBottomCenterTextIcon, PaperClipIcon, MicrophoneIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
-import { useAttachments } from '../composables/useAttachments';
-import { useAudioRecorder } from '../composables/useAudioRecorder';
-import UserMessage from '../components/UserMessage.vue';
-import AssistantMessage from '../components/AssistantMessage.vue';
-import SystemMessage from '../components/SystemMessage.vue';
-import HudControls from '../components/HudControls.vue';
-import PanelShell from '../components/PanelShell.vue';
-import { agentLogo as getAgentLogo } from '../composables/useTheme';
+import { usePanels } from '../composables/usePanels';
+import { LockClosedIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
+import ChatPane from '../components/ChatPane.vue';
+import WorkspacePane from '../components/WorkspacePane.vue';
+import DebugColumn from '../components/DebugColumn.vue';
 
 import router from '../router';
-import { relativeTime } from '../utils/relativeTime';
-import { getApiBase } from '../utils/apiBase';
 
 const agentsRoute = useRoute();
-const chatStore = useChatStore();
 
-// No picker — always show chat.
-const showPicker = computed(() => false);
-// 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);
+// Pane visibility
+const { isChatOpen, isWorkspaceOpen, hasDebugColumn } = usePanels();
 
-// Flat list for template convenience
-const prevMessages = computed(() => prevSessions.value.flatMap(s => s.messages));
-
-async function fetchPreviousSession(loadMore = false) {
-    if (!selectedAgent.value || 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=${selectedAgent.value}&mode=${selectedMode.value}&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: selectedAgent.value,
-                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 { /* silently fail */ }
-    finally { prevLoading.value = false; }
-}
-const { connected, status, send: wsSend, switchAgent: wsSwitchAgent } = ws;
-const { version } = useUI(status);
-const beVersion = ref('');
+// Auth + agents
+const { connected, send: wsSend, switchAgent: wsSwitchAgent } = ws;
 const { isLoggedIn } = auth;
 const { selectedAgent, selectedMode, filteredAgents, defaultAgent, allAgents } = agents;
 
-// Agent picker segments
+// Agent picker
+const showPicker = computed(() => false);
 const SEGMENTS = ['personal', 'common', 'private', 'public'] as const;
 const agentSegments = computed(() =>
     SEGMENTS
@@ -311,7 +106,6 @@ function pickAgent(agentId: string, mode: string) {
     selectedMode.value = mode as 'private' | 'public';
     sessionStorage.setItem('agent', agentId);
     sessionStorage.setItem('agent_mode', mode);
-    // Update URL with query params so showPicker switches to chat
     router.push({ name: 'nyx', query: { agent: agentId, mode } });
     if (ws.connected.value) {
         ws.switchAgent(agentId, mode);
@@ -320,10 +114,7 @@ function pickAgent(agentId: string, mode: string) {
     }
 }
 
-const agentLogo = computed(() => getAgentLogo(selectedAgent.value));
-
-// Auto-select default agent when navigating to /nyx without ?agent= param
-// Watch both query.agent and defaultAgent — defaultAgent arrives from server after connect
+// Auto-select default agent
 watch(
     [() => agentsRoute.query.agent, defaultAgent],
     ([queryAgent, defAgent]) => {
@@ -334,284 +125,50 @@ watch(
     { immediate: true },
 );
 
-const { sending, input, messagesEl, scrollToBottom, scrollIfAtBottom, send: _send, onInputChange, navigateHistory, restoreLastSent } = useMessages(wsSend);
-
-const controlsEl = ref<HTMLElement | null>(null);
-const spacerEl = ref<HTMLElement | null>(null);
-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 (replaces isSwitching hack)
-const isHidden = computed(() => connectionState.value !== 'SYNCED');
-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,
-    selectedAgent,
-    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 to devtools / console
-if (typeof window !== 'undefined') {
-    (window as any).__hudSnapshot = hudSnapshot;
-    (window as any).__toolCallMap = toolCallMapSnapshot;
-}
-
 const viewActive = computed(() => agentsRoute.name === 'nyx');
 
-// --- Scroll logic ---
-// On user send: scroll so user message sits at top of viewport.
-// During streaming: no auto-scroll — user controls their own viewport.
-// On new session (not user send): scroll to bottom.
-
-let userSendInFlight = false;
-
-// Dynamic spacer: just enough to scroll last user msg to viewport top, never more.
-// Recalculated on message changes and viewport resize.
-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;
+// HUD state from ChatPane (for debug panels)
+const hudState = ref({ hudTree: [] as any[], hudVersion: 0, connected: false });
+function onHudUpdate(payload: { hudTree: any[]; hudVersion: number; connected: boolean }) {
+    hudState.value = payload;
 }
 
-// Synchronous spacer recalc — call within rAF for accurate layout measurements.
-// Goal: user can scroll last user msg to top of viewport, but NOT scroll past controls.
-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;
-    // Convert viewport-relative rects to scroll-content positions
-    const vpRect = viewport.getBoundingClientRect();
-    const st = viewport.scrollTop;
-    const msgTop = last.getBoundingClientRect().top - vpRect.top + st;
-    const ctrlBottom = controls.getBoundingClientRect().bottom - vpRect.top + st;
-    // When scrolled so user msg is at top (with 40px breathing room),
-    // controls should sit at viewport bottom:
-    //   scrollTop = msgTop - 40
-    //   visible range = [msgTop-40 .. msgTop-40+vpH]
-    //   need ctrlBottom + spacer = msgTop - 40 + vpH
-    const vpH = viewport.clientHeight;
-    const needed = msgTop - 40 + vpH;
-    const h = Math.max(0, needed - ctrlBottom);
-    spacerHeight.value = h;
-    return h;
-}
-
-// Recalc spacer on a simple interval — reactive watchers proved unreliable across HMR
-let _spacerInterval: ReturnType<typeof setInterval> | null = null;
-onMounted(() => {
-    _spacerInterval = setInterval(recalcSpacerSync, 200);
-    onUnmounted(() => { if (_spacerInterval) clearInterval(_spacerInterval); });
-});
-
-function scrollToUserMsg(smooth = true) {
-    // Ensure spacer is sized BEFORE scrolling.
-    // Double nextTick: first for Vue DOM update, second for OverlayScrollbars.
-    nextTick(() => nextTick(() => {
-        recalcSpacerSync();
-        // Wait one more tick for Vue to apply the spacerHeight change to DOM
-        nextTick(() => {
-            const viewport = getViewport();
-            if (!viewport) return;
-            void viewport.offsetHeight; // force reflow
-            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 (!viewActive.value) return;
-    if (val === 'SYNCED') {
-        if (!prevMessages.value.length) fetchPreviousSession();
-        scrollToBottom();
-    }
-});
-
-// Channel SM: handle agent done
-watch(channelState, (val, prev) => {
-    if (!viewActive.value) 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.', selectedAgent.value);
-        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.', selectedAgent.value);
-    } else if (ch === 'NO_SESSION') {
-        triggerShake();
-    } else {
-        triggerShake();
-    }
-}
-
-// Action handlers that scroll to top for visual feedback
-function onNew() {
-    chatStore.newSession();
-    scrollToBottom(); // after clear, scroll to bottom shows fresh state
-}
-function onConfirmNew() {
-    chatStore.confirmNew();
-    scrollToBottom();
-}
-
-const { inputEl, isShaking, autoGrow, triggerShake } = useInputAutogrow(input);
-const { isAgentRunning } = useAgentDisplay(selectedAgent, defaultAgent, 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 = ''; // reset so same file can be re-selected
-}
-
-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);
-        }
-    }
-}
-
-// Debug: send a known 10x10 red PNG directly
-function sendTestImage() {
-    const TEST_PNG_B64 = 'iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVQYV2P8z8BQz0BhwMgwqpCuCgEAMNwEAVnOp/0AAAAASUVORK5CYII=';
-    const testText = input.value.trim() || 'What color is this small square image? Answer with just the color name.';
-    input.value = testText;
-    // Directly build and send the payload
-    const attachmentPayload = [{ type: 'image', mimeType: 'image/png', content: TEST_PNG_B64, fileName: 'test-red-10x10.png' }];
-    chatStore.truncatedWarning = false;
-    sentMessages.add(testText);
-    userSendInFlight = true;
-    _send(attachmentPayload);
-    scrollToUserMsg();
-}
-
-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 ChatPane state
+const chatPaneRef = ref<InstanceType<typeof ChatPane> | null>(null);
 
 watch([selectedAgent, selectedMode], ([agent, mode], [oldAgent, oldMode]) => {
     if (agent !== oldAgent || mode !== oldMode) {
-        // Connection SM handles visibility via isHidden (no manual isSwitching needed)
         sessionStorage.setItem('agent', agent);
-        lastUsage.value = null;
-        sentMessages.clear();
-        prevSessions.value = [];
-        prevHasMore.value = false;
-        prevSkip.value = 0;
-        chatStore.resetLocalSession();
-        // ws.switchAgent called explicitly by sidebar handleRoomClick
+        chatPaneRef.value?.resetForAgentSwitch();
     }
 });
-
-onMounted(() => {
-    chatStore.setWsSend(wsSend);
-    const unsubscribe = mount();
-    // Fetch previous session if already synced (e.g. HMR reload)
-    if (connectionState.value === 'SYNCED') fetchPreviousSession();
-    // Recalc spacer on viewport resize
-    const viewport = getViewport();
-    let ro: ResizeObserver | null = null;
-    if (viewport) {
-        ro = new ResizeObserver(() => recalcSpacerSync());
-        ro.observe(viewport);
-    }
-    recalcSpacerSync();
-    onUnmounted(() => { unsubscribe(); ro?.disconnect(); });
-});
 </script>
 
 <style scoped>
-/* Hide messages during agent switch to prevent scroll flicker */
-.messages.is-switching { opacity: 0; }
+/* 3-column pane layout */
+.pane-layout {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.pane-column {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    border-left: 1px solid var(--border);
+    overflow: hidden;
+}
+.pane-column:first-child {
+    border-left: none;
+}
+
+/* Debug column: fixed width */
+.pane-debug {
+    flex: 0 0 320px;
+    max-width: 400px;
+}
 
 /* Agent picker (no agent selected) */
 .agent-picker {
@@ -694,369 +251,10 @@ onMounted(() => {
     color: var(--text);
 }
 
-/* Agent selection + header — layout now in Tailwind classes */
+/* Agent selection — layout now in Tailwind classes */
 .default-agent-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0; opacity: 0.6; transition: color 0.15s, opacity 0.15s; }
 .default-agent-btn:hover { opacity: 1; color: var(--text); }
 #agent-select { outline: none; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; padding: 0.2rem 1.5rem 0.2rem 0.7rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; transition: border-color 0.15s; }
 #agent-select:focus { outline: none; box-shadow: none; border-color: var(--focus); }
 #agent-select option { background: var(--bg); color: var(--text); }
-
-
-
-.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>