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

@@ -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
+// Panels + panes
-const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen } = usePanels();
+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;

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>

src/components/DebugColumn.vue

@@ -1,12 +1,5 @@
 <template>
-    <div class="panel-shell" :class="{ 'has-side': hasSidePanels }">
+    <div class="debug-column">
-        <!-- 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"
@@ -27,12 +20,12 @@
             </Suspense>
         </div>
     </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>

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>

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,
+ * Three top-level panes: chat, workspace, debug
- * manages open/closed state persisted to localStorage.
+ * Each pane toggles independently. Debug column contains stacked panels.
  *
  * Roles (future: from Zitadel JWT claims):
- *   user     — end consumer (default)
+ *   user     — end consumer (chat + workspace)
- *   creator  — content creator, agent designer
+ *   creator  — + graph, nodes
- *   operator — monitors agents, runs tests
+ *   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>) {
+function saveSet(key: string, ids: Set<string>) {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
+    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.
+    // Current role
-    // Future: extract from JWT project roles via Zitadel.
     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)) {
+        if (next.has(id)) next.delete(id);
-            next.delete(id);
+        else next.add(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,
     };
 }