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>
This commit is contained in:
Nico
parent
4d4e1e198c
commit
e948caf132
@ -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;
|
||||
|
||||
861
src/components/ChatPane.vue
Normal file
861
src/components/ChatPane.vue
Normal file
@ -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">×</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">♫</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)">×</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>
|
||||
@ -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">×</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">×</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>
|
||||
41
src/components/WorkspacePane.vue
Normal file
41
src/components/WorkspacePane.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user