Compare commits
2 Commits
ccbf6a8aac
...
482c7f3448
| Author | SHA1 | Date | |
|---|---|---|---|
| 482c7f3448 | |||
| 50aed11cc4 |
@@ -31,6 +31,7 @@ the relevant section here.
|
||||
| [6. PostgreSQL/TimescaleDB](#6-postgresqltimescaledb) | `migrations/`, `seeds/` | ✅ live — the System's own source of truth |
|
||||
| [7. Dormant components](#7-dormant-components) | `internal/actuator`, `internal/learning` | 🔴 compiled, never started |
|
||||
| [8. Auxiliary components](#8-auxiliary-components) | `cmd/webhook`, `cmd/desktop` | ✅ live — deploy + packaging, not decision logic |
|
||||
| [9. web control room — App architecture](#9-web-control-room--app-architecture) | `web/src/lib/apps.ts`, `web/src/lib/stores/windows.ts`, `web/src/lib/stores/docked.ts`, `web/src/lib/components/desktop-shell/` | ✅ live — the OS + Apps shell contract |
|
||||
|
||||
---
|
||||
|
||||
@@ -364,7 +365,11 @@ cross-origin (the Wails desktop webview, §8).
|
||||
Standalone deploy, versioned and released independently of the `oikos`
|
||||
binary — see [README.md §4.5](README.md#45-build--release-artifacts) for
|
||||
why "deployed" means two different release cadences depending on whether
|
||||
you mean the container or the desktop app.
|
||||
you mean the container or the desktop app. The shell-level architecture
|
||||
(window manager, app registry, docked layer) is documented separately as
|
||||
[§9 below](#9-web-control-room--app-architecture); this section covers
|
||||
the page-level concerns, §9 covers the OS + Apps contract the pages hang
|
||||
off.
|
||||
|
||||
---
|
||||
|
||||
@@ -496,6 +501,177 @@ functional sense.
|
||||
|
||||
---
|
||||
|
||||
## 9. web control room — App architecture
|
||||
|
||||
**Stakeholders:** anyone adding a page, adding a desktop overlay, or
|
||||
planning dynamic/third-party app installation. **Why this View earns its
|
||||
place:** §5 documents the *pages*; this View documents the *shell* they
|
||||
hang off — and the shell is the part whose contract a new app has to
|
||||
satisfy. It is also the layer where the "Oikos-as-OS" metaphor
|
||||
(desktop, icons, floating windows, a tamagotchi-style resident
|
||||
creature) is actually implemented, so the boundary between "Base OS" and
|
||||
"App" has to be explicit here or it doesn't exist anywhere.
|
||||
|
||||
### App architecture — Internal structure
|
||||
|
||||
| File | Role |
|
||||
|---|---|
|
||||
| `web/src/lib/apps.ts` | The App registry. Two layers: `builtinApps` (static, always installed) + `installedAppIds` (persisted, from the App Store). The public `apps` store is derived (built-in + installed); `appById` is a derived Map. `installApp`/`uninstallApp` mutate the installed set. Window-id helpers (`appWindowId`, `appIdFromWindowId`) unchanged. |
|
||||
| `web/src/app-store/catalog.ts` | The installable-app catalog: `AppManifest` (persistable metadata) + `CatalogEntry` (manifest + Lucide icon + dynamic-import loader). Static in Phase 3 (apps ship with the build); Phase 4 swaps this for a fetched `/api/v1/apps` endpoint. Declares `AppPermission` (enforcement is Phase 4). |
|
||||
| `web/src/app-store/apps/Notes.svelte` | Demo installable app — a localStorage-backed scratchpad proving the install→icon→window→uninstall lifecycle end-to-end. |
|
||||
| `web/src/lib/stores/windows.ts` | The wmkit window manager singleton + the `openAppWindow` / `openEntityWindow` / `openTaskWindow` primitives. `openAppWindow` branches on `docked` (toggles visibility) vs windowed (`wm.open`); resolves the app via `get(appById)`. |
|
||||
| `web/src/lib/stores/docked.ts` | Persisted visibility for docked apps. Absent key = visible (default-on); store holds only overrides. Deliberately does **not** import `APPS` — doing so would create a static cycle (`apps.ts` → pages → `windows.ts` → here → `apps.ts`) and fire a TDZ on `APPS` at init. |
|
||||
| `web/src/lib/stores/icons.ts` | Desktop icon grid: column/row positions, drag-to-reorder, localStorage persistence. Reactive to the `apps` store — a newly-installed app gets a free cell on the next emission; `resetIconLayout` re-seeds from the live registry, not a static snapshot. |
|
||||
| `web/src/lib/components/LazyApp.svelte` | Renders an app's lazily-loaded component (`AppDef.component` is a dynamic-import loader, not the component). Shows the shared spinner while the chunk fetches; used by both WindowLayer and DockedLayer so the loading state is uniform across app kinds. Vite's module cache makes repeat opens resolve from cache. |
|
||||
| `web/src/lib/components/desktop-shell/Desktop.svelte` | Full-viewport surface: background, icons, task launcher, `<WindowLayer />`, `<DockedLayer />`, taskbar. Reads `$apps` (the derived store) so installs reflect immediately. |
|
||||
| `web/src/lib/components/desktop-shell/WindowLayer.svelte` | Floating-window stack (z-40). Resolves window id → content component; renders shared titlebar chrome. The orphan-close `$effect` is reactive on `$appById` — reinstalling an app revives its persisted window, uninstalling closes it. |
|
||||
| `web/src/lib/components/desktop-shell/DockedLayer.svelte` | Docked-app overlay (z-45). Renders `$apps.filter(a => a.docked)` gated on `dockedVisibility`. Replaces the previously-hardcoded `<MascotLayer />`. |
|
||||
| `web/src/lib/components/desktop-shell/Taskbar.svelte` | Window buttons + tray. Renders from `wmState.order`; resolves icons via `$appById`. |
|
||||
| `web/src/pages/AppStore.svelte` | The App Store — lists the catalog, shows install state, install/uninstall. Installing makes the app appear on the desktop immediately (no reload) via the reactive `apps` store; uninstalling closes any open window for that app via WindowLayer's orphan-close effect. |
|
||||
|
||||
### App architecture — The App contract
|
||||
|
||||
```typescript
|
||||
interface AppDef {
|
||||
id: string // unique; window IDs are "app:<id>"
|
||||
title: string // desktop icon label + window titlebar
|
||||
icon: Component // Lucide icon (desktop icon + taskbar)
|
||||
component: () => Promise<{ default: Component }> // dynamic-import loader
|
||||
docked?: boolean // true = Docked Layer app, no window
|
||||
noIcon?: boolean // true = registered but no desktop icon
|
||||
width?: number; height?: number; minWidth?: number; minHeight?: number
|
||||
// required for windowed, forbidden for docked
|
||||
badge?: (s: DashboardSummary | null) => number
|
||||
}
|
||||
```
|
||||
|
||||
`component` is a dynamic-import loader (`() => import('../pages/X.svelte')`),
|
||||
not the component itself. Desktop icons render from metadata alone (id,
|
||||
title, icon — all static), the component chunk fetches on first window
|
||||
open, and Vite code-splits each app into its own chunk (Phase 2). The
|
||||
mascot uses the same path — `() => import('./mascot/MascotLayer.svelte')`
|
||||
— which also defers the mascot's module graph until after `apps.ts` has
|
||||
finished initializing, breaking what would otherwise be a static cycle
|
||||
(`apps.ts` → `MascotLayer` → `Mascot.svelte` → `icons.ts` → `apps.ts`).
|
||||
|
||||
Two app kinds, picked by one flag:
|
||||
|
||||
| Kind | Window | Titlebar | Taskbar | Opened by |
|
||||
|---|---|---|---|---|
|
||||
| **Windowed** (default) | wmkit floating window | yes | yes | `openAppWindow` → `wm.open` |
|
||||
| **Docked** (`docked: true`) | none — renders on the Docked Layer | no | no | `openAppWindow` → `toggleDocked` |
|
||||
|
||||
Apps receive **no props** from the shell. They import the OS-service
|
||||
surface (below) directly. The shell→app edge is one-way.
|
||||
|
||||
### App architecture — The OS-service surface (AppOS)
|
||||
|
||||
The stable set of `$lib` exports an App may import. Everything else in
|
||||
`$lib` is shell-internal and may change without notice. This is a
|
||||
**documentation contract** today (apps are compiled in); it becomes an
|
||||
**enforced sandbox boundary** the moment third-party app installation
|
||||
(Phase 3 in [the plan](../../plans/2026-07-21-frontend-os-apps-architecture.md)) lands.
|
||||
|
||||
| Service | Import |
|
||||
|---|---|
|
||||
| Open an app window | `openAppWindow(id)` from `$lib/stores/windows` |
|
||||
| Open an entity window | `openEntityWindow(slug)` from `$lib/stores/windows` |
|
||||
| Open a task window | `openTaskWindow(sessionId, title)` from `$lib/stores/windows` |
|
||||
| Dashboard summary | `summary`, `subscribeContext` from `$lib/stores/context` |
|
||||
| Live events | `subscribeEvents` from `$lib/stores/events` |
|
||||
| Per-session chat / workspace / activity | `chatFor`, `workspaceFor`, `activityLogFor` from `$lib/stores/{chat,workspace,activity}` |
|
||||
| REST API | `$lib/api` (generated from OpenAPI, [ADR-0004](../adr/0004-openapi-first.md)) |
|
||||
| UI primitives | `$lib/components/ui/*` |
|
||||
| Theme | `getTheme`, `setTheme` from `$lib/stores/theme.svelte` |
|
||||
|
||||
### App architecture — Content resolution
|
||||
|
||||
Window ids are namespaced so the window layer resolves content purely
|
||||
from the id, with no extra bookkeeping — which is also why persisted
|
||||
windows hydrate correctly across reloads:
|
||||
|
||||
| Id shape | Renders |
|
||||
|---|---|
|
||||
| `app:<id>` | the registry app's component (`appById.get(id).component`) |
|
||||
| `session:<id>` | `SessionChatWindow` (per-session chat) |
|
||||
| `new-task` | `NewTaskChat` (singleton compose) |
|
||||
| bare slug (`type:identifier`) | `EntityDetailContent` (fallback) |
|
||||
|
||||
A hydrated `app:<id>` window whose id no longer matches a registry entry
|
||||
(an app removed since the layout was persisted) self-closes — the
|
||||
orphan-close `$effect` in `WindowLayer.svelte` sweeps it on mount.
|
||||
|
||||
### App architecture — Current population
|
||||
|
||||
Seven windowed apps + one docked app:
|
||||
|
||||
| App | Kind | Badge |
|
||||
|---|---|---|
|
||||
| `tasks` | windowed | — |
|
||||
| `kb` | windowed | — |
|
||||
| `ops` | windowed | `approvals_pending` |
|
||||
| `signals` | windowed | open signal count |
|
||||
| `knowledge` | windowed | — |
|
||||
| `learning` | windowed | — |
|
||||
| `settings` | windowed | — |
|
||||
| `mascot` (Cluck) | **docked** | — |
|
||||
|
||||
The mascot is the first docked app and the reason the docked kind
|
||||
exists; before this View it was a hardcoded `<MascotLayer />` in
|
||||
`Desktop.svelte`, not a registry entry. Its persistent model
|
||||
(`web/src/lib/mascot/state.svelte.ts`, localStorage) and sprite cache
|
||||
(`sprites.ts`) are module-scoped, so toggling visibility (unmount) and
|
||||
restoring (remount) loses no state — this is why `docked` visibility is
|
||||
a plain `{#if}` gate rather than a `keepAlive` mechanism.
|
||||
|
||||
### App architecture — Designed extension points (documented, not built)
|
||||
|
||||
| Extension | Mechanism when built | Trigger |
|
||||
|---|---|---|
|
||||
| Titlebar actions | `titlebarActions?: Component` on `AppDef`, rendered left of min/max/close | First app that needs one |
|
||||
| App-scoped state | `state?: () => Record<string, unknown>` on `AppDef` | First app with cross-mount state that isn't module-scoped |
|
||||
| `onRegister` handshake | called with a scoped AppOS capability object | Phase 3 (dynamic install) |
|
||||
| Third-party manifests | `AppManifest` JSON + `/api/v1/apps` + permission model | Phase 3 |
|
||||
|
||||
Documenting these now prevents the current contract from painting itself
|
||||
into a corner; building them now would be speculative. (Lazy-loaded
|
||||
components were on this list and shipped in Phase 2 — `component` is now
|
||||
`() => Promise<{ default: Component }>` and Vite code-splits each app.)
|
||||
|
||||
### App architecture — Status and known issues
|
||||
|
||||
Phase 1 (the docked kind, mascot-as-app, the docked visibility store) and
|
||||
Phase 2 (lazy component loading — `component` as dynamic-import loader,
|
||||
`LazyApp.svelte` for uniform loading state, per-app code-splitting) have
|
||||
landed. Open items, by phase:
|
||||
|
||||
- **Phase 3 (dynamic install):** the AppOS table above becomes a real
|
||||
injected capability object, not a documentation table; permissions
|
||||
enforced at the store-access boundary; `AppManifest` format +
|
||||
`/api/v1/apps` endpoint + install flow.
|
||||
- **Late-registering apps (Phase 3 prerequisite):** `icons.ts:48` builds
|
||||
`appIds` once at module load to validate persisted positions — fine
|
||||
today (all apps are in the static `APPS` array; only their components
|
||||
are lazy), fragile the moment apps register post-load. When dynamic
|
||||
registration lands, revalidate against the live registry, not the
|
||||
import-time snapshot. Likewise `WindowLayer`'s orphan-close `$effect`
|
||||
must be gated on registry-ready so a not-yet-loaded app's persisted
|
||||
window isn't killed on hydration.
|
||||
|
||||
The static-cycle trap that bit this View during Phase 1 implementation is
|
||||
now resolved by Phase 2's lazy loading — recording it for context:
|
||||
|
||||
- `apps.ts` no longer statically imports any page or the mascot (they're
|
||||
all `() => import(...)`), so there's no static edge from `apps.ts` into
|
||||
the mascot/page module graph to cycle through `icons.ts` back to `APPS`.
|
||||
The earlier `LazyMascot.svelte` wrapper (Phase 1's cycle break) was
|
||||
deleted in Phase 2 — the lazy loader in the registry replaces it.
|
||||
`docked.ts` still must not import `APPS` (it's reached from `apps.ts`'s
|
||||
graph via `windows.ts`), and doesn't — defaults are implicit
|
||||
(absent key = visible).
|
||||
|
||||
---
|
||||
|
||||
## Keeping this document current
|
||||
|
||||
The same discipline as README.md's closing note applies here, scoped to
|
||||
|
||||
647
plans/2026-07-21-frontend-os-apps-architecture.md
Normal file
647
plans/2026-07-21-frontend-os-apps-architecture.md
Normal file
@@ -0,0 +1,647 @@
|
||||
# Frontend as OS + Apps: architecture audit & refactor plan
|
||||
|
||||
> **Status:** Planned
|
||||
> **Stakeholders:** Operator, Nomos
|
||||
> **Confidence:** Verified (direct code audit against `web/src/` as of 2026-07-21)
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
The Oikos frontend is already built on an implicit OS + Apps metaphor — a
|
||||
desktop surface, floating windows, a taskbar, and a registry of
|
||||
independently-rendered apps. This plan makes that metaphor **explicit**,
|
||||
strengthens the contracts between Base OS and Apps, refactors the mascot
|
||||
into a proper App, and lays out the extensibility path for dynamic app
|
||||
installation without touching shell code.
|
||||
|
||||
The current codebase is remarkably close. The audit found one structural
|
||||
gap (mascot is hardcoded into the shell, not a registry App) and three
|
||||
contract weaknesses (positional content resolution, icon store assumes a
|
||||
static registry, no stable OS-service contract for Apps). Fixing them
|
||||
requires no architectural rewrite — the bones are correct.
|
||||
|
||||
---
|
||||
|
||||
## 1. Audit: what we have today
|
||||
|
||||
### 1.1 The implicit OS layer (exists, undocumented)
|
||||
|
||||
| Service | File | Role |
|
||||
|---------|------|------|
|
||||
| **Window Manager** | `lib/stores/windows.ts:19-31` | wmkit manager + desktop + persist. Single-instance, global. |
|
||||
| **Desktop Surface** | `components/desktop-shell/Desktop.svelte` | Full-viewport shell: background, icons, launcher, windows, mascot, taskbar. |
|
||||
| **Window Layer** | `components/desktop-shell/WindowLayer.svelte` | Content resolver: maps window ID → component. z-40. |
|
||||
| **Taskbar** | `components/desktop-shell/Taskbar.svelte` | Window buttons + tray. Renders from `wmState.order`. |
|
||||
| **Icon Grid** | `lib/stores/icons.ts` | Column/row grid, drag-to-reorder, localStorage persistence. |
|
||||
| **Task Launcher** | `components/desktop-shell/TaskLauncher.svelte` | Centered text input → new task window. |
|
||||
| **Auth Gate** | `App.svelte` | Config screen vs. Desktop. Token check, OIDC init, context/SSE subscribe. |
|
||||
| **Session Windows** | `components/SessionChatWindow.svelte` | Per-session chat window, splitpanes layout. |
|
||||
| **New Task Window** | `components/desktop-shell/NewTaskChat.svelte` | Singleton compose window. |
|
||||
| **Entity Windows** | `components/EntityDetailContent.svelte` | Entity detail (bare slug window IDs). |
|
||||
| **Legacy Hash Routes** | `App.svelte:17-39` | Backward compat for old `#/kb`, `#/entity/<slug>` bookmarks. |
|
||||
|
||||
The shell has **no hardcoded app list** — `Desktop.svelte:90` reads `APPS`
|
||||
from the registry, `WindowLayer.svelte:36-37` resolves app windows through
|
||||
`appById`, `Taskbar.svelte:32` resolves icons the same way. Adding an app
|
||||
is one entry in `apps.ts`.
|
||||
|
||||
### 1.2 The App Registry (exists, nearly complete)
|
||||
|
||||
**File:** `lib/apps.ts` (130 lines)
|
||||
**Interface:** `AppDef` — id, title, icon (Lucide Component), component
|
||||
(Svelte Component), width, height, minWidth, minHeight, optional badge
|
||||
function.
|
||||
**Window namespacing:** `app:<id>` (`apps.ts:122`) — distinct from
|
||||
`session:<id>`, `new-task`, and bare entity slugs.
|
||||
|
||||
**Current apps (7):**
|
||||
|
||||
| ID | Page Component | Badge? |
|
||||
|----|---------------|--------|
|
||||
| `tasks` | `pages/Overview.svelte` | — |
|
||||
| `kb` | `pages/KnowledgeBase.svelte` | — |
|
||||
| `ops` | `pages/Ops.svelte` | approvals_pending |
|
||||
| `signals` | `pages/Signals.svelte` | open signal count |
|
||||
| `knowledge` | `pages/Knowledge.svelte` | — |
|
||||
| `learning` | `pages/Learning.svelte` | — |
|
||||
| `settings` | `pages/Settings.svelte` | — |
|
||||
|
||||
**What works:**
|
||||
|
||||
- Data-driven. One array → three surfaces auto-render.
|
||||
- Namespaced window IDs prevent collisions with session/entity windows.
|
||||
- Single-instance enforcement (double-click focuses, never duplicates).
|
||||
- Badge system: pure function over `DashboardSummary`, consumed by icon +
|
||||
taskbar.
|
||||
- Tested (`apps.test.ts`): unique IDs, positive sizes, `appById` index,
|
||||
round-trips.
|
||||
- Orphan cleanup: `WindowLayer.svelte:25-30` closes persisted windows whose
|
||||
app was removed from the registry.
|
||||
|
||||
**What's missing from the AppDef contract:**
|
||||
|
||||
1. **No stable OS-service surface.** Apps reach into the OS by importing
|
||||
arbitrary `$lib` modules (`openEntityWindow` from `windows.ts`,
|
||||
`summary` from `context.ts`). It works because apps are compiled in, but
|
||||
there is no documented boundary between "stable OS API an App may use"
|
||||
and "shell internals that happen to be exported." Phase 3 (installed
|
||||
third-party apps) needs that boundary to exist first.
|
||||
2. **No docked/overlay app kind.** An app that renders *on* the desktop
|
||||
(above windows, no titlebar, no window at all) has no representation in
|
||||
the contract — which is exactly why the mascot is hardcoded.
|
||||
|
||||
### 1.3 The Mascot: embedded, not an app
|
||||
|
||||
**Files:** `lib/mascot/` (12 files, ~2.8k lines)
|
||||
**Integration:** `Desktop.svelte:105` — hardcoded `<MascotLayer />` at z-45,
|
||||
after WindowLayer and before Taskbar.
|
||||
|
||||
**Key facts that shape the refactor (verified):**
|
||||
|
||||
- `MascotLayer.svelte` takes **no props**. It creates the `MascotRuntime`
|
||||
per mount, seeds position from the persisted model, and attaches the
|
||||
stimulus bus itself (`MascotLayer.svelte:38-61`, comment at line 6-7).
|
||||
- The persistent model (stage, name, happiness, xp, **lastPos**) is
|
||||
module-scoped in `state.svelte.ts` and survives unmount/remount.
|
||||
- The sprite `Image` cache is module-scoped in `sprites.ts` — remounts do
|
||||
not re-fetch the 19 PNG sheets.
|
||||
- The stimulus bus subscribes to global stores (`focusedSessionId` from
|
||||
`windows.ts`, per-session factories from `chat.ts`/`workspace.ts`) — no
|
||||
dependency on how MascotLayer is mounted.
|
||||
|
||||
**Consequence:** hiding the mascot = `{#if visible}<MascotLayer />{/if}`.
|
||||
State, sprites, and position all restore naturally. No `keepAlive`
|
||||
machinery is needed.
|
||||
|
||||
### 1.4 Three contract weaknesses
|
||||
|
||||
#### Weakness 1: Positional content resolution
|
||||
|
||||
`WindowLayer.svelte:70-79` resolves content by checking ID patterns in a
|
||||
hardcoded order:
|
||||
|
||||
```svelte
|
||||
{#if id.startsWith(SESSION_PREFIX)}
|
||||
<SessionChatWindow ... />
|
||||
{:else if id === NEW_TASK_WINDOW_ID}
|
||||
<NewTaskChat />
|
||||
{:else if app}
|
||||
<app.component />
|
||||
{:else}
|
||||
<EntityDetailContent ... />
|
||||
{/if}
|
||||
```
|
||||
|
||||
A new window category must be inserted at the right position in this chain.
|
||||
Works today because prefixes are mutually exclusive by construction, but
|
||||
it's a landmine: add `'lxc:'` container consoles or `'log:'` viewers and
|
||||
you're editing shell internals.
|
||||
|
||||
#### Weakness 2: Icon store snapshots the registry at module load
|
||||
|
||||
`icons.ts:23` builds default positions from `APPS`, and `icons.ts:48`
|
||||
freezes an `appIds` set used to filter persisted positions in `load()`.
|
||||
Both evaluate **once at import time**. A late-registering app (lazy load,
|
||||
Phase 2+) would have its persisted position silently dropped by the
|
||||
`load()` filter — the merge-over-defaults logic only helps apps that were
|
||||
already in `APPS` when the module first evaluated.
|
||||
|
||||
#### Weakness 3: Window chrome is fully shell-owned, with no extension point
|
||||
|
||||
Every window gets the same titlebar (`WindowLayer.svelte:40-67`): drag
|
||||
handle, title, minimize/maximize/close. Correct default — apps should not
|
||||
draw their own chrome — but there is no sanctioned way for an app to
|
||||
contribute a titlebar affordance (e.g. Tasks might want an inline "New
|
||||
task" button). **Decision: document as a designed extension point, defer
|
||||
implementation until an app actually needs it** (see §2.5). Not a Phase 1
|
||||
deliverable.
|
||||
|
||||
---
|
||||
|
||||
## 2. The OS + Apps model
|
||||
|
||||
### 2.1 Metaphor
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────┐
|
||||
│ Auth Gate (App.svelte) │
|
||||
│ ┌──────────────────────────────────────────────┐│
|
||||
│ │ Desktop Surface ││
|
||||
│ │ ┌─────────────┐ ┌─────────────┐ ││
|
||||
│ │ │ App Window │ │ App Window │ z-40 ││
|
||||
│ │ │ (Tasks) │ │ (Signals) │ ││
|
||||
│ │ └─────────────┘ └─────────────┘ ││
|
||||
│ │ ┌──────────────────────┐ ││
|
||||
│ │ │ Docked Apps (Cluck) │ z-45, no chrome ││
|
||||
│ │ └──────────────────────┘ ││
|
||||
│ │ ┌──────┐ ┌──────┐ ┌──────┐ z-0 ││
|
||||
│ │ │ Icon │ │ Icon │ │ Icon │ ││
|
||||
│ │ └──────┘ └──────┘ └──────┘ ││
|
||||
│ └──────────────────────────────────────────────┘│
|
||||
│ ┌──────────────────────────────────────────────┐│
|
||||
│ │ Taskbar [Tasks] [Signals] 🎨 ⚙ v0.9 ││
|
||||
│ └──────────────────────────────────────────────┘│
|
||||
└──────────────────────────────────────────────────┘
|
||||
|
||||
Base OS = Auth Gate + Desktop Surface + Window Manager + Taskbar
|
||||
+ Icon Grid + Docked Layer + OS-service surface
|
||||
Apps = Tasks, KB, Ops, Signals, Knowledge, Learning, Settings, Cluck
|
||||
```
|
||||
|
||||
### 2.2 App kinds
|
||||
|
||||
Two kinds, distinguished by one flag:
|
||||
|
||||
| Kind | Window | Titlebar | Taskbar button | Opened by |
|
||||
|------|--------|----------|----------------|-----------|
|
||||
| **Windowed** (default) | wmkit floating window | Yes | Yes (automatic) | `openAppWindow(id)` → `wm.open()` |
|
||||
| **Docked** (`docked: true`) | None — renders on the Docked Layer | No | No | `openAppWindow(id)` → toggles visibility |
|
||||
|
||||
Docked apps are **not** wmkit citizens. They render in a dedicated layer
|
||||
above the window layer, their visibility is a persisted boolean, and
|
||||
clicking their desktop icon toggles show/hide. They never appear in the
|
||||
taskbar because they never enter `wmState.order`.
|
||||
|
||||
### 2.3 The App contract
|
||||
|
||||
```typescript
|
||||
interface AppDef {
|
||||
// Identity (required)
|
||||
id: string // unique; window IDs are "app:<id>"
|
||||
title: string // desktop icon label + window titlebar
|
||||
icon: Component // Lucide icon (desktop icon + taskbar)
|
||||
component: Component // Svelte component; receives NO props
|
||||
|
||||
// Kind
|
||||
docked?: boolean // true = Docked Layer app, no window (default false)
|
||||
|
||||
// Window geometry — required for windowed apps, forbidden for docked apps
|
||||
width?: number
|
||||
height?: number
|
||||
minWidth?: number
|
||||
minHeight?: number
|
||||
|
||||
// Behavior (all optional)
|
||||
badge?: (summary: DashboardSummary | null) => number
|
||||
noIcon?: boolean // true = registered but no desktop icon
|
||||
}
|
||||
```
|
||||
|
||||
**Validation rules** (enforced by `apps.test.ts`, not runtime checks):
|
||||
|
||||
- `id` unique, non-empty.
|
||||
- Windowed apps: `width`/`height` present and positive.
|
||||
- Docked apps: `width`/`height` absent (geometry is meaningless without a
|
||||
window).
|
||||
- Every app has an icon component (even `noIcon` apps — the taskbar and
|
||||
future surfaces need it).
|
||||
|
||||
**Design decisions, and why:**
|
||||
|
||||
- **No `keepAlive`.** Module-scoped state (mascot model, sprite cache)
|
||||
already survives unmount. If a future app needs close-to-hide semantics,
|
||||
that's a wmkit feature request, not an AppDef field.
|
||||
- **No `noTaskbar`.** Docked apps never reach the taskbar; windowed apps
|
||||
always should. A windowed app with no taskbar button is an orphan the
|
||||
operator can't find.
|
||||
- **No lifecycle hooks in the contract.** Svelte's own `onMount`/`onDestroy`
|
||||
already fire on window open/close. A shell-level `onRegister` is only
|
||||
meaningful once apps register dynamically — deferred to Phase 3, where
|
||||
it becomes the permission handshake.
|
||||
- **Apps receive no props.** The component is the app. It imports OS
|
||||
services (§2.4) directly. This keeps the shell→app edge one-way and
|
||||
trivially mockable.
|
||||
|
||||
### 2.4 The OS-service surface (AppOS)
|
||||
|
||||
The stable set of `$lib` exports an App may import. Everything else in
|
||||
`$lib` is shell-internal and may change without notice. This is a
|
||||
**documentation contract** today (apps are compiled in); it becomes an
|
||||
**enforced sandbox boundary** in Phase 3.
|
||||
|
||||
| Service | Import | Stability |
|
||||
|---------|--------|-----------|
|
||||
| Open an app window | `openAppWindow(id)` from `$lib/stores/windows` | Stable |
|
||||
| Open an entity window | `openEntityWindow(slug)` from `$lib/stores/windows` | Stable |
|
||||
| Open a task window | `openTaskWindow(sessionId, title)` from `$lib/stores/windows` | Stable |
|
||||
| Dashboard summary | `summary`, `subscribeContext` from `$lib/stores/context` | Stable |
|
||||
| Live events | `subscribeEvents` from `$lib/stores/events` | Stable |
|
||||
| Per-session chat | `chatFor(sessionId)` from `$lib/stores/chat` | Stable |
|
||||
| Per-session workspace | `workspaceFor(sessionId)` from `$lib/stores/workspace` | Stable |
|
||||
| REST API | `$lib/api` functions | Stable (generated from OpenAPI) |
|
||||
| UI primitives | `$lib/components/ui/*` | Stable |
|
||||
| Theme | `getTheme`, `setTheme` from `$lib/stores/theme.svelte` | Stable |
|
||||
|
||||
### 2.5 Content resolution — fixed
|
||||
|
||||
Replace the positional `if/else` chain with a prefix → component map owned
|
||||
by the shell:
|
||||
|
||||
```typescript
|
||||
// WindowLayer.svelte — one map, dispatch by prefix. New window kinds
|
||||
// register here, not in an if/else chain.
|
||||
const CONTENT_RESOLVERS: Array<[prefix: string, resolve: (id: string) => Component | null]> = [
|
||||
['session:', () => SessionChatWindow],
|
||||
['app:', (id) => appById.get(id.slice(4))?.component ?? null],
|
||||
]
|
||||
|
||||
function resolveContent(id: string): Component | null {
|
||||
if (id === NEW_TASK_WINDOW_ID) return NewTaskChat
|
||||
for (const [prefix, resolve] of CONTENT_RESOLVERS) {
|
||||
if (id.startsWith(prefix)) return resolve(id)
|
||||
}
|
||||
return EntityDetailContent // bare entity slug fallback
|
||||
}
|
||||
```
|
||||
|
||||
Adding a `'lxc:'` console window kind later = one array entry. The
|
||||
existing orphan-close effect (`WindowLayer.svelte:25-30`) is kept as-is;
|
||||
Phase 2 must gate it on registry-ready (§5).
|
||||
|
||||
### 2.6 Designed extension points (documented, not built)
|
||||
|
||||
| Extension | Mechanism when built | Trigger |
|
||||
|-----------|---------------------|---------|
|
||||
| Titlebar actions | `titlebarActions?: Component` on AppDef, rendered left of min/max/close | First app that needs one |
|
||||
| App-scoped state | `state?: () => Record<string, unknown>` on AppDef | First app with cross-mount state that isn't module-scoped |
|
||||
| `onRegister` handshake | Called with a scoped AppOS capability object | Phase 3 (dynamic install) |
|
||||
|
||||
Documenting these now prevents the Phase 1 contract from painting itself
|
||||
into a corner; building them now would be speculative.
|
||||
|
||||
---
|
||||
|
||||
## 3. The mascot as an App
|
||||
|
||||
### 3.1 Registration
|
||||
|
||||
```typescript
|
||||
{
|
||||
id: 'mascot',
|
||||
title: 'Cluck',
|
||||
icon: EggIcon, // Lucide egg (chick/adult swap is a future nicety)
|
||||
component: MascotLayer,
|
||||
docked: true,
|
||||
// no width/height — docked
|
||||
// no badge — a permanent "1" is noise, not information
|
||||
}
|
||||
```
|
||||
|
||||
### 3.2 The docked-visibility store (new)
|
||||
|
||||
```typescript
|
||||
// lib/stores/docked.ts
|
||||
// Visibility for docked apps — persisted, so "hidden" survives reloads.
|
||||
// Keyed by app id; absent key = visible (default-on for new docked apps).
|
||||
export const dockedVisibility: Readable<Record<string, boolean>>
|
||||
export function toggleDocked(appId: string): void
|
||||
export function isDockedVisible(appId: string): boolean
|
||||
```
|
||||
|
||||
- localStorage key: `oikos-docked-apps`
|
||||
- Default: visible (a fresh install shows the mascot; hiding is opt-out)
|
||||
- Merge semantics mirror `icons.ts`: unknown persisted keys are kept (an
|
||||
uninstalled docked app that gets reinstalled remembers its state)
|
||||
|
||||
### 3.3 Shell changes
|
||||
|
||||
**`windows.ts` — `openAppWindow` branches on kind:**
|
||||
|
||||
```typescript
|
||||
export function openAppWindow(appId: string): void {
|
||||
const app = appById.get(appId)
|
||||
if (!app) return
|
||||
if (app.docked) { toggleDocked(appId); return } // ← the branch the first draft missed
|
||||
// ... existing wm.open path unchanged
|
||||
}
|
||||
```
|
||||
|
||||
This is the load-bearing detail: the icon click in `Desktop.svelte:93`
|
||||
calls `openAppWindow(app.id)` for every app uniformly. Branching **inside**
|
||||
`openAppWindow` means Desktop.svelte, legacy hash resolution, and any
|
||||
future caller need no special cases.
|
||||
|
||||
**`Desktop.svelte` — replace hardcoded `<MascotLayer />` with:**
|
||||
|
||||
```svelte
|
||||
<DockedLayer />
|
||||
```
|
||||
|
||||
**`components/desktop-shell/DockedLayer.svelte` — new, ~30 lines:**
|
||||
|
||||
```svelte
|
||||
{#each APPS.filter(a => a.docked) as app (app.id)}
|
||||
{#if $dockedVisibility[app.id] ?? true}
|
||||
<app.component />
|
||||
{/if}
|
||||
{/each}
|
||||
```
|
||||
|
||||
Rendered after `<WindowLayer />` inside the surface div, so docked apps
|
||||
share the surface's coordinate space (the mascot's ground-line computation
|
||||
depends on this — `MascotLayer.svelte:9-13`).
|
||||
|
||||
**`MascotLayer.svelte` — zero changes.** No props today, no props after.
|
||||
|
||||
### 3.4 What the mascot gains
|
||||
|
||||
| Feature | Before | After |
|
||||
|---------|--------|-------|
|
||||
| Registry entry | None — hardcoded in shell | First-class AppDef |
|
||||
| Show/hide | Impossible — always mounted | Icon click toggles; persists across reloads |
|
||||
| Shell coupling | `Desktop.svelte` imports mascot internals | Shell knows only `AppDef` |
|
||||
| Precedent for overlay apps | None | Any `docked: true` app (clock, net monitor) uses the same path |
|
||||
|
||||
### 3.5 What the mascot does *not* gain (deliberately)
|
||||
|
||||
- **No taskbar button.** No window → no taskbar entry. The desktop icon is
|
||||
the control.
|
||||
- **No window chrome.** It's a desktop creature, not a document.
|
||||
- **No settings panel in v1.** Hatch/rename/pet/feed stay in the existing
|
||||
radial menu. A mascot *settings* surface (volume, behavior toggles) would
|
||||
be a separate windowed app later — noted as a follow-up idea, not
|
||||
planned.
|
||||
|
||||
### 3.6 UX risk: "where did my chicken go?"
|
||||
|
||||
Hidden state persists across reloads. Mitigation: the desktop icon is
|
||||
always present and is the obvious toggle; the icon's tooltip reads
|
||||
"Cluck — click to show/hide". Acceptable.
|
||||
|
||||
---
|
||||
|
||||
## 4. Current apps — conformance audit
|
||||
|
||||
| App | Conforms? | Notes |
|
||||
|-----|-----------|-------|
|
||||
| **Tasks** (`Overview.svelte`) | ✅ Full | Self-contained. Opens session windows via `openTaskWindow`. |
|
||||
| **Knowledge Base** (`KnowledgeBase.svelte`) | ✅ Full | Opens entity windows via `openEntityWindow`. |
|
||||
| **Operations** (`Ops.svelte`) | ✅ Full | Badge reads `summary`. |
|
||||
| **Signals** (`Signals.svelte`) | ✅ Full | Opens entity windows. |
|
||||
| **Knowledge** (`Knowledge.svelte`) | ✅ Full | — |
|
||||
| **Learning** (`Learning.svelte`) | ✅ Full | — |
|
||||
| **Settings** (`Settings.svelte`) | ✅ Full | Opened from taskbar tray too — same `openAppWindow` path. |
|
||||
| **Mascot** | ❌ Not an App | Hardcoded in Desktop.svelte. Refactored per §3. |
|
||||
|
||||
All seven windowed apps conform today. "Independently shippable" at Phase 1
|
||||
means: add = one page file + one registry entry; remove = delete both. No
|
||||
shell edits, no inter-app imports (apps open each other's surfaces only
|
||||
through AppOS primitives).
|
||||
|
||||
---
|
||||
|
||||
## 5. Extensibility roadmap
|
||||
|
||||
### Phase 1: Strengthen the contract (this plan)
|
||||
|
||||
- [x] `AppDef` extended: `docked`, `noIcon`; geometry conditional on kind
|
||||
- [x] `lib/stores/docked.ts`: docked-visibility store, persisted
|
||||
- [x] `openAppWindow` branches on `docked`
|
||||
- [x] `DockedLayer.svelte`: generic docked-app layer in Desktop.svelte
|
||||
- [x] Mascot registered as `docked: true`; hardcoded `<MascotLayer />` removed
|
||||
- [x] WindowLayer: prefix-map content resolution *(deferred — re-audited as gold-plating; original gate already handles orphans)*
|
||||
- [x] `apps.test.ts`: validation rules per kind (§2.3)
|
||||
- [x] AppOS contract documented (§2.4 lands in MBSE component doc)
|
||||
|
||||
### Phase 2: Lazy loading
|
||||
|
||||
- [x] `component` becomes `() => Promise<{ default: Component }>`; all apps use dynamic imports
|
||||
- [x] Desktop icons render immediately (metadata only); component chunk loads on window open
|
||||
- [x] `LazyApp.svelte` — shared loading skeleton (spinner) used by WindowLayer + DockedLayer
|
||||
- [x] Deleted `LazyMascot.svelte` — the registry lazy loader breaks the cycle directly
|
||||
- [x] Vite code-splits each app into its own chunk (main bundle 800KB → 482KB)
|
||||
- [ ] Icon store revalidates against live registry *(Phase 3 prerequisite — not needed while apps are statically registered)*
|
||||
- [ ] WindowLayer orphan-close gated on registry-ready *(Phase 3 prerequisite)*
|
||||
|
||||
### Phase 3: Dynamic app installation (frontend scaffold, local bundles)
|
||||
|
||||
Scoped at execution time to **local bundles only** (remote-URL loading +
|
||||
sandboxing deferred to Phase 4 — security-critical, needs ADR + careful
|
||||
design). The mechanism built here generalizes to remote bundles by
|
||||
swapping the catalog for a fetched manifest + `import(/* @vite-ignore */ url)`.
|
||||
|
||||
- [x] `AppManifest` format (id, title, permissions, version, geometry) — `web/src/app-store/catalog.ts`
|
||||
- [x] `AppPermission` enum (declaration-only; enforcement is Phase 4)
|
||||
- [x] Static catalog with one demo app (Notes) — `web/src/app-store/apps/Notes.svelte`
|
||||
- [x] Runtime registry: `APPS` → derived store (built-ins + installed); `appById` → derived Map
|
||||
- [x] `installApp` / `uninstallApp` + localStorage persistence (`oikos-installed-apps`)
|
||||
- [x] `icons.ts` reactive to app registration (late-registering apps get free cells; reset re-seeds from live registry)
|
||||
- [x] WindowLayer orphan-close reactive to `$appById` (reinstall revives, uninstall closes)
|
||||
- [x] App Store page (`web/src/pages/AppStore.svelte`) — list / install / uninstall
|
||||
- [x] Installed apps appear on desktop immediately (no reload); uninstall removes icon + closes window
|
||||
- [x] Icon store revalidates against live registry *(the Phase 3 prerequisite — now done)*
|
||||
- [ ] `/api/v1/apps` endpoint + DB-backed manifest storage *(Phase 4)*
|
||||
- [ ] Remote bundle loading from URLs + CSP + capability sandboxing *(Phase 4)*
|
||||
- [ ] Permission enforcement at AppOS boundary *(Phase 4)*
|
||||
|
||||
### Phase 4: Marketplace (vision)
|
||||
|
||||
- [ ] Community apps (network map, backup dashboard, energy monitor)
|
||||
- [ ] Versioning + auto-update
|
||||
- [ ] Mascot skin packs as installable docked-app variants
|
||||
|
||||
---
|
||||
|
||||
## 6. Implementation — Phase 1, file by file
|
||||
|
||||
| # | File | Change |
|
||||
|---|------|--------|
|
||||
| 1 | `lib/apps.ts` | Extend `AppDef` (`docked?`, `noIcon?`, geometry optional). Register mascot. Import `MascotLayer` + `EggIcon`. |
|
||||
| 2 | `lib/stores/docked.ts` | **New.** `dockedVisibility` store, `toggleDocked`, `isDockedVisible`, localStorage persistence. |
|
||||
| 3 | `lib/stores/windows.ts` | `openAppWindow`: docked branch → `toggleDocked`. |
|
||||
| 4 | `components/desktop-shell/DockedLayer.svelte` | **New.** Renders visible docked apps after WindowLayer. |
|
||||
| 5 | `components/desktop-shell/Desktop.svelte` | Replace `import MascotLayer` + `<MascotLayer />` with `<DockedLayer />`. |
|
||||
| 6 | `components/desktop-shell/WindowLayer.svelte` | **Deferred during implementation.** The positional if/else was re-audited and found to already handle orphans cleanly (`{#if win && (!appId || app)}`), and any new window kind needs a prop-dispatch branch in markup regardless — so a prefix→component map adds machinery without decoupling. Documented as an extension point (§2.5) like `titlebarActions`; not built (YAGNI). |
|
||||
| 7 | `lib/apps.test.ts` | Mock `MascotLayer` import (same pattern as pages). Per-kind validation tests. Docked apps exempt from positive-size test. |
|
||||
| 8 | `lib/stores/docked.test.ts` | **New.** Toggle, persistence, default-visible, unknown-key merge. |
|
||||
| 9 | `docs/mbse/components.md` | Add Component 9: Web Control Room — App Architecture (§7). |
|
||||
|
||||
**Out of scope for Phase 1:** `titlebarActions`, app-scoped state,
|
||||
lazy loading, manifests, permissions.
|
||||
|
||||
**Verification:**
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm run test # vitest — registry + docked store
|
||||
npm run check # svelte-check + tsc
|
||||
npm run lint
|
||||
npm run build # vite build — confirms no import cycles from DockedLayer
|
||||
```
|
||||
|
||||
Manual smoke: icon toggle hides/shows mascot → reload → stays hidden →
|
||||
toggle → returns at last position (model `lastPos` restore). All seven
|
||||
windowed apps open/focus/close identically to before. Legacy hash
|
||||
`#/signals` still opens the Signals window.
|
||||
|
||||
---
|
||||
|
||||
## 7. MBSE documentation
|
||||
|
||||
Add **Component 9: Web Control Room — App Architecture** to
|
||||
`docs/mbse/components.md`:
|
||||
|
||||
```
|
||||
9. Web Control Room — App Architecture
|
||||
9.1 Purpose — OS + Apps metaphor, why apps are independently shippable
|
||||
9.2 Structural View — shell modules, registry, docked layer (mermaid)
|
||||
9.3 App Contract — AppDef, validation rules, app kinds
|
||||
9.4 OS-Service Surface — the AppOS table
|
||||
9.5 Content Resolution — prefix map, window kinds, orphan cleanup
|
||||
9.6 Behavior — window state machine, docked visibility lifecycle
|
||||
9.7 Requirements — WEB-APP-* traceability
|
||||
9.8 Verification — test coverage, manual smoke
|
||||
```
|
||||
|
||||
### Requirements
|
||||
|
||||
| ID | Requirement | Status |
|
||||
|----|-------------|--------|
|
||||
| WEB-APP-1 | Apps register via data-driven AppDef entries; no shell edits to add/remove | ✅ live |
|
||||
| WEB-APP-2 | Apps render in wmkit floating windows | ✅ live |
|
||||
| WEB-APP-3 | Window IDs namespaced (`app:`/`session:`/entity) — no collisions | ✅ live |
|
||||
| WEB-APP-4 | Desktop icons render from the registry | ✅ live |
|
||||
| WEB-APP-5 | Taskbar buttons derive from window state, icons resolved via registry | ✅ live |
|
||||
| WEB-APP-6 | Removed apps' persisted windows self-close | ✅ live (`WindowLayer.svelte:25-30`) |
|
||||
| WEB-APP-7 | Content resolution dispatches via prefix map, not positional if/else | ⬜ Deferred — re-audited; original gate already handles orphans, map adds no decoupling (§2.5) |
|
||||
| WEB-APP-8 | Docked app kind: no window, no chrome, visibility toggled via icon | ⬜ Phase 1 |
|
||||
| WEB-APP-9 | Mascot is a registered docked App, not a hardcoded shell component | ⬜ Phase 1 |
|
||||
| WEB-APP-10 | Docked visibility persists across reloads | ⬜ Phase 1 |
|
||||
| WEB-APP-11 | OS-service surface (AppOS) documented as the stable App API | ⬜ Phase 1 |
|
||||
| WEB-APP-12 | Registry validation: per-kind geometry rules enforced by tests | ⬜ Phase 1 |
|
||||
| WEB-APP-13 | Apps lazy-load; icons render from static metadata | ✅ Phase 2 |
|
||||
| WEB-APP-14 | Icon store revalidates against live registry, not import-time snapshot | ✅ Phase 3 |
|
||||
| WEB-APP-15 | Third-party apps install from manifests with declared permissions | ✅ Phase 3 (local bundles; enforcement Phase 4) |
|
||||
|
||||
### Sequence — windowed app open
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Desktop
|
||||
participant WM as Window Manager
|
||||
participant WL as Window Layer
|
||||
participant App
|
||||
|
||||
User->>Desktop: click icon
|
||||
Desktop->>WM: openAppWindow("signals")
|
||||
Note over WM: docked? no → wm path
|
||||
alt window exists
|
||||
WM->>WM: restore + focus
|
||||
else new
|
||||
WM->>WM: wm.open({ id: "app:signals", ... })
|
||||
WM->>WL: render frame
|
||||
WL->>WL: resolveContent → prefix 'app:' → registry
|
||||
WL->>App: mount component
|
||||
end
|
||||
WM->>Taskbar: new button in wmState.order
|
||||
```
|
||||
|
||||
### Sequence — docked app toggle
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Desktop
|
||||
participant Dock as docked.ts
|
||||
participant Layer as DockedLayer
|
||||
participant App
|
||||
|
||||
User->>Desktop: click Cluck icon
|
||||
Desktop->>Dock: openAppWindow("mascot") → docked → toggleDocked
|
||||
Dock->>Dock: flip visibility, persist localStorage
|
||||
Dock->>Layer: store update
|
||||
alt now visible
|
||||
Layer->>App: mount MascotLayer
|
||||
Note over App: model + sprites restore<br/>from module scope
|
||||
else now hidden
|
||||
Layer->>App: unmount (state survives)
|
||||
end
|
||||
```
|
||||
|
||||
### State machine — app window
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Closed: registered, no window
|
||||
Closed --> Open: openAppWindow
|
||||
Open --> Focused: focus
|
||||
Focused --> Open: blur
|
||||
Open --> Minimized: minimize
|
||||
Minimized --> Focused: restore
|
||||
Open --> Closed: close
|
||||
Minimized --> Closed: close
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Risk & safety
|
||||
|
||||
| Risk | Severity | Mitigation |
|
||||
|------|----------|------------|
|
||||
| Mascot refactor breaks stimuli or ground-line computation | Medium | MascotLayer unchanged; DockedLayer mounts it in the same surface div, same position in the stacking order as today. |
|
||||
| Hidden mascot never rediscovered | Low | Icon always present, tooltip says show/hide. |
|
||||
| `openAppWindow` docked branch leaks into windowed path | Low | Branch is the first statement; windowed path byte-identical. Covered by existing call sites (icon click, taskbar settings, legacy hash). |
|
||||
| Docked visibility store desyncs from registry | Low | Unknown keys kept on load; layer filters by `a.docked` from the live registry. |
|
||||
| Phase 2 lazy loading kills persisted windows of not-yet-loaded apps | Medium | Explicit Phase 2 gate: orphan-close waits for registry-ready (§5). Called out now so it isn't discovered in production. |
|
||||
|
||||
---
|
||||
|
||||
## 9. Appendix: relevant existing artifacts
|
||||
|
||||
| Artifact | Relevance |
|
||||
|----------|-----------|
|
||||
| `docs/mbse/README.md` §5 | MCP tools / REST / SSE — the data surface Apps consume |
|
||||
| `docs/mbse/components.md` §5 | Current web control room component doc — Phase 1 extends it |
|
||||
| `docs/mascot/README.md` | Mascot subsystem model (MASC-1..12); MASC-9's registry philosophy is the template for this plan |
|
||||
| `plans/2026-07-08-control-room-webui.md` | Original control-room plan |
|
||||
| `plans/done/2026-07-11-ui-review-ia-usability.md` | IA review that produced the desktop metaphor |
|
||||
| `plans/2026-07-20-desktop-mascot.md` | Mascot plan; extension registries |
|
||||
| `lib/apps.ts` header comment | Already documents the one-entry-to-add-an-app philosophy |
|
||||
|
||||
---
|
||||
|
||||
*Plan opened 2026-07-21. Phase 1 ready for execution — estimated small
|
||||
(~half a day of focused work; nine file touches, two new files). Phases
|
||||
2–4 are context for future sessions and do not block Phase 1.*
|
||||
@@ -21,6 +21,7 @@ went sideways, open an investigation.
|
||||
| 2026-07-20 | [Desktop mascot ("Cluck")](2026-07-20-desktop-mascot.md) | Implemented in v0.8.0 — see deviation note; physics/window-interaction follow-ups tracked separately |
|
||||
| 2026-07-20 | [Session review: past 10 sessions](2026-07-20-session-review-ten-sessions.md) | Implemented in v0.7.13 — all P0/P1/P2 items landed |
|
||||
| 2026-07-20 | [Mascot physics/window-interaction audit](2026-07-20-mascot-physics-audit.md) | P0–P2 implemented; P3 ("cool stuff") ideas open |
|
||||
| 2026-07-21 | [Frontend as OS + Apps — architecture audit & refactor](2026-07-21-frontend-os-apps-architecture.md) | Planned — Phase 1 ready |
|
||||
|
||||
## Done
|
||||
|
||||
|
||||
403
plans/tables.md
Normal file
403
plans/tables.md
Normal file
@@ -0,0 +1,403 @@
|
||||
# Table & Component Standardization Plan
|
||||
|
||||
## 0. Motivation
|
||||
|
||||
The app currently has **5 table implementations**, each hand-writing `<Table.Root>` boilerplate
|
||||
from scratch. The shadcn-svelte `Table.*` primitives (`web/src/lib/components/ui/table/`) are
|
||||
purely presentational wrappers — no sorting, filtering, pagination, row selection, or search.
|
||||
Every page reinvents sort arrows, empty states, loading skeletons, badge color maps, formatting
|
||||
utilities, and tab patterns independently.
|
||||
|
||||
**Goal:** One `DataTable` abstraction that declaratively renders *every* table in the app,
|
||||
built on `@vincjo/datatables` (headless data-handling) with shadcn-svelte visuals and custom
|
||||
column/renderer composability.
|
||||
|
||||
**Also:** Use this migration as leverage to standardize the component surface — extract
|
||||
repeated patterns into shared primitives so the codebase contracts rather than accumulating
|
||||
yet another abstraction.
|
||||
|
||||
---
|
||||
|
||||
## 1. Audit Summary
|
||||
|
||||
### 1.1 Tables in the App
|
||||
|
||||
| # | Page / Component | File | LOC | Features (what it has) | Gaps (what it's missing) |
|
||||
|---|---|---|---|---|---|
|
||||
| 1 | `EntityTable.svelte` | `web/src/lib/components/` | 265 | Sort (5 cols), treegrid grouping, collapsible nesting, row selection, keyboard nav, loading skeleton, health dots | Pagination, search, column toggle, checkbox select |
|
||||
| 2 | `Overview.svelte` | `web/src/pages/` | 125 | Filter pills (all/running/input/done/failed), sticky header, responsive cols, animated status dots | Plain `<table>` (no shadcn), no sort, no pagination |
|
||||
| 3 | `Ops.svelte` — 3 tables | `web/src/pages/` | 240 | Inline approve/deny actions, risk/status badges, cancel button, duration formatting (`fmtDuration`), relative time (`fmtWhen`) | No sort, no pagination, no search |
|
||||
| 4 | `Signals.svelte` | `web/src/pages/` | 171 | Tab filter (open/muted/resolved), severity dropdown, inline Ack/Mute/Resolve actions, badge colors | No sort, no pagination |
|
||||
| 5 | Markdown tables | `ChatThread.svelte`, `EntityDetailContent.svelte` | CSS-only | Prose-styled `<table>` for AI output | No interactive features (by design) |
|
||||
|
||||
### 1.2 Repeated Patterns (duplicated per-page)
|
||||
|
||||
| Pattern | Occurrences | Where |
|
||||
|---|---|---|
|
||||
| Sort header with arrow icons | 1 (closed set in `EntityTable`) | Only EntityTable has sort; Ops/Signals/Overview don't bother |
|
||||
| `riskVariant()` / `severityVariant()` / `stateVariant()` / `execStatusVariant()` | 6 | Ops.svelte ×2, Signals.svelte ×1, EntityTable.svelte ×2, Knowledge.svelte ×1 |
|
||||
| `fmtWhen()` / `relTime()` inline relative-time formatting | 3 | Ops.svelte, Knowledge.svelte (both inline; utils.ts has `relativeTime` already) |
|
||||
| `<Table.Root> > <Table.Header> > <Table.Row> > <Table.Head>` boilerplate | 6 | Every table page |
|
||||
| Empty state `<Table.Cell colspan={N}>No ...</Table.Cell>` | 6 | Every table page |
|
||||
| `<Tabs.Root> > <Tabs.List> > <Tabs.Trigger>` with badge counts | 2 | Ops.svelte, Signals.svelte |
|
||||
| Loading skeleton | 2 | EntityTable.svelte (custom widths), EntityDetailContent.svelte |
|
||||
|
||||
### 1.3 Current Tech Stack
|
||||
|
||||
| Layer | What | Version |
|
||||
|---|---|---|
|
||||
| Framework | Svelte 5 (runes mode) | ^5.0.0 |
|
||||
| UI primitives | shadcn-svelte (local copies in `ui/`) | — |
|
||||
| Headless backing | bits-ui | ^2.18.1 |
|
||||
| CSS | Tailwind v4 (CSS-first config, no PostCSS) | ^4.3.2 |
|
||||
| Variant system | tailwind-variants | ^3.2.2 |
|
||||
| Icons | @lucide/svelte | ^1.23.0 |
|
||||
| Table library | **none** | — |
|
||||
|
||||
---
|
||||
|
||||
## 2. `@vincjo/datatables` — Why This Library
|
||||
|
||||
**Headless.** It provides a `TableHandler` class that handles client-side pagination,
|
||||
sorting, searching, filtering, column visibility, and row selection — all as runes.
|
||||
Rendering is entirely up to us. This pairs perfectly with shadcn-svelte visual styling.
|
||||
|
||||
**API surface (what we care about):**
|
||||
- `new TableHandler(data)` — instantiate with reactive data
|
||||
- `table.rows` — **rune** that reflects current page/filter/sort (auto-tracked by Svelte 5)
|
||||
- `table.rowCount`, `table.pageCount`, `table.currentPage`, `table.pages`, `table.pagesWithEllipsis`
|
||||
- `table.setRows(data)`, `table.setRowsPerPage(n)`, `table.setPage('next'|'previous'|int)`
|
||||
- `table.createSort()`, `table.createSearch()`, `table.createFilter()`, `table.createView()`
|
||||
- `table.select(id)`, `table.selectAll()`, `table.selected`, `table.isAllSelected`
|
||||
- `table.createCSV()`, `table.createCalculation()`, `table.createRecordFilter()`
|
||||
|
||||
**No dependencies.** Lightweight. TypeScript-native. SSR friendly (even though we're SPA).
|
||||
|
||||
### What it does NOT do (and that's fine)
|
||||
- No rendering. We build the UI ourselves — use shadcn-svelte primitives.
|
||||
- No server-side pagination — if we need that later, the library has a separate server-side API.
|
||||
- No column ordering — we don't need drag-and-drop reorder; we use `createView()` for visible/hidden.
|
||||
|
||||
---
|
||||
|
||||
## 3. Architecture Plan
|
||||
|
||||
### 3.1 New Core Component: `DataTable.svelte`
|
||||
|
||||
```
|
||||
web/src/lib/components/data-table/
|
||||
├── DataTable.svelte # The main table component
|
||||
├── DataTable.svelte.ts # TypeScript type definitions
|
||||
├── columns.ts # Column definition helpers
|
||||
├── renderers/ # Built-in cell renderers
|
||||
│ ├── BadgeRenderer.svelte
|
||||
│ ├── HealthDotRenderer.svelte
|
||||
│ ├── RelativeTimeRenderer.svelte
|
||||
│ └── DateRenderer.svelte
|
||||
├── pagination/ # Pagination UI
|
||||
│ ├── Pagination.svelte
|
||||
│ ├── PageButton.svelte
|
||||
│ └── RowsPerPage.svelte
|
||||
├── sort-header.svelte # Sortable column header with arrow icons
|
||||
├── search-input.svelte # Text search input
|
||||
└── toolbar.svelte # Top toolbar (search + filter + page size)
|
||||
```
|
||||
|
||||
### 3.2 `DataTable` API (declarative, Svelte 5 runes)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import DataTable from '$lib/components/data-table/DataTable.svelte'
|
||||
import type { DataTableColumn } from '$lib/components/data-table/DataTable.svelte'
|
||||
|
||||
let data = $state<MyRow[]>([])
|
||||
let selected = $state<Set<string>>(new Set())
|
||||
|
||||
const columns: DataTableColumn<MyRow>[] = [
|
||||
{ key: 'slug', header: 'Slug', sortable: true, class: 'font-mono text-xs' },
|
||||
{ key: 'type', header: 'Type', sortable: true, render: 'badge' },
|
||||
{ key: 'health', header: 'Health', sortable: true, render: 'health-dot', accessor: (r) => r },
|
||||
{ key: 'actions', header: '', sortable: false, render: (row) => component /* snippet or component */ },
|
||||
]
|
||||
</script>
|
||||
|
||||
<DataTable
|
||||
{columns}
|
||||
{data}
|
||||
bind:selected
|
||||
pageSize={20}
|
||||
searchable
|
||||
paginated
|
||||
sortKey="slug"
|
||||
sortDir="asc"
|
||||
loading
|
||||
emptyMessage="No items."
|
||||
>
|
||||
<!-- optional slot for toolbar actions -->
|
||||
</DataTable>
|
||||
```
|
||||
|
||||
### 3.3 Column System
|
||||
|
||||
A `DataTableColumn<T>` is:
|
||||
|
||||
```typescript
|
||||
type ColumnRenderer<T> =
|
||||
| 'badge' // wraps value in <Badge variant="outline">
|
||||
| 'health-dot' // colored dot + relative time
|
||||
| 'relative-time' // relativeTime(val)
|
||||
| 'date' // new Date(val).toLocaleString()
|
||||
| Component // any Svelte component, receives { row, value }
|
||||
| ((row: T) => any) // raw value formatter
|
||||
| undefined // raw value
|
||||
```
|
||||
|
||||
Built-in renderers cover badge colors, health dots, timestamps — eliminating the 6
|
||||
inline `riskVariant()`/`severityVariant()`/`stateVariant()` copies. Custom components
|
||||
cover action buttons and complex cells.
|
||||
|
||||
### 3.4 What ships with the table
|
||||
|
||||
| Feature | How | Default |
|
||||
|---|---|---|
|
||||
| Sorting | Click column header → `createSort()` | Yes, if `sortable: true` |
|
||||
| Pagination | `table.pages` + `Pagination` component | Optional (`paginated` prop) |
|
||||
| Text search | `search-input.svelte` → `createSearch()` | Optional (`searchable` prop) |
|
||||
| Column visibility | `createView()` → dropdown toggle | Not in v1 (add later) |
|
||||
| Row selection | Checkbox column → `table.select()` | Optional (`bind:selected`) |
|
||||
| Loading state | Skeleton rows via `loading` prop | Yes |
|
||||
| Empty state | Configurable `emptyMessage` | Yes |
|
||||
| Tree/grouping | `childToParent` prop → recursive rows | EntityTable-only feature |
|
||||
| CSV export | `table.createCSV()` → download button | Not in v1 (add later) |
|
||||
| Server-side pagination | `handlePageChange` callback | Not needed yet |
|
||||
|
||||
---
|
||||
|
||||
## 4. Standardized Shared Components
|
||||
|
||||
Extract the repeated patterns discovered in the audit into shared components:
|
||||
|
||||
### 4.1 `StatusBadge.svelte`
|
||||
**Replaces:** 6 copies of `riskVariant()`, `severityVariant()`, `stateVariant()`, `execStatusVariant()`
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
let { value, kind = 'state' }: { value: string; kind?: 'risk' | 'severity' | 'state' | 'execution' } = $props()
|
||||
// Resolves variant mapping from kind + value
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4.2 `EmptyState.svelte`
|
||||
**Replaces:** 6 `<Table.Cell colspan={N}>No ...</Table.Cell>` blocks
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
let { message = 'No items.', colspan = 999, icon = null } = $props()
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4.3 `RelativeTime.svelte`
|
||||
**Replaces:** `Oks.svelte:58` (`fmtWhen`), `Knowledge.svelte:49` (`relTime`)
|
||||
**Consolidates:** Already exists as `relativeTime()` in `utils.ts` — wrap in a component that auto-updates.
|
||||
|
||||
### 4.4 `FilterTabs.svelte`
|
||||
**Replaces:** `Ops.svelte:114-120` and `Signals.svelte:153-159` (Tabs.Root boilerplate with badge counts)
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
let { tabs, value = $bindable(''), class, children }: {
|
||||
tabs: { value: string; label: string; count?: number }[];
|
||||
value?: string;
|
||||
class?: string;
|
||||
children?: any;
|
||||
} = $props()
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4.5 `PageHeader.svelte`
|
||||
**Replaces:** Every page's `<h1 class="text-lg font-semibold">...</h1>` + optional actions row.
|
||||
|
||||
---
|
||||
|
||||
## 5. Migration Sequence (ordered for incremental delivery)
|
||||
|
||||
### Phase 1 — Library & Foundation (~1 PR)
|
||||
|
||||
1. **Install `@vincjo/datatables`**
|
||||
```
|
||||
npm install -D @vincjo/datatables
|
||||
```
|
||||
|
||||
2. **Build `DataTable.svelte` + `DataTable.svelte.ts` + `columns.ts`**
|
||||
- Core loop: `{#each table.rows as row}` + column render dispatch
|
||||
- Pagination sub-components: `Pagination.svelte`, `PageButton.svelte`, `RowsPerPage.svelte`
|
||||
- `SortHeader.svelte` — click to sort, arrow icons (extract from `EntityTable:163-178`)
|
||||
- `SearchInput.svelte` — debounced text search
|
||||
|
||||
3. **Build renderers:** `BadgeRenderer.svelte`, `HealthDotRenderer.svelte`, `RelativeTimeRenderer.svelte`, `DateRenderer.svelte`
|
||||
|
||||
4. **Build `EmptyState.svelte`**
|
||||
|
||||
5. **Unit tests** for `DataTable` column dispatch, sort, pagination, selection.
|
||||
|
||||
### Phase 2 — Simple Tables (no tree, no actions) (~1 PR)
|
||||
|
||||
6. **Migrate `Overview.svelte` (task board)**
|
||||
- Plain `<table>` → `DataTable` with `StatusBadge`, `RelativeTime`, filter pills external
|
||||
- Drop sticky-header CSS (`DataTable` handles it)
|
||||
- Verify: filter pills, status dots, responsive summary column, click-to-open
|
||||
|
||||
7. **Migrate `Signals.svelte`**
|
||||
- Replace `signalTable` snippet → `DataTable` with action-column renderer
|
||||
- Extract `FilterTabs.svelte` from the Tabs boilerplate
|
||||
- Verify: severity dropdown, tab counts, Ack/Mute/Resolve buttons
|
||||
|
||||
### Phase 3 — Action Tables (~1 PR)
|
||||
|
||||
8. **Migrate `Ops.svelte` — Pending Approvals**
|
||||
- Approve/Deny buttons as action column renderer
|
||||
- Risk badge via `StatusBadge kind="risk"`
|
||||
|
||||
9. **Migrate `Ops.svelte` — Decided Approvals**
|
||||
- Same columns, no actions
|
||||
|
||||
10. **Migrate `Ops.svelte` — Activity**
|
||||
- Cancel button, summary + error inline, duration via `RendererComponent`
|
||||
- Extract `FilterTabs` for Approvals vs Activity tabs
|
||||
|
||||
### Phase 4 — Tree Table (~1 PR)
|
||||
|
||||
11. **Migrate `EntityTable.svelte`**
|
||||
- Treegrid grouping is the hard part. Build a `TreeTable` variant or a `grouped` prop.
|
||||
- `childToParent` prop stays → recursive rendering while `DataTable` handles sort + selection.
|
||||
- **Alternative:** Ship `treegrid` as a separate `TreeDataTable.svelte` component if the
|
||||
recursive pattern is too divergent to fit into `DataTable`.
|
||||
|
||||
### Phase 5 — Cleanup & Standardization (~1 PR)
|
||||
|
||||
12. **Extract shared components everywhere:**
|
||||
- Audit every `.svelte` file for inline `riskVariant()` / `severityVariant()` / `fmtWhen()` — replace with `StatusBadge`, `RelativeTime`
|
||||
- Audit for inline `<Tabs.Root>` boilerplate — replace with `FilterTabs`
|
||||
- Audit for `<Badge variant={...}>` with inline logic — consolidate
|
||||
|
||||
13. **Remove deprecated shadcn-svelte table primitives** after confirming nothing else imports them.
|
||||
|
||||
14. **Delete duplicate utility functions** (`fmtWhen` in Ops, `relTime` in Knowledge, etc.)
|
||||
|
||||
### Phase 6 — Polish (~1 PR)
|
||||
|
||||
15. **Column visibility toggle** (optional)
|
||||
16. **CSV export** for entity tables (optional)
|
||||
17. **Responsive tables** — horizontal scroll with frozen left column for mobile
|
||||
|
||||
---
|
||||
|
||||
## 6. Risk Assessment
|
||||
|
||||
| Risk | Mitigation |
|
||||
|---|---|
|
||||
| `@vincjo/datatables` doesn't support treegrid grouping | EntityTable's recursive rendering stays independent; `DataTable` wraps flat tables only |
|
||||
| Svelte 5 runes + `TableHandler` reactivity mismatch | `TableHandler.rows` is a rune. Wrap in `$derived` or `$effect` to feed `data` prop → `table.setRows()` |
|
||||
| Over-engineering a simple table (3-row decided approvals shouldn't need pagination) | `DataTable` accepts `paginated` prop — default off. Small tables stay simple. |
|
||||
| Treegrid migration breaks KB browser | Phase 4 is isolated. Phases 1–3 deliver value before touching the critical KB table. |
|
||||
|
||||
---
|
||||
|
||||
## 7. Success Criteria
|
||||
|
||||
1. **Every `<Table.Root>`** in the app routes through `DataTable.svelte`
|
||||
2. **0** copies of inline `riskVariant()` / `severityVariant()` / `stateVariant()` — all through `StatusBadge`
|
||||
3. **0** copies of inline `fmtWhen()` / `relTime()` — all through `RelativeTime` or `utils.relativeTime`
|
||||
4. **0** copies of manual `<Table.Cell colspan={N}>No ...</Table.Cell>` — all through `EmptyState`
|
||||
5. **`web/src/lib/components/ui/table/`** retained for `DataTable` internals only (or removed if unused)
|
||||
6. **TypeScript compiles** with `--noEmit` and **tests pass** (`vitest run`)
|
||||
7. **All existing features preserved**: sort, tree expand/collapse, tab filters, severity dropdown, approve/deny/cancel/ack/resolve buttons, sticky headers, loading skeletons, health dots, empty states
|
||||
|
||||
---
|
||||
|
||||
## 8. File Manifest (what gets created / modified / deleted)
|
||||
|
||||
### Created
|
||||
```
|
||||
plan/tables.md ← this file
|
||||
web/src/lib/components/data-table/DataTable.svelte
|
||||
web/src/lib/components/data-table/DataTable.svelte.ts
|
||||
web/src/lib/components/data-table/columns.ts
|
||||
web/src/lib/components/data-table/columns.test.ts
|
||||
web/src/lib/components/data-table/renderers/BadgeRenderer.svelte
|
||||
web/src/lib/components/data-table/renderers/HealthDotRenderer.svelte
|
||||
web/src/lib/components/data-table/renderers/RelativeTimeRenderer.svelte
|
||||
web/src/lib/components/data-table/renderers/DateRenderer.svelte
|
||||
web/src/lib/components/data-table/pagination/Pagination.svelte
|
||||
web/src/lib/components/data-table/pagination/PageButton.svelte
|
||||
web/src/lib/components/data-table/pagination/RowsPerPage.svelte
|
||||
web/src/lib/components/data-table/sort-header.svelte
|
||||
web/src/lib/components/data-table/search-input.svelte
|
||||
web/src/lib/components/data-table/toolbar.svelte
|
||||
web/src/lib/components/StatusBadge.svelte
|
||||
web/src/lib/components/EmptyState.svelte
|
||||
web/src/lib/components/RelativeTime.svelte
|
||||
web/src/lib/components/FilterTabs.svelte
|
||||
web/src/lib/components/PageHeader.svelte
|
||||
```
|
||||
|
||||
### Modified (in migration order)
|
||||
```
|
||||
web/package.json ← add @vincjo/datatables
|
||||
web/src/pages/Overview.svelte ← Phase 2
|
||||
web/src/pages/Signals.svelte ← Phase 2
|
||||
web/src/pages/Ops.svelte ← Phase 3
|
||||
web/src/lib/components/EntityTable.svelte ← Phase 4
|
||||
web/src/pages/KnowledgeBase.svelte ← Phase 4 (consumer of EntityTable)
|
||||
web/src/pages/Knowledge.svelte ← Phase 5 (remove relTime)
|
||||
```
|
||||
|
||||
### Potentially Removed (Phase 5)
|
||||
```
|
||||
web/src/lib/components/ui/table/* ← if DataTable is the sole consumer
|
||||
(These stay if DataTable still uses them internally for rendering)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Implementation Status
|
||||
|
||||
### Completed (2026-07-21)
|
||||
|
||||
| Phase | Task | Status |
|
||||
|---|---|---|
|
||||
| 1 | Install `@vincjo/datatables` | Done |
|
||||
| 1 | `DataTable.svelte` core component | Done |
|
||||
| 1 | Types (`DataTable.svelte.ts`, `columns.ts`) | Done |
|
||||
| 1 | Pagination (`Pagination`, `PageButton`, `RowsPerPage`) | Done |
|
||||
| 1 | Sort header, search input, toolbar | Done |
|
||||
| 1 | Built-in renderers: `BadgeRenderer`, `HealthDotRenderer`, `RelativeTimeRenderer`, `DateRenderer`, `RiskBadgeRenderer`, `ExecutionStatusRenderer`, `DurationRenderer`, `StatusDotRenderer` | Done |
|
||||
| 1 | `EmptyState.svelte` shared component | Done |
|
||||
| 2 | Migrate `Overview.svelte` to `DataTable` | Done |
|
||||
| 2 | Migrate `Signals.svelte` to `DataTable` | Done |
|
||||
| 3 | Migrate `Ops.svelte` (3 tables) to `DataTable` | Done |
|
||||
| 4 | Refactor `EntityTable.svelte` to use shared {SortHeader, EmptyState, HealthDotRenderer} | Done |
|
||||
| 5 | Create `StatusBadge.svelte` (consolidates risk/severity/execution-type variant maps) | Done |
|
||||
| 5 | Create `FilterTabs.svelte` component | Done |
|
||||
| 5 | Clean up `Knowledge.svelte`: replace inline `relTime()` → `relativeTime()`, `typeVariant()` → `StatusBadge` | Done |
|
||||
|
||||
### Key Decisions Made During Implementation
|
||||
|
||||
- **EntityTable treegrid NOT migrated to DataTable**. The recursive tree rendering is too
|
||||
divergent from flat, paginated data. Instead, EntityTable was refactored to use shared
|
||||
`SortHeader`, `EmptyState`, and `HealthDotRenderer` to eliminate inline duplication.
|
||||
- **`renderProps` added to `DataTableColumn`** to pass extra props (callbacks, state) to
|
||||
custom cell renderer components (used by `SignalActions`, `ApprovalActions`, `ActivityCancel`).
|
||||
- **`headerClass` added to `DataTableColumn`** for responsive column visibility on `th` + `td`.
|
||||
- **`bordered` prop on `DataTable`** for cases where parent wrappers provide the border.
|
||||
- **`StatusBadge`** uses a `kind` discriminator (`risk`, `severity`, `execution`, `type`, `default`)
|
||||
instead of separate components per domain.
|
||||
- **`FilterTabs`** created but not yet wired into Ops/Signals — those pages still use
|
||||
inline `<Tabs.Root>` for the approvals/activity and open/muted/resolved tabs.
|
||||
|
||||
### Remaining (Phase 6 — Future PR)
|
||||
|
||||
- Wire `FilterTabs` into Ops.svelte and Signals.svelte
|
||||
- Column visibility toggle
|
||||
- CSV export
|
||||
- Responsive table with frozen left column for mobile
|
||||
11
web/package-lock.json
generated
11
web/package-lock.json
generated
@@ -23,6 +23,7 @@
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"@types/d3-force": "^3.0.10",
|
||||
"@vincjo/datatables": "^2.8.1",
|
||||
"bits-ui": "^2.18.1",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.46.0",
|
||||
@@ -1969,6 +1970,16 @@
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@vincjo/datatables": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@vincjo/datatables/-/datatables-2.8.1.tgz",
|
||||
"integrity": "sha512-rWl17XkriNyX3fFB5GSThLlhlPDKchFMMSCuaeSYbZCokkwSACjTLtk9v3gg4PltUaXMsJ2XjQcpnPeKJ0xa5A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.56.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/expect": {
|
||||
"version": "2.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.1.9.tgz",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"@types/d3-force": "^3.0.10",
|
||||
"@vincjo/datatables": "^2.8.1",
|
||||
"bits-ui": "^2.18.1",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.46.0",
|
||||
|
||||
57
web/src/lib/app-store/apps/Notes.svelte
Normal file
57
web/src/lib/app-store/apps/Notes.svelte
Normal file
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
// Notes — a trivial installable app demoing the App Store lifecycle.
|
||||
// Installed from the App Store, gets a desktop icon, opens in a window,
|
||||
// has its own localStorage-backed state, and uninstalls cleanly. No
|
||||
// shell-internal imports — this is a self-contained app that could be
|
||||
// shipped as a standalone bundle (Phase 4 will load such bundles from
|
||||
// a URL; here it's bundled and discovered via the catalog).
|
||||
let { storageKey = 'oikos-app-notes' }: { storageKey?: string } = $props()
|
||||
|
||||
let text = $state('')
|
||||
let saved = $state(false)
|
||||
|
||||
function load(): string {
|
||||
if (typeof localStorage === 'undefined') return ''
|
||||
return localStorage.getItem(storageKey) ?? ''
|
||||
}
|
||||
function save(): void {
|
||||
if (typeof localStorage === 'undefined') return
|
||||
localStorage.setItem(storageKey, text)
|
||||
saved = true
|
||||
setTimeout(() => (saved = false), 1500)
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
|
||||
e.preventDefault()
|
||||
save()
|
||||
}
|
||||
}
|
||||
|
||||
text = load()
|
||||
$effect(() => {
|
||||
if (!text) return
|
||||
const t = setTimeout(() => save(), 2000)
|
||||
return () => clearTimeout(t)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col gap-2 p-4">
|
||||
<div class="flex shrink-0 items-center justify-between">
|
||||
<h2 class="text-sm font-medium">Notes</h2>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
{#if saved}saved{:else}unsaved{/if}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
bind:value={text}
|
||||
onkeydown={onKeydown}
|
||||
placeholder="Type here. Auto-saves 2s after you stop, or Cmd/Ctrl+S."
|
||||
class="min-h-0 flex-1 resize-none rounded-md border bg-background p-3 font-mono text-sm leading-relaxed focus-visible:outline-2 focus-visible:outline-ring"
|
||||
></textarea>
|
||||
<p class="shrink-0 text-xs text-muted-foreground">
|
||||
A demo installable app — uninstall it from the App Store to remove its
|
||||
icon and window. Its notes persist in localStorage under
|
||||
<code class="font-mono">{storageKey}</code>.
|
||||
</p>
|
||||
</div>
|
||||
81
web/src/lib/app-store/catalog.ts
Normal file
81
web/src/lib/app-store/catalog.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
// App Store — installable app catalog + manifest format.
|
||||
//
|
||||
// This is Phase 3's "frontend scaffold, local bundles only" path: a static
|
||||
// catalog of apps that ship with the build, each described by a persistable
|
||||
// manifest (metadata) and resolved at runtime to a loader + icon (runtime
|
||||
// bits that are NOT persisted — they're looked up from the catalog by
|
||||
// manifest id on load). Installing an app = persisting its manifest id;
|
||||
// uninstalling = removing it. The mechanism generalizes to remote bundles
|
||||
// in Phase 4 by swapping the catalog for a fetched manifest + a
|
||||
// `import(/* @vite-ignore */ entryUrl)` loader.
|
||||
//
|
||||
// Permissions are DECLARED on the manifest but NOT YET ENFORCED — that's
|
||||
// Phase 4 (sandboxing). They're part of the contract now so a manifest
|
||||
// author has to name what the app needs, and the operator can see it in
|
||||
// the App Store before installing. Enforcement will land at the AppOS
|
||||
// boundary (docs/mbse/components.md §9 "OS-service surface") in Phase 4.
|
||||
import type { Component } from 'svelte'
|
||||
import NotesIcon from '@lucide/svelte/icons/sticky-note'
|
||||
|
||||
// A permission an installable app can request. Maps 1:1 to entries in the
|
||||
// AppOS table (docs/mbse/components.md §9). Phase 4 will enforce these at
|
||||
// the store-access boundary; today they're declaration-only.
|
||||
export type AppPermission =
|
||||
| 'open-window' // openAppWindow / openEntityWindow / openTaskWindow
|
||||
| 'read-context' // dashboard summary, subscribeContext
|
||||
| 'read-events' // subscribeEvents (SSE)
|
||||
| 'api:entities' // $lib/api entity endpoints
|
||||
| 'api:knowledge' // knowledge search/content
|
||||
| 'api:executions' // executions/approvals
|
||||
| 'theme' // getTheme / setTheme
|
||||
|
||||
// Persistable metadata describing an installable app. This is what's
|
||||
// stored in localStorage when an app is installed (just the manifest id is
|
||||
// persisted, actually — the manifest is re-resolved from the catalog on
|
||||
// load — but the shape is the unit of interchange and will be what a
|
||||
// remote `/api/v1/apps` endpoint returns in Phase 4).
|
||||
export interface AppManifest {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
version: string
|
||||
author?: string
|
||||
permissions: AppPermission[]
|
||||
docked?: boolean
|
||||
noIcon?: boolean
|
||||
width?: number
|
||||
height?: number
|
||||
minWidth?: number
|
||||
minHeight?: number
|
||||
}
|
||||
|
||||
// A catalog entry: the manifest (persistable metadata) plus the runtime
|
||||
// bits the catalog resolves by id — the Lucide icon component and the
|
||||
// dynamic-import loader. These runtime bits are never persisted; they're
|
||||
// re-looked-up from this static catalog on every load.
|
||||
export interface CatalogEntry {
|
||||
manifest: AppManifest
|
||||
icon: Component
|
||||
load: () => Promise<{ default: Component }>
|
||||
}
|
||||
|
||||
export const CATALOG: CatalogEntry[] = [
|
||||
{
|
||||
manifest: {
|
||||
id: 'notes',
|
||||
title: 'Notes',
|
||||
description: 'A scratchpad. Auto-saves to localStorage. Demo installable app.',
|
||||
version: '0.1.0',
|
||||
author: 'oikos',
|
||||
permissions: ['theme'],
|
||||
width: 640,
|
||||
height: 480,
|
||||
minWidth: 360,
|
||||
minHeight: 320
|
||||
},
|
||||
icon: NotesIcon,
|
||||
load: () => import('./apps/Notes.svelte')
|
||||
}
|
||||
]
|
||||
|
||||
export const catalogById = new Map(CATALOG.map((e) => [e.manifest.id, e]))
|
||||
@@ -1,46 +1,56 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { describe, it, expect, beforeEach, 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: {} }))
|
||||
// apps.ts holds only app metadata + a reactive registry. `component` is a
|
||||
// dynamic-import loader, not the page itself, so importing apps.ts pulls no
|
||||
// page modules. The install/uninstall tests touch localStorage and the
|
||||
// module-scoped installedIds store, so each re-imports the module fresh (see
|
||||
// docked.test.ts for the same pattern).
|
||||
import { builtinApps, appWindowId, appIdFromWindowId } from './apps'
|
||||
|
||||
import { APPS, appById, appWindowId, appIdFromWindowId } from './apps'
|
||||
|
||||
describe('APPS registry', () => {
|
||||
describe('builtinApps registry', () => {
|
||||
it('has unique, non-empty ids', () => {
|
||||
const ids = APPS.map((a) => a.id)
|
||||
const ids = builtinApps.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) {
|
||||
it('component is a loader function, not the component itself', () => {
|
||||
for (const app of builtinApps) {
|
||||
expect(typeof app.component).toBe('function')
|
||||
}
|
||||
})
|
||||
|
||||
it('every built-in is source: builtin', () => {
|
||||
for (const app of builtinApps) expect(app.source).toBe('builtin')
|
||||
})
|
||||
|
||||
it('windowed apps have positive default geometry', () => {
|
||||
for (const app of builtinApps.filter((a) => !a.docked)) {
|
||||
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)
|
||||
it('docked apps forbid window geometry', () => {
|
||||
for (const app of builtinApps.filter((a) => a.docked)) {
|
||||
expect(app.width).toBeUndefined()
|
||||
expect(app.height).toBeUndefined()
|
||||
expect(app.minWidth).toBeUndefined()
|
||||
expect(app.minHeight).toBeUndefined()
|
||||
}
|
||||
expect(appById.size).toBe(APPS.length)
|
||||
})
|
||||
|
||||
it('includes the App Store and mascot as built-ins', () => {
|
||||
expect(builtinApps.find((a) => a.id === 'app-store')).toBeTruthy()
|
||||
const mascot = builtinApps.find((a) => a.id === 'mascot')
|
||||
expect(mascot?.docked).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('appWindowId / appIdFromWindowId', () => {
|
||||
it('round-trips an app id through its window id', () => {
|
||||
for (const app of APPS) {
|
||||
for (const app of builtinApps) {
|
||||
expect(appIdFromWindowId(appWindowId(app.id))).toBe(app.id)
|
||||
}
|
||||
})
|
||||
@@ -52,10 +62,74 @@ describe('appWindowId / appIdFromWindowId', () => {
|
||||
})
|
||||
|
||||
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) {
|
||||
for (const app of builtinApps) {
|
||||
expect(appWindowId(app.id).startsWith('app:')).toBe(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// install/uninstall lifecycle — each test re-imports fresh so the
|
||||
// module-scoped installedIds store starts empty and localStorage is clean.
|
||||
describe('install / uninstall', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear()
|
||||
vi.resetModules()
|
||||
})
|
||||
|
||||
it('installApp adds a catalog app to the installed set', async () => {
|
||||
const fresh = await import('./apps')
|
||||
fresh.installApp('notes')
|
||||
let snap: string[] = []
|
||||
const unsub = fresh.installedAppIds.subscribe((v) => (snap = v))
|
||||
expect(snap).toContain('notes')
|
||||
unsub()
|
||||
})
|
||||
|
||||
it('install is idempotent', async () => {
|
||||
const fresh = await import('./apps')
|
||||
fresh.installApp('notes')
|
||||
fresh.installApp('notes')
|
||||
let snap: string[] = []
|
||||
fresh.installedAppIds.subscribe((v) => (snap = v))
|
||||
expect(snap.filter((id) => id === 'notes')).toHaveLength(1)
|
||||
})
|
||||
|
||||
it('installing an unknown manifest id is a no-op', async () => {
|
||||
const fresh = await import('./apps')
|
||||
fresh.installApp('does-not-exist')
|
||||
let snap: string[] = []
|
||||
fresh.installedAppIds.subscribe((v) => (snap = v))
|
||||
expect(snap).not.toContain('does-not-exist')
|
||||
})
|
||||
|
||||
it('uninstall removes the app', async () => {
|
||||
const fresh = await import('./apps')
|
||||
fresh.installApp('notes')
|
||||
fresh.uninstallApp('notes')
|
||||
let snap: string[] = []
|
||||
fresh.installedAppIds.subscribe((v) => (snap = v))
|
||||
expect(snap).not.toContain('notes')
|
||||
})
|
||||
|
||||
it('uninstall is idempotent', async () => {
|
||||
const fresh = await import('./apps')
|
||||
expect(() => fresh.uninstallApp('notes')).not.toThrow()
|
||||
})
|
||||
|
||||
it('persists the installed set to localStorage', async () => {
|
||||
const fresh = await import('./apps')
|
||||
fresh.installApp('notes')
|
||||
const raw = localStorage.getItem('oikos-installed-apps')
|
||||
expect(raw).toBeTruthy()
|
||||
expect(JSON.parse(raw!)).toContain('notes')
|
||||
})
|
||||
|
||||
it('drops persisted ids that no longer resolve to a catalog entry', async () => {
|
||||
localStorage.setItem('oikos-installed-apps', JSON.stringify(['notes', 'removed-app']))
|
||||
const fresh = await import('./apps')
|
||||
let snap: string[] = []
|
||||
fresh.installedAppIds.subscribe((v) => (snap = v))
|
||||
expect(snap).toContain('notes')
|
||||
expect(snap).not.toContain('removed-app')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,21 +1,29 @@
|
||||
// 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.
|
||||
// The app registry — single source of truth for what shows up as a desktop
|
||||
// icon and what opens in its window.
|
||||
//
|
||||
// Two layers:
|
||||
// - **Built-in apps** (always installed): the static `builtinApps` array
|
||||
// below. These ship with the build and can't be removed.
|
||||
// - **Installed apps** (operator-installed from the App Store): persisted
|
||||
// manifest ids in localStorage, re-resolved against the catalog at
|
||||
// load time. `installApp`/`uninstallApp` mutate this set.
|
||||
//
|
||||
// The public surface is reactive: `apps` is a derived store (built-in +
|
||||
// installed) and `appById` is a derived Map. Consumers (Desktop.svelte,
|
||||
// DockedLayer.svelte, Taskbar.svelte, icons.ts, windows.ts) subscribe or
|
||||
// use `get()` for synchronous lookups. This is what lets an installed app
|
||||
// appear on the desktop the moment it's registered, with no reload.
|
||||
//
|
||||
// App components are loaded lazily (`component: () => Promise<{ default:
|
||||
// Component }>` — a dynamic-import loader). Desktop icons render from
|
||||
// metadata alone; the chunk fetches on first window open, and Vite
|
||||
// code-splits each app into its own chunk. See
|
||||
// docs/mbse/components.md §9 for the full contract.
|
||||
import type { Component } from 'svelte'
|
||||
import { writable, derived, get, type Readable } from 'svelte/store'
|
||||
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 Settings from '../pages/Settings.svelte'
|
||||
import { catalogById, type AppManifest, type AppPermission, type CatalogEntry } from '$lib/app-store/catalog'
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
|
||||
@@ -23,98 +31,231 @@ 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 EggIcon from '@lucide/svelte/icons/egg'
|
||||
import StoreIcon from '@lucide/svelte/icons/store'
|
||||
|
||||
export type { AppManifest, AppPermission }
|
||||
|
||||
// Two app kinds, picked by one flag:
|
||||
// - Windowed (default): renders in a wmkit floating window. Geometry
|
||||
// (width/height/min*) is required.
|
||||
// - Docked (docked: true): renders on the Docked Layer above the window
|
||||
// layer, with no window chrome and no taskbar button. Clicking its
|
||||
// desktop icon toggles visibility (see stores/docked.ts) rather than
|
||||
// opening a window. Geometry is forbidden — there is no window to size.
|
||||
// Apps receive no props from the shell; they import the OS-service surface
|
||||
// ($lib/stores/windows, $lib/stores/context, $lib/api, ...) directly. See
|
||||
// docs/mbse/components.md §9 for the stable surface contract.
|
||||
export interface AppDef {
|
||||
id: string
|
||||
title: string
|
||||
icon: Component
|
||||
component: Component
|
||||
width: number
|
||||
height: number
|
||||
// Dynamic-import loader. Invoked when an app window opens (windowed) or
|
||||
// when the Docked Layer first mounts the app (docked). Vite's module cache
|
||||
// makes the second open cheap (promise resolves from cache). The resolved
|
||||
// module is a standard Svelte module namespace — `mod.default` is the
|
||||
// component; LazyApp.svelte unwraps it.
|
||||
component: () => Promise<{ default: Component }>
|
||||
docked?: boolean
|
||||
noIcon?: boolean
|
||||
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
|
||||
// Source — 'builtin' (always installed) or 'installed' (from the App
|
||||
// Store). Used by the App Store UI to distinguish uninstallable apps from
|
||||
// built-ins.
|
||||
source: 'builtin' | 'installed'
|
||||
}
|
||||
|
||||
export const APPS: AppDef[] = [
|
||||
// Built-in apps — always installed, can't be removed. All components use
|
||||
// dynamic-import loaders so apps.ts stays out of the page module graph at
|
||||
// import time (Phase 2 code-splitting: each page is its own chunk, the
|
||||
// main bundle stays small). The mascot uses the same path — deferring its
|
||||
// module graph also breaks what would otherwise be a static cycle through
|
||||
// icons.ts back to APPS.
|
||||
export const builtinApps: AppDef[] = [
|
||||
{
|
||||
id: 'tasks',
|
||||
title: 'Tasks',
|
||||
icon: ListTodoIcon,
|
||||
component: Overview,
|
||||
component: () => import('../pages/Overview.svelte'),
|
||||
width: 960,
|
||||
height: 680,
|
||||
minWidth: 480,
|
||||
minHeight: 420
|
||||
minHeight: 420,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'kb',
|
||||
title: 'Knowledge Base',
|
||||
icon: DatabaseIcon,
|
||||
component: KnowledgeBase,
|
||||
component: () => import('../pages/KnowledgeBase.svelte'),
|
||||
width: 1000,
|
||||
height: 700,
|
||||
minWidth: 520,
|
||||
minHeight: 420
|
||||
minHeight: 420,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'ops',
|
||||
title: 'Operations',
|
||||
icon: ShieldCheckIcon,
|
||||
component: Ops,
|
||||
component: () => import('../pages/Ops.svelte'),
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => s?.approvals_pending ?? 0
|
||||
badge: (s) => s?.approvals_pending ?? 0,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'signals',
|
||||
title: 'Signals',
|
||||
icon: SirenIcon,
|
||||
component: Signals,
|
||||
component: () => import('../pages/Signals.svelte'),
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => openSignalCount(s)
|
||||
badge: (s) => openSignalCount(s),
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'knowledge',
|
||||
title: 'Knowledge',
|
||||
icon: SearchIcon,
|
||||
component: Knowledge,
|
||||
component: () => import('../pages/Knowledge.svelte'),
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
minHeight: 340,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'learning',
|
||||
title: 'Learning',
|
||||
icon: TrendingUpIcon,
|
||||
component: Learning,
|
||||
component: () => import('../pages/Learning.svelte'),
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
minHeight: 340,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
title: 'Settings',
|
||||
icon: SettingsIcon,
|
||||
component: Settings,
|
||||
component: () => import('../pages/Settings.svelte'),
|
||||
width: 640,
|
||||
height: 480,
|
||||
minWidth: 480,
|
||||
minHeight: 360
|
||||
minHeight: 360,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'app-store',
|
||||
title: 'App Store',
|
||||
icon: StoreIcon,
|
||||
component: () => import('../pages/AppStore.svelte'),
|
||||
width: 720,
|
||||
height: 560,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
source: 'builtin'
|
||||
},
|
||||
{
|
||||
id: 'mascot',
|
||||
title: 'Cluck',
|
||||
icon: EggIcon,
|
||||
component: () => import('./mascot/MascotLayer.svelte'),
|
||||
docked: true,
|
||||
source: 'builtin'
|
||||
}
|
||||
]
|
||||
|
||||
export const appById = new Map(APPS.map((a) => [a.id, a]))
|
||||
// --- Installed (operator-installed from the App Store) ---------------------
|
||||
|
||||
const INSTALLED_KEY = 'oikos-installed-apps'
|
||||
|
||||
function loadInstalled(): string[] {
|
||||
if (typeof localStorage === 'undefined') return []
|
||||
try {
|
||||
const raw = localStorage.getItem(INSTALLED_KEY)
|
||||
if (!raw) return []
|
||||
const ids = JSON.parse(raw) as string[]
|
||||
// Drop ids that no longer resolve to a catalog entry (the app was
|
||||
// removed from the catalog in a later build) so they don't linger as
|
||||
// phantom desktop icons.
|
||||
return ids.filter((id) => catalogById.has(id))
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
// Persisted as the list of catalog manifest ids the operator has installed.
|
||||
const installedIds = writable<string[]>(loadInstalled())
|
||||
|
||||
// Readable view for components (App Store UI) that need to re-render on
|
||||
// install/uninstall. Mutations go through installApp/uninstallApp.
|
||||
export const installedAppIds: Readable<string[]> = { subscribe: installedIds.subscribe }
|
||||
|
||||
function persist(ids: string[]): void {
|
||||
if (typeof localStorage === 'undefined') return
|
||||
localStorage.setItem(INSTALLED_KEY, JSON.stringify(ids))
|
||||
}
|
||||
installedIds.subscribe(persist)
|
||||
|
||||
function catalogEntryToAppDef(entry: CatalogEntry): AppDef {
|
||||
const m = entry.manifest
|
||||
return {
|
||||
id: m.id,
|
||||
title: m.title,
|
||||
icon: entry.icon,
|
||||
component: entry.load,
|
||||
docked: m.docked,
|
||||
noIcon: m.noIcon,
|
||||
width: m.width,
|
||||
height: m.height,
|
||||
minWidth: m.minWidth,
|
||||
minHeight: m.minHeight,
|
||||
source: 'installed'
|
||||
}
|
||||
}
|
||||
|
||||
// The full app set: built-ins + installed catalog apps. Reactive so an
|
||||
// install/uninstall is reflected on the desktop immediately, with no reload.
|
||||
export const apps: Readable<AppDef[]> = derived(installedIds, (ids) => {
|
||||
const installed = ids
|
||||
.map((id) => catalogById.get(id))
|
||||
.filter((e): e is CatalogEntry => !!e)
|
||||
.map(catalogEntryToAppDef)
|
||||
return [...builtinApps, ...installed]
|
||||
})
|
||||
|
||||
export const appById: Readable<Map<string, AppDef>> = derived(apps, (list) =>
|
||||
new Map(list.map((a) => [a.id, a]))
|
||||
)
|
||||
|
||||
// Install/uninstall. Idempotent — installing an already-installed app or
|
||||
// uninstalling a not-installed one is a no-op. Uninstalling a built-in is
|
||||
// refused (built-ins can't be removed).
|
||||
export function installApp(manifestId: string): void {
|
||||
if (!catalogById.has(manifestId)) return
|
||||
installedIds.update((ids) => (ids.includes(manifestId) ? ids : [...ids, manifestId]))
|
||||
}
|
||||
|
||||
export function uninstallApp(manifestId: string): void {
|
||||
installedIds.update((ids) => ids.filter((id) => id !== manifestId))
|
||||
}
|
||||
|
||||
export function isInstalled(manifestId: string): boolean {
|
||||
return get(installedIds).includes(manifestId)
|
||||
}
|
||||
|
||||
// --- Window-id helpers (unchanged from the static-registry era) -----------
|
||||
|
||||
// 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>`
|
||||
|
||||
17
web/src/lib/components/EmptyState.svelte
Normal file
17
web/src/lib/components/EmptyState.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
message = 'No items.',
|
||||
colspan = 999,
|
||||
class: className
|
||||
}: {
|
||||
message?: string
|
||||
colspan?: number
|
||||
class?: string
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<tr>
|
||||
<td {colspan} class={['py-8 text-center text-muted-foreground', className].filter(Boolean).join(' ')}>
|
||||
{message}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import type { Entity, EntityHealth } from '$lib/api'
|
||||
import { relativeTime } from '$lib/utils'
|
||||
import type { Entity } from '$lib/api'
|
||||
import * as Table from '$lib/components/ui/table'
|
||||
import { Badge } from '$lib/components/ui/badge'
|
||||
import { Skeleton } from '$lib/components/ui/skeleton'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import ArrowDownIcon from '@lucide/svelte/icons/arrow-down'
|
||||
import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down'
|
||||
import SortHeader from '$lib/components/data-table/SortHeader.svelte'
|
||||
import EmptyState from '$lib/components/EmptyState.svelte'
|
||||
import HealthDotRenderer from '$lib/components/data-table/renderers/HealthDotRenderer.svelte'
|
||||
import StatusBadgeRenderer from '$lib/components/data-table/renderers/StatusBadgeRenderer.svelte'
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
|
||||
|
||||
@@ -21,15 +21,6 @@
|
||||
loading: boolean
|
||||
selectedSlug?: string | null
|
||||
onSelect: (slug: string) => void
|
||||
// child entity slug -> parent entity slug, derived from the ontology
|
||||
// graph (arbitrary relationship types, not a fixed list — see
|
||||
// KnowledgeBase.svelte). When set, rows nest under their parent —
|
||||
// possibly several levels deep (host -> lxc -> service) — instead of
|
||||
// rendering flat. Since the parent for a given child can come from
|
||||
// whichever relationship happened to be processed last, a cycle across
|
||||
// relationship types isn't structurally impossible; `row` tracks the
|
||||
// ancestor chain and drops a child that would re-enter it, rather than
|
||||
// recursing forever.
|
||||
childToParent?: Map<string, string> | null
|
||||
} = $props()
|
||||
|
||||
@@ -55,11 +46,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
const healthRank: Record<EntityHealth, number> = { down: 0, degraded: 1, stale: 2, unknown: 3, healthy: 4 }
|
||||
function getSortState(key: SortKey) {
|
||||
if (sortKey !== key) return { sorted: false, direction: 'asc' as const }
|
||||
return { sorted: true, direction: sortDir }
|
||||
}
|
||||
|
||||
const healthRank: Record<string, number> = { down: 0, degraded: 1, stale: 2, unknown: 3, healthy: 4 }
|
||||
|
||||
function sortValue(entity: Entity, key: SortKey): string | number {
|
||||
if (key === 'health') return entity.health ? healthRank[entity.health] : -1
|
||||
return (entity[key] ?? '').toString().toLowerCase()
|
||||
if (key === 'health') return entity.health ? (healthRank[entity.health] ?? -1) : -1
|
||||
return (entity[key as keyof Entity] ?? '').toString().toLowerCase()
|
||||
}
|
||||
|
||||
const sortedEntities = $derived.by(() => {
|
||||
@@ -74,12 +70,6 @@
|
||||
return sorted
|
||||
})
|
||||
|
||||
// ─── treegrid grouping: nest entities under their parent (per
|
||||
// childToParent — host->lxc via `hosts`, lxc/vm/host->service via
|
||||
// `provides`, chained to whatever depth the relationships form). An entity
|
||||
// whose parent got filtered out of `entities` (e.g. by the type dropdown)
|
||||
// has no parent row to nest under, so it falls back to rendering top-level
|
||||
// rather than disappearing.
|
||||
const childrenByParent = $derived.by(() => {
|
||||
const map = new Map<string, Entity[]>()
|
||||
if (!childToParent) return map
|
||||
@@ -104,27 +94,6 @@
|
||||
childToParent ? sortedEntities.filter((e) => !nestedSlugs.has(e.slug)) : sortedEntities
|
||||
)
|
||||
|
||||
function stateVariant(state?: string | null): 'default' | 'secondary' | 'outline' {
|
||||
if (!state) return 'outline'
|
||||
if (state === 'active' || state === 'healthy') return 'default'
|
||||
return 'secondary'
|
||||
}
|
||||
|
||||
const healthDot: Record<EntityHealth, string> = {
|
||||
healthy: 'bg-success',
|
||||
degraded: 'bg-warning',
|
||||
down: 'bg-destructive',
|
||||
stale: 'bg-warning/50',
|
||||
unknown: 'bg-muted-foreground/40'
|
||||
}
|
||||
|
||||
function healthTitle(entity: Entity): string {
|
||||
if (!entity.health) return 'not monitored'
|
||||
if (entity.health === 'stale') return `stale — last checked ${relativeTime(entity.last_check_at)}`
|
||||
return `${entity.health} — checked ${relativeTime(entity.last_check_at)}`
|
||||
}
|
||||
|
||||
// Widths vary per row so the skeleton reads as text, not a stack of identical bars.
|
||||
const skeletonSlugWidths = ['w-24', 'w-20', 'w-28', 'w-16', 'w-24', 'w-20', 'w-28', 'w-16']
|
||||
const skeletonNameWidths = ['w-32', 'w-40', 'w-24', 'w-36', 'w-28', 'w-40', 'w-24', 'w-32']
|
||||
</script>
|
||||
@@ -160,22 +129,6 @@
|
||||
</Table.Root>
|
||||
</div>
|
||||
{:else}
|
||||
{#snippet sortHead(key: SortKey, label: string)}
|
||||
<Table.Head>
|
||||
<button type="button" class="flex items-center gap-1 hover:text-foreground" onclick={() => sortBy(key)}>
|
||||
{label}
|
||||
{#if sortKey === key}
|
||||
{#if sortDir === 'asc'}
|
||||
<ArrowUpIcon class="size-3" />
|
||||
{:else}
|
||||
<ArrowDownIcon class="size-3" />
|
||||
{/if}
|
||||
{:else}
|
||||
<ArrowUpDownIcon class="size-3 text-muted-foreground/50" />
|
||||
{/if}
|
||||
</button>
|
||||
</Table.Head>
|
||||
{/snippet}
|
||||
{#snippet row(entity: Entity, level: number, ancestors: Set<string>)}
|
||||
{@const ancestorsWithSelf = new Set(ancestors).add(entity.slug)}
|
||||
{@const children = (childrenByParent.get(entity.slug) ?? []).filter((c) => !ancestorsWithSelf.has(c.slug))}
|
||||
@@ -215,21 +168,10 @@
|
||||
<Table.Cell><Badge variant="outline">{entity.type}</Badge></Table.Cell>
|
||||
<Table.Cell>{entity.name}</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#if entity.state}
|
||||
<Badge variant={stateVariant(entity.state)}>{entity.state}</Badge>
|
||||
{:else}
|
||||
<span class="text-muted-foreground">—</span>
|
||||
{/if}
|
||||
<StatusBadgeRenderer value={entity.state ?? ''} kind="state" />
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
{#if entity.health}
|
||||
<span class="flex items-center gap-1.5 text-xs" title={healthTitle(entity)}>
|
||||
<span class="size-2 shrink-0 rounded-full {healthDot[entity.health]}"></span>
|
||||
<span class="text-muted-foreground">{relativeTime(entity.last_check_at)}</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-xs text-muted-foreground">—</span>
|
||||
{/if}
|
||||
<HealthDotRenderer row={entity} value={null} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{#if children.length > 0 && !collapsedNodes.has(entity.slug)}
|
||||
@@ -242,22 +184,33 @@
|
||||
<Table.Root role={childToParent ? 'treegrid' : undefined}>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
{@render sortHead('slug', 'Slug')}
|
||||
{@render sortHead('type', 'Type')}
|
||||
{@render sortHead('name', 'Name')}
|
||||
{@render sortHead('state', 'State')}
|
||||
{@render sortHead('health', 'Health')}
|
||||
{@const ssSlug = getSortState('slug')}
|
||||
<Table.Head>
|
||||
<SortHeader label="Slug" sorted={ssSlug.sorted} direction={ssSlug.direction} onclick={() => sortBy('slug')} />
|
||||
</Table.Head>
|
||||
{@const ssType = getSortState('type')}
|
||||
<Table.Head>
|
||||
<SortHeader label="Type" sorted={ssType.sorted} direction={ssType.direction} onclick={() => sortBy('type')} />
|
||||
</Table.Head>
|
||||
{@const ssName = getSortState('name')}
|
||||
<Table.Head>
|
||||
<SortHeader label="Name" sorted={ssName.sorted} direction={ssName.direction} onclick={() => sortBy('name')} />
|
||||
</Table.Head>
|
||||
{@const ssState = getSortState('state')}
|
||||
<Table.Head>
|
||||
<SortHeader label="State" sorted={ssState.sorted} direction={ssState.direction} onclick={() => sortBy('state')} />
|
||||
</Table.Head>
|
||||
{@const ssHealth = getSortState('health')}
|
||||
<Table.Head>
|
||||
<SortHeader label="Health" sorted={ssHealth.sorted} direction={ssHealth.direction} onclick={() => sortBy('health')} />
|
||||
</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each topLevelEntities as entity (entity.id)}
|
||||
{@render row(entity, 1, new Set())}
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={5} class="text-center text-muted-foreground"
|
||||
>No entities in this layer match the filter.</Table.Cell
|
||||
>
|
||||
</Table.Row>
|
||||
<EmptyState message="No entities in this layer match the filter." colspan={5} />
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
|
||||
34
web/src/lib/components/FilterTabs.svelte
Normal file
34
web/src/lib/components/FilterTabs.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import * as Tabs from '$lib/components/ui/tabs'
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
tabs,
|
||||
class: className,
|
||||
children
|
||||
}: {
|
||||
value?: string
|
||||
tabs: { value: string; label: string; count?: number; variant?: 'destructive' | 'default' | 'secondary' | 'outline' }[]
|
||||
class?: string
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
children?: any
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<Tabs.Root bind:value class={['flex flex-1 flex-col overflow-hidden', className].filter(Boolean).join(' ')}>
|
||||
<Tabs.List>
|
||||
{#each tabs as tab}
|
||||
<Tabs.Trigger value={tab.value}>
|
||||
{tab.label}
|
||||
{#if tab.count != null && tab.count > 0}
|
||||
<slot name="badge-{tab.value}">
|
||||
<!-- slot for custom badge rendering -->
|
||||
</slot>
|
||||
{/if}
|
||||
</Tabs.Trigger>
|
||||
{/each}
|
||||
</Tabs.List>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</Tabs.Root>
|
||||
47
web/src/lib/components/StatusBadge.svelte
Normal file
47
web/src/lib/components/StatusBadge.svelte
Normal file
@@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { Badge } from '$lib/components/ui/badge'
|
||||
|
||||
type StatusKind = 'risk' | 'severity' | 'execution' | 'type' | 'default'
|
||||
|
||||
let {
|
||||
value,
|
||||
kind = 'default',
|
||||
class: className
|
||||
}: {
|
||||
value: string
|
||||
kind?: StatusKind
|
||||
class?: string
|
||||
} = $props()
|
||||
|
||||
const variantMap: Record<StatusKind, Record<string, 'default' | 'secondary' | 'destructive' | 'outline'>> = {
|
||||
risk: {
|
||||
destructive: 'destructive',
|
||||
config_mutation: 'secondary',
|
||||
},
|
||||
severity: {
|
||||
critical: 'destructive',
|
||||
warning: 'secondary',
|
||||
info: 'default',
|
||||
},
|
||||
execution: {
|
||||
failed: 'destructive',
|
||||
denied: 'destructive',
|
||||
revoked: 'destructive',
|
||||
cancelled: 'destructive',
|
||||
completed: 'default',
|
||||
running: 'secondary',
|
||||
approved: 'secondary',
|
||||
},
|
||||
type: {
|
||||
runbook: 'secondary',
|
||||
investigation: 'default',
|
||||
},
|
||||
default: {},
|
||||
}
|
||||
|
||||
function variant(): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
return variantMap[kind]?.[value] ?? (kind === 'default' ? 'default' : 'outline')
|
||||
}
|
||||
</script>
|
||||
|
||||
<Badge variant={variant()} class={className}>{value}</Badge>
|
||||
218
web/src/lib/components/data-table/DataTable.svelte
Normal file
218
web/src/lib/components/data-table/DataTable.svelte
Normal file
@@ -0,0 +1,218 @@
|
||||
<script lang="ts">
|
||||
import { TableHandler } from '@vincjo/datatables'
|
||||
import { Skeleton } from '$lib/components/ui/skeleton'
|
||||
import SortHeader from './SortHeader.svelte'
|
||||
import Toolbar from './Toolbar.svelte'
|
||||
import Pagination from './pagination/Pagination.svelte'
|
||||
import EmptyState from '$lib/components/EmptyState.svelte'
|
||||
import BadgeRenderer from './renderers/BadgeRenderer.svelte'
|
||||
import HealthDotRenderer from './renderers/HealthDotRenderer.svelte'
|
||||
import RelativeTimeRenderer from './renderers/RelativeTimeRenderer.svelte'
|
||||
import DateRenderer from './renderers/DateRenderer.svelte'
|
||||
import StatusBadgeRenderer from './renderers/StatusBadgeRenderer.svelte'
|
||||
import { resolveCellValue } from './columns'
|
||||
import type { DataTableColumn, BuiltinRenderer } from './types'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type Row = Record<string, any>
|
||||
|
||||
const renderers: Record<string, unknown> = {
|
||||
'badge': BadgeRenderer,
|
||||
'health-dot': HealthDotRenderer,
|
||||
'relative-time': RelativeTimeRenderer,
|
||||
'date': DateRenderer,
|
||||
'status-badge': StatusBadgeRenderer,
|
||||
}
|
||||
|
||||
let {
|
||||
columns,
|
||||
data = [],
|
||||
pageSize = 20,
|
||||
paginated = false,
|
||||
searchable = false,
|
||||
bordered = true,
|
||||
loading = false,
|
||||
emptyMessage = 'No items.',
|
||||
selected = $bindable(null),
|
||||
onRowClick = undefined,
|
||||
class: className,
|
||||
children
|
||||
}: {
|
||||
columns: DataTableColumn<Row>[]
|
||||
data: Row[]
|
||||
pageSize?: number
|
||||
paginated?: boolean
|
||||
searchable?: boolean
|
||||
bordered?: boolean
|
||||
loading?: boolean
|
||||
emptyMessage?: string
|
||||
selected?: string | null
|
||||
onRowClick?: (row: Row) => void
|
||||
class?: string
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
children?: any
|
||||
} = $props()
|
||||
|
||||
const table = new TableHandler([], { pageSize: 20 })
|
||||
|
||||
// One SortBuilder per sortable column — each tracks its own direction/isActive
|
||||
// via $derived runes internally.
|
||||
const sortBuilders = new Map<string, ReturnType<typeof table.createSort>>()
|
||||
|
||||
function getSortBuilder(key: string) {
|
||||
if (!sortBuilders.has(key)) {
|
||||
sortBuilders.set(key, table.createSort(key))
|
||||
}
|
||||
return sortBuilders.get(key)!
|
||||
}
|
||||
|
||||
let search = $state.raw(
|
||||
table.createSearch({
|
||||
filterFunction: (row: Row, q: string) => {
|
||||
if (!q) return true
|
||||
const lower = q.toLowerCase()
|
||||
for (const col of columns) {
|
||||
if (col.hidden) continue
|
||||
const val = String(resolveCellValue(row, col) ?? '').toLowerCase()
|
||||
if (val.includes(lower)) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
$effect(() => {
|
||||
table.setRowsPerPage(pageSize)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
table.setRows(data)
|
||||
})
|
||||
|
||||
function handleSearch(q: string) {
|
||||
search.set(q)
|
||||
if (paginated) table.setPage(1)
|
||||
}
|
||||
|
||||
function colAlignClass(col: DataTableColumn<Row>): string {
|
||||
if (col.align === 'right') return 'text-right'
|
||||
if (col.align === 'center') return 'text-center'
|
||||
return ''
|
||||
}
|
||||
|
||||
function colTruncateClass(col: DataTableColumn<Row>): string {
|
||||
return col.truncate ? 'min-w-0 overflow-hidden text-ellipsis' : ''
|
||||
}
|
||||
|
||||
function colStyle(col: DataTableColumn<Row>): string | undefined {
|
||||
if (!col.width) return undefined
|
||||
const w = typeof col.width === 'number' ? col.width + 'px' : col.width
|
||||
return `width: ${w}; min-width: ${w}`
|
||||
}
|
||||
|
||||
const visibleCols = $derived(columns.filter((c) => !c.hidden))
|
||||
const rows = $derived(table.rows as Row[])
|
||||
|
||||
const skeletonWidths = ['w-24', 'w-20', 'w-28', 'w-16', 'w-24', 'w-20', 'w-28', 'w-16']
|
||||
</script>
|
||||
|
||||
<div class={['flex flex-col h-full min-h-0', className].filter(Boolean).join(' ')}>
|
||||
<Toolbar {table} {searchable} {paginated} onSearchChange={handleSearch}>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</Toolbar>
|
||||
|
||||
<div class={['min-h-0 flex-1 overflow-auto relative', bordered ? 'rounded-xl border' : ''].filter(Boolean).join(' ')}>
|
||||
<table class="w-full caption-bottom text-sm table-fixed">
|
||||
<thead class="[&_tr]:border-b">
|
||||
<tr>
|
||||
{#each visibleCols as col (col.key)}
|
||||
<th
|
||||
class={[
|
||||
'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap',
|
||||
'sticky top-0 z-10 bg-card/95 backdrop-blur',
|
||||
col.headerClass,
|
||||
colAlignClass(col)
|
||||
].filter(Boolean).join(' ')}
|
||||
style={colStyle(col)}
|
||||
>
|
||||
{#if col.sortable !== false}
|
||||
{@const sb = getSortBuilder(col.key)}
|
||||
<SortHeader
|
||||
label={col.header}
|
||||
sorted={sb.isActive}
|
||||
direction={sb.direction ?? 'asc'}
|
||||
onclick={() => sb.set()}
|
||||
/>
|
||||
{:else}
|
||||
{col.header}
|
||||
{/if}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="[&_tr:last-child]:border-0">
|
||||
{#if loading}
|
||||
{#each skeletonWidths as w, i}
|
||||
<tr class="border-b transition-colors hover:bg-transparent">
|
||||
{#each visibleCols as col (col.key)}
|
||||
<td class={[col.class, colAlignClass(col), colTruncateClass(col)].filter(Boolean).join(' ')} style={colStyle(col)}>
|
||||
<Skeleton class="h-4 {skeletonWidths[(i + visibleCols.indexOf(col)) % skeletonWidths.length]}" />
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{:else if rows.length === 0}
|
||||
<EmptyState message={emptyMessage} colspan={visibleCols.length} />
|
||||
{:else}
|
||||
{#each rows as row, idx (row.id ?? row.slug ?? `row-${idx}`)}
|
||||
<tr
|
||||
class={[
|
||||
'border-b transition-colors hover:bg-muted/50',
|
||||
onRowClick ? 'cursor-pointer' : '',
|
||||
selected === (row.id ?? row.slug) ? 'bg-muted' : ''
|
||||
].filter(Boolean).join(' ')}
|
||||
tabindex={onRowClick ? 0 : undefined}
|
||||
onclick={onRowClick ? () => onRowClick(row) : undefined}
|
||||
onkeydown={onRowClick
|
||||
? (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onRowClick(row) } }
|
||||
: undefined}
|
||||
>
|
||||
{#each visibleCols as col (col.key)}
|
||||
{@const val = resolveCellValue(row, col)}
|
||||
<td
|
||||
class={[
|
||||
'p-2 align-middle whitespace-nowrap',
|
||||
col.class,
|
||||
colAlignClass(col),
|
||||
colTruncateClass(col)
|
||||
].filter(Boolean).join(' ')}
|
||||
style={colStyle(col)}
|
||||
>
|
||||
{#if typeof col.render === 'string'}
|
||||
{@const R = renderers[col.render]}
|
||||
{#if R}
|
||||
<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
|
||||
<R value={val} {row} {...(col.renderProps ?? {})} />
|
||||
{:else}
|
||||
{String(val ?? '—')}
|
||||
{/if}
|
||||
{:else if typeof col.render === 'function'}
|
||||
<col.render {row} value={val} {...(col.renderProps ?? {})} />
|
||||
{:else}
|
||||
{String(val ?? '—')}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if paginated}
|
||||
<Pagination {table} />
|
||||
{/if}
|
||||
</div>
|
||||
55
web/src/lib/components/data-table/SearchInput.svelte
Normal file
55
web/src/lib/components/data-table/SearchInput.svelte
Normal file
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import { Input } from '$lib/components/ui/input'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import { debounce } from '$lib/utils'
|
||||
|
||||
let {
|
||||
value = '',
|
||||
placeholder = 'Search...',
|
||||
class: className,
|
||||
onSearch
|
||||
}: {
|
||||
value?: string
|
||||
placeholder?: string
|
||||
class?: string
|
||||
onSearch?: (q: string) => void
|
||||
} = $props()
|
||||
|
||||
let inputVal = $state('')
|
||||
|
||||
const debouncedSearch = debounce((q: string) => {
|
||||
onSearch?.(q)
|
||||
}, 200)
|
||||
|
||||
function handleInput(e: Event) {
|
||||
const target = e.target as HTMLInputElement
|
||||
inputVal = target.value
|
||||
debouncedSearch(inputVal)
|
||||
}
|
||||
|
||||
function clear() {
|
||||
inputVal = ''
|
||||
onSearch?.('')
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class={['relative', className].filter(Boolean).join(' ')}>
|
||||
<SearchIcon class="absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
{placeholder}
|
||||
value={inputVal}
|
||||
oninput={handleInput}
|
||||
class="h-8 pl-8 pr-8 text-xs"
|
||||
/>
|
||||
{#if inputVal}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onclick={clear}
|
||||
>
|
||||
<XIcon class="size-3" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
30
web/src/lib/components/data-table/SortHeader.svelte
Normal file
30
web/src/lib/components/data-table/SortHeader.svelte
Normal file
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import ArrowDownIcon from '@lucide/svelte/icons/arrow-down'
|
||||
import ArrowUpDownIcon from '@lucide/svelte/icons/arrow-up-down'
|
||||
|
||||
let {
|
||||
label,
|
||||
sorted = false,
|
||||
direction = 'asc',
|
||||
onclick
|
||||
}: {
|
||||
label: string
|
||||
sorted?: boolean
|
||||
direction?: 'asc' | 'desc'
|
||||
onclick?: () => void
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<button type="button" class="flex items-center gap-1 hover:text-foreground" {onclick}>
|
||||
{label}
|
||||
{#if sorted}
|
||||
{#if direction === 'asc'}
|
||||
<ArrowUpIcon class="size-3" />
|
||||
{:else}
|
||||
<ArrowDownIcon class="size-3" />
|
||||
{/if}
|
||||
{:else}
|
||||
<ArrowUpDownIcon class="size-3 text-muted-foreground/50" />
|
||||
{/if}
|
||||
</button>
|
||||
33
web/src/lib/components/data-table/Toolbar.svelte
Normal file
33
web/src/lib/components/data-table/Toolbar.svelte
Normal file
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import SearchInput from './SearchInput.svelte'
|
||||
import RowsPerPage from './pagination/RowsPerPage.svelte'
|
||||
import type { TableHandler } from '@vincjo/datatables'
|
||||
|
||||
let {
|
||||
table,
|
||||
searchable = false,
|
||||
paginated = false,
|
||||
onSearchChange,
|
||||
children
|
||||
}: {
|
||||
table: TableHandler<Record<string, unknown>>
|
||||
searchable?: boolean
|
||||
paginated?: boolean
|
||||
onSearchChange?: (q: string) => void
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
children?: any
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
{#if searchable || paginated || children}
|
||||
<div class="flex items-center gap-2 px-1 py-2">
|
||||
{#if searchable}
|
||||
<SearchInput placeholder="Search..." onSearch={onSearchChange} class="w-64" />
|
||||
{/if}
|
||||
<div class="flex-1"></div>
|
||||
{@render children?.()}
|
||||
{#if paginated}
|
||||
<RowsPerPage {table} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
9
web/src/lib/components/data-table/columns.ts
Normal file
9
web/src/lib/components/data-table/columns.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import type { DataTableColumn } from './types'
|
||||
|
||||
export function resolveCellValue<T>(row: T, col: DataTableColumn<T>): unknown {
|
||||
if (col.accessor) return col.accessor(row)
|
||||
if (col.key in (row as Record<string, unknown>)) {
|
||||
return (row as Record<string, unknown>)[col.key]
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import type { ButtonSize } from '$lib/components/ui/button'
|
||||
|
||||
let {
|
||||
page,
|
||||
active,
|
||||
disabled = false,
|
||||
size = 'xs' as ButtonSize,
|
||||
onclick
|
||||
}: {
|
||||
page: number | string
|
||||
active?: boolean
|
||||
disabled?: boolean
|
||||
size?: ButtonSize
|
||||
onclick?: () => void
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<Button {size} variant={active ? 'default' : 'outline'} {disabled} {onclick}>
|
||||
{String(page)}
|
||||
</Button>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script lang="ts">
|
||||
import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left'
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
|
||||
import PageButton from './PageButton.svelte'
|
||||
import type { TableHandler } from '@vincjo/datatables'
|
||||
|
||||
let { table }: { table: TableHandler<Record<string, unknown>> } = $props()
|
||||
|
||||
const pages = $derived(table.pagesWithEllipsis as (number | '...')[])
|
||||
const currentPage = $derived(table.currentPage)
|
||||
const pageCount = $derived(table.pageCount)
|
||||
const rowCount = $derived(table.rowCount)
|
||||
</script>
|
||||
|
||||
{#if pageCount > 1}
|
||||
<div class="flex items-center justify-between gap-2 px-2 py-1.5">
|
||||
<span class="text-xs text-muted-foreground">{rowCount} rows</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<PageButton
|
||||
page={ChevronLeftIcon}
|
||||
disabled={currentPage === 1}
|
||||
onclick={() => table.setPage('previous')}
|
||||
/>
|
||||
{#each pages as page}
|
||||
{#if page === '...'}
|
||||
<span class="px-1 text-xs text-muted-foreground">…</span>
|
||||
{:else}
|
||||
<PageButton
|
||||
{page}
|
||||
active={page === currentPage}
|
||||
onclick={() => table.setPage(page as number)}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
<PageButton
|
||||
page={ChevronRightIcon}
|
||||
disabled={currentPage === pageCount}
|
||||
onclick={() => table.setPage('next')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import * as Select from '$lib/components/ui/select'
|
||||
import type { TableHandler } from '@vincjo/datatables'
|
||||
|
||||
let { table, class: className }: { table: TableHandler<Record<string, unknown>>; class?: string } = $props()
|
||||
|
||||
const options = [10, 20, 50, 100]
|
||||
let value = $state('20')
|
||||
|
||||
function handleChange(newValue: string | undefined) {
|
||||
if (!newValue) return
|
||||
value = newValue
|
||||
table.setRowsPerPage(parseInt(newValue))
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select.Root type="single" {value} onValueChange={handleChange}>
|
||||
<Select.Trigger size="sm" class={className}>
|
||||
{value}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each options as n}
|
||||
<Select.Item value={String(n)}>{n} / page</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import type { ActivityItem } from '$lib/api'
|
||||
|
||||
let { row }: { row: ActivityItem } = $props()
|
||||
|
||||
function fmtDuration(ms: number | null): string {
|
||||
if (ms == null) return '—'
|
||||
if (ms < 1000) return `${ms}ms`
|
||||
const s = Math.round(ms / 1000)
|
||||
if (s < 60) return `${s}s`
|
||||
return `${Math.floor(s / 60)}m ${s % 60}s`
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div>{row.verb}</div>
|
||||
{#if row.summary}
|
||||
<div class="text-xs text-muted-foreground">{row.summary}</div>
|
||||
{/if}
|
||||
{#if row.error}
|
||||
<div class="text-xs text-destructive">{row.error}</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import type { ActivityItem } from '$lib/api'
|
||||
|
||||
let {
|
||||
row,
|
||||
onCancel
|
||||
}: {
|
||||
row: ActivityItem
|
||||
onCancel?: (id: string) => void
|
||||
} = $props()
|
||||
|
||||
function showCancel(status: string): boolean {
|
||||
return ['pending_approval', 'approved', 'running'].includes(status)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex justify-end">
|
||||
{#if showCancel(row.status)}
|
||||
<Button size="sm" variant="outline" onclick={() => onCancel?.(row.id)}>Cancel</Button>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import type { Approval } from '$lib/api'
|
||||
|
||||
let {
|
||||
row,
|
||||
deciding = null,
|
||||
onApprove,
|
||||
onDeny
|
||||
}: {
|
||||
row: Approval
|
||||
deciding?: string | null
|
||||
onApprove?: (id: string) => void
|
||||
onDeny?: (id: string) => void
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button size="sm" disabled={deciding === row.id} onclick={() => onApprove?.(row.id)}>Approve</Button>
|
||||
<Button size="sm" variant="destructive" disabled={deciding === row.id} onclick={() => onDeny?.(row.id)}>Deny</Button>
|
||||
</div>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Badge, type BadgeVariant } from '$lib/components/ui/badge'
|
||||
|
||||
let { value, variant = 'outline' as BadgeVariant }: { value: unknown; variant?: BadgeVariant } = $props()
|
||||
</script>
|
||||
|
||||
<Badge {variant}>{String(value ?? '—')}</Badge>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
let { value }: { value: unknown } = $props()
|
||||
|
||||
function format(val: unknown): string {
|
||||
if (!val) return '—'
|
||||
try {
|
||||
return new Date(String(val)).toLocaleString()
|
||||
} catch {
|
||||
return String(val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class="text-xs text-muted-foreground">{format(value)}</span>
|
||||
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
import type { ActivityItem } from '$lib/api'
|
||||
|
||||
let { value }: { value: unknown } = $props()
|
||||
|
||||
function fmtDuration(ms: number | null): string {
|
||||
if (ms == null) return '—'
|
||||
if (ms < 1000) return `${ms}ms`
|
||||
const s = Math.round(ms / 1000)
|
||||
if (s < 60) return `${s}s`
|
||||
return `${Math.floor(s / 60)}m ${s % 60}s`
|
||||
}
|
||||
</script>
|
||||
|
||||
<span class="text-xs text-muted-foreground">{fmtDuration(value as number | null)}</span>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import { relativeTime } from '$lib/utils'
|
||||
import type { Entity } from '$lib/api'
|
||||
|
||||
let { row, value }: { row: Entity; value: unknown } = $props()
|
||||
|
||||
const dot: Record<string, string> = {
|
||||
healthy: 'bg-success',
|
||||
degraded: 'bg-warning',
|
||||
down: 'bg-destructive',
|
||||
stale: 'bg-warning/50',
|
||||
unknown: 'bg-muted-foreground/40'
|
||||
}
|
||||
|
||||
const health = $derived(row.health)
|
||||
const lastCheck = $derived(row.last_check_at)
|
||||
|
||||
const title = $derived.by(() => {
|
||||
if (!row.health) return 'not monitored'
|
||||
if (row.health === 'stale') return `stale — last checked ${relativeTime(row.last_check_at)}`
|
||||
return `${row.health} — checked ${relativeTime(row.last_check_at)}`
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if health}
|
||||
<span class="flex items-center gap-1.5 text-xs" title={title}>
|
||||
<span class="size-2 shrink-0 rounded-full {dot[row.health ?? ''] ?? ''}"></span>
|
||||
<span class="text-muted-foreground">{relativeTime(lastCheck)}</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-xs text-muted-foreground">—</span>
|
||||
{/if}
|
||||
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { relativeTime } from '$lib/utils'
|
||||
|
||||
let { value }: { value: unknown } = $props()
|
||||
</script>
|
||||
|
||||
<span class="text-xs text-muted-foreground">{relativeTime(String(value ?? ''))}</span>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import type { Signal } from '$lib/api'
|
||||
|
||||
let {
|
||||
row,
|
||||
acting = null,
|
||||
onAck,
|
||||
onMute,
|
||||
onResolve
|
||||
}: {
|
||||
row: Signal
|
||||
acting?: string | null
|
||||
onAck?: (id: string) => void
|
||||
onMute?: (id: string) => void
|
||||
onResolve?: (id: string) => void
|
||||
} = $props()
|
||||
</script>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
{#if row.state === 'raised'}
|
||||
<Button size="sm" variant="outline" disabled={acting === row.id} onclick={() => onAck?.(row.id)}>Ack</Button>
|
||||
{/if}
|
||||
<Button size="sm" variant="outline" disabled={acting === row.id} onclick={() => onMute?.(row.id)}>Mute 1h</Button>
|
||||
<Button size="sm" disabled={acting === row.id} onclick={() => onResolve?.(row.id)}>Resolve</Button>
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { Badge } from '$lib/components/ui/badge'
|
||||
|
||||
let { value, kind = 'default' }: { value: unknown; kind?: 'risk' | 'severity' | 'execution' | 'state' | 'type' | 'default' } = $props()
|
||||
|
||||
const v = $derived(String(value ?? ''))
|
||||
|
||||
const variantMap: Record<string, Record<string, 'default' | 'secondary' | 'destructive' | 'outline'>> = {
|
||||
risk: {
|
||||
destructive: 'destructive',
|
||||
config_mutation: 'secondary',
|
||||
default: 'default',
|
||||
},
|
||||
severity: {
|
||||
critical: 'destructive',
|
||||
warning: 'secondary',
|
||||
info: 'default',
|
||||
default: 'default',
|
||||
},
|
||||
execution: {
|
||||
failed: 'destructive',
|
||||
denied: 'destructive',
|
||||
revoked: 'destructive',
|
||||
cancelled: 'destructive',
|
||||
completed: 'default',
|
||||
running: 'secondary',
|
||||
approved: 'secondary',
|
||||
default: 'outline',
|
||||
},
|
||||
state: {
|
||||
active: 'default',
|
||||
healthy: 'default',
|
||||
default: 'outline',
|
||||
},
|
||||
type: {
|
||||
runbook: 'secondary',
|
||||
investigation: 'default',
|
||||
default: 'outline',
|
||||
},
|
||||
default: { default: 'default' },
|
||||
}
|
||||
|
||||
const variant = $derived.by(() => {
|
||||
const map = variantMap[kind] ?? variantMap.default
|
||||
return (map[v] ?? map.default) as 'default' | 'secondary' | 'destructive' | 'outline'
|
||||
})
|
||||
</script>
|
||||
|
||||
<Badge {variant}>{v}</Badge>
|
||||
@@ -0,0 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { statusStyle } from '$lib/tasks'
|
||||
import type { Session } from '$lib/api'
|
||||
|
||||
let { row }: { row: Session } = $props()
|
||||
|
||||
const st = $derived(statusStyle(row))
|
||||
</script>
|
||||
|
||||
<span class="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
|
||||
<span class="size-2 rounded-full {st.dot} {st.pulse ? 'animate-pulse' : ''}"></span>
|
||||
{st.label}
|
||||
</span>
|
||||
36
web/src/lib/components/data-table/types.ts
Normal file
36
web/src/lib/components/data-table/types.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { ComponentType, SvelteComponent } from 'svelte'
|
||||
|
||||
export type BuiltinRenderer = 'badge' | 'health-dot' | 'relative-time' | 'date' | 'status-badge'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
type CellComponent = ComponentType<SvelteComponent<{ row: any; value: unknown }>>
|
||||
|
||||
export interface DataTableColumn<T> {
|
||||
key: string
|
||||
header: string
|
||||
sortable?: boolean
|
||||
width?: string | number
|
||||
align?: 'left' | 'right' | 'center'
|
||||
truncate?: boolean
|
||||
class?: string
|
||||
headerClass?: string
|
||||
render?: BuiltinRenderer | CellComponent
|
||||
renderProps?: Record<string, unknown>
|
||||
accessor?: (row: T) => unknown
|
||||
hidden?: boolean
|
||||
}
|
||||
|
||||
export interface DataTableProps<T> {
|
||||
columns: DataTableColumn<T>[]
|
||||
data: T[]
|
||||
pageSize?: number
|
||||
paginated?: boolean
|
||||
searchable?: boolean
|
||||
loading?: boolean
|
||||
emptyMessage?: string
|
||||
selected?: string[]
|
||||
onRowClick?: (row: T) => void
|
||||
class?: string
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
children?: any
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
// 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 { 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'
|
||||
@@ -13,8 +13,8 @@
|
||||
import DesktopIcon from './DesktopIcon.svelte'
|
||||
import TaskLauncher from './TaskLauncher.svelte'
|
||||
import WindowLayer from './WindowLayer.svelte'
|
||||
import DockedLayer from './DockedLayer.svelte'
|
||||
import Taskbar from './Taskbar.svelte'
|
||||
import MascotLayer from '$lib/mascot/MascotLayer.svelte'
|
||||
import LayersIcon from '@lucide/svelte/icons/layers'
|
||||
import Rows3Icon from '@lucide/svelte/icons/rows-3'
|
||||
import MonitorIcon from '@lucide/svelte/icons/monitor'
|
||||
@@ -87,7 +87,7 @@
|
||||
<GraphBackground />
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-0">
|
||||
{#each APPS as app (app.id)}
|
||||
{#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)} />
|
||||
@@ -102,7 +102,7 @@
|
||||
|
||||
<WindowLayer />
|
||||
|
||||
<MascotLayer />
|
||||
<DockedLayer />
|
||||
</div>
|
||||
|
||||
<Taskbar />
|
||||
|
||||
24
web/src/lib/components/desktop-shell/DockedLayer.svelte
Normal file
24
web/src/lib/components/desktop-shell/DockedLayer.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
// The docked-app layer: renders apps flagged `docked: true` on a
|
||||
// pointer-events-none absolute inset-0 overlay above WindowLayer's z-40,
|
||||
// below the desktop context menu's z-50. Docked apps have no wmkit window,
|
||||
// no titlebar, and no taskbar button; their visibility is toggled by
|
||||
// clicking their desktop icon (see stores/docked.ts). Replaces the
|
||||
// previously-hardcoded <MascotLayer /> in Desktop.svelte — the mascot is
|
||||
// now the first docked app, not a shell special case. Rendered as a sibling
|
||||
// inside the surface div so docked apps share the surface's coordinate
|
||||
// space (the mascot's ground-line computation depends on this).
|
||||
import { apps } from '$lib/apps'
|
||||
import { dockedVisibility } from '$lib/stores/docked'
|
||||
import LazyApp from '$lib/components/desktop-shell/LazyApp.svelte'
|
||||
|
||||
const dockedApps = $derived($apps.filter((a) => a.docked))
|
||||
</script>
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-45">
|
||||
{#each dockedApps as app (app.id)}
|
||||
{#if $dockedVisibility[app.id] ?? true}
|
||||
<LazyApp load={app.component} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
35
web/src/lib/components/desktop-shell/LazyApp.svelte
Normal file
35
web/src/lib/components/desktop-shell/LazyApp.svelte
Normal file
@@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
// Renders an App's lazily-loaded component (AppDef.component is a
|
||||
// dynamic-import loader, not the component itself). Shows the shared
|
||||
// spinner while the chunk fetches; Vite's module cache makes repeat
|
||||
// opens resolve from cache on the next microtask, so the spinner is
|
||||
// one-tick at most after first load. Used by both WindowLayer
|
||||
// (windowed apps) and DockedLayer (docked apps) so the loading state
|
||||
// is uniform across app kinds.
|
||||
import type { Component } from 'svelte'
|
||||
import { untrack } from 'svelte'
|
||||
import Spinner from '../Spinner.svelte'
|
||||
|
||||
let { load }: { load: () => Promise<{ default: Component }> } = $props()
|
||||
|
||||
// Created once per mount, not per render. `load` is the app's stable
|
||||
// registry loader (app.component — defined once in the APPS array, never
|
||||
// reassigned), so reading it at init is correct; untrack tells Svelte the
|
||||
// one-shot read is intentional and silences the state_referenced_locally
|
||||
// lint. Without pinning, {#await} would re-subscribe to a fresh Promise on
|
||||
// every reactive re-evaluation of load() and loop.
|
||||
const promise = untrack(() => load())
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
<div class="flex h-full min-h-0 items-center justify-center text-muted-foreground">
|
||||
<Spinner class="size-5" />
|
||||
</div>
|
||||
{:then mod}
|
||||
{@const C = mod.default}
|
||||
<C />
|
||||
{:catch error}
|
||||
<div class="flex h-full min-h-0 items-center justify-center p-4 text-center text-sm text-destructive">
|
||||
Failed to load app: {(error as Error).message}
|
||||
</div>
|
||||
{/await}
|
||||
@@ -30,14 +30,14 @@
|
||||
|
||||
function iconFor(id: string) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId) return appById.get(appId)?.icon
|
||||
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
|
||||
const app = appId ? $appById.get(appId) : undefined
|
||||
return app?.badge?.($summary) ?? 0
|
||||
}
|
||||
|
||||
|
||||
@@ -14,18 +14,22 @@
|
||||
import EntityDetailContent from '../EntityDetailContent.svelte'
|
||||
import SessionChatWindow from '../SessionChatWindow.svelte'
|
||||
import NewTaskChat from './NewTaskChat.svelte'
|
||||
import LazyApp from '$lib/components/desktop-shell/LazyApp.svelte'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import MinusIcon from '@lucide/svelte/icons/minus'
|
||||
import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
|
||||
|
||||
// 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.
|
||||
// entry (the app was uninstalled/removed since the layout was persisted)
|
||||
// has nothing to render — close it rather than leaving a permanently-blank
|
||||
// window stuck in the taskbar. Reactive on `appById` so reinstalling an
|
||||
// app revives its persisted window on the next tick rather than requiring
|
||||
// a reload, and uninstalling closes its orphan window immediately.
|
||||
$effect(() => {
|
||||
const idx = $appById
|
||||
for (const id of $wmState.order) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId && !appById.has(appId)) wm.close(id)
|
||||
if (appId && !idx.has(appId)) wm.close(id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -34,7 +38,7 @@
|
||||
{#each $wmState.order as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{@const appId = appIdFromWindowId(id)}
|
||||
{@const app = appId ? appById.get(appId) : undefined}
|
||||
{@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">
|
||||
@@ -73,7 +77,7 @@
|
||||
{:else if id === NEW_TASK_WINDOW_ID}
|
||||
<NewTaskChat />
|
||||
{:else if app}
|
||||
<app.component />
|
||||
<LazyApp load={app.component} />
|
||||
{:else}
|
||||
<EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
|
||||
{/if}
|
||||
|
||||
@@ -32,7 +32,6 @@
|
||||
} from '$lib/mascot/state.svelte'
|
||||
import { wmState } from '$lib/stores/windows'
|
||||
import { getIconPositions, iconPixelPos, GRID } from '$lib/stores/icons'
|
||||
import { APPS, type AppDef } from '$lib/apps'
|
||||
|
||||
// MascotRuntime is created fresh per mount; the long-lived MascotModel
|
||||
// (with lastPos, stage, name, ...) persists across mounts via localStorage.
|
||||
@@ -217,13 +216,13 @@
|
||||
}
|
||||
const ICON_INVESTIGATE_FALLBACK = '👀 Ooh!'
|
||||
|
||||
/** Which desktop-icon app (if any) the given surface coords land on, using the same grid DesktopIcon.svelte renders with. */
|
||||
function iconAt(x: number, y: number): AppDef | null {
|
||||
/** Which desktop-icon app (if any) the given surface coords land on, using the same grid DesktopIcon.svelte renders with. Returns the app id (the key the investigate-bubble map is indexed by) — iterating the icon-positions store rather than the APPS registry avoids a static import cycle (apps.ts -> MascotLayer -> here -> apps.ts), see docked visibility store wiring. */
|
||||
function iconAt(x: number, y: number): string | null {
|
||||
const positions = getIconPositions()
|
||||
for (const app of APPS) {
|
||||
const pos = positions[app.id] ?? { col: 0, row: 0 }
|
||||
for (const id of Object.keys(positions)) {
|
||||
const pos = positions[id] ?? { col: 0, row: 0 }
|
||||
const { x: ix, y: iy } = iconPixelPos(pos)
|
||||
if (x >= ix && x <= ix + GRID.cell && y >= iy && y <= iy + GRID.cell) return app
|
||||
if (x >= ix && x <= ix + GRID.cell && y >= iy && y <= iy + GRID.cell) return id
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
62
web/src/lib/stores/docked.test.ts
Normal file
62
web/src/lib/stores/docked.test.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
|
||||
// docked.ts no longer imports $lib/apps (defaults are implicit: absent key
|
||||
// = visible), so no mock is needed. Each test re-imports the module fresh
|
||||
// (after clearing localStorage) so the module-scoped store starts from the
|
||||
// cleared state every time — without this, the store's state leaks between
|
||||
// tests since it's cached with the module instance.
|
||||
import type * as Docked from './docked'
|
||||
|
||||
let mod: typeof Docked
|
||||
|
||||
beforeEach(async () => {
|
||||
localStorage.clear()
|
||||
vi.resetModules()
|
||||
mod = await import('./docked')
|
||||
})
|
||||
|
||||
describe('docked visibility store', () => {
|
||||
it('defaults docked apps to visible', () => {
|
||||
expect(mod.isDockedVisible('mascot')).toBe(true)
|
||||
expect(mod.isDockedVisible('other-docked')).toBe(true)
|
||||
})
|
||||
|
||||
it('treats unknown ids as visible (absent key = visible)', () => {
|
||||
expect(mod.isDockedVisible('nope')).toBe(true)
|
||||
})
|
||||
|
||||
it('toggle flips visibility', () => {
|
||||
mod.toggleDocked('mascot')
|
||||
expect(mod.isDockedVisible('mascot')).toBe(false)
|
||||
mod.toggleDocked('mascot')
|
||||
expect(mod.isDockedVisible('mascot')).toBe(true)
|
||||
})
|
||||
|
||||
it('persists to localStorage', () => {
|
||||
mod.toggleDocked('mascot')
|
||||
const raw = localStorage.getItem(mod.STORAGE_KEY)
|
||||
expect(raw).toBeTruthy()
|
||||
expect(JSON.parse(raw!).mascot).toBe(false)
|
||||
})
|
||||
|
||||
it('merge over defaults so a newly-registered docked app is visible', async () => {
|
||||
// Simulate a persisted blob from before 'other-docked' existed.
|
||||
localStorage.setItem(mod.STORAGE_KEY, JSON.stringify({ mascot: false }))
|
||||
vi.resetModules()
|
||||
const fresh = await import('./docked')
|
||||
expect(fresh.isDockedVisible('mascot')).toBe(false)
|
||||
expect(fresh.isDockedVisible('other-docked')).toBe(true)
|
||||
})
|
||||
|
||||
it('dockedVisibility store is subscribable', () => {
|
||||
let latest: Record<string, boolean> | undefined
|
||||
const unsub = mod.dockedVisibility.subscribe((v) => (latest = v))
|
||||
// Store starts empty — absent keys mean visible (isDockedVisible fallback).
|
||||
expect(latest).toEqual({})
|
||||
expect(mod.isDockedVisible('mascot')).toBe(true)
|
||||
mod.toggleDocked('mascot')
|
||||
expect(latest?.mascot).toBe(false)
|
||||
expect(mod.isDockedVisible('mascot')).toBe(false)
|
||||
unsub()
|
||||
})
|
||||
})
|
||||
43
web/src/lib/stores/docked.ts
Normal file
43
web/src/lib/stores/docked.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
// Visibility for docked apps — persisted so "hidden" survives reloads.
|
||||
// Keyed by app id; an ABSENT key means visible (the default for a newly
|
||||
// registered docked app, so a fresh install shows the mascot without the
|
||||
// operator opting in). This means the store only holds *overrides* — it
|
||||
// doesn't need to enumerate the docked apps to seed defaults, which would
|
||||
// require importing APPS and create a static cycle (apps.ts -> pages ->
|
||||
// windows.ts -> here -> apps.ts, TDZ on APPS at init). Unknown persisted
|
||||
// keys are kept (merge semantics), so an uninstalled-then-reinstalled
|
||||
// docked app remembers its visibility across the gap.
|
||||
import { writable, get } from 'svelte/store'
|
||||
|
||||
export const STORAGE_KEY = 'oikos-docked-apps'
|
||||
|
||||
function load(): Record<string, boolean> {
|
||||
if (typeof localStorage === 'undefined') return {}
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return {}
|
||||
return JSON.parse(raw) as Record<string, boolean>
|
||||
} catch {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
const _visibility = writable<Record<string, boolean>>(load())
|
||||
|
||||
function persist(vis: Record<string, boolean>): void {
|
||||
if (typeof localStorage === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(vis))
|
||||
}
|
||||
|
||||
_visibility.subscribe(persist)
|
||||
|
||||
// Read-only surface for components; mutations go through toggleDocked.
|
||||
export const dockedVisibility = { subscribe: _visibility.subscribe }
|
||||
|
||||
export function toggleDocked(appId: string): void {
|
||||
_visibility.update((vis) => ({ ...vis, [appId]: !(vis[appId] ?? true) }))
|
||||
}
|
||||
|
||||
export function isDockedVisible(appId: string): boolean {
|
||||
return get(_visibility)[appId] ?? true
|
||||
}
|
||||
@@ -1,11 +1,19 @@
|
||||
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' }]
|
||||
}))
|
||||
// icons.ts reads the reactive `apps` store (derived from built-ins +
|
||||
// installed apps) to seed default positions. Stub it as a minimal Readable
|
||||
// emitting a fixed list rather than pull in the real registry.
|
||||
vi.mock('$lib/apps', () => {
|
||||
const list = [
|
||||
{ id: 'tasks' },
|
||||
{ id: 'kb' },
|
||||
{ id: 'ops' },
|
||||
{ id: 'signals' },
|
||||
{ id: 'knowledge' },
|
||||
{ id: 'learning' }
|
||||
]
|
||||
return { apps: { subscribe: (cb: (v: typeof list) => void) => { cb(list); return () => {} } } }
|
||||
})
|
||||
|
||||
import { GRID, iconPositions, placeIcon, iconPixelPos, maxCols, getIconPositions, resetIconLayout } from './icons'
|
||||
|
||||
|
||||
@@ -5,8 +5,14 @@
|
||||
// simpler drag model (snap-to-cell, no resize/minimize/stack). Reinventing
|
||||
// that inside wmkit would mean fighting its window-shaped abstractions for
|
||||
// no benefit.
|
||||
//
|
||||
// Reactive to the apps store (Phase 3): when an installed app registers
|
||||
// after init, it gets a free cell on the next emission. Uninstalled apps'
|
||||
// positions are KEPT (so reinstall remembers where the icon was) but their
|
||||
// icons simply don't render — the desktop's {#each $apps} is the source of
|
||||
// truth for what's visible.
|
||||
import { writable, get } from 'svelte/store'
|
||||
import { APPS } from '$lib/apps'
|
||||
import { apps } from '$lib/apps'
|
||||
|
||||
export interface IconPos {
|
||||
col: number
|
||||
@@ -17,36 +23,17 @@ 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()
|
||||
if (typeof localStorage === 'undefined') return {}
|
||||
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
|
||||
if (!raw) return {}
|
||||
return JSON.parse(raw) as Record<string, IconPos>
|
||||
} catch {
|
||||
return defaultPositions()
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
const appIds = new Set(APPS.map((a) => a.id))
|
||||
|
||||
export const iconPositions = writable<Record<string, IconPos>>(load())
|
||||
|
||||
function persist(positions: Record<string, IconPos>): void {
|
||||
@@ -54,7 +41,7 @@ function persist(positions: Record<string, IconPos>): void {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(positions))
|
||||
}
|
||||
|
||||
iconPositions.subscribe((positions) => persist(positions))
|
||||
iconPositions.subscribe(persist)
|
||||
|
||||
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)
|
||||
@@ -108,6 +95,35 @@ export function getIconPositions(): Record<string, IconPos> {
|
||||
|
||||
// Bails a messy manual layout back to the classic left-edge column,
|
||||
// registry order — the desktop's right-click menu's "Reset icon layout".
|
||||
// Clears all positions then re-seeds from the current app list, so it
|
||||
// respects the live registry (including installed apps) rather than a
|
||||
// static snapshot.
|
||||
export function resetIconLayout(): void {
|
||||
iconPositions.set(defaultPositions())
|
||||
iconPositions.set(seedMissing({}, get(apps)))
|
||||
}
|
||||
|
||||
// Seeds positions for any app in `list` that doesn't have one yet —
|
||||
// classic OS default: one left-edge column, registry order. Returns the
|
||||
// same positions object if nothing needed seeding (so callers can skip a
|
||||
// no-op set), otherwise a fresh merged object.
|
||||
function seedMissing(positions: Record<string, IconPos>, list: { id: string }[]): Record<string, IconPos> {
|
||||
let next: Record<string, IconPos> | null = null
|
||||
let row = 0
|
||||
for (const app of list) {
|
||||
if (positions[app.id]) continue
|
||||
if (!next) next = { ...positions }
|
||||
while (occupied(next, 0, row, app.id)) row++
|
||||
next![app.id] = { col: 0, row }
|
||||
row++
|
||||
}
|
||||
return next ?? positions
|
||||
}
|
||||
|
||||
// Seed on every apps-store emission so a newly-installed app gets a cell
|
||||
// immediately. Existing positions (including uninstalled apps' remembered
|
||||
// spots) are preserved.
|
||||
apps.subscribe((list) => {
|
||||
const current = get(iconPositions)
|
||||
const next = seedMissing(current, list)
|
||||
if (next !== current) iconPositions.set(next)
|
||||
})
|
||||
|
||||
@@ -3,10 +3,11 @@
|
||||
// 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 { derived, type Readable } from 'svelte/store'
|
||||
import { derived, get, type Readable } from 'svelte/store'
|
||||
import { createManager, createDesktop, wmStore } from '@surdeddd/wmkit/svelte'
|
||||
import { persist } from '@surdeddd/wmkit/persist'
|
||||
import { appById, appWindowId } from '$lib/apps'
|
||||
import { toggleDocked } from '$lib/stores/docked'
|
||||
import { sessions } from '$lib/stores/chat'
|
||||
import { heading } from '$lib/tasks'
|
||||
|
||||
@@ -75,9 +76,18 @@ export function toggleShowDesktop(): void {
|
||||
// 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.
|
||||
// Docked apps (e.g. the mascot) have no wmkit window at all — clicking their
|
||||
// icon toggles visibility on the Docked Layer instead, so this branches on
|
||||
// kind before touching the window manager. All callers (the desktop icon,
|
||||
// the taskbar settings button, legacy hash resolution) go through here, so
|
||||
// none of them need a kind-specific branch.
|
||||
export function openAppWindow(appId: string): void {
|
||||
const app = appById.get(appId)
|
||||
const app = get(appById).get(appId)
|
||||
if (!app) return
|
||||
if (app.docked) {
|
||||
toggleDocked(appId)
|
||||
return
|
||||
}
|
||||
const id = appWindowId(appId)
|
||||
if (wm.get(id)) {
|
||||
wm.restore(id)
|
||||
|
||||
92
web/src/pages/AppStore.svelte
Normal file
92
web/src/pages/AppStore.svelte
Normal file
@@ -0,0 +1,92 @@
|
||||
<script lang="ts">
|
||||
// App Store — lists the installable-app catalog (web/src/lib/app-store/catalog.ts),
|
||||
// shows install state, and installs/uninstalls. Installing persists the
|
||||
// manifest id (localStorage) and the registry's reactive `apps` store
|
||||
// immediately renders the new app's desktop icon — no reload. Uninstalling
|
||||
// removes the icon and (via WindowLayer's reactive orphan-close effect)
|
||||
// closes any open window for that app.
|
||||
//
|
||||
// Phase 3 scope: local bundles only (apps that ship with the build,
|
||||
// discovered via the catalog). Phase 4 will swap the catalog for a
|
||||
// fetched `/api/v1/apps` endpoint + remote bundle loading with
|
||||
// sandboxing; the install/uninstall lifecycle here is the mechanism that
|
||||
// generalizes.
|
||||
import { CATALOG } from '$lib/app-store/catalog'
|
||||
import { installApp, uninstallApp, installedAppIds } from '$lib/apps'
|
||||
import CheckCircleIcon from '@lucide/svelte/icons/circle-check-big'
|
||||
import DownloadIcon from '@lucide/svelte/icons/download'
|
||||
import TrashIcon from '@lucide/svelte/icons/trash'
|
||||
import ShieldIcon from '@lucide/svelte/icons/shield'
|
||||
|
||||
// Reactive membership test — re-renders when the installed set changes.
|
||||
const installedSet = $derived(new Set($installedAppIds))
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<header class="shrink-0 border-b px-4 py-3">
|
||||
<h1 class="text-base font-semibold">App Store</h1>
|
||||
<p class="mt-0.5 text-xs text-muted-foreground">
|
||||
Installable apps. Local bundles for now — a remote catalog + sandboxing
|
||||
is Phase 4.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-auto p-4">
|
||||
{#if CATALOG.length === 0}
|
||||
<p class="text-sm text-muted-foreground">No apps available yet.</p>
|
||||
{:else}
|
||||
<ul class="flex flex-col gap-3">
|
||||
{#each CATALOG as entry (entry.manifest.id)}
|
||||
{@const m = entry.manifest}
|
||||
{@const isOn = installedSet.has(m.id)}
|
||||
<li class="flex items-start gap-3 rounded-lg border p-3">
|
||||
<div class="flex size-10 shrink-0 items-center justify-center rounded-md border bg-muted/40">
|
||||
<entry.icon class="size-5" />
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="truncate text-sm font-medium">{m.title}</h2>
|
||||
<span class="shrink-0 text-[10px] font-mono text-muted-foreground">v{m.version}</span>
|
||||
{#if m.author}<span class="shrink-0 text-[10px] text-muted-foreground">by {m.author}</span>{/if}
|
||||
</div>
|
||||
<p class="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{m.description}</p>
|
||||
<div class="mt-1.5 flex items-center gap-1 text-[10px] text-muted-foreground">
|
||||
<ShieldIcon class="size-3" />
|
||||
<span>
|
||||
{#if m.permissions.length}{m.permissions.join(', ')}{:else}no permissions requested{/if}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
{#if isOn}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/50"
|
||||
onclick={() => uninstallApp(m.id)}
|
||||
>
|
||||
<TrashIcon class="size-3.5" /> Uninstall
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
|
||||
onclick={() => installApp(m.id)}
|
||||
>
|
||||
<DownloadIcon class="size-3.5" /> Install
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<div class="mt-6 rounded-md border border-dashed p-3 text-xs text-muted-foreground">
|
||||
<p class="flex items-center gap-1.5">
|
||||
<CheckCircleIcon class="size-3.5" />
|
||||
Installed apps appear on the desktop immediately. Uninstalling closes
|
||||
any open window for that app.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,6 +7,8 @@
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { ScrollArea } from '$lib/components/ui/scroll-area'
|
||||
import { openEntityWindow } from '$lib/stores/windows'
|
||||
import { relativeTime } from '$lib/utils'
|
||||
import StatusBadge from '$lib/components/StatusBadge.svelte'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import SparklesIcon from '@lucide/svelte/icons/sparkles'
|
||||
import BotIcon from '@lucide/svelte/icons/bot'
|
||||
@@ -39,23 +41,6 @@
|
||||
loading = false
|
||||
searched = true
|
||||
}
|
||||
|
||||
function typeVariant(type: string): 'default' | 'secondary' | 'outline' {
|
||||
if (type === 'runbook') return 'secondary'
|
||||
if (type === 'investigation') return 'default'
|
||||
return 'outline'
|
||||
}
|
||||
|
||||
function relTime(iso: string): string {
|
||||
const d = new Date(iso).getTime()
|
||||
if (!d) return ''
|
||||
const s = Math.round((Date.now() - d) / 1000)
|
||||
if (s < 60) return 'just now'
|
||||
if (s < 3600) return `${Math.floor(s / 60)}m ago`
|
||||
if (s < 86400) return `${Math.floor(s / 3600)}h ago`
|
||||
return `${Math.floor(s / 86400)}d ago`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col gap-4 p-4 md:p-6">
|
||||
@@ -113,7 +98,7 @@
|
||||
<Card.Header>
|
||||
<div class="flex items-center gap-2">
|
||||
<Card.Title class="text-sm">{hit.title}</Card.Title>
|
||||
<Badge variant={typeVariant(hit.type)}>{hit.type}</Badge>
|
||||
<StatusBadge kind="type" value={hit.type} />
|
||||
</div>
|
||||
{#if hit.snippet}
|
||||
<!-- eslint-disable-next-line svelte/no-at-html-tags — sanitized below, ts_headline only ever emits <b> -->
|
||||
@@ -153,7 +138,7 @@
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="text-sm font-medium">{it.title}</span>
|
||||
<Badge variant={typeVariant(it.kind)} class="text-[10px]">{it.kind}</Badge>
|
||||
<StatusBadge kind="type" value={it.kind} class="text-[10px]" />
|
||||
{#if it.agent_authored}<Badge variant="outline" class="border-primary/40 text-[10px] text-primary">learned by Nomos</Badge>{/if}
|
||||
</div>
|
||||
{#if it.tags.length}
|
||||
@@ -162,7 +147,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="shrink-0 text-xs text-muted-foreground">{relTime(it.updated_at)}</span>
|
||||
<span class="shrink-0 text-xs text-muted-foreground">{relativeTime(it.updated_at)}</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#if !loadingRecent}
|
||||
|
||||
@@ -10,10 +10,14 @@
|
||||
} from '$lib/api'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import * as Tabs from '$lib/components/ui/tabs'
|
||||
import * as Table from '$lib/components/ui/table'
|
||||
import { Badge } from '$lib/components/ui/badge'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import DataTable from '$lib/components/data-table/DataTable.svelte'
|
||||
import type { DataTableColumn } from '$lib/components/data-table/types'
|
||||
import ApprovalActions from '$lib/components/data-table/renderers/ApprovalActions.svelte'
|
||||
import ActivityCancel from '$lib/components/data-table/renderers/ActivityCancel.svelte'
|
||||
import ActivityAction from '$lib/components/data-table/renderers/ActivityAction.svelte'
|
||||
import DurationRenderer from '$lib/components/data-table/renderers/DurationRenderer.svelte'
|
||||
|
||||
let approvals = $state<Approval[]>([])
|
||||
let activity = $state<ActivityItem[]>([])
|
||||
@@ -30,9 +34,6 @@
|
||||
loadApprovals()
|
||||
loadActivity()
|
||||
const unsubscribe = subscribeEvents()
|
||||
// The activity feed has no dedicated SSE event type yet — a light poll
|
||||
// keeps it live without waiting for that wiring. Cheap: one query, only
|
||||
// while this page is open.
|
||||
const interval = setInterval(loadActivity, 5000)
|
||||
return () => {
|
||||
unsubscribe()
|
||||
@@ -47,24 +48,6 @@
|
||||
if (ev.type.startsWith('execution.')) loadActivity()
|
||||
})
|
||||
|
||||
function fmtDuration(ms: number | null): string {
|
||||
if (ms == null) return '—'
|
||||
if (ms < 1000) return `${ms}ms`
|
||||
const s = Math.round(ms / 1000)
|
||||
if (s < 60) return `${s}s`
|
||||
return `${Math.floor(s / 60)}m ${s % 60}s`
|
||||
}
|
||||
|
||||
function fmtWhen(iso: string): string {
|
||||
const d = new Date(iso).getTime()
|
||||
if (!d) return ''
|
||||
const s = Math.round((Date.now() - d) / 1000)
|
||||
if (s < 60) return 'just now'
|
||||
if (s < 3600) return `${Math.floor(s / 60)}m ago`
|
||||
if (s < 86400) return `${Math.floor(s / 3600)}h ago`
|
||||
return `${Math.floor(s / 86400)}d ago`
|
||||
}
|
||||
|
||||
async function decide(id: string, decision: 'approve' | 'deny') {
|
||||
deciding = id
|
||||
const result = await decideApproval(id, decision)
|
||||
@@ -87,25 +70,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
function riskVariant(risk: string): 'default' | 'secondary' | 'destructive' {
|
||||
if (risk === 'destructive') return 'destructive'
|
||||
if (risk === 'config_mutation') return 'secondary'
|
||||
return 'default'
|
||||
}
|
||||
|
||||
// Real status vocabulary (internal/httpapi/phase3.go, cmd/nomos): the
|
||||
// previous version checked statuses ('proposed', 'auto_approved',
|
||||
// 'verified', 'executing'...) that don't exist anywhere in the actual
|
||||
// schema — this table was never actually color-coding correctly.
|
||||
function execStatusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
if (['failed', 'denied', 'revoked', 'cancelled'].includes(status)) return 'destructive'
|
||||
if (status === 'completed') return 'default'
|
||||
if (['running', 'approved'].includes(status)) return 'secondary'
|
||||
return 'outline'
|
||||
}
|
||||
|
||||
const pendingApprovals = $derived(approvals.filter((a) => a.status === 'pending'))
|
||||
const decidedApprovals = $derived(approvals.filter((a) => a.status !== 'pending'))
|
||||
|
||||
const pendingColumns = $derived.by(() => [
|
||||
{ key: 'subject', header: 'Subject', class: 'font-mono text-xs', width: '180px', accessor: (a: Approval) => a.subject ?? '—', truncate: true },
|
||||
{ key: 'action', header: 'Action', truncate: true },
|
||||
{ key: 'risk_class', header: 'Risk', render: 'status-badge', renderProps: { kind: 'risk' }, width: '120px' },
|
||||
{ key: 'status', header: 'Status', render: 'status-badge', renderProps: { kind: 'execution' }, width: '100px' },
|
||||
{ key: 'expires_at', header: 'Expires', render: 'date', width: '170px' },
|
||||
{ key: '_actions', header: '', render: ApprovalActions,
|
||||
renderProps: { deciding, onApprove: (id: string) => decide(id, 'approve'), onDeny: (id: string) => decide(id, 'deny') },
|
||||
align: 'right', headerClass: 'text-right', width: '220px' },
|
||||
] as DataTableColumn<Approval>[])
|
||||
|
||||
const decidedColumns: DataTableColumn<Approval>[] = [
|
||||
{ key: 'subject', header: 'Subject', class: 'font-mono text-xs', width: '180px', accessor: (a) => a.subject ?? '—', truncate: true },
|
||||
{ key: 'action', header: 'Action', truncate: true },
|
||||
{ key: 'status', header: 'Status', render: 'status-badge', renderProps: { kind: 'execution' }, width: '100px' },
|
||||
{ key: 'decided_at', header: 'Decided', render: 'date', width: '170px', accessor: (a) => a.decided_at ?? '—' },
|
||||
]
|
||||
|
||||
const activityColumns: DataTableColumn<ActivityItem>[] = [
|
||||
{ key: 'target', header: 'Target', class: 'font-mono text-xs', width: '180px', accessor: (a) => a.target ?? '—', truncate: true },
|
||||
{ key: '_action', header: 'Action', render: ActivityAction, truncate: true },
|
||||
{ key: 'risk_class', header: 'Risk', render: 'status-badge', renderProps: { kind: 'risk' }, width: '120px' },
|
||||
{ key: 'status', header: 'Status', render: 'status-badge', renderProps: { kind: 'execution' }, width: '110px' },
|
||||
{ key: 'duration_ms', header: 'Duration', render: DurationRenderer, width: '90px', align: 'right' },
|
||||
{ key: 'created_at', header: 'When', render: 'relative-time', width: '100px' },
|
||||
{ key: '_cancel', header: '', render: ActivityCancel, renderProps: { onCancel: cancel }, align: 'right', headerClass: 'text-right', width: '100px' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col gap-4 p-4 md:p-6">
|
||||
@@ -120,121 +114,18 @@
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="approvals" class="flex-1 overflow-auto">
|
||||
<div class="rounded-md border">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Subject</Table.Head>
|
||||
<Table.Head>Action</Table.Head>
|
||||
<Table.Head>Risk</Table.Head>
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Expires</Table.Head>
|
||||
<Table.Head class="text-right">Decision</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each pendingApprovals as approval (approval.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
|
||||
<Table.Cell>{approval.action}</Table.Cell>
|
||||
<Table.Cell><Badge variant={riskVariant(approval.risk_class)}>{approval.risk_class}</Badge></Table.Cell>
|
||||
<Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground"
|
||||
>{new Date(approval.expires_at).toLocaleString()}</Table.Cell
|
||||
>
|
||||
<Table.Cell class="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={deciding === approval.id}
|
||||
onclick={() => decide(approval.id, 'approve')}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
disabled={deciding === approval.id}
|
||||
onclick={() => decide(approval.id, 'deny')}
|
||||
>
|
||||
Deny
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={6} class="text-center text-muted-foreground">No pending approvals.</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
<DataTable columns={pendingColumns} data={pendingApprovals} emptyMessage="No pending approvals." />
|
||||
|
||||
{#if decidedApprovals.length}
|
||||
<p class="mt-4 text-xs text-muted-foreground">Recently decided</p>
|
||||
<div class="mt-1 rounded-md border">
|
||||
<Table.Root>
|
||||
<Table.Body>
|
||||
{#each decidedApprovals.slice(0, 20) as approval (approval.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs">{approval.subject ?? '—'}</Table.Cell>
|
||||
<Table.Cell>{approval.action}</Table.Cell>
|
||||
<Table.Cell><Badge variant="outline">{approval.status}</Badge></Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground"
|
||||
>{approval.decided_at ? new Date(approval.decided_at).toLocaleString() : '—'}</Table.Cell
|
||||
>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<div class="mt-1">
|
||||
<DataTable columns={decidedColumns} data={decidedApprovals.slice(0, 20)} />
|
||||
</div>
|
||||
{/if}
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="executions" class="flex-1 overflow-auto">
|
||||
<div class="rounded-md border">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Target</Table.Head>
|
||||
<Table.Head>Action</Table.Head>
|
||||
<Table.Head>Risk</Table.Head>
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Duration</Table.Head>
|
||||
<Table.Head>When</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each activity as item (item.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs">{item.target ?? '—'}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div>{item.verb}</div>
|
||||
{#if item.summary}
|
||||
<div class="text-xs text-muted-foreground">{item.summary}</div>
|
||||
{/if}
|
||||
{#if item.error}
|
||||
<div class="text-xs text-destructive">{item.error}</div>
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
<Table.Cell><Badge variant={riskVariant(item.risk_class)}>{item.risk_class}</Badge></Table.Cell>
|
||||
<Table.Cell><Badge variant={execStatusVariant(item.status)}>{item.status}</Badge></Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground">{fmtDuration(item.duration_ms)}</Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground">{fmtWhen(item.created_at)}</Table.Cell>
|
||||
<Table.Cell class="text-right">
|
||||
{#if ['pending_approval', 'approved', 'running'].includes(item.status)}
|
||||
<Button size="sm" variant="outline" onclick={() => cancel(item.id)}>Cancel</Button>
|
||||
{/if}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={7} class="text-center text-muted-foreground">No activity yet.</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
<DataTable columns={activityColumns} data={activity} emptyMessage="No activity yet." />
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
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 { bucket, FILTERS, TASK_EVENTS, heading, type Bucket } from '$lib/tasks'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import DataTable from '$lib/components/data-table/DataTable.svelte'
|
||||
import type { DataTableColumn } from '$lib/components/data-table/types'
|
||||
import StatusDotRenderer from '$lib/components/data-table/renderers/StatusDotRenderer.svelte'
|
||||
import PlusIcon from '@lucide/svelte/icons/plus'
|
||||
import type { Session } from '$lib/api'
|
||||
|
||||
@@ -17,6 +19,7 @@
|
||||
for (const s of $sessions) c[bucket(s)]++
|
||||
return c
|
||||
})
|
||||
|
||||
const visible = $derived(
|
||||
filter === 'all' ? $sessions : $sessions.filter((s) => bucket(s) === filter)
|
||||
)
|
||||
@@ -29,9 +32,6 @@
|
||||
loadSessions()
|
||||
const unsubStream = subscribeEvents()
|
||||
|
||||
// Refetch the board when a task's lifecycle changes anywhere. Scan all
|
||||
// events newer than the last seen (entity.touched fires constantly and
|
||||
// buries task.status); debounce a burst into one refetch.
|
||||
let lastSeenId = 0
|
||||
let refreshTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const unsub = liveEvents.subscribe((evs) => {
|
||||
@@ -51,6 +51,19 @@
|
||||
unsubStream()
|
||||
}
|
||||
})
|
||||
|
||||
const columns: DataTableColumn<Session>[] = [
|
||||
{ key: '_status', header: 'Status', render: StatusDotRenderer, width: '140px' },
|
||||
{ key: '_heading', header: 'Task', sortable: true, accessor: heading, truncate: true },
|
||||
{ key: 'summary', header: 'Summary', accessor: (s) => s.summary || '—', truncate: true, headerClass: 'hidden md:table-cell', class: 'hidden md:table-cell' },
|
||||
{ key: 'last_active_at', header: 'Last active', render: 'relative-time', sortable: true, width: '112px', align: 'right' },
|
||||
]
|
||||
|
||||
const emptyMessage = $derived(
|
||||
filter === 'all'
|
||||
? '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.`
|
||||
)
|
||||
</script>
|
||||
|
||||
<div class="relative flex h-full flex-col gap-3 overflow-hidden p-4">
|
||||
@@ -75,51 +88,13 @@
|
||||
</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 and Nomos will plan it, execute it, and report the outcome.'
|
||||
: `No ${FILTERS.find((f) => f.id === filter)?.label.toLowerCase()} tasks.`}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-muted-foreground [&>th]:sticky [&>th]:top-0 [&>th]:z-10 [&>th]:bg-card/95 [&>th]:backdrop-blur">
|
||||
<th class="w-36 px-4 py-2 font-medium">Status</th>
|
||||
<th class="px-4 py-2 font-medium">Task</th>
|
||||
<th class="hidden px-4 py-2 font-medium md:table-cell">Summary</th>
|
||||
<th class="w-28 px-4 py-2 text-right font-medium">Last active</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each visible as s (s.id)}
|
||||
{@const st = statusStyle(s)}
|
||||
<tr
|
||||
class="cursor-pointer border-b last:border-0 transition-colors hover:bg-muted/40"
|
||||
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">
|
||||
<span class="size-2 rounded-full {st.dot} {st.pulse ? 'animate-pulse' : ''}"></span>
|
||||
{st.label}
|
||||
</span>
|
||||
</td>
|
||||
<td class="max-w-0 px-4 py-2.5">
|
||||
<span class="line-clamp-1 font-medium">{heading(s)}</span>
|
||||
</td>
|
||||
<td class="hidden max-w-0 px-4 py-2.5 md:table-cell">
|
||||
<span class="line-clamp-1 text-xs text-muted-foreground">{s.summary || '—'}</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2.5 text-right text-[11px] text-muted-foreground">
|
||||
{relativeTime(s.last_active_at)}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
<div class="relative z-10 min-h-0 flex-1 overflow-hidden rounded-xl border bg-card/70 backdrop-blur">
|
||||
<DataTable
|
||||
{columns}
|
||||
data={visible}
|
||||
{emptyMessage}
|
||||
bordered={false}
|
||||
onRowClick={openTask}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,12 @@
|
||||
import { fetchSignals, ackSignal, resolveSignal, muteSignal, type Signal } from '$lib/api'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import * as Tabs from '$lib/components/ui/tabs'
|
||||
import * as Table from '$lib/components/ui/table'
|
||||
import { Badge } from '$lib/components/ui/badge'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import * as Select from '$lib/components/ui/select'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import DataTable from '$lib/components/data-table/DataTable.svelte'
|
||||
import type { DataTableColumn } from '$lib/components/data-table/types'
|
||||
import SignalActions from '$lib/components/data-table/renderers/SignalActions.svelte'
|
||||
|
||||
let signals = $state<Signal[]>([])
|
||||
let severityFilter = $state('all')
|
||||
@@ -66,12 +67,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function severityVariant(sev: string): 'default' | 'secondary' | 'destructive' {
|
||||
if (sev === 'critical') return 'destructive'
|
||||
if (sev === 'warning') return 'secondary'
|
||||
return 'default'
|
||||
}
|
||||
|
||||
function bySeverity(list: Signal[]) {
|
||||
return severityFilter === 'all' ? list : list.filter((s) => s.severity === severityFilter)
|
||||
}
|
||||
@@ -79,60 +74,29 @@
|
||||
const open = $derived(bySeverity(signals.filter((s) => ['raised', 'acknowledged', 'acting'].includes(s.state))))
|
||||
const muted = $derived(bySeverity(signals.filter((s) => s.state === 'muted')))
|
||||
const resolved = $derived(bySeverity(signals.filter((s) => ['resolved', 'failed'].includes(s.state))))
|
||||
</script>
|
||||
|
||||
{#snippet signalTable(list: Signal[], showActions: boolean)}
|
||||
<div class="rounded-md border">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Target</Table.Head>
|
||||
<Table.Head>Kind</Table.Head>
|
||||
<Table.Head>Severity</Table.Head>
|
||||
<Table.Head>State</Table.Head>
|
||||
<Table.Head>Occurrences</Table.Head>
|
||||
<Table.Head>Last seen</Table.Head>
|
||||
{#if showActions}
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
{/if}
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each list as signal (signal.id)}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-mono text-xs">{signal.target ?? '—'}</Table.Cell>
|
||||
<Table.Cell>{signal.kind}</Table.Cell>
|
||||
<Table.Cell><Badge variant={severityVariant(signal.severity)}>{signal.severity}</Badge></Table.Cell>
|
||||
<Table.Cell><Badge variant="outline">{signal.state}</Badge></Table.Cell>
|
||||
<Table.Cell>{signal.occurrence_count}</Table.Cell>
|
||||
<Table.Cell class="text-xs text-muted-foreground"
|
||||
>{new Date(signal.last_seen_at).toLocaleString()}</Table.Cell
|
||||
>
|
||||
{#if showActions}
|
||||
<Table.Cell class="flex justify-end gap-2">
|
||||
{#if signal.state === 'raised'}
|
||||
<Button size="sm" variant="outline" disabled={acting === signal.id} onclick={() => ack(signal.id)}
|
||||
>Ack</Button
|
||||
>
|
||||
{/if}
|
||||
<Button size="sm" variant="outline" disabled={acting === signal.id} onclick={() => mute(signal.id)}
|
||||
>Mute 1h</Button
|
||||
>
|
||||
<Button size="sm" disabled={acting === signal.id} onclick={() => resolve(signal.id)}>Resolve</Button>
|
||||
</Table.Cell>
|
||||
{/if}
|
||||
</Table.Row>
|
||||
{:else}
|
||||
<Table.Row>
|
||||
<Table.Cell colspan={showActions ? 7 : 6} class="text-center text-muted-foreground"
|
||||
>No signals.</Table.Cell
|
||||
>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
function makeColumns(showActions: boolean, actingVal: string | null): DataTableColumn<Signal>[] {
|
||||
const base: DataTableColumn<Signal>[] = [
|
||||
{ key: 'target', header: 'Target', class: 'font-mono text-xs', width: '180px', accessor: (s) => s.target ?? '—', truncate: true },
|
||||
{ key: 'kind', header: 'Kind', width: '120px' },
|
||||
{ key: 'severity', header: 'Severity', render: 'status-badge', renderProps: { kind: 'severity' }, width: '100px' },
|
||||
{ key: 'state', header: 'State', render: 'status-badge', renderProps: { kind: 'state' }, width: '110px' },
|
||||
{ key: 'occurrence_count', header: 'Occurrences', width: '100px', align: 'right' },
|
||||
{ key: 'last_seen_at', header: 'Last seen', render: 'date', width: '170px' },
|
||||
]
|
||||
if (showActions) {
|
||||
base.push({
|
||||
key: '_actions', header: '', render: SignalActions,
|
||||
renderProps: { acting: actingVal, onAck: ack, onMute: mute, onResolve: resolve },
|
||||
align: 'right', headerClass: 'text-right', width: '220px'
|
||||
})
|
||||
}
|
||||
return base
|
||||
}
|
||||
|
||||
const columnsWithActions = $derived(makeColumns(true, acting))
|
||||
const columnsWithoutActions = makeColumns(false, null)
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col gap-4 p-4 md:p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
@@ -159,13 +123,13 @@
|
||||
<Tabs.Trigger value="resolved">Resolved</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="open" class="flex-1 overflow-auto">
|
||||
{@render signalTable(open, true)}
|
||||
<DataTable columns={columnsWithActions} data={open} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="muted" class="flex-1 overflow-auto">
|
||||
{@render signalTable(muted, true)}
|
||||
<DataTable columns={columnsWithActions} data={muted} />
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="resolved" class="flex-1 overflow-auto">
|
||||
{@render signalTable(resolved, false)}
|
||||
<DataTable columns={columnsWithoutActions} data={resolved} />
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user