Panel system: replace quad DevPanel with composable panel architecture
- PanelShell layout: main content + stacked side panels (320px) - usePanels composable: role-based registry, localStorage persistence - Lazy-loaded panels: Graph (Cytoscape+Cola), Trace, Nodes, State - Fix HUD protocol: map assay node-level events to nyx tree format - Graph: edge filtering for missing nodes, Tailwind canvas opacity fix - Remove FramesPanel and TaskPanel (data merged into State panel) - Toolbar panel toggles with heroicon badges Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nico
parent
323bb0113f
commit
4d4e1e198c
78
package-lock.json
generated
78
package-lock.json
generated
@ -9,6 +9,8 @@
|
|||||||
"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",
|
||||||
@ -1559,6 +1561,70 @@
|
|||||||
"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",
|
||||||
@ -2696,6 +2762,18 @@
|
|||||||
"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,6 +17,8 @@
|
|||||||
},
|
},
|
||||||
"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",
|
||||||
|
|||||||
@ -20,6 +20,18 @@
|
|||||||
<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"
|
||||||
@ -69,12 +81,13 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
defineOptions({ name: 'AppToolbar' });
|
defineOptions({ name: 'AppToolbar' });
|
||||||
import { ref, computed } from 'vue';
|
import { ref, computed, type Component } from 'vue';
|
||||||
import { WifiIcon, SignalIcon } from '@heroicons/vue/20/solid';
|
import { WifiIcon, SignalIcon, QueueListIcon, CpuChipIcon, EyeIcon, CircleStackIcon } 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 } from '../composables/usePanels';
|
||||||
|
|
||||||
const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
|
const THEMES: Theme[] = ['loop42', 'titan', 'eras'];
|
||||||
|
|
||||||
@ -83,6 +96,20 @@ const { selectedAgent, selectedMode } = agents;
|
|||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const chatStore = useChatStore();
|
const chatStore = useChatStore();
|
||||||
|
|
||||||
|
// Panels
|
||||||
|
const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen } = 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) {
|
||||||
|
|||||||
159
src/components/PanelShell.vue
Normal file
159
src/components/PanelShell.vue
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel-shell" :class="{ 'has-side': hasSidePanels }">
|
||||||
|
<!-- Main content area -->
|
||||||
|
<div class="panel-main">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Side panel column -->
|
||||||
|
<div v-if="hasSidePanels" class="panel-side">
|
||||||
|
<div
|
||||||
|
v-for="panel in openSidePanels"
|
||||||
|
:key="panel.id"
|
||||||
|
class="panel-section"
|
||||||
|
>
|
||||||
|
<div class="panel-header">
|
||||||
|
<span class="panel-title">{{ panel.label }}</span>
|
||||||
|
<button class="panel-close" @click="closePanel(panel.id)" title="Close">×</button>
|
||||||
|
</div>
|
||||||
|
<Suspense>
|
||||||
|
<component
|
||||||
|
:is="resolvedComponents[panel.id]"
|
||||||
|
v-bind="panelProps(panel.id)"
|
||||||
|
/>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="panel-loading">Loading...</div>
|
||||||
|
</template>
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { shallowRef, watch, defineAsyncComponent, type Component } from 'vue';
|
||||||
|
import { usePanels, type PanelId, type PanelDef } from '../composables/usePanels';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
hudTree: any[];
|
||||||
|
hudVersion: number;
|
||||||
|
connected: boolean;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const { openSidePanels, openBottomPanels, hasSidePanels, hasBottomPanels, closePanel } = usePanels();
|
||||||
|
|
||||||
|
// Resolve async components once
|
||||||
|
const resolvedComponents = shallowRef<Record<string, Component>>({});
|
||||||
|
|
||||||
|
watch(openSidePanels, (panels) => {
|
||||||
|
const current = { ...resolvedComponents.value };
|
||||||
|
for (const panel of panels) {
|
||||||
|
if (!current[panel.id]) {
|
||||||
|
current[panel.id] = defineAsyncComponent(panel.component);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resolvedComponents.value = current;
|
||||||
|
}, { 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>
|
||||||
|
.panel-shell {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-side {
|
||||||
|
width: 320px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1px;
|
||||||
|
background: var(--border);
|
||||||
|
border-left: 1px solid var(--border);
|
||||||
|
overflow-y: auto;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-section {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile: side panels stack below */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.panel-shell {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.panel-side {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 40vh;
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
src/components/panels/AwarenessPanel.vue
Normal file
93
src/components/panels/AwarenessPanel.vue
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<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>
|
||||||
380
src/components/panels/GraphPanel.vue
Normal file
380
src/components/panels/GraphPanel.vue
Normal file
@ -0,0 +1,380 @@
|
|||||||
|
<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>
|
||||||
140
src/components/panels/NodesPanel.vue
Normal file
140
src/components/panels/NodesPanel.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<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>
|
||||||
114
src/components/panels/TracePanel.vue
Normal file
114
src/components/panels/TracePanel.vue
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<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'
|
type: 'turn' | 'tool' | 'think' | 'received' | 'node_activity'
|
||||||
subtype?: string
|
subtype?: string
|
||||||
state: 'running' | 'done' | 'error'
|
state: 'running' | 'done' | 'error'
|
||||||
label: string
|
label: string
|
||||||
@ -223,6 +223,101 @@ 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
143
src/composables/usePanels.ts
Normal file
143
src/composables/usePanels.ts
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
/**
|
||||||
|
* usePanels.ts — Role-based panel system
|
||||||
|
*
|
||||||
|
* Determines which panels are available based on tenant features,
|
||||||
|
* manages open/closed state persisted to localStorage.
|
||||||
|
*
|
||||||
|
* Roles (future: from Zitadel JWT claims):
|
||||||
|
* user — end consumer (default)
|
||||||
|
* creator — content creator, agent designer
|
||||||
|
* operator — monitors agents, runs tests
|
||||||
|
* dev — full access to all debug tools
|
||||||
|
*
|
||||||
|
* For now, role is derived from tenant.features.devTools:
|
||||||
|
* devTools=true → dev role (all panels)
|
||||||
|
* devTools=false → user role (no side/bottom panels)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { ref, computed, type Component } from 'vue';
|
||||||
|
import tenant from '../tenant';
|
||||||
|
|
||||||
|
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 STORAGE_KEY = 'nyx_panels_open';
|
||||||
|
|
||||||
|
function loadOpenPanels(): Set<PanelId> {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY);
|
||||||
|
if (stored) return new Set(JSON.parse(stored));
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
return new Set();
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveOpenPanels(ids: Set<PanelId>) {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Module-level state (survives HMR)
|
||||||
|
const openPanelIds = ref<Set<PanelId>>(loadOpenPanels());
|
||||||
|
|
||||||
|
export function usePanels() {
|
||||||
|
// Current role — derived from tenant features for now.
|
||||||
|
// Future: extract from JWT project roles via Zitadel.
|
||||||
|
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);
|
||||||
|
|
||||||
|
function togglePanel(id: PanelId) {
|
||||||
|
const next = new Set(openPanelIds.value);
|
||||||
|
if (next.has(id)) {
|
||||||
|
next.delete(id);
|
||||||
|
} else {
|
||||||
|
next.add(id);
|
||||||
|
}
|
||||||
|
openPanelIds.value = next;
|
||||||
|
saveOpenPanels(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;
|
||||||
|
saveOpenPanels(next);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
role,
|
||||||
|
availablePanels,
|
||||||
|
openSidePanels,
|
||||||
|
openBottomPanels,
|
||||||
|
hasSidePanels,
|
||||||
|
hasBottomPanels,
|
||||||
|
togglePanel,
|
||||||
|
isPanelOpen,
|
||||||
|
closePanel,
|
||||||
|
openPanelIds,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -106,13 +106,27 @@ 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;
|
||||||
const text = decoder.decode(value, { stream: true });
|
sseBuf += decoder.decode(value, { stream: true });
|
||||||
if (text.includes('heartbeat')) {
|
// Parse SSE events from buffer
|
||||||
connected.value = true;
|
const parts = sseBuf.split('\n\n');
|
||||||
status.value = 'Connected';
|
sseBuf = parts.pop()!; // keep incomplete
|
||||||
|
for (const block of parts) {
|
||||||
|
let eventType = '';
|
||||||
|
let data = '';
|
||||||
|
for (const line of block.split('\n')) {
|
||||||
|
if (line.startsWith('event: ')) eventType = line.slice(7);
|
||||||
|
else if (line.startsWith('data: ')) data = line.slice(6);
|
||||||
|
}
|
||||||
|
if (eventType === 'heartbeat') {
|
||||||
|
connected.value = true;
|
||||||
|
status.value = 'Connected';
|
||||||
|
} else if (eventType === 'debug_cmd' && data) {
|
||||||
|
try { _handleDebugCmd(JSON.parse(data)); } catch { /* ignore */ }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
@ -131,6 +145,31 @@ 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.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<PanelShell :hudTree="hudTree" :hudVersion="hudVersion" :connected="connected">
|
||||||
<div class="agents-view flex flex-col h-full overflow-hidden bg-bg" v-if="isLoggedIn">
|
<div class="agents-view flex flex-col h-full overflow-hidden bg-bg" v-if="isLoggedIn">
|
||||||
<!-- NO_AGENT_SELECTED or overview mode: show agent picker -->
|
<!-- NO_AGENT_SELECTED or overview mode: show agent picker -->
|
||||||
<div v-show="showPicker" class="agent-picker">
|
<div v-show="showPicker" class="agent-picker">
|
||||||
@ -207,6 +208,7 @@
|
|||||||
<p><LockClosedIcon class="w-5 h-5 inline" /> Not logged in</p>
|
<p><LockClosedIcon class="w-5 h-5 inline" /> Not logged in</p>
|
||||||
<RouterLink to="/login">Sign in →</RouterLink>
|
<RouterLink to="/login">Sign in →</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
|
</PanelShell>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -230,6 +232,7 @@ import UserMessage from '../components/UserMessage.vue';
|
|||||||
import AssistantMessage from '../components/AssistantMessage.vue';
|
import AssistantMessage from '../components/AssistantMessage.vue';
|
||||||
import SystemMessage from '../components/SystemMessage.vue';
|
import SystemMessage from '../components/SystemMessage.vue';
|
||||||
import HudControls from '../components/HudControls.vue';
|
import HudControls from '../components/HudControls.vue';
|
||||||
|
import PanelShell from '../components/PanelShell.vue';
|
||||||
import { agentLogo as getAgentLogo } from '../composables/useTheme';
|
import { agentLogo as getAgentLogo } from '../composables/useTheme';
|
||||||
|
|
||||||
import router from '../router';
|
import router from '../router';
|
||||||
|
|||||||
@ -13,16 +13,13 @@ export default defineConfig({
|
|||||||
port: 5173,
|
port: 5173,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/ws': {
|
'/ws': {
|
||||||
target: 'wss://assay.loop42.de',
|
target: 'ws://localhost:8000',
|
||||||
ws: true,
|
ws: true,
|
||||||
rewriteWsOrigin: true,
|
|
||||||
secure: true,
|
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'https://assay.loop42.de',
|
target: 'http://localhost:8000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
secure: true,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user