Compare commits
4 Commits
544afae77f
...
claude/des
| Author | SHA1 | Date | |
|---|---|---|---|
| aed068de12 | |||
| 8657ac5669 | |||
| e28e0e9ea3 | |||
| 6051fb4845 |
@@ -18,6 +18,7 @@ import (
|
||||
|
||||
"github.com/dtoro/oikos/internal/safego"
|
||||
"github.com/google/uuid"
|
||||
"github.com/jackc/pgx/v5"
|
||||
)
|
||||
|
||||
func main() {
|
||||
@@ -448,6 +449,21 @@ func handleSessionDetail(w http.ResponseWriter, r *http.Request, st *store, a *a
|
||||
w.WriteHeader(204)
|
||||
|
||||
case http.MethodGet:
|
||||
// getMessages alone can't distinguish "session exists but has no
|
||||
// messages yet" from "session id doesn't exist at all" — it's a
|
||||
// plain WHERE session_id=$1 query that returns zero rows either
|
||||
// way. A frontend window opened for a deleted/invalid session
|
||||
// (persisted layout, a stale link) needs to tell those apart, so
|
||||
// check existence explicitly and 404 rather than silently
|
||||
// returning an empty transcript that looks like a fresh task.
|
||||
if _, err := st.getSession(r.Context(), id); err != nil {
|
||||
if err == pgx.ErrNoRows {
|
||||
http.Error(w, "session not found", 404)
|
||||
return
|
||||
}
|
||||
http.Error(w, err.Error(), 500)
|
||||
return
|
||||
}
|
||||
messages, err := st.getMessages(r.Context(), id)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), 500)
|
||||
|
||||
@@ -1,46 +1,42 @@
|
||||
<script lang="ts">
|
||||
import Chat from './pages/Chat.svelte'
|
||||
import Overview from './pages/Overview.svelte'
|
||||
import KnowledgeBase from './pages/KnowledgeBase.svelte'
|
||||
import Ops from './pages/Ops.svelte'
|
||||
import Signals from './pages/Signals.svelte'
|
||||
import EntityDetail from './pages/EntityDetail.svelte'
|
||||
import Knowledge from './pages/Knowledge.svelte'
|
||||
import Learning from './pages/Learning.svelte'
|
||||
import Config from './pages/Config.svelte'
|
||||
import EntityDesktop from '$lib/components/EntityDesktop.svelte'
|
||||
import { newChat } from '$lib/stores/chat'
|
||||
import { summary, subscribeContext, openSignalCount } from '$lib/stores/context'
|
||||
import { currentTask } from '$lib/stores/workspace'
|
||||
import Desktop from '$lib/components/desktop-shell/Desktop.svelte'
|
||||
import { subscribeContext } from '$lib/stores/context'
|
||||
import { openAppWindow, openEntityWindow } from '$lib/stores/windows'
|
||||
import { isConfigured } from '$lib/config'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { onMount } from 'svelte'
|
||||
import { processPendingCallback, initOIDC } from '$lib/oidc'
|
||||
import * as Sidebar from '$lib/components/ui/sidebar'
|
||||
import * as Sheet from '$lib/components/ui/sheet'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Separator } from '$lib/components/ui/separator'
|
||||
import { VERSION } from '$lib/version'
|
||||
import { Toaster } from '$lib/components/ui/sonner'
|
||||
import PlusIcon from '@lucide/svelte/icons/plus'
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import PanelRightIcon from '@lucide/svelte/icons/panel-right'
|
||||
import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
|
||||
import SirenIcon from '@lucide/svelte/icons/siren'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings'
|
||||
import PaletteIcon from '@lucide/svelte/icons/palette'
|
||||
import { getTheme, toggleTheme, THEME_LABELS } from '$lib/stores/theme.svelte'
|
||||
|
||||
let page = $state('overview')
|
||||
let routeParam = $state('')
|
||||
let drawerOpen = $state(false)
|
||||
let configured = $state(isConfigured())
|
||||
|
||||
const approvalsPending = $derived($summary?.approvals_pending ?? 0)
|
||||
const openSignals = $derived(openSignalCount($summary))
|
||||
// Old hash routes (#/kb, #/entity/<slug>, ...) from the sidebar-shell era —
|
||||
// translated into opening the equivalent window once, then cleared, so
|
||||
// links/bookmarks from before the desktop redesign keep working without
|
||||
// reintroducing a router.
|
||||
const LEGACY_APP_ROUTES: Record<string, string> = {
|
||||
overview: 'tasks',
|
||||
chat: 'tasks',
|
||||
kb: 'kb',
|
||||
entities: 'kb',
|
||||
graph: 'kb',
|
||||
ops: 'ops',
|
||||
signals: 'signals',
|
||||
knowledge: 'knowledge',
|
||||
learning: 'learning'
|
||||
}
|
||||
|
||||
function resolveLegacyHash() {
|
||||
const path = location.hash.slice(2)
|
||||
if (!path) return
|
||||
const [head, ...rest] = path.split('/')
|
||||
if (head === 'entity' && rest.length) {
|
||||
openEntityWindow(rest.join('/'))
|
||||
} else if (LEGACY_APP_ROUTES[head]) {
|
||||
openAppWindow(LEGACY_APP_ROUTES[head])
|
||||
}
|
||||
history.replaceState(null, '', location.pathname + location.search)
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (await processPendingCallback()) {
|
||||
@@ -48,21 +44,7 @@
|
||||
} else if (!configured) {
|
||||
if (await initOIDC()) configured = true
|
||||
}
|
||||
|
||||
function sync() {
|
||||
const path = location.hash.slice(2) || 'overview'
|
||||
const [head, ...rest] = path.split('/')
|
||||
// Entities + Graph were merged into Knowledge Base — keep old links working.
|
||||
if (head === 'entities' || head === 'graph') {
|
||||
location.hash = '#/kb'
|
||||
return
|
||||
}
|
||||
page = head || 'overview'
|
||||
routeParam = rest.join('/')
|
||||
}
|
||||
sync()
|
||||
window.addEventListener('hashchange', sync)
|
||||
return () => window.removeEventListener('hashchange', sync)
|
||||
resolveLegacyHash()
|
||||
})
|
||||
|
||||
// Context (dashboard summary + approvals poll) and the SSE stream both
|
||||
@@ -71,23 +53,6 @@
|
||||
if (!configured) return
|
||||
return subscribeContext()
|
||||
})
|
||||
|
||||
function navigate(p: string) {
|
||||
location.hash = '#/' + p
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
toggleTheme()
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ id: 'overview', label: 'Tasks', icon: ListTodoIcon },
|
||||
{ id: 'kb', label: 'Knowledge Base', icon: DatabaseIcon },
|
||||
{ id: 'ops', label: 'Operations', icon: ShieldCheckIcon, badge: () => approvalsPending },
|
||||
{ id: 'signals', label: 'Signals', icon: SirenIcon, badge: () => openSignals },
|
||||
{ id: 'knowledge', label: 'Knowledge', icon: SearchIcon },
|
||||
{ id: 'learning', label: 'Learning', icon: TrendingUpIcon }
|
||||
]
|
||||
</script>
|
||||
|
||||
{#if !configured}
|
||||
@@ -96,160 +61,6 @@
|
||||
onCancel={isConfigured() ? () => (configured = true) : undefined}
|
||||
/>
|
||||
{:else}
|
||||
|
||||
<Toaster />
|
||||
|
||||
<Sidebar.Provider class="h-svh" style="--header-height: calc(var(--spacing) * 12);">
|
||||
<Sidebar.Root collapsible="icon" variant="inset">
|
||||
<Sidebar.Header>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
class="data-[slot=sidebar-menu-button]:!p-1.5"
|
||||
onclick={() => navigate('overview')}
|
||||
tooltipContent={`Oikos ${VERSION}`}
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<svg viewBox="0 0 91 100" class="!size-5 shrink-0" fill="var(--primary)" aria-hidden="true" role="img">
|
||||
<title>Oikos</title>
|
||||
<path d="m45.601 1q20.993 0 33.71 15.946 10.799 13.625 10.799 31.287 0 12.414-5.9548 25.131-5.9548 12.717-16.451 19.176-10.395 6.4592-23.213 6.4592-20.892 0-33.205-16.653-10.395-14.029-10.395-31.489 0-12.717 6.2577-25.232 6.3584-12.616 16.653-18.57 10.295-6.0556 21.801-6.0556zm-3.128 6.5605q-5.3492 0-10.799 3.2296-5.3492 3.1287-8.68 11.102-3.3305 7.9735-3.3305 20.488 0 20.185 7.973 34.82 8.0743 14.634 21.195 14.634 9.7896 0 16.149-8.0743 6.3584-8.0743 6.3584-27.755 0-24.627-10.597-38.756-7.1657-9.6888-18.268-9.6888z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
<div class="group-data-[collapsible=icon]:hidden px-2.5 pb-1">
|
||||
<span class="text-[11px] text-muted-foreground select-none">{VERSION}</span>
|
||||
</div>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
|
||||
onclick={() => { newChat(); navigate('chat') }}
|
||||
tooltipContent="New task"
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<PlusIcon />
|
||||
<span>New task</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.Header>
|
||||
|
||||
<Sidebar.Content>
|
||||
<Sidebar.Group>
|
||||
<Sidebar.Menu>
|
||||
{#each navItems as item}
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
isActive={page === item.id || (item.id === 'overview' && page === 'chat')}
|
||||
onclick={() => navigate(item.id)}
|
||||
tooltipContent={item.label}
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<item.icon />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
{#if item.badge?.()}
|
||||
<Sidebar.MenuBadge>{item.badge()}</Sidebar.MenuBadge>
|
||||
{/if}
|
||||
</Sidebar.MenuItem>
|
||||
{/each}
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.Group>
|
||||
</Sidebar.Content>
|
||||
|
||||
<Sidebar.Footer>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={() => (drawerOpen = true)}
|
||||
title="Chat over the current page without navigating away"
|
||||
>
|
||||
<PanelRightIcon />
|
||||
<span>Chat drawer</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={cycleTheme}
|
||||
title="Cycle theme"
|
||||
>
|
||||
<PaletteIcon />
|
||||
<span>{THEME_LABELS[getTheme()]}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={() => (configured = false)}
|
||||
title="Server connection settings"
|
||||
>
|
||||
<SettingsIcon />
|
||||
<span>Connection</span>
|
||||
</Button>
|
||||
</Sidebar.Footer>
|
||||
</Sidebar.Root>
|
||||
|
||||
<Sidebar.Inset class="min-h-0 overflow-hidden">
|
||||
<header class="flex h-(--header-height) shrink-0 items-center gap-1 border-b px-4 lg:gap-2 lg:px-6">
|
||||
<Sidebar.Trigger class="-ms-1" />
|
||||
<Separator orientation="vertical" class="mx-2 data-[orientation=vertical]:h-4" />
|
||||
{#if page === 'chat'}
|
||||
{@const goalText = $currentTask?.goal ? $currentTask.goal.replace(/[*_`~#]|\[.*?\]\(.*?\)/g, '') : 'New Task'}
|
||||
<button type="button" class="shrink-0 text-sm text-muted-foreground hover:text-foreground" onclick={() => navigate('overview')}>Tasks</button>
|
||||
<span class="shrink-0 text-muted-foreground">/</span>
|
||||
<span class="min-w-0 flex-1 truncate text-base font-medium" title={goalText}>
|
||||
{truncateMiddle(goalText, 100)}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-base font-medium capitalize">{page === 'entity' ? routeParam : page === 'kb' ? 'Knowledge Base' : page === 'overview' ? 'Tasks' : page}</span>
|
||||
{/if}
|
||||
</header>
|
||||
<main class="min-h-0 flex-1 overflow-hidden">
|
||||
{#if page === 'overview'}
|
||||
<Overview />
|
||||
{:else if page === 'kb'}
|
||||
<KnowledgeBase />
|
||||
{:else if page === 'entity' && routeParam}
|
||||
<EntityDetail slug={routeParam} />
|
||||
{:else if page === 'ops'}
|
||||
<Ops />
|
||||
{:else if page === 'signals'}
|
||||
<Signals />
|
||||
{:else if page === 'knowledge'}
|
||||
<Knowledge />
|
||||
{:else if page === 'learning'}
|
||||
<Learning />
|
||||
{:else}
|
||||
<Chat />
|
||||
{/if}
|
||||
</main>
|
||||
</Sidebar.Inset>
|
||||
</Sidebar.Provider>
|
||||
|
||||
<Sheet.Root bind:open={drawerOpen}>
|
||||
<Sheet.Content side="right" class="w-[400px] p-0 sm:max-w-[400px]">
|
||||
<Sheet.Header class="sr-only">
|
||||
<Sheet.Title>Nomos chat</Sheet.Title>
|
||||
<Sheet.Description>Persistent chat drawer</Sheet.Description>
|
||||
</Sheet.Header>
|
||||
<div class="flex h-full flex-col">
|
||||
<Chat showRail={false} />
|
||||
</div>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
<EntityDesktop />
|
||||
|
||||
<Toaster />
|
||||
<Desktop onOpenConnection={() => (configured = false)} />
|
||||
{/if}
|
||||
|
||||
@@ -50,6 +50,21 @@ export async function fetchMessages(sessionId: string): Promise<Message[]> {
|
||||
return data.messages ?? []
|
||||
}
|
||||
|
||||
// null distinguishes "session doesn't exist" (404 — the session was deleted,
|
||||
// or a persisted/deep-linked window id was never valid) from a transient
|
||||
// fetch failure, which should keep returning []/retrying rather than
|
||||
// permanently flip a window into a "not found" state. Only the initial
|
||||
// per-window load (chat.ts's loadSessionChat) needs this distinction — the
|
||||
// polling loops keep using fetchMessages, where swallowing a blip into []
|
||||
// and trying again next tick is the right behavior.
|
||||
export async function fetchMessagesOrNotFound(sessionId: string): Promise<Message[] | null> {
|
||||
const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`)
|
||||
if (res.status === 404) return null
|
||||
if (!res.ok) return []
|
||||
const data = await res.json()
|
||||
return data.messages ?? []
|
||||
}
|
||||
|
||||
export async function deleteSession(sessionId: string): Promise<boolean> {
|
||||
const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`, { method: 'DELETE' })
|
||||
return res.ok
|
||||
@@ -213,6 +228,24 @@ export async function fetchEntities(filters: EntityFilters = {}): Promise<Entity
|
||||
return data.items ?? []
|
||||
}
|
||||
|
||||
// The entities endpoint caps at 200/page — the Knowledge Base wants the
|
||||
// whole set (it filters by type/search client-side now instead of scoping
|
||||
// the fetch server-side), so page through via cursor until exhausted.
|
||||
export async function fetchAllEntities(): Promise<Entity[]> {
|
||||
const all: Entity[] = []
|
||||
let cursor: string | undefined
|
||||
do {
|
||||
const params = new URLSearchParams({ limit: '200' })
|
||||
if (cursor) params.set('cursor', cursor)
|
||||
const res = await fetchWithAuth(`${API}/entities?${params}`)
|
||||
if (!res.ok) break
|
||||
const data = await res.json()
|
||||
all.push(...(data.items ?? []))
|
||||
cursor = data.next_cursor ?? undefined
|
||||
} while (cursor)
|
||||
return all
|
||||
}
|
||||
|
||||
export type OntologyLayer = 'meta' | 'infrastructure' | 'governance' | 'cognition'
|
||||
|
||||
export interface EntityType {
|
||||
|
||||
61
web/src/lib/apps.test.ts
Normal file
61
web/src/lib/apps.test.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
|
||||
// apps.ts wires in every page component for real use, but that drags a
|
||||
// heavy transitive graph into a unit test for no benefit here (and one of
|
||||
// those pages imports svelte-sonner, which fails to resolve under vitest's
|
||||
// bundled Vite — an unrelated, pre-existing package quirk). These tests only
|
||||
// care about the registry's own shape (ids, sizes, window-id helpers), so
|
||||
// stub the component imports out rather than pull all of that in.
|
||||
vi.mock('../pages/Overview.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/KnowledgeBase.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Ops.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Signals.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Knowledge.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Learning.svelte', () => ({ default: {} }))
|
||||
|
||||
import { APPS, appById, appWindowId, appIdFromWindowId } from './apps'
|
||||
|
||||
describe('APPS registry', () => {
|
||||
it('has unique, non-empty ids', () => {
|
||||
const ids = APPS.map((a) => a.id)
|
||||
expect(ids.length).toBeGreaterThan(0)
|
||||
expect(new Set(ids).size).toBe(ids.length)
|
||||
for (const id of ids) expect(id).not.toBe('')
|
||||
})
|
||||
|
||||
it('gives every app a positive default size', () => {
|
||||
for (const app of APPS) {
|
||||
expect(app.width).toBeGreaterThan(0)
|
||||
expect(app.height).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('is indexed by id in appById', () => {
|
||||
for (const app of APPS) {
|
||||
expect(appById.get(app.id)).toBe(app)
|
||||
}
|
||||
expect(appById.size).toBe(APPS.length)
|
||||
})
|
||||
})
|
||||
|
||||
describe('appWindowId / appIdFromWindowId', () => {
|
||||
it('round-trips an app id through its window id', () => {
|
||||
for (const app of APPS) {
|
||||
expect(appIdFromWindowId(appWindowId(app.id))).toBe(app.id)
|
||||
}
|
||||
})
|
||||
|
||||
it('returns null for ids that are not app windows', () => {
|
||||
expect(appIdFromWindowId('session:abc-123')).toBeNull()
|
||||
expect(appIdFromWindowId('host:strong')).toBeNull()
|
||||
expect(appIdFromWindowId('new-task')).toBeNull()
|
||||
})
|
||||
|
||||
it('namespaces window ids so they cannot collide with entity slugs', () => {
|
||||
// Entity slugs are bare `type:identifier` strings (see windows.ts's
|
||||
// openEntityWindow) — app window ids must never look like one.
|
||||
for (const app of APPS) {
|
||||
expect(appWindowId(app.id).startsWith('app:')).toBe(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
118
web/src/lib/apps.ts
Normal file
118
web/src/lib/apps.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
// The desktop's app registry — single source of truth for what shows up as
|
||||
// a desktop icon and what opens in its window. Adding a new app is one entry
|
||||
// here; nothing else needs to change (Desktop.svelte renders icons from
|
||||
// APPS, WindowLayer.svelte resolves `app:<id>` window ids back through
|
||||
// appById, Taskbar.svelte reads title/icon the same way). Compare to the old
|
||||
// App.svelte's hardcoded navItems array + if/else page branch, which required
|
||||
// touching three places (nav list, header title, main content branch) to add
|
||||
// one page.
|
||||
import type { Component } from 'svelte'
|
||||
import type { DashboardSummary } from '$lib/api'
|
||||
import { openSignalCount } from '$lib/stores/context'
|
||||
import Overview from '../pages/Overview.svelte'
|
||||
import KnowledgeBase from '../pages/KnowledgeBase.svelte'
|
||||
import Ops from '../pages/Ops.svelte'
|
||||
import Signals from '../pages/Signals.svelte'
|
||||
import Knowledge from '../pages/Knowledge.svelte'
|
||||
import Learning from '../pages/Learning.svelte'
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
|
||||
import SirenIcon from '@lucide/svelte/icons/siren'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
|
||||
|
||||
export interface AppDef {
|
||||
id: string
|
||||
title: string
|
||||
icon: Component
|
||||
component: Component
|
||||
width: number
|
||||
height: number
|
||||
minWidth?: number
|
||||
minHeight?: number
|
||||
// Pure function over the shared dashboard summary — used for both the
|
||||
// desktop icon's badge and the taskbar button's badge, so a new app that
|
||||
// wants one just supplies this instead of each surface reimplementing it.
|
||||
badge?: (summary: DashboardSummary | null) => number
|
||||
}
|
||||
|
||||
export const APPS: AppDef[] = [
|
||||
{
|
||||
id: 'tasks',
|
||||
title: 'Tasks',
|
||||
icon: ListTodoIcon,
|
||||
component: Overview,
|
||||
width: 960,
|
||||
height: 680,
|
||||
minWidth: 480,
|
||||
minHeight: 420
|
||||
},
|
||||
{
|
||||
id: 'kb',
|
||||
title: 'Knowledge Base',
|
||||
icon: DatabaseIcon,
|
||||
component: KnowledgeBase,
|
||||
width: 1000,
|
||||
height: 700,
|
||||
minWidth: 520,
|
||||
minHeight: 420
|
||||
},
|
||||
{
|
||||
id: 'ops',
|
||||
title: 'Operations',
|
||||
icon: ShieldCheckIcon,
|
||||
component: Ops,
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => s?.approvals_pending ?? 0
|
||||
},
|
||||
{
|
||||
id: 'signals',
|
||||
title: 'Signals',
|
||||
icon: SirenIcon,
|
||||
component: Signals,
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => openSignalCount(s)
|
||||
},
|
||||
{
|
||||
id: 'knowledge',
|
||||
title: 'Knowledge',
|
||||
icon: SearchIcon,
|
||||
component: Knowledge,
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
},
|
||||
{
|
||||
id: 'learning',
|
||||
title: 'Learning',
|
||||
icon: TrendingUpIcon,
|
||||
component: Learning,
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
}
|
||||
]
|
||||
|
||||
export const appById = new Map(APPS.map((a) => [a.id, a]))
|
||||
|
||||
// Window ids are namespaced so WindowLayer.svelte can tell at a glance which
|
||||
// content branch owns an id: `app:<id>` for registry apps, `session:<id>`
|
||||
// for task chat windows (see windows.ts), anything else is an entity slug.
|
||||
const APP_PREFIX = 'app:'
|
||||
|
||||
export function appWindowId(id: string): string {
|
||||
return `${APP_PREFIX}${id}`
|
||||
}
|
||||
|
||||
export function appIdFromWindowId(windowId: string): string | null {
|
||||
return windowId.startsWith(APP_PREFIX) ? windowId.slice(APP_PREFIX.length) : null
|
||||
}
|
||||
@@ -3,18 +3,11 @@
|
||||
// which lumps very different things (an LXC and a DNS record and a storage
|
||||
// volume) into one "infrastructure" bucket. Built from the ontology's
|
||||
// `domain` field instead, which already draws these lines; this just
|
||||
// groups the domains into browsing-sized buckets.
|
||||
import type { EntityFilters } from './api'
|
||||
|
||||
// groups the domains into browsing-sized buckets. The Knowledge Base shows
|
||||
// every entity at once now (filtered by the type multiselect, not by a
|
||||
// fetch-time category), but "fleet" still names the default type selection.
|
||||
export type Category = 'network' | 'fleet' | 'identity' | 'knowledge'
|
||||
|
||||
export const categories: { id: Category; label: string }[] = [
|
||||
{ id: 'fleet', label: 'Fleet' },
|
||||
{ id: 'network', label: 'Network' },
|
||||
{ id: 'identity', label: 'Identity' },
|
||||
{ id: 'knowledge', label: 'Knowledge' }
|
||||
]
|
||||
|
||||
// entity_types.domain -> Category. `external` folds into Network (isp-link,
|
||||
// domain-registration are network-adjacent); `physical`, `software`, and
|
||||
// `storage` fold into Fleet (ups/sensor/site support compute, services/apps
|
||||
@@ -49,15 +42,3 @@ export function typeToCategory(type: string, domain: string): Category | undefin
|
||||
if (domain === 'cognition') return undefined
|
||||
return DOMAIN_TO_CATEGORY[domain]
|
||||
}
|
||||
|
||||
// Filter sets to fetch and merge for a category's table view. Most
|
||||
// categories are one or two `domain` values; Knowledge is a handful of
|
||||
// specific `type`s carved out of the (otherwise excluded) cognition domain.
|
||||
export function filtersForCategory(category: Category): EntityFilters[] {
|
||||
if (category === 'knowledge') {
|
||||
return Array.from(KNOWLEDGE_TYPES).map((type) => ({ type }))
|
||||
}
|
||||
return Object.entries(DOMAIN_TO_CATEGORY)
|
||||
.filter(([, c]) => c === category)
|
||||
.map(([domain]) => ({ domain }))
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { activityLog, type ActivityEntry } from '$lib/stores/activity'
|
||||
import type { ActivityEntry } from '$lib/stores/activity'
|
||||
import Spinner from './Spinner.svelte'
|
||||
import CircleDotIcon from '@lucide/svelte/icons/circle-dot'
|
||||
import CircleXIcon from '@lucide/svelte/icons/circle-x'
|
||||
@@ -11,6 +11,9 @@
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
|
||||
|
||||
// Prop-driven (not store-imported) — see SessionGraph.svelte for why.
|
||||
let { entries }: { entries: ActivityEntry[] } = $props()
|
||||
|
||||
let expanded = $state(new Set<string>())
|
||||
|
||||
function toggle(id: string) {
|
||||
@@ -56,7 +59,7 @@
|
||||
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#if $activityLog.length === 0}
|
||||
{#if entries.length === 0}
|
||||
<div class="flex flex-col items-center gap-3 px-3 py-8 text-center">
|
||||
<svg viewBox="0 0 64 110" class="h-20 w-auto text-muted-foreground/40" fill="none">
|
||||
<line x1="32" y1="8" x2="32" y2="102" stroke="currentColor" stroke-width="1" stroke-dasharray="2.5 4" opacity="0.35" />
|
||||
@@ -78,8 +81,8 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col py-1">
|
||||
{#each $activityLog as entry, i (entry.id)}
|
||||
{@const isLast = i === $activityLog.length - 1}
|
||||
{#each entries as entry, i (entry.id)}
|
||||
{@const isLast = i === entries.length - 1}
|
||||
{@const icon = typeIcon(entry.type)}
|
||||
{@const isOpen = expanded.has(entry.id)}
|
||||
{@const time = formatTime(entry.timestamp)}
|
||||
|
||||
377
web/src/lib/components/ChatThread.svelte
Normal file
377
web/src/lib/components/ChatThread.svelte
Normal file
@@ -0,0 +1,377 @@
|
||||
<script lang="ts">
|
||||
// Pure prop-driven transcript + input — no store imports. Both the main
|
||||
// Chat page (singleton "current session" stores) and a floating task
|
||||
// window (its own per-session store bundle from chat.ts's chatFor) render
|
||||
// through this, so the message-bubble/markdown styling lives in one place
|
||||
// instead of being copy-pasted between the two.
|
||||
import { activityLog } from '$lib/stores/activity'
|
||||
import AgentIndicator from '$lib/components/AgentIndicator.svelte'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
|
||||
import SquareIcon from '@lucide/svelte/icons/square'
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import type { ChatMessage } from '$lib/stores/chat'
|
||||
|
||||
let {
|
||||
messages,
|
||||
streaming,
|
||||
connectionState,
|
||||
error = null,
|
||||
chatErrors = [],
|
||||
onSend,
|
||||
onCancel,
|
||||
onReconnect,
|
||||
onDismissError,
|
||||
suggestions = []
|
||||
}: {
|
||||
messages: ChatMessage[]
|
||||
streaming: boolean
|
||||
connectionState: 'connected' | 'disconnected' | 'reconnecting'
|
||||
error?: string | null
|
||||
chatErrors?: { id: string; message: string; action?: string }[]
|
||||
onSend: (text: string) => void
|
||||
onCancel: () => void
|
||||
onReconnect: () => void
|
||||
onDismissError: (id: string) => void
|
||||
suggestions?: string[]
|
||||
} = $props()
|
||||
|
||||
let input = $state('')
|
||||
let messagesEnd = $state<HTMLDivElement | null>(null)
|
||||
let scrolledUp = $state(false)
|
||||
let container = $state<HTMLDivElement | null>(null)
|
||||
|
||||
function isNearBottom(): boolean {
|
||||
if (!container) return true
|
||||
const { scrollTop, scrollHeight, clientHeight } = container
|
||||
return scrollHeight - scrollTop - clientHeight < 80
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
scrolledUp = !isNearBottom()
|
||||
}
|
||||
|
||||
// Auto-scroll to bottom on new messages — unless user scrolled up to read.
|
||||
$effect(() => {
|
||||
void messages
|
||||
if (streaming || !scrolledUp) {
|
||||
setTimeout(() => messagesEnd?.scrollIntoView({ behavior: 'smooth' }), 50)
|
||||
}
|
||||
})
|
||||
|
||||
function render(text: string): string {
|
||||
return DOMPurify.sanitize(marked.parse(text, { async: false }) as string)
|
||||
}
|
||||
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text || streaming) return
|
||||
input = ''
|
||||
scrolledUp = false
|
||||
onSend(text)
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
function ask(q: string) {
|
||||
if (streaming) return
|
||||
onSend(q)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
<div class="min-h-0 flex-1 overflow-y-auto" bind:this={container} onscroll={onScroll}>
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-5 p-4">
|
||||
{#if messages.length === 0}
|
||||
<div class="flex flex-col items-center gap-6 pt-24 text-center">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold">Nomos</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">Your resident operator. Ask about the fleet, or tell it to act.</p>
|
||||
</div>
|
||||
{#if suggestions.length}
|
||||
<div class="grid w-full max-w-md grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{#each suggestions as q}
|
||||
<Button variant="outline" size="sm" class="h-auto justify-start whitespace-normal py-2 text-left text-xs" onclick={() => ask(q)}>
|
||||
{q}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each messages as msg (msg.id)}
|
||||
<div class="flex flex-col gap-1.5 {msg.role === 'user' ? 'items-end' : 'items-start'}">
|
||||
{#if msg.role === 'user'}
|
||||
<div class="max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm text-primary-foreground whitespace-pre-wrap user-msg">{msg.text}</div>
|
||||
{:else}
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
{#if msg.text}
|
||||
<div class="prose-chat max-w-none text-sm leading-relaxed assistant-msg">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags — sanitized via DOMPurify -->
|
||||
{@html render(msg.text)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<AgentIndicator
|
||||
active={streaming || $activityLog.some((e) => e.status === 'running')}
|
||||
lastActivity={$activityLog.find((e) => e.status === 'running') ?? null}
|
||||
{error}
|
||||
/>
|
||||
<div bind:this={messagesEnd}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if connectionState === 'disconnected'}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border border-warning/50 bg-warning/10 px-3 py-2 text-xs">
|
||||
<RefreshCwIcon class="size-3 shrink-0" aria-hidden="true" />
|
||||
<span class="text-warning-foreground flex-1">Agent connection lost. The task may still be running.</span>
|
||||
<Button size="xs" variant="outline" class="h-6 text-[11px]" onclick={onReconnect}>Reconnect</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if connectionState === 'reconnecting'}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border bg-muted/50 px-3 py-2 text-xs">
|
||||
<RefreshCwIcon class="size-3 shrink-0 animate-spin text-muted-foreground" aria-hidden="true" />
|
||||
<span class="text-muted-foreground flex-1">Reconnecting to agent…</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each chatErrors as err (err.id)}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
|
||||
<span class="flex-1">{err.message}</span>
|
||||
{#if err.action}
|
||||
<Button size="xs" variant="ghost" class="h-6 text-[11px]" onclick={() => onDismissError(err.id)}>{err.action}</Button>
|
||||
{/if}
|
||||
<button class="ml-1 text-muted-foreground hover:text-foreground" onclick={() => onDismissError(err.id)} aria-label="Dismiss">×</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="border-t bg-card/50 p-3 input-ornament relative">
|
||||
<form
|
||||
class="mx-auto flex max-w-3xl items-end gap-2"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Ask Nomos anything…"
|
||||
rows={2}
|
||||
class="max-h-40 min-h-0 resize-none"
|
||||
disabled={streaming}
|
||||
/>
|
||||
{#if streaming}
|
||||
<Button type="button" size="icon" variant="destructive" onclick={onCancel} aria-label="Stop">
|
||||
<SquareIcon />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Send">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ── Art Nouveau chat styling ── */
|
||||
|
||||
/* Assistant message wrapper */
|
||||
.assistant-msg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* User message — soft terracotta bubble, gentle lift */
|
||||
.user-msg {
|
||||
box-shadow: 0 1px 8px -4px var(--primary);
|
||||
}
|
||||
|
||||
/* Prose overrides */
|
||||
.prose-chat :global(p) {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.prose-chat :global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose-chat :global(ul),
|
||||
.prose-chat :global(ol) {
|
||||
margin: 0 0 0.5rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.prose-chat :global(ul) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.prose-chat :global(ol) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.prose-chat :global(li) {
|
||||
margin-bottom: 0.125rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.prose-chat :global(li::marker) {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.prose-chat :global(code) {
|
||||
background: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.4em;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.prose-chat :global(pre) {
|
||||
background: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 0.875rem;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
.prose-chat :global(pre)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--primary), transparent);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.prose-chat :global(pre code) {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Section headings — serif (Inknut) with a short accent rule. Extra top
|
||||
margin separates sections; the first heading in a message doesn't. */
|
||||
.prose-chat :global(h1),
|
||||
.prose-chat :global(h2),
|
||||
.prose-chat :global(h3) {
|
||||
font-weight: 600;
|
||||
margin: 1.15rem 0 0.4rem;
|
||||
font-size: 1.03em;
|
||||
letter-spacing: 0.01em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.prose-chat :global(> h1:first-child),
|
||||
.prose-chat :global(> h2:first-child),
|
||||
.prose-chat :global(> h3:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose-chat :global(h1)::after,
|
||||
.prose-chat :global(h2)::after,
|
||||
.prose-chat :global(h3)::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2px;
|
||||
margin-top: 4px;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to right, var(--primary), transparent);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.prose-chat :global(table) {
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.prose-chat :global(th) {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose-chat :global(th),
|
||||
.prose-chat :global(td) {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.3rem 0.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose-chat :global(blockquote) {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
margin: 0 0 0.5rem;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
}
|
||||
.prose-chat :global(blockquote)::before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
left: -0.15rem;
|
||||
top: -0.35rem;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary);
|
||||
opacity: 0.6;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.prose-chat :global(hr) {
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 0.75rem 0;
|
||||
background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
|
||||
}
|
||||
|
||||
/* Bold is emphasis, not color — dark weight reads cleanly and lets the
|
||||
terracotta accent stay meaningful (code, headings, links). */
|
||||
.prose-chat :global(strong) {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose-chat :global(a) {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Input area ornament */
|
||||
.input-ornament::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--primary), transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Global floating-window layer — mounted once in App.svelte, above every
|
||||
// page, so an entity opened from Knowledge Base, chat, or anywhere else
|
||||
// lands in the same window stack instead of each page owning its own
|
||||
// single-entity sidebar/sheet. See $lib/stores/windows.ts.
|
||||
import { dk, wmState, openEntityWindow } from '$lib/stores/windows'
|
||||
import EntityDetailContent from './EntityDetailContent.svelte'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import MinusIcon from '@lucide/svelte/icons/minus'
|
||||
</script>
|
||||
|
||||
<div use:dk.desktop class="pointer-events-none fixed inset-0 z-40">
|
||||
{#each $wmState.order as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{#if win}
|
||||
<section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
|
||||
<header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
|
||||
<span data-wm-title class="min-w-0 flex-1 truncate font-mono text-xs font-medium">{win.title}</span>
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
data-wm-minimize
|
||||
class="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Minimize {win.title}"
|
||||
>
|
||||
<MinusIcon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-close
|
||||
class="rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div data-wm-content class="min-h-0 flex-1 overflow-hidden">
|
||||
{#key id}
|
||||
<EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
|
||||
{/key}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,13 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte'
|
||||
import { forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY, type Simulation } from 'd3-force'
|
||||
import { fetchGraph, fetchEntityTypes, type GraphView, type Entity, type Health } from '$lib/api'
|
||||
import { fetchGraph, type GraphView, type Entity, type Health } from '$lib/api'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import { typeToCategory, type Category } from '$lib/categories'
|
||||
import { Skeleton } from '$lib/components/ui/skeleton'
|
||||
|
||||
export interface GraphInfo {
|
||||
allNodeTypes: string[]
|
||||
allRelTypes: string[]
|
||||
relColors: Map<string, string>
|
||||
visibleCount: number
|
||||
@@ -16,7 +14,6 @@
|
||||
}
|
||||
|
||||
let {
|
||||
category,
|
||||
selectedSlug = null,
|
||||
onSelect,
|
||||
root = $bindable(''),
|
||||
@@ -24,11 +21,12 @@
|
||||
search,
|
||||
reloadToken,
|
||||
resetToken,
|
||||
activeNodeTypes = $bindable(new Set<string>()),
|
||||
// Owned by the parent (shared with the entity table's type filter) —
|
||||
// this graph only reads it to decide what's in focus, never writes it.
|
||||
activeNodeTypes,
|
||||
activeRelTypes = $bindable(new Set<string>()),
|
||||
info = $bindable<GraphInfo>({ allNodeTypes: [], allRelTypes: [], relColors: new Map(), visibleCount: 0, truncated: false, zoomPct: 100 })
|
||||
info = $bindable<GraphInfo>({ allRelTypes: [], relColors: new Map(), visibleCount: 0, truncated: false, zoomPct: 100 })
|
||||
}: {
|
||||
category: Category
|
||||
selectedSlug?: string | null
|
||||
onSelect: (slug: string | null) => void
|
||||
root?: string
|
||||
@@ -39,7 +37,7 @@
|
||||
// this resizable pane), so they can't call load()/resetView() directly.
|
||||
reloadToken: number
|
||||
resetToken: number
|
||||
activeNodeTypes?: Set<string>
|
||||
activeNodeTypes: Set<string>
|
||||
activeRelTypes?: Set<string>
|
||||
info?: GraphInfo
|
||||
} = $props()
|
||||
@@ -59,19 +57,20 @@
|
||||
type: string
|
||||
}
|
||||
|
||||
// SVG ids are document-global, not scoped to this <svg> — see
|
||||
// SessionGraph.svelte's dotGridId for why this needs a per-instance suffix
|
||||
// (also covers the per-relationship-type arrow markers below, which were
|
||||
// keyed only by type name and would collide the same way across two
|
||||
// mounted EntityGraph instances).
|
||||
const uid = crypto.randomUUID().slice(0, 8)
|
||||
const dotGridId = `dot-grid-${uid}`
|
||||
|
||||
let graph = $state<GraphView | null>(null)
|
||||
let loading = $state(true)
|
||||
let nodes = $state<Node[]>([])
|
||||
let links = $state<Link[]>([])
|
||||
let sim: Simulation<Node, Link> | null = null
|
||||
|
||||
// type → browsing category, so the graph can be scoped client-side (the
|
||||
// graph endpoint itself has no category/domain param). Value is undefined
|
||||
// for types deliberately excluded from every category (e.g. execution/
|
||||
// check/task — see categories.ts); the key is still present so inCategory
|
||||
// can tell "excluded on purpose" apart from "not in the ontology at all."
|
||||
let typeCategory = $state<Map<string, Category | undefined>>(new Map())
|
||||
|
||||
let hoveredId = $state<string | null>(null)
|
||||
|
||||
// viewport transform: translate(x, y) scale(k)
|
||||
@@ -101,7 +100,7 @@
|
||||
}
|
||||
|
||||
function markerId(type: string): string {
|
||||
return 'arrow-' + type.replace(/[^a-z0-9]/gi, '_')
|
||||
return `arrow-${uid}-` + type.replace(/[^a-z0-9]/gi, '_')
|
||||
}
|
||||
|
||||
function endpoint(end: string | Node): Node | undefined {
|
||||
@@ -111,46 +110,7 @@
|
||||
return typeof end === 'object' ? end.id : end
|
||||
}
|
||||
|
||||
// Node belongs to the active category? Types the ontology never returned
|
||||
// at all fall back to visible (so a missing entry never blanks the
|
||||
// graph); types the ontology returned but categories.ts deliberately
|
||||
// excludes (key present, value undefined) do not.
|
||||
function inCategory(type: string): boolean {
|
||||
if (!typeCategory.has(type)) return true
|
||||
return typeCategory.get(type) === category
|
||||
}
|
||||
|
||||
// Brand-new nodes (no `prev`) get x/y left undefined, and d3-force's
|
||||
// default init spreads those via a spiral centered on the ORIGIN — not
|
||||
// (width/2, height/2) — while the x/y centering forces below are
|
||||
// deliberately weak (0.04, so they don't fight the link/collide layout).
|
||||
// Together that meant the cluster could settle noticeably off-origin
|
||||
// instead of centered. Fixed by explicitly fitting the viewport to the
|
||||
// node bounding box once the simulation settles, rather than relying on
|
||||
// the force balance to land on center by itself.
|
||||
function fitToView() {
|
||||
const placed = nodes.filter((n) => n.x != null && n.y != null)
|
||||
if (!placed.length) return
|
||||
const xs = placed.map((n) => n.x as number)
|
||||
const ys = placed.map((n) => n.y as number)
|
||||
const minX = Math.min(...xs)
|
||||
const maxX = Math.max(...xs)
|
||||
const minY = Math.min(...ys)
|
||||
const maxY = Math.max(...ys)
|
||||
const pad = 70
|
||||
const bw = Math.max(maxX - minX, 1)
|
||||
const bh = Math.max(maxY - minY, 1)
|
||||
const k = Math.min((width - pad * 2) / bw, (height - pad * 2) / bh, 2.5)
|
||||
const cx = (minX + maxX) / 2
|
||||
const cy = (minY + maxY) / 2
|
||||
view = { k, x: width / 2 - cx * k, y: height / 2 - cy * k }
|
||||
}
|
||||
|
||||
// fit=false for passive background reloads (live entity/relationship
|
||||
// events) — those shouldn't yank the view out from under someone
|
||||
// actively panning/zooming. Fresh loads (mount, root/depth change,
|
||||
// reset, re-root) default to fit=true.
|
||||
async function load(fit = true) {
|
||||
async function load() {
|
||||
loading = true
|
||||
graph = await fetchGraph({ root: root || undefined, depth, includeStatus: true })
|
||||
loading = false
|
||||
@@ -176,8 +136,8 @@
|
||||
type: e.type
|
||||
}))
|
||||
|
||||
// Default the node/edge-type toggles to the types present in the active category.
|
||||
activeNodeTypes = new Set(nodes.filter((n) => inCategory(n.type)).map((n) => n.type))
|
||||
// Edge-type toggles default to everything present — node-type toggles
|
||||
// are owned by the parent (activeNodeTypes) and persist across reloads.
|
||||
activeRelTypes = new Set(links.map((l) => l.type))
|
||||
|
||||
sim?.stop()
|
||||
@@ -193,17 +153,9 @@
|
||||
.on('tick', () => {
|
||||
nodes = [...nodes]
|
||||
})
|
||||
.on('end', () => {
|
||||
if (fit) fitToView()
|
||||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchEntityTypes().then((types) => {
|
||||
typeCategory = new Map(types.map((t) => [t.name, typeToCategory(t.name, t.domain)]))
|
||||
// Re-derive the active node types now that category membership is known.
|
||||
activeNodeTypes = new Set(nodes.filter((n) => inCategory(n.type)).map((n) => n.type))
|
||||
})
|
||||
load()
|
||||
const unsubscribe = subscribeEvents()
|
||||
return () => {
|
||||
@@ -214,17 +166,11 @@
|
||||
|
||||
onDestroy(() => sim?.stop())
|
||||
|
||||
// When the category perspective changes, reset the node-type toggles to it.
|
||||
$effect(() => {
|
||||
category
|
||||
activeNodeTypes = new Set(nodes.filter((n) => inCategory(n.type)).map((n) => n.type))
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
const ev = $liveEvents[0]
|
||||
if (!ev) return
|
||||
if (ev.type.startsWith('entity.') || ev.type.startsWith('relationship.') || ev.type === 'health.changed') {
|
||||
load(false)
|
||||
load()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -266,14 +212,11 @@
|
||||
return 5 + Math.min(Math.sqrt(node.degree) * 1.6, 7)
|
||||
}
|
||||
|
||||
// Only offer node-type toggles that live in the active category.
|
||||
const allNodeTypes = $derived(Array.from(new Set(nodes.filter((n) => inCategory(n.type)).map((n) => n.type))).sort())
|
||||
const allRelTypes = $derived(Array.from(new Set(links.map((l) => l.type))).sort())
|
||||
|
||||
// Publish status/legend info up to the parent toolbar.
|
||||
$effect(() => {
|
||||
info = {
|
||||
allNodeTypes,
|
||||
allRelTypes,
|
||||
relColors: relColorByType,
|
||||
visibleCount: visibleNodeIds.size,
|
||||
@@ -288,21 +231,21 @@
|
||||
return new Set(nodes.filter((n) => n.slug.toLowerCase().includes(q) || n.name.toLowerCase().includes(q)).map((n) => n.id))
|
||||
})
|
||||
|
||||
// Focus = in the active category AND its node-type toggle is on — these
|
||||
// are what the category tab is "about."
|
||||
const focusNodeIds = $derived(new Set(nodes.filter((n) => inCategory(n.type) && activeNodeTypes.has(n.type)).map((n) => n.id)))
|
||||
// Focus = the shared type multiselect (activeNodeTypes) says this type is
|
||||
// visible — same control the entity table filters its rows by.
|
||||
const focusNodeIds = $derived(new Set(nodes.filter((n) => activeNodeTypes.has(n.type)).map((n) => n.id)))
|
||||
|
||||
// Real infra relationships mostly cross category lines (a service sits on
|
||||
// a network, uses storage, runs on an lxc — different categories under
|
||||
// this taxonomy). Hard-hiding any edge whose other end isn't in-category
|
||||
// left focus nodes looking like disconnected dots. Rooted views (the user
|
||||
// is exploring out from one entity) pull in 1-hop neighbors of any
|
||||
// category, dimmed, so the edges — and what they connect to — stay
|
||||
// visible. Unscoped "browse the whole category" views (no root) skip
|
||||
// this: with ~50 focus nodes that touch nearly everything, 1-hop
|
||||
// expansion floods in most of the graph (measured: 417 of 479 total
|
||||
// entities for an unrooted Fleet view) — worse than the isolated-dot
|
||||
// problem it was meant to fix. There, same-category-only edges stay.
|
||||
// Real infra relationships mostly cross type lines (a service sits on a
|
||||
// network, uses storage, runs on an lxc). Hard-hiding any edge whose
|
||||
// other end isn't in the active type set left focus nodes looking like
|
||||
// disconnected dots. Rooted views (the user is exploring out from one
|
||||
// entity) pull in 1-hop neighbors of any type, dimmed, so the edges — and
|
||||
// what they connect to — stay visible. Unscoped "browse everything" views
|
||||
// (no root) skip this: with dozens of focus nodes that touch nearly
|
||||
// everything, 1-hop expansion floods in most of the graph (measured: 417
|
||||
// of 479 total entities for an unrooted Fleet-typed view) — worse than
|
||||
// the isolated-dot problem it was meant to fix. There, same-type-only
|
||||
// edges stay.
|
||||
const neighborNodeIds = $derived.by(() => {
|
||||
const neighbors = new Set<string>()
|
||||
if (!root.trim()) return neighbors
|
||||
@@ -452,7 +395,7 @@
|
||||
onpointercancel={onPointerUp}
|
||||
>
|
||||
<defs>
|
||||
<pattern id="dot-grid" width="12" height="12" patternUnits="userSpaceOnUse">
|
||||
<pattern id={dotGridId} width="12" height="12" patternUnits="userSpaceOnUse">
|
||||
<circle cx="2" cy="2" r="0.8" fill="var(--border)" opacity="0.75" />
|
||||
</pattern>
|
||||
{#each allRelTypes as type}
|
||||
@@ -461,7 +404,7 @@
|
||||
</marker>
|
||||
{/each}
|
||||
</defs>
|
||||
<rect x="0" y="0" width={width} height={height} fill="url(#dot-grid)" />
|
||||
<rect x="0" y="0" width={width} height={height} fill="url(#{dotGridId})" />
|
||||
<g transform="translate({view.x},{view.y}) scale({view.k})">
|
||||
<g>
|
||||
{#each links as link}
|
||||
@@ -472,25 +415,31 @@
|
||||
{@const dx = t.x - s.x}
|
||||
{@const dy = t.y - s.y}
|
||||
{@const len = Math.max(Math.hypot(dx, dy), 1)}
|
||||
{@const curve = Math.min(len * 0.15, 40)}
|
||||
{@const cx = (s.x + t.x) / 2 - (dy / len) * curve}
|
||||
{@const cy = (s.y + t.y) / 2 + (dx / len) * curve}
|
||||
{@const cdx = t.x - cx}
|
||||
{@const cdy = t.y - cy}
|
||||
{@const clen = Math.max(Math.hypot(cdx, cdy), 1)}
|
||||
{@const tr = nodeRadius(t) + 3}
|
||||
{@const ex = t.x - (dx / len) * tr}
|
||||
{@const ey = t.y - (dy / len) * tr}
|
||||
<line
|
||||
x1={s.x}
|
||||
y1={s.y}
|
||||
x2={ex}
|
||||
y2={ey}
|
||||
{@const ex = t.x - (cdx / clen) * tr}
|
||||
{@const ey = t.y - (cdy / clen) * tr}
|
||||
{@const mx = 0.25 * s.x + 0.5 * cx + 0.25 * ex}
|
||||
{@const my = 0.25 * s.y + 0.5 * cy + 0.25 * ey}
|
||||
<path
|
||||
d="M {s.x},{s.y} Q {cx},{cy} {ex},{ey}"
|
||||
fill="none"
|
||||
stroke={relColor(link.type)}
|
||||
stroke-width={vs.emphasized ? 2 : 1.2}
|
||||
opacity={vs.opacity}
|
||||
marker-end="url(#{markerId(link.type)})"
|
||||
>
|
||||
<title>{link.type}</title>
|
||||
</line>
|
||||
</path>
|
||||
{#if vs.emphasized && view.k >= 0.7}
|
||||
<text
|
||||
x={(s.x + ex) / 2}
|
||||
y={(s.y + ey) / 2 - 4}
|
||||
x={mx}
|
||||
y={my - 4}
|
||||
text-anchor="middle"
|
||||
font-size={10 / view.k}
|
||||
fill={relColor(link.type)}
|
||||
|
||||
@@ -198,8 +198,14 @@
|
||||
const z = (s.z + tg.z) / 2
|
||||
const a = project(s.x, s.y!, z)
|
||||
const b = project(tg.x, tg.y!, z)
|
||||
const dx = b.x - a.x
|
||||
const dy = b.y - a.y
|
||||
const len = Math.max(Math.hypot(dx, dy), 1)
|
||||
const curve = Math.min(len * 0.15, 40)
|
||||
const mx = (a.x + b.x) / 2 - (dy / len) * curve
|
||||
const my = (a.y + b.y) / 2 + (dx / len) * curve
|
||||
ctx.moveTo(a.x, a.y)
|
||||
ctx.lineTo(b.x, b.y)
|
||||
ctx.quadraticCurveTo(mx, my, b.x, b.y)
|
||||
}
|
||||
ctx.stroke()
|
||||
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { openQuestion } from '$lib/stores/workspace'
|
||||
import { currentSession } from '$lib/stores/chat'
|
||||
import { answerQuestion as postAnswer } from '$lib/api'
|
||||
import { answerQuestion as postAnswer, type SessionQuestion } from '$lib/api'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import CircleHelpIcon from '@lucide/svelte/icons/circle-help'
|
||||
|
||||
// Prop-driven (not store-imported) — see SessionGraph.svelte for why.
|
||||
let { sessionId, question }: { sessionId: string | null; question: SessionQuestion | null } = $props()
|
||||
|
||||
let freeText = $state('')
|
||||
let submitting = $state(false)
|
||||
|
||||
async function submit(answer: string) {
|
||||
const sid = $currentSession
|
||||
const q = $openQuestion
|
||||
const sid = sessionId
|
||||
const q = question
|
||||
if (!sid || !q || !answer.trim() || submitting) return
|
||||
submitting = true
|
||||
const ok = await postAnswer(sid, q.id, answer.trim())
|
||||
@@ -23,8 +24,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $openQuestion}
|
||||
{@const q = $openQuestion}
|
||||
{#if question}
|
||||
{@const q = question}
|
||||
<div class="flex shrink-0 flex-col gap-2 border-b bg-warning/5 px-3 py-2.5">
|
||||
<div class="flex items-start gap-2">
|
||||
<CircleHelpIcon class="mt-0.5 size-4 shrink-0 text-warning" />
|
||||
|
||||
97
web/src/lib/components/SessionChatWindow.svelte
Normal file
97
web/src/lib/components/SessionChatWindow.svelte
Normal file
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
// Floating-window content for a task/session — the per-window counterpart
|
||||
// to the main Chat page (thread + rail), fully self-contained per
|
||||
// sessionId via chat.ts's chatFor()/loadSessionChat()/sendSessionMessage()
|
||||
// and workspace.ts's workspaceFor()/startSessionWorkspace(), so several of
|
||||
// these can be open (and independently live) at once without the "which
|
||||
// one's on screen" guarding the main page's singleton stores need.
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { chatFor, loadSessionChat, sendSessionMessage, cancelSessionStream, stopSessionPolling, dismissError, chatErrors } from '$lib/stores/chat'
|
||||
import ChatThread from '$lib/components/ChatThread.svelte'
|
||||
import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'
|
||||
|
||||
let { sessionId }: { sessionId: string } = $props()
|
||||
|
||||
// Svelte's `$store` auto-subscription only works on a plain identifier
|
||||
// bound directly to a store, not a member expression — chatFor() returns
|
||||
// an object of stores, so pull each one out into its own identifier here.
|
||||
const chat = chatFor(sessionId)
|
||||
const chatMessages = chat.messages
|
||||
const chatStreaming = chat.streaming
|
||||
const chatConnectionState = chat.connectionState
|
||||
const chatError = chat.error
|
||||
const chatNotFound = chat.notFound
|
||||
let loading = $state(true)
|
||||
|
||||
onMount(async () => {
|
||||
await loadSessionChat(sessionId)
|
||||
loading = false
|
||||
})
|
||||
|
||||
onDestroy(() => stopSessionPolling(sessionId))
|
||||
|
||||
// Resizable right rail — same behavior as Chat.svelte's, sized smaller by
|
||||
// default since task windows open narrower than the full page.
|
||||
const RAIL_MIN = 220
|
||||
const RAIL_MAX = 480
|
||||
let railWidth = $state(260)
|
||||
let resizing = $state(false)
|
||||
|
||||
function startResize(e: PointerEvent) {
|
||||
e.preventDefault()
|
||||
resizing = true
|
||||
const startX = e.clientX
|
||||
const startW = railWidth
|
||||
function move(ev: PointerEvent) {
|
||||
railWidth = Math.min(RAIL_MAX, Math.max(RAIL_MIN, startW + (startX - ev.clientX)))
|
||||
}
|
||||
function up() {
|
||||
resizing = false
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0">
|
||||
{#if loading}
|
||||
<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">Loading…</div>
|
||||
{:else if $chatNotFound}
|
||||
<div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center">
|
||||
<p class="text-sm text-muted-foreground">Task not found.</p>
|
||||
<p class="text-xs text-muted-foreground/70">It may have been deleted.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ChatThread
|
||||
messages={$chatMessages}
|
||||
streaming={$chatStreaming}
|
||||
connectionState={$chatConnectionState}
|
||||
error={$chatError}
|
||||
chatErrors={$chatErrors}
|
||||
onSend={(text) => sendSessionMessage(sessionId, text)}
|
||||
onCancel={() => cancelSessionStream(sessionId)}
|
||||
onReconnect={() => loadSessionChat(sessionId)}
|
||||
onDismissError={dismissError}
|
||||
/>
|
||||
|
||||
<div class="flex shrink-0" style="width: {railWidth}px">
|
||||
<button
|
||||
type="button"
|
||||
class="group/rz relative w-1.5 shrink-0 cursor-col-resize touch-none"
|
||||
onpointerdown={startResize}
|
||||
aria-label="Resize task panel"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors {resizing
|
||||
? 'bg-primary/60'
|
||||
: 'bg-border group-hover/rz:bg-primary/50'}"
|
||||
></span>
|
||||
</button>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<TaskContextPanel {sessionId} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -11,10 +11,22 @@
|
||||
type Simulation
|
||||
} from 'd3-force'
|
||||
import { fetchGraph, type Entity } from '$lib/api'
|
||||
import { messages } from '$lib/stores/chat'
|
||||
import { touched, healthDiffs } from '$lib/stores/workspace'
|
||||
import type { ChatMessage } from '$lib/stores/chat'
|
||||
import type { TouchedEntity, HealthDiff } from '$lib/stores/workspace'
|
||||
import { openEntityWindow, wmState } from '$lib/stores/windows'
|
||||
|
||||
// Prop-driven (not store-imported) so this can render either the main
|
||||
// page's global "current session" data or a floating task window's own
|
||||
// per-session data — see TaskContextPanel.svelte, which supplies both.
|
||||
let { messages, touched, healthDiffs }: { messages: ChatMessage[]; touched: TouchedEntity[]; healthDiffs: HealthDiff[] } = $props()
|
||||
|
||||
// SVG ids are document-global, not scoped to this <svg> — several task
|
||||
// windows can each have their own Scope graph open at once, and without a
|
||||
// per-instance suffix every one of them would define (and reference)
|
||||
// <pattern id="dot-grid">, so only the first in the document would ever
|
||||
// actually paint (the rest resolve to nothing, background reads blank).
|
||||
const dotGridId = `dot-grid-${crypto.randomUUID().slice(0, 8)}`
|
||||
|
||||
interface Node extends Entity {
|
||||
x?: number
|
||||
y?: number
|
||||
@@ -75,7 +87,7 @@
|
||||
// get_health_summary would otherwise dump all 168 entities into the graph).
|
||||
const candidateSlugs = $derived.by(() => {
|
||||
const out = new Set<string>()
|
||||
for (const m of $messages) {
|
||||
for (const m of messages) {
|
||||
collectSlugs(m.text, out)
|
||||
for (const t of m.tools) collectSlugs(t.args, out)
|
||||
}
|
||||
@@ -203,7 +215,7 @@
|
||||
})
|
||||
|
||||
// The highlight ring/dim styling below is tied to the node whose window
|
||||
// was last opened — once that window is closed (from EntityDesktop, not
|
||||
// was last opened — once that window is closed (from WindowLayer, not
|
||||
// necessarily from here), the ring should go with it rather than pointing
|
||||
// at a window that no longer exists.
|
||||
$effect(() => {
|
||||
@@ -234,15 +246,15 @@
|
||||
// object identity fine and this is small (≤12 touched, ≤8 diffs).
|
||||
const touchedBySlug = $derived.by(() => {
|
||||
const m: Record<string, true> = {}
|
||||
for (const t of $touched) m[t.slug] = true
|
||||
for (const t of touched) m[t.slug] = true
|
||||
return m
|
||||
})
|
||||
const diffBySlug = $derived.by(() => {
|
||||
const m: Record<string, { from: string; to: string }> = {}
|
||||
for (const d of $healthDiffs) if (!(d.slug in m)) m[d.slug] = d
|
||||
for (const d of healthDiffs) if (!(d.slug in m)) m[d.slug] = d
|
||||
return m
|
||||
})
|
||||
const nowTouching = $derived($touched[0] ?? null)
|
||||
const nowTouching = $derived(touched[0] ?? null)
|
||||
|
||||
function endpoint(end: string | Node): Node | undefined {
|
||||
return typeof end === 'object' ? end : nodes.find((n) => n.slug === end)
|
||||
@@ -253,7 +265,7 @@
|
||||
|
||||
// ─── drag / select ───────────────────────────────────────────────────
|
||||
// A click (pointerdown+up with no movement in between) opens the entity
|
||||
// straight in its own floating window (EntityDesktop) instead of a
|
||||
// straight in its own floating window (WindowLayer) instead of a
|
||||
// click-through mini-panel — `selected` now only drives the highlight/dim
|
||||
// styling below, so you can see at a glance which node you last opened.
|
||||
let dragState: { node: Node; moved: boolean } | null = null
|
||||
@@ -348,28 +360,32 @@
|
||||
onpointercancel={onUp}
|
||||
>
|
||||
<defs>
|
||||
<pattern id="dot-grid" width="12" height="12" patternUnits="userSpaceOnUse">
|
||||
<pattern id={dotGridId} width="12" height="12" patternUnits="userSpaceOnUse">
|
||||
<circle cx="2" cy="2" r="0.8" fill="var(--border)" opacity="0.75" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width={cw} height={ch} fill="url(#dot-grid)" />
|
||||
<rect width={cw} height={ch} fill="url(#{dotGridId})" />
|
||||
<g>
|
||||
{#each links as link}
|
||||
{@const s = endpoint(link.source)}
|
||||
{@const t = endpoint(link.target)}
|
||||
{#if s?.x != null && t?.x != null && s?.y != null && t?.y != null}
|
||||
{@const focus = selected && (s.slug === selected.slug || t.slug === selected.slug)}
|
||||
<line
|
||||
x1={s.x}
|
||||
y1={s.y}
|
||||
x2={t.x}
|
||||
y2={t.y}
|
||||
{@const dx = t.x - s.x}
|
||||
{@const dy = t.y - s.y}
|
||||
{@const len = Math.max(Math.hypot(dx, dy), 1)}
|
||||
{@const curve = Math.min(len * 0.15, 40)}
|
||||
{@const cx = (s.x + t.x) / 2 - (dy / len) * curve}
|
||||
{@const cy = (s.y + t.y) / 2 + (dx / len) * curve}
|
||||
<path
|
||||
d="M {s.x},{s.y} Q {cx},{cy} {t.x},{t.y}"
|
||||
fill="none"
|
||||
stroke="var(--muted-foreground)"
|
||||
stroke-width={focus ? 1.6 : 1}
|
||||
opacity={selected ? (focus ? 0.7 : 0.12) : 0.35}
|
||||
>
|
||||
<title>{link.type}</title>
|
||||
</line>
|
||||
</path>
|
||||
{/if}
|
||||
{/each}
|
||||
</g>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { startWorkspace, planSteps, currentTask, touched } from '$lib/stores/workspace'
|
||||
import { activityLog } from '$lib/stores/activity'
|
||||
import { streaming } from '$lib/stores/chat'
|
||||
import { startWorkspace, startSessionWorkspace, planSteps, currentTask, openQuestion, touched, healthDiffs, workspaceFor, taskFor } from '$lib/stores/workspace'
|
||||
import { streaming, messages, currentSession, chatFor } from '$lib/stores/chat'
|
||||
import { activityLog, activityLogFor } from '$lib/stores/activity'
|
||||
import OperatorQuestion from './OperatorQuestion.svelte'
|
||||
import SessionGraph from './SessionGraph.svelte'
|
||||
import ActivityTimeline from './ActivityTimeline.svelte'
|
||||
@@ -16,7 +16,29 @@
|
||||
import CircleSlashIcon from '@lucide/svelte/icons/circle-slash'
|
||||
import CirclePauseIcon from '@lucide/svelte/icons/circle-pause'
|
||||
|
||||
onMount(() => startWorkspace())
|
||||
// Omitted (main Chat page): tracks the global "current session" — one
|
||||
// shared view, same as always. Passed (a floating task window's
|
||||
// SessionChatWindow): this panel switches entirely to that session's own
|
||||
// store bundle (workspaceFor/chatFor/activityLogFor), so several windows'
|
||||
// panels can be open and live at once instead of all showing whatever
|
||||
// happens to be the single global "current session".
|
||||
let { sessionId = null }: { sessionId?: string | null } = $props()
|
||||
|
||||
onMount(() => (sessionId ? startSessionWorkspace(sessionId) : startWorkspace()))
|
||||
|
||||
const ws = $derived(sessionId ? workspaceFor(sessionId) : null)
|
||||
const planStepsStore = $derived(ws ? ws.planSteps : planSteps)
|
||||
const openQuestionStore = $derived(ws ? ws.openQuestion : openQuestion)
|
||||
const touchedStore = $derived(ws ? ws.touched : touched)
|
||||
const healthDiffsStore = $derived(ws ? ws.healthDiffs : healthDiffs)
|
||||
const taskStore = $derived(sessionId ? taskFor(sessionId) : currentTask)
|
||||
const chat = $derived(sessionId ? chatFor(sessionId) : null)
|
||||
const streamingStore = $derived(chat ? chat.streaming : streaming)
|
||||
const messagesStore = $derived(chat ? chat.messages : messages)
|
||||
const activityLogStore = $derived(sessionId ? activityLogFor(sessionId) : activityLog)
|
||||
// OperatorQuestion posts its answer against this id — the window's own
|
||||
// session when set, otherwise whatever the main page currently has open.
|
||||
const effectiveSessionId = $derived(sessionId ?? $currentSession)
|
||||
|
||||
let scopeOpen = $state(true)
|
||||
let planOpen = $state(true)
|
||||
@@ -58,8 +80,8 @@
|
||||
}
|
||||
|
||||
// Plan collapsed status
|
||||
const planDone = $derived($planSteps.filter((s) => s.status === 'done').length)
|
||||
const planTotal = $derived($planSteps.length)
|
||||
const planDone = $derived($planStepsStore.filter((s) => s.status === 'done').length)
|
||||
const planTotal = $derived($planStepsStore.length)
|
||||
const planPct = $derived(planTotal > 0 ? Math.round((planDone / planTotal) * 100) : 0)
|
||||
|
||||
// When there are no plan steps, the empty state depends on WHY: a task that's
|
||||
@@ -67,19 +89,19 @@
|
||||
// but a finished task that never planned (a read-only lookup, a direct answer)
|
||||
// will never get one — a perpetual "Awaiting plan…" there is misleading.
|
||||
const planPhase = $derived.by<'drafting' | 'none' | 'idle'>(() => {
|
||||
const st = $currentTask?.status
|
||||
const st = $taskStore?.status
|
||||
if (st === 'done' || st === 'failed' || st === 'abandoned') return 'none'
|
||||
if (st === 'planning' || $streaming) return 'drafting'
|
||||
if (st === 'planning' || $streamingStore) return 'drafting'
|
||||
return 'idle'
|
||||
})
|
||||
|
||||
// Activity collapsed status
|
||||
const activityRunning = $derived($activityLog.filter((e) => e.status === 'running').length)
|
||||
const activityCount = $derived($activityLog.length)
|
||||
const activityRunning = $derived($activityLogStore.filter((e) => e.status === 'running').length)
|
||||
const activityCount = $derived($activityLogStore.length)
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<OperatorQuestion />
|
||||
<OperatorQuestion sessionId={effectiveSessionId} question={$openQuestionStore} />
|
||||
|
||||
<!-- Scope -->
|
||||
<div class="flex shrink-0 flex-col border-b">
|
||||
@@ -91,12 +113,12 @@
|
||||
{#if scopeOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Scope</span>
|
||||
{#if !scopeOpen}
|
||||
<span class="ml-auto font-normal normal-case">{$touched.length ? `${$touched.length} entit${$touched.length === 1 ? 'y' : 'ies'}` : 'Graph'}</span>
|
||||
<span class="ml-auto font-normal normal-case">{$touchedStore.length ? `${$touchedStore.length} entit${$touchedStore.length === 1 ? 'y' : 'ies'}` : 'Graph'}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{#if scopeOpen}
|
||||
<div style="height: {heights[0]}px">
|
||||
<SessionGraph />
|
||||
<SessionGraph messages={$messagesStore} touched={$touchedStore} healthDiffs={$healthDiffsStore} />
|
||||
</div>
|
||||
<!-- resize handle -->
|
||||
<div
|
||||
@@ -120,8 +142,8 @@
|
||||
{#if !planOpen}
|
||||
{#if planTotal > 0}
|
||||
<span class="ml-auto font-normal normal-case">Step {planDone}/{planTotal}</span>
|
||||
{:else if $currentTask?.goal}
|
||||
<span class="ml-auto max-w-[120px] truncate font-normal normal-case">{$currentTask.goal}</span>
|
||||
{:else if $taskStore?.goal}
|
||||
<span class="ml-auto max-w-[120px] truncate font-normal normal-case">{$taskStore.goal}</span>
|
||||
{:else}
|
||||
<span class="ml-auto font-normal normal-case text-muted-foreground">No plan yet</span>
|
||||
{/if}
|
||||
@@ -129,10 +151,10 @@
|
||||
</button>
|
||||
{#if planOpen}
|
||||
<div style="height: {heights[1]}px" class="flex flex-col overflow-y-auto">
|
||||
{#if $currentTask?.goal}
|
||||
{#if $taskStore?.goal}
|
||||
<div class="flex items-start gap-2 px-3 py-2">
|
||||
<MilestoneIcon class="mt-0.5 size-3 shrink-0 text-primary" />
|
||||
<span class="text-xs leading-snug text-foreground/90">{$currentTask.goal}</span>
|
||||
<span class="text-xs leading-snug text-foreground/90">{$taskStore.goal}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if planTotal > 0}
|
||||
@@ -146,11 +168,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<ol class="flex flex-col overflow-y-auto px-2 pb-2 text-[11px]">
|
||||
{#each $planSteps as step, i (step.id)}
|
||||
{#each $planStepsStore as step, i (step.id)}
|
||||
{@const isDone = step.status === 'done'}
|
||||
{@const isRunning = step.status === 'running'}
|
||||
<li class="relative flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors {isRunning ? 'bg-primary/5' : ''}">
|
||||
{#if i < $planSteps.length - 1}
|
||||
{#if i < $planStepsStore.length - 1}
|
||||
<span class="pointer-events-none absolute bottom-[-2px] left-[13.5px] top-[22px] w-px bg-border" aria-hidden="true"></span>
|
||||
{/if}
|
||||
<span class="relative z-10 mt-px flex size-3.5 shrink-0 items-center justify-center rounded-full bg-background">
|
||||
@@ -242,7 +264,7 @@
|
||||
{#if activityOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Event log</span>
|
||||
{#if !activityOpen}
|
||||
{#if $streaming && activityRunning > 0}
|
||||
{#if $streamingStore && activityRunning > 0}
|
||||
<Spinner class="size-3 text-primary" />
|
||||
<span class="font-normal normal-case text-primary">{activityRunning} running</span>
|
||||
{:else}
|
||||
@@ -252,7 +274,7 @@
|
||||
</button>
|
||||
{#if activityOpen}
|
||||
<div class="min-h-0 flex-1 overflow-hidden">
|
||||
<ActivityTimeline />
|
||||
<ActivityTimeline entries={$activityLogStore} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
163
web/src/lib/components/desktop-shell/Desktop.svelte
Normal file
163
web/src/lib/components/desktop-shell/Desktop.svelte
Normal file
@@ -0,0 +1,163 @@
|
||||
<script lang="ts">
|
||||
// The desktop shell: full-viewport surface (background + icons + the
|
||||
// centered task launcher + the floating window layer) with the taskbar
|
||||
// docked below it as a real flex sibling, not an overlay — so a maximized
|
||||
// or dragged window can never end up underneath the taskbar. This replaces
|
||||
// the old sidebar + hash-routed page shell in App.svelte entirely; apps are
|
||||
// desktop icons now (see $lib/apps.ts), not nav items.
|
||||
import { APPS } from '$lib/apps'
|
||||
import { iconPositions, resetIconLayout } from '$lib/stores/icons'
|
||||
import { wm, openAppWindow, toggleShowDesktop } from '$lib/stores/windows'
|
||||
import { summary } from '$lib/stores/context'
|
||||
import GraphBackground from '../GraphBackground.svelte'
|
||||
import DesktopIcon from './DesktopIcon.svelte'
|
||||
import TaskLauncher from './TaskLauncher.svelte'
|
||||
import WindowLayer from './WindowLayer.svelte'
|
||||
import Taskbar from './Taskbar.svelte'
|
||||
import LayersIcon from '@lucide/svelte/icons/layers'
|
||||
import Rows3Icon from '@lucide/svelte/icons/rows-3'
|
||||
import MonitorIcon from '@lucide/svelte/icons/monitor'
|
||||
import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw'
|
||||
import Undo2Icon from '@lucide/svelte/icons/undo-2'
|
||||
import Redo2Icon from '@lucide/svelte/icons/redo-2'
|
||||
|
||||
let { onOpenConnection }: { onOpenConnection: () => void } = $props()
|
||||
|
||||
// Clicking the bare desktop (not an icon, not a window) blurs the focused
|
||||
// window — the familiar "click empty desktop to deselect" affordance.
|
||||
function onSurfaceClick(e: MouseEvent) {
|
||||
if (e.currentTarget === e.target) wm.blur()
|
||||
}
|
||||
|
||||
// Right-click menu, bare desktop only (same currentTarget===target gate as
|
||||
// onSurfaceClick above — icons and windows sit on pointer-events-auto
|
||||
// layers above the otherwise pointer-events-none surface, so a right-click
|
||||
// that lands on either of them never reaches here). canUndo/canRedo are
|
||||
// plain wmkit method calls (not stores), so they're snapshotted once at
|
||||
// open time rather than read reactively in the template.
|
||||
let menuPos = $state<{ x: number; y: number } | null>(null)
|
||||
let menuCanUndo = $state(false)
|
||||
let menuCanRedo = $state(false)
|
||||
|
||||
function onSurfaceContextMenu(e: MouseEvent) {
|
||||
if (e.currentTarget !== e.target) return
|
||||
e.preventDefault()
|
||||
menuCanUndo = wm.canUndo()
|
||||
menuCanRedo = wm.canRedo()
|
||||
menuPos = { x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuPos = null
|
||||
}
|
||||
|
||||
function runMenuAction(fn: () => void) {
|
||||
fn()
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
// Cmd/Ctrl+Z / Shift+Z for window-arrangement undo/redo (move, resize,
|
||||
// close, ...) — wmkit tracks this history but ships no default keybinding.
|
||||
// Skipped entirely while an editable element has focus so it never
|
||||
// fights the browser's own text-undo inside the task input or a form
|
||||
// field.
|
||||
function onWindowKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && menuPos) {
|
||||
closeMenu()
|
||||
return
|
||||
}
|
||||
const target = e.target as HTMLElement | null
|
||||
const editable = !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
|
||||
if (editable) return
|
||||
if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z') return
|
||||
e.preventDefault()
|
||||
if (e.shiftKey) wm.redo()
|
||||
else wm.undo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={onWindowKeydown} onclick={closeMenu} />
|
||||
|
||||
<div class="fixed inset-0 flex flex-col">
|
||||
<div
|
||||
class="relative min-h-0 flex-1 overflow-hidden"
|
||||
role="presentation"
|
||||
onclick={onSurfaceClick}
|
||||
oncontextmenu={onSurfaceContextMenu}
|
||||
>
|
||||
<GraphBackground />
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-0">
|
||||
{#each APPS as app (app.id)}
|
||||
{@const pos = $iconPositions[app.id] ?? { col: 0, row: 0 }}
|
||||
{@const badge = app.badge?.($summary) ?? 0}
|
||||
<DesktopIcon {app} {pos} {badge} onOpen={() => openAppWindow(app.id)} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
|
||||
<div class="pointer-events-auto">
|
||||
<TaskLauncher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<WindowLayer />
|
||||
</div>
|
||||
|
||||
<Taskbar {onOpenConnection} />
|
||||
</div>
|
||||
|
||||
{#if menuPos}
|
||||
<div
|
||||
class="fixed z-50 min-w-48 rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10"
|
||||
style="left: {menuPos.x}px; top: {menuPos.y}px"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(() => wm.arrange('cascade'))}
|
||||
>
|
||||
<LayersIcon class="size-4" /> Cascade windows
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(() => wm.arrange('tile'))}
|
||||
>
|
||||
<Rows3Icon class="size-4" /> Tile windows
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(toggleShowDesktop)}
|
||||
>
|
||||
<MonitorIcon class="size-4" /> Show desktop
|
||||
</button>
|
||||
<div class="my-1 h-px bg-border"></div>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(resetIconLayout)}
|
||||
>
|
||||
<RotateCcwIcon class="size-4" /> Reset icon layout
|
||||
</button>
|
||||
<div class="my-1 h-px bg-border"></div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!menuCanUndo}
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
onclick={() => runMenuAction(() => wm.undo())}
|
||||
>
|
||||
<Undo2Icon class="size-4" /> Undo
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!menuCanRedo}
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
onclick={() => runMenuAction(() => wm.redo())}
|
||||
>
|
||||
<Redo2Icon class="size-4" /> Redo
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
100
web/src/lib/components/desktop-shell/DesktopIcon.svelte
Normal file
100
web/src/lib/components/desktop-shell/DesktopIcon.svelte
Normal file
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
// A single desktop icon: positioned from the grid store, draggable to any
|
||||
// free cell, opens its app on a plain click. wmkit has nothing to do with
|
||||
// icons — they're a flat non-overlapping grid, not floating/resizable
|
||||
// windows, so this is a small self-contained pointer-drag implementation
|
||||
// rather than pressing wmkit's window abstractions into a shape they don't
|
||||
// fit. See $lib/stores/icons.ts for the grid model + persistence.
|
||||
import { GRID, iconPixelPos, placeIcon, type IconPos } from '$lib/stores/icons'
|
||||
import type { AppDef } from '$lib/apps'
|
||||
|
||||
let {
|
||||
app,
|
||||
pos,
|
||||
badge = 0,
|
||||
onOpen
|
||||
}: { app: AppDef; pos: IconPos; badge?: number; onOpen: () => void } = $props()
|
||||
|
||||
const DRAG_THRESHOLD = 5
|
||||
|
||||
let dragging = $state(false)
|
||||
let dragPos = $state<{ x: number; y: number } | null>(null)
|
||||
|
||||
function toCell(x: number, y: number): IconPos {
|
||||
return {
|
||||
col: Math.round((x - GRID.padding) / (GRID.cell + GRID.gap)),
|
||||
row: Math.round((y - GRID.padding) / (GRID.cell + GRID.gap))
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (e.button !== 0) return
|
||||
const el = e.currentTarget as HTMLElement
|
||||
const startX = e.clientX
|
||||
const startY = e.clientY
|
||||
const origin = iconPixelPos(pos)
|
||||
let moved = false
|
||||
|
||||
el.setPointerCapture(e.pointerId)
|
||||
|
||||
function onMove(ev: PointerEvent) {
|
||||
const dx = ev.clientX - startX
|
||||
const dy = ev.clientY - startY
|
||||
if (!moved && Math.hypot(dx, dy) > DRAG_THRESHOLD) {
|
||||
moved = true
|
||||
dragging = true
|
||||
}
|
||||
if (moved) {
|
||||
dragPos = { x: origin.x + dx, y: origin.y + dy }
|
||||
}
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
el.removeEventListener('pointermove', onMove)
|
||||
el.removeEventListener('pointerup', onUp)
|
||||
if (moved && dragPos) {
|
||||
const cell = toCell(dragPos.x, dragPos.y)
|
||||
placeIcon(app.id, cell.col, cell.row)
|
||||
} else {
|
||||
onOpen()
|
||||
}
|
||||
dragging = false
|
||||
dragPos = null
|
||||
}
|
||||
|
||||
el.addEventListener('pointermove', onMove)
|
||||
el.addEventListener('pointerup', onUp)
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
onOpen()
|
||||
}
|
||||
}
|
||||
|
||||
const restPos = $derived(iconPixelPos(pos))
|
||||
const left = $derived(dragging && dragPos ? dragPos.x : restPos.x)
|
||||
const top = $derived(dragging && dragPos ? dragPos.y : restPos.y)
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="group absolute flex flex-col items-center gap-1 rounded-lg p-1.5 pointer-events-auto select-none focus-visible:outline-2 focus-visible:outline-ring {dragging
|
||||
? 'z-50 cursor-grabbing bg-accent/40'
|
||||
: 'cursor-pointer hover:bg-accent/30'}"
|
||||
style="left: {left}px; top: {top}px; width: {GRID.cell}px;"
|
||||
onpointerdown={onPointerDown}
|
||||
onkeydown={onKeydown}
|
||||
title={app.title}
|
||||
>
|
||||
<span class="relative flex size-10 items-center justify-center rounded-xl border bg-card/80 text-foreground shadow-sm backdrop-blur">
|
||||
<app.icon class="size-5" />
|
||||
{#if badge > 0}
|
||||
<span class="absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-destructive-foreground">
|
||||
{badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="max-w-full truncate text-[11px] text-foreground/90">{app.title}</span>
|
||||
</button>
|
||||
62
web/src/lib/components/desktop-shell/TaskLauncher.svelte
Normal file
62
web/src/lib/components/desktop-shell/TaskLauncher.svelte
Normal file
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
// "What should Nomos do?" — the desktop's centerpiece. Extracted from the
|
||||
// old Overview page hero so both the desktop surface and the Tasks app
|
||||
// window can mount it; startTask() (see $lib/stores/chat.ts) begins the
|
||||
// stream immediately and hands back the session id once the backend
|
||||
// assigns one, which is the earliest point a task window can be opened.
|
||||
import { startTask } from '$lib/stores/chat'
|
||||
import { openTaskWindow } from '$lib/stores/windows'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
|
||||
let { compact = false, onStarted }: { compact?: boolean; onStarted?: () => void } = $props()
|
||||
|
||||
let input = $state('')
|
||||
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
input = ''
|
||||
startTask(text, (sessionId) => openTaskWindow(sessionId, truncateMiddle(text, 60)))
|
||||
onStarted?.()
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-2xl text-center">
|
||||
{#if !compact}
|
||||
<h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Describe a goal — Nomos will plan it, execute it, and report the outcome.
|
||||
</p>
|
||||
{/if}
|
||||
<form
|
||||
class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
|
||||
rows={compact ? 2 : 3}
|
||||
class="max-h-52 min-h-24 resize-none border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center justify-between px-3 pb-3">
|
||||
<span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
131
web/src/lib/components/desktop-shell/Taskbar.svelte
Normal file
131
web/src/lib/components/desktop-shell/Taskbar.svelte
Normal file
@@ -0,0 +1,131 @@
|
||||
<script lang="ts">
|
||||
// Bottom taskbar: a real flex row in the page layout (not an overlay), so
|
||||
// windows can never be dragged/maximized underneath it — see Desktop.svelte
|
||||
// for how the window layer's bounds are scoped to the surface above this.
|
||||
// Shows a button for every open window (not just minimized ones — compare
|
||||
// to the old MinimizedWindowsBar, which only ever showed minimized windows
|
||||
// and gave no way to see/switch between windows that were merely
|
||||
// unfocused), plus a system tray for theme/connection/version.
|
||||
import { wm, wmState, toggleShowDesktop } from '$lib/stores/windows'
|
||||
import { appById, appIdFromWindowId } from '$lib/apps'
|
||||
import { summary } from '$lib/stores/context'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { getTheme, toggleTheme, THEME_LABELS } from '$lib/stores/theme.svelte'
|
||||
import { VERSION } from '$lib/version'
|
||||
import MessageSquareIcon from '@lucide/svelte/icons/message-square'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import PaletteIcon from '@lucide/svelte/icons/palette'
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings'
|
||||
import LayoutGridIcon from '@lucide/svelte/icons/layout-grid'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
|
||||
let { onOpenConnection }: { onOpenConnection: () => void } = $props()
|
||||
|
||||
const SESSION_PREFIX = 'session:'
|
||||
|
||||
const buttons = $derived(
|
||||
[...$wmState.order]
|
||||
.map((id) => $wmState.windows[id])
|
||||
.filter((w): w is NonNullable<typeof w> => !!w)
|
||||
.sort((a, b) => a.openedSeq - b.openedSeq)
|
||||
)
|
||||
|
||||
function iconFor(id: string) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId) return appById.get(appId)?.icon
|
||||
if (id.startsWith(SESSION_PREFIX)) return MessageSquareIcon
|
||||
return DatabaseIcon
|
||||
}
|
||||
|
||||
function badgeFor(id: string): number {
|
||||
const appId = appIdFromWindowId(id)
|
||||
const app = appId ? appById.get(appId) : undefined
|
||||
return app?.badge?.($summary) ?? 0
|
||||
}
|
||||
|
||||
function toggle(id: string, win: (typeof buttons)[number]) {
|
||||
if (win.stage === 'minimized') {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
} else if ($wmState.focusedId === id) {
|
||||
wm.minimize(id)
|
||||
} else {
|
||||
wm.focus(id)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex h-11 shrink-0 items-center gap-1.5 border-t bg-muted/30 px-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={toggleShowDesktop}
|
||||
title="Show desktop"
|
||||
>
|
||||
<LayoutGridIcon class="size-4" />
|
||||
</button>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-border"></div>
|
||||
|
||||
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
|
||||
{#each buttons as win (win.id)}
|
||||
{@const Icon = iconFor(win.id)}
|
||||
{@const badge = badgeFor(win.id)}
|
||||
<div class="group/tb relative flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
data-taskbar-btn={win.id}
|
||||
class="flex h-8 max-w-56 items-center gap-1.5 rounded-md border px-2 font-mono text-xs transition-colors {$wmState.focusedId ===
|
||||
win.id && win.stage !== 'minimized'
|
||||
? 'border-primary/50 bg-primary/10 text-foreground'
|
||||
: 'border-transparent bg-card/60 text-muted-foreground hover:bg-muted'} {win.stage === 'minimized' ? 'opacity-60' : ''}"
|
||||
onclick={() => toggle(win.id, win)}
|
||||
title={win.title}
|
||||
>
|
||||
{#if Icon}<Icon class="size-3.5 shrink-0" />{/if}
|
||||
<span class="min-w-0 truncate">{truncateMiddle(win.title, 26)}</span>
|
||||
{#if badge > 0}
|
||||
<span class="flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold text-destructive-foreground">
|
||||
{badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute -top-1.5 -right-1.5 hidden size-4 items-center justify-center rounded-full bg-muted-foreground/80 text-background hover:bg-destructive group-hover/tb:flex"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation()
|
||||
wm.close(win.id)
|
||||
}}
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-border"></div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center gap-1.5 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={() => toggleTheme()}
|
||||
title="Cycle theme"
|
||||
>
|
||||
<PaletteIcon class="size-4" />
|
||||
<span class="hidden text-xs sm:inline">{THEME_LABELS[getTheme()]}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={onOpenConnection}
|
||||
title="Server connection settings"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
</button>
|
||||
<span class="px-1.5 text-[11px] text-muted-foreground select-none">{VERSION}</span>
|
||||
</div>
|
||||
</div>
|
||||
89
web/src/lib/components/desktop-shell/WindowLayer.svelte
Normal file
89
web/src/lib/components/desktop-shell/WindowLayer.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
// The floating-window layer — mounted once inside Desktop.svelte, above the
|
||||
// icons layer, so every window (an app, a task, an entity detail) shares
|
||||
// one stack instead of each page owning its own single-entity
|
||||
// sidebar/sheet. See $lib/stores/windows.ts. Content is resolved purely
|
||||
// from the window's id, which is why persisted/hydrated windows (see
|
||||
// wmPersist in windows.ts) need no extra bookkeeping to know what to render:
|
||||
// app:<id> -> registry component (windows.ts openAppWindow)
|
||||
// session:<id> -> SessionChatWindow (windows.ts openTaskWindow)
|
||||
// new-task -> TaskLauncher (windows.ts openNewTaskWindow)
|
||||
// anything else -> entity slug -> EntityDetailContent
|
||||
import { wm, dk, wmState, openEntityWindow, NEW_TASK_WINDOW_ID } from '$lib/stores/windows'
|
||||
import { appById, appIdFromWindowId } from '$lib/apps'
|
||||
import EntityDetailContent from '../EntityDetailContent.svelte'
|
||||
import SessionChatWindow from '../SessionChatWindow.svelte'
|
||||
import TaskLauncher from './TaskLauncher.svelte'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import MinusIcon from '@lucide/svelte/icons/minus'
|
||||
import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
|
||||
|
||||
const SESSION_PREFIX = 'session:'
|
||||
|
||||
// A hydrated `app:<id>` window whose id no longer matches any registry
|
||||
// entry (the app was renamed/removed since the layout was persisted) has
|
||||
// nothing to render — close it rather than leaving a permanently-blank
|
||||
// window stuck in the taskbar.
|
||||
$effect(() => {
|
||||
for (const id of $wmState.order) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId && !appById.has(appId)) wm.close(id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div use:dk.desktop class="absolute inset-0 z-40 pointer-events-none">
|
||||
{#each $wmState.order as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{@const appId = appIdFromWindowId(id)}
|
||||
{@const app = appId ? appById.get(appId) : undefined}
|
||||
{#if win && (!appId || app)}
|
||||
<section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
|
||||
<header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
|
||||
<span data-wm-title class="flex min-w-0 flex-1 items-center self-stretch truncate font-mono text-xs font-medium">{win.title}</span>
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
data-wm-minimize
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Minimize {win.title}"
|
||||
>
|
||||
<MinusIcon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-maximize
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Maximize {win.title}"
|
||||
>
|
||||
<Maximize2Icon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-close
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div data-wm-content class="min-h-0 flex-1 overflow-hidden">
|
||||
{#key id}
|
||||
{#if id.startsWith(SESSION_PREFIX)}
|
||||
<SessionChatWindow sessionId={id.slice(SESSION_PREFIX.length)} />
|
||||
{:else if id === NEW_TASK_WINDOW_ID}
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<TaskLauncher onStarted={() => wm.close(NEW_TASK_WINDOW_ID)} />
|
||||
</div>
|
||||
{:else if app}
|
||||
<app.component />
|
||||
{:else}
|
||||
<EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,6 +1,7 @@
|
||||
import { derived } from 'svelte/store'
|
||||
import { messages, type ToolCallResult } from './chat'
|
||||
import { planSteps, currentTask } from './workspace'
|
||||
import { derived, type Readable } from 'svelte/store'
|
||||
import { messages, chatFor, type ChatMessage, type ToolCallResult } from './chat'
|
||||
import { planSteps, currentTask, workspaceFor, taskFor } from './workspace'
|
||||
import type { PlanStep, Session } from '$lib/api'
|
||||
|
||||
export { type ToolCallResult }
|
||||
|
||||
@@ -39,7 +40,10 @@ function stringifyResult(result: unknown): string {
|
||||
return s.length > DETAIL_MAX ? `${s.slice(0, DETAIL_MAX)}\n… truncated` : s
|
||||
}
|
||||
|
||||
export const activityLog = derived([messages, planSteps, currentTask], ([$msgs, $steps, $task]) => {
|
||||
// Pure derivation, parameterized so it can back both the global "current
|
||||
// session" activityLog below and a per-session activityLogFor(sessionId) for
|
||||
// a floating task window.
|
||||
function computeActivityLog($msgs: ChatMessage[], $steps: PlanStep[], $task: Session | null): ActivityEntry[] {
|
||||
const entries: ActivityEntry[] = []
|
||||
const now = Date.now()
|
||||
|
||||
@@ -168,7 +172,18 @@ export const activityLog = derived([messages, planSteps, currentTask], ([$msgs,
|
||||
entries.sort((a, b) => a.timestamp - b.timestamp)
|
||||
|
||||
return entries
|
||||
})
|
||||
}
|
||||
|
||||
export const activityLog = derived([messages, planSteps, currentTask], ([$msgs, $steps, $task]) =>
|
||||
computeActivityLog($msgs, $steps, $task)
|
||||
)
|
||||
|
||||
export function activityLogFor(sessionId: string): Readable<ActivityEntry[]> {
|
||||
const chat = chatFor(sessionId)
|
||||
const ws = workspaceFor(sessionId)
|
||||
const task = taskFor(sessionId)
|
||||
return derived([chat.messages, ws.planSteps, task], ([$msgs, $steps, $task]) => computeActivityLog($msgs, $steps, $task))
|
||||
}
|
||||
|
||||
function toolActivityLabel(t: ToolCallResult): string {
|
||||
const args = t.args ?? {}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { writable, get } from 'svelte/store'
|
||||
import { streamChat, fetchSessions, fetchMessages, deleteSession as apiDeleteSession } from '$lib/api'
|
||||
import { writable, get, type Writable } from 'svelte/store'
|
||||
import { streamChat, fetchSessions, fetchMessages, fetchMessagesOrNotFound, deleteSession as apiDeleteSession } from '$lib/api'
|
||||
import type { ChatEvent, Session, Message } from '$lib/api'
|
||||
import type { ToolCallResult } from '$lib/types'
|
||||
|
||||
@@ -481,3 +481,301 @@ export async function deleteSession(sessionId: string) {
|
||||
}
|
||||
loadSessions()
|
||||
}
|
||||
|
||||
// ─── per-session chat state, for floating task windows ─────────────────────
|
||||
//
|
||||
// Everything above this point is the single "whatever's on screen" view used
|
||||
// by the main Chat page and the chat drawer — one global `currentSession`,
|
||||
// one `messages` array, guarded so a background stream never clobbers the
|
||||
// view. Floating task windows break that assumption: several sessions can be
|
||||
// open and legitimately streaming at once, each wanting its own live
|
||||
// transcript. Rather than retrofit the guard-heavy logic above (streamed
|
||||
// events checking `get(currentSession) === streamSessionID` before applying),
|
||||
// each window gets its own isolated store bundle keyed by session id, so
|
||||
// there's nothing to guard — events for session X always land in X's own
|
||||
// bundle regardless of what else is open or on screen.
|
||||
export interface SessionChatState {
|
||||
messages: Writable<ChatMessage[]>
|
||||
streaming: Writable<boolean>
|
||||
connectionState: Writable<'connected' | 'disconnected' | 'reconnecting'>
|
||||
error: Writable<string | null>
|
||||
// Set by loadSessionChat when the backend 404s the session outright
|
||||
// (deleted, or an id that was never valid — a stale persisted window, a
|
||||
// bad deep link). Distinct from a merely-empty transcript, which is the
|
||||
// normal state for a session that exists but hasn't sent a message yet.
|
||||
notFound: Writable<boolean>
|
||||
}
|
||||
|
||||
const sessionChats = new Map<string, SessionChatState>()
|
||||
const sessionPollers = new Map<string, ReturnType<typeof setInterval>>()
|
||||
|
||||
// Lazily creates (and memoizes) the store bundle for a session — call this to
|
||||
// get the stores to subscribe to; it does not fetch anything.
|
||||
export function chatFor(sessionId: string): SessionChatState {
|
||||
let c = sessionChats.get(sessionId)
|
||||
if (!c) {
|
||||
c = {
|
||||
messages: writable([]),
|
||||
streaming: writable(false),
|
||||
connectionState: writable('connected'),
|
||||
error: writable(null),
|
||||
notFound: writable(false)
|
||||
}
|
||||
sessionChats.set(sessionId, c)
|
||||
}
|
||||
return c
|
||||
}
|
||||
|
||||
function startSessionPolling(sessionId: string) {
|
||||
const existing = sessionPollers.get(sessionId)
|
||||
if (existing) clearInterval(existing)
|
||||
const chat = chatFor(sessionId)
|
||||
sessionPollers.set(
|
||||
sessionId,
|
||||
setInterval(async () => {
|
||||
if (get(chat.streaming) && get(chat.connectionState) === 'connected') return
|
||||
const msgs = await fetchMessages(sessionId)
|
||||
if (get(chat.streaming)) return // re-check: the fetch itself takes time
|
||||
chat.messages.set(toChatMessages(msgs))
|
||||
}, 3000)
|
||||
)
|
||||
}
|
||||
|
||||
export function stopSessionPolling(sessionId: string) {
|
||||
const t = sessionPollers.get(sessionId)
|
||||
if (t) {
|
||||
clearInterval(t)
|
||||
sessionPollers.delete(sessionId)
|
||||
}
|
||||
}
|
||||
|
||||
// Fetches sessionId's current transcript into its own store bundle and
|
||||
// starts polling it for auto-continuation updates — the per-session
|
||||
// equivalent of loadSessionMessages, for a window rather than the main view.
|
||||
export async function loadSessionChat(sessionId: string): Promise<void> {
|
||||
const chat = chatFor(sessionId)
|
||||
chat.streaming.set(false)
|
||||
const msgs = await fetchMessagesOrNotFound(sessionId)
|
||||
if (msgs === null) {
|
||||
chat.notFound.set(true)
|
||||
return // nothing to poll — the session doesn't exist
|
||||
}
|
||||
chat.messages.set(toChatMessages(msgs))
|
||||
startSessionPolling(sessionId)
|
||||
}
|
||||
|
||||
// Per-session equivalent of sendMessage — writes into sessionId's own store
|
||||
// bundle unconditionally (no "is this still on screen" guard needed, since
|
||||
// the bundle IS the screen for this session's window) and shares
|
||||
// `activeControllers` with the singleton path above so cancelStream() from
|
||||
// either a window or the main view (if the same session happens to be open
|
||||
// in both) finds the same in-flight call.
|
||||
export function sendSessionMessage(sessionId: string, text: string) {
|
||||
const chat = chatFor(sessionId)
|
||||
chat.error.set(null)
|
||||
chat.streaming.set(true)
|
||||
|
||||
const userMsg: ChatMessage = { id: mid(), role: 'user', text, tools: [], pendingApprovals: [] }
|
||||
chat.messages.update((ms) => [...ms, userMsg])
|
||||
const assistantMsg: ChatMessage = { id: mid(), role: 'assistant', text: '', tools: [], pendingApprovals: [] }
|
||||
chat.messages.update((ms) => [...ms, assistantMsg])
|
||||
|
||||
let activeTools: Map<string, ToolCallResult> = new Map()
|
||||
let receivedDone = false
|
||||
|
||||
const controller = streamChat(
|
||||
text,
|
||||
sessionId,
|
||||
(ev: ChatEvent) => {
|
||||
if (ev.type === 'session') return // sessionId is already known for a window
|
||||
if (ev.type === 'tool_use') {
|
||||
const tr: ToolCallResult = { type: 'tool_use', name: ev.data.name, id: ev.data.id, args: ev.data.args }
|
||||
activeTools.set(ev.data.id, tr)
|
||||
chat.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.tools = [...last.tools, tr]
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'tool_result') {
|
||||
const existing = activeTools.get(ev.data.id)
|
||||
if (existing) {
|
||||
const updated: ToolCallResult = { ...existing, type: 'tool_result', result: ev.data.result, error: ev.data.error }
|
||||
activeTools.set(ev.data.id, updated)
|
||||
chat.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') {
|
||||
last.tools = last.tools.map((t) => (t.id === ev.data.id ? updated : t))
|
||||
last.pendingApprovals = extractApprovals(last.tools)
|
||||
}
|
||||
return [...ms]
|
||||
})
|
||||
}
|
||||
} else if (ev.type === 'text_delta') {
|
||||
chat.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text += ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'text') {
|
||||
chat.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text = ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'done') {
|
||||
receivedDone = true
|
||||
chat.connectionState.set('connected')
|
||||
chat.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.pendingApprovals = extractApprovals(last.tools)
|
||||
return [...ms]
|
||||
})
|
||||
startSessionPolling(sessionId)
|
||||
} else if (ev.type === 'error') {
|
||||
chat.error.set(ev.data)
|
||||
}
|
||||
},
|
||||
(err: string) => {
|
||||
if (err === 'AbortError' || err.includes('aborted')) {
|
||||
chat.streaming.set(false)
|
||||
return
|
||||
}
|
||||
chat.error.set(err)
|
||||
if (!receivedDone) {
|
||||
chat.connectionState.set('disconnected')
|
||||
startSessionPolling(sessionId)
|
||||
addChatError('Agent connection lost. The task is still running — retrying…', 'Dismiss')
|
||||
} else {
|
||||
chat.streaming.set(false)
|
||||
}
|
||||
},
|
||||
() => {
|
||||
chat.streaming.set(false)
|
||||
if (activeControllers.get(sessionId) === controller) activeControllers.delete(sessionId)
|
||||
loadSessions()
|
||||
}
|
||||
)
|
||||
activeControllers.set(sessionId, controller)
|
||||
}
|
||||
|
||||
export function cancelSessionStream(sessionId: string) {
|
||||
const controller = activeControllers.get(sessionId)
|
||||
if (!controller) return
|
||||
controller.abort()
|
||||
activeControllers.delete(sessionId)
|
||||
chatFor(sessionId).streaming.set(false)
|
||||
}
|
||||
|
||||
// ─── new-task launcher (desktop center input / Tasks app) ───────────────────
|
||||
//
|
||||
// Starting a brand-new task has no session id to hang a window off of until
|
||||
// the stream's own 'session' event assigns one (see the 'session' branch in
|
||||
// sendMessage above) — the desktop launcher needs to open that task's window
|
||||
// the moment an id exists, not before. startTask begins the stream
|
||||
// immediately, buffers any events that arrive before 'session' (defensive:
|
||||
// in practice 'session' always arrives first), then seeds that session's own
|
||||
// chatFor() bundle exactly like sendSessionMessage does and hands the id back
|
||||
// via onSession so the caller can open its window. From that point on the
|
||||
// window behaves exactly like any other task window.
|
||||
export function startTask(text: string, onSession: (sessionId: string) => void): void {
|
||||
const userMsg: ChatMessage = { id: mid(), role: 'user', text, tools: [], pendingApprovals: [] }
|
||||
const assistantMsg: ChatMessage = { id: mid(), role: 'assistant', text: '', tools: [], pendingApprovals: [] }
|
||||
const activeTools: Map<string, ToolCallResult> = new Map()
|
||||
let receivedDone = false
|
||||
let sessionId: string | null = null
|
||||
let chat: SessionChatState | null = null
|
||||
const buffered: ChatEvent[] = []
|
||||
|
||||
function apply(ev: ChatEvent) {
|
||||
const c = chat
|
||||
if (!c || !sessionId) return
|
||||
if (ev.type === 'tool_use') {
|
||||
const tr: ToolCallResult = { type: 'tool_use', name: ev.data.name, id: ev.data.id, args: ev.data.args }
|
||||
activeTools.set(ev.data.id, tr)
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.tools = [...last.tools, tr]
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'tool_result') {
|
||||
const existing = activeTools.get(ev.data.id)
|
||||
if (existing) {
|
||||
const updated: ToolCallResult = { ...existing, type: 'tool_result', result: ev.data.result, error: ev.data.error }
|
||||
activeTools.set(ev.data.id, updated)
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') {
|
||||
last.tools = last.tools.map((t) => (t.id === ev.data.id ? updated : t))
|
||||
last.pendingApprovals = extractApprovals(last.tools)
|
||||
}
|
||||
return [...ms]
|
||||
})
|
||||
}
|
||||
} else if (ev.type === 'text_delta') {
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text += ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'text') {
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text = ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'done') {
|
||||
receivedDone = true
|
||||
c.connectionState.set('connected')
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.pendingApprovals = extractApprovals(last.tools)
|
||||
return [...ms]
|
||||
})
|
||||
startSessionPolling(sessionId)
|
||||
} else if (ev.type === 'error') {
|
||||
c.error.set(ev.data)
|
||||
}
|
||||
}
|
||||
|
||||
const controller = streamChat(
|
||||
text,
|
||||
null,
|
||||
(ev: ChatEvent) => {
|
||||
if (ev.type === 'session') {
|
||||
sessionId = ev.data
|
||||
activeControllers.set(sessionId, controller)
|
||||
chat = chatFor(sessionId)
|
||||
chat.streaming.set(true)
|
||||
chat.messages.update((ms) => [...ms, userMsg, assistantMsg])
|
||||
onSession(sessionId)
|
||||
for (const b of buffered.splice(0)) apply(b)
|
||||
return
|
||||
}
|
||||
if (!chat) {
|
||||
buffered.push(ev)
|
||||
return
|
||||
}
|
||||
apply(ev)
|
||||
},
|
||||
(err: string) => {
|
||||
if (!chat) return // never got a session id — nothing to show the error in
|
||||
if (err === 'AbortError' || err.includes('aborted')) {
|
||||
chat.streaming.set(false)
|
||||
return
|
||||
}
|
||||
chat.error.set(err)
|
||||
if (!receivedDone && sessionId) {
|
||||
chat.connectionState.set('disconnected')
|
||||
startSessionPolling(sessionId)
|
||||
addChatError('Agent connection lost. The task is still running — retrying…', 'Dismiss')
|
||||
} else {
|
||||
chat.streaming.set(false)
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (chat) chat.streaming.set(false)
|
||||
if (sessionId && activeControllers.get(sessionId) === controller) activeControllers.delete(sessionId)
|
||||
loadSessions()
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
95
web/src/lib/stores/icons.test.ts
Normal file
95
web/src/lib/stores/icons.test.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
|
||||
// icons.ts only needs APPS for its default-layout ids — stub it out rather
|
||||
// than pull in the real registry's full page-component graph (see
|
||||
// apps.test.ts for why that graph is expensive/broken under vitest).
|
||||
vi.mock('$lib/apps', () => ({
|
||||
APPS: [{ id: 'tasks' }, { id: 'kb' }, { id: 'ops' }, { id: 'signals' }, { id: 'knowledge' }, { id: 'learning' }]
|
||||
}))
|
||||
|
||||
import { GRID, iconPositions, placeIcon, iconPixelPos, maxCols, getIconPositions, resetIconLayout } from './icons'
|
||||
|
||||
// placeIcon mutates the shared module-level store, so each test starts from
|
||||
// a known, empty layout rather than whatever the previous test (or apps.ts's
|
||||
// registry-derived defaults) left behind.
|
||||
beforeEach(() => {
|
||||
iconPositions.set({})
|
||||
localStorage.clear()
|
||||
})
|
||||
|
||||
describe('iconPixelPos', () => {
|
||||
it('converts a grid cell to pixel coordinates using GRID constants', () => {
|
||||
expect(iconPixelPos({ col: 0, row: 0 })).toEqual({ x: GRID.padding, y: GRID.padding })
|
||||
expect(iconPixelPos({ col: 1, row: 2 })).toEqual({
|
||||
x: GRID.padding + (GRID.cell + GRID.gap),
|
||||
y: GRID.padding + 2 * (GRID.cell + GRID.gap)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('maxCols', () => {
|
||||
it('computes how many columns fit in a viewport width', () => {
|
||||
const cellSpan = GRID.cell + GRID.gap
|
||||
expect(maxCols(GRID.padding + cellSpan * 3)).toBe(3)
|
||||
})
|
||||
|
||||
it('never returns less than 1, even for a tiny viewport', () => {
|
||||
expect(maxCols(0)).toBe(1)
|
||||
expect(maxCols(GRID.padding)).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('placeIcon', () => {
|
||||
it('places an icon at the requested cell when it is free', () => {
|
||||
placeIcon('tasks', 3, 4)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 3, row: 4 })
|
||||
})
|
||||
|
||||
it('clamps negative coordinates to 0 for an otherwise-free cell', () => {
|
||||
placeIcon('tasks', -5, -2)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 0, row: 0 })
|
||||
})
|
||||
|
||||
it('nudges to the nearest free cell when the target is occupied', () => {
|
||||
iconPositions.set({ kb: { col: 2, row: 2 } })
|
||||
placeIcon('tasks', 2, 2)
|
||||
const pos = getIconPositions().tasks
|
||||
// Must not land on top of kb, and must be one of the 8 immediate
|
||||
// neighbors (radius-1 ring) since all of them are free.
|
||||
expect(pos).not.toEqual({ col: 2, row: 2 })
|
||||
expect(Math.max(Math.abs(pos.col - 2), Math.abs(pos.row - 2))).toBe(1)
|
||||
})
|
||||
|
||||
it('does not disturb the icon already occupying a cell when another icon is nudged past it', () => {
|
||||
iconPositions.set({ kb: { col: 2, row: 2 } })
|
||||
placeIcon('tasks', 2, 2)
|
||||
expect(getIconPositions().kb).toEqual({ col: 2, row: 2 })
|
||||
})
|
||||
|
||||
it('moving an icon back onto its own current cell is a no-op collision (never nudges against itself)', () => {
|
||||
iconPositions.set({ tasks: { col: 5, row: 5 } })
|
||||
placeIcon('tasks', 5, 5)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 5, row: 5 })
|
||||
})
|
||||
|
||||
it('persists the updated layout to localStorage', () => {
|
||||
placeIcon('tasks', 1, 1)
|
||||
const stored = JSON.parse(localStorage.getItem('oikos-desktop-icons') ?? '{}')
|
||||
expect(stored.tasks).toEqual({ col: 1, row: 1 })
|
||||
})
|
||||
})
|
||||
|
||||
describe('resetIconLayout', () => {
|
||||
it('restores the classic left-edge column in registry order', () => {
|
||||
iconPositions.set({ tasks: { col: 4, row: 7 }, kb: { col: 1, row: 1 } })
|
||||
resetIconLayout()
|
||||
expect(getIconPositions()).toEqual({
|
||||
tasks: { col: 0, row: 0 },
|
||||
kb: { col: 0, row: 1 },
|
||||
ops: { col: 0, row: 2 },
|
||||
signals: { col: 0, row: 3 },
|
||||
knowledge: { col: 0, row: 4 },
|
||||
learning: { col: 0, row: 5 }
|
||||
})
|
||||
})
|
||||
})
|
||||
113
web/src/lib/stores/icons.ts
Normal file
113
web/src/lib/stores/icons.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
// Desktop icon positions — a simple column/row grid, persisted to
|
||||
// localStorage so icons stay where the operator put them across reloads.
|
||||
// Deliberately NOT wmkit: wmkit manages floating windows (pixel bounds,
|
||||
// z-order, stage), icons are a flat, non-overlapping grid with a much
|
||||
// simpler drag model (snap-to-cell, no resize/minimize/stack). Reinventing
|
||||
// that inside wmkit would mean fighting its window-shaped abstractions for
|
||||
// no benefit.
|
||||
import { writable, get } from 'svelte/store'
|
||||
import { APPS } from '$lib/apps'
|
||||
|
||||
export interface IconPos {
|
||||
col: number
|
||||
row: number
|
||||
}
|
||||
|
||||
export const GRID = { cell: 96, gap: 12, padding: 16 }
|
||||
|
||||
const STORAGE_KEY = 'oikos-desktop-icons'
|
||||
|
||||
function defaultPositions(): Record<string, IconPos> {
|
||||
// Classic OS default: one left-edge column, registry order.
|
||||
const out: Record<string, IconPos> = {}
|
||||
APPS.forEach((app, i) => {
|
||||
out[app.id] = { col: 0, row: i }
|
||||
})
|
||||
return out
|
||||
}
|
||||
|
||||
function load(): Record<string, IconPos> {
|
||||
if (typeof localStorage === 'undefined') return defaultPositions()
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return defaultPositions()
|
||||
const parsed = JSON.parse(raw) as Record<string, IconPos>
|
||||
const out = defaultPositions()
|
||||
// Merge over the defaults so a newly-registered app (not in the saved
|
||||
// blob yet) still gets a sane starting position instead of being absent
|
||||
// from the grid entirely.
|
||||
for (const [id, pos] of Object.entries(parsed)) {
|
||||
if (appIds.has(id)) out[id] = pos
|
||||
}
|
||||
return out
|
||||
} catch {
|
||||
return defaultPositions()
|
||||
}
|
||||
}
|
||||
|
||||
const appIds = new Set(APPS.map((a) => a.id))
|
||||
|
||||
export const iconPositions = writable<Record<string, IconPos>>(load())
|
||||
|
||||
function persist(positions: Record<string, IconPos>): void {
|
||||
if (typeof localStorage === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(positions))
|
||||
}
|
||||
|
||||
iconPositions.subscribe((positions) => persist(positions))
|
||||
|
||||
function occupied(positions: Record<string, IconPos>, col: number, row: number, exceptId: string): boolean {
|
||||
return Object.entries(positions).some(([id, p]) => id !== exceptId && p.col === col && p.row === row)
|
||||
}
|
||||
|
||||
// Finds the nearest free cell to (col, row) via an expanding ring search,
|
||||
// so dropping an icon onto an occupied cell nudges it to the closest open
|
||||
// spot instead of silently overlapping or refusing the drop.
|
||||
function nearestFreeCell(
|
||||
positions: Record<string, IconPos>,
|
||||
col: number,
|
||||
row: number,
|
||||
exceptId: string
|
||||
): IconPos {
|
||||
if (!occupied(positions, col, row, exceptId)) return { col: Math.max(0, col), row: Math.max(0, row) }
|
||||
for (let radius = 1; radius < 64; radius++) {
|
||||
for (let dc = -radius; dc <= radius; dc++) {
|
||||
for (let dr = -radius; dr <= radius; dr++) {
|
||||
if (Math.max(Math.abs(dc), Math.abs(dr)) !== radius) continue
|
||||
const c = col + dc
|
||||
const r = row + dr
|
||||
if (c < 0 || r < 0) continue
|
||||
if (!occupied(positions, c, r, exceptId)) return { col: c, row: r }
|
||||
}
|
||||
}
|
||||
}
|
||||
return { col: Math.max(0, col), row: Math.max(0, row) }
|
||||
}
|
||||
|
||||
export function placeIcon(appId: string, col: number, row: number): void {
|
||||
iconPositions.update((positions) => {
|
||||
const target = nearestFreeCell(positions, col, row, appId)
|
||||
return { ...positions, [appId]: target }
|
||||
})
|
||||
}
|
||||
|
||||
export function iconPixelPos(pos: IconPos): { x: number; y: number } {
|
||||
return {
|
||||
x: GRID.padding + pos.col * (GRID.cell + GRID.gap),
|
||||
y: GRID.padding + pos.row * (GRID.cell + GRID.gap)
|
||||
}
|
||||
}
|
||||
|
||||
export function maxCols(viewportWidth: number): number {
|
||||
return Math.max(1, Math.floor((viewportWidth - GRID.padding) / (GRID.cell + GRID.gap)))
|
||||
}
|
||||
|
||||
export function getIconPositions(): Record<string, IconPos> {
|
||||
return get(iconPositions)
|
||||
}
|
||||
|
||||
// Bails a messy manual layout back to the classic left-edge column,
|
||||
// registry order — the desktop's right-click menu's "Reset icon layout".
|
||||
export function resetIconLayout(): void {
|
||||
iconPositions.set(defaultPositions())
|
||||
}
|
||||
@@ -1,14 +1,83 @@
|
||||
// One global wmkit window manager for the whole app (mounted once by
|
||||
// EntityDesktop.svelte in App.svelte) — this is what lets an entity opened
|
||||
// from Knowledge Base, chat, or anywhere else land in the same floating
|
||||
// window layer, with several windows open side by side, rather than each
|
||||
// page owning its own single-entity sidebar/sheet.
|
||||
// WindowLayer.svelte inside Desktop.svelte) — this is what lets an entity
|
||||
// opened from Knowledge Base, chat, or anywhere else land in the same
|
||||
// floating window layer, with several windows open side by side, rather than
|
||||
// each page owning its own single-entity sidebar/sheet.
|
||||
import { createManager, createDesktop, wmStore } from '@surdeddd/wmkit/svelte'
|
||||
import { persist } from '@surdeddd/wmkit/persist'
|
||||
import { appById, appWindowId } from '$lib/apps'
|
||||
import { sessions } from '$lib/stores/chat'
|
||||
import { heading } from '$lib/tasks'
|
||||
|
||||
export const wm = createManager({ defaultSize: { width: 480, height: 560 } })
|
||||
export const dk = createDesktop(wm)
|
||||
export const dk = createDesktop(wm, {
|
||||
// topEdge:'maximize' + preview gives the classic drag-to-top-maximizes
|
||||
// affordance; magnetism/keyboard are wmkit defaults worth turning on now
|
||||
// that windows are the whole app's primary surface, not a secondary layer.
|
||||
snap: { topEdge: 'maximize', preview: true },
|
||||
keyboard: true,
|
||||
magnetism: true,
|
||||
// Animates a minimized window toward its taskbar button instead of just
|
||||
// vanishing — Taskbar.svelte tags each button with this same attribute.
|
||||
minimizeTarget: (win) => document.querySelector(`[data-taskbar-btn="${CSS.escape(win.id)}"]`)
|
||||
})
|
||||
export const wmState = wmStore(wm)
|
||||
|
||||
// Layout survives reloads: every window id is self-describing (app:<id>,
|
||||
// session:<id>, or a bare entity slug — see EntityDesktop/WindowLayer's
|
||||
// content branch), so a hydrated window needs no extra bookkeeping to know
|
||||
// what to render once the desktop remounts.
|
||||
export const wmPersist = persist(wm, { key: 'oikos-windows', debounce: 300, autoRestore: true })
|
||||
|
||||
// A task window is titled from the operator's (truncated) prompt at
|
||||
// creation time — openTaskWindow below and chat.ts's startTask both only
|
||||
// know the raw text, not the goal/heading the backend eventually derives
|
||||
// for the session. Whenever the sessions list refreshes (loadSessions(),
|
||||
// called all over — on task events, after a turn completes, ...) resync
|
||||
// any open task window's title to the session's real heading, so the
|
||||
// taskbar/titlebar stop showing the placeholder forever.
|
||||
sessions.subscribe((list) => {
|
||||
for (const s of list) {
|
||||
const id = `session:${s.id}`
|
||||
const win = wm.get(id)
|
||||
if (!win) continue
|
||||
const title = heading(s)
|
||||
if (win.title !== title) wm.update(id, { title })
|
||||
}
|
||||
})
|
||||
|
||||
// Classic show-desktop toggle: minimize everything, or if everything's
|
||||
// already minimized (a prior show-desktop, or the operator minimized them
|
||||
// all by hand), bring them all back rather than being a one-way action.
|
||||
// Shared by the taskbar button and the desktop's right-click menu.
|
||||
export function toggleShowDesktop(): void {
|
||||
const anyVisible = wm.getState().order.some((id) => wm.get(id)?.stage !== 'minimized')
|
||||
if (anyVisible) wm.minimizeAll()
|
||||
else wm.restoreAll()
|
||||
}
|
||||
|
||||
// Opens (or focuses/restores) a registry app's window. Apps are
|
||||
// single-instance — double-clicking an already-open app's icon should never
|
||||
// stack a second window, same dedupe pattern as openEntityWindow below.
|
||||
export function openAppWindow(appId: string): void {
|
||||
const app = appById.get(appId)
|
||||
if (!app) return
|
||||
const id = appWindowId(appId)
|
||||
if (wm.get(id)) {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
return
|
||||
}
|
||||
wm.open({
|
||||
id,
|
||||
title: app.title,
|
||||
width: app.width,
|
||||
height: app.height,
|
||||
minWidth: app.minWidth,
|
||||
minHeight: app.minHeight
|
||||
})
|
||||
}
|
||||
|
||||
// Opens a window for the entity, or focuses (and restores, if minimized) the
|
||||
// existing one — wm.open() throws if a window with this id already exists,
|
||||
// and slugs make natural, stable window ids (also dedupes "same entity
|
||||
@@ -22,3 +91,36 @@ export function openEntityWindow(slug: string | null): void {
|
||||
}
|
||||
wm.open({ id: slug, title: slug })
|
||||
}
|
||||
|
||||
// Singleton "compose a new task" window — the Tasks app's New Task button
|
||||
// opens this rather than a dialog, since everything else in the desktop is
|
||||
// already a window; TaskLauncher closes it itself (via its onStarted
|
||||
// callback, wired up in WindowLayer.svelte) once the task's session window
|
||||
// takes over.
|
||||
export const NEW_TASK_WINDOW_ID = 'new-task'
|
||||
|
||||
export function openNewTaskWindow(): void {
|
||||
if (wm.get(NEW_TASK_WINDOW_ID)) {
|
||||
wm.restore(NEW_TASK_WINDOW_ID)
|
||||
wm.focus(NEW_TASK_WINDOW_ID)
|
||||
return
|
||||
}
|
||||
wm.open({ id: NEW_TASK_WINDOW_ID, title: 'New task', width: 480, height: 340, minWidth: 360, minHeight: 280 })
|
||||
}
|
||||
|
||||
// Same dedupe/restore/focus pattern as openEntityWindow, for a task/session's
|
||||
// chat window. Id is namespaced `session:<id>` — distinct from entity window
|
||||
// ids (always a bare `type:identifier` slug, and task ENTITIES already use
|
||||
// `task:<uuid>` as their own slug) so a task's chat window and its entity
|
||||
// detail window never collide over the same wmkit id. See
|
||||
// WindowLayer.svelte for the id -> content-component branch.
|
||||
export function openTaskWindow(sessionId: string | null, title: string): void {
|
||||
if (!sessionId) return
|
||||
const id = `session:${sessionId}`
|
||||
if (wm.get(id)) {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
return
|
||||
}
|
||||
wm.open({ id, title, width: 900, height: 640 })
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { writable, derived, get } from 'svelte/store'
|
||||
import { writable, derived, get, type Writable, type Readable } from 'svelte/store'
|
||||
import { liveEvents, subscribeEvents } from './events'
|
||||
import { currentSession, sessions, loadSessions } from './chat'
|
||||
import { fetchPlan, fetchQuestions, type PlanStep, type SessionQuestion } from '$lib/api'
|
||||
import { fetchPlan, fetchQuestions, type PlanStep, type SessionQuestion, type Session } from '$lib/api'
|
||||
import type {
|
||||
PlanProposedData,
|
||||
PlanStepEventData,
|
||||
@@ -21,16 +21,11 @@ import type {
|
||||
// keeps updating across a tab reload: hydrate() re-fetches REST state, then
|
||||
// live events carry deltas from there.
|
||||
|
||||
export const planSteps = writable<PlanStep[]>([])
|
||||
export const questions = writable<SessionQuestion[]>([])
|
||||
export const openQuestion = derived(questions, (qs) => qs.find((q) => q.status === 'open') ?? null)
|
||||
|
||||
export interface TouchedEntity {
|
||||
slug: string
|
||||
tool: string
|
||||
ts: number
|
||||
}
|
||||
export const touched = writable<TouchedEntity[]>([])
|
||||
const TOUCHED_MAX = 12
|
||||
const TOUCHED_PULSE_MS = 6000
|
||||
|
||||
@@ -40,9 +35,35 @@ export interface HealthDiff {
|
||||
to: string
|
||||
ts: number
|
||||
}
|
||||
export const healthDiffs = writable<HealthDiff[]>([])
|
||||
const HEALTH_DIFF_MS = 8000
|
||||
|
||||
export interface WorkspaceState {
|
||||
planSteps: Writable<PlanStep[]>
|
||||
questions: Writable<SessionQuestion[]>
|
||||
openQuestion: Readable<SessionQuestion | null>
|
||||
touched: Writable<TouchedEntity[]>
|
||||
healthDiffs: Writable<HealthDiff[]>
|
||||
}
|
||||
|
||||
function createWorkspaceState(): WorkspaceState {
|
||||
const questions = writable<SessionQuestion[]>([])
|
||||
return {
|
||||
planSteps: writable<PlanStep[]>([]),
|
||||
questions,
|
||||
openQuestion: derived(questions, (qs) => qs.find((q) => q.status === 'open') ?? null),
|
||||
touched: writable<TouchedEntity[]>([]),
|
||||
healthDiffs: writable<HealthDiff[]>([])
|
||||
}
|
||||
}
|
||||
|
||||
// ─── global "current session" workspace — used by the main Chat page's rail ─
|
||||
const globalWorkspace = createWorkspaceState()
|
||||
export const planSteps = globalWorkspace.planSteps
|
||||
export const questions = globalWorkspace.questions
|
||||
export const openQuestion = globalWorkspace.openQuestion
|
||||
export const touched = globalWorkspace.touched
|
||||
export const healthDiffs = globalWorkspace.healthDiffs
|
||||
|
||||
// The task's own fields (goal/status/outcome/summary) live on the session row.
|
||||
// Rather than a dedicated endpoint, derive from the sessions list (already
|
||||
// fetched for the task board) and keep it fresh here on task-lifecycle events.
|
||||
@@ -50,33 +71,21 @@ export const currentTask = derived([sessions, currentSession], ([$sessions, $id]
|
||||
$sessions.find((s) => s.id === $id) ?? null
|
||||
)
|
||||
|
||||
// Events that can change agent_sessions.status/goal/outcome — see applyEvent.
|
||||
// Events that can change agent_sessions.status/goal/outcome — see applyEventTo.
|
||||
const STATUS_AFFECTING = new Set([
|
||||
'goal.set', 'task.status', 'plan.proposed', 'question.raised', 'question.answered'
|
||||
])
|
||||
|
||||
let hydratedFor: string | null = null
|
||||
let unsubStream: (() => void) | null = null
|
||||
let unsubLive: (() => void) | null = null
|
||||
let refreshTimer: ReturnType<typeof setTimeout> | null = null
|
||||
let lastSeenId = 0
|
||||
|
||||
async function hydrate(sessionId: string) {
|
||||
hydratedFor = sessionId
|
||||
planSteps.set([])
|
||||
questions.set([])
|
||||
touched.set([])
|
||||
healthDiffs.set([])
|
||||
const [steps, qs] = await Promise.all([fetchPlan(sessionId), fetchQuestions(sessionId)])
|
||||
if (get(currentSession) !== sessionId) return // switched away while loading
|
||||
planSteps.set(steps)
|
||||
questions.set(qs)
|
||||
function scheduleSessionsRefresh() {
|
||||
if (refreshTimer) clearTimeout(refreshTimer)
|
||||
refreshTimer = setTimeout(() => loadSessions(), 300)
|
||||
}
|
||||
|
||||
function applyPlanStepEvent(sessionId: string, type: string, data: PlanStepEventData) {
|
||||
function applyPlanStepEventTo(ws: WorkspaceState, data: PlanStepEventData) {
|
||||
const stepID = data?.step_id
|
||||
const seq = data?.seq
|
||||
planSteps.update((steps) => {
|
||||
ws.planSteps.update((steps) => {
|
||||
const i = steps.findIndex((s) => (stepID && s.id === stepID) || (seq != null && s.seq === seq))
|
||||
if (i === -1) return steps
|
||||
const next = [...steps]
|
||||
@@ -85,9 +94,11 @@ function applyPlanStepEvent(sessionId: string, type: string, data: PlanStepEvent
|
||||
})
|
||||
}
|
||||
|
||||
function applyEvent(ev: { type: string; correlation_id?: string | null; data?: unknown }) {
|
||||
const sid = get(currentSession)
|
||||
if (!sid || ev.correlation_id !== sid) return
|
||||
// Applies a live event to `ws` if it belongs to session `sid` — shared by the
|
||||
// global "current session" watcher and every per-session floating-window
|
||||
// watcher, each passing its own target state and session id.
|
||||
function applyEventTo(ws: WorkspaceState, sid: string, ev: { type: string; correlation_id?: string | null; data?: unknown }) {
|
||||
if (ev.correlation_id !== sid) return
|
||||
const data = (ev.data ?? {}) as Record<string, unknown>
|
||||
|
||||
// Task fields (status/goal/outcome) live on the session row — refetch the
|
||||
@@ -100,11 +111,9 @@ function applyEvent(ev: { type: string; correlation_id?: string | null; data?: u
|
||||
// server-side, with no client-streaming 'done' event to piggyback a refresh
|
||||
// on (found live: answering a question via the panel left the header stuck
|
||||
// on "Needs your input" after the agent had already resumed). Debounced
|
||||
// since several of these can land in one burst.
|
||||
if (STATUS_AFFECTING.has(ev.type)) {
|
||||
if (refreshTimer) clearTimeout(refreshTimer)
|
||||
refreshTimer = setTimeout(() => loadSessions(), 300)
|
||||
}
|
||||
// since several of these can land in one burst, and shared across
|
||||
// sessions since it just refreshes the one global session list.
|
||||
if (STATUS_AFFECTING.has(ev.type)) scheduleSessionsRefresh()
|
||||
|
||||
switch (ev.type) {
|
||||
case 'plan.proposed': {
|
||||
@@ -114,17 +123,17 @@ function applyEvent(ev: { type: string; correlation_id?: string | null; data?: u
|
||||
id: s.id, seq: s.seq, title: s.title, detail: s.detail ?? '',
|
||||
status: 'pending' as const, target_slug: s.target_slug || undefined
|
||||
}))
|
||||
planSteps.update((existing) => (d.appended ? [...existing, ...incoming] : incoming))
|
||||
ws.planSteps.update((existing) => (d.appended ? [...existing, ...incoming] : incoming))
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'plan.step.started':
|
||||
case 'plan.step.finished':
|
||||
applyPlanStepEvent(sid, ev.type, data as unknown as PlanStepEventData)
|
||||
applyPlanStepEventTo(ws, data as unknown as PlanStepEventData)
|
||||
break
|
||||
case 'question.raised': {
|
||||
const d = data as unknown as QuestionRaisedData
|
||||
questions.update((qs) => [
|
||||
ws.questions.update((qs) => [
|
||||
{
|
||||
id: d.question_id, prompt: d.prompt ?? '',
|
||||
context: { why: d.why, options: d.options, entities: d.entities },
|
||||
@@ -136,7 +145,7 @@ function applyEvent(ev: { type: string; correlation_id?: string | null; data?: u
|
||||
}
|
||||
case 'question.answered': {
|
||||
const d = data as unknown as QuestionAnsweredData
|
||||
questions.update((qs) =>
|
||||
ws.questions.update((qs) =>
|
||||
qs.map((q) => (q.id === d.question_id ? { ...q, status: 'answered', answer: d.answer } : q))
|
||||
)
|
||||
break
|
||||
@@ -145,7 +154,7 @@ function applyEvent(ev: { type: string; correlation_id?: string | null; data?: u
|
||||
const d = data as unknown as EntityTouchedData
|
||||
if (d.slug) {
|
||||
const now = Date.now()
|
||||
touched.update((t) => [{ slug: d.slug, tool: d.tool ?? '', ts: now }, ...t].slice(0, TOUCHED_MAX))
|
||||
ws.touched.update((t) => [{ slug: d.slug, tool: d.tool ?? '', ts: now }, ...t].slice(0, TOUCHED_MAX))
|
||||
}
|
||||
break
|
||||
}
|
||||
@@ -157,13 +166,30 @@ function applyEvent(ev: { type: string; correlation_id?: string | null; data?: u
|
||||
// health.changed is task-agnostic (fleet-wide), so it's matched separately:
|
||||
// show the diff whenever the changed entity is one this task has touched, not
|
||||
// by correlation_id (health events don't carry one).
|
||||
function applyHealthChanged(ev: { type: string; data?: unknown }) {
|
||||
function applyHealthChangedTo(ws: WorkspaceState, ev: { type: string; data?: unknown }) {
|
||||
if (ev.type !== 'health.changed') return
|
||||
const data = (ev.data ?? {}) as HealthChangedData
|
||||
if (!data.slug) return
|
||||
const isRelevant = get(touched).some((t) => t.slug === data.slug)
|
||||
const isRelevant = get(ws.touched).some((t) => t.slug === data.slug)
|
||||
if (!isRelevant) return
|
||||
healthDiffs.update((d) => [{ slug: data.slug, from: data.from ?? '', to: data.to ?? '', ts: Date.now() }, ...d].slice(0, 8))
|
||||
ws.healthDiffs.update((d) => [{ slug: data.slug, from: data.from ?? '', to: data.to ?? '', ts: Date.now() }, ...d].slice(0, 8))
|
||||
}
|
||||
|
||||
let hydratedFor: string | null = null
|
||||
let unsubStream: (() => void) | null = null
|
||||
let unsubLive: (() => void) | null = null
|
||||
let lastSeenId = 0
|
||||
|
||||
async function hydrate(sessionId: string) {
|
||||
hydratedFor = sessionId
|
||||
globalWorkspace.planSteps.set([])
|
||||
globalWorkspace.questions.set([])
|
||||
globalWorkspace.touched.set([])
|
||||
globalWorkspace.healthDiffs.set([])
|
||||
const [steps, qs] = await Promise.all([fetchPlan(sessionId), fetchQuestions(sessionId)])
|
||||
if (get(currentSession) !== sessionId) return // switched away while loading
|
||||
globalWorkspace.planSteps.set(steps)
|
||||
globalWorkspace.questions.set(qs)
|
||||
}
|
||||
|
||||
// startWorkspace opens the global event subscription and begins tracking the
|
||||
@@ -176,10 +202,10 @@ export function startWorkspace(): () => void {
|
||||
if (sid && sid !== hydratedFor) hydrate(sid)
|
||||
if (!sid) {
|
||||
hydratedFor = null
|
||||
planSteps.set([])
|
||||
questions.set([])
|
||||
touched.set([])
|
||||
healthDiffs.set([])
|
||||
globalWorkspace.planSteps.set([])
|
||||
globalWorkspace.questions.set([])
|
||||
globalWorkspace.touched.set([])
|
||||
globalWorkspace.healthDiffs.set([])
|
||||
}
|
||||
})
|
||||
|
||||
@@ -191,11 +217,13 @@ export function startWorkspace(): () => void {
|
||||
}
|
||||
const fresh = evs.filter((e) => e.id > lastSeenId)
|
||||
lastSeenId = maxId
|
||||
const sid = get(currentSession)
|
||||
if (!sid) return
|
||||
// Oldest-first application so ordering (e.g. plan.step.started before
|
||||
// .finished) is preserved.
|
||||
for (const e of fresh.slice().reverse()) {
|
||||
applyEvent(e)
|
||||
applyHealthChanged(e)
|
||||
applyEventTo(globalWorkspace, sid, e)
|
||||
applyHealthChangedTo(globalWorkspace, e)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -206,9 +234,69 @@ export function startWorkspace(): () => void {
|
||||
}
|
||||
}
|
||||
|
||||
// Sweep expired pulses/diffs on an interval so old touches stop glowing.
|
||||
// ─── per-session workspace, for floating task windows ───────────────────────
|
||||
//
|
||||
// Same shape as the global workspace above, but keyed by session id instead
|
||||
// of "whatever's on screen" — mirrors chat.ts's chatFor(). A window's
|
||||
// TaskContextPanel calls startSessionWorkspace(sessionId) instead of
|
||||
// startWorkspace(), and reads workspaceFor(sessionId)'s stores instead of the
|
||||
// global ones, so several sessions' panels can be open and live at once.
|
||||
const workspaces = new Map<string, WorkspaceState>()
|
||||
|
||||
export function workspaceFor(sessionId: string): WorkspaceState {
|
||||
let w = workspaces.get(sessionId)
|
||||
if (!w) {
|
||||
w = createWorkspaceState()
|
||||
workspaces.set(sessionId, w)
|
||||
}
|
||||
return w
|
||||
}
|
||||
|
||||
export function taskFor(sessionId: string): Readable<Session | null> {
|
||||
return derived(sessions, ($sessions) => $sessions.find((s) => s.id === sessionId) ?? null)
|
||||
}
|
||||
|
||||
async function hydrateSession(ws: WorkspaceState, sessionId: string) {
|
||||
const [steps, qs] = await Promise.all([fetchPlan(sessionId), fetchQuestions(sessionId)])
|
||||
ws.planSteps.set(steps)
|
||||
ws.questions.set(qs)
|
||||
}
|
||||
|
||||
export function startSessionWorkspace(sessionId: string): () => void {
|
||||
const ws = workspaceFor(sessionId)
|
||||
const unsub = subscribeEvents()
|
||||
hydrateSession(ws, sessionId)
|
||||
|
||||
// Own "seen" watermark rather than the global lastSeenId — several
|
||||
// windows, each watching a different session, can be reading off the same
|
||||
// liveEvents feed at once.
|
||||
let lastSeen = 0
|
||||
const unsubLive = liveEvents.subscribe((evs) => {
|
||||
if (evs.length === 0) return
|
||||
const maxId = evs[0].id
|
||||
if (maxId <= lastSeen) return
|
||||
const fresh = evs.filter((e) => e.id > lastSeen)
|
||||
lastSeen = maxId
|
||||
for (const e of fresh.slice().reverse()) {
|
||||
applyEventTo(ws, sessionId, e)
|
||||
applyHealthChangedTo(ws, e)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubLive()
|
||||
unsub()
|
||||
}
|
||||
}
|
||||
|
||||
// Sweep expired pulses/diffs on an interval so old touches stop glowing —
|
||||
// across the global workspace and every per-session one currently in use.
|
||||
setInterval(() => {
|
||||
const now = Date.now()
|
||||
touched.update((t) => t.filter((e) => now - e.ts < TOUCHED_PULSE_MS))
|
||||
healthDiffs.update((d) => d.filter((e) => now - e.ts < HEALTH_DIFF_MS))
|
||||
const sweep = (ws: WorkspaceState) => {
|
||||
ws.touched.update((t) => t.filter((e) => now - e.ts < TOUCHED_PULSE_MS))
|
||||
ws.healthDiffs.update((d) => d.filter((e) => now - e.ts < HEALTH_DIFF_MS))
|
||||
}
|
||||
sweep(globalWorkspace)
|
||||
for (const ws of workspaces.values()) sweep(ws)
|
||||
}, 1000)
|
||||
|
||||
@@ -1,412 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { messages, streaming, connectionState, currentSession, sendMessage, cancelStream, reconnect, error, chatErrors, dismissError } from '$lib/stores/chat'
|
||||
import { activityLog } from '$lib/stores/activity'
|
||||
import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'
|
||||
import AgentIndicator from '$lib/components/AgentIndicator.svelte'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
|
||||
import SquareIcon from '@lucide/svelte/icons/square'
|
||||
import { marked } from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
|
||||
let { showRail = true }: { showRail?: boolean } = $props()
|
||||
|
||||
let input = $state('')
|
||||
let messagesEnd = $state<HTMLDivElement | null>(null)
|
||||
let scrolledUp = $state(false)
|
||||
let container = $state<HTMLDivElement | null>(null)
|
||||
|
||||
function isNearBottom(): boolean {
|
||||
if (!container) return true
|
||||
const { scrollTop, scrollHeight, clientHeight } = container
|
||||
return scrollHeight - scrollTop - clientHeight < 80
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
scrolledUp = !isNearBottom()
|
||||
}
|
||||
|
||||
// Auto-scroll to bottom on new messages — unless user scrolled up to read.
|
||||
$effect(() => {
|
||||
void $messages
|
||||
if ($streaming || !scrolledUp) {
|
||||
setTimeout(() => messagesEnd?.scrollIntoView({ behavior: 'smooth' }), 50)
|
||||
}
|
||||
})
|
||||
|
||||
// Reset scroll lock when user sends a message.
|
||||
function submitFollows() {
|
||||
scrolledUp = false
|
||||
}
|
||||
|
||||
// Resizable right rail (session graph). Persisted so it survives reloads.
|
||||
const RAIL_MIN = 260
|
||||
const RAIL_MAX = 620
|
||||
function loadRailWidth(): number {
|
||||
if (typeof localStorage === 'undefined') return 320
|
||||
const v = Number(localStorage.getItem('oikos-rail-width'))
|
||||
return v >= RAIL_MIN && v <= RAIL_MAX ? v : 320
|
||||
}
|
||||
let railWidth = $state(loadRailWidth())
|
||||
let resizing = $state(false)
|
||||
|
||||
function startResize(e: PointerEvent) {
|
||||
e.preventDefault()
|
||||
resizing = true
|
||||
const startX = e.clientX
|
||||
const startW = railWidth
|
||||
function move(ev: PointerEvent) {
|
||||
railWidth = Math.min(RAIL_MAX, Math.max(RAIL_MIN, startW + (startX - ev.clientX)))
|
||||
}
|
||||
function up() {
|
||||
resizing = false
|
||||
localStorage.setItem('oikos-rail-width', String(railWidth))
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
}
|
||||
|
||||
function render(text: string): string {
|
||||
return DOMPurify.sanitize(marked.parse(text, { async: false }) as string)
|
||||
}
|
||||
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text || $streaming) return
|
||||
input = ''
|
||||
scrolledUp = false
|
||||
sendMessage(text)
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
const suggestions = [
|
||||
'What needs my attention right now?',
|
||||
'Summarize fleet health',
|
||||
'Any pending approvals or open signals?',
|
||||
'What changed in the last hour?'
|
||||
]
|
||||
|
||||
function ask(q: string) {
|
||||
if ($streaming) return
|
||||
sendMessage(q)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0">
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<div class="min-h-0 flex-1 overflow-y-auto" bind:this={container} onscroll={onScroll}>
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-5 p-4">
|
||||
{#if $messages.length === 0}
|
||||
<div class="flex flex-col items-center gap-6 pt-24 text-center">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold">Nomos</h2>
|
||||
<p class="mt-1 text-sm text-muted-foreground">Your resident operator. Ask about the fleet, or tell it to act.</p>
|
||||
</div>
|
||||
<div class="grid w-full max-w-md grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
{#each suggestions as q}
|
||||
<Button variant="outline" size="sm" class="h-auto justify-start whitespace-normal py-2 text-left text-xs" onclick={() => ask(q)}>
|
||||
{q}
|
||||
</Button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each $messages as msg, i (msg.id)}
|
||||
<div class="flex flex-col gap-1.5 {msg.role === 'user' ? 'items-end' : 'items-start'}">
|
||||
{#if msg.role === 'user'}
|
||||
<div class="max-w-[85%] rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-sm text-primary-foreground whitespace-pre-wrap user-msg">{msg.text}</div>
|
||||
{:else}
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
{#if msg.text}
|
||||
<div class="prose-chat max-w-none text-sm leading-relaxed assistant-msg">
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags — sanitized via DOMPurify -->
|
||||
{@html render(msg.text)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<AgentIndicator
|
||||
active={$streaming || $activityLog.some((e) => e.status === 'running')}
|
||||
lastActivity={$activityLog.find((e) => e.status === 'running') ?? null}
|
||||
error={$error}
|
||||
/>
|
||||
<div bind:this={messagesEnd}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if $connectionState === 'disconnected'}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border border-warning/50 bg-warning/10 px-3 py-2 text-xs">
|
||||
<RefreshCwIcon class="size-3 shrink-0" aria-hidden="true" />
|
||||
<span class="text-warning-foreground flex-1">Agent connection lost. The task may still be running.</span>
|
||||
<Button size="xs" variant="outline" class="h-6 text-[11px]" onclick={reconnect}>Reconnect</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if $connectionState === 'reconnecting'}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border bg-muted/50 px-3 py-2 text-xs">
|
||||
<RefreshCwIcon class="size-3 shrink-0 animate-spin text-muted-foreground" aria-hidden="true" />
|
||||
<span class="text-muted-foreground flex-1">Reconnecting to agent…</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $error}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{$error}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each $chatErrors as err (err.id)}
|
||||
<div class="mx-auto w-full max-w-3xl px-4">
|
||||
<div class="mb-2 flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
|
||||
<span class="flex-1">{err.message}</span>
|
||||
{#if err.action}
|
||||
<Button size="xs" variant="ghost" class="h-6 text-[11px]" onclick={() => dismissError(err.id)}>{err.action}</Button>
|
||||
{/if}
|
||||
<button class="ml-1 text-muted-foreground hover:text-foreground" onclick={() => dismissError(err.id)} aria-label="Dismiss">×</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<div class="border-t bg-card/50 p-3 input-ornament relative">
|
||||
<form
|
||||
class="mx-auto flex max-w-3xl items-end gap-2"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Ask Nomos anything…"
|
||||
rows={2}
|
||||
class="max-h-40 min-h-0 resize-none"
|
||||
disabled={$streaming}
|
||||
/>
|
||||
{#if $streaming}
|
||||
<Button type="button" size="icon" variant="destructive" onclick={cancelStream} aria-label="Stop">
|
||||
<SquareIcon />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Send">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showRail}
|
||||
<div class="hidden shrink-0 xl:flex" style="width: {railWidth}px">
|
||||
<button
|
||||
type="button"
|
||||
class="group/rz relative w-1.5 shrink-0 cursor-col-resize touch-none"
|
||||
onpointerdown={startResize}
|
||||
aria-label="Resize task panel"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors {resizing
|
||||
? 'bg-primary/60'
|
||||
: 'bg-border group-hover/rz:bg-primary/50'}"
|
||||
></span>
|
||||
</button>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<TaskContextPanel />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ── Art Nouveau chat styling ── */
|
||||
|
||||
/* Assistant message wrapper */
|
||||
.assistant-msg {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* User message — soft terracotta bubble, gentle lift */
|
||||
.user-msg {
|
||||
box-shadow: 0 1px 8px -4px var(--primary);
|
||||
}
|
||||
|
||||
/* Prose overrides */
|
||||
.prose-chat :global(p) {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.prose-chat :global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose-chat :global(ul),
|
||||
.prose-chat :global(ol) {
|
||||
margin: 0 0 0.5rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.prose-chat :global(ul) {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.prose-chat :global(ol) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.prose-chat :global(li) {
|
||||
margin-bottom: 0.125rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.prose-chat :global(li::marker) {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.prose-chat :global(code) {
|
||||
background: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.4em;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.prose-chat :global(pre) {
|
||||
background: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 0.875rem;
|
||||
overflow-x: auto;
|
||||
margin: 0 0 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
.prose-chat :global(pre)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--primary), transparent);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.prose-chat :global(pre code) {
|
||||
background: none;
|
||||
padding: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Section headings — serif (Inknut) with a short accent rule. Extra top
|
||||
margin separates sections; the first heading in a message doesn't. */
|
||||
.prose-chat :global(h1),
|
||||
.prose-chat :global(h2),
|
||||
.prose-chat :global(h3) {
|
||||
font-weight: 600;
|
||||
margin: 1.15rem 0 0.4rem;
|
||||
font-size: 1.03em;
|
||||
letter-spacing: 0.01em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.prose-chat :global(> h1:first-child),
|
||||
.prose-chat :global(> h2:first-child),
|
||||
.prose-chat :global(> h3:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.prose-chat :global(h1)::after,
|
||||
.prose-chat :global(h2)::after,
|
||||
.prose-chat :global(h3)::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2px;
|
||||
margin-top: 4px;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to right, var(--primary), transparent);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.prose-chat :global(table) {
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.prose-chat :global(th) {
|
||||
background: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose-chat :global(th),
|
||||
.prose-chat :global(td) {
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.3rem 0.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose-chat :global(blockquote) {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding-left: 0.75rem;
|
||||
color: var(--muted-foreground);
|
||||
margin: 0 0 0.5rem;
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
}
|
||||
.prose-chat :global(blockquote)::before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
left: -0.15rem;
|
||||
top: -0.35rem;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary);
|
||||
opacity: 0.6;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.prose-chat :global(hr) {
|
||||
border: none;
|
||||
height: 1px;
|
||||
margin: 0.75rem 0;
|
||||
background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
|
||||
}
|
||||
|
||||
/* Bold is emphasis, not color — dark weight reads cleanly and lets the
|
||||
terracotta accent stay meaningful (code, headings, links). */
|
||||
.prose-chat :global(strong) {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose-chat :global(a) {
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Input area ornament */
|
||||
.input-ornament::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--primary), transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +0,0 @@
|
||||
<script lang="ts">
|
||||
import EntityDetailContent from '$lib/components/EntityDetailContent.svelte'
|
||||
import { openEntityWindow } from '$lib/stores/windows'
|
||||
|
||||
let { slug }: { slug: string } = $props()
|
||||
</script>
|
||||
|
||||
<EntityDetailContent {slug} onSelectEntity={openEntityWindow} />
|
||||
@@ -1,15 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { fetchEntities, fetchOntology, fetchGraph, type Entity, type EntityType, type Ontology } from '$lib/api'
|
||||
import { fetchAllEntities, fetchOntology, fetchGraph, type Entity, type EntityType, type Ontology } from '$lib/api'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import EntityTable from '$lib/components/EntityTable.svelte'
|
||||
import EntityGraph, { type GraphInfo } from '$lib/components/EntityGraph.svelte'
|
||||
import MultiSelectFilter from '$lib/components/MultiSelectFilter.svelte'
|
||||
import { categories, filtersForCategory, type Category } from '$lib/categories'
|
||||
import { typeToCategory, type Category } from '$lib/categories'
|
||||
import { openEntityWindow, wmState } from '$lib/stores/windows'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Input } from '$lib/components/ui/input'
|
||||
import * as Select from '$lib/components/ui/select'
|
||||
import { Switch } from '$lib/components/ui/switch'
|
||||
import { Label } from '$lib/components/ui/label'
|
||||
import NetworkIcon from '@lucide/svelte/icons/share-2'
|
||||
@@ -23,10 +22,13 @@
|
||||
return localStorage.getItem('oikos-kb-view') === 'table' ? 'table' : 'graph'
|
||||
}
|
||||
|
||||
let category = $state<Category>('fleet')
|
||||
let view = $state<View>(loadView())
|
||||
// Shared between table (filters rows) and graph (highlights/searches
|
||||
// nodes) — one search box instead of two differently-labeled ones, since
|
||||
// both views are asking the same underlying question ("show me X").
|
||||
let search = $state('')
|
||||
// Tracks only the most recently opened entity, for row/node highlight —
|
||||
// actual detail viewing now happens in floating windows (EntityDesktop),
|
||||
// actual detail viewing now happens in floating windows (WindowLayer, mounted inside Desktop.svelte),
|
||||
// which can have several entities open at once.
|
||||
let lastOpened = $state<string | null>(null)
|
||||
|
||||
@@ -40,40 +42,40 @@
|
||||
openEntityWindow(slug)
|
||||
}
|
||||
|
||||
// Drop the highlight once its window is closed (from EntityDesktop, not
|
||||
// Drop the highlight once its window is closed (from WindowLayer, not
|
||||
// necessarily from here) rather than leaving a row/node marked "open" when
|
||||
// it isn't anymore.
|
||||
$effect(() => {
|
||||
if (lastOpened && !$wmState.windows[lastOpened]) lastOpened = null
|
||||
})
|
||||
|
||||
// ─── table data: fetched here (not inside EntityTable) so the search/type
|
||||
// ─── entities: fetched here (not inside EntityTable) so the search/type
|
||||
// toolbar lives in the shared page toolbar instead of the resizable browse
|
||||
// pane, where its width is at the mercy of the divider and it would
|
||||
// truncate. This also keeps the browse pane header-free, so it and the
|
||||
// detail pane both start flush under the toolbar and end up the same height.
|
||||
let tableEntities = $state<Entity[]>([])
|
||||
let tableLoading = $state(true)
|
||||
let query = $state('')
|
||||
let typeFilter = $state('all')
|
||||
// truncate. Both views now share the same full entity set — there's no
|
||||
// more per-category server-side scoping, only the client-side type
|
||||
// multiselect (activeTypes) below, which both the table (row visibility)
|
||||
// and the graph (node visibility) read from.
|
||||
let allEntities = $state<Entity[]>([])
|
||||
let entitiesLoading = $state(true)
|
||||
let showInactive = $state(false)
|
||||
// child entity slug -> parent entity slug, derived from the ontology graph
|
||||
// (see loadFleetGrouping). Only populated for the fleet category — feeds
|
||||
// EntityTable's treegrid grouping, nesting e.g.
|
||||
// cluster -> host -> lxc -> service, or storage-pool -> volume -> dataset.
|
||||
// (see loadGrouping). Feeds EntityTable's treegrid grouping, nesting e.g.
|
||||
// host -> lxc -> service, or storage-pool -> volume -> dataset — computed
|
||||
// over the whole entity set so the hierarchy doesn't reshuffle as the type
|
||||
// filter is toggled (EntityTable falls back a filtered-out parent's
|
||||
// children to top-level rather than dropping them).
|
||||
let childToParent = $state<Map<string, string> | null>(null)
|
||||
|
||||
let ontologyCache: Promise<Ontology> | null = null
|
||||
let ontologyPromise: Promise<Ontology> | null = null
|
||||
function getOntology(): Promise<Ontology> {
|
||||
ontologyPromise ??= fetchOntology()
|
||||
return ontologyPromise
|
||||
}
|
||||
|
||||
function isOrDescendsFrom(byName: Map<string, EntityType>, typeName: string, ancestor: string): boolean {
|
||||
if (typeName === ancestor) return true
|
||||
let t = byName.get(typeName)
|
||||
for (let depth = 0; t?.parent_type && depth < 10; depth++) {
|
||||
if (t.parent_type === ancestor) return true
|
||||
t = byName.get(t.parent_type)
|
||||
}
|
||||
return false
|
||||
}
|
||||
// type -> browsing category (see categories.ts), used only to seed the
|
||||
// type multiselect's default selection ("fleet") — not to scope any fetch.
|
||||
let typeCategory = $state<Map<string, Category | undefined>>(new Map())
|
||||
|
||||
// Distance from the ontology's abstract root ("entity") down to typeName —
|
||||
// 0 for entity itself, 1 for its direct subtypes, etc. Used as a
|
||||
@@ -97,9 +99,9 @@
|
||||
// parent (e.g. many hosts are located-at one site). many-to-many
|
||||
// relationships (mounts, stores-on, backs-up-to, ...) have no single
|
||||
// parent, so they're excluded from tree nesting. A candidate parent that
|
||||
// isn't actually part of the fleet set being browsed (e.g. `cluster`,
|
||||
// filtered out below) is dropped rather than kept as a dangling pointer —
|
||||
// that's also what lets `located-at` surface as a host's parent instead of
|
||||
// isn't actually part of the set being browsed (e.g. `cluster`, filtered
|
||||
// out below) is dropped rather than kept as a dangling pointer — that's
|
||||
// also what lets `located-at` surface as a host's parent instead of
|
||||
// `member-of` without any special-cased priority: with cluster absent,
|
||||
// member-of simply has nothing valid to point at. An entity can still be
|
||||
// the child end of several different *remaining* relationship types at
|
||||
@@ -107,81 +109,82 @@
|
||||
// repo) — only one can win as its tree parent, so ties go to the more
|
||||
// specific relationship (see typeDepth) rather than whichever was fetched
|
||||
// last.
|
||||
async function loadFleetGrouping(fleetEntities: Entity[]): Promise<Map<string, string>> {
|
||||
ontologyCache ??= fetchOntology()
|
||||
const { entityTypes, relationshipTypes } = await ontologyCache
|
||||
async function loadGrouping(entities: Entity[]): Promise<Map<string, string>> {
|
||||
const { entityTypes, relationshipTypes } = await getOntology()
|
||||
const byName = new Map(entityTypes.map((t) => [t.name, t]))
|
||||
const hierRels = relationshipTypes.filter((rt) => rt.cardinality !== 'many-to-many')
|
||||
const relTypeNames = hierRels.map((rt) => rt.name)
|
||||
const cardinalityByType = new Map(hierRels.map((rt) => [rt.name, rt.cardinality]))
|
||||
const specificityByType = new Map(hierRels.map((rt) => [rt.name, typeDepth(byName, rt.source_type)]))
|
||||
const fleetSlugs = new Set(fleetEntities.map((e) => e.slug))
|
||||
const slugs = new Set(entities.map((e) => e.slug))
|
||||
|
||||
// blast_radius only walks source -> target, so an entity only surfaces a
|
||||
// relationship if it can be that relationship's source.
|
||||
const roots = fleetEntities.filter((e) =>
|
||||
hierRels.some((rt) => isOrDescendsFrom(byName, e.type, rt.source_type))
|
||||
)
|
||||
const pairs = await Promise.all(
|
||||
roots.map(async (root) => {
|
||||
const g = await fetchGraph({ root: root.slug, depth: 1, relType: relTypeNames })
|
||||
return (g?.edges ?? [])
|
||||
.filter((edge) => edge.source === root.slug && cardinalityByType.has(edge.type))
|
||||
// One whole-graph fetch instead of one rooted fetch per candidate parent
|
||||
// — now that grouping runs over the entire entity set rather than a
|
||||
// ~50-entity category, firing a request per entity blew past the
|
||||
// browser's concurrent-connection limit (ERR_INSUFFICIENT_RESOURCES).
|
||||
const g = await fetchGraph({ relType: relTypeNames })
|
||||
const pairs = (g?.edges ?? [])
|
||||
.filter((edge) => cardinalityByType.has(edge.type) && slugs.has(edge.source) && slugs.has(edge.target))
|
||||
.map((edge) => {
|
||||
const [child, parent] =
|
||||
cardinalityByType.get(edge.type) === 'many-to-one'
|
||||
? [edge.source, edge.target] // root is the child; target is the "one" (parent)
|
||||
: [edge.target, edge.source] // root is the "one" (parent); target is the child
|
||||
? [edge.source, edge.target] // source is the child; target is the "one" (parent)
|
||||
: [edge.target, edge.source] // source is the "one" (parent); target is the child
|
||||
return { child, parent, weight: specificityByType.get(edge.type) ?? 0 }
|
||||
})
|
||||
.filter(({ parent }) => fleetSlugs.has(parent))
|
||||
})
|
||||
)
|
||||
const best = new Map<string, { parent: string; weight: number }>()
|
||||
for (const { child, parent, weight } of pairs.flat()) {
|
||||
for (const { child, parent, weight } of pairs) {
|
||||
const current = best.get(child)
|
||||
if (!current || weight > current.weight) best.set(child, { parent, weight })
|
||||
}
|
||||
return new Map([...best].map(([child, { parent }]) => [child, parent]))
|
||||
}
|
||||
|
||||
async function loadTable() {
|
||||
tableLoading = true
|
||||
const filterSets = filtersForCategory(category)
|
||||
const results = await Promise.all(filterSets.map((f) => fetchEntities(f)))
|
||||
// cluster entities aren't shown in Fleet browsing — with them absent, a
|
||||
// host's `member-of` edge has no valid parent to point at, so
|
||||
// `located-at` (site) is the only remaining candidate and wins the
|
||||
// tree-parent tie-break without a hardcoded relationship priority (see
|
||||
// loadFleetGrouping).
|
||||
const fetched = results.flat().filter((e) => e.type !== 'cluster')
|
||||
childToParent = category === 'fleet' ? await loadFleetGrouping(fetched) : null
|
||||
tableEntities = fetched
|
||||
tableLoading = false
|
||||
async function loadEntities() {
|
||||
entitiesLoading = true
|
||||
// cluster entities are dropped so a host's `member-of` edge has no valid
|
||||
// parent to point at, leaving `located-at` (site) as the only remaining
|
||||
// tree-parent candidate (see loadGrouping).
|
||||
const fetched = (await fetchAllEntities()).filter((e) => e.type !== 'cluster')
|
||||
childToParent = await loadGrouping(fetched)
|
||||
allEntities = fetched
|
||||
entitiesLoading = false
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadEntities()
|
||||
getOntology().then((o) => {
|
||||
typeCategory = new Map(o.entityTypes.map((t) => [t.name, typeToCategory(t.name, t.domain)]))
|
||||
})
|
||||
const unsubscribe = subscribeEvents()
|
||||
return unsubscribe
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
if (view !== 'table') return
|
||||
category
|
||||
loadTable()
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
const ev = $liveEvents[0]
|
||||
if (view !== 'table' || !ev || !ev.type.startsWith('entity.')) return
|
||||
loadTable()
|
||||
if (!ev || !ev.type.startsWith('entity.')) return
|
||||
loadEntities()
|
||||
})
|
||||
|
||||
const allTypes = $derived(Array.from(new Set(allEntities.map((e) => e.type))).sort())
|
||||
|
||||
// Shared show/hide-by-type filter — governs both the table's row
|
||||
// visibility and the graph's node visibility. Seeded once (not
|
||||
// re-derived) to "fleet" types as soon as both the entity set and the
|
||||
// ontology's type->category map are loaded, so it doesn't clobber the
|
||||
// user's own toggles on a later reload.
|
||||
let activeTypes = $state<Set<string>>(new Set())
|
||||
let typesSeeded = false
|
||||
$effect(() => {
|
||||
if (typesSeeded || allTypes.length === 0 || typeCategory.size === 0) return
|
||||
activeTypes = new Set(allTypes.filter((t) => typeCategory.get(t) === 'fleet'))
|
||||
typesSeeded = true
|
||||
})
|
||||
|
||||
const tableTypes = $derived(Array.from(new Set(tableEntities.map((e) => e.type))).sort())
|
||||
const filteredEntities = $derived.by(() => {
|
||||
const q = query.trim().toLowerCase()
|
||||
return tableEntities.filter((e) => {
|
||||
if (typeFilter !== 'all' && e.type !== typeFilter) return false
|
||||
const q = search.trim().toLowerCase()
|
||||
return allEntities.filter((e) => {
|
||||
if (!activeTypes.has(e.type)) return false
|
||||
if (q && !e.slug.toLowerCase().includes(q) && !e.name.toLowerCase().includes(q)) return false
|
||||
// entities with no tracked lifecycle state (state is null) aren't
|
||||
// "destroyed or inactive" — only hide ones whose tracked state has
|
||||
@@ -196,12 +199,10 @@
|
||||
// width instead of being squeezed by the resizable browse pane.
|
||||
let graphRoot = $state('')
|
||||
let graphDepth = $state(2)
|
||||
let graphSearch = $state('')
|
||||
let graphReloadToken = $state(0)
|
||||
let graphResetToken = $state(0)
|
||||
let graphActiveNodeTypes = $state<Set<string>>(new Set())
|
||||
let graphActiveRelTypes = $state<Set<string>>(new Set())
|
||||
let graphInfo = $state<GraphInfo>({ allNodeTypes: [], allRelTypes: [], relColors: new Map(), visibleCount: 0, truncated: false, zoomPct: 100 })
|
||||
let graphInfo = $state<GraphInfo>({ allRelTypes: [], relColors: new Map(), visibleCount: 0, truncated: false, zoomPct: 100 })
|
||||
|
||||
function commitGraphQuery() {
|
||||
graphReloadToken++
|
||||
@@ -209,7 +210,7 @@
|
||||
|
||||
function resetGraph() {
|
||||
graphRoot = ''
|
||||
graphSearch = ''
|
||||
search = ''
|
||||
graphResetToken++
|
||||
}
|
||||
|
||||
@@ -219,97 +220,76 @@
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col gap-3 p-4">
|
||||
<!-- toolbar: category perspective + view toggle -->
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<div class="inline-flex overflow-hidden rounded-md border">
|
||||
{#each categories as c}
|
||||
<Button
|
||||
variant={category === c.id ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
class="h-8 rounded-none border-0"
|
||||
onclick={() => (category = c.id)}
|
||||
>
|
||||
{c.label}
|
||||
</Button>
|
||||
{/each}
|
||||
<!-- single toolbar row: search + type filter are shared by both views
|
||||
(one multiselect instead of a category tab, a single-select "All
|
||||
types" dropdown, and a separate graph node-type toggle), the rest is
|
||||
view-specific, and the graph/table switch sits inline with the rest
|
||||
instead of floating in its own row. -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Input placeholder="Filter / highlight by slug or name…" bind:value={search} class="h-8 max-w-xs text-xs" />
|
||||
<MultiSelectFilter label="Types" options={allTypes} bind:selected={activeTypes} />
|
||||
|
||||
{#if view === 'table'}
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Switch id="show-inactive" bind:checked={showInactive} />
|
||||
<Label for="show-inactive" class="text-xs font-normal text-muted-foreground">Inactive</Label>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground">{filteredEntities.length} of {allEntities.length}</span>
|
||||
{:else}
|
||||
<Input placeholder="Root entity…" bind:value={graphRoot} class="h-8 max-w-40 text-xs" onchange={commitGraphQuery} />
|
||||
<Input type="number" min="1" max="5" bind:value={graphDepth} class="h-8 w-14 text-xs" onchange={commitGraphQuery} />
|
||||
<Button variant="outline" size="sm" class="h-8" onclick={resetGraph}>
|
||||
<LocateFixedIcon class="mr-1 size-3.5" />
|
||||
Reset
|
||||
</Button>
|
||||
<MultiSelectFilter label="Edges" options={graphInfo.allRelTypes} bind:selected={graphActiveRelTypes} colorFor={relColorFor} />
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{graphInfo.visibleCount} nodes{graphInfo.truncated ? ' · truncated' : ''} · {graphInfo.zoomPct}%
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<div class="ml-auto inline-flex overflow-hidden rounded-md border">
|
||||
<Button
|
||||
variant={view === 'graph' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
class="h-8 rounded-none border-0"
|
||||
class="h-8 rounded-none border-0 px-2"
|
||||
onclick={() => setView('graph')}
|
||||
title="Graph view"
|
||||
aria-label="Graph view"
|
||||
>
|
||||
<NetworkIcon class="mr-1 size-3.5" /> Graph
|
||||
<NetworkIcon class="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={view === 'table' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
class="h-8 rounded-none border-0"
|
||||
class="h-8 rounded-none border-0 px-2"
|
||||
onclick={() => setView('table')}
|
||||
title="Table view"
|
||||
aria-label="Table view"
|
||||
>
|
||||
<TableIcon class="mr-1 size-3.5" /> Table
|
||||
<TableIcon class="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if view === 'table'}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Input placeholder="Filter by slug or name…" bind:value={query} class="h-8 max-w-xs text-xs" />
|
||||
<Select.Root type="single" bind:value={typeFilter}>
|
||||
<Select.Trigger class="h-8 w-40 text-xs">
|
||||
{typeFilter === 'all' ? 'All types' : typeFilter}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="all">All types</Select.Item>
|
||||
{#each tableTypes as type}
|
||||
<Select.Item value={type}>{type}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Switch id="show-inactive" bind:checked={showInactive} />
|
||||
<Label for="show-inactive" class="text-xs font-normal text-muted-foreground">Inactive</Label>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground">{filteredEntities.length} of {tableEntities.length}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Input placeholder="Root entity…" bind:value={graphRoot} class="h-8 max-w-44 text-xs" onchange={commitGraphQuery} />
|
||||
<Input type="number" min="1" max="5" bind:value={graphDepth} class="h-8 w-16 text-xs" onchange={commitGraphQuery} />
|
||||
<Input placeholder="Search / highlight…" bind:value={graphSearch} class="h-8 max-w-44 text-xs" />
|
||||
<Button variant="outline" size="sm" class="h-8" onclick={resetGraph}>
|
||||
<LocateFixedIcon class="mr-1 size-3.5" />
|
||||
Reset
|
||||
</Button>
|
||||
<MultiSelectFilter label="Nodes" options={graphInfo.allNodeTypes} bind:selected={graphActiveNodeTypes} />
|
||||
<MultiSelectFilter label="Edges" options={graphInfo.allRelTypes} bind:selected={graphActiveRelTypes} colorFor={relColorFor} />
|
||||
<span class="ml-auto text-xs text-muted-foreground">
|
||||
{graphInfo.visibleCount} nodes{graphInfo.truncated ? ' · truncated' : ''} · {graphInfo.zoomPct}%
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- browse pane — selecting an entity opens it in a floating window
|
||||
(EntityDesktop, mounted globally in App.svelte) instead of a sidebar. -->
|
||||
(WindowLayer, mounted globally inside Desktop.svelte) instead of a sidebar. -->
|
||||
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
{#if view === 'graph'}
|
||||
<EntityGraph
|
||||
{category}
|
||||
selectedSlug={lastOpened}
|
||||
onSelect={select}
|
||||
bind:root={graphRoot}
|
||||
depth={graphDepth}
|
||||
search={graphSearch}
|
||||
{search}
|
||||
reloadToken={graphReloadToken}
|
||||
resetToken={graphResetToken}
|
||||
bind:activeNodeTypes={graphActiveNodeTypes}
|
||||
activeNodeTypes={activeTypes}
|
||||
bind:activeRelTypes={graphActiveRelTypes}
|
||||
bind:info={graphInfo}
|
||||
/>
|
||||
{:else}
|
||||
<EntityTable entities={filteredEntities} loading={tableLoading} selectedSlug={lastOpened} onSelect={select} {childToParent} />
|
||||
<EntityTable entities={filteredEntities} loading={entitiesLoading} selectedSlug={lastOpened} onSelect={select} {childToParent} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,46 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { fetchDashboardSummary, type DashboardSummary } from '$lib/api'
|
||||
import { sessions, loadSessions, loadSessionMessages, newChat, sendMessage } from '$lib/stores/chat'
|
||||
import { sessions, loadSessions } from '$lib/stores/chat'
|
||||
import { openTaskWindow, openNewTaskWindow } from '$lib/stores/windows'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import { bucket, statusStyle, FILTERS, TASK_EVENTS, heading, type Bucket } from '$lib/tasks'
|
||||
import { relativeTime } from '$lib/utils'
|
||||
import GraphBackground from '$lib/components/GraphBackground.svelte'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
|
||||
import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert'
|
||||
|
||||
// ── Dashboard metrics (ported from the old Overview cards) ──────────────
|
||||
let summary = $state<DashboardSummary | null>(null)
|
||||
|
||||
async function loadSummary() {
|
||||
summary = await fetchDashboardSummary()
|
||||
}
|
||||
|
||||
const totalEntities = $derived(
|
||||
summary ? Object.values(summary.entities_by_type).reduce((a, b) => a + b, 0) : 0
|
||||
)
|
||||
const entityTypeCount = $derived(summary ? Object.keys(summary.entities_by_type).length : 0)
|
||||
const totalMonitored = $derived(
|
||||
summary
|
||||
? summary.health.healthy + summary.health.degraded + summary.health.down + summary.health.unknown
|
||||
: 0
|
||||
)
|
||||
const healthTone = $derived(
|
||||
!summary ? 'ok' : summary.health.down > 0 ? 'down' : summary.health.degraded > 0 ? 'degraded' : 'ok'
|
||||
)
|
||||
const totalSignals = $derived(
|
||||
summary ? Object.values(summary.signals_by_severity).reduce((a, b) => a + b, 0) : 0
|
||||
)
|
||||
const worstSeverity = $derived(
|
||||
summary?.signals_by_severity.critical
|
||||
? 'critical'
|
||||
: summary?.signals_by_severity.warning
|
||||
? 'warning'
|
||||
: 'none'
|
||||
)
|
||||
import PlusIcon from '@lucide/svelte/icons/plus'
|
||||
import type { Session } from '$lib/api'
|
||||
|
||||
// ── Task board ──────────────────────────────────────────────────────────
|
||||
let filter = $state<'all' | Bucket>('all')
|
||||
@@ -54,33 +22,13 @@
|
||||
filter === 'all' ? $sessions : $sessions.filter((s) => bucket(s) === filter)
|
||||
)
|
||||
|
||||
function openTask(id: string) {
|
||||
loadSessionMessages(id)
|
||||
location.hash = '#/chat'
|
||||
}
|
||||
|
||||
// ── New task entry ──────────────────────────────────────────────────────
|
||||
let input = $state('')
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
input = ''
|
||||
newChat()
|
||||
sendMessage(text)
|
||||
location.hash = '#/chat'
|
||||
}
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
function openTask(s: Session) {
|
||||
openTaskWindow(s.id, heading(s))
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadSummary()
|
||||
loadSessions()
|
||||
const unsubStream = subscribeEvents()
|
||||
const summaryTimer = setInterval(loadSummary, 15000)
|
||||
|
||||
// Refetch the board when a task's lifecycle changes anywhere. Scan all
|
||||
// events newer than the last seen (entity.touched fires constantly and
|
||||
@@ -102,123 +50,43 @@
|
||||
return () => {
|
||||
unsub()
|
||||
unsubStream()
|
||||
clearInterval(summaryTimer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="relative h-full overflow-hidden">
|
||||
<div class="relative flex h-full flex-col gap-3 overflow-hidden p-4">
|
||||
<GraphBackground />
|
||||
|
||||
<div class="relative z-10 h-full overflow-y-auto">
|
||||
<!-- Hero: fills the viewport. The input is pinned to true vertical center via the
|
||||
grid's middle 1fr row; the metrics strip and scroll hint sit in the auto rows
|
||||
above/below without shifting it off-center. Scrolling lifts the whole hero to
|
||||
reveal the table. -->
|
||||
<section class="grid min-h-full grid-rows-[auto_1fr_auto] gap-6 px-4 py-16">
|
||||
<!-- Metrics strip -->
|
||||
<div class="flex flex-wrap items-center justify-center gap-2 text-xs">
|
||||
<div class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur">
|
||||
<span class="text-muted-foreground">Entities</span>
|
||||
<span class="font-semibold tabular-nums">{totalEntities}</span>
|
||||
{#if entityTypeCount}<span class="text-muted-foreground">· {entityTypeCount} types</span>{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur">
|
||||
<span
|
||||
class="size-2 rounded-full {healthTone === 'ok' ? 'bg-success' : healthTone === 'degraded' ? 'bg-warning' : 'bg-destructive'}"
|
||||
></span>
|
||||
<span class="text-muted-foreground">Health</span>
|
||||
<span class="font-semibold tabular-nums">{summary?.health.healthy ?? 0} / {totalMonitored}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (location.hash = '#/signals')}
|
||||
class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur transition-colors hover:border-primary/50"
|
||||
>
|
||||
{#if worstSeverity === 'critical'}
|
||||
<TriangleAlertIcon class="size-3.5 text-destructive" />
|
||||
{:else if worstSeverity === 'warning'}
|
||||
<TriangleAlertIcon class="size-3.5 text-warning" />
|
||||
{:else}
|
||||
<CircleCheckIcon class="size-3.5 text-success" />
|
||||
{/if}
|
||||
<span class="text-muted-foreground">Signals</span>
|
||||
<span class="font-semibold tabular-nums">{totalSignals}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (location.hash = '#/ops')}
|
||||
class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur transition-colors hover:border-primary/50"
|
||||
>
|
||||
<span class="text-muted-foreground">Approvals</span>
|
||||
<span class="font-semibold tabular-nums {summary?.approvals_pending ? 'text-destructive' : ''}"
|
||||
>{summary?.approvals_pending ?? 0}</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- New task entry: centered in the middle (1fr) row -->
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full max-w-2xl text-center">
|
||||
<h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Describe a goal — Nomos will plan it, execute it, and report the outcome.
|
||||
</p>
|
||||
<form
|
||||
class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
|
||||
rows={3}
|
||||
class="max-h-52 min-h-24 resize-none border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center justify-between px-3 pb-3">
|
||||
<span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="justify-self-center text-[11px] text-muted-foreground/70">Scroll to see all tasks ↓</span>
|
||||
</section>
|
||||
|
||||
<!-- Task table -->
|
||||
<section class="mx-auto w-full max-w-5xl px-4 pb-16">
|
||||
<div class="rounded-xl border bg-card/70 backdrop-blur">
|
||||
<div class="flex flex-wrap items-center gap-1.5 border-b p-3">
|
||||
<div class="relative z-10 flex flex-wrap items-center gap-1.5">
|
||||
{#each FILTERS as f}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (filter = f.id)}
|
||||
class="rounded-full border px-2.5 py-1 text-xs transition-colors {filter === f.id
|
||||
? 'border-primary bg-primary/10 text-foreground'
|
||||
: 'border-border text-muted-foreground hover:bg-muted/50'}"
|
||||
: 'border-border bg-card/60 text-muted-foreground backdrop-blur hover:bg-muted/50'}"
|
||||
>
|
||||
{f.label}
|
||||
<span class="ml-1 opacity-60">{counts[f.id] ?? 0}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex-1"></div>
|
||||
<Button size="sm" class="gap-1.5" onclick={openNewTaskWindow}>
|
||||
<PlusIcon class="size-4" />
|
||||
New task
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 min-h-0 flex-1 overflow-auto rounded-xl border bg-card/70 backdrop-blur">
|
||||
{#if visible.length === 0}
|
||||
<div class="flex flex-col items-center gap-2 px-4 py-16 text-center">
|
||||
<p class="max-w-sm text-sm text-muted-foreground">
|
||||
{filter === 'all'
|
||||
? 'No tasks yet. Start one above and Nomos will plan it, execute it, and report the outcome.'
|
||||
? 'No tasks yet. Start one and Nomos will plan it, execute it, and report the outcome.'
|
||||
: `No ${FILTERS.find((f) => f.id === filter)?.label.toLowerCase()} tasks.`}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-muted-foreground">
|
||||
@@ -233,7 +101,7 @@
|
||||
{@const st = statusStyle(s)}
|
||||
<tr
|
||||
class="cursor-pointer border-b last:border-0 transition-colors hover:bg-muted/40"
|
||||
onclick={() => openTask(s.id)}
|
||||
onclick={() => openTask(s)}
|
||||
>
|
||||
<td class="px-4 py-2.5">
|
||||
<span class="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
|
||||
@@ -254,9 +122,6 @@
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
17
web/src/test-setup.ts
Normal file
17
web/src/test-setup.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// jsdom doesn't implement matchMedia — anything that transitively imports
|
||||
// theme.svelte.ts (which reads the OS color-scheme preference at module
|
||||
// load) throws without this. Global vitest setup so every test file gets it
|
||||
// for free instead of each one needing its own mock.
|
||||
if (typeof window !== 'undefined' && !window.matchMedia) {
|
||||
window.matchMedia = (query: string): MediaQueryList =>
|
||||
({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false
|
||||
}) as MediaQueryList
|
||||
}
|
||||
@@ -63,6 +63,7 @@ export default defineConfig({
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: true,
|
||||
setupFiles: ['src/test-setup.ts'],
|
||||
include: ['src/**/*.{test,spec}.{ts,js}']
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user