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",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@heroicons/vue": "^2.2.0",
|
"@heroicons/vue": "^2.2.0",
|
||||||
"cytoscape": "^3.33.1",
|
|
||||||
"cytoscape-cola": "^2.5.1",
|
|
||||||
"marked": "^17.0.4",
|
"marked": "^17.0.4",
|
||||||
"overlayscrollbars": "^2.0.0",
|
"overlayscrollbars": "^2.0.0",
|
||||||
"overlayscrollbars-vue": "^0.5.9",
|
"overlayscrollbars-vue": "^0.5.9",
|
||||||
@ -1561,70 +1559,6 @@
|
|||||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/detect-libc": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||||
@ -2762,18 +2696,6 @@
|
|||||||
"typescript": ">=5.0.0"
|
"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": {
|
"node_modules/webpack-virtual-modules": {
|
||||||
"version": "0.6.2",
|
"version": "0.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
|
||||||
|
|||||||
@ -17,8 +17,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@heroicons/vue": "^2.2.0",
|
"@heroicons/vue": "^2.2.0",
|
||||||
"cytoscape": "^3.33.1",
|
|
||||||
"cytoscape-cola": "^2.5.1",
|
|
||||||
"marked": "^17.0.4",
|
"marked": "^17.0.4",
|
||||||
"overlayscrollbars": "^2.0.0",
|
"overlayscrollbars": "^2.0.0",
|
||||||
"overlayscrollbars-vue": "^0.5.9",
|
"overlayscrollbars-vue": "^0.5.9",
|
||||||
|
|||||||
@ -29,10 +29,6 @@
|
|||||||
<ChatBubbleLeftRightIcon class="w-4 h-4" />
|
<ChatBubbleLeftRightIcon class="w-4 h-4" />
|
||||||
<span>nyx</span>
|
<span>nyx</span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Spacer -->
|
<!-- Spacer -->
|
||||||
@ -88,7 +84,6 @@ import {
|
|||||||
DocumentTextIcon,
|
DocumentTextIcon,
|
||||||
ShieldCheckIcon,
|
ShieldCheckIcon,
|
||||||
HomeIcon,
|
HomeIcon,
|
||||||
BeakerIcon,
|
|
||||||
} from '@heroicons/vue/20/solid';
|
} from '@heroicons/vue/20/solid';
|
||||||
import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
|
import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
|
||||||
import { auth } from '../store';
|
import { auth } from '../store';
|
||||||
@ -102,17 +97,32 @@ const navLogo = computed(() => THEME_LOGOS[theme.value]);
|
|||||||
|
|
||||||
const { isLoggedIn, currentUser } = auth;
|
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);
|
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() {
|
function toggle() {
|
||||||
isOpen.value = !isOpen.value;
|
isOpen.value = !isOpen.value;
|
||||||
sessionStorage.setItem('sidebar_open', String(isOpen.value));
|
localStorage.setItem('sidebar_open', String(isOpen.value));
|
||||||
}
|
}
|
||||||
|
|
||||||
function collapse() {
|
function collapse() {
|
||||||
|
if (window.innerWidth >= 1024) return;
|
||||||
isOpen.value = false;
|
isOpen.value = false;
|
||||||
sessionStorage.setItem('sidebar_open', 'false');
|
localStorage.setItem('sidebar_open', 'false');
|
||||||
}
|
}
|
||||||
|
|
||||||
function goNyx() {
|
function goNyx() {
|
||||||
|
|||||||
@ -1,49 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="isLoggedIn" class="app-toolbar">
|
<div v-if="isLoggedIn" class="app-toolbar">
|
||||||
<!-- Connection pill -->
|
<!-- 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" />
|
<WifiIcon class="w-4 h-4" />
|
||||||
<span v-if="connLabel" class="toolbar-pill-label">{{ connLabel }}</span>
|
<span v-if="connLabel" class="toolbar-pill-label">{{ connLabel }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="toolbar-spacer" />
|
<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) -->
|
<!-- Theme pills (icon only) -->
|
||||||
<button
|
<button
|
||||||
v-for="t in THEMES"
|
v-for="t in THEMES"
|
||||||
@ -56,24 +20,12 @@
|
|||||||
<component :is="THEME_ICONS[t]" class="w-4 h-4" />
|
<component :is="THEME_ICONS[t]" class="w-4 h-4" />
|
||||||
</button>
|
</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 -->
|
<!-- Takeover / Capture -->
|
||||||
<button
|
<button
|
||||||
v-if="takeoverToken"
|
v-if="takeoverToken"
|
||||||
class="toolbar-pill"
|
class="toolbar-pill"
|
||||||
:class="{ active: captureActive }"
|
:class="{ active: captureActive }"
|
||||||
@click="toggleDropdown('takeover')"
|
@click="togglePanel('takeover')"
|
||||||
title="Takeover"
|
title="Takeover"
|
||||||
>
|
>
|
||||||
<SignalIcon class="w-4 h-4" />
|
<SignalIcon class="w-4 h-4" />
|
||||||
@ -85,10 +37,10 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Panels (dropdown from toolbar) -->
|
<!-- 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 -->
|
<!-- 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-header">Connection</div>
|
||||||
<div class="toolbar-panel-row"><span>HTTP</span><span>{{ chatStore.connectionState }}</span></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>
|
<div class="toolbar-panel-row"><span>Channel</span><span>{{ chatStore.channelState }}</span></div>
|
||||||
@ -97,7 +49,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Takeover panel -->
|
<!-- 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-header">Takeover</div>
|
||||||
<div class="toolbar-panel-token" @click="copyToken" :title="tokenCopied ? 'Copied!' : 'Click to copy'">
|
<div class="toolbar-panel-token" @click="copyToken" :title="tokenCopied ? 'Copied!' : 'Click to copy'">
|
||||||
<code>{{ takeoverToken }}</code>
|
<code>{{ takeoverToken }}</code>
|
||||||
@ -117,13 +69,12 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({ name: 'AppToolbar' });
|
defineOptions({ name: 'AppToolbar' });
|
||||||
import { ref, computed, type Component } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon, ChatBubbleLeftIcon, RectangleGroupIcon, FolderIcon, SparklesIcon } from '@heroicons/vue/20/solid';
|
import { WifiIcon, SignalIcon } from '@heroicons/vue/20/solid';
|
||||||
import { THEME_ICONS, THEME_NAMES, useTheme, type Theme } from '../composables/useTheme';
|
import { THEME_ICONS, THEME_NAMES, useTheme, type Theme } from '../composables/useTheme';
|
||||||
import { ws, auth, agents, takeover } from '../store';
|
import { ws, auth, agents, takeover } from '../store';
|
||||||
import { useChatStore } from '../store/chat';
|
import { useChatStore } from '../store/chat';
|
||||||
import { useUI } from '../composables/ui';
|
import { useUI } from '../composables/ui';
|
||||||
import { usePanels, type PanelId, type PaneId } from '../composables/usePanels';
|
|
||||||
|
|
||||||
const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
|
const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
|
||||||
|
|
||||||
@ -132,20 +83,6 @@ const { selectedAgent, selectedMode } = agents;
|
|||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const chatStore = useChatStore();
|
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
|
// Connection
|
||||||
const connLabel = computed(() => {
|
const connLabel = computed(() => {
|
||||||
switch (chatStore.connectionState) {
|
switch (chatStore.connectionState) {
|
||||||
@ -180,7 +117,7 @@ function copyToken() {
|
|||||||
|
|
||||||
function revokeAndClose() {
|
function revokeAndClose() {
|
||||||
takeover.revoke();
|
takeover.revoke();
|
||||||
openDropdown.value = null;
|
openPanel.value = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Version
|
// Version
|
||||||
@ -197,11 +134,11 @@ function copyVersionDetails() {
|
|||||||
setTimeout(() => { versionCopied.value = false; }, 2000);
|
setTimeout(() => { versionCopied.value = false; }, 2000);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toolbar dropdown (conn/takeover panels — distinct from debug panel toggles)
|
// Panel toggle
|
||||||
const openDropdown = ref<'conn' | 'takeover' | null>(null);
|
const openPanel = ref<'conn' | 'takeover' | null>(null);
|
||||||
|
|
||||||
function toggleDropdown(panel: 'conn' | 'takeover') {
|
function togglePanel(panel: 'conn' | 'takeover') {
|
||||||
openDropdown.value = openDropdown.value === panel ? null : panel;
|
openPanel.value = openPanel.value === panel ? null : panel;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -218,14 +155,6 @@ function toggleDropdown(panel: 'conn' | 'takeover') {
|
|||||||
|
|
||||||
.toolbar-spacer { flex: 1; }
|
.toolbar-spacer { flex: 1; }
|
||||||
|
|
||||||
.toolbar-divider {
|
|
||||||
width: 1px;
|
|
||||||
height: 18px;
|
|
||||||
background: var(--border);
|
|
||||||
opacity: 0.5;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-pill {
|
.toolbar-pill {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
export interface HudNode {
|
||||||
id: string
|
id: string
|
||||||
correlationId?: string
|
correlationId?: string
|
||||||
type: 'turn' | 'tool' | 'think' | 'received' | 'node_activity'
|
type: 'turn' | 'tool' | 'think' | 'received'
|
||||||
subtype?: string
|
subtype?: string
|
||||||
state: 'running' | 'done' | 'error'
|
state: 'running' | 'done' | 'error'
|
||||||
label: string
|
label: string
|
||||||
@ -223,101 +223,6 @@ export function useSessionHistory(
|
|||||||
addHudNode(node);
|
addHudNode(node);
|
||||||
break;
|
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;
|
if (data.session_id) chatStore.sessionKey = data.session_id;
|
||||||
},
|
},
|
||||||
|
|
||||||
// assay UI controls (legacy flat list) — kept for compat, ignored for now
|
// assay UI controls — store for later rendering
|
||||||
controls(_data) {},
|
controls(_data) {
|
||||||
|
// TODO: render controls in workspace panel
|
||||||
|
},
|
||||||
|
|
||||||
// assay artifacts — split into Display (pages/tables) and Konsole (machines/controls)
|
// assay artifacts — store for later rendering
|
||||||
artifacts(data) {
|
artifacts(_data) {
|
||||||
chatStore.setArtifacts(data.artifacts || []);
|
// TODO: render artifacts in workspace panel
|
||||||
},
|
},
|
||||||
|
|
||||||
// assay session cleared
|
// 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 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 {
|
return {
|
||||||
url: window.location.href,
|
url: window.location.hash,
|
||||||
hash: window.location.hash,
|
|
||||||
title: document.title,
|
title: document.title,
|
||||||
viewport: { w: window.innerWidth, h: window.innerHeight },
|
viewport: { w: window.innerWidth, h: window.innerHeight },
|
||||||
panes: {
|
body: document.body.innerText.slice(0, 2000),
|
||||||
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,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -265,9 +240,12 @@ export function useTakeover(wsSend: (msg: any) => void) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eval — requires user confirmation
|
||||||
if (cmd === 'eval') {
|
if (cmd === 'eval') {
|
||||||
const js = args.js;
|
const js = args.js;
|
||||||
if (!js) { sendResult({ type: 'dev_cmd_result', cmdId, error: 'js required' }); return; }
|
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 {
|
try {
|
||||||
const result = new Function('return (' + js + ')')();
|
const result = new Function('return (' + js + ')')();
|
||||||
const serialized = result instanceof Element
|
const serialized = result instanceof Element
|
||||||
|
|||||||
@ -106,27 +106,13 @@ async function _startHealthStream(): Promise<void> {
|
|||||||
_dispatch({ type: 'connection_state', state: 'SYNCED' });
|
_dispatch({ type: 'connection_state', state: 'SYNCED' });
|
||||||
}
|
}
|
||||||
|
|
||||||
let sseBuf = '';
|
|
||||||
while (true) {
|
while (true) {
|
||||||
const { done, value } = await reader.read();
|
const { done, value } = await reader.read();
|
||||||
if (done) break;
|
if (done) break;
|
||||||
sseBuf += decoder.decode(value, { stream: true });
|
const text = decoder.decode(value, { stream: true });
|
||||||
// Parse SSE events from buffer
|
if (text.includes('heartbeat')) {
|
||||||
const parts = sseBuf.split('\n\n');
|
connected.value = true;
|
||||||
sseBuf = parts.pop()!; // keep incomplete
|
status.value = 'Connected';
|
||||||
for (const block of parts) {
|
|
||||||
let eventType = '';
|
|
||||||
let data = '';
|
|
||||||
for (const line of block.split('\n')) {
|
|
||||||
if (line.startsWith('event: ')) eventType = line.slice(7);
|
|
||||||
else if (line.startsWith('data: ')) data = line.slice(6);
|
|
||||||
}
|
|
||||||
if (eventType === 'heartbeat') {
|
|
||||||
connected.value = true;
|
|
||||||
status.value = 'Connected';
|
|
||||||
} else if (eventType === 'debug_cmd' && data) {
|
|
||||||
try { _handleDebugCmd(JSON.parse(data)); } catch { /* ignore */ }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
@ -145,31 +131,6 @@ async function _startHealthStream(): Promise<void> {
|
|||||||
}, 3000);
|
}, 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.
|
* 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';
|
import router from './router';
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
const pinia = createPinia();
|
app.use(createPinia());
|
||||||
app.use(pinia);
|
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.mount('#app');
|
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 };
|
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', () => {
|
export const useChatStore = defineStore('chat', () => {
|
||||||
// --- State ---
|
// --- State ---
|
||||||
const messages = ref<any[]>([]);
|
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)
|
// Two-SM architecture: channel (shared) + connection (per-user)
|
||||||
const channelState = ref<ChannelState>('NO_SESSION');
|
const channelState = ref<ChannelState>('NO_SESSION');
|
||||||
const connectionState = ref<ConnectionState>('CONNECTING');
|
const connectionState = ref<ConnectionState>('CONNECTING');
|
||||||
@ -82,11 +66,6 @@ export const useChatStore = defineStore('chat', () => {
|
|||||||
let _wsSend: ((payload: any) => void) | null = null;
|
let _wsSend: ((payload: any) => void) | null = null;
|
||||||
function setWsSend(fn: (payload: any) => void) { _wsSend = fn; }
|
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)
|
// Session actions (called from HudControls / HudRow)
|
||||||
function newSession() {
|
function newSession() {
|
||||||
stashMessages();
|
stashMessages();
|
||||||
@ -222,7 +201,6 @@ export const useChatStore = defineStore('chat', () => {
|
|||||||
messages.value = [];
|
messages.value = [];
|
||||||
sessionTotalTokens.value = null;
|
sessionTotalTokens.value = null;
|
||||||
finance.value = null;
|
finance.value = null;
|
||||||
artifacts.value = [];
|
|
||||||
resetStreamingState();
|
resetStreamingState();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -456,16 +434,10 @@ export const useChatStore = defineStore('chat', () => {
|
|||||||
handoverPending,
|
handoverPending,
|
||||||
isRunning,
|
isRunning,
|
||||||
setWsSend,
|
setWsSend,
|
||||||
sendAction,
|
|
||||||
newSession,
|
newSession,
|
||||||
handover,
|
handover,
|
||||||
stop,
|
stop,
|
||||||
confirmNew,
|
confirmNew,
|
||||||
stay,
|
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,
|
port: 5173,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/ws': {
|
'/ws': {
|
||||||
target: 'ws://localhost:8000',
|
target: 'wss://assay.loop42.de',
|
||||||
ws: true,
|
ws: true,
|
||||||
|
rewriteWsOrigin: true,
|
||||||
|
secure: true,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:8000',
|
target: 'https://assay.loop42.de',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
secure: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user