Compare commits
No commits in common. "f8ef8141f554e084668a20e6d38508f9b4cdeb16" and "323bb0113fec73922d3aaba4d8b650342af0968a" have entirely different histories.
f8ef8141f5
...
323bb0113f
78
package-lock.json
generated
78
package-lock.json
generated
@ -9,8 +9,6 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"cytoscape": "^3.33.1",
|
||||
"cytoscape-cola": "^2.5.1",
|
||||
"marked": "^17.0.4",
|
||||
"overlayscrollbars": "^2.0.0",
|
||||
"overlayscrollbars-vue": "^0.5.9",
|
||||
@ -1561,70 +1559,6 @@
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cytoscape": {
|
||||
"version": "3.33.1",
|
||||
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
|
||||
"integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/cytoscape-cola": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/cytoscape-cola/-/cytoscape-cola-2.5.1.tgz",
|
||||
"integrity": "sha512-4/2S9bW1LvdsEPmxXN1OEAPFPbk7DvCx2c9d+TblkQAAvptGaSgtPWCByTEGgT8UxCxcVqes2aFPO5pzwo7R2w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"webcola": "^3.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"cytoscape": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dispatch": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
|
||||
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-drag": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
|
||||
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-selection": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
|
||||
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
|
||||
"integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
|
||||
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"d3-path": "1"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
|
||||
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
@ -2762,18 +2696,6 @@
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webcola": {
|
||||
"version": "3.4.0",
|
||||
"resolved": "https://registry.npmjs.org/webcola/-/webcola-3.4.0.tgz",
|
||||
"integrity": "sha512-4BiLXjXw3SJHo3Xd+rF+7fyClT6n7I+AR6TkBqyQ4kTsePSAMDLRCXY1f3B/kXJeP9tYn4G1TblxTO+jAt0gaw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "^1.0.3",
|
||||
"d3-drag": "^1.0.4",
|
||||
"d3-shape": "^1.3.5",
|
||||
"d3-timer": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-virtual-modules": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
||||
|
||||
@ -17,8 +17,6 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"cytoscape": "^3.33.1",
|
||||
"cytoscape-cola": "^2.5.1",
|
||||
"marked": "^17.0.4",
|
||||
"overlayscrollbars": "^2.0.0",
|
||||
"overlayscrollbars-vue": "^0.5.9",
|
||||
|
||||
@ -29,10 +29,6 @@
|
||||
<ChatBubbleLeftRightIcon class="w-4 h-4" />
|
||||
<span>nyx</span>
|
||||
</button>
|
||||
<RouterLink v-if="isLoggedIn" to="/tests" class="sidebar-link" :class="{ active: route.name === 'tests' }" @click="collapse">
|
||||
<BeakerIcon class="w-4 h-4" />
|
||||
<span>Tests</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<!-- Spacer -->
|
||||
@ -88,7 +84,6 @@ import {
|
||||
DocumentTextIcon,
|
||||
ShieldCheckIcon,
|
||||
HomeIcon,
|
||||
BeakerIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
|
||||
import { auth } from '../store';
|
||||
@ -102,17 +97,32 @@ const navLogo = computed(() => THEME_LOGOS[theme.value]);
|
||||
|
||||
const { isLoggedIn, currentUser } = auth;
|
||||
|
||||
const isOpen = ref(sessionStorage.getItem('sidebar_open') === 'true');
|
||||
const isMobile = window.innerWidth <= 480;
|
||||
const isLarge = window.innerWidth >= 1024;
|
||||
const isOpen = ref(isMobile ? false : isLarge ? true : localStorage.getItem('sidebar_open') !== 'false');
|
||||
const userMenuOpen = ref(false);
|
||||
|
||||
// Auto-collapse when crossing from lg → md
|
||||
const lgQuery = window.matchMedia('(min-width: 1024px)');
|
||||
lgQuery.addEventListener('change', (e) => {
|
||||
if (e.matches && !isOpen.value) {
|
||||
isOpen.value = true;
|
||||
localStorage.setItem('sidebar_open', 'true');
|
||||
} else if (!e.matches && isOpen.value) {
|
||||
isOpen.value = false;
|
||||
localStorage.setItem('sidebar_open', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value;
|
||||
sessionStorage.setItem('sidebar_open', String(isOpen.value));
|
||||
localStorage.setItem('sidebar_open', String(isOpen.value));
|
||||
}
|
||||
|
||||
function collapse() {
|
||||
if (window.innerWidth >= 1024) return;
|
||||
isOpen.value = false;
|
||||
sessionStorage.setItem('sidebar_open', 'false');
|
||||
localStorage.setItem('sidebar_open', 'false');
|
||||
}
|
||||
|
||||
function goNyx() {
|
||||
|
||||
@ -1,49 +1,13 @@
|
||||
<template>
|
||||
<div v-if="isLoggedIn" class="app-toolbar">
|
||||
<!-- Connection pill -->
|
||||
<button class="toolbar-pill" :class="{ active: connActive }" @click="toggleDropdown('conn')" :title="connLabel || 'Connection'">
|
||||
<button class="toolbar-pill" :class="{ active: connActive }" @click="togglePanel('conn')" :title="connLabel || 'Connection'">
|
||||
<WifiIcon class="w-4 h-4" />
|
||||
<span v-if="connLabel" class="toolbar-pill-label">{{ connLabel }}</span>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-spacer" />
|
||||
|
||||
<!-- Pane toggles -->
|
||||
<button
|
||||
class="toolbar-pill toolbar-pill-icon"
|
||||
:class="{ active: isPaneOpen('chat') }"
|
||||
@click="togglePane('chat')"
|
||||
title="Chat"
|
||||
>
|
||||
<ChatBubbleLeftIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-pill toolbar-pill-icon"
|
||||
:class="{ active: isPaneOpen('dashboard') }"
|
||||
@click="togglePane('dashboard')"
|
||||
title="Display"
|
||||
>
|
||||
<RectangleGroupIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-pill toolbar-pill-icon"
|
||||
:class="{ active: isPaneOpen('files') }"
|
||||
@click="togglePane('files')"
|
||||
title="Files"
|
||||
>
|
||||
<FolderIcon class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
class="toolbar-pill toolbar-pill-icon"
|
||||
:class="{ active: isPaneOpen('artifacts') }"
|
||||
@click="togglePane('artifacts')"
|
||||
title="Konsole"
|
||||
>
|
||||
<SparklesIcon class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div class="toolbar-divider" />
|
||||
|
||||
<!-- Theme pills (icon only) -->
|
||||
<button
|
||||
v-for="t in THEMES"
|
||||
@ -56,24 +20,12 @@
|
||||
<component :is="THEME_ICONS[t]" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- Panel toggles (dev/operator tools) -->
|
||||
<button
|
||||
v-for="panel in availablePanels"
|
||||
:key="panel.id"
|
||||
class="toolbar-pill toolbar-pill-icon"
|
||||
:class="{ active: isPanelOpen(panel.id) }"
|
||||
@click="togglePanelBtn(panel.id)"
|
||||
:title="panel.label"
|
||||
>
|
||||
<component :is="panelIcon(panel.id)" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<!-- Takeover / Capture -->
|
||||
<button
|
||||
v-if="takeoverToken"
|
||||
class="toolbar-pill"
|
||||
:class="{ active: captureActive }"
|
||||
@click="toggleDropdown('takeover')"
|
||||
@click="togglePanel('takeover')"
|
||||
title="Takeover"
|
||||
>
|
||||
<SignalIcon class="w-4 h-4" />
|
||||
@ -85,10 +37,10 @@
|
||||
</button>
|
||||
|
||||
<!-- Panels (dropdown from toolbar) -->
|
||||
<div v-if="openDropdown" class="toolbar-panel-backdrop" @click="openDropdown = null" />
|
||||
<div v-if="openPanel" class="toolbar-panel-backdrop" @click="openPanel = null" />
|
||||
|
||||
<!-- Connection panel -->
|
||||
<div v-if="openDropdown === 'conn'" class="toolbar-panel" style="right: auto; left: 0;">
|
||||
<div v-if="openPanel === 'conn'" class="toolbar-panel" style="right: auto; left: 0;">
|
||||
<div class="toolbar-panel-header">Connection</div>
|
||||
<div class="toolbar-panel-row"><span>HTTP</span><span>{{ chatStore.connectionState }}</span></div>
|
||||
<div class="toolbar-panel-row"><span>Channel</span><span>{{ chatStore.channelState }}</span></div>
|
||||
@ -97,7 +49,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Takeover panel -->
|
||||
<div v-if="openDropdown === 'takeover'" class="toolbar-panel" style="right: 0;">
|
||||
<div v-if="openPanel === 'takeover'" class="toolbar-panel" style="right: 0;">
|
||||
<div class="toolbar-panel-header">Takeover</div>
|
||||
<div class="toolbar-panel-token" @click="copyToken" :title="tokenCopied ? 'Copied!' : 'Click to copy'">
|
||||
<code>{{ takeoverToken }}</code>
|
||||
@ -117,13 +69,12 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'AppToolbar' });
|
||||
import { ref, computed, type Component } from 'vue';
|
||||
import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon, ChatBubbleLeftIcon, RectangleGroupIcon, FolderIcon, SparklesIcon } from '@heroicons/vue/20/solid';
|
||||
import { ref, computed } from 'vue';
|
||||
import { WifiIcon, SignalIcon } from '@heroicons/vue/20/solid';
|
||||
import { THEME_ICONS, THEME_NAMES, useTheme, type Theme } from '../composables/useTheme';
|
||||
import { ws, auth, agents, takeover } from '../store';
|
||||
import { useChatStore } from '../store/chat';
|
||||
import { useUI } from '../composables/ui';
|
||||
import { usePanels, type PanelId, type PaneId } from '../composables/usePanels';
|
||||
|
||||
const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
|
||||
|
||||
@ -132,20 +83,6 @@ const { selectedAgent, selectedMode } = agents;
|
||||
const { theme, setTheme } = useTheme();
|
||||
const chatStore = useChatStore();
|
||||
|
||||
// Panels + panes
|
||||
const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen, togglePane, isPaneOpen } = usePanels();
|
||||
|
||||
const PANEL_ICONS: Record<PanelId, Component> = {
|
||||
graph: CircleStackIcon,
|
||||
trace: QueueListIcon,
|
||||
nodes: CpuChipIcon,
|
||||
awareness: EyeIcon,
|
||||
};
|
||||
|
||||
function panelIcon(id: PanelId): Component {
|
||||
return PANEL_ICONS[id] || CpuChipIcon;
|
||||
}
|
||||
|
||||
// Connection
|
||||
const connLabel = computed(() => {
|
||||
switch (chatStore.connectionState) {
|
||||
@ -180,7 +117,7 @@ function copyToken() {
|
||||
|
||||
function revokeAndClose() {
|
||||
takeover.revoke();
|
||||
openDropdown.value = null;
|
||||
openPanel.value = null;
|
||||
}
|
||||
|
||||
// Version
|
||||
@ -197,11 +134,11 @@ function copyVersionDetails() {
|
||||
setTimeout(() => { versionCopied.value = false; }, 2000);
|
||||
}
|
||||
|
||||
// Toolbar dropdown (conn/takeover panels — distinct from debug panel toggles)
|
||||
const openDropdown = ref<'conn' | 'takeover' | null>(null);
|
||||
// Panel toggle
|
||||
const openPanel = ref<'conn' | 'takeover' | null>(null);
|
||||
|
||||
function toggleDropdown(panel: 'conn' | 'takeover') {
|
||||
openDropdown.value = openDropdown.value === panel ? null : panel;
|
||||
function togglePanel(panel: 'conn' | 'takeover') {
|
||||
openPanel.value = openPanel.value === panel ? null : panel;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -218,14 +155,6 @@ function toggleDropdown(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;
|
||||
|
||||
@ -1,861 +0,0 @@
|
||||
<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 (err) { console.warn('[chat] session history fetch failed:', err); }
|
||||
finally { prevLoading.value = false; }
|
||||
}
|
||||
|
||||
// Messages
|
||||
const { sending, input, messagesEl, scrollToBottom, scrollIfAtBottom, send: _send, onInputChange, navigateHistory, restoreLastSent } = useMessages(props.wsSend);
|
||||
|
||||
const controlsEl = ref<HTMLElement | null>(null);
|
||||
|
||||
const footerHeadline = computed(() => {
|
||||
const msgs = groupedVisibleMsgs.value;
|
||||
const last = msgs[msgs.length - 1];
|
||||
return last?.position === 'footer' ? last : null;
|
||||
});
|
||||
|
||||
const lastRealMsgIdx = computed(() => {
|
||||
const msgs = groupedVisibleMsgs.value;
|
||||
for (let i = msgs.length - 1; i >= 0; i--) {
|
||||
if (msgs[i].type !== 'headline') return i;
|
||||
}
|
||||
return -1;
|
||||
});
|
||||
|
||||
const VISIBLE_PAGE = 50;
|
||||
const visibleCount = ref(VISIBLE_PAGE);
|
||||
|
||||
const { groupedVisibleMsgs, hasMore, loadMore, getFormattedAgentName } = useMessageGrouping(
|
||||
computed(() => chatStore.messages),
|
||||
visibleCount,
|
||||
toRef(props, 'selectedAgent'),
|
||||
toRef(props, 'allAgents'),
|
||||
toRef(chatStore, 'sessionKey'),
|
||||
);
|
||||
|
||||
const sentMessages = new Set<string>();
|
||||
const lastUsage = ref<null | any>(null);
|
||||
const pendingClearRef = ref(false);
|
||||
|
||||
const { mount, lastSystemMsg, hudTree, hudVersion, getToolsForTurn, hudSnapshot, toolCallMapSnapshot, hasActiveStreamingMessage, sessionHistoryComplete } = useAgentSocket(visibleCount, lastUsage, pendingClearRef, sentMessages, restoreLastSent);
|
||||
|
||||
// Expose HUD data to parent for debug panels
|
||||
watch([hudTree, hudVersion, () => props.connected], () => {
|
||||
emit('hud-update', { hudTree: hudTree.value, hudVersion: hudVersion.value, connected: props.connected });
|
||||
}, { immediate: true });
|
||||
|
||||
// Expose to devtools / console
|
||||
if (typeof window !== 'undefined') {
|
||||
(window as any).__hudSnapshot = hudSnapshot;
|
||||
(window as any).__toolCallMap = toolCallMapSnapshot;
|
||||
}
|
||||
|
||||
// --- Scroll logic ---
|
||||
let userSendInFlight = false;
|
||||
const spacerHeight = ref(0);
|
||||
|
||||
function getViewport(): HTMLElement | null {
|
||||
const el = messagesEl.value;
|
||||
if (!el) return null;
|
||||
const root = el.$el || el;
|
||||
return root.querySelector('[data-overlayscrollbars-viewport]') as HTMLElement | null;
|
||||
}
|
||||
|
||||
function recalcSpacerSync(): number {
|
||||
const viewport = getViewport();
|
||||
if (!viewport) return 0;
|
||||
const controls = (controlsEl.value || viewport.querySelector('.msg-controls')) as HTMLElement | null;
|
||||
if (!controls) return 0;
|
||||
const userMsgs = viewport.querySelectorAll('.message.user');
|
||||
const last = userMsgs[userMsgs.length - 1] as HTMLElement;
|
||||
if (!last) return 0;
|
||||
const vpRect = viewport.getBoundingClientRect();
|
||||
const st = viewport.scrollTop;
|
||||
const msgTop = last.getBoundingClientRect().top - vpRect.top + st;
|
||||
const ctrlBottom = controls.getBoundingClientRect().bottom - vpRect.top + st;
|
||||
const vpH = viewport.clientHeight;
|
||||
const needed = msgTop - 40 + vpH;
|
||||
const h = Math.max(0, needed - ctrlBottom);
|
||||
spacerHeight.value = h;
|
||||
return h;
|
||||
}
|
||||
|
||||
let _spacerInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function scrollToUserMsg(smooth = true) {
|
||||
nextTick(() => nextTick(() => {
|
||||
recalcSpacerSync();
|
||||
nextTick(() => {
|
||||
const viewport = getViewport();
|
||||
if (!viewport) return;
|
||||
void viewport.offsetHeight;
|
||||
const userMsgs = viewport.querySelectorAll('.message.user');
|
||||
const last = userMsgs[userMsgs.length - 1] as HTMLElement;
|
||||
if (!last) return;
|
||||
const vpRect = viewport.getBoundingClientRect();
|
||||
const msgRect = last.getBoundingClientRect();
|
||||
const offset = viewport.scrollTop + (msgRect.top - vpRect.top) - 40;
|
||||
viewport.scrollTo({ top: Math.max(0, offset), behavior: smooth ? 'smooth' : 'instant' });
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
// Connection SM: when SYNCED, scroll to bottom and fetch previous session
|
||||
watch(connectionState, (val) => {
|
||||
if (!props.viewActive) return;
|
||||
if (val === 'SYNCED') {
|
||||
if (!prevMessages.value.length) fetchPreviousSession();
|
||||
scrollToBottom();
|
||||
}
|
||||
});
|
||||
|
||||
// Channel SM: handle agent done
|
||||
watch(channelState, (val, prev) => {
|
||||
if (!props.viewActive) return;
|
||||
if (prev === 'AGENT_RUNNING' && (val === 'READY' || val === 'FRESH')) {
|
||||
userSendInFlight = false;
|
||||
}
|
||||
if (val === 'AGENT_RUNNING' && prev !== 'AGENT_RUNNING') {
|
||||
if (!userSendInFlight) {
|
||||
scrollToBottom();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function send() {
|
||||
const content = input.value.trim();
|
||||
const hasAtt = hasAttachments();
|
||||
if (!content && !hasAtt) { triggerShake(); return; }
|
||||
chatStore.truncatedWarning = false;
|
||||
const ch = channelState.value;
|
||||
const conn = connectionState.value;
|
||||
if (conn !== 'SYNCED') {
|
||||
chatStore.pushSystem('Not connected yet -- please wait.', props.selectedAgent);
|
||||
triggerShake();
|
||||
} else if (ch === 'READY' || ch === 'FRESH') {
|
||||
if (content) sentMessages.add(content);
|
||||
userSendInFlight = true;
|
||||
const payload = hasAtt ? toPayload() : undefined;
|
||||
_send(payload);
|
||||
clearAttachments();
|
||||
scrollToUserMsg();
|
||||
} else if (ch === 'AGENT_RUNNING') {
|
||||
chatStore.queuedThought = content;
|
||||
input.value = '';
|
||||
clearAttachments();
|
||||
chatStore.pushSystem('Queued -- will send when agent finishes.', props.selectedAgent);
|
||||
} else if (ch === 'NO_SESSION') {
|
||||
triggerShake();
|
||||
} else {
|
||||
triggerShake();
|
||||
}
|
||||
}
|
||||
|
||||
function onNew() {
|
||||
chatStore.newSession();
|
||||
scrollToBottom();
|
||||
}
|
||||
function onConfirmNew() {
|
||||
chatStore.confirmNew();
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
const { inputEl, isShaking, autoGrow, triggerShake } = useInputAutogrow(input);
|
||||
const { isAgentRunning } = useAgentDisplay(toRef(props, 'selectedAgent'), toRef(props, 'defaultAgent'), toRef(props, 'allAgents'));
|
||||
|
||||
// Attachments
|
||||
const { attachments, addFiles, removeAttachment, clearAttachments, toPayload, hasAttachments } = useAttachments();
|
||||
const fileInputEl = ref<HTMLInputElement | null>(null);
|
||||
const isDragOver = ref(false);
|
||||
|
||||
// Audio recorder
|
||||
const { isRecording, duration, audioLevel, micDenied, startRecording, stopRecording, cancelRecording, formatDuration } = useAudioRecorder();
|
||||
|
||||
async function toggleRecording() {
|
||||
if (isRecording.value) {
|
||||
const file = await stopRecording();
|
||||
if (file) addFiles([file]);
|
||||
} else {
|
||||
await startRecording();
|
||||
}
|
||||
}
|
||||
|
||||
function onFileSelect(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files?.length) addFiles(input.files);
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function onPaste(e: ClipboardEvent) {
|
||||
const items = e.clipboardData?.files;
|
||||
if (items?.length) {
|
||||
const media = Array.from(items).filter(f => f.type.startsWith('image/') || f.type.startsWith('audio/'));
|
||||
if (media.length) {
|
||||
e.preventDefault();
|
||||
addFiles(media);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragOver(e: DragEvent) {
|
||||
if (e.dataTransfer?.types.includes('Files')) isDragOver.value = true;
|
||||
}
|
||||
function onDragLeave() { isDragOver.value = false; }
|
||||
function onDrop(e: DragEvent) {
|
||||
isDragOver.value = false;
|
||||
if (e.dataTransfer?.files.length) addFiles(e.dataTransfer.files);
|
||||
}
|
||||
|
||||
// Agent switch reset — called by parent
|
||||
function resetForAgentSwitch() {
|
||||
lastUsage.value = null;
|
||||
sentMessages.clear();
|
||||
prevSessions.value = [];
|
||||
prevHasMore.value = false;
|
||||
prevSkip.value = 0;
|
||||
chatStore.resetLocalSession();
|
||||
}
|
||||
|
||||
defineExpose({ resetForAgentSwitch });
|
||||
|
||||
onMounted(() => {
|
||||
chatStore.setWsSend(props.wsSend);
|
||||
const unsubscribe = mount();
|
||||
if (connectionState.value === 'SYNCED') fetchPreviousSession();
|
||||
const viewport = getViewport();
|
||||
let ro: ResizeObserver | null = null;
|
||||
if (viewport) {
|
||||
ro = new ResizeObserver(() => recalcSpacerSync());
|
||||
ro.observe(viewport);
|
||||
}
|
||||
recalcSpacerSync();
|
||||
_spacerInterval = setInterval(recalcSpacerSync, 200);
|
||||
onUnmounted(() => {
|
||||
unsubscribe();
|
||||
ro?.disconnect();
|
||||
if (_spacerInterval) clearInterval(_spacerInterval);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hide messages during agent switch to prevent scroll flicker */
|
||||
.messages.is-switching { opacity: 0; }
|
||||
|
||||
.input-toolbar { display: flex; align-items: center; justify-content: flex-end; }
|
||||
.truncated-banner {
|
||||
margin: 0 12px 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(234, 179, 8, 0.12);
|
||||
border: 1px solid rgba(234, 179, 8, 0.35);
|
||||
border-radius: 8px;
|
||||
color: #fbbf24;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.send-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--send-btn-bg, var(--accent));
|
||||
color: var(--send-btn-color, white);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
.send-btn svg { display: block; }
|
||||
.send-btn:hover:not(:disabled) { filter: brightness(1.1); }
|
||||
.send-btn:disabled { opacity: 0.25; cursor: not-allowed; background: var(--muted); }
|
||||
|
||||
/* Controls: right after last message, always nearby */
|
||||
.msg-controls {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* Stop button — subtle, next to send */
|
||||
.stop-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.stop-btn:hover:not(:disabled) { opacity: 1; color: var(--text); background: var(--hover-bg, rgba(255,255,255,0.05)); }
|
||||
.stop-btn:disabled { opacity: 0.2; cursor: not-allowed; }
|
||||
.sm-status-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0 0.1rem 0.75rem; }
|
||||
.sm-dot { width: 6px; height: 6px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
|
||||
.sm-dot.AGENT_RUNNING, .sm-dot.STOP_PENDING { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; animation: pulse 2s infinite; }
|
||||
.sm-dot.HANDOVER_PENDING { background: #f59e0b; }
|
||||
.sm-dot.IDLE { background: #22c55e; }
|
||||
.sm-dot.ERROR { background: #ef4444; }
|
||||
.sm-dot.NO_SESSION { background: #f59e0b; animation: pulse 2s infinite; }
|
||||
|
||||
/* --- Previous sessions (server-fetched) --- */
|
||||
.prev-load-more {
|
||||
display: block;
|
||||
margin: 4px auto 8px;
|
||||
padding: 4px 16px;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s, border-color 0.15s;
|
||||
}
|
||||
.prev-load-more:hover:not(:disabled) { opacity: 1; border-color: var(--accent); }
|
||||
.prev-load-more:disabled { cursor: default; }
|
||||
.prev-session-header {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
padding: 8px 0 4px;
|
||||
user-select: none;
|
||||
}
|
||||
.prev-session-wrapper {
|
||||
opacity: 0.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.session-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.session-divider::before,
|
||||
.session-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
.session-divider-text {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.no-session-center {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.45;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.session-context-badge {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
max-width: 85%;
|
||||
padding: 0.35rem 0.75rem;
|
||||
margin: -0.25rem 0;
|
||||
background: rgba(219, 39, 119, 0.08);
|
||||
border: 1px solid rgba(219, 39, 119, 0.25);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.session-context-text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: rgba(219, 39, 119, 0.7);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sm-status-label { font-weight: 600; color: var(--text-dim); }
|
||||
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
|
||||
|
||||
.load-more-btn {
|
||||
align-self: center;
|
||||
margin-bottom: 0.25rem;
|
||||
background: var(--bg-dim);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Mobile: larger touch targets */
|
||||
@media (max-width: 480px) {
|
||||
.send-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Attachment UI --- */
|
||||
.attach-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
.attach-btn:hover { color: var(--text); }
|
||||
|
||||
.attachment-strip {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 6px 4px 2px;
|
||||
overflow-x: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.attachment-thumb {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.attachment-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.remove-att {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(0,0,0,0.6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
.remove-att:hover { background: rgba(239,68,68,0.8); }
|
||||
|
||||
.input-box.drag-over {
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: -2px;
|
||||
background: rgba(59,130,246,0.05);
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
/* --- Mic button --- */
|
||||
.mic-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 1px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
.mic-btn:hover { color: var(--text); }
|
||||
.mic-btn.recording {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
animation: pulse-mic 1.2s infinite;
|
||||
}
|
||||
@keyframes pulse-mic {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* --- Mic denied hint --- */
|
||||
.mic-denied-hint {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.78rem;
|
||||
color: #e06c75;
|
||||
background: rgba(224, 108, 117, 0.1);
|
||||
border-radius: 8px 8px 0 0;
|
||||
text-align: center;
|
||||
animation: fadeInOut 5s ease-in-out forwards;
|
||||
}
|
||||
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
|
||||
|
||||
/* --- Recording indicator --- */
|
||||
.recording-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rec-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ef4444;
|
||||
flex-shrink: 0;
|
||||
animation: pulse-mic 1s infinite;
|
||||
}
|
||||
.rec-level-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
max-width: 120px;
|
||||
}
|
||||
.rec-level-fill {
|
||||
height: 100%;
|
||||
background: #ef4444;
|
||||
border-radius: 2px;
|
||||
transition: width 0.08s linear;
|
||||
}
|
||||
.rec-time {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #ef4444;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.rec-cancel {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
.rec-cancel:hover { background: rgba(239, 68, 68, 0.3); }
|
||||
|
||||
/* --- Audio attachment thumb --- */
|
||||
.attachment-thumb.audio-thumb {
|
||||
width: auto;
|
||||
min-width: 56px;
|
||||
max-width: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.audio-icon {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.audio-name {
|
||||
font-size: 0.65rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@ -1,111 +0,0 @@
|
||||
<template>
|
||||
<div class="content-layout" :class="direction" ref="containerRef">
|
||||
|
||||
<div v-if="isChatOpen" class="slot slot-chat">
|
||||
<slot name="chat" />
|
||||
</div>
|
||||
|
||||
<div v-if="isDashboardOpen" class="slot slot-dashboard">
|
||||
<slot name="dashboard" />
|
||||
</div>
|
||||
|
||||
<!-- Files + Artifacts share one "thin" wrapper.
|
||||
In row mode: thin is a vertical strip on the right.
|
||||
In col mode: thin is a horizontal bar at the bottom. -->
|
||||
<div v-if="isThinVisible" class="slot slot-thin">
|
||||
<div v-if="isFilesOpen" class="slot slot-files">
|
||||
<slot name="files" />
|
||||
</div>
|
||||
<div v-if="isArtifactsOpen" class="slot slot-artifacts">
|
||||
<slot name="artifacts" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'ContentLayout' });
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { usePanels } from '../composables/usePanels';
|
||||
|
||||
const { isChatOpen, isDashboardOpen, isFilesOpen, isArtifactsOpen } = usePanels();
|
||||
|
||||
const isThinVisible = computed(() => isFilesOpen.value || isArtifactsOpen.value);
|
||||
|
||||
// --- Direction: row when landscape, col when portrait-ish ---
|
||||
const containerRef = ref<HTMLElement | null>(null);
|
||||
const direction = ref<'row' | 'col'>('row');
|
||||
|
||||
let ro: ResizeObserver | null = null;
|
||||
|
||||
function onResize(entries: ResizeObserverEntry[]) {
|
||||
const entry = entries[0];
|
||||
if (!entry) return;
|
||||
const { width, height } = entry.contentRect;
|
||||
// Flip to col when width is not at least 1.5× height
|
||||
direction.value = width >= height * 1.5 ? 'row' : 'col';
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!containerRef.value) return;
|
||||
ro = new ResizeObserver(onResize);
|
||||
ro.observe(containerRef.value);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ro?.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Slots ─────────────────────────────────────────────── */
|
||||
.slot {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Row mode: horizontal distribution ─────────────────── */
|
||||
.content-layout.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.content-layout.row .slot-chat { flex: 40 1 0; border-right: 1px solid var(--border); }
|
||||
.content-layout.row .slot-dashboard { flex: 40 1 0; border-right: 1px solid var(--border); }
|
||||
.content-layout.row .slot-thin { flex: 10 1 0; display: flex; flex-direction: column; }
|
||||
.content-layout.row .slot-files { flex: 1 1 0; border-bottom: 1px solid var(--border); }
|
||||
.content-layout.row .slot-artifacts { flex: 1 1 0; }
|
||||
|
||||
/* Remove trailing border on last visible slot in row */
|
||||
.content-layout.row .slot-thin:last-child,
|
||||
.content-layout.row .slot-dashboard:last-child,
|
||||
.content-layout.row .slot-chat:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* ── Col mode: vertical distribution ───────────────────── */
|
||||
.content-layout.col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.content-layout.col .slot-chat { flex: 40 1 0; border-bottom: 1px solid var(--border); }
|
||||
.content-layout.col .slot-dashboard { flex: 40 1 0; border-bottom: 1px solid var(--border); }
|
||||
.content-layout.col .slot-thin { flex: 10 1 0; display: flex; flex-direction: row; }
|
||||
.content-layout.col .slot-files { flex: 1 1 0; border-right: 1px solid var(--border); }
|
||||
.content-layout.col .slot-artifacts { flex: 1 1 0; }
|
||||
|
||||
/* Remove trailing border on last visible slot in col */
|
||||
.content-layout.col .slot-thin:last-child,
|
||||
.content-layout.col .slot-dashboard:last-child,
|
||||
.content-layout.col .slot-chat:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<div class="debug-column">
|
||||
<div
|
||||
v-for="panel in openSidePanels"
|
||||
:key="panel.id"
|
||||
class="panel-section"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">{{ panel.label }}</span>
|
||||
<button class="panel-close" @click="closePanel(panel.id)" title="Close">×</button>
|
||||
</div>
|
||||
<Suspense>
|
||||
<component
|
||||
:is="resolvedComponents[panel.id]"
|
||||
v-bind="panelProps(panel.id)"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="panel-loading">Loading...</div>
|
||||
</template>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'DebugColumn' });
|
||||
import { shallowRef, watch, defineAsyncComponent, type Component } from 'vue';
|
||||
import { usePanels, type PanelId } from '../composables/usePanels';
|
||||
|
||||
const props = defineProps<{
|
||||
hudTree: any[];
|
||||
hudVersion: number;
|
||||
connected: boolean;
|
||||
}>();
|
||||
|
||||
const { openSidePanels, closePanel } = usePanels();
|
||||
|
||||
// Resolve async components once
|
||||
const resolvedComponents = shallowRef<Record<string, Component>>({});
|
||||
|
||||
watch(openSidePanels, (panels) => {
|
||||
const current = resolvedComponents.value;
|
||||
let changed = false;
|
||||
const updates = { ...current };
|
||||
for (const panel of panels) {
|
||||
if (!updates[panel.id]) {
|
||||
updates[panel.id] = defineAsyncComponent(panel.component);
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
if (changed) resolvedComponents.value = updates;
|
||||
}, { immediate: true });
|
||||
|
||||
function panelProps(id: PanelId): Record<string, any> {
|
||||
switch (id) {
|
||||
case 'graph':
|
||||
return { connected: props.connected, hudTree: props.hudTree, hudVersion: props.hudVersion };
|
||||
case 'trace':
|
||||
return { hudTree: props.hudTree, hudVersion: props.hudVersion };
|
||||
case 'nodes':
|
||||
return { connected: props.connected };
|
||||
case 'awareness':
|
||||
return { connected: props.connected, hudVersion: props.hudVersion };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.debug-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
gap: 1px;
|
||||
background: var(--border);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 120px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.panel-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.panel-close:hover { color: var(--text); }
|
||||
|
||||
.panel-loading {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,214 +0,0 @@
|
||||
<template>
|
||||
<div class="display-pane">
|
||||
|
||||
<div v-if="!displayArtifacts.length" class="display-empty">
|
||||
<span class="display-label">Anzeige</span>
|
||||
<span class="display-hint">Tables, pages and cards appear here</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="display-scroll">
|
||||
<template v-for="art in displayArtifacts" :key="art.id">
|
||||
|
||||
<!-- data_table -->
|
||||
<div v-if="art.type === 'data_table'" class="ws-artifact ws-data-table">
|
||||
<div v-if="art.data.title" class="ws-artifact-header">{{ art.data.title }}</div>
|
||||
<div class="ws-table-wrap">
|
||||
<table class="ws-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in art.data.columns" :key="col">{{ col }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in (art.data.rows || art.data.data || [])" :key="i">
|
||||
<td v-for="col in art.data.columns" :key="col">{{ row[col] ?? '' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div v-if="art.meta?.source" class="ws-artifact-meta">{{ art.meta.source }}</div>
|
||||
</div>
|
||||
|
||||
<!-- entity_detail: single card or list -->
|
||||
<div v-else-if="art.type === 'entity_detail'" class="ws-artifact ws-entity-detail">
|
||||
<div v-if="art.data.title" class="ws-card-title">{{ art.data.title }}</div>
|
||||
<div v-if="art.data.subtitle" class="ws-card-subtitle">{{ art.data.subtitle }}</div>
|
||||
|
||||
<!-- list mode -->
|
||||
<div v-if="art.data.items?.length" class="ws-list">
|
||||
<div v-for="(item, i) in art.data.items" :key="i" class="ws-card-nested">
|
||||
<div v-if="item.title" class="ws-card-title">{{ item.title }}</div>
|
||||
<div v-if="item.fields?.length" class="ws-card-fields">
|
||||
<div v-for="f in item.fields" :key="f.label" class="ws-card-field">
|
||||
<span class="ws-card-key">{{ f.label }}</span>
|
||||
<span class="ws-card-val">{{ f.value ?? '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- single entity fields -->
|
||||
<div v-if="art.data.fields?.length" class="ws-card-fields">
|
||||
<div v-for="f in art.data.fields" :key="f.label" class="ws-card-field">
|
||||
<span class="ws-card-key">{{ f.label }}</span>
|
||||
<span v-if="f.action" class="ws-card-link" @click="sendAction(f.action)">{{ f.value ?? '' }}</span>
|
||||
<span v-else class="ws-card-val">{{ f.value ?? '' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="art.actions?.length" class="ws-card-actions">
|
||||
<button v-for="a in art.actions" :key="a.action" class="ws-btn" @click="sendAction(a.action, a.payload)">{{ a.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- document_page -->
|
||||
<div v-else-if="art.type === 'document_page'" class="ws-artifact ws-document-page">
|
||||
<div v-if="art.data.title" class="ws-doc-title">{{ art.data.title }}</div>
|
||||
<div v-for="(section, i) in (art.data.sections || [])" :key="i" class="ws-doc-section">
|
||||
<div v-if="section.heading" class="ws-doc-heading">{{ section.heading }}</div>
|
||||
<div v-if="section.content" class="ws-doc-content" v-html="renderMd(section.content)" />
|
||||
</div>
|
||||
<div v-if="art.actions?.length" class="ws-card-actions">
|
||||
<button v-for="a in art.actions" :key="a.action" class="ws-btn" @click="sendAction(a.action, a.payload)">{{ a.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'DisplayPane' });
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useChatStore } from '../store/chat';
|
||||
|
||||
const chatStore = useChatStore();
|
||||
const { displayArtifacts } = storeToRefs(chatStore);
|
||||
const { sendAction } = chatStore;
|
||||
|
||||
function renderMd(text: string): string {
|
||||
return text
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
||||
.replace(/`(.+?)`/g, '<code>$1</code>')
|
||||
.replace(/\n/g, '<br>');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.display-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
.display-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.display-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.display-hint { font-size: 0.72rem; text-align: center; max-width: 160px; }
|
||||
|
||||
.display-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ws-artifact {
|
||||
background: var(--panel-bg, var(--bg-dim));
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ws-artifact-header {
|
||||
padding: 8px 12px 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.ws-artifact-meta {
|
||||
padding: 4px 12px 8px;
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.ws-table-wrap { overflow-x: auto; }
|
||||
.ws-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
|
||||
.ws-table th {
|
||||
text-align: left; padding: 6px 10px; font-weight: 600;
|
||||
color: var(--text-dim); border-bottom: 1px solid var(--border); white-space: nowrap;
|
||||
}
|
||||
.ws-table td {
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
.ws-table tr:last-child td { border-bottom: none; }
|
||||
.ws-table tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
|
||||
|
||||
/* Entity */
|
||||
.ws-entity-detail { padding: 12px; }
|
||||
.ws-card-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
|
||||
.ws-card-subtitle { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 8px; }
|
||||
.ws-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.ws-card-nested {
|
||||
background: color-mix(in srgb, var(--border) 30%, transparent);
|
||||
border-radius: 6px; padding: 8px 10px;
|
||||
}
|
||||
.ws-card-fields { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
|
||||
.ws-card-field { display: flex; gap: 8px; font-size: 0.8rem; }
|
||||
.ws-card-key { color: var(--text-dim); flex: 0 0 auto; min-width: 80px; }
|
||||
.ws-card-val { color: var(--text); }
|
||||
.ws-card-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
|
||||
.ws-card-link:hover { opacity: 0.8; }
|
||||
.ws-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
||||
|
||||
/* Document */
|
||||
.ws-document-page { padding: 16px; }
|
||||
.ws-doc-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
|
||||
.ws-doc-section { margin-bottom: 12px; }
|
||||
.ws-doc-heading {
|
||||
font-size: 0.85rem; font-weight: 600; color: var(--text-dim);
|
||||
margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em;
|
||||
}
|
||||
.ws-doc-content { font-size: 0.85rem; color: var(--text); line-height: 1.6; }
|
||||
.ws-doc-content :deep(code) {
|
||||
background: color-mix(in srgb, var(--border) 60%, transparent);
|
||||
border-radius: 3px; padding: 1px 4px; font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Shared button */
|
||||
.ws-btn {
|
||||
padding: 5px 12px;
|
||||
background: var(--bg-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.ws-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
</style>
|
||||
@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div class="files-pane" :class="orientation">
|
||||
<div class="files-bar">
|
||||
<span class="files-label">Files</span>
|
||||
<button class="orient-btn" @click="toggleOrientation" :title="orientation === 'vertical' ? 'Switch to horizontal' : 'Switch to vertical'">
|
||||
<component :is="orientation === 'vertical' ? Bars3Icon : Bars3BottomLeftIcon" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="files-body">
|
||||
<span class="files-hint">file tree</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'FilesPane' });
|
||||
import { ref } from 'vue';
|
||||
import { Bars3Icon, Bars3BottomLeftIcon } from '@heroicons/vue/20/solid';
|
||||
|
||||
const orientation = ref<'vertical' | 'horizontal'>('vertical');
|
||||
function toggleOrientation() {
|
||||
orientation.value = orientation.value === 'vertical' ? 'horizontal' : 'vertical';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.files-pane {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Vertical: bar on top, body below */
|
||||
.files-pane.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
.files-pane.vertical .files-bar {
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
}
|
||||
.files-pane.vertical .files-body {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Horizontal: bar on left, body to the right */
|
||||
.files-pane.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.files-pane.horizontal .files-bar {
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 8px 0;
|
||||
width: 32px;
|
||||
}
|
||||
.files-pane.horizontal .files-body {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.files-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-dim, var(--bg));
|
||||
}
|
||||
|
||||
.files-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
writing-mode: initial;
|
||||
}
|
||||
.files-pane.horizontal .files-label {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.orient-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.12s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.orient-btn:hover { opacity: 1; }
|
||||
|
||||
.files-body {
|
||||
display: flex;
|
||||
opacity: 0.25;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,270 +0,0 @@
|
||||
<template>
|
||||
<div class="konsole-pane" :class="orientation">
|
||||
|
||||
<div class="konsole-bar">
|
||||
<span class="konsole-label">Konsole</span>
|
||||
<button class="orient-btn" @click="toggleOrientation" :title="orientation === 'vertical' ? 'Switch to horizontal' : 'Switch to vertical'">
|
||||
<component :is="orientation === 'vertical' ? Bars3Icon : Bars3BottomLeftIcon" class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="konsole-body">
|
||||
|
||||
<div v-if="!konsoleArtifacts.length" class="konsole-empty">
|
||||
<span class="konsole-hint">Konsole</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="konsole-scroll">
|
||||
<template v-for="art in konsoleArtifacts" :key="art.id">
|
||||
|
||||
<!-- machine -->
|
||||
<div v-if="art.type === 'machine'" class="kw-artifact kw-machine">
|
||||
<div class="kw-machine-header">
|
||||
<span class="kw-machine-name">{{ art.data.machine_id }}</span>
|
||||
<span class="kw-machine-state">{{ art.data.current }}</span>
|
||||
</div>
|
||||
<div v-for="(text, i) in (art.data.content || [])" :key="i" class="kw-machine-content">{{ text }}</div>
|
||||
<div v-if="Object.keys(art.data.stored_data || {}).length" class="kw-machine-data">
|
||||
<span v-for="(v, k) in art.data.stored_data" :key="k" class="kw-machine-datum">{{ k }}={{ v }}</span>
|
||||
</div>
|
||||
<div v-if="art.actions?.length" class="kw-actions">
|
||||
<button
|
||||
v-for="a in art.actions"
|
||||
:key="a.action"
|
||||
class="kw-btn"
|
||||
@click="sendAction(a.action)"
|
||||
>{{ a.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- action_bar -->
|
||||
<div v-else-if="art.type === 'action_bar'" class="kw-artifact kw-action-bar">
|
||||
<button
|
||||
v-for="a in art.actions"
|
||||
:key="a.action"
|
||||
class="kw-btn"
|
||||
@click="sendAction(a.action, a.payload)"
|
||||
>{{ a.label }}</button>
|
||||
</div>
|
||||
|
||||
<!-- status -->
|
||||
<div v-else-if="art.type === 'status'" class="kw-artifact kw-status" :class="'kw-dt-' + (art.data.display_type || 'text')">
|
||||
<!-- progress bar -->
|
||||
<template v-if="art.data.display_type === 'progress'">
|
||||
<span class="kw-label">{{ art.data.label }}</span>
|
||||
<div class="kw-bar"><div class="kw-fill" :style="{ width: clamp(art.data.value) + '%' }" /></div>
|
||||
<span class="kw-pct">{{ clamp(art.data.value) }}%</span>
|
||||
</template>
|
||||
<!-- info -->
|
||||
<template v-else-if="art.data.display_type === 'info'">
|
||||
<span class="kw-icon">ℹ</span>
|
||||
<span class="kw-label">{{ art.data.label }}</span>
|
||||
</template>
|
||||
<!-- text / default -->
|
||||
<template v-else>
|
||||
<span class="kw-label">{{ art.data.label }}</span>
|
||||
<span v-if="art.data.value" class="kw-value">{{ art.data.value }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ name: 'KonsolePane' });
|
||||
import { ref } from 'vue';
|
||||
import { Bars3Icon, Bars3BottomLeftIcon } from '@heroicons/vue/20/solid';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useChatStore } from '../store/chat';
|
||||
|
||||
const chatStore = useChatStore();
|
||||
const { konsoleArtifacts } = storeToRefs(chatStore);
|
||||
const { sendAction } = chatStore;
|
||||
|
||||
const orientation = ref<'vertical' | 'horizontal'>('vertical');
|
||||
function toggleOrientation() {
|
||||
orientation.value = orientation.value === 'vertical' ? 'horizontal' : 'vertical';
|
||||
}
|
||||
|
||||
function clamp(v: any): number {
|
||||
return Math.min(100, Math.max(0, Number(v) || 0));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.konsole-pane {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* Vertical: bar on top */
|
||||
.konsole-pane.vertical { flex-direction: column; }
|
||||
.konsole-pane.vertical .konsole-bar {
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 8px;
|
||||
height: 32px;
|
||||
}
|
||||
.konsole-pane.vertical .konsole-body { flex: 1; overflow-y: auto; }
|
||||
|
||||
/* Horizontal: bar on left */
|
||||
.konsole-pane.horizontal { flex-direction: row; }
|
||||
.konsole-pane.horizontal .konsole-bar {
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 8px 0;
|
||||
width: 32px;
|
||||
}
|
||||
.konsole-pane.horizontal .konsole-body { flex: 1; overflow-y: auto; }
|
||||
|
||||
.konsole-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
background: var(--bg-dim, var(--bg));
|
||||
}
|
||||
|
||||
.konsole-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.konsole-pane.horizontal .konsole-label {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.orient-btn {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 22px; height: 22px;
|
||||
border: none; background: none; color: var(--text-dim);
|
||||
cursor: pointer; border-radius: 4px;
|
||||
opacity: 0.5; transition: opacity 0.12s; flex-shrink: 0;
|
||||
}
|
||||
.orient-btn:hover { opacity: 1; }
|
||||
|
||||
.konsole-body { display: flex; flex-direction: column; }
|
||||
|
||||
.konsole-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.25;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.konsole-scroll {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Artifact base */
|
||||
.kw-artifact {
|
||||
background: var(--panel-bg, var(--bg-dim));
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Machine */
|
||||
.kw-machine { padding: 10px; }
|
||||
.kw-machine-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.kw-machine-name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-dim);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.kw-machine-state {
|
||||
font-size: 0.72rem;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.kw-machine-content {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text);
|
||||
padding: 2px 0;
|
||||
}
|
||||
.kw-machine-data {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.kw-machine-datum {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
background: color-mix(in srgb, var(--border) 40%, transparent);
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Action bar */
|
||||
.kw-action-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Status */
|
||||
.kw-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.kw-label { color: var(--text-dim); flex: 0 0 auto; }
|
||||
.kw-value { color: var(--text); font-weight: 500; }
|
||||
.kw-icon { font-size: 0.85rem; }
|
||||
.kw-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: color-mix(in srgb, var(--border) 60%, transparent);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.kw-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
.kw-pct { color: var(--text-dim); font-size: 0.75rem; flex: 0 0 auto; }
|
||||
|
||||
/* Actions */
|
||||
.kw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
|
||||
.kw-btn {
|
||||
padding: 5px 12px;
|
||||
background: var(--bg-dim);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
.kw-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
</style>
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="panel-body">
|
||||
<div v-if="!stateData" class="panel-empty">No state yet</div>
|
||||
<template v-else>
|
||||
<div class="state-row">
|
||||
<span class="state-label">Status</span>
|
||||
<span class="state-val">{{ stateData.status }}</span>
|
||||
</div>
|
||||
<div class="state-row">
|
||||
<span class="state-label">History</span>
|
||||
<span class="state-val">{{ stateData.history_len }} msgs</span>
|
||||
</div>
|
||||
<div class="state-row">
|
||||
<span class="state-label">Transport</span>
|
||||
<span class="state-val" :class="connected ? 'val-ok' : 'val-off'">{{ connected ? 'connected' : 'disconnected' }}</span>
|
||||
</div>
|
||||
<div v-if="stateData.memorizer" class="state-section">
|
||||
<div class="state-section-title">Memorizer</div>
|
||||
<div v-for="(v, k) in stateData.memorizer" :key="k" class="state-row">
|
||||
<span class="state-label">{{ k }}</span>
|
||||
<span class="state-val">{{ typeof v === 'object' ? JSON.stringify(v) : v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { getApiBase } from '../../utils/apiBase';
|
||||
|
||||
const props = defineProps<{
|
||||
connected: boolean;
|
||||
hudVersion: number;
|
||||
}>();
|
||||
|
||||
const stateData = ref<any>(null);
|
||||
|
||||
function authHeaders(): Record<string, string> {
|
||||
const token = localStorage.getItem('nyx_session');
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
}
|
||||
|
||||
async function fetchState() {
|
||||
try {
|
||||
const res = await fetch(`${getApiBase()}/api/state`, { headers: authHeaders() });
|
||||
if (res.ok) stateData.value = await res.json();
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
watch(() => props.connected, (c) => { if (c) fetchState(); }, { immediate: true });
|
||||
watch(() => props.hudVersion, () => fetchState());
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel-body {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.panel-empty {
|
||||
padding: 1.5rem 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.state-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 2px 0;
|
||||
gap: 8px;
|
||||
}
|
||||
.state-label { color: var(--text-dim); flex-shrink: 0; }
|
||||
.state-val {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
.val-ok { color: #22c55e; }
|
||||
.val-off { color: #ef4444; }
|
||||
.state-section { margin-top: 8px; }
|
||||
.state-section-title {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -1,380 +0,0 @@
|
||||
<template>
|
||||
<div class="graph-panel" ref="panelEl">
|
||||
<div v-if="!graphData" class="panel-empty">No graph</div>
|
||||
<div v-show="graphData" class="graph-container" ref="containerEl"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import cytoscape from 'cytoscape';
|
||||
import cola from 'cytoscape-cola';
|
||||
import { getApiBase } from '../../utils/apiBase';
|
||||
|
||||
// Register cola layout once
|
||||
cytoscape.use(cola);
|
||||
|
||||
const props = defineProps<{
|
||||
connected: boolean;
|
||||
hudTree: any[];
|
||||
hudVersion: number;
|
||||
}>();
|
||||
|
||||
const panelEl = ref<HTMLElement | null>(null);
|
||||
const containerEl = ref<HTMLElement | null>(null);
|
||||
const graphData = ref<any>(null);
|
||||
|
||||
let cy: cytoscape.Core | null = null;
|
||||
let physicsLayout: any = null;
|
||||
|
||||
// ── Node colors (ported from cog-frontend app.js) ───────────────────────────
|
||||
|
||||
const NODE_COLORS: Record<string, string> = {
|
||||
user: '#444', input: '#f59e0b', sensor: '#3b82f6',
|
||||
director: '#a855f7', pa: '#a855f7', pa_v1: '#a855f7',
|
||||
thinker: '#f97316', interpreter: '#06b6d4',
|
||||
expert_eras: '#ef4444', expert_plankiste: '#ef4444',
|
||||
output: '#10b981', ui: '#10b981',
|
||||
memorizer: '#a855f7', s3_audit: '#ef4444',
|
||||
frame_engine: '#6366f1', runtime: '#6366f1',
|
||||
};
|
||||
|
||||
// ── Node weights for Cola physics ────────────────────────────────────────────
|
||||
|
||||
const NODE_WEIGHTS: Record<string, number> = {
|
||||
pa: 80, pa_v1: 80, thinker: 80, director: 80,
|
||||
input: 50, output: 50, memorizer: 40,
|
||||
ui: 30, sensor: 20, interpreter: 40,
|
||||
expert_eras: 60, expert_plankiste: 60,
|
||||
};
|
||||
|
||||
function authHeaders(): Record<string, string> {
|
||||
const token = localStorage.getItem('nyx_session');
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
}
|
||||
|
||||
async function fetchGraph() {
|
||||
try {
|
||||
const res = await fetch(`${getApiBase()}/api/graph/active`, { headers: authHeaders() });
|
||||
if (res.ok) {
|
||||
graphData.value = await res.json();
|
||||
await nextTick();
|
||||
waitForContainerAndInit();
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
/** Wait until container has real dimensions (flex layout settled), then init */
|
||||
function waitForContainerAndInit() {
|
||||
if (!containerEl.value || !graphData.value?.cytoscape) return;
|
||||
const rect = containerEl.value.getBoundingClientRect();
|
||||
if (rect.width > 10 && rect.height > 10) {
|
||||
initCytoscape();
|
||||
return;
|
||||
}
|
||||
// Container not laid out yet — use a one-shot ResizeObserver
|
||||
const obs = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (entry && entry.contentRect.width > 10 && entry.contentRect.height > 10) {
|
||||
obs.disconnect();
|
||||
initCytoscape();
|
||||
}
|
||||
});
|
||||
obs.observe(containerEl.value);
|
||||
}
|
||||
|
||||
function initCytoscape() {
|
||||
if (!containerEl.value || !graphData.value?.cytoscape) return;
|
||||
|
||||
// Destroy previous instance
|
||||
if (cy) { stopPhysics(); cy.destroy(); cy = null; }
|
||||
|
||||
const cyData = graphData.value.cytoscape;
|
||||
|
||||
// Filter edges: remove any that reference non-existent nodes (graph may define
|
||||
// edges to nodes like 'runtime' / 'frame_engine' that aren't in the cytoscape export)
|
||||
const nodeIds = new Set(cyData.nodes.map((n: any) => n.data.id));
|
||||
const validEdges = cyData.edges.filter((e: any) =>
|
||||
nodeIds.has(e.data.source) && nodeIds.has(e.data.target)
|
||||
);
|
||||
|
||||
try {
|
||||
cy = cytoscape({
|
||||
container: containerEl.value,
|
||||
elements: [...cyData.nodes, ...validEdges],
|
||||
style: [
|
||||
// ── Nodes ────────────────────────────────────────────────────────
|
||||
{ selector: 'node', style: {
|
||||
'label': 'data(label)',
|
||||
'text-valign': 'center',
|
||||
'text-halign': 'center',
|
||||
'font-size': '14px',
|
||||
'min-zoomed-font-size': 8,
|
||||
'font-family': 'system-ui, sans-serif',
|
||||
'font-weight': 700,
|
||||
'color': '#aaa',
|
||||
'background-color': '#181818',
|
||||
'border-width': 1,
|
||||
'border-opacity': 0.3,
|
||||
'border-color': '#444',
|
||||
'width': 44,
|
||||
'height': 44,
|
||||
'transition-property': 'background-color, border-color, width, height',
|
||||
'transition-duration': '0.3s',
|
||||
} as any },
|
||||
// Per-node colors
|
||||
...Object.entries(NODE_COLORS).map(([id, color]) => ({
|
||||
selector: `#${id}`,
|
||||
style: { 'border-color': color, 'color': color } as any,
|
||||
})),
|
||||
// Smaller nodes
|
||||
{ selector: '#sensor', style: { 'width': 36, 'height': 36, 'font-size': '12px' } as any },
|
||||
// Active node (pulsed)
|
||||
{ selector: 'node.active', style: {
|
||||
'background-color': '#333',
|
||||
'border-width': 3,
|
||||
'width': 52,
|
||||
'height': 52,
|
||||
} as any },
|
||||
// ── Edges ────────────────────────────────────────────────────────
|
||||
{ selector: 'edge', style: {
|
||||
'width': 1.5,
|
||||
'line-color': '#333',
|
||||
'target-arrow-color': '#333',
|
||||
'target-arrow-shape': 'triangle',
|
||||
'arrow-scale': 0.7,
|
||||
'curve-style': 'bezier',
|
||||
'transition-property': 'line-color, target-arrow-color, width',
|
||||
'transition-duration': '0.3s',
|
||||
} as any },
|
||||
// Context edges (dotted)
|
||||
{ selector: 'edge[edge_type="context"]', style: {
|
||||
'line-style': 'dotted', 'line-color': '#1a1a2e', 'width': 1,
|
||||
} as any },
|
||||
// State edges (dashed, dim)
|
||||
{ selector: 'edge[edge_type="state"]', style: {
|
||||
'line-style': 'dashed', 'line-dash-pattern': [4, 4] as any, 'line-color': '#1a1a2e', 'width': 0.8,
|
||||
} as any },
|
||||
// Reflex edges (dashed)
|
||||
{ selector: 'edge[condition="reflex"]', style: {
|
||||
'line-style': 'dashed', 'line-dash-pattern': [4, 4] as any, 'line-color': '#2a2a2a',
|
||||
} as any },
|
||||
// Active edge (flashed)
|
||||
{ selector: 'edge.active', style: {
|
||||
'line-color': '#888', 'target-arrow-color': '#888', 'width': 2.5,
|
||||
} as any },
|
||||
],
|
||||
layout: { name: 'random', padding: 20 },
|
||||
userZoomingEnabled: true,
|
||||
userPanningEnabled: true,
|
||||
wheelSensitivity: 0.3,
|
||||
boxSelectionEnabled: false,
|
||||
autoungrabify: false,
|
||||
selectionType: 'single',
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('[graph] cytoscape init failed:', err instanceof Error ? err.message : err);
|
||||
return;
|
||||
}
|
||||
|
||||
// Right-click passthrough
|
||||
containerEl.value.addEventListener('contextmenu', (e: Event) => e.stopPropagation(), true);
|
||||
|
||||
// Resize after container is laid out (async component may not have final dims yet)
|
||||
setTimeout(() => {
|
||||
if (cy) {
|
||||
cy.resize();
|
||||
cy.fit(undefined, 20);
|
||||
startPhysics();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Font size stays readable at any zoom
|
||||
cy.on('zoom', () => {
|
||||
if (!cy) return;
|
||||
const z = cy.zoom();
|
||||
const fontSize = Math.round(12 / z);
|
||||
cy.nodes().style('font-size', fontSize + 'px');
|
||||
});
|
||||
|
||||
startPhysics();
|
||||
}
|
||||
|
||||
// ── Cola physics ─────────────────────────────────────────────────────────────
|
||||
|
||||
function startPhysics() {
|
||||
if (!cy) return;
|
||||
stopPhysics();
|
||||
try {
|
||||
const rect = containerEl.value?.getBoundingClientRect();
|
||||
if (!rect || rect.width < 10) return;
|
||||
physicsLayout = cy.layout({
|
||||
name: 'cola',
|
||||
animate: true,
|
||||
infinite: true,
|
||||
fit: false,
|
||||
nodeSpacing: 25,
|
||||
nodeWeight: (n: any) => NODE_WEIGHTS[n.id()] || 30,
|
||||
edgeElasticity: (e: any) => {
|
||||
const edgeType = e.data('edge_type');
|
||||
if (edgeType === 'context') return 0.1;
|
||||
if (edgeType === 'state') return 0.05;
|
||||
if (e.data('condition') === 'reflex') return 0.2;
|
||||
return 0.6;
|
||||
},
|
||||
boundingBox: { x1: 0, y1: 0, w: rect.width, h: rect.height },
|
||||
} as any);
|
||||
physicsLayout.run();
|
||||
} catch (e) {
|
||||
console.warn('[graph] physics failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function stopPhysics() {
|
||||
if (physicsLayout) {
|
||||
try { physicsLayout.stop(); } catch { /* ignore */ }
|
||||
physicsLayout = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Live HUD animations ──────────────────────────────────────────────────────
|
||||
|
||||
function pulseNode(id: string) {
|
||||
if (!cy) return;
|
||||
const node = cy.getElementById(id);
|
||||
if (!node.length) return;
|
||||
node.addClass('active');
|
||||
setTimeout(() => node.removeClass('active'), 1500);
|
||||
}
|
||||
|
||||
function flashEdge(sourceId: string, targetId: string) {
|
||||
if (!cy) return;
|
||||
const edge = cy.edges().filter((e: any) =>
|
||||
e.data('source') === sourceId && e.data('target') === targetId
|
||||
);
|
||||
if (!edge.length) return;
|
||||
edge.addClass('active');
|
||||
setTimeout(() => edge.removeClass('active'), 1000);
|
||||
}
|
||||
|
||||
function animateHudEvent(event: string, node?: string) {
|
||||
if (!cy) return;
|
||||
// Pulse source node if it exists
|
||||
if (node && cy.getElementById(node).length) pulseNode(node);
|
||||
|
||||
switch (event) {
|
||||
case 'perceived':
|
||||
pulseNode('input');
|
||||
break;
|
||||
case 'routed':
|
||||
pulseNode('pa'); pulseNode('pa_v1');
|
||||
break;
|
||||
case 'reflex_path':
|
||||
pulseNode('input'); flashEdge('input', 'output');
|
||||
break;
|
||||
case 'streaming':
|
||||
if (node === 'output') pulseNode('output');
|
||||
break;
|
||||
case 'decided':
|
||||
pulseNode('ui');
|
||||
break;
|
||||
case 'updated':
|
||||
pulseNode('memorizer'); flashEdge('output', 'memorizer');
|
||||
break;
|
||||
case 'tick':
|
||||
pulseNode('sensor');
|
||||
break;
|
||||
case 'thinking':
|
||||
if (node) pulseNode(node);
|
||||
break;
|
||||
case 'tool_call':
|
||||
pulseNode(node || 'expert_eras');
|
||||
break;
|
||||
case 'tool_result':
|
||||
if (cy.getElementById('interpreter').length) pulseNode('interpreter');
|
||||
break;
|
||||
case 'interpreted':
|
||||
pulseNode('interpreter'); flashEdge('interpreter', 'output');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Watch hudVersion for new HUD events → animate
|
||||
let lastProcessedVersion = 0;
|
||||
|
||||
watch(() => props.hudVersion, (ver) => {
|
||||
if (ver <= lastProcessedVersion) return;
|
||||
lastProcessedVersion = ver;
|
||||
// Animate from the latest hudTree root node
|
||||
const latest = props.hudTree[0];
|
||||
if (!latest) return;
|
||||
// node_activity events from assay have the node name in the label
|
||||
if (latest.type === 'node_activity' && latest.label) {
|
||||
const parts = latest.label.split(':');
|
||||
const nodeName = parts[0]?.trim();
|
||||
const eventName = parts[1]?.trim().split(' ')[0];
|
||||
if (nodeName && eventName) animateHudEvent(eventName, nodeName);
|
||||
}
|
||||
});
|
||||
|
||||
// ── Lifecycle ────────────────────────────────────────────────────────────────
|
||||
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
watch(() => props.connected, (c) => { if (c) fetchGraph(); }, { immediate: true });
|
||||
|
||||
onMounted(() => {
|
||||
// Observe the parent panel (not the absolute container) for resize events
|
||||
const target = panelEl.value;
|
||||
if (target) {
|
||||
resizeObserver = new ResizeObserver((entries) => {
|
||||
const entry = entries[0];
|
||||
if (!entry || entry.contentRect.width < 10 || entry.contentRect.height < 10) return;
|
||||
// Update container pixel dimensions to match parent
|
||||
if (containerEl.value) {
|
||||
containerEl.value.style.width = entry.contentRect.width + 'px';
|
||||
containerEl.value.style.height = entry.contentRect.height + 'px';
|
||||
}
|
||||
if (cy) {
|
||||
cy.resize();
|
||||
cy.fit(undefined, 20);
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(target);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPhysics();
|
||||
if (cy) { cy.destroy(); cy = null; }
|
||||
if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; }
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.graph-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-empty {
|
||||
padding: 1.5rem 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.graph-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #0d0d0d;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* Tailwind v4 preflight adds transition-property (incl. opacity) to *.
|
||||
Cytoscape's dynamically-created canvases inherit this, which can
|
||||
prevent them from becoming visible. Reset here. */
|
||||
.graph-container :deep(canvas) {
|
||||
opacity: 1 !important;
|
||||
transition-property: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,140 +0,0 @@
|
||||
<template>
|
||||
<div class="panel-body">
|
||||
<div v-if="!graphData" class="panel-empty">No graph</div>
|
||||
<div v-else class="nodes-view">
|
||||
<div class="graph-header">
|
||||
<span class="graph-title">{{ graphData.name }}</span>
|
||||
<span v-if="graphData.description" class="graph-desc">{{ graphData.description }}</span>
|
||||
</div>
|
||||
<div v-for="(impl, nodeId) in graphData.nodes" :key="nodeId" class="node-card">
|
||||
<div class="node-header">
|
||||
<span class="node-id">{{ nodeId }}</span>
|
||||
<span class="node-impl">{{ impl }}</span>
|
||||
<span v-if="graphData.node_details?.[nodeId]?.model" class="node-model">{{ graphData.node_details[nodeId].model }}</span>
|
||||
</div>
|
||||
<div v-if="nodeEdges(nodeId as string).length" class="node-edges">
|
||||
<div v-for="(edge, i) in nodeEdges(nodeId as string)" :key="i" class="node-edge">
|
||||
<span class="edge-arrow">{{'\u2192'}}</span>
|
||||
<span class="edge-target">{{ edge.to }}</span>
|
||||
<span v-if="edge.carries" class="edge-tag">{{ edge.carries }}</span>
|
||||
<span v-if="edge.condition" class="edge-cond">if {{ edge.condition }}</span>
|
||||
<span v-if="edge.type === 'context'" class="edge-type-tag ctx">ctx</span>
|
||||
<span v-if="edge.type === 'state'" class="edge-type-tag state">state</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { getApiBase } from '../../utils/apiBase';
|
||||
|
||||
const props = defineProps<{
|
||||
connected: boolean;
|
||||
}>();
|
||||
|
||||
const graphData = ref<any>(null);
|
||||
|
||||
function authHeaders(): Record<string, string> {
|
||||
const token = localStorage.getItem('nyx_session');
|
||||
return token ? { Authorization: `Bearer ${token}` } : {};
|
||||
}
|
||||
|
||||
async function fetchGraph() {
|
||||
try {
|
||||
const res = await fetch(`${getApiBase()}/api/graph/active`, { headers: authHeaders() });
|
||||
if (res.ok) graphData.value = await res.json();
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function nodeEdges(nodeId: string): any[] {
|
||||
if (!graphData.value?.edges) return [];
|
||||
return graphData.value.edges.filter((e: any) => {
|
||||
if (typeof e.from === 'string') return e.from === nodeId;
|
||||
return false;
|
||||
}).map((e: any) => {
|
||||
const target = Array.isArray(e.to) ? e.to.join(', ') : e.to;
|
||||
return { ...e, to: target };
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => props.connected, (c) => { if (c) fetchGraph(); }, { immediate: true });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel-body {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.panel-empty {
|
||||
padding: 1.5rem 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.graph-header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.graph-title { font-weight: 600; font-size: 0.8rem; }
|
||||
.graph-desc { display: block; color: var(--text-dim); font-size: 0.7rem; margin-top: 2px; }
|
||||
|
||||
.node-card {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.node-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.node-id { font-weight: 600; font-size: 0.75rem; }
|
||||
.node-impl { color: var(--text-dim); font-size: 0.65rem; }
|
||||
.node-model { color: var(--accent); font-size: 0.6rem; font-family: var(--font-mono); }
|
||||
|
||||
.node-edges {
|
||||
margin-top: 3px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.node-edge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 1px 0;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.edge-arrow { color: var(--text-dim); font-size: 0.6rem; }
|
||||
.edge-target { font-weight: 500; }
|
||||
.edge-tag {
|
||||
background: color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
color: var(--accent);
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
.edge-cond { color: var(--text-dim); font-style: italic; font-size: 0.55rem; }
|
||||
.edge-type-tag {
|
||||
padding: 0 3px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.5rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.edge-type-tag.ctx {
|
||||
background: color-mix(in srgb, #3b82f6 15%, transparent);
|
||||
color: #3b82f6;
|
||||
}
|
||||
.edge-type-tag.state {
|
||||
background: color-mix(in srgb, #a855f7 15%, transparent);
|
||||
color: #a855f7;
|
||||
}
|
||||
</style>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<div class="panel-body">
|
||||
<div v-if="!hudTree.length" class="panel-empty">No trace data</div>
|
||||
<div v-else class="trace-tree">
|
||||
<div v-for="node in hudTree" :key="node.id" class="trace-node" :class="[node.state, node.type]">
|
||||
<div class="trace-row" @click="toggleNode(node.id)">
|
||||
<ChevronRightIcon v-if="node.children.length" class="w-3 h-3 chevron" :class="{ open: expandedNodes.has(node.id) }" />
|
||||
<span v-else class="chevron-spacer" />
|
||||
<span class="trace-dot" :class="node.state" />
|
||||
<span class="trace-label">{{ node.label }}</span>
|
||||
<span v-if="node.durationMs" class="trace-ms">{{ node.durationMs }}ms</span>
|
||||
</div>
|
||||
<div v-if="expandedNodes.has(node.id) && node.children.length" class="trace-children">
|
||||
<div v-for="child in node.children" :key="child.id" class="trace-node" :class="[child.state, child.type]">
|
||||
<div class="trace-row">
|
||||
<span class="chevron-spacer" />
|
||||
<span class="trace-dot" :class="child.state" />
|
||||
<span class="trace-label">{{ child.label }}</span>
|
||||
<span v-if="child.durationMs" class="trace-ms">{{ child.durationMs }}ms</span>
|
||||
</div>
|
||||
<div v-if="child.args || child.result" class="trace-detail">
|
||||
<pre v-if="child.args" class="trace-json">{{ JSON.stringify(child.args, null, 2) }}</pre>
|
||||
<pre v-if="child.result" class="trace-json trace-result">{{ JSON.stringify(child.result, null, 2) }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { ChevronRightIcon } from '@heroicons/vue/20/solid';
|
||||
|
||||
defineProps<{
|
||||
hudTree: any[];
|
||||
hudVersion: number;
|
||||
}>();
|
||||
|
||||
const expandedNodes = reactive(new Set<string>());
|
||||
|
||||
function toggleNode(id: string) {
|
||||
if (expandedNodes.has(id)) expandedNodes.delete(id);
|
||||
else expandedNodes.add(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.panel-body {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.panel-empty {
|
||||
padding: 1.5rem 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.trace-tree { font-size: 0.75rem; }
|
||||
.trace-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.trace-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
|
||||
.chevron {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.15s;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.chevron.open { transform: rotate(90deg); }
|
||||
.chevron-spacer { width: 12px; flex-shrink: 0; }
|
||||
.trace-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.trace-dot.running { background: var(--accent); animation: pulse 1s infinite; }
|
||||
.trace-dot.done { background: #22c55e; }
|
||||
.trace-dot.error { background: #ef4444; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
.trace-label {
|
||||
flex: 1; min-width: 0;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.trace-ms {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.65rem;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.trace-children { padding-left: 16px; }
|
||||
.trace-detail { padding: 4px 4px 4px 28px; }
|
||||
.trace-json {
|
||||
font-size: 0.65rem;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-dim);
|
||||
background: var(--panel-bg);
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
margin: 2px 0;
|
||||
overflow-x: auto;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.trace-result { border-left: 2px solid #22c55e; }
|
||||
</style>
|
||||
@ -6,7 +6,7 @@ import { useChatStore } from '../store/chat';
|
||||
export interface HudNode {
|
||||
id: string
|
||||
correlationId?: string
|
||||
type: 'turn' | 'tool' | 'think' | 'received' | 'node_activity'
|
||||
type: 'turn' | 'tool' | 'think' | 'received'
|
||||
subtype?: string
|
||||
state: 'running' | 'done' | 'error'
|
||||
label: string
|
||||
@ -223,101 +223,6 @@ export function useSessionHistory(
|
||||
addHudNode(node);
|
||||
break;
|
||||
}
|
||||
|
||||
// ── assay frame_trace: complete pipeline summary → turn-like root node ──
|
||||
case 'frame_trace': {
|
||||
const trace = event.trace;
|
||||
if (!trace) break;
|
||||
const turnNode = makeNode({
|
||||
type: 'turn', state: 'done',
|
||||
label: `${trace.path || 'pipeline'} — ${trace.total_frames}F ${trace.total_ms?.toFixed(0)}ms`,
|
||||
startedAt: ts - (trace.total_ms || 0),
|
||||
endedAt: ts,
|
||||
durationMs: Math.round(trace.total_ms || 0),
|
||||
replay,
|
||||
});
|
||||
if (trace.frames) {
|
||||
for (const f of trace.frames) {
|
||||
turnNode.children.push(makeNode({
|
||||
type: 'node_activity', state: f.error ? 'error' : 'done',
|
||||
label: `${f.node}${f.route ? ' → ' + f.route : ''}`,
|
||||
durationMs: Math.round(f.duration_ms || 0),
|
||||
startedAt: ts - (f.duration_ms || 0),
|
||||
endedAt: ts,
|
||||
args: f.input ? { input: f.input } : undefined,
|
||||
result: f.output ? { output: f.output } : undefined,
|
||||
replay,
|
||||
}));
|
||||
}
|
||||
}
|
||||
addHudNode(turnNode);
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
// ── assay node-level events (thinking, perceived, streaming, etc.) ──
|
||||
// These have {node, event} but no correlationId or turn lifecycle.
|
||||
// Create flat activity nodes so the trace panel shows something.
|
||||
if (event.node && event.event) {
|
||||
const nodeName = event.node;
|
||||
const evtName = event.event;
|
||||
|
||||
// Skip context events (too verbose — LLM prompts)
|
||||
if (evtName === 'context') break;
|
||||
|
||||
// Running events: thinking, streaming
|
||||
const isRunning = evtName === 'thinking' || evtName === 'streaming';
|
||||
const label = `${nodeName}: ${evtName}${event.detail ? ' — ' + event.detail : ''}`;
|
||||
|
||||
if (isRunning) {
|
||||
// Create running node, track by composite key
|
||||
const key = `assay:${nodeName}`;
|
||||
const node = makeNode({
|
||||
type: 'node_activity', state: 'running',
|
||||
label,
|
||||
correlationId: key,
|
||||
startedAt: ts, replay,
|
||||
});
|
||||
hudPending.set(key, node);
|
||||
addHudNode(node);
|
||||
} else {
|
||||
// Completion events: perceived, routed, done, decided, updated, tick, started
|
||||
// Try to close the running node for this assay node
|
||||
const key = `assay:${nodeName}`;
|
||||
const running = hudPending.get(key);
|
||||
if (running) {
|
||||
running.state = 'done';
|
||||
running.endedAt = ts;
|
||||
running.durationMs = ts - running.startedAt;
|
||||
// Enrich label with result info
|
||||
if (evtName === 'perceived' && event.analysis) {
|
||||
running.label = `${nodeName}: ${event.analysis.intent || evtName}/${event.analysis.complexity || ''}`;
|
||||
running.result = event.analysis;
|
||||
} else if (evtName === 'routed' && event.expert !== undefined) {
|
||||
running.label = `${nodeName}: → ${event.expert || 'direct'}`;
|
||||
running.result = { expert: event.expert, job: event.job };
|
||||
} else if (evtName === 'updated' && event.state) {
|
||||
running.label = `${nodeName}: updated`;
|
||||
running.result = event.state;
|
||||
}
|
||||
hudPending.delete(key);
|
||||
triggerRef(hudTree); hudVersion.value++;
|
||||
} else if (evtName !== 'tick' && evtName !== 'started') {
|
||||
// No running node to close — create standalone done node
|
||||
const doneNode = makeNode({
|
||||
type: 'node_activity', state: 'done',
|
||||
label,
|
||||
startedAt: ts, endedAt: ts, replay,
|
||||
});
|
||||
if (event.analysis) doneNode.result = event.analysis;
|
||||
if (event.state) doneNode.result = event.state;
|
||||
addHudNode(doneNode);
|
||||
}
|
||||
// tick and started are ambient — skip if no running node
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -56,12 +56,14 @@ export function useAgentSocket(
|
||||
if (data.session_id) chatStore.sessionKey = data.session_id;
|
||||
},
|
||||
|
||||
// assay UI controls (legacy flat list) — kept for compat, ignored for now
|
||||
controls(_data) {},
|
||||
// assay UI controls — store for later rendering
|
||||
controls(_data) {
|
||||
// TODO: render controls in workspace panel
|
||||
},
|
||||
|
||||
// assay artifacts — split into Display (pages/tables) and Konsole (machines/controls)
|
||||
artifacts(data) {
|
||||
chatStore.setArtifacts(data.artifacts || []);
|
||||
// assay artifacts — store for later rendering
|
||||
artifacts(_data) {
|
||||
// TODO: render artifacts in workspace panel
|
||||
},
|
||||
|
||||
// assay session cleared
|
||||
|
||||
@ -1,170 +0,0 @@
|
||||
/**
|
||||
* usePanels.ts — Pane + panel system
|
||||
*
|
||||
* Three top-level panes: chat, workspace, debug
|
||||
* Each pane toggles independently. Debug column contains stacked panels.
|
||||
*
|
||||
* Roles (future: from Zitadel JWT claims):
|
||||
* user — end consumer (chat + workspace)
|
||||
* creator — + graph, nodes
|
||||
* operator — + trace, awareness
|
||||
* dev — full access to all debug tools
|
||||
*/
|
||||
|
||||
import { ref, computed, type Component } from 'vue';
|
||||
import tenant from '../tenant';
|
||||
|
||||
// Top-level panes (columns)
|
||||
export type PaneId = 'chat' | 'dashboard' | 'files' | 'artifacts';
|
||||
// Debug panels (stacked inside the debug column)
|
||||
export type PanelId = 'graph' | 'trace' | 'nodes' | 'awareness';
|
||||
export type PanelLocation = 'side' | 'bottom';
|
||||
export type UserRole = 'user' | 'creator' | 'operator' | 'dev';
|
||||
|
||||
export interface PanelDef {
|
||||
id: PanelId;
|
||||
label: string;
|
||||
location: PanelLocation;
|
||||
component: () => Promise<{ default: Component }>;
|
||||
roles: UserRole[];
|
||||
}
|
||||
|
||||
const PANELS: PanelDef[] = [
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
location: 'side',
|
||||
component: () => import('../components/panels/GraphPanel.vue'),
|
||||
roles: ['creator', 'operator', 'dev'],
|
||||
},
|
||||
{
|
||||
id: 'trace',
|
||||
label: 'Trace',
|
||||
location: 'side',
|
||||
component: () => import('../components/panels/TracePanel.vue'),
|
||||
roles: ['operator', 'dev'],
|
||||
},
|
||||
{
|
||||
id: 'nodes',
|
||||
label: 'Nodes',
|
||||
location: 'side',
|
||||
component: () => import('../components/panels/NodesPanel.vue'),
|
||||
roles: ['creator', 'operator', 'dev'],
|
||||
},
|
||||
{
|
||||
id: 'awareness',
|
||||
label: 'State',
|
||||
location: 'side',
|
||||
component: () => import('../components/panels/AwarenessPanel.vue'),
|
||||
roles: ['operator', 'dev'],
|
||||
},
|
||||
];
|
||||
|
||||
const PANELS_KEY = 'nyx_panels_open';
|
||||
const PANES_KEY = 'nyx_panes_open';
|
||||
|
||||
function loadSet<T extends string>(key: string, defaults: T[]): Set<T> {
|
||||
try {
|
||||
const stored = localStorage.getItem(key);
|
||||
if (stored) return new Set(JSON.parse(stored));
|
||||
} catch { /* ignore */ }
|
||||
return new Set(defaults);
|
||||
}
|
||||
|
||||
function saveSet(key: string, ids: Set<string>) {
|
||||
localStorage.setItem(key, JSON.stringify([...ids]));
|
||||
}
|
||||
|
||||
// Module-level state (survives HMR)
|
||||
const openPanelIds = ref<Set<PanelId>>(loadSet<PanelId>(PANELS_KEY, []));
|
||||
const openPaneIds = ref<Set<PaneId>>(loadSet<PaneId>(PANES_KEY, ['chat', 'dashboard']));
|
||||
|
||||
export function usePanels() {
|
||||
// Current role
|
||||
const role = computed<UserRole>(() => {
|
||||
if (tenant.features.devTools) return 'dev';
|
||||
return 'user';
|
||||
});
|
||||
|
||||
const availablePanels = computed(() =>
|
||||
PANELS.filter(p => p.roles.includes(role.value))
|
||||
);
|
||||
|
||||
const openSidePanels = computed(() =>
|
||||
availablePanels.value.filter(p =>
|
||||
p.location === 'side' && openPanelIds.value.has(p.id)
|
||||
)
|
||||
);
|
||||
|
||||
const openBottomPanels = computed(() =>
|
||||
availablePanels.value.filter(p =>
|
||||
p.location === 'bottom' && openPanelIds.value.has(p.id)
|
||||
)
|
||||
);
|
||||
|
||||
const hasSidePanels = computed(() => openSidePanels.value.length > 0);
|
||||
const hasBottomPanels = computed(() => openBottomPanels.value.length > 0);
|
||||
// Any debug panel open = debug column visible
|
||||
const hasDebugColumn = hasSidePanels;
|
||||
|
||||
// Pane state
|
||||
const isChatOpen = computed(() => openPaneIds.value.has('chat'));
|
||||
const isDashboardOpen = computed(() => openPaneIds.value.has('dashboard'));
|
||||
const isFilesOpen = computed(() => openPaneIds.value.has('files'));
|
||||
const isArtifactsOpen = computed(() => openPaneIds.value.has('artifacts'));
|
||||
|
||||
function togglePanel(id: PanelId) {
|
||||
const next = new Set(openPanelIds.value);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
openPanelIds.value = next;
|
||||
saveSet(PANELS_KEY, next);
|
||||
}
|
||||
|
||||
function isPanelOpen(id: PanelId): boolean {
|
||||
return openPanelIds.value.has(id);
|
||||
}
|
||||
|
||||
function closePanel(id: PanelId) {
|
||||
if (!openPanelIds.value.has(id)) return;
|
||||
const next = new Set(openPanelIds.value);
|
||||
next.delete(id);
|
||||
openPanelIds.value = next;
|
||||
saveSet(PANELS_KEY, next);
|
||||
}
|
||||
|
||||
function togglePane(id: PaneId) {
|
||||
const next = new Set(openPaneIds.value);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
openPaneIds.value = next;
|
||||
saveSet(PANES_KEY, next);
|
||||
}
|
||||
|
||||
function isPaneOpen(id: PaneId): boolean {
|
||||
return openPaneIds.value.has(id);
|
||||
}
|
||||
|
||||
return {
|
||||
role,
|
||||
// Debug panels
|
||||
availablePanels,
|
||||
openSidePanels,
|
||||
openBottomPanels,
|
||||
hasSidePanels,
|
||||
hasBottomPanels,
|
||||
hasDebugColumn,
|
||||
togglePanel,
|
||||
isPanelOpen,
|
||||
closePanel,
|
||||
openPanelIds,
|
||||
// Top-level panes
|
||||
isChatOpen,
|
||||
isDashboardOpen,
|
||||
isFilesOpen,
|
||||
isArtifactsOpen,
|
||||
togglePane,
|
||||
isPaneOpen,
|
||||
openPaneIds,
|
||||
};
|
||||
}
|
||||
@ -162,36 +162,11 @@ export function useTakeover(wsSend: (msg: any) => void) {
|
||||
}
|
||||
|
||||
function screenshot() {
|
||||
function paneState(sel: string) {
|
||||
const el = document.querySelector(sel);
|
||||
if (!el) return null;
|
||||
const rect = (el as HTMLElement).getBoundingClientRect();
|
||||
return {
|
||||
visible: rect.width > 0 && rect.height > 0,
|
||||
w: Math.round(rect.width),
|
||||
h: Math.round(rect.height),
|
||||
text: (el as HTMLElement).innerText?.slice(0, 300) ?? '',
|
||||
};
|
||||
}
|
||||
return {
|
||||
url: window.location.href,
|
||||
hash: window.location.hash,
|
||||
url: window.location.hash,
|
||||
title: document.title,
|
||||
viewport: { w: window.innerWidth, h: window.innerHeight },
|
||||
panes: {
|
||||
chat: paneState('.chat-pane'),
|
||||
display: paneState('.display-pane'),
|
||||
konsole: paneState('.konsole-pane'),
|
||||
files: paneState('.files-pane'),
|
||||
},
|
||||
artifacts: (() => {
|
||||
const arts = document.querySelectorAll('.ws-artifact, .kw-artifact');
|
||||
return Array.from(arts).slice(0, 20).map(a => ({
|
||||
cls: (a as HTMLElement).className,
|
||||
text: (a as HTMLElement).innerText?.slice(0, 80),
|
||||
}));
|
||||
})(),
|
||||
messages: document.querySelectorAll('.message').length,
|
||||
body: document.body.innerText.slice(0, 2000),
|
||||
};
|
||||
}
|
||||
|
||||
@ -265,9 +240,12 @@ export function useTakeover(wsSend: (msg: any) => void) {
|
||||
return;
|
||||
}
|
||||
|
||||
// eval — requires user confirmation
|
||||
if (cmd === 'eval') {
|
||||
const js = args.js;
|
||||
if (!js) { sendResult({ type: 'dev_cmd_result', cmdId, error: 'js required' }); return; }
|
||||
const ok = window.confirm(`Dev takeover eval request:\n\n${js.slice(0, 500)}\n\nAllow?`);
|
||||
if (!ok) { sendResult({ type: 'dev_cmd_result', cmdId, error: 'rejected by user' }); return; }
|
||||
try {
|
||||
const result = new Function('return (' + js + ')')();
|
||||
const serialized = result instanceof Element
|
||||
|
||||
@ -106,27 +106,13 @@ async function _startHealthStream(): Promise<void> {
|
||||
_dispatch({ type: 'connection_state', state: 'SYNCED' });
|
||||
}
|
||||
|
||||
let sseBuf = '';
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
sseBuf += decoder.decode(value, { stream: true });
|
||||
// Parse SSE events from buffer
|
||||
const parts = sseBuf.split('\n\n');
|
||||
sseBuf = parts.pop()!; // keep incomplete
|
||||
for (const block of parts) {
|
||||
let eventType = '';
|
||||
let data = '';
|
||||
for (const line of block.split('\n')) {
|
||||
if (line.startsWith('event: ')) eventType = line.slice(7);
|
||||
else if (line.startsWith('data: ')) data = line.slice(6);
|
||||
}
|
||||
if (eventType === 'heartbeat') {
|
||||
connected.value = true;
|
||||
status.value = 'Connected';
|
||||
} else if (eventType === 'debug_cmd' && data) {
|
||||
try { _handleDebugCmd(JSON.parse(data)); } catch { /* ignore */ }
|
||||
}
|
||||
const text = decoder.decode(value, { stream: true });
|
||||
if (text.includes('heartbeat')) {
|
||||
connected.value = true;
|
||||
status.value = 'Connected';
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
@ -145,31 +131,6 @@ async function _startHealthStream(): Promise<void> {
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle a debug command received via SSE health-stream.
|
||||
*/
|
||||
function _handleDebugCmd(cmd: { cmd_id: string; cmd: string; args: any }): void {
|
||||
if (!_takeover) return;
|
||||
const base = getApiBase();
|
||||
const token = getToken();
|
||||
_takeover.dispatch(cmd.cmd_id, cmd.cmd, cmd.args, async (resultMsg: any) => {
|
||||
try {
|
||||
await fetch(`${base}/api/debug/result`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
cmd_id: resultMsg.cmdId,
|
||||
result: resultMsg.result,
|
||||
error: resultMsg.error,
|
||||
}),
|
||||
});
|
||||
} catch { /* ignore */ }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect: fetch or create session via GET /api/session, then mark connected.
|
||||
*/
|
||||
|
||||
@ -32,11 +32,6 @@ import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
app.use(pinia);
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
|
||||
if (import.meta.env.DEV) {
|
||||
(window as any).__pinia = pinia;
|
||||
}
|
||||
|
||||
@ -16,25 +16,9 @@ export interface FinanceData {
|
||||
pricing: { prompt: number, completion: number };
|
||||
}
|
||||
|
||||
// Artifact types that belong to each pane
|
||||
const DISPLAY_TYPES = new Set(['data_table', 'document_page', 'entity_detail']);
|
||||
const KONSOLE_TYPES = new Set(['machine', 'action_bar', 'status']);
|
||||
|
||||
export const useChatStore = defineStore('chat', () => {
|
||||
// --- State ---
|
||||
const messages = ref<any[]>([]);
|
||||
|
||||
// --- Artifacts ---
|
||||
const artifacts = ref<any[]>([]);
|
||||
const displayArtifacts = computed(() => artifacts.value.filter(a => DISPLAY_TYPES.has(a.type)));
|
||||
const konsoleArtifacts = computed(() => artifacts.value.filter(a => KONSOLE_TYPES.has(a.type)));
|
||||
|
||||
function setArtifacts(arts: any[]) {
|
||||
artifacts.value = arts;
|
||||
}
|
||||
function clearArtifacts() {
|
||||
artifacts.value = [];
|
||||
}
|
||||
// Two-SM architecture: channel (shared) + connection (per-user)
|
||||
const channelState = ref<ChannelState>('NO_SESSION');
|
||||
const connectionState = ref<ConnectionState>('CONNECTING');
|
||||
@ -82,11 +66,6 @@ export const useChatStore = defineStore('chat', () => {
|
||||
let _wsSend: ((payload: any) => void) | null = null;
|
||||
function setWsSend(fn: (payload: any) => void) { _wsSend = fn; }
|
||||
|
||||
// Artifact action dispatch — sends {type:'action', action, data} over WS
|
||||
function sendAction(action: string, data: any = {}) {
|
||||
_wsSend?.({ type: 'action', action, data });
|
||||
}
|
||||
|
||||
// Session actions (called from HudControls / HudRow)
|
||||
function newSession() {
|
||||
stashMessages();
|
||||
@ -222,7 +201,6 @@ export const useChatStore = defineStore('chat', () => {
|
||||
messages.value = [];
|
||||
sessionTotalTokens.value = null;
|
||||
finance.value = null;
|
||||
artifacts.value = [];
|
||||
resetStreamingState();
|
||||
}
|
||||
|
||||
@ -456,16 +434,10 @@ export const useChatStore = defineStore('chat', () => {
|
||||
handoverPending,
|
||||
isRunning,
|
||||
setWsSend,
|
||||
sendAction,
|
||||
newSession,
|
||||
handover,
|
||||
stop,
|
||||
confirmNew,
|
||||
stay,
|
||||
artifacts,
|
||||
displayArtifacts,
|
||||
konsoleArtifacts,
|
||||
setArtifacts,
|
||||
clearArtifacts,
|
||||
};
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,324 +0,0 @@
|
||||
<template>
|
||||
<div class="tests-view">
|
||||
<div class="tests-header">
|
||||
<div class="tests-header-left">
|
||||
<h2>Test Results</h2>
|
||||
<div v-if="startedAt" class="tests-timestamps">
|
||||
<span :title="startedAt">Started {{ relativeTime(startedAt) }}</span>
|
||||
<span v-if="updatedAt && updatedAt !== startedAt" :title="updatedAt"> · Updated {{ relativeTime(updatedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tests-meta">
|
||||
<span :class="['status-badge', overallStatus]">{{ overallStatus }}</span>
|
||||
<span class="summary">{{ passedCount }}/{{ totalCount }} passed</span>
|
||||
<span v-if="totalDuration" class="duration">{{ (totalDuration / 1000).toFixed(1) }}s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="results.length === 0" class="tests-empty">
|
||||
No test results yet. Run <code>bash infra/test-run.sh</code> to start.
|
||||
</div>
|
||||
|
||||
<div v-else class="tests-list">
|
||||
<div
|
||||
v-for="r in displayResults"
|
||||
:key="r.test"
|
||||
:class="['test-row', r.status]"
|
||||
@click="toggleExpand(r.test)"
|
||||
>
|
||||
<span class="test-icon">
|
||||
<span v-if="r.status === 'pass'" class="icon-pass">✓</span>
|
||||
<span v-else-if="r.status === 'fail' || r.status === 'error'" class="icon-fail">✗</span>
|
||||
<span v-else-if="r.status === 'running'" class="icon-running">●</span>
|
||||
<span v-else class="icon-pending">○</span>
|
||||
</span>
|
||||
<span class="test-suite">{{ r.suite }}</span>
|
||||
<span class="test-name">{{ r.test }}</span>
|
||||
<span v-if="r.stats && r.stats.runs > 1" class="test-stats">
|
||||
<span class="stat">×{{ r.stats.runs }}</span>
|
||||
<span class="stat">p50 {{ r.stats.p50_ms }}ms</span>
|
||||
<span class="stat">p95 {{ r.stats.p95_ms }}ms</span>
|
||||
<span class="stat">{{ r.stats.pass_rate }}%</span>
|
||||
</span>
|
||||
<span v-else class="test-duration">{{ r.duration_ms ? r.duration_ms + 'ms' : '' }}</span>
|
||||
<span :class="['test-status', r.status]">{{ r.status }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Expanded error detail -->
|
||||
<div
|
||||
v-for="r in displayResults.filter(r => expanded.has(r.test) && r.error)"
|
||||
:key="r.test + '-error'"
|
||||
class="test-error"
|
||||
>
|
||||
<pre>{{ r.error }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { getApiBase } from '../utils/apiBase';
|
||||
import { relativeTime } from '../utils/relativeTime';
|
||||
|
||||
interface TestStats {
|
||||
runs: number;
|
||||
passed: number;
|
||||
pass_rate: number;
|
||||
min_ms: number;
|
||||
avg_ms: number;
|
||||
p50_ms: number;
|
||||
p95_ms: number;
|
||||
max_ms: number;
|
||||
}
|
||||
|
||||
interface TestResult {
|
||||
run_id: string;
|
||||
test: string;
|
||||
suite: string;
|
||||
status: 'pass' | 'fail' | 'error' | 'running' | 'pending';
|
||||
duration_ms: number;
|
||||
error: string;
|
||||
stats?: TestStats;
|
||||
}
|
||||
|
||||
const results = ref<TestResult[]>([]);
|
||||
const runId = ref('');
|
||||
const startedAt = ref('');
|
||||
const updatedAt = ref('');
|
||||
const expanded = ref<Set<string>>(new Set());
|
||||
let eventSource: EventSource | null = null;
|
||||
|
||||
|
||||
const displayResults = computed(() =>
|
||||
results.value.filter(r => r.test !== '__summary__')
|
||||
);
|
||||
|
||||
const passedCount = computed(() => displayResults.value.filter(r => r.status === 'pass').length);
|
||||
const failedCount = computed(() => displayResults.value.filter(r => r.status === 'fail' || r.status === 'error').length);
|
||||
const totalCount = computed(() => displayResults.value.length);
|
||||
const totalDuration = computed(() => displayResults.value.reduce((sum, r) => sum + (r.duration_ms || 0), 0));
|
||||
|
||||
const overallStatus = computed(() => {
|
||||
if (displayResults.value.some(r => r.status === 'running')) return 'running';
|
||||
if (failedCount.value > 0) return 'fail';
|
||||
if (passedCount.value > 0) return 'pass';
|
||||
return 'pending';
|
||||
});
|
||||
|
||||
function toggleExpand(test: string) {
|
||||
if (expanded.value.has(test)) {
|
||||
expanded.value.delete(test);
|
||||
} else {
|
||||
expanded.value.add(test);
|
||||
}
|
||||
}
|
||||
|
||||
function handleResult(data: any) {
|
||||
if (data.run_id && data.run_id !== runId.value) {
|
||||
// New run — clear old
|
||||
results.value = [];
|
||||
runId.value = data.run_id;
|
||||
startedAt.value = data.ts || new Date().toISOString();
|
||||
}
|
||||
updatedAt.value = data.ts || new Date().toISOString();
|
||||
|
||||
// Update or append
|
||||
const idx = results.value.findIndex(r => r.test === data.test && r.suite === data.suite);
|
||||
if (idx >= 0) {
|
||||
results.value[idx] = data;
|
||||
} else {
|
||||
results.value.push(data);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const base = getApiBase();
|
||||
|
||||
// First fetch snapshot
|
||||
fetch(`${base}/api/test-results/latest`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.run_id) runId.value = data.run_id;
|
||||
if (data.results) {
|
||||
results.value = data.results;
|
||||
// Extract timestamps from results
|
||||
const timestamps = data.results.map((r: any) => r.ts).filter(Boolean).sort();
|
||||
if (timestamps.length) {
|
||||
startedAt.value = timestamps[0];
|
||||
updatedAt.value = timestamps[timestamps.length - 1];
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
// Then connect SSE for live updates
|
||||
eventSource = new EventSource(`${base}/api/test-results`);
|
||||
eventSource.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.run_id) handleResult(data);
|
||||
} catch {}
|
||||
};
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tests-view {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tests-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tests-header-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.tests-header h2 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tests-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.tests-timestamps {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-dim);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.run-id {
|
||||
font-family: monospace;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.status-badge.pass { background: #166534; color: #bbf7d0; }
|
||||
.status-badge.fail { background: #991b1b; color: #fecaca; }
|
||||
.status-badge.running { background: #854d0e; color: #fef08a; }
|
||||
.status-badge.pending { background: var(--panel-bg); color: var(--text-dim); }
|
||||
|
||||
.tests-empty {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.tests-empty code {
|
||||
background: var(--panel-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tests-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.test-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: var(--panel-bg);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.test-row:hover { background: color-mix(in srgb, var(--panel-bg) 80%, var(--text) 5%); }
|
||||
|
||||
.test-icon { width: 20px; text-align: center; flex-shrink: 0; }
|
||||
.icon-pass { color: #22c55e; }
|
||||
.icon-fail { color: #ef4444; }
|
||||
.icon-running { color: #eab308; animation: pulse 1s infinite; }
|
||||
.icon-pending { color: var(--text-dim); }
|
||||
|
||||
@keyframes pulse { 50% { opacity: 0.4; } }
|
||||
|
||||
.test-suite {
|
||||
color: var(--text-dim);
|
||||
min-width: 80px;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.test-name { flex: 1; }
|
||||
|
||||
.test-duration {
|
||||
font-family: monospace;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.75rem;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.test-status {
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.test-status.pass { color: #22c55e; }
|
||||
.test-status.fail, .test-status.error { color: #ef4444; }
|
||||
.test-status.running { color: #eab308; }
|
||||
|
||||
.test-error {
|
||||
margin: 0 0 2px 30px;
|
||||
padding: 8px 12px;
|
||||
background: #1a0000;
|
||||
border-left: 3px solid #ef4444;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
.test-error pre {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: #fca5a5;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.test-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.test-stats .stat {
|
||||
background: color-mix(in srgb, var(--panel-bg) 60%, var(--text) 8%);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
@ -13,13 +13,16 @@ export default defineConfig({
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/ws': {
|
||||
target: 'ws://localhost:8000',
|
||||
target: 'wss://assay.loop42.de',
|
||||
ws: true,
|
||||
rewriteWsOrigin: true,
|
||||
secure: true,
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/api': {
|
||||
target: 'http://localhost:8000',
|
||||
target: 'https://assay.loop42.de',
|
||||
changeOrigin: true,
|
||||
secure: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user