Compare commits
4 Commits
8657ac5669
...
claude/fro
| Author | SHA1 | Date | |
|---|---|---|---|
| 9f4d645d06 | |||
| aee458ce83 | |||
| 58a11ca872 | |||
| aed068de12 |
@@ -18,6 +18,7 @@ import (
|
||||
|
||||
"github.com/dtoro/oikos/internal/safego"
|
||||
"github.com/google/uuid"
|
||||
"github.com/jackc/pgx/v5"
|
||||
)
|
||||
|
||||
func main() {
|
||||
@@ -448,6 +449,21 @@ func handleSessionDetail(w http.ResponseWriter, r *http.Request, st *store, a *a
|
||||
w.WriteHeader(204)
|
||||
|
||||
case http.MethodGet:
|
||||
// getMessages alone can't distinguish "session exists but has no
|
||||
// messages yet" from "session id doesn't exist at all" — it's a
|
||||
// plain WHERE session_id=$1 query that returns zero rows either
|
||||
// way. A frontend window opened for a deleted/invalid session
|
||||
// (persisted layout, a stale link) needs to tell those apart, so
|
||||
// check existence explicitly and 404 rather than silently
|
||||
// returning an empty transcript that looks like a fresh task.
|
||||
if _, err := st.getSession(r.Context(), id); err != nil {
|
||||
if err == pgx.ErrNoRows {
|
||||
http.Error(w, "session not found", 404)
|
||||
return
|
||||
}
|
||||
http.Error(w, err.Error(), 500)
|
||||
return
|
||||
}
|
||||
messages, err := st.getMessages(r.Context(), id)
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), 500)
|
||||
|
||||
@@ -8,6 +8,7 @@ procedures, and the system model.
|
||||
| ---- | -------- |
|
||||
| [adr/](adr/README.md) | Architecture Decision Records (numbered, append-only) |
|
||||
| [mbse/](mbse/README.md) | Model-Based Systems Engineering views of the platform |
|
||||
| [mascot/](mascot/README.md) | MBSE subsystem model for the desktop mascot (planned) |
|
||||
| [operations/](operations/README.md) | Operator runbooks (deploy, rollback, recovery) |
|
||||
|
||||
For agent orientation see [AGENTS.md](../AGENTS.md); for the operating model
|
||||
|
||||
335
docs/mascot/README.md
Normal file
335
docs/mascot/README.md
Normal file
@@ -0,0 +1,335 @@
|
||||
# Oikos — Desktop Mascot Subsystem Model
|
||||
|
||||
> Companion to [the platform Model](../mbse/README.md) and
|
||||
> [the Framework](../mbse/framework.md). This document is a **subsystem
|
||||
> Model** in Holt's sense — it conforms to the same Framework (Ontology +
|
||||
> Viewpoints, Markdown + Mermaid Notation) rather than restating it, scoped
|
||||
> to a single not-yet-built subsystem of the `web` component: the desktop
|
||||
> mascot ("Cluck"), a pixel-art chicken that lives on the desktop shell.
|
||||
> Where the platform-wide Views in [../mbse/README.md](../mbse/README.md)
|
||||
> and the component View for `web/src` in
|
||||
> [../mbse/components.md](../mbse/components.md#5-web-control-room) speak
|
||||
> at the level of "the SPA," this document goes one layer deeper into one
|
||||
> feature of it — the same relationship [components.md](../mbse/components.md)
|
||||
> has to [README.md](../mbse/README.md), applied recursively.
|
||||
|
||||
**Status of this Model:** the subsystem it describes does not exist in
|
||||
code yet. Every View below is marked **Planned**, not **Verified** —
|
||||
compare to [../mbse/README.md](../mbse/README.md)'s confidence grading,
|
||||
which this document borrows. The corresponding implementation plan is
|
||||
[plans/2026-07-20-desktop-mascot.md](../../plans/2026-07-20-desktop-mascot.md).
|
||||
|
||||
## Views in this model
|
||||
|
||||
| # | View | Concern it addresses |
|
||||
|---|---|---|
|
||||
| [1](#1-mission--system-context) | Mission & System Context | Why a mascot, and what is it never allowed to do? |
|
||||
| [2](#2-requirements) | Requirements | What must it do, traced from the original request? |
|
||||
| [3](#3-structural-view) | Structural View | What modules make it up, and which are the extension points? |
|
||||
| [4](#4-behavioral-view) | Behavioral View | How does it move, live, and react, moment to moment? |
|
||||
| [5](#5-interfaces-view) | Interfaces View | What does it read from the rest of the system, and how does it persist itself? |
|
||||
| [6](#6-extension-guide) | Extension Guide | How does a future engineer add an animation, behavior, menu action, or reaction? |
|
||||
| [7](#7-verification-view) | Verification View | How will we know it works, once built? |
|
||||
|
||||
## 1. Mission & System Context
|
||||
|
||||
**Stakeholders:** the operator (delight, ambient awareness of system
|
||||
state without opening a window); future engineers extending the mascot's
|
||||
behaviors/reactions/menu.
|
||||
|
||||
**Mission:** give the desktop shell a persistent, living presence that
|
||||
makes background system activity legible at a glance — a chat streaming,
|
||||
a knowledge-graph write, a critical signal — without requiring a window to
|
||||
be open, while doubling as a lightweight tamagotchi for its own sake
|
||||
(delight is a legitimate requirement here, not a side effect).
|
||||
|
||||
**Boundary — what the mascot is, and is not:**
|
||||
|
||||
- It is a **purely client-side, read-only observer**. It subscribes to
|
||||
existing `web` stores (chat, activity, events, dashboard summary) the
|
||||
same way any other UI component does.
|
||||
- It **never calls a mutating API endpoint** and is not a new actuation
|
||||
path — it has no relationship to the `run` gate, `Execution`, or
|
||||
`Approval` entities described in [the platform Ontology](../mbse/ontology.md).
|
||||
Its only "mutation" is its own tamagotchi state, stored client-side.
|
||||
- It is scoped entirely inside the `web` component
|
||||
([../mbse/components.md §5](../mbse/components.md#5-web-control-room));
|
||||
it introduces no new backend surface, no new MCP tool, no new REST route.
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph SURFACE["Desktop shell surface (Desktop.svelte)"]
|
||||
ICONS["Icon layer\nz-0"]
|
||||
LAUNCH["Task launcher\nz-10"]
|
||||
WIN["WindowLayer\nz-40"]
|
||||
MASCOT["MascotLayer\nz-45\n(this subsystem)"]
|
||||
MENU["Desktop context menu\nz-50"]
|
||||
end
|
||||
|
||||
MASCOT -->|subscribes, read-only| EVENTS["stores/events.ts\nliveEvents (SSE)"]
|
||||
MASCOT -->|subscribes, read-only| CHAT["stores/chat.ts\nstreaming"]
|
||||
MASCOT -->|subscribes, read-only| ACTIVITY["stores/activity.ts\nactivityLog"]
|
||||
MASCOT -->|subscribes, read-only| CONTEXT["stores/context.ts\nsummary"]
|
||||
MASCOT -->|reads/writes| LS["localStorage\noikos-mascot"]
|
||||
|
||||
style MASCOT fill:#fff3e0,stroke:#e65100
|
||||
```
|
||||
|
||||
## 2. Requirements
|
||||
|
||||
Traced from the original feature request. All **Planned**.
|
||||
|
||||
| ID | Statement | Source | Status |
|
||||
|---|---|---|---|
|
||||
| MASC-1 | The mascot SHALL render as pixel-art, drawn from code (string pixel-grids + palette), not binary sprite assets | User request | Planned |
|
||||
| MASC-2 | The mascot SHALL roam the desktop surface autonomously, walking along the ground (surface bottom, above the taskbar) under gravity | User request + design decision | Planned |
|
||||
| MASC-3 | The mascot SHALL be draggable with the mouse; releasing it mid-air SHALL trigger a flutter-fall back to the ground | User request + design decision | Planned |
|
||||
| MASC-4 | Right-clicking the mascot SHALL open a round (Sims-style) interaction menu supporting nested submenus | User request | Planned |
|
||||
| MASC-5 | The mascot SHALL have a tamagotchi lifecycle: egg → chick → adult, with a user-assignable name | User request | Planned |
|
||||
| MASC-6 | The mascot's stage, name, and stats SHALL persist across reloads | User request (implied by "tamagotchi") | Planned |
|
||||
| MASC-7 | The mascot SHALL have idle states (autonomous behavior when untouched) and interactive states (drag, click, menu) | User request | Planned |
|
||||
| MASC-8 | The mascot SHALL react visibly to real application activity: chat streaming, knowledge-graph writes, critical signals | User request ("aware of its environment... feels alive and connected") | Planned |
|
||||
| MASC-9 | Animations, behaviors, menu actions, and reactions SHALL each be defined in a single data-driven registry, so a new one can be added without touching the engine code | User request ("easily expansible") | Planned |
|
||||
| MASC-10 (NFR) | The mascot's game loop SHALL run at ~30fps via `setTimeout`, not `requestAnimationFrame`, matching the repo's existing [`GraphBackground.svelte`](../../web/src/lib/components/GraphBackground.svelte) convention (rAF suspends in some hidden-tab embeddings) | Codebase convention | Planned |
|
||||
| MASC-11 (NFR) | The mascot SHALL never write to the API; all mutation is local (localStorage) | Design decision, this document §1 | Planned |
|
||||
| MASC-12 (NFR) | Persistence writes SHALL be debounced (~300ms), never per animation frame | Codebase convention ([`stores/windows.ts`](../../web/src/lib/stores/windows.ts) wmkit persist) | Planned |
|
||||
|
||||
## 3. Structural View
|
||||
|
||||
**Stakeholders:** an engineer implementing or extending the mascot.
|
||||
**Why this View earns its place:** MASC-9 (extensibility) is only real if
|
||||
the module boundaries actually separate data (registries) from engine
|
||||
code; this View is the check that they do.
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class types_ts {
|
||||
<<module>>
|
||||
PixelGrid
|
||||
AnimName
|
||||
MascotStage
|
||||
BehaviorId
|
||||
Stimulus
|
||||
RadialAction
|
||||
}
|
||||
class palette_ts {
|
||||
<<module, registry>>
|
||||
PALETTE: char to CSS color
|
||||
}
|
||||
class sprites_ts {
|
||||
<<module, registry>>
|
||||
SPRITES: Stage to AnimName to AnimDef
|
||||
resolveAnim(stage, name)
|
||||
}
|
||||
class render_ts {
|
||||
<<module, stateless>>
|
||||
drawFrame(ctx, grid, palette, flip)
|
||||
}
|
||||
class state_svelte_ts {
|
||||
<<module, runes>>
|
||||
MascotModel state
|
||||
grantXp() feed() pet() setName()
|
||||
tickLifecycle() advanceStageIfReady()
|
||||
persist (debounced, oikos-mascot)
|
||||
}
|
||||
class behavior_ts {
|
||||
<<module, registry>>
|
||||
BEHAVIORS: BehaviorId to BehaviorDef
|
||||
stepMascot(rt, model, now, dt)
|
||||
}
|
||||
class stimuli_ts {
|
||||
<<module, registry>>
|
||||
REACTIONS: id to ReactionDef
|
||||
attachStimuli(emit)
|
||||
}
|
||||
class actions_ts {
|
||||
<<module, registry>>
|
||||
MASCOT_ACTIONS: RadialAction tree
|
||||
registerMascotAction()
|
||||
}
|
||||
class Mascot_svelte {
|
||||
<<component>>
|
||||
canvas render loop 30fps
|
||||
pointer drag/click/contextmenu
|
||||
}
|
||||
class MascotLayer_svelte {
|
||||
<<component>>
|
||||
z-45 absolute overlay
|
||||
hosts Mascot + RadialMenu + bubble
|
||||
}
|
||||
class RadialMenu_svelte {
|
||||
<<component>>
|
||||
z-60 fixed, nested rings
|
||||
}
|
||||
class NameDialog_svelte {
|
||||
<<component>>
|
||||
}
|
||||
|
||||
sprites_ts --> palette_ts : indexes
|
||||
sprites_ts --> types_ts : uses
|
||||
Mascot_svelte --> render_ts : draws frames
|
||||
Mascot_svelte --> sprites_ts : resolves anim
|
||||
Mascot_svelte --> behavior_ts : steps FSM
|
||||
Mascot_svelte --> state_svelte_ts : reads/mutates model
|
||||
MascotLayer_svelte --> Mascot_svelte : hosts
|
||||
MascotLayer_svelte --> RadialMenu_svelte : hosts, on contextmenu
|
||||
MascotLayer_svelte --> stimuli_ts : attaches on mount
|
||||
MascotLayer_svelte --> NameDialog_svelte : hosts, on hatch/rename
|
||||
RadialMenu_svelte --> actions_ts : renders tree
|
||||
stimuli_ts --> behavior_ts : forceBehavior(react)
|
||||
```
|
||||
|
||||
**The four extension registries** (MASC-9's concrete answer — see also
|
||||
[§6 Extension Guide](#6-extension-guide)): `SPRITES` (animations),
|
||||
`BEHAVIORS` (autonomous states), `MASCOT_ACTIONS` (radial menu tree),
|
||||
`REACTIONS` (environment stimuli). Each is plain data; the engine
|
||||
(`behavior.ts`'s `stepMascot`, `Mascot.svelte`'s loop, `RadialMenu.svelte`'s
|
||||
renderer) is generic over whatever the registry currently contains.
|
||||
|
||||
**Mount point:** two lines in
|
||||
[`Desktop.svelte`](../../web/src/lib/components/desktop-shell/Desktop.svelte) —
|
||||
`<MascotLayer />` rendered inside the surface `<div>` (the `relative
|
||||
min-h-0 flex-1 overflow-hidden` element), after `<WindowLayer />`, so its
|
||||
`absolute inset-0` shares the surface's coordinate space and its ground
|
||||
line is exactly the surface's bottom edge (= the taskbar's top edge).
|
||||
|
||||
## 4. Behavioral View
|
||||
|
||||
**Stakeholders:** an engineer reasoning about "what does the mascot do
|
||||
right now, and why." **Why this View earns its place:** a mascot with an
|
||||
implicit, ad-hoc state machine is unmaintainable the moment a second
|
||||
behavior or reaction is added; this View is the state machine made
|
||||
explicit before any of it is coded.
|
||||
|
||||
### 4.1 Behavior FSM (moment-to-moment autonomy)
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> egg
|
||||
egg --> chick : hatchProgress reaches 1\n(advanceStageIfReady)
|
||||
|
||||
state chick_and_adult_behaviors {
|
||||
[*] --> idle
|
||||
idle --> wander : weighted random pick\non behaviorUntil expiry
|
||||
wander --> idle
|
||||
idle --> peck : weighted random pick
|
||||
peck --> idle
|
||||
idle --> sleep : weighted random pick
|
||||
sleep --> idle
|
||||
wander --> falling : y below ground\n(off a dragged edge, etc.)
|
||||
idle --> dragged : pointerdown + move\npast 5px threshold
|
||||
wander --> dragged : pointerdown + move
|
||||
sleep --> dragged : pointerdown + move\n(interrupts sleep)
|
||||
dragged --> falling : pointerup, released mid-air
|
||||
falling --> land : y reaches ground
|
||||
land --> idle
|
||||
[*] --> react : stimulus dispatched\n(priority/cooldown gated)
|
||||
react --> idle : durationMs elapsed,\nreturns to prior-or-idle
|
||||
}
|
||||
|
||||
chick --> adult : xp reaches ADULT_XP\n(advanceStageIfReady)
|
||||
```
|
||||
|
||||
`dragged` always wins over any autonomous behavior; `sleep` is broken only
|
||||
by a reaction whose `ReactionDef.interruptsSleep` is true (§4.3) or by a
|
||||
drag. Weighted-random idle selection (`weight` field in `BehaviorDef`)
|
||||
picks the next autonomous behavior only when the current one's `next()`
|
||||
returns null past `behaviorUntil` — see
|
||||
[plans/2026-07-20-desktop-mascot.md](../../plans/2026-07-20-desktop-mascot.md)
|
||||
for the concrete weights.
|
||||
|
||||
### 4.2 Tamagotchi lifecycle (long-lived state)
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> egg : first load,\ndefaultModel()
|
||||
egg --> chick : active time >= HATCH_MS (3min)\n+ NameDialog shown
|
||||
chick --> adult : xp >= ADULT_XP (200)
|
||||
adult --> [*]
|
||||
```
|
||||
|
||||
This is a separate state machine from §4.1: §4.1 governs frame-to-frame
|
||||
motion/animation, §4.2 governs the tamagotchi's slow-moving `MascotModel`
|
||||
(persisted, ticked ~1x/sec via `tickLifecycle`, not every frame).
|
||||
|
||||
### 4.3 Example sequence — an environment stimulus becomes a visible reaction
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant SSE as stores/events.ts (SSE)
|
||||
participant Stim as stimuli.ts attachStimuli
|
||||
participant FSM as behavior.ts
|
||||
participant Mascot as Mascot.svelte (canvas)
|
||||
|
||||
SSE->>Stim: liveEvents updates,\nnew head event severity=critical
|
||||
Stim->>Stim: check REACTIONS['alarmed']\ncooldown + priority
|
||||
Stim->>FSM: forceBehavior(rt, 'react', {anim: 'react-alarm', durationMs})
|
||||
FSM->>FSM: interrupts current behavior\n(even sleep, interruptsSleep=true)
|
||||
FSM->>Mascot: rt.behavior = 'react', rt.anim = 'react-alarm'
|
||||
Mascot->>Mascot: next 30fps tick draws\nreact-alarm frame
|
||||
Note over FSM: after durationMs,\nnext() returns to idle
|
||||
```
|
||||
|
||||
## 5. Interfaces View
|
||||
|
||||
**Stakeholders:** an engineer wiring a new store into the mascot's
|
||||
awareness, or auditing what it depends on.
|
||||
|
||||
| Interface | Direction | Shape | Notes |
|
||||
|---|---|---|---|
|
||||
| [`stores/events.ts`](../../web/src/lib/stores/events.ts) `liveEvents` | consumed | `Writable<OikosEvent[]>`, newest-first, ref-counted via `subscribeEvents()` | `OikosEvent.type` families: `approval.*`, `signal.*`, `execution.*`, `health.changed`; `severity: 'info'\|'warning'\|'critical'` |
|
||||
| [`stores/chat.ts`](../../web/src/lib/stores/chat.ts) `streaming` | consumed | `Writable<boolean>` | false→true edge triggers the `thinking` reaction, held while true |
|
||||
| [`stores/activity.ts`](../../web/src/lib/stores/activity.ts) `activityLog` | consumed | derived `Readable<ActivityEntry[]>`, **recomputed wholesale** on every emission — not append-only | new entries with `type === 'knowledge'` detected by diffing entry `id`s between emissions, not by treating it as a stream |
|
||||
| [`stores/context.ts`](../../web/src/lib/stores/context.ts) `summary` | consumed | `Writable<DashboardSummary\|null>` | ambient state (open signal counts via `openSignalCount(summary)`) |
|
||||
| `localStorage['oikos-mascot']` | owned | `MascotModel` JSON, `{ version: 1, stage, name, hatchProgress, happiness, xp, hatchedAt, lastPos: {x}, lastSeen }` | debounced write (~300ms, mirrors [`stores/windows.ts`](../../web/src/lib/stores/windows.ts) wmkit persist) + `beforeunload` flush; `version` field reserved for a future `migrate()`; multi-tab is last-writer-wins (accepted, documented, not solved) |
|
||||
| [`Desktop.svelte`](../../web/src/lib/components/desktop-shell/Desktop.svelte) mount | owned | `<MascotLayer />`, 2-line insertion | see §3 |
|
||||
|
||||
No interface in this table is a write path to the Oikos API — consistent
|
||||
with §1's boundary statement (MASC-11).
|
||||
|
||||
## 6. Extension Guide
|
||||
|
||||
**Stakeholders:** a future engineer adding one new animation, behavior,
|
||||
menu action, or reaction — this is the Viewpoint 4's "why" made concrete
|
||||
as a recipe rather than prose (mirrors [../mbse/framework.md §7](../mbse/framework.md)'s
|
||||
Process Set treatment).
|
||||
|
||||
| To add a... | Touch only | Nothing else changes because |
|
||||
|---|---|---|
|
||||
| **Animation** | Add the name to the `AnimName` union in `types.ts`; add frames to `SPRITES[stage]` in `sprites.ts` | `resolveAnim()` and the renderer are generic over the registry |
|
||||
| **Behavior** | Add the id to `BehaviorId`; add one `BehaviorDef` entry to `BEHAVIORS` in `behavior.ts` | `stepMascot()` and the weighted-random idle selector consume `BEHAVIORS` generically |
|
||||
| **Radial menu action** | Add a `RadialAction` node to `MASCOT_ACTIONS` in `actions.ts` (or call `registerMascotAction()`), optionally nested under `children` | `RadialMenu.svelte` renders whatever tree it's given, including nesting depth |
|
||||
| **Environment reaction** | Add a `ReactionDef` to `REACTIONS` in `stimuli.ts`; wire one `store subscription -> predicate -> emit(reaction)` block inside `attachStimuli()` | priority/cooldown/interrupt dispatch logic in `attachStimuli()` is generic over `REACTIONS` |
|
||||
|
||||
## 7. Verification View
|
||||
|
||||
**Stakeholders:** whoever implements this subsystem and needs to know
|
||||
when it's actually done, not just compiled.
|
||||
|
||||
Manual browser checklist (no automated test harness planned for v1 — see
|
||||
[plans/2026-07-20-desktop-mascot.md](../../plans/2026-07-20-desktop-mascot.md)
|
||||
for the same list in implementation-order context):
|
||||
|
||||
- Egg renders grounded at the surface bottom, wiggles occasionally, survives
|
||||
a reload at the same x (confirm `oikos-mascot` is debounced — no writes
|
||||
fire from mere walking, only from discrete transitions).
|
||||
- Dragging the egg up and releasing triggers a flutter-fall with no
|
||||
tunneling below the taskbar; dragging past the surface edges clamps.
|
||||
- Forcing hatch (debug menu action) transitions to chick, opens the name
|
||||
dialog, and the name persists across reload.
|
||||
- Chick wanders and flips sprite at surface edges, pecks, sleeps
|
||||
autonomously; a plain click (no drag) triggers a pet/hop reaction.
|
||||
- Right-clicking the chicken opens the radial menu centered on it, without
|
||||
triggering the desktop's own right-click menu; a nested submenu (Feed)
|
||||
opens correctly; Escape pops one level then closes; an outside click
|
||||
closes it; the menu stays fully visible when the chicken is near a
|
||||
screen edge or corner.
|
||||
- With one or more windows open (including a maximized one), the chicken
|
||||
visibly walks above them without breaking window drag/resize/close.
|
||||
- Starting a chat and observing it stream triggers the `thinking` reaction
|
||||
for the duration; a simulated knowledge-graph write triggers `eureka`
|
||||
once per cooldown window; a simulated critical signal triggers `alarmed`
|
||||
even while the chicken is asleep.
|
||||
- Resizing the browser viewport re-grounds and re-clamps the chicken.
|
||||
- Both the Terracotta and Carbon themes keep the pixel-art palette legible.
|
||||
- `npm run build` passes with no new errors.
|
||||
376
plans/2026-07-20-desktop-mascot.md
Normal file
376
plans/2026-07-20-desktop-mascot.md
Normal file
@@ -0,0 +1,376 @@
|
||||
# 2026-07-20 — Desktop mascot ("Cluck")
|
||||
|
||||
**Status:** Planned
|
||||
|
||||
## Why
|
||||
|
||||
The web control room is an OS-style desktop shell (icons, floating
|
||||
windows, taskbar) but has no ambient, always-visible signal of what the
|
||||
system is doing — you have to open a window to see a chat streaming, a
|
||||
knowledge-graph write, or a critical signal land. The user asked for a
|
||||
pixel-art chicken mascot that roams the desktop, is draggable and
|
||||
interactable (Sims-style radial right-click menu with nested actions), and
|
||||
is itself a tamagotchi (egg → chick → adult, nameable, persistent) that
|
||||
visibly reacts to real app activity. This plan is scaffolding: every piece
|
||||
(sprites, autonomous behaviors, menu actions, environment reactions) is a
|
||||
data-driven registry so each can be extended independently later without
|
||||
touching the engine code.
|
||||
|
||||
The MBSE subsystem model for this feature (Mission, Requirements,
|
||||
Structural/Behavioral/Interfaces views, Verification) lives at
|
||||
[docs/mascot/README.md](../docs/mascot/README.md) — read it first for the
|
||||
full rationale and diagrams; this document is the concrete file-by-file
|
||||
implementation plan derived from it.
|
||||
|
||||
**Design decisions already made with the user:**
|
||||
- Renders **above windows** (desktop-pet style) — mascot layer `z-45`,
|
||||
radial menu `z-[60]` (must beat the desktop's own right-click menu,
|
||||
which is `z-50`).
|
||||
- Art is **code-drawn pixel art** — string pixel-grids + a palette map in
|
||||
TypeScript, rendered to a small canvas, no binary sprite assets.
|
||||
- Movement is **gravity + ground** — walks along the desktop surface's
|
||||
bottom edge (= the taskbar's top edge), flutter-falls when dropped
|
||||
mid-air.
|
||||
|
||||
## Verified codebase facts this plan builds on
|
||||
|
||||
- `web/src/lib/components/desktop-shell/Desktop.svelte` — the surface div
|
||||
(`relative min-h-0 flex-1 overflow-hidden`) hosts layered children: icon
|
||||
layer `z-0`, `TaskLauncher` wrapper `z-10`, `WindowLayer` `z-40` — every
|
||||
wrapper is `pointer-events-none` with interactive children re-enabling
|
||||
`pointer-events-auto`. The desktop's own right-click menu is `fixed
|
||||
z-50`, dismissed via `<svelte:window onclick={closeMenu}>` + Escape.
|
||||
Bare-surface clicks are gated with `e.currentTarget === e.target`.
|
||||
- Drag pattern to copy: `desktop-shell/DesktopIcon.svelte` —
|
||||
`pointerdown` + `el.setPointerCapture(e.pointerId)`, a 5px movement
|
||||
threshold distinguishes a click from a drag, move/up listeners attached
|
||||
to the element itself (not `window`), position blended via `$derived`
|
||||
between rest and drag-in-progress values.
|
||||
- Game loop convention: `GraphBackground.svelte` drives its canvas with
|
||||
`setTimeout(() => draw(performance.now()), 33)` (~30fps), **not**
|
||||
`requestAnimationFrame` — the code comment there explains some embedding
|
||||
contexts report `document.hidden=true` and suspend rAF, which would
|
||||
freeze the animation; `setTimeout` keeps ticking. Follow this for the
|
||||
mascot loop, and clamp `dt` to 100ms so a throttled/backgrounded tab
|
||||
doesn't produce a physics-breaking huge step on resume.
|
||||
- Persistence convention: hyphenated `oikos-*` localStorage keys
|
||||
(`oikos-desktop-icons`, `oikos-theme`, `oikos-windows`). Window layout
|
||||
uses wmkit's `persist(wm, { key: 'oikos-windows', debounce: 300,
|
||||
autoRestore: true })` — mirror the 300ms debounce for `oikos-mascot`;
|
||||
never write on every animation frame, only on discrete state
|
||||
transitions (behavior change, drag end, stage change, rename).
|
||||
- Runes idiom for cross-component client state: a `.svelte.ts` module with
|
||||
module-level `$state` plus exported getter/mutator functions —
|
||||
`web/src/lib/stores/theme.svelte.ts` is the canonical example
|
||||
(`let current: Theme = $state(initialTheme)`, `getTheme()`,
|
||||
`setTheme()`, `toggleTheme()`).
|
||||
- Awareness sources, all plain Svelte stores already in the codebase:
|
||||
- `web/src/lib/stores/events.ts` — `liveEvents: Writable<OikosEvent[]>`
|
||||
(newest-first, capped at 200), fed by a ref-counted SSE subscription
|
||||
`subscribeEvents()`. `OikosEvent.type` families: `approval.*`,
|
||||
`signal.*`, `execution.*`, `health.changed`; `severity: 'info' |
|
||||
'warning' | 'critical'`.
|
||||
- `web/src/lib/stores/chat.ts` — `streaming: Writable<boolean>`.
|
||||
- `web/src/lib/stores/activity.ts` — `activityLog` is a **derived**
|
||||
store recomputed wholesale from `messages`/`planSteps`/`currentTask`
|
||||
on every emission, **not an append-only log** — detecting a "new"
|
||||
entry (e.g. `type === 'knowledge'`) requires diffing entry `id`s
|
||||
against the previous emission, not just reacting to the store firing.
|
||||
- `web/src/lib/stores/context.ts` — `summary: Writable<DashboardSummary
|
||||
| null>`, `openSignalCount(summary)`.
|
||||
- No `@keyframes`, no `requestAnimationFrame`, no sprite/pixel-art code
|
||||
exists anywhere in the repo today — this is greenfield within the
|
||||
established canvas-loop convention above.
|
||||
|
||||
## File layout
|
||||
|
||||
All new, under `web/src/lib/mascot/`:
|
||||
|
||||
```
|
||||
types.ts PixelGrid, AnimName, MascotStage, BehaviorId, Stimulus, RadialAction
|
||||
palette.ts Record<char, cssColor>; '.' = transparent
|
||||
sprites.ts SPRITES: Record<MascotStage, Partial<Record<AnimName, AnimDef>>> + resolveAnim() fallback
|
||||
render.ts drawFrame(ctx, grid, palette, flip) — stateless canvas painter
|
||||
state.svelte.ts Tamagotchi model: module $state + mutators, debounced persist, versioned schema
|
||||
behavior.ts FSM: BEHAVIORS registry + stepMascot(rt, model, now, dt)
|
||||
stimuli.ts Stimulus bus: REACTIONS registry + attachStimuli(emit), ref-counted
|
||||
actions.ts MASCOT_ACTIONS radial tree + registerMascotAction()
|
||||
Mascot.svelte canvas sprite, 30fps loop, pointer drag/click/contextmenu
|
||||
MascotLayer.svelte pointer-events-none absolute inset-0 z-45 overlay; hosts Mascot + RadialMenu + bubble
|
||||
RadialMenu.svelte round nested menu, fixed z-[60]
|
||||
NameDialog.svelte naming prompt (hatch + rename)
|
||||
```
|
||||
|
||||
**Integration — 2 lines in `Desktop.svelte`:** import `MascotLayer` and
|
||||
render `<MascotLayer />` inside the surface `<div>`, after `<WindowLayer
|
||||
/>`, so its `absolute inset-0` shares the surface's coordinate space and
|
||||
its ground line lands exactly at the surface's bottom edge (the taskbar's
|
||||
top edge).
|
||||
|
||||
## Sprite system (`types.ts`, `palette.ts`, `sprites.ts`, `render.ts`)
|
||||
|
||||
Frames are human-editable string pixel-grids indexing a palette, e.g.:
|
||||
|
||||
```ts
|
||||
export type PixelGrid = string[] // rows of same-length strings, one char per pixel
|
||||
export interface AnimDef { frames: PixelGrid[]; fps: number; loop: boolean }
|
||||
export type AnimName =
|
||||
| 'egg-idle' | 'egg-wiggle' | 'egg-crack' | 'hatch'
|
||||
| 'idle' | 'blink' | 'walk' | 'peck' | 'flap' | 'sleep'
|
||||
| 'dragged' | 'fall-flutter' | 'land'
|
||||
| 'react-eureka' | 'react-alarm' | 'react-think' | 'react-happy'
|
||||
```
|
||||
|
||||
- Grids: egg 12×12, chick 14×14, adult 16×16, all bottom-anchored inside a
|
||||
fixed 20×20 logical canvas so feet land on the ground line consistently
|
||||
across stages.
|
||||
- `SPRITES: Record<MascotStage, Partial<Record<AnimName, AnimDef>>>` is
|
||||
the registry; `resolveAnim(stage, name)` falls back to that stage's
|
||||
`idle` and finally a 1-frame placeholder, so a missing animation never
|
||||
crashes the renderer.
|
||||
- Canvas is sized to the logical grid; screen scale is pure CSS (`width:
|
||||
20*SCALE px; image-rendering: pixelated`), `ctx.imageSmoothingEnabled =
|
||||
false` set once. Horizontal facing flip via `ctx.translate(w,0);
|
||||
ctx.scale(-1,1)` — no mirrored frame data needed.
|
||||
- Initial animation set (2–4 frames each): egg-idle/egg-wiggle/egg-crack/
|
||||
hatch; idle/blink/walk/peck/flap/sleep; dragged/fall-flutter/land;
|
||||
react-think/react-eureka/react-alarm/react-happy.
|
||||
- Frame index = `floor((now - animStart) / 1000 * fps)`, wrapped if
|
||||
`loop`.
|
||||
|
||||
## Behavior engine (`behavior.ts`)
|
||||
|
||||
```ts
|
||||
export interface MascotRuntime {
|
||||
x: number; y: number // sprite bottom-center, surface coords
|
||||
vx: number; vy: number
|
||||
facing: 1 | -1
|
||||
behavior: BehaviorId // 'egg' | 'idle' | 'wander' | 'peck' | 'sleep' | 'dragged' | 'falling' | 'react'
|
||||
behaviorUntil: number
|
||||
anim: AnimName
|
||||
animStart: number
|
||||
reactAnim: AnimName | null
|
||||
bounds: { w: number; h: number }
|
||||
}
|
||||
|
||||
export interface BehaviorDef {
|
||||
id: BehaviorId
|
||||
anim: (rt: MascotRuntime, model: MascotModel) => AnimName
|
||||
enter?: (rt: MascotRuntime) => void
|
||||
tick: (rt: MascotRuntime, dt: number, now: number) => void
|
||||
next: (rt: MascotRuntime, now: number) => BehaviorId | null
|
||||
weight?: number // idle-selectable when > 0; undefined/0 = not auto-picked
|
||||
minMs: number; maxMs: number
|
||||
}
|
||||
export const BEHAVIORS: Record<BehaviorId, BehaviorDef>
|
||||
export function stepMascot(rt: MascotRuntime, model: MascotModel, now: number, dt: number): void
|
||||
export function forceBehavior(rt: MascotRuntime, id: BehaviorId, opts?: { anim?: AnimName; durationMs?: number }): void
|
||||
```
|
||||
|
||||
- **Ground/gravity**: `GROUND_Y = bounds.h`. When above ground and not
|
||||
dragged, behavior is `falling`: `vy += GRAVITY * dt`, capped at a slow
|
||||
flutter terminal velocity, anim `fall-flutter` with occasional `flap`;
|
||||
on reaching ground, snap `y`, brief `land`, then `idle`.
|
||||
- **Wander**: constant `vx = facing * ~40px/s`, flip `facing` at the
|
||||
surface margins.
|
||||
- **Idle selection**: when `now > behaviorUntil` and the current
|
||||
behavior's `next()` returns null, roll a weighted random pick over
|
||||
`BEHAVIORS` entries that declare `weight` — starting weights: idle 3,
|
||||
wander 4, peck 2, sleep 1.
|
||||
- **Non-self-selecting behaviors** (`dragged`, `falling`, `react`) have no
|
||||
`weight` and are entered only via `forceBehavior()` — pointer code calls
|
||||
it for `dragged`, gravity logic for `falling`, the stimulus bus for
|
||||
`react`.
|
||||
- **Egg stage**: `behavior` locked to `'egg'` (periodic `egg-wiggle`,
|
||||
`egg-crack` as `hatchProgress` nears 1); dragging is still allowed (the
|
||||
egg can be picked up and moved).
|
||||
- Loop lives in `Mascot.svelte`: `setTimeout(() => tick(performance.now()),
|
||||
33)` inside an `$effect`, cleared on teardown, `dt` clamped to 100ms.
|
||||
|
||||
## Tamagotchi model (`state.svelte.ts`)
|
||||
|
||||
```ts
|
||||
export type MascotStage = 'egg' | 'chick' | 'adult'
|
||||
export interface MascotModel {
|
||||
version: 1
|
||||
stage: MascotStage
|
||||
name: string | null
|
||||
hatchProgress: number // 0..1, egg stage only
|
||||
happiness: number // 0..100, slow decay, boosted by pet/feed
|
||||
xp: number // chick -> adult growth hook
|
||||
hatchedAt: number | null
|
||||
lastPos: { x: number } | null
|
||||
lastSeen: number // for capped offline egg-incubation progress
|
||||
}
|
||||
export const HATCH_MS = 3 * 60_000 // active time to hatch (demo-friendly)
|
||||
export const ADULT_XP = 200
|
||||
export function grantXp(n: number): void
|
||||
export function feed(): void
|
||||
export function pet(): void
|
||||
export function setName(name: string): void
|
||||
export function tickLifecycle(dt: number): void // called ~1x/sec, not per frame
|
||||
export function advanceStageIfReady(): void
|
||||
```
|
||||
|
||||
- `load()` parses `localStorage['oikos-mascot']`, checks `version`, falls
|
||||
back to `defaultModel()` on mismatch/corruption. `migrate(raw):
|
||||
MascotModel` is a stub switch on `version` for future schema changes —
|
||||
v1 has no migrations to perform, the stub just documents where they go.
|
||||
- Every mutator calls a shared `schedulePersist()` — a 300ms trailing
|
||||
debounce, plus a `beforeunload` flush so a quick reload doesn't lose a
|
||||
rename. `lastPos.x` is written only on behavior transitions and
|
||||
drag-end, never per frame.
|
||||
- Multi-tab races (two tabs both writing `oikos-mascot`) are
|
||||
last-writer-wins — accepted for this scaffolding, not solved; a future
|
||||
pass could listen to the `storage` event if it becomes a real problem.
|
||||
|
||||
## Radial menu (`actions.ts`, `RadialMenu.svelte`)
|
||||
|
||||
```ts
|
||||
export interface RadialAction {
|
||||
id: string
|
||||
label: string
|
||||
icon?: Component // lucide, same convention as the desktop menu
|
||||
visible?: (model: MascotModel) => boolean // e.g. Rename only once hatched
|
||||
children?: RadialAction[]
|
||||
action?: (ctx: MascotActionCtx) => void // leaf only
|
||||
}
|
||||
export const MASCOT_ACTIONS: RadialAction[]
|
||||
export function registerMascotAction(a: RadialAction, parentId?: string): void
|
||||
```
|
||||
|
||||
v1 tree: **Interact** [Pet, Feed → [Seeds, Worm]], **Care** [Sleep, Wake],
|
||||
**Identity** [Rename], **Debug** [Force hatch/stage, Reset].
|
||||
|
||||
- Rendered by `MascotLayer.svelte` as `fixed`, positioned at the
|
||||
chicken's screen center, **`z-[60]`** (must beat the desktop context
|
||||
menu's `z-50`, comfortably above `WindowLayer`'s `z-40`).
|
||||
- Layout: items on a circle (radius ≈ 70px) via polar `transform`s around
|
||||
the menu's anchor point. Open animation: buttons start scale-0 at
|
||||
center and transition to their polar position with `transform 120ms
|
||||
cubic-bezier(.2,1.4,.4,1)`, staggered ~20ms per item — pure CSS, no
|
||||
keyframes, reads as snappy/springy per the "snappy" requirement.
|
||||
- **Nesting**: selecting a node with `children` swaps the ring's contents
|
||||
to those children plus a center "back" button; track the breadcrumb as
|
||||
a local `$state<RadialAction[][]>` stack.
|
||||
- Dismissal mirrors the desktop menu's existing pattern:
|
||||
`<svelte:window onclick={close}>`, Escape pops one level then closes on
|
||||
the next press; the menu's own clicks `stopPropagation()`. Clamp the
|
||||
ring's screen position so it never renders off-viewport (relevant near
|
||||
screen edges/corners).
|
||||
- Opened from `Mascot.svelte`'s `oncontextmenu`:
|
||||
`e.preventDefault(); e.stopPropagation();` then tell `MascotLayer` to
|
||||
open at the sprite's center (the surface's own `onSurfaceContextMenu`
|
||||
already gates on `currentTarget === target`, so this is defensive, not
|
||||
strictly required — but keep it for clarity).
|
||||
|
||||
## Stimulus / reaction system (`stimuli.ts`)
|
||||
|
||||
```ts
|
||||
export interface ReactionDef {
|
||||
id: string
|
||||
anim: AnimName
|
||||
priority: number
|
||||
cooldownMs: number
|
||||
durationMs: number
|
||||
interruptsSleep?: boolean
|
||||
effect?: () => void // e.g. grantXp(5) on eureka
|
||||
}
|
||||
export const REACTIONS: Record<string, ReactionDef>
|
||||
export function attachStimuli(emit: (r: ReactionDef) => void): () => void // ref-counted, owns subscribeEvents()
|
||||
```
|
||||
|
||||
Initial wiring:
|
||||
|
||||
| Source | Trigger | Reaction |
|
||||
|---|---|---|
|
||||
| `chat.ts` `streaming` | `false → true` edge, held while `true` | `thinking` (`react-think`, priority 1) |
|
||||
| `activity.ts` `activityLog` | new entry with `type === 'knowledge'`, detected by diffing entry ids against the last-seen set (see note above — the store is recomputed wholesale) | `eureka` (`react-eureka`, priority 2, cooldown 10s, `effect: grantXp(5)`) |
|
||||
| `events.ts` `liveEvents` | new head event (`id > lastSeen`) with `severity === 'critical'` or `type` starting `signal.` | `alarmed` (`react-alarm`, priority 3, cooldown 15s, `interruptsSleep: true`) |
|
||||
| `events.ts` `liveEvents` | new head event, `type` starting `execution.`, success-ish | `happy` (`react-happy`, priority 1, cooldown 20s) |
|
||||
|
||||
- `attachStimuli` calls `subscribeEvents()` itself and folds its
|
||||
unsubscribe into the returned teardown, so the mascot keeps the SSE
|
||||
stream open (ref-counted alongside any page that also subscribes) only
|
||||
while mounted.
|
||||
- On first emission of `liveEvents`, just record the head event id — do
|
||||
not replay history as reactions on mount.
|
||||
- Dispatch: `emit(reaction)` checks the cooldown map and
|
||||
`priority >= currentReactPriority` (or current behavior isn't
|
||||
`dragged`), then calls `forceBehavior(rt, 'react', { anim,
|
||||
durationMs })`. `dragged` always wins over any reaction; `sleep` is
|
||||
broken only when `interruptsSleep` is true.
|
||||
|
||||
## Implementation order (sized for one PR each)
|
||||
|
||||
1. `types.ts`, `palette.ts`, `sprites.ts` (egg + chick idle/walk only),
|
||||
`render.ts` — pure data/functions, no UI yet.
|
||||
2. `state.svelte.ts` model + debounced persistence — verify by hand via
|
||||
devtools console before wiring any UI.
|
||||
3. `behavior.ts` FSM (egg/idle/wander/falling/dragged) + `Mascot.svelte` +
|
||||
`MascotLayer.svelte`, insert into `Desktop.svelte`. **First visible
|
||||
milestone** — an egg sits on the ground and can be dragged.
|
||||
4. Hatch flow: `tickLifecycle` wired into the loop, egg→chick transition +
|
||||
`NameDialog.svelte`, remaining animations, `peck`/`sleep` behaviors.
|
||||
5. `actions.ts` + `RadialMenu.svelte` (nested rings, open animation,
|
||||
dismissal).
|
||||
6. `stimuli.ts` + the four reaction animations + the wiring table above.
|
||||
7. Adult stage sprites + XP threshold; polish (speech/name bubble, a
|
||||
squash frame on `land`).
|
||||
8. A short "how to add an animation / behavior / action / reaction" doc
|
||||
comment at the top of `sprites.ts`, `behavior.ts`, `actions.ts`, and
|
||||
`stimuli.ts` respectively (this plan's registry tables above become
|
||||
those comments, condensed).
|
||||
|
||||
## Verification checklist
|
||||
|
||||
Run `npm run dev` in `web/`, then in the browser:
|
||||
|
||||
- Egg renders on the ground at the surface bottom, wiggles occasionally,
|
||||
and is at the same `x` after a reload (`oikos-mascot` in localStorage —
|
||||
confirm it is *not* being written on every frame while merely idling or
|
||||
walking, only on discrete transitions).
|
||||
- Dragging the egg up and releasing triggers a flutter-fall back down with
|
||||
no tunneling below the taskbar; dragging past the surface's left/right
|
||||
edges clamps rather than escaping the viewport.
|
||||
- The debug "force hatch" action transitions egg → chick, opens the name
|
||||
dialog, and the chosen name persists across a reload.
|
||||
- The chick wanders and flips its sprite at the surface edges, pecks, and
|
||||
sleeps on its own; a plain click (below the 5px drag threshold) triggers
|
||||
a pet/hop reaction and grants a little xp.
|
||||
- Right-clicking the chicken opens the radial menu centered on it — and
|
||||
right-clicking bare desktop elsewhere still opens the *original* desktop
|
||||
menu, unaffected. The nested Feed submenu opens; Escape pops one level
|
||||
then closes on the next press; clicking outside the menu closes it;
|
||||
the menu stays fully on-screen when the chicken is near a corner.
|
||||
- With a maximized window open, the chicken visibly walks above it; window
|
||||
drag/resize/close still work normally when the chicken merely passes
|
||||
under the cursor (not when it's directly over a button being clicked —
|
||||
known, accepted overlap per the "renders above windows" decision).
|
||||
- Sending a chat message and watching it stream triggers the `thinking`
|
||||
animation for the duration; simulate (or trigger for real) a
|
||||
knowledge-graph write and confirm `eureka` fires once and respects its
|
||||
cooldown on a second write; simulate a critical signal and confirm
|
||||
`alarmed` fires even while the chicken is asleep.
|
||||
- Resizing the browser viewport re-grounds the chicken and keeps it
|
||||
within the new bounds.
|
||||
- Both the Terracotta and Carbon themes keep the pixel palette legible.
|
||||
- `npm run build` passes with no new errors or warnings beyond the
|
||||
pre-existing baseline.
|
||||
|
||||
## Risks
|
||||
|
||||
- Z-index ordering is easy to get subtly wrong: radial menu must be
|
||||
`z-[60]` to beat the desktop context menu's `z-50`; the mascot layer
|
||||
itself is `z-45` (above `WindowLayer`'s `z-40`, below both menus).
|
||||
- The mascot rendering above windows means it can occlude/steal clicks on
|
||||
window chrome directly beneath it — accepted per the "above windows"
|
||||
decision; mitigate by keeping the pointer hitbox tight to the canvas
|
||||
element only (no oversized invisible padding).
|
||||
- `activityLog` is a derived store recomputed wholesale on every
|
||||
emission, not an append-only log — any "new entry" detection must diff
|
||||
entry ids between emissions, never assume the store only ever grows by
|
||||
appending.
|
||||
- `setTimeout`-driven loops can receive large `dt` spikes after tab
|
||||
throttling/backgrounding resumes — clamp `dt` before feeding it into
|
||||
physics or lifecycle ticking.
|
||||
@@ -18,6 +18,7 @@ went sideways, open an investigation.
|
||||
| 2026-07-14 | [Activity timeline](2026-07-14-activity-timeline.md) | In Progress |
|
||||
| 2026-07-17 | [Codebase review, lint audit, and documentation maintenance](2026-07-17-codebase-review-and-cleanup.md) | Report delivered — doc/tooling fixes applied; code refactors pending |
|
||||
| 2026-07-18 | [Session review: three recent sessions](2026-07-18-session-review-three-sessions.md) | Implemented in v0.7.12 — P0.1/P0.2/P1.3/P1.4/P1.5/P1.6/P1.8/P2.10; P1.7 and P2.9 deferred (retry cap covers) |
|
||||
| 2026-07-20 | [Desktop mascot ("Cluck")](2026-07-20-desktop-mascot.md) | Planned — not started |
|
||||
|
||||
## Done
|
||||
|
||||
|
||||
31
web/package-lock.json
generated
31
web/package-lock.json
generated
@@ -13,6 +13,7 @@
|
||||
"d3-force": "^3.0.0",
|
||||
"dompurify": "^3.4.11",
|
||||
"marked": "^18.0.5",
|
||||
"svelte-splitpanes": "^8.0.12",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"uplot": "^1.6.32"
|
||||
},
|
||||
@@ -877,7 +878,6 @@
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
@@ -888,7 +888,6 @@
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
|
||||
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
@@ -899,7 +898,6 @@
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
@@ -909,14 +907,12 @@
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.31",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
|
||||
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
@@ -1320,7 +1316,6 @@
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.11.tgz",
|
||||
"integrity": "sha512-LFuZUkjJ9iF7JZye/aG5XM0SFcQ5VyL0oVX4WJ9dc0Va3R3s0OauX1BESVCb+YN/ol8TAfqGDDAQsTG627Y5kw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"acorn": "^8.9.0"
|
||||
@@ -1677,7 +1672,6 @@
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
|
||||
"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
@@ -1691,7 +1685,6 @@
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
@@ -1844,7 +1837,7 @@
|
||||
"version": "8.64.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.64.0.tgz",
|
||||
"integrity": "sha512-qjhfuTfLXjA4IOzXvz0rTjT01BqEiIgPoUeMwiEjnaHKJMTNo8rH5pYW1a2L/0Dnux2fPC85AeyJoWaGa8WxTA==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
@@ -2066,7 +2059,6 @@
|
||||
"version": "8.17.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
|
||||
"integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
@@ -2139,7 +2131,6 @@
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
|
||||
"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -2166,7 +2157,6 @@
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -2548,7 +2538,6 @@
|
||||
"version": "5.8.1",
|
||||
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.1.tgz",
|
||||
"integrity": "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
@@ -2858,7 +2847,6 @@
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
|
||||
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/espree": {
|
||||
@@ -2896,7 +2884,6 @@
|
||||
"version": "2.2.13",
|
||||
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.13.tgz",
|
||||
"integrity": "sha512-m8jH5hZgJE2RRUK/jjkGPcJEDAV+dYnZYFkosQaPTcE+Yw4xynXHOo6FUdwaWBtdR3b1MMa7wEDTSHeR2VWsGA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
@@ -3364,7 +3351,6 @@
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
|
||||
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.6"
|
||||
@@ -3788,7 +3774,6 @@
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
@@ -3842,7 +3827,6 @@
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
@@ -4504,7 +4488,6 @@
|
||||
"version": "5.56.4",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.4.tgz",
|
||||
"integrity": "sha512-/d0QHehmRuJW8gVz395MTkPcPozxzdjBMBE8oEYGz8O3b9KTMzzQ9ZHJQLuFKOHOPQbU6kx/X4iid/EBBzH7iw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/remapping": "^2.3.4",
|
||||
@@ -4659,6 +4642,15 @@
|
||||
"svelte": "^5.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-splitpanes": {
|
||||
"version": "8.0.12",
|
||||
"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-8.0.12.tgz",
|
||||
"integrity": "sha512-HJ07HgbtY0Q/35TEuJquGy47dtgCVavV7ay9r1FhWRx3boyUs3RpeiHlwMKliznCKy2ZotNeT+8GG+mIoNjgRA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.43.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-toolbelt": {
|
||||
"version": "0.10.6",
|
||||
"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
|
||||
@@ -6315,7 +6307,6 @@
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
|
||||
"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
"d3-force": "^3.0.0",
|
||||
"dompurify": "^3.4.11",
|
||||
"marked": "^18.0.5",
|
||||
"svelte-splitpanes": "^8.0.12",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"uplot": "^1.6.32"
|
||||
}
|
||||
|
||||
@@ -1,47 +1,42 @@
|
||||
<script lang="ts">
|
||||
import Chat from './pages/Chat.svelte'
|
||||
import Overview from './pages/Overview.svelte'
|
||||
import KnowledgeBase from './pages/KnowledgeBase.svelte'
|
||||
import Ops from './pages/Ops.svelte'
|
||||
import Signals from './pages/Signals.svelte'
|
||||
import EntityDetail from './pages/EntityDetail.svelte'
|
||||
import Knowledge from './pages/Knowledge.svelte'
|
||||
import Learning from './pages/Learning.svelte'
|
||||
import Config from './pages/Config.svelte'
|
||||
import EntityDesktop from '$lib/components/EntityDesktop.svelte'
|
||||
import MinimizedWindowsBar from '$lib/components/MinimizedWindowsBar.svelte'
|
||||
import { newChat } from '$lib/stores/chat'
|
||||
import { summary, subscribeContext, openSignalCount } from '$lib/stores/context'
|
||||
import { currentTask } from '$lib/stores/workspace'
|
||||
import Desktop from '$lib/components/desktop-shell/Desktop.svelte'
|
||||
import { subscribeContext } from '$lib/stores/context'
|
||||
import { openAppWindow, openEntityWindow } from '$lib/stores/windows'
|
||||
import { isConfigured } from '$lib/config'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { onMount } from 'svelte'
|
||||
import { processPendingCallback, initOIDC } from '$lib/oidc'
|
||||
import * as Sidebar from '$lib/components/ui/sidebar'
|
||||
import * as Sheet from '$lib/components/ui/sheet'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Separator } from '$lib/components/ui/separator'
|
||||
import { VERSION } from '$lib/version'
|
||||
import { Toaster } from '$lib/components/ui/sonner'
|
||||
import PlusIcon from '@lucide/svelte/icons/plus'
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import PanelRightIcon from '@lucide/svelte/icons/panel-right'
|
||||
import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
|
||||
import SirenIcon from '@lucide/svelte/icons/siren'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings'
|
||||
import PaletteIcon from '@lucide/svelte/icons/palette'
|
||||
import { getTheme, toggleTheme, THEME_LABELS } from '$lib/stores/theme.svelte'
|
||||
|
||||
let page = $state('overview')
|
||||
let routeParam = $state('')
|
||||
let drawerOpen = $state(false)
|
||||
let configured = $state(isConfigured())
|
||||
|
||||
const approvalsPending = $derived($summary?.approvals_pending ?? 0)
|
||||
const openSignals = $derived(openSignalCount($summary))
|
||||
// Old hash routes (#/kb, #/entity/<slug>, ...) from the sidebar-shell era —
|
||||
// translated into opening the equivalent window once, then cleared, so
|
||||
// links/bookmarks from before the desktop redesign keep working without
|
||||
// reintroducing a router.
|
||||
const LEGACY_APP_ROUTES: Record<string, string> = {
|
||||
overview: 'tasks',
|
||||
chat: 'tasks',
|
||||
kb: 'kb',
|
||||
entities: 'kb',
|
||||
graph: 'kb',
|
||||
ops: 'ops',
|
||||
signals: 'signals',
|
||||
knowledge: 'knowledge',
|
||||
learning: 'learning'
|
||||
}
|
||||
|
||||
function resolveLegacyHash() {
|
||||
const path = location.hash.slice(2)
|
||||
if (!path) return
|
||||
const [head, ...rest] = path.split('/')
|
||||
if (head === 'entity' && rest.length) {
|
||||
openEntityWindow(rest.join('/'))
|
||||
} else if (LEGACY_APP_ROUTES[head]) {
|
||||
openAppWindow(LEGACY_APP_ROUTES[head])
|
||||
}
|
||||
history.replaceState(null, '', location.pathname + location.search)
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (await processPendingCallback()) {
|
||||
@@ -49,21 +44,7 @@
|
||||
} else if (!configured) {
|
||||
if (await initOIDC()) configured = true
|
||||
}
|
||||
|
||||
function sync() {
|
||||
const path = location.hash.slice(2) || 'overview'
|
||||
const [head, ...rest] = path.split('/')
|
||||
// Entities + Graph were merged into Knowledge Base — keep old links working.
|
||||
if (head === 'entities' || head === 'graph') {
|
||||
location.hash = '#/kb'
|
||||
return
|
||||
}
|
||||
page = head || 'overview'
|
||||
routeParam = rest.join('/')
|
||||
}
|
||||
sync()
|
||||
window.addEventListener('hashchange', sync)
|
||||
return () => window.removeEventListener('hashchange', sync)
|
||||
resolveLegacyHash()
|
||||
})
|
||||
|
||||
// Context (dashboard summary + approvals poll) and the SSE stream both
|
||||
@@ -72,23 +53,6 @@
|
||||
if (!configured) return
|
||||
return subscribeContext()
|
||||
})
|
||||
|
||||
function navigate(p: string) {
|
||||
location.hash = '#/' + p
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
toggleTheme()
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ id: 'overview', label: 'Tasks', icon: ListTodoIcon },
|
||||
{ id: 'kb', label: 'Knowledge Base', icon: DatabaseIcon },
|
||||
{ id: 'ops', label: 'Operations', icon: ShieldCheckIcon, badge: () => approvalsPending },
|
||||
{ id: 'signals', label: 'Signals', icon: SirenIcon, badge: () => openSignals },
|
||||
{ id: 'knowledge', label: 'Knowledge', icon: SearchIcon },
|
||||
{ id: 'learning', label: 'Learning', icon: TrendingUpIcon }
|
||||
]
|
||||
</script>
|
||||
|
||||
{#if !configured}
|
||||
@@ -97,161 +61,6 @@
|
||||
onCancel={isConfigured() ? () => (configured = true) : undefined}
|
||||
/>
|
||||
{:else}
|
||||
|
||||
<Toaster />
|
||||
|
||||
<Sidebar.Provider class="h-svh" style="--header-height: calc(var(--spacing) * 12);">
|
||||
<Sidebar.Root collapsible="icon" variant="inset">
|
||||
<Sidebar.Header>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
class="data-[slot=sidebar-menu-button]:!p-1.5"
|
||||
onclick={() => navigate('overview')}
|
||||
tooltipContent={`Oikos ${VERSION}`}
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<svg viewBox="0 0 91 100" class="!size-5 shrink-0" fill="var(--primary)" aria-hidden="true" role="img">
|
||||
<title>Oikos</title>
|
||||
<path d="m45.601 1q20.993 0 33.71 15.946 10.799 13.625 10.799 31.287 0 12.414-5.9548 25.131-5.9548 12.717-16.451 19.176-10.395 6.4592-23.213 6.4592-20.892 0-33.205-16.653-10.395-14.029-10.395-31.489 0-12.717 6.2577-25.232 6.3584-12.616 16.653-18.57 10.295-6.0556 21.801-6.0556zm-3.128 6.5605q-5.3492 0-10.799 3.2296-5.3492 3.1287-8.68 11.102-3.3305 7.9735-3.3305 20.488 0 20.185 7.973 34.82 8.0743 14.634 21.195 14.634 9.7896 0 16.149-8.0743 6.3584-8.0743 6.3584-27.755 0-24.627-10.597-38.756-7.1657-9.6888-18.268-9.6888z" />
|
||||
</svg>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
<div class="group-data-[collapsible=icon]:hidden px-2.5 pb-1">
|
||||
<span class="text-[11px] text-muted-foreground select-none">{VERSION}</span>
|
||||
</div>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
|
||||
onclick={() => { newChat(); navigate('chat') }}
|
||||
tooltipContent="New task"
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<PlusIcon />
|
||||
<span>New task</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.Header>
|
||||
|
||||
<Sidebar.Content>
|
||||
<Sidebar.Group>
|
||||
<Sidebar.Menu>
|
||||
{#each navItems as item}
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton
|
||||
isActive={page === item.id || (item.id === 'overview' && page === 'chat')}
|
||||
onclick={() => navigate(item.id)}
|
||||
tooltipContent={item.label}
|
||||
>
|
||||
{#snippet child({ props })}
|
||||
<button {...props}>
|
||||
<item.icon />
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
{/snippet}
|
||||
</Sidebar.MenuButton>
|
||||
{#if item.badge?.()}
|
||||
<Sidebar.MenuBadge>{item.badge()}</Sidebar.MenuBadge>
|
||||
{/if}
|
||||
</Sidebar.MenuItem>
|
||||
{/each}
|
||||
</Sidebar.Menu>
|
||||
</Sidebar.Group>
|
||||
</Sidebar.Content>
|
||||
|
||||
<Sidebar.Footer>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={() => (drawerOpen = true)}
|
||||
title="Chat over the current page without navigating away"
|
||||
>
|
||||
<PanelRightIcon />
|
||||
<span>Chat drawer</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={cycleTheme}
|
||||
title="Cycle theme"
|
||||
>
|
||||
<PaletteIcon />
|
||||
<span>{THEME_LABELS[getTheme()]}</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="justify-start gap-2"
|
||||
onclick={() => (configured = false)}
|
||||
title="Server connection settings"
|
||||
>
|
||||
<SettingsIcon />
|
||||
<span>Connection</span>
|
||||
</Button>
|
||||
</Sidebar.Footer>
|
||||
</Sidebar.Root>
|
||||
|
||||
<Sidebar.Inset class="min-h-0 overflow-hidden">
|
||||
<header class="flex h-(--header-height) shrink-0 items-center gap-1 border-b px-4 lg:gap-2 lg:px-6">
|
||||
<Sidebar.Trigger class="-ms-1" />
|
||||
<Separator orientation="vertical" class="mx-2 data-[orientation=vertical]:h-4" />
|
||||
{#if page === 'chat'}
|
||||
{@const goalText = $currentTask?.goal ? $currentTask.goal.replace(/[*_`~#]|\[.*?\]\(.*?\)/g, '') : 'New Task'}
|
||||
<button type="button" class="shrink-0 text-sm text-muted-foreground hover:text-foreground" onclick={() => navigate('overview')}>Tasks</button>
|
||||
<span class="shrink-0 text-muted-foreground">/</span>
|
||||
<span class="min-w-0 flex-1 truncate text-base font-medium" title={goalText}>
|
||||
{truncateMiddle(goalText, 100)}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-base font-medium capitalize">{page === 'entity' ? routeParam : page === 'kb' ? 'Knowledge Base' : page === 'overview' ? 'Tasks' : page}</span>
|
||||
{/if}
|
||||
</header>
|
||||
<main class="min-h-0 flex-1 overflow-hidden">
|
||||
{#if page === 'overview'}
|
||||
<Overview />
|
||||
{:else if page === 'kb'}
|
||||
<KnowledgeBase />
|
||||
{:else if page === 'entity' && routeParam}
|
||||
<EntityDetail slug={routeParam} />
|
||||
{:else if page === 'ops'}
|
||||
<Ops />
|
||||
{:else if page === 'signals'}
|
||||
<Signals />
|
||||
{:else if page === 'knowledge'}
|
||||
<Knowledge />
|
||||
{:else if page === 'learning'}
|
||||
<Learning />
|
||||
{:else}
|
||||
<Chat />
|
||||
{/if}
|
||||
</main>
|
||||
<MinimizedWindowsBar />
|
||||
</Sidebar.Inset>
|
||||
</Sidebar.Provider>
|
||||
|
||||
<Sheet.Root bind:open={drawerOpen}>
|
||||
<Sheet.Content side="right" class="w-[400px] p-0 sm:max-w-[400px]">
|
||||
<Sheet.Header class="sr-only">
|
||||
<Sheet.Title>Nomos chat</Sheet.Title>
|
||||
<Sheet.Description>Persistent chat drawer</Sheet.Description>
|
||||
</Sheet.Header>
|
||||
<div class="flex h-full flex-col">
|
||||
<Chat showRail={false} />
|
||||
</div>
|
||||
</Sheet.Content>
|
||||
</Sheet.Root>
|
||||
|
||||
<EntityDesktop />
|
||||
|
||||
<Toaster />
|
||||
<Desktop />
|
||||
{/if}
|
||||
|
||||
@@ -289,3 +289,32 @@ a {
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* svelte-splitpanes theming (TaskContextPanel, SessionChatWindow rail) —
|
||||
mapped onto the app's border/primary tokens instead of the library's
|
||||
default-theme, so splitters follow the terracotta/dark theme toggle. */
|
||||
.splitpanes.oikos-theme .splitpanes__pane {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.splitpanes.oikos-theme .splitpanes__splitter {
|
||||
background-color: transparent;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.splitpanes.oikos-theme .splitpanes__splitter:hover,
|
||||
.splitpanes.oikos-theme .splitpanes__splitter.splitpanes__splitter__active {
|
||||
background-color: color-mix(in oklab, var(--primary) 30%, transparent);
|
||||
}
|
||||
|
||||
.oikos-theme.splitpanes--horizontal > .splitpanes__splitter {
|
||||
height: 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.oikos-theme.splitpanes--vertical > .splitpanes__splitter {
|
||||
width: 6px;
|
||||
border-left: 1px solid var(--border);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
@@ -50,6 +50,21 @@ export async function fetchMessages(sessionId: string): Promise<Message[]> {
|
||||
return data.messages ?? []
|
||||
}
|
||||
|
||||
// null distinguishes "session doesn't exist" (404 — the session was deleted,
|
||||
// or a persisted/deep-linked window id was never valid) from a transient
|
||||
// fetch failure, which should keep returning []/retrying rather than
|
||||
// permanently flip a window into a "not found" state. Only the initial
|
||||
// per-window load (chat.ts's loadSessionChat) needs this distinction — the
|
||||
// polling loops keep using fetchMessages, where swallowing a blip into []
|
||||
// and trying again next tick is the right behavior.
|
||||
export async function fetchMessagesOrNotFound(sessionId: string): Promise<Message[] | null> {
|
||||
const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`)
|
||||
if (res.status === 404) return null
|
||||
if (!res.ok) return []
|
||||
const data = await res.json()
|
||||
return data.messages ?? []
|
||||
}
|
||||
|
||||
export async function deleteSession(sessionId: string): Promise<boolean> {
|
||||
const res = await fetchWithAuth(`${BASE}/sessions/${sessionId}`, { method: 'DELETE' })
|
||||
return res.ok
|
||||
|
||||
61
web/src/lib/apps.test.ts
Normal file
61
web/src/lib/apps.test.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
|
||||
// apps.ts wires in every page component for real use, but that drags a
|
||||
// heavy transitive graph into a unit test for no benefit here (and one of
|
||||
// those pages imports svelte-sonner, which fails to resolve under vitest's
|
||||
// bundled Vite — an unrelated, pre-existing package quirk). These tests only
|
||||
// care about the registry's own shape (ids, sizes, window-id helpers), so
|
||||
// stub the component imports out rather than pull all of that in.
|
||||
vi.mock('../pages/Overview.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/KnowledgeBase.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Ops.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Signals.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Knowledge.svelte', () => ({ default: {} }))
|
||||
vi.mock('../pages/Learning.svelte', () => ({ default: {} }))
|
||||
|
||||
import { APPS, appById, appWindowId, appIdFromWindowId } from './apps'
|
||||
|
||||
describe('APPS registry', () => {
|
||||
it('has unique, non-empty ids', () => {
|
||||
const ids = APPS.map((a) => a.id)
|
||||
expect(ids.length).toBeGreaterThan(0)
|
||||
expect(new Set(ids).size).toBe(ids.length)
|
||||
for (const id of ids) expect(id).not.toBe('')
|
||||
})
|
||||
|
||||
it('gives every app a positive default size', () => {
|
||||
for (const app of APPS) {
|
||||
expect(app.width).toBeGreaterThan(0)
|
||||
expect(app.height).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('is indexed by id in appById', () => {
|
||||
for (const app of APPS) {
|
||||
expect(appById.get(app.id)).toBe(app)
|
||||
}
|
||||
expect(appById.size).toBe(APPS.length)
|
||||
})
|
||||
})
|
||||
|
||||
describe('appWindowId / appIdFromWindowId', () => {
|
||||
it('round-trips an app id through its window id', () => {
|
||||
for (const app of APPS) {
|
||||
expect(appIdFromWindowId(appWindowId(app.id))).toBe(app.id)
|
||||
}
|
||||
})
|
||||
|
||||
it('returns null for ids that are not app windows', () => {
|
||||
expect(appIdFromWindowId('session:abc-123')).toBeNull()
|
||||
expect(appIdFromWindowId('host:strong')).toBeNull()
|
||||
expect(appIdFromWindowId('new-task')).toBeNull()
|
||||
})
|
||||
|
||||
it('namespaces window ids so they cannot collide with entity slugs', () => {
|
||||
// Entity slugs are bare `type:identifier` strings (see windows.ts's
|
||||
// openEntityWindow) — app window ids must never look like one.
|
||||
for (const app of APPS) {
|
||||
expect(appWindowId(app.id).startsWith('app:')).toBe(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
130
web/src/lib/apps.ts
Normal file
130
web/src/lib/apps.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
// The desktop's app registry — single source of truth for what shows up as
|
||||
// a desktop icon and what opens in its window. Adding a new app is one entry
|
||||
// here; nothing else needs to change (Desktop.svelte renders icons from
|
||||
// APPS, WindowLayer.svelte resolves `app:<id>` window ids back through
|
||||
// appById, Taskbar.svelte reads title/icon the same way). Compare to the old
|
||||
// App.svelte's hardcoded navItems array + if/else page branch, which required
|
||||
// touching three places (nav list, header title, main content branch) to add
|
||||
// one page.
|
||||
import type { Component } from 'svelte'
|
||||
import type { DashboardSummary } from '$lib/api'
|
||||
import { openSignalCount } from '$lib/stores/context'
|
||||
import Overview from '../pages/Overview.svelte'
|
||||
import KnowledgeBase from '../pages/KnowledgeBase.svelte'
|
||||
import Ops from '../pages/Ops.svelte'
|
||||
import Signals from '../pages/Signals.svelte'
|
||||
import Knowledge from '../pages/Knowledge.svelte'
|
||||
import Learning from '../pages/Learning.svelte'
|
||||
import Settings from '../pages/Settings.svelte'
|
||||
import ListTodoIcon from '@lucide/svelte/icons/list-todo'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import ShieldCheckIcon from '@lucide/svelte/icons/shield-check'
|
||||
import SirenIcon from '@lucide/svelte/icons/siren'
|
||||
import SearchIcon from '@lucide/svelte/icons/search'
|
||||
import TrendingUpIcon from '@lucide/svelte/icons/trending-up'
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings'
|
||||
|
||||
export interface AppDef {
|
||||
id: string
|
||||
title: string
|
||||
icon: Component
|
||||
component: Component
|
||||
width: number
|
||||
height: number
|
||||
minWidth?: number
|
||||
minHeight?: number
|
||||
// Pure function over the shared dashboard summary — used for both the
|
||||
// desktop icon's badge and the taskbar button's badge, so a new app that
|
||||
// wants one just supplies this instead of each surface reimplementing it.
|
||||
badge?: (summary: DashboardSummary | null) => number
|
||||
}
|
||||
|
||||
export const APPS: AppDef[] = [
|
||||
{
|
||||
id: 'tasks',
|
||||
title: 'Tasks',
|
||||
icon: ListTodoIcon,
|
||||
component: Overview,
|
||||
width: 960,
|
||||
height: 680,
|
||||
minWidth: 480,
|
||||
minHeight: 420
|
||||
},
|
||||
{
|
||||
id: 'kb',
|
||||
title: 'Knowledge Base',
|
||||
icon: DatabaseIcon,
|
||||
component: KnowledgeBase,
|
||||
width: 1000,
|
||||
height: 700,
|
||||
minWidth: 520,
|
||||
minHeight: 420
|
||||
},
|
||||
{
|
||||
id: 'ops',
|
||||
title: 'Operations',
|
||||
icon: ShieldCheckIcon,
|
||||
component: Ops,
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => s?.approvals_pending ?? 0
|
||||
},
|
||||
{
|
||||
id: 'signals',
|
||||
title: 'Signals',
|
||||
icon: SirenIcon,
|
||||
component: Signals,
|
||||
width: 860,
|
||||
height: 620,
|
||||
minWidth: 480,
|
||||
minHeight: 360,
|
||||
badge: (s) => openSignalCount(s)
|
||||
},
|
||||
{
|
||||
id: 'knowledge',
|
||||
title: 'Knowledge',
|
||||
icon: SearchIcon,
|
||||
component: Knowledge,
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
},
|
||||
{
|
||||
id: 'learning',
|
||||
title: 'Learning',
|
||||
icon: TrendingUpIcon,
|
||||
component: Learning,
|
||||
width: 800,
|
||||
height: 600,
|
||||
minWidth: 440,
|
||||
minHeight: 340
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
title: 'Settings',
|
||||
icon: SettingsIcon,
|
||||
component: Settings,
|
||||
width: 640,
|
||||
height: 480,
|
||||
minWidth: 480,
|
||||
minHeight: 360
|
||||
}
|
||||
]
|
||||
|
||||
export const appById = new Map(APPS.map((a) => [a.id, a]))
|
||||
|
||||
// Window ids are namespaced so WindowLayer.svelte can tell at a glance which
|
||||
// content branch owns an id: `app:<id>` for registry apps, `session:<id>`
|
||||
// for task chat windows (see windows.ts), anything else is an entity slug.
|
||||
const APP_PREFIX = 'app:'
|
||||
|
||||
export function appWindowId(id: string): string {
|
||||
return `${APP_PREFIX}${id}`
|
||||
}
|
||||
|
||||
export function appIdFromWindowId(windowId: string): string | null {
|
||||
return windowId.startsWith(APP_PREFIX) ? windowId.slice(APP_PREFIX.length) : null
|
||||
}
|
||||
@@ -4,11 +4,12 @@
|
||||
// window (its own per-session store bundle from chat.ts's chatFor) render
|
||||
// through this, so the message-bubble/markdown styling lives in one place
|
||||
// instead of being copy-pasted between the two.
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import { activityLog } from '$lib/stores/activity'
|
||||
import AgentIndicator from '$lib/components/AgentIndicator.svelte'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import CornerDownLeftIcon from '@lucide/svelte/icons/corner-down-left'
|
||||
import RefreshCwIcon from '@lucide/svelte/icons/refresh-cw'
|
||||
import SquareIcon from '@lucide/svelte/icons/square'
|
||||
import { marked } from 'marked'
|
||||
@@ -44,6 +45,44 @@
|
||||
let scrolledUp = $state(false)
|
||||
let container = $state<HTMLDivElement | null>(null)
|
||||
|
||||
// Resizable input area — drag the splitter above it to grow the textarea,
|
||||
// capped so it can't swallow the whole thread. Both the minimum and the
|
||||
// default are exactly one line: measured from the textarea's own
|
||||
// line-height/padding/border rather than hardcoded, so it stays correct if
|
||||
// that styling ever changes.
|
||||
let threadHeight = $state(0)
|
||||
let textareaRef = $state<HTMLTextAreaElement | null>(null)
|
||||
let inputWrapperRef = $state<HTMLDivElement | null>(null)
|
||||
let oneLinePx = $state(64)
|
||||
$effect(() => {
|
||||
if (!textareaRef || !inputWrapperRef) return
|
||||
const taCs = getComputedStyle(textareaRef)
|
||||
const lineHeight = parseFloat(taCs.lineHeight)
|
||||
if (!Number.isFinite(lineHeight)) return
|
||||
const taBoxY =
|
||||
parseFloat(taCs.paddingTop) + parseFloat(taCs.paddingBottom) + parseFloat(taCs.borderTopWidth) + parseFloat(taCs.borderBottomWidth)
|
||||
// The wrapper's own padding/border (space around the textarea, not part
|
||||
// of it) also has to fit inside the minimum, or the textarea gets
|
||||
// squeezed below one line once the pane is dragged down to it.
|
||||
const wrapperCs = getComputedStyle(inputWrapperRef)
|
||||
const wrapperBoxY =
|
||||
parseFloat(wrapperCs.paddingTop) +
|
||||
parseFloat(wrapperCs.paddingBottom) +
|
||||
parseFloat(wrapperCs.borderTopWidth) +
|
||||
parseFloat(wrapperCs.borderBottomWidth)
|
||||
oneLinePx = lineHeight + taBoxY + wrapperBoxY
|
||||
})
|
||||
const inputMinSize = $derived(threadHeight > 0 ? (oneLinePx / threadHeight) * 100 : 12)
|
||||
|
||||
let inputSize = $state(12)
|
||||
let inputSizeDefaulted = false
|
||||
$effect(() => {
|
||||
if (!inputSizeDefaulted && threadHeight > 0) {
|
||||
inputSize = inputMinSize
|
||||
inputSizeDefaulted = true
|
||||
}
|
||||
})
|
||||
|
||||
function isNearBottom(): boolean {
|
||||
if (!container) return true
|
||||
const { scrollTop, scrollHeight, clientHeight } = container
|
||||
@@ -87,7 +126,9 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
<div class="flex h-full min-h-0 min-w-0 flex-col" bind:clientHeight={threadHeight}>
|
||||
<Splitpanes horizontal theme="oikos-theme" dblClickSplitter={false} class="min-h-0 flex-1">
|
||||
<Pane class="flex flex-col">
|
||||
<div class="min-h-0 flex-1 overflow-y-auto" bind:this={container} onscroll={onScroll}>
|
||||
<div class="mx-auto flex max-w-3xl flex-col gap-5 p-4">
|
||||
{#if messages.length === 0}
|
||||
@@ -169,34 +210,52 @@
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Pane>
|
||||
|
||||
<div class="border-t bg-card/50 p-3 input-ornament relative">
|
||||
<form
|
||||
class="mx-auto flex max-w-3xl items-end gap-2"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Ask Nomos anything…"
|
||||
rows={2}
|
||||
class="max-h-40 min-h-0 resize-none"
|
||||
disabled={streaming}
|
||||
/>
|
||||
{#if streaming}
|
||||
<Button type="button" size="icon" variant="destructive" onclick={onCancel} aria-label="Stop">
|
||||
<SquareIcon />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Send">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
<Pane bind:size={inputSize} minSize={inputMinSize} maxSize={45} class="flex flex-col">
|
||||
<div class="flex h-full min-h-0 flex-col border-t bg-card/50 p-3 input-ornament relative" bind:this={inputWrapperRef}>
|
||||
<form
|
||||
class="relative mx-auto flex h-full w-full max-w-3xl"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:ref={textareaRef}
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="Ask Nomos anything…"
|
||||
class="h-full max-h-none min-h-0 resize-none rounded-2xl px-4 py-3 pr-12 field-sizing-fixed"
|
||||
disabled={streaming}
|
||||
/>
|
||||
{#if streaming}
|
||||
<Button
|
||||
type="button"
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
class="absolute right-2 bottom-2 rounded-lg"
|
||||
onclick={onCancel}
|
||||
aria-label="Stop"
|
||||
>
|
||||
<SquareIcon class="size-3.5" />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
type="submit"
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
class="absolute right-2 bottom-2 rounded-lg"
|
||||
disabled={!input.trim()}
|
||||
aria-label="Send"
|
||||
>
|
||||
<CornerDownLeftIcon class="size-3.5" />
|
||||
</Button>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Global floating-window layer — mounted once in App.svelte, above every
|
||||
// page, so an entity opened from Knowledge Base, chat, or anywhere else
|
||||
// lands in the same window stack instead of each page owning its own
|
||||
// single-entity sidebar/sheet. See $lib/stores/windows.ts. Minimized
|
||||
// windows reopen from MinimizedWindowsBar, mounted separately inside the
|
||||
// page layout (not here) so it takes real space instead of floating over
|
||||
// content — see that component for why.
|
||||
import { dk, wmState, openEntityWindow } from '$lib/stores/windows'
|
||||
import EntityDetailContent from './EntityDetailContent.svelte'
|
||||
import SessionChatWindow from './SessionChatWindow.svelte'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import MinusIcon from '@lucide/svelte/icons/minus'
|
||||
|
||||
const SESSION_PREFIX = 'session:'
|
||||
</script>
|
||||
|
||||
<div use:dk.desktop class="pointer-events-none fixed inset-0 z-40">
|
||||
{#each $wmState.order as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{#if win}
|
||||
<section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
|
||||
<header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
|
||||
<span data-wm-title class="flex min-w-0 flex-1 items-center self-stretch truncate font-mono text-xs font-medium">{win.title}</span>
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
data-wm-minimize
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Minimize {win.title}"
|
||||
>
|
||||
<MinusIcon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-close
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div data-wm-content class="min-h-0 flex-1 overflow-hidden">
|
||||
{#key id}
|
||||
{#if id.startsWith(SESSION_PREFIX)}
|
||||
<SessionChatWindow sessionId={id.slice(SESSION_PREFIX.length)} />
|
||||
{:else}
|
||||
<EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script lang="ts">
|
||||
// Deliberately mounted inside the page layout (App.svelte's Sidebar.Inset
|
||||
// column, not alongside EntityDesktop's full-viewport overlay) — as a real
|
||||
// flex child it takes its own height and the page content above it
|
||||
// (min-h-0 flex-1) shrinks to make room, instead of floating over
|
||||
// whatever's scrolled to the bottom.
|
||||
import { wm, wmState } from '$lib/stores/windows'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
|
||||
|
||||
const minimizedIds = $derived($wmState.order.filter((id) => $wmState.windows[id]?.stage === 'minimized'))
|
||||
|
||||
function restoreWindow(id: string) {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if minimizedIds.length}
|
||||
<div class="flex shrink-0 items-center gap-1.5 overflow-x-auto border-t bg-muted/30 px-2 py-1.5">
|
||||
{#each minimizedIds as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{#if win}
|
||||
<button
|
||||
type="button"
|
||||
class="group flex max-w-56 shrink-0 items-center gap-2 rounded-md border bg-card py-1 pr-1.5 pl-2.5 font-mono text-xs hover:bg-muted"
|
||||
onclick={() => restoreWindow(id)}
|
||||
title={win.title}
|
||||
>
|
||||
<span class="min-w-0 truncate">{truncateMiddle(win.title, 32)}</span>
|
||||
<Maximize2Icon class="size-3 shrink-0 text-muted-foreground group-hover:text-foreground" aria-hidden="true" />
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -6,6 +6,7 @@
|
||||
// these can be open (and independently live) at once without the "which
|
||||
// one's on screen" guarding the main page's singleton stores need.
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import { chatFor, loadSessionChat, sendSessionMessage, cancelSessionStream, stopSessionPolling, dismissError, chatErrors } from '$lib/stores/chat'
|
||||
import ChatThread from '$lib/components/ChatThread.svelte'
|
||||
import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'
|
||||
@@ -20,6 +21,7 @@
|
||||
const chatStreaming = chat.streaming
|
||||
const chatConnectionState = chat.connectionState
|
||||
const chatError = chat.error
|
||||
const chatNotFound = chat.notFound
|
||||
let loading = $state(true)
|
||||
|
||||
onMount(async () => {
|
||||
@@ -29,63 +31,37 @@
|
||||
|
||||
onDestroy(() => stopSessionPolling(sessionId))
|
||||
|
||||
// Resizable right rail — same behavior as Chat.svelte's, sized smaller by
|
||||
// default since task windows open narrower than the full page.
|
||||
const RAIL_MIN = 220
|
||||
const RAIL_MAX = 480
|
||||
let railWidth = $state(260)
|
||||
let resizing = $state(false)
|
||||
|
||||
function startResize(e: PointerEvent) {
|
||||
e.preventDefault()
|
||||
resizing = true
|
||||
const startX = e.clientX
|
||||
const startW = railWidth
|
||||
function move(ev: PointerEvent) {
|
||||
railWidth = Math.min(RAIL_MAX, Math.max(RAIL_MIN, startW + (startX - ev.clientX)))
|
||||
}
|
||||
function up() {
|
||||
resizing = false
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
}
|
||||
// Resizable right rail — sized smaller by default since task windows open
|
||||
// narrower than the full page.
|
||||
let railSize = $state(24)
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0">
|
||||
{#if loading}
|
||||
<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">Loading…</div>
|
||||
{:else}
|
||||
<ChatThread
|
||||
messages={$chatMessages}
|
||||
streaming={$chatStreaming}
|
||||
connectionState={$chatConnectionState}
|
||||
error={$chatError}
|
||||
chatErrors={$chatErrors}
|
||||
onSend={(text) => sendSessionMessage(sessionId, text)}
|
||||
onCancel={() => cancelSessionStream(sessionId)}
|
||||
onReconnect={() => loadSessionChat(sessionId)}
|
||||
onDismissError={dismissError}
|
||||
/>
|
||||
|
||||
<div class="flex shrink-0" style="width: {railWidth}px">
|
||||
<button
|
||||
type="button"
|
||||
class="group/rz relative w-1.5 shrink-0 cursor-col-resize touch-none"
|
||||
onpointerdown={startResize}
|
||||
aria-label="Resize task panel"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors {resizing
|
||||
? 'bg-primary/60'
|
||||
: 'bg-border group-hover/rz:bg-primary/50'}"
|
||||
></span>
|
||||
</button>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<TaskContextPanel {sessionId} />
|
||||
</div>
|
||||
{:else if $chatNotFound}
|
||||
<div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center">
|
||||
<p class="text-sm text-muted-foreground">Task not found.</p>
|
||||
<p class="text-xs text-muted-foreground/70">It may have been deleted.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<Splitpanes theme="oikos-theme" dblClickSplitter={false}>
|
||||
<Pane>
|
||||
<ChatThread
|
||||
messages={$chatMessages}
|
||||
streaming={$chatStreaming}
|
||||
connectionState={$chatConnectionState}
|
||||
error={$chatError}
|
||||
chatErrors={$chatErrors}
|
||||
onSend={(text) => sendSessionMessage(sessionId, text)}
|
||||
onCancel={() => cancelSessionStream(sessionId)}
|
||||
onReconnect={() => loadSessionChat(sessionId)}
|
||||
onDismissError={dismissError}
|
||||
/>
|
||||
</Pane>
|
||||
<Pane bind:size={railSize} minSize={18} maxSize={40}>
|
||||
<TaskContextPanel {sessionId} />
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -215,7 +215,7 @@
|
||||
})
|
||||
|
||||
// The highlight ring/dim styling below is tied to the node whose window
|
||||
// was last opened — once that window is closed (from EntityDesktop, not
|
||||
// was last opened — once that window is closed (from WindowLayer, not
|
||||
// necessarily from here), the ring should go with it rather than pointing
|
||||
// at a window that no longer exists.
|
||||
$effect(() => {
|
||||
@@ -265,7 +265,7 @@
|
||||
|
||||
// ─── drag / select ───────────────────────────────────────────────────
|
||||
// A click (pointerdown+up with no movement in between) opens the entity
|
||||
// straight in its own floating window (EntityDesktop) instead of a
|
||||
// straight in its own floating window (WindowLayer) instead of a
|
||||
// click-through mini-panel — `selected` now only drives the highlight/dim
|
||||
// styling below, so you can see at a glance which node you last opened.
|
||||
let dragState: { node: Node; moved: boolean } | null = null
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import { startWorkspace, startSessionWorkspace, planSteps, currentTask, openQuestion, touched, healthDiffs, workspaceFor, taskFor } from '$lib/stores/workspace'
|
||||
import { streaming, messages, currentSession, chatFor } from '$lib/stores/chat'
|
||||
import { activityLog, activityLogFor } from '$lib/stores/activity'
|
||||
@@ -44,39 +45,27 @@
|
||||
let planOpen = $state(true)
|
||||
let activityOpen = $state(true)
|
||||
|
||||
// Resize: distribute height across the 3 content areas.
|
||||
// Heights stored in px, minus header sizes. Default even split.
|
||||
let heights = $state([300, 200, 200])
|
||||
let resizing = $state(-1)
|
||||
let resizeStartY = $state(0)
|
||||
let resizeStartH = $state<[number, number]>([0, 0])
|
||||
// Resize: each section is a Pane in one vertical Splitpanes. Sizes are
|
||||
// percentages of the panel's height; undefined means "share the space
|
||||
// evenly with the other auto sections". Collapsing a section pins it to
|
||||
// COLLAPSED_SIZE (roughly a header's worth of height) and remembers its
|
||||
// last size so reopening restores it.
|
||||
const COLLAPSED_SIZE = 6
|
||||
const OPEN_MIN_SIZE = 12
|
||||
let sizes = $state<(number | undefined)[]>([undefined, undefined, undefined])
|
||||
// Reopening must restore a concrete number, never `undefined` — the pane
|
||||
// only re-triggers the library's resize/equalize pass when `size` changes
|
||||
// to a different *number*, so setting it back to `undefined` silently
|
||||
// no-ops and leaves the section stuck at its collapsed height.
|
||||
let savedSizes: number[] = [34, 33, 33]
|
||||
|
||||
function onPointerDown(i: number, e: PointerEvent) {
|
||||
e.preventDefault()
|
||||
resizing = i
|
||||
resizeStartY = e.clientY
|
||||
resizeStartH = [heights[i], heights[i + 1]]
|
||||
window.addEventListener('pointermove', onPointerMove)
|
||||
window.addEventListener('pointerup', onPointerUp)
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (resizing < 0) return
|
||||
const dy = e.clientY - resizeStartY
|
||||
const minH = 80
|
||||
// Clamp each section to minimum
|
||||
const newA = Math.max(minH, resizeStartH[0] + dy)
|
||||
const newB = Math.max(minH, resizeStartH[1] - dy)
|
||||
const newHeights = [...heights]
|
||||
newHeights[resizing] = newA
|
||||
newHeights[resizing + 1] = newB
|
||||
heights = newHeights
|
||||
}
|
||||
|
||||
function onPointerUp() {
|
||||
resizing = -1
|
||||
window.removeEventListener('pointermove', onPointerMove)
|
||||
window.removeEventListener('pointerup', onPointerUp)
|
||||
function toggleSection(i: number, isOpen: boolean) {
|
||||
if (isOpen) {
|
||||
savedSizes[i] = sizes[i] ?? savedSizes[i]
|
||||
sizes[i] = COLLAPSED_SIZE
|
||||
} else {
|
||||
sizes[i] = savedSizes[i]
|
||||
}
|
||||
}
|
||||
|
||||
// Plan collapsed status
|
||||
@@ -103,54 +92,54 @@
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<OperatorQuestion sessionId={effectiveSessionId} question={$openQuestionStore} />
|
||||
|
||||
<!-- Scope -->
|
||||
<div class="flex shrink-0 flex-col border-b">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => (scopeOpen = !scopeOpen)}
|
||||
>
|
||||
{#if scopeOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Scope</span>
|
||||
{#if !scopeOpen}
|
||||
<span class="ml-auto font-normal normal-case">{$touchedStore.length ? `${$touchedStore.length} entit${$touchedStore.length === 1 ? 'y' : 'ies'}` : 'Graph'}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{#if scopeOpen}
|
||||
<div style="height: {heights[0]}px">
|
||||
<SessionGraph messages={$messagesStore} touched={$touchedStore} healthDiffs={$healthDiffsStore} />
|
||||
</div>
|
||||
<!-- resize handle -->
|
||||
<div
|
||||
class="h-1.5 cursor-row-resize border-b hover:bg-primary/30 touch-none"
|
||||
onpointerdown={(e) => onPointerDown(0, e)}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Plan -->
|
||||
<div class="flex shrink-0 flex-col border-b">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => (planOpen = !planOpen)}
|
||||
>
|
||||
{#if planOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Plan</span>
|
||||
{#if !planOpen}
|
||||
{#if planTotal > 0}
|
||||
<span class="ml-auto font-normal normal-case">Step {planDone}/{planTotal}</span>
|
||||
{:else if $taskStore?.goal}
|
||||
<span class="ml-auto max-w-[120px] truncate font-normal normal-case">{$taskStore.goal}</span>
|
||||
{:else}
|
||||
<span class="ml-auto font-normal normal-case text-muted-foreground">No plan yet</span>
|
||||
<Splitpanes horizontal theme="oikos-theme" dblClickSplitter={false} class="min-h-0 flex-1">
|
||||
<!-- Scope -->
|
||||
<Pane bind:size={sizes[0]} minSize={scopeOpen ? OPEN_MIN_SIZE : COLLAPSED_SIZE} maxSize={scopeOpen ? 100 : COLLAPSED_SIZE} class="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => {
|
||||
toggleSection(0, scopeOpen)
|
||||
scopeOpen = !scopeOpen
|
||||
}}
|
||||
>
|
||||
{#if scopeOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Scope</span>
|
||||
{#if !scopeOpen}
|
||||
<span class="ml-auto font-normal normal-case">{$touchedStore.length ? `${$touchedStore.length} entit${$touchedStore.length === 1 ? 'y' : 'ies'}` : 'Graph'}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{#if scopeOpen}
|
||||
<div class="min-h-0 flex-1">
|
||||
<SessionGraph messages={$messagesStore} touched={$touchedStore} healthDiffs={$healthDiffsStore} />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
{#if planOpen}
|
||||
<div style="height: {heights[1]}px" class="flex flex-col overflow-y-auto">
|
||||
</Pane>
|
||||
|
||||
<!-- Plan -->
|
||||
<Pane bind:size={sizes[1]} minSize={planOpen ? OPEN_MIN_SIZE : COLLAPSED_SIZE} maxSize={planOpen ? 100 : COLLAPSED_SIZE} class="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => {
|
||||
toggleSection(1, planOpen)
|
||||
planOpen = !planOpen
|
||||
}}
|
||||
>
|
||||
{#if planOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Plan</span>
|
||||
{#if !planOpen}
|
||||
{#if planTotal > 0}
|
||||
<span class="ml-auto font-normal normal-case">Step {planDone}/{planTotal}</span>
|
||||
{:else if $taskStore?.goal}
|
||||
<span class="ml-auto max-w-[120px] truncate font-normal normal-case">{$taskStore.goal}</span>
|
||||
{:else}
|
||||
<span class="ml-auto font-normal normal-case text-muted-foreground">No plan yet</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{#if planOpen}
|
||||
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
|
||||
{#if $taskStore?.goal}
|
||||
<div class="flex items-start gap-2 px-3 py-2">
|
||||
<MilestoneIcon class="mt-0.5 size-3 shrink-0 text-primary" />
|
||||
@@ -244,38 +233,35 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- resize handle -->
|
||||
<div
|
||||
class="h-1.5 cursor-row-resize border-b hover:bg-primary/30 touch-none"
|
||||
onpointerdown={(e) => onPointerDown(1, e)}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Activity -->
|
||||
<div class="flex min-h-0 flex-1 flex-col">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => (activityOpen = !activityOpen)}
|
||||
>
|
||||
{#if activityOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Event log</span>
|
||||
{#if !activityOpen}
|
||||
{#if $streamingStore && activityRunning > 0}
|
||||
<Spinner class="size-3 text-primary" />
|
||||
<span class="font-normal normal-case text-primary">{activityRunning} running</span>
|
||||
{:else}
|
||||
<span class="ml-auto font-normal normal-case">{activityCount || '—'} action{activityCount === 1 ? '' : 's'}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{#if activityOpen}
|
||||
<div class="min-h-0 flex-1 overflow-hidden">
|
||||
<ActivityTimeline entries={$activityLogStore} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Pane>
|
||||
|
||||
<!-- Activity -->
|
||||
<Pane bind:size={sizes[2]} minSize={activityOpen ? OPEN_MIN_SIZE : COLLAPSED_SIZE} maxSize={activityOpen ? 100 : COLLAPSED_SIZE} class="flex flex-col">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
|
||||
onclick={() => {
|
||||
toggleSection(2, activityOpen)
|
||||
activityOpen = !activityOpen
|
||||
}}
|
||||
>
|
||||
{#if activityOpen}<ChevronDownIcon class="size-3" />{:else}<ChevronRightIcon class="size-3" />{/if}
|
||||
<span>Event log</span>
|
||||
{#if !activityOpen}
|
||||
{#if $streamingStore && activityRunning > 0}
|
||||
<Spinner class="size-3 text-primary" />
|
||||
<span class="font-normal normal-case text-primary">{activityRunning} running</span>
|
||||
{:else}
|
||||
<span class="ml-auto font-normal normal-case">{activityCount || '—'} action{activityCount === 1 ? '' : 's'}</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{#if activityOpen}
|
||||
<div class="min-h-0 flex-1 overflow-hidden">
|
||||
<ActivityTimeline entries={$activityLogStore} />
|
||||
</div>
|
||||
{/if}
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</div>
|
||||
|
||||
161
web/src/lib/components/desktop-shell/Desktop.svelte
Normal file
161
web/src/lib/components/desktop-shell/Desktop.svelte
Normal file
@@ -0,0 +1,161 @@
|
||||
<script lang="ts">
|
||||
// The desktop shell: full-viewport surface (background + icons + the
|
||||
// centered task launcher + the floating window layer) with the taskbar
|
||||
// docked below it as a real flex sibling, not an overlay — so a maximized
|
||||
// or dragged window can never end up underneath the taskbar. This replaces
|
||||
// the old sidebar + hash-routed page shell in App.svelte entirely; apps are
|
||||
// desktop icons now (see $lib/apps.ts), not nav items.
|
||||
import { APPS } from '$lib/apps'
|
||||
import { iconPositions, resetIconLayout } from '$lib/stores/icons'
|
||||
import { wm, openAppWindow, toggleShowDesktop } from '$lib/stores/windows'
|
||||
import { summary } from '$lib/stores/context'
|
||||
import GraphBackground from '../GraphBackground.svelte'
|
||||
import DesktopIcon from './DesktopIcon.svelte'
|
||||
import TaskLauncher from './TaskLauncher.svelte'
|
||||
import WindowLayer from './WindowLayer.svelte'
|
||||
import Taskbar from './Taskbar.svelte'
|
||||
import LayersIcon from '@lucide/svelte/icons/layers'
|
||||
import Rows3Icon from '@lucide/svelte/icons/rows-3'
|
||||
import MonitorIcon from '@lucide/svelte/icons/monitor'
|
||||
import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw'
|
||||
import Undo2Icon from '@lucide/svelte/icons/undo-2'
|
||||
import Redo2Icon from '@lucide/svelte/icons/redo-2'
|
||||
|
||||
// Clicking the bare desktop (not an icon, not a window) blurs the focused
|
||||
// window — the familiar "click empty desktop to deselect" affordance.
|
||||
function onSurfaceClick(e: MouseEvent) {
|
||||
if (e.currentTarget === e.target) wm.blur()
|
||||
}
|
||||
|
||||
// Right-click menu, bare desktop only (same currentTarget===target gate as
|
||||
// onSurfaceClick above — icons and windows sit on pointer-events-auto
|
||||
// layers above the otherwise pointer-events-none surface, so a right-click
|
||||
// that lands on either of them never reaches here). canUndo/canRedo are
|
||||
// plain wmkit method calls (not stores), so they're snapshotted once at
|
||||
// open time rather than read reactively in the template.
|
||||
let menuPos = $state<{ x: number; y: number } | null>(null)
|
||||
let menuCanUndo = $state(false)
|
||||
let menuCanRedo = $state(false)
|
||||
|
||||
function onSurfaceContextMenu(e: MouseEvent) {
|
||||
if (e.currentTarget !== e.target) return
|
||||
e.preventDefault()
|
||||
menuCanUndo = wm.canUndo()
|
||||
menuCanRedo = wm.canRedo()
|
||||
menuPos = { x: e.clientX, y: e.clientY }
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuPos = null
|
||||
}
|
||||
|
||||
function runMenuAction(fn: () => void) {
|
||||
fn()
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
// Cmd/Ctrl+Z / Shift+Z for window-arrangement undo/redo (move, resize,
|
||||
// close, ...) — wmkit tracks this history but ships no default keybinding.
|
||||
// Skipped entirely while an editable element has focus so it never
|
||||
// fights the browser's own text-undo inside the task input or a form
|
||||
// field.
|
||||
function onWindowKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && menuPos) {
|
||||
closeMenu()
|
||||
return
|
||||
}
|
||||
const target = e.target as HTMLElement | null
|
||||
const editable = !!target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
|
||||
if (editable) return
|
||||
if (!(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== 'z') return
|
||||
e.preventDefault()
|
||||
if (e.shiftKey) wm.redo()
|
||||
else wm.undo()
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={onWindowKeydown} onclick={closeMenu} />
|
||||
|
||||
<div class="fixed inset-0 flex flex-col">
|
||||
<div
|
||||
class="relative min-h-0 flex-1 overflow-hidden"
|
||||
role="presentation"
|
||||
onclick={onSurfaceClick}
|
||||
oncontextmenu={onSurfaceContextMenu}
|
||||
>
|
||||
<GraphBackground />
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-0">
|
||||
{#each APPS as app (app.id)}
|
||||
{@const pos = $iconPositions[app.id] ?? { col: 0, row: 0 }}
|
||||
{@const badge = app.badge?.($summary) ?? 0}
|
||||
<DesktopIcon {app} {pos} {badge} onOpen={() => openAppWindow(app.id)} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center p-6">
|
||||
<div class="pointer-events-auto">
|
||||
<TaskLauncher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<WindowLayer />
|
||||
</div>
|
||||
|
||||
<Taskbar />
|
||||
</div>
|
||||
|
||||
{#if menuPos}
|
||||
<div
|
||||
class="fixed z-50 min-w-48 rounded-md border bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10"
|
||||
style="left: {menuPos.x}px; top: {menuPos.y}px"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(() => wm.arrange('cascade'))}
|
||||
>
|
||||
<LayersIcon class="size-4" /> Cascade windows
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(() => wm.arrange('tile'))}
|
||||
>
|
||||
<Rows3Icon class="size-4" /> Tile windows
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(toggleShowDesktop)}
|
||||
>
|
||||
<MonitorIcon class="size-4" /> Show desktop
|
||||
</button>
|
||||
<div class="my-1 h-px bg-border"></div>
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground"
|
||||
onclick={() => runMenuAction(resetIconLayout)}
|
||||
>
|
||||
<RotateCcwIcon class="size-4" /> Reset icon layout
|
||||
</button>
|
||||
<div class="my-1 h-px bg-border"></div>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!menuCanUndo}
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
onclick={() => runMenuAction(() => wm.undo())}
|
||||
>
|
||||
<Undo2Icon class="size-4" /> Undo
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!menuCanRedo}
|
||||
class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
|
||||
onclick={() => runMenuAction(() => wm.redo())}
|
||||
>
|
||||
<Redo2Icon class="size-4" /> Redo
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
100
web/src/lib/components/desktop-shell/DesktopIcon.svelte
Normal file
100
web/src/lib/components/desktop-shell/DesktopIcon.svelte
Normal file
@@ -0,0 +1,100 @@
|
||||
<script lang="ts">
|
||||
// A single desktop icon: positioned from the grid store, draggable to any
|
||||
// free cell, opens its app on a plain click. wmkit has nothing to do with
|
||||
// icons — they're a flat non-overlapping grid, not floating/resizable
|
||||
// windows, so this is a small self-contained pointer-drag implementation
|
||||
// rather than pressing wmkit's window abstractions into a shape they don't
|
||||
// fit. See $lib/stores/icons.ts for the grid model + persistence.
|
||||
import { GRID, iconPixelPos, placeIcon, type IconPos } from '$lib/stores/icons'
|
||||
import type { AppDef } from '$lib/apps'
|
||||
|
||||
let {
|
||||
app,
|
||||
pos,
|
||||
badge = 0,
|
||||
onOpen
|
||||
}: { app: AppDef; pos: IconPos; badge?: number; onOpen: () => void } = $props()
|
||||
|
||||
const DRAG_THRESHOLD = 5
|
||||
|
||||
let dragging = $state(false)
|
||||
let dragPos = $state<{ x: number; y: number } | null>(null)
|
||||
|
||||
function toCell(x: number, y: number): IconPos {
|
||||
return {
|
||||
col: Math.round((x - GRID.padding) / (GRID.cell + GRID.gap)),
|
||||
row: Math.round((y - GRID.padding) / (GRID.cell + GRID.gap))
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (e.button !== 0) return
|
||||
const el = e.currentTarget as HTMLElement
|
||||
const startX = e.clientX
|
||||
const startY = e.clientY
|
||||
const origin = iconPixelPos(pos)
|
||||
let moved = false
|
||||
|
||||
el.setPointerCapture(e.pointerId)
|
||||
|
||||
function onMove(ev: PointerEvent) {
|
||||
const dx = ev.clientX - startX
|
||||
const dy = ev.clientY - startY
|
||||
if (!moved && Math.hypot(dx, dy) > DRAG_THRESHOLD) {
|
||||
moved = true
|
||||
dragging = true
|
||||
}
|
||||
if (moved) {
|
||||
dragPos = { x: origin.x + dx, y: origin.y + dy }
|
||||
}
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
el.removeEventListener('pointermove', onMove)
|
||||
el.removeEventListener('pointerup', onUp)
|
||||
if (moved && dragPos) {
|
||||
const cell = toCell(dragPos.x, dragPos.y)
|
||||
placeIcon(app.id, cell.col, cell.row)
|
||||
} else {
|
||||
onOpen()
|
||||
}
|
||||
dragging = false
|
||||
dragPos = null
|
||||
}
|
||||
|
||||
el.addEventListener('pointermove', onMove)
|
||||
el.addEventListener('pointerup', onUp)
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
onOpen()
|
||||
}
|
||||
}
|
||||
|
||||
const restPos = $derived(iconPixelPos(pos))
|
||||
const left = $derived(dragging && dragPos ? dragPos.x : restPos.x)
|
||||
const top = $derived(dragging && dragPos ? dragPos.y : restPos.y)
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="group absolute flex flex-col items-center gap-1 rounded-lg p-1.5 pointer-events-auto select-none focus-visible:outline-2 focus-visible:outline-ring {dragging
|
||||
? 'z-50 cursor-grabbing bg-accent/40'
|
||||
: 'cursor-pointer hover:bg-accent/30'}"
|
||||
style="left: {left}px; top: {top}px; width: {GRID.cell}px;"
|
||||
onpointerdown={onPointerDown}
|
||||
onkeydown={onKeydown}
|
||||
title={app.title}
|
||||
>
|
||||
<span class="relative flex size-10 items-center justify-center rounded-xl border bg-card/80 text-foreground shadow-sm backdrop-blur">
|
||||
<app.icon class="size-5" />
|
||||
{#if badge > 0}
|
||||
<span class="absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold text-destructive-foreground">
|
||||
{badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="max-w-full truncate text-[11px] text-foreground/90">{app.title}</span>
|
||||
</button>
|
||||
62
web/src/lib/components/desktop-shell/TaskLauncher.svelte
Normal file
62
web/src/lib/components/desktop-shell/TaskLauncher.svelte
Normal file
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
// "What should Nomos do?" — the desktop's centerpiece. Extracted from the
|
||||
// old Overview page hero so both the desktop surface and the Tasks app
|
||||
// window can mount it; startTask() (see $lib/stores/chat.ts) begins the
|
||||
// stream immediately and hands back the session id once the backend
|
||||
// assigns one, which is the earliest point a task window can be opened.
|
||||
import { startTask } from '$lib/stores/chat'
|
||||
import { openTaskWindow } from '$lib/stores/windows'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
|
||||
let { compact = false, onStarted }: { compact?: boolean; onStarted?: () => void } = $props()
|
||||
|
||||
let input = $state('')
|
||||
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
input = ''
|
||||
startTask(text, (sessionId) => openTaskWindow(sessionId, truncateMiddle(text, 60)))
|
||||
onStarted?.()
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-2xl text-center">
|
||||
{#if !compact}
|
||||
<h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Describe a goal — Nomos will plan it, execute it, and report the outcome.
|
||||
</p>
|
||||
{/if}
|
||||
<form
|
||||
class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
|
||||
rows={compact ? 2 : 3}
|
||||
class="max-h-52 min-h-24 resize-none border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center justify-between px-3 pb-3">
|
||||
<span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
129
web/src/lib/components/desktop-shell/Taskbar.svelte
Normal file
129
web/src/lib/components/desktop-shell/Taskbar.svelte
Normal file
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
// Bottom taskbar: a real flex row in the page layout (not an overlay), so
|
||||
// windows can never be dragged/maximized underneath it — see Desktop.svelte
|
||||
// for how the window layer's bounds are scoped to the surface above this.
|
||||
// Shows a button for every open window (not just minimized ones — compare
|
||||
// to the old MinimizedWindowsBar, which only ever showed minimized windows
|
||||
// and gave no way to see/switch between windows that were merely
|
||||
// unfocused), plus a system tray for theme/connection/version.
|
||||
import { wm, wmState, toggleShowDesktop, openAppWindow } from '$lib/stores/windows'
|
||||
import { appById, appIdFromWindowId } from '$lib/apps'
|
||||
import { summary } from '$lib/stores/context'
|
||||
import { truncateMiddle } from '$lib/utils'
|
||||
import { getTheme, toggleTheme, THEME_LABELS } from '$lib/stores/theme.svelte'
|
||||
import { VERSION } from '$lib/version'
|
||||
import MessageSquareIcon from '@lucide/svelte/icons/message-square'
|
||||
import DatabaseIcon from '@lucide/svelte/icons/database'
|
||||
import PaletteIcon from '@lucide/svelte/icons/palette'
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings'
|
||||
import LayoutGridIcon from '@lucide/svelte/icons/layout-grid'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
|
||||
const SESSION_PREFIX = 'session:'
|
||||
|
||||
const buttons = $derived(
|
||||
[...$wmState.order]
|
||||
.map((id) => $wmState.windows[id])
|
||||
.filter((w): w is NonNullable<typeof w> => !!w)
|
||||
.sort((a, b) => a.openedSeq - b.openedSeq)
|
||||
)
|
||||
|
||||
function iconFor(id: string) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId) return appById.get(appId)?.icon
|
||||
if (id.startsWith(SESSION_PREFIX)) return MessageSquareIcon
|
||||
return DatabaseIcon
|
||||
}
|
||||
|
||||
function badgeFor(id: string): number {
|
||||
const appId = appIdFromWindowId(id)
|
||||
const app = appId ? appById.get(appId) : undefined
|
||||
return app?.badge?.($summary) ?? 0
|
||||
}
|
||||
|
||||
function toggle(id: string, win: (typeof buttons)[number]) {
|
||||
if (win.stage === 'minimized') {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
} else if ($wmState.focusedId === id) {
|
||||
wm.minimize(id)
|
||||
} else {
|
||||
wm.focus(id)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex h-11 shrink-0 items-center gap-1.5 border-t bg-muted/30 px-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex shrink-0 items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={toggleShowDesktop}
|
||||
title="Show desktop"
|
||||
>
|
||||
<LayoutGridIcon class="size-4" />
|
||||
</button>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-border"></div>
|
||||
|
||||
<div class="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
|
||||
{#each buttons as win (win.id)}
|
||||
{@const Icon = iconFor(win.id)}
|
||||
{@const badge = badgeFor(win.id)}
|
||||
<div class="group/tb relative flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
data-taskbar-btn={win.id}
|
||||
class="flex h-8 max-w-56 items-center gap-1.5 rounded-md border px-2 font-mono text-xs transition-colors {$wmState.focusedId ===
|
||||
win.id && win.stage !== 'minimized'
|
||||
? 'border-primary/50 bg-primary/10 text-foreground'
|
||||
: 'border-transparent bg-card/60 text-muted-foreground hover:bg-muted'} {win.stage === 'minimized' ? 'opacity-60' : ''}"
|
||||
onclick={() => toggle(win.id, win)}
|
||||
title={win.title}
|
||||
>
|
||||
{#if Icon}<Icon class="size-3.5 shrink-0" />{/if}
|
||||
<span class="min-w-0 truncate">{truncateMiddle(win.title, 26)}</span>
|
||||
{#if badge > 0}
|
||||
<span class="flex h-3.5 min-w-3.5 shrink-0 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold text-destructive-foreground">
|
||||
{badge > 99 ? '99+' : badge}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute -top-1.5 -right-1.5 hidden size-4 items-center justify-center rounded-full bg-muted-foreground/80 text-background hover:bg-destructive group-hover/tb:flex"
|
||||
onclick={(e) => {
|
||||
e.stopPropagation()
|
||||
wm.close(win.id)
|
||||
}}
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-border"></div>
|
||||
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center gap-1.5 rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={() => toggleTheme()}
|
||||
title="Cycle theme"
|
||||
>
|
||||
<PaletteIcon class="size-4" />
|
||||
<span class="hidden text-xs sm:inline">{THEME_LABELS[getTheme()]}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
onclick={() => openAppWindow('settings')}
|
||||
title="Settings"
|
||||
>
|
||||
<SettingsIcon class="size-4" />
|
||||
</button>
|
||||
<span class="px-1.5 text-[11px] text-muted-foreground select-none">{VERSION}</span>
|
||||
</div>
|
||||
</div>
|
||||
89
web/src/lib/components/desktop-shell/WindowLayer.svelte
Normal file
89
web/src/lib/components/desktop-shell/WindowLayer.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
// The floating-window layer — mounted once inside Desktop.svelte, above the
|
||||
// icons layer, so every window (an app, a task, an entity detail) shares
|
||||
// one stack instead of each page owning its own single-entity
|
||||
// sidebar/sheet. See $lib/stores/windows.ts. Content is resolved purely
|
||||
// from the window's id, which is why persisted/hydrated windows (see
|
||||
// wmPersist in windows.ts) need no extra bookkeeping to know what to render:
|
||||
// app:<id> -> registry component (windows.ts openAppWindow)
|
||||
// session:<id> -> SessionChatWindow (windows.ts openTaskWindow)
|
||||
// new-task -> TaskLauncher (windows.ts openNewTaskWindow)
|
||||
// anything else -> entity slug -> EntityDetailContent
|
||||
import { wm, dk, wmState, openEntityWindow, NEW_TASK_WINDOW_ID } from '$lib/stores/windows'
|
||||
import { appById, appIdFromWindowId } from '$lib/apps'
|
||||
import EntityDetailContent from '../EntityDetailContent.svelte'
|
||||
import SessionChatWindow from '../SessionChatWindow.svelte'
|
||||
import TaskLauncher from './TaskLauncher.svelte'
|
||||
import XIcon from '@lucide/svelte/icons/x'
|
||||
import MinusIcon from '@lucide/svelte/icons/minus'
|
||||
import Maximize2Icon from '@lucide/svelte/icons/maximize-2'
|
||||
|
||||
const SESSION_PREFIX = 'session:'
|
||||
|
||||
// A hydrated `app:<id>` window whose id no longer matches any registry
|
||||
// entry (the app was renamed/removed since the layout was persisted) has
|
||||
// nothing to render — close it rather than leaving a permanently-blank
|
||||
// window stuck in the taskbar.
|
||||
$effect(() => {
|
||||
for (const id of $wmState.order) {
|
||||
const appId = appIdFromWindowId(id)
|
||||
if (appId && !appById.has(appId)) wm.close(id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div use:dk.desktop class="absolute inset-0 z-40 pointer-events-none">
|
||||
{#each $wmState.order as id (id)}
|
||||
{@const win = $wmState.windows[id]}
|
||||
{@const appId = appIdFromWindowId(id)}
|
||||
{@const app = appId ? appById.get(appId) : undefined}
|
||||
{#if win && (!appId || app)}
|
||||
<section use:dk.window={{ id }} class="min-w-0" aria-label={win.title}>
|
||||
<header data-wm-drag class="flex shrink-0 cursor-move items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
|
||||
<span data-wm-title class="flex min-w-0 flex-1 items-center self-stretch truncate font-mono text-xs font-medium">{win.title}</span>
|
||||
<div class="flex shrink-0 items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
data-wm-minimize
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Minimize {win.title}"
|
||||
>
|
||||
<MinusIcon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-maximize
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Maximize {win.title}"
|
||||
>
|
||||
<Maximize2Icon class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-wm-close
|
||||
class="flex items-center justify-center rounded p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
|
||||
aria-label="Close {win.title}"
|
||||
>
|
||||
<XIcon class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div data-wm-content class="min-h-0 flex-1 overflow-hidden">
|
||||
{#key id}
|
||||
{#if id.startsWith(SESSION_PREFIX)}
|
||||
<SessionChatWindow sessionId={id.slice(SESSION_PREFIX.length)} />
|
||||
{:else if id === NEW_TASK_WINDOW_ID}
|
||||
<div class="flex h-full items-center justify-center p-6">
|
||||
<TaskLauncher onStarted={() => wm.close(NEW_TASK_WINDOW_ID)} />
|
||||
</div>
|
||||
{:else if app}
|
||||
<app.component />
|
||||
{:else}
|
||||
<EntityDetailContent slug={id} onSelectEntity={openEntityWindow} />
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
4
web/src/lib/shims/app-environment.ts
Normal file
4
web/src/lib/shims/app-environment.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
// Shim for SvelteKit's `$app/environment` module — this is a plain Vite app,
|
||||
// not SvelteKit, but svelte-splitpanes imports `browser` from it for its
|
||||
// browser-detection utility. Aliased in vite.config.ts.
|
||||
export const browser = typeof window !== 'undefined'
|
||||
@@ -1,5 +1,5 @@
|
||||
import { writable, get, type Writable } from 'svelte/store'
|
||||
import { streamChat, fetchSessions, fetchMessages, deleteSession as apiDeleteSession } from '$lib/api'
|
||||
import { streamChat, fetchSessions, fetchMessages, fetchMessagesOrNotFound, deleteSession as apiDeleteSession } from '$lib/api'
|
||||
import type { ChatEvent, Session, Message } from '$lib/api'
|
||||
import type { ToolCallResult } from '$lib/types'
|
||||
|
||||
@@ -499,6 +499,11 @@ export interface SessionChatState {
|
||||
streaming: Writable<boolean>
|
||||
connectionState: Writable<'connected' | 'disconnected' | 'reconnecting'>
|
||||
error: Writable<string | null>
|
||||
// Set by loadSessionChat when the backend 404s the session outright
|
||||
// (deleted, or an id that was never valid — a stale persisted window, a
|
||||
// bad deep link). Distinct from a merely-empty transcript, which is the
|
||||
// normal state for a session that exists but hasn't sent a message yet.
|
||||
notFound: Writable<boolean>
|
||||
}
|
||||
|
||||
const sessionChats = new Map<string, SessionChatState>()
|
||||
@@ -509,7 +514,13 @@ const sessionPollers = new Map<string, ReturnType<typeof setInterval>>()
|
||||
export function chatFor(sessionId: string): SessionChatState {
|
||||
let c = sessionChats.get(sessionId)
|
||||
if (!c) {
|
||||
c = { messages: writable([]), streaming: writable(false), connectionState: writable('connected'), error: writable(null) }
|
||||
c = {
|
||||
messages: writable([]),
|
||||
streaming: writable(false),
|
||||
connectionState: writable('connected'),
|
||||
error: writable(null),
|
||||
notFound: writable(false)
|
||||
}
|
||||
sessionChats.set(sessionId, c)
|
||||
}
|
||||
return c
|
||||
@@ -544,7 +555,11 @@ export function stopSessionPolling(sessionId: string) {
|
||||
export async function loadSessionChat(sessionId: string): Promise<void> {
|
||||
const chat = chatFor(sessionId)
|
||||
chat.streaming.set(false)
|
||||
const msgs = await fetchMessages(sessionId)
|
||||
const msgs = await fetchMessagesOrNotFound(sessionId)
|
||||
if (msgs === null) {
|
||||
chat.notFound.set(true)
|
||||
return // nothing to poll — the session doesn't exist
|
||||
}
|
||||
chat.messages.set(toChatMessages(msgs))
|
||||
startSessionPolling(sessionId)
|
||||
}
|
||||
@@ -650,3 +665,117 @@ export function cancelSessionStream(sessionId: string) {
|
||||
activeControllers.delete(sessionId)
|
||||
chatFor(sessionId).streaming.set(false)
|
||||
}
|
||||
|
||||
// ─── new-task launcher (desktop center input / Tasks app) ───────────────────
|
||||
//
|
||||
// Starting a brand-new task has no session id to hang a window off of until
|
||||
// the stream's own 'session' event assigns one (see the 'session' branch in
|
||||
// sendMessage above) — the desktop launcher needs to open that task's window
|
||||
// the moment an id exists, not before. startTask begins the stream
|
||||
// immediately, buffers any events that arrive before 'session' (defensive:
|
||||
// in practice 'session' always arrives first), then seeds that session's own
|
||||
// chatFor() bundle exactly like sendSessionMessage does and hands the id back
|
||||
// via onSession so the caller can open its window. From that point on the
|
||||
// window behaves exactly like any other task window.
|
||||
export function startTask(text: string, onSession: (sessionId: string) => void): void {
|
||||
const userMsg: ChatMessage = { id: mid(), role: 'user', text, tools: [], pendingApprovals: [] }
|
||||
const assistantMsg: ChatMessage = { id: mid(), role: 'assistant', text: '', tools: [], pendingApprovals: [] }
|
||||
const activeTools: Map<string, ToolCallResult> = new Map()
|
||||
let receivedDone = false
|
||||
let sessionId: string | null = null
|
||||
let chat: SessionChatState | null = null
|
||||
const buffered: ChatEvent[] = []
|
||||
|
||||
function apply(ev: ChatEvent) {
|
||||
const c = chat
|
||||
if (!c || !sessionId) return
|
||||
if (ev.type === 'tool_use') {
|
||||
const tr: ToolCallResult = { type: 'tool_use', name: ev.data.name, id: ev.data.id, args: ev.data.args }
|
||||
activeTools.set(ev.data.id, tr)
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.tools = [...last.tools, tr]
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'tool_result') {
|
||||
const existing = activeTools.get(ev.data.id)
|
||||
if (existing) {
|
||||
const updated: ToolCallResult = { ...existing, type: 'tool_result', result: ev.data.result, error: ev.data.error }
|
||||
activeTools.set(ev.data.id, updated)
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') {
|
||||
last.tools = last.tools.map((t) => (t.id === ev.data.id ? updated : t))
|
||||
last.pendingApprovals = extractApprovals(last.tools)
|
||||
}
|
||||
return [...ms]
|
||||
})
|
||||
}
|
||||
} else if (ev.type === 'text_delta') {
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text += ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'text') {
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.text = ev.data
|
||||
return [...ms]
|
||||
})
|
||||
} else if (ev.type === 'done') {
|
||||
receivedDone = true
|
||||
c.connectionState.set('connected')
|
||||
c.messages.update((ms) => {
|
||||
const last = ms[ms.length - 1]
|
||||
if (last && last.role === 'assistant') last.pendingApprovals = extractApprovals(last.tools)
|
||||
return [...ms]
|
||||
})
|
||||
startSessionPolling(sessionId)
|
||||
} else if (ev.type === 'error') {
|
||||
c.error.set(ev.data)
|
||||
}
|
||||
}
|
||||
|
||||
const controller = streamChat(
|
||||
text,
|
||||
null,
|
||||
(ev: ChatEvent) => {
|
||||
if (ev.type === 'session') {
|
||||
sessionId = ev.data
|
||||
activeControllers.set(sessionId, controller)
|
||||
chat = chatFor(sessionId)
|
||||
chat.streaming.set(true)
|
||||
chat.messages.update((ms) => [...ms, userMsg, assistantMsg])
|
||||
onSession(sessionId)
|
||||
for (const b of buffered.splice(0)) apply(b)
|
||||
return
|
||||
}
|
||||
if (!chat) {
|
||||
buffered.push(ev)
|
||||
return
|
||||
}
|
||||
apply(ev)
|
||||
},
|
||||
(err: string) => {
|
||||
if (!chat) return // never got a session id — nothing to show the error in
|
||||
if (err === 'AbortError' || err.includes('aborted')) {
|
||||
chat.streaming.set(false)
|
||||
return
|
||||
}
|
||||
chat.error.set(err)
|
||||
if (!receivedDone && sessionId) {
|
||||
chat.connectionState.set('disconnected')
|
||||
startSessionPolling(sessionId)
|
||||
addChatError('Agent connection lost. The task is still running — retrying…', 'Dismiss')
|
||||
} else {
|
||||
chat.streaming.set(false)
|
||||
}
|
||||
},
|
||||
() => {
|
||||
if (chat) chat.streaming.set(false)
|
||||
if (sessionId && activeControllers.get(sessionId) === controller) activeControllers.delete(sessionId)
|
||||
loadSessions()
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
95
web/src/lib/stores/icons.test.ts
Normal file
95
web/src/lib/stores/icons.test.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest'
|
||||
|
||||
// icons.ts only needs APPS for its default-layout ids — stub it out rather
|
||||
// than pull in the real registry's full page-component graph (see
|
||||
// apps.test.ts for why that graph is expensive/broken under vitest).
|
||||
vi.mock('$lib/apps', () => ({
|
||||
APPS: [{ id: 'tasks' }, { id: 'kb' }, { id: 'ops' }, { id: 'signals' }, { id: 'knowledge' }, { id: 'learning' }]
|
||||
}))
|
||||
|
||||
import { GRID, iconPositions, placeIcon, iconPixelPos, maxCols, getIconPositions, resetIconLayout } from './icons'
|
||||
|
||||
// placeIcon mutates the shared module-level store, so each test starts from
|
||||
// a known, empty layout rather than whatever the previous test (or apps.ts's
|
||||
// registry-derived defaults) left behind.
|
||||
beforeEach(() => {
|
||||
iconPositions.set({})
|
||||
localStorage.clear()
|
||||
})
|
||||
|
||||
describe('iconPixelPos', () => {
|
||||
it('converts a grid cell to pixel coordinates using GRID constants', () => {
|
||||
expect(iconPixelPos({ col: 0, row: 0 })).toEqual({ x: GRID.padding, y: GRID.padding })
|
||||
expect(iconPixelPos({ col: 1, row: 2 })).toEqual({
|
||||
x: GRID.padding + (GRID.cell + GRID.gap),
|
||||
y: GRID.padding + 2 * (GRID.cell + GRID.gap)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('maxCols', () => {
|
||||
it('computes how many columns fit in a viewport width', () => {
|
||||
const cellSpan = GRID.cell + GRID.gap
|
||||
expect(maxCols(GRID.padding + cellSpan * 3)).toBe(3)
|
||||
})
|
||||
|
||||
it('never returns less than 1, even for a tiny viewport', () => {
|
||||
expect(maxCols(0)).toBe(1)
|
||||
expect(maxCols(GRID.padding)).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('placeIcon', () => {
|
||||
it('places an icon at the requested cell when it is free', () => {
|
||||
placeIcon('tasks', 3, 4)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 3, row: 4 })
|
||||
})
|
||||
|
||||
it('clamps negative coordinates to 0 for an otherwise-free cell', () => {
|
||||
placeIcon('tasks', -5, -2)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 0, row: 0 })
|
||||
})
|
||||
|
||||
it('nudges to the nearest free cell when the target is occupied', () => {
|
||||
iconPositions.set({ kb: { col: 2, row: 2 } })
|
||||
placeIcon('tasks', 2, 2)
|
||||
const pos = getIconPositions().tasks
|
||||
// Must not land on top of kb, and must be one of the 8 immediate
|
||||
// neighbors (radius-1 ring) since all of them are free.
|
||||
expect(pos).not.toEqual({ col: 2, row: 2 })
|
||||
expect(Math.max(Math.abs(pos.col - 2), Math.abs(pos.row - 2))).toBe(1)
|
||||
})
|
||||
|
||||
it('does not disturb the icon already occupying a cell when another icon is nudged past it', () => {
|
||||
iconPositions.set({ kb: { col: 2, row: 2 } })
|
||||
placeIcon('tasks', 2, 2)
|
||||
expect(getIconPositions().kb).toEqual({ col: 2, row: 2 })
|
||||
})
|
||||
|
||||
it('moving an icon back onto its own current cell is a no-op collision (never nudges against itself)', () => {
|
||||
iconPositions.set({ tasks: { col: 5, row: 5 } })
|
||||
placeIcon('tasks', 5, 5)
|
||||
expect(getIconPositions().tasks).toEqual({ col: 5, row: 5 })
|
||||
})
|
||||
|
||||
it('persists the updated layout to localStorage', () => {
|
||||
placeIcon('tasks', 1, 1)
|
||||
const stored = JSON.parse(localStorage.getItem('oikos-desktop-icons') ?? '{}')
|
||||
expect(stored.tasks).toEqual({ col: 1, row: 1 })
|
||||
})
|
||||
})
|
||||
|
||||
describe('resetIconLayout', () => {
|
||||
it('restores the classic left-edge column in registry order', () => {
|
||||
iconPositions.set({ tasks: { col: 4, row: 7 }, kb: { col: 1, row: 1 } })
|
||||
resetIconLayout()
|
||||
expect(getIconPositions()).toEqual({
|
||||
tasks: { col: 0, row: 0 },
|
||||
kb: { col: 0, row: 1 },
|
||||
ops: { col: 0, row: 2 },
|
||||
signals: { col: 0, row: 3 },
|
||||
knowledge: { col: 0, row: 4 },
|
||||
learning: { col: 0, row: 5 }
|
||||
})
|
||||
})
|
||||
})
|
||||
113
web/src/lib/stores/icons.ts
Normal file
113
web/src/lib/stores/icons.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
// Desktop icon positions — a simple column/row grid, persisted to
|
||||
// localStorage so icons stay where the operator put them across reloads.
|
||||
// Deliberately NOT wmkit: wmkit manages floating windows (pixel bounds,
|
||||
// z-order, stage), icons are a flat, non-overlapping grid with a much
|
||||
// simpler drag model (snap-to-cell, no resize/minimize/stack). Reinventing
|
||||
// that inside wmkit would mean fighting its window-shaped abstractions for
|
||||
// no benefit.
|
||||
import { writable, get } from 'svelte/store'
|
||||
import { APPS } from '$lib/apps'
|
||||
|
||||
export interface IconPos {
|
||||
col: number
|
||||
row: number
|
||||
}
|
||||
|
||||
export const GRID = { cell: 96, gap: 12, padding: 16 }
|
||||
|
||||
const STORAGE_KEY = 'oikos-desktop-icons'
|
||||
|
||||
function defaultPositions(): Record<string, IconPos> {
|
||||
// Classic OS default: one left-edge column, registry order.
|
||||
const out: Record<string, IconPos> = {}
|
||||
APPS.forEach((app, i) => {
|
||||
out[app.id] = { col: 0, row: i }
|
||||
})
|
||||
return out
|
||||
}
|
||||
|
||||
function load(): Record<string, IconPos> {
|
||||
if (typeof localStorage === 'undefined') return defaultPositions()
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (!raw) return defaultPositions()
|
||||
const parsed = JSON.parse(raw) as Record<string, IconPos>
|
||||
const out = defaultPositions()
|
||||
// Merge over the defaults so a newly-registered app (not in the saved
|
||||
// blob yet) still gets a sane starting position instead of being absent
|
||||
// from the grid entirely.
|
||||
for (const [id, pos] of Object.entries(parsed)) {
|
||||
if (appIds.has(id)) out[id] = pos
|
||||
}
|
||||
return out
|
||||
} catch {
|
||||
return defaultPositions()
|
||||
}
|
||||
}
|
||||
|
||||
const appIds = new Set(APPS.map((a) => a.id))
|
||||
|
||||
export const iconPositions = writable<Record<string, IconPos>>(load())
|
||||
|
||||
function persist(positions: Record<string, IconPos>): void {
|
||||
if (typeof localStorage === 'undefined') return
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(positions))
|
||||
}
|
||||
|
||||
iconPositions.subscribe((positions) => persist(positions))
|
||||
|
||||
function occupied(positions: Record<string, IconPos>, col: number, row: number, exceptId: string): boolean {
|
||||
return Object.entries(positions).some(([id, p]) => id !== exceptId && p.col === col && p.row === row)
|
||||
}
|
||||
|
||||
// Finds the nearest free cell to (col, row) via an expanding ring search,
|
||||
// so dropping an icon onto an occupied cell nudges it to the closest open
|
||||
// spot instead of silently overlapping or refusing the drop.
|
||||
function nearestFreeCell(
|
||||
positions: Record<string, IconPos>,
|
||||
col: number,
|
||||
row: number,
|
||||
exceptId: string
|
||||
): IconPos {
|
||||
if (!occupied(positions, col, row, exceptId)) return { col: Math.max(0, col), row: Math.max(0, row) }
|
||||
for (let radius = 1; radius < 64; radius++) {
|
||||
for (let dc = -radius; dc <= radius; dc++) {
|
||||
for (let dr = -radius; dr <= radius; dr++) {
|
||||
if (Math.max(Math.abs(dc), Math.abs(dr)) !== radius) continue
|
||||
const c = col + dc
|
||||
const r = row + dr
|
||||
if (c < 0 || r < 0) continue
|
||||
if (!occupied(positions, c, r, exceptId)) return { col: c, row: r }
|
||||
}
|
||||
}
|
||||
}
|
||||
return { col: Math.max(0, col), row: Math.max(0, row) }
|
||||
}
|
||||
|
||||
export function placeIcon(appId: string, col: number, row: number): void {
|
||||
iconPositions.update((positions) => {
|
||||
const target = nearestFreeCell(positions, col, row, appId)
|
||||
return { ...positions, [appId]: target }
|
||||
})
|
||||
}
|
||||
|
||||
export function iconPixelPos(pos: IconPos): { x: number; y: number } {
|
||||
return {
|
||||
x: GRID.padding + pos.col * (GRID.cell + GRID.gap),
|
||||
y: GRID.padding + pos.row * (GRID.cell + GRID.gap)
|
||||
}
|
||||
}
|
||||
|
||||
export function maxCols(viewportWidth: number): number {
|
||||
return Math.max(1, Math.floor((viewportWidth - GRID.padding) / (GRID.cell + GRID.gap)))
|
||||
}
|
||||
|
||||
export function getIconPositions(): Record<string, IconPos> {
|
||||
return get(iconPositions)
|
||||
}
|
||||
|
||||
// Bails a messy manual layout back to the classic left-edge column,
|
||||
// registry order — the desktop's right-click menu's "Reset icon layout".
|
||||
export function resetIconLayout(): void {
|
||||
iconPositions.set(defaultPositions())
|
||||
}
|
||||
@@ -1,14 +1,83 @@
|
||||
// One global wmkit window manager for the whole app (mounted once by
|
||||
// EntityDesktop.svelte in App.svelte) — this is what lets an entity opened
|
||||
// from Knowledge Base, chat, or anywhere else land in the same floating
|
||||
// window layer, with several windows open side by side, rather than each
|
||||
// page owning its own single-entity sidebar/sheet.
|
||||
// WindowLayer.svelte inside Desktop.svelte) — this is what lets an entity
|
||||
// opened from Knowledge Base, chat, or anywhere else land in the same
|
||||
// floating window layer, with several windows open side by side, rather than
|
||||
// each page owning its own single-entity sidebar/sheet.
|
||||
import { createManager, createDesktop, wmStore } from '@surdeddd/wmkit/svelte'
|
||||
import { persist } from '@surdeddd/wmkit/persist'
|
||||
import { appById, appWindowId } from '$lib/apps'
|
||||
import { sessions } from '$lib/stores/chat'
|
||||
import { heading } from '$lib/tasks'
|
||||
|
||||
export const wm = createManager({ defaultSize: { width: 480, height: 560 } })
|
||||
export const dk = createDesktop(wm)
|
||||
export const dk = createDesktop(wm, {
|
||||
// topEdge:'maximize' + preview gives the classic drag-to-top-maximizes
|
||||
// affordance; magnetism/keyboard are wmkit defaults worth turning on now
|
||||
// that windows are the whole app's primary surface, not a secondary layer.
|
||||
snap: { topEdge: 'maximize', preview: true },
|
||||
keyboard: true,
|
||||
magnetism: true,
|
||||
// Animates a minimized window toward its taskbar button instead of just
|
||||
// vanishing — Taskbar.svelte tags each button with this same attribute.
|
||||
minimizeTarget: (win) => document.querySelector(`[data-taskbar-btn="${CSS.escape(win.id)}"]`)
|
||||
})
|
||||
export const wmState = wmStore(wm)
|
||||
|
||||
// Layout survives reloads: every window id is self-describing (app:<id>,
|
||||
// session:<id>, or a bare entity slug — see EntityDesktop/WindowLayer's
|
||||
// content branch), so a hydrated window needs no extra bookkeeping to know
|
||||
// what to render once the desktop remounts.
|
||||
export const wmPersist = persist(wm, { key: 'oikos-windows', debounce: 300, autoRestore: true })
|
||||
|
||||
// A task window is titled from the operator's (truncated) prompt at
|
||||
// creation time — openTaskWindow below and chat.ts's startTask both only
|
||||
// know the raw text, not the goal/heading the backend eventually derives
|
||||
// for the session. Whenever the sessions list refreshes (loadSessions(),
|
||||
// called all over — on task events, after a turn completes, ...) resync
|
||||
// any open task window's title to the session's real heading, so the
|
||||
// taskbar/titlebar stop showing the placeholder forever.
|
||||
sessions.subscribe((list) => {
|
||||
for (const s of list) {
|
||||
const id = `session:${s.id}`
|
||||
const win = wm.get(id)
|
||||
if (!win) continue
|
||||
const title = heading(s)
|
||||
if (win.title !== title) wm.update(id, { title })
|
||||
}
|
||||
})
|
||||
|
||||
// Classic show-desktop toggle: minimize everything, or if everything's
|
||||
// already minimized (a prior show-desktop, or the operator minimized them
|
||||
// all by hand), bring them all back rather than being a one-way action.
|
||||
// Shared by the taskbar button and the desktop's right-click menu.
|
||||
export function toggleShowDesktop(): void {
|
||||
const anyVisible = wm.getState().order.some((id) => wm.get(id)?.stage !== 'minimized')
|
||||
if (anyVisible) wm.minimizeAll()
|
||||
else wm.restoreAll()
|
||||
}
|
||||
|
||||
// Opens (or focuses/restores) a registry app's window. Apps are
|
||||
// single-instance — double-clicking an already-open app's icon should never
|
||||
// stack a second window, same dedupe pattern as openEntityWindow below.
|
||||
export function openAppWindow(appId: string): void {
|
||||
const app = appById.get(appId)
|
||||
if (!app) return
|
||||
const id = appWindowId(appId)
|
||||
if (wm.get(id)) {
|
||||
wm.restore(id)
|
||||
wm.focus(id)
|
||||
return
|
||||
}
|
||||
wm.open({
|
||||
id,
|
||||
title: app.title,
|
||||
width: app.width,
|
||||
height: app.height,
|
||||
minWidth: app.minWidth,
|
||||
minHeight: app.minHeight
|
||||
})
|
||||
}
|
||||
|
||||
// Opens a window for the entity, or focuses (and restores, if minimized) the
|
||||
// existing one — wm.open() throws if a window with this id already exists,
|
||||
// and slugs make natural, stable window ids (also dedupes "same entity
|
||||
@@ -23,12 +92,28 @@ export function openEntityWindow(slug: string | null): void {
|
||||
wm.open({ id: slug, title: slug })
|
||||
}
|
||||
|
||||
// Singleton "compose a new task" window — the Tasks app's New Task button
|
||||
// opens this rather than a dialog, since everything else in the desktop is
|
||||
// already a window; TaskLauncher closes it itself (via its onStarted
|
||||
// callback, wired up in WindowLayer.svelte) once the task's session window
|
||||
// takes over.
|
||||
export const NEW_TASK_WINDOW_ID = 'new-task'
|
||||
|
||||
export function openNewTaskWindow(): void {
|
||||
if (wm.get(NEW_TASK_WINDOW_ID)) {
|
||||
wm.restore(NEW_TASK_WINDOW_ID)
|
||||
wm.focus(NEW_TASK_WINDOW_ID)
|
||||
return
|
||||
}
|
||||
wm.open({ id: NEW_TASK_WINDOW_ID, title: 'New task', width: 480, height: 340, minWidth: 360, minHeight: 280 })
|
||||
}
|
||||
|
||||
// Same dedupe/restore/focus pattern as openEntityWindow, for a task/session's
|
||||
// chat window. Id is namespaced `session:<id>` — distinct from entity window
|
||||
// ids (always a bare `type:identifier` slug, and task ENTITIES already use
|
||||
// `task:<uuid>` as their own slug) so a task's chat window and its entity
|
||||
// detail window never collide over the same wmkit id. See
|
||||
// EntityDesktop.svelte for the id -> content-component branch.
|
||||
// WindowLayer.svelte for the id -> content-component branch.
|
||||
export function openTaskWindow(sessionId: string | null, title: string): void {
|
||||
if (!sessionId) return
|
||||
const id = `session:${sessionId}`
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { messages, streaming, connectionState, sendMessage, cancelStream, reconnect, error, chatErrors, dismissError } from '$lib/stores/chat'
|
||||
import ChatThread from '$lib/components/ChatThread.svelte'
|
||||
import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'
|
||||
|
||||
let { showRail = true }: { showRail?: boolean } = $props()
|
||||
|
||||
// Resizable right rail (session graph). Persisted so it survives reloads.
|
||||
const RAIL_MIN = 260
|
||||
const RAIL_MAX = 620
|
||||
function loadRailWidth(): number {
|
||||
if (typeof localStorage === 'undefined') return 320
|
||||
const v = Number(localStorage.getItem('oikos-rail-width'))
|
||||
return v >= RAIL_MIN && v <= RAIL_MAX ? v : 320
|
||||
}
|
||||
let railWidth = $state(loadRailWidth())
|
||||
let resizing = $state(false)
|
||||
|
||||
function startResize(e: PointerEvent) {
|
||||
e.preventDefault()
|
||||
resizing = true
|
||||
const startX = e.clientX
|
||||
const startW = railWidth
|
||||
function move(ev: PointerEvent) {
|
||||
railWidth = Math.min(RAIL_MAX, Math.max(RAIL_MIN, startW + (startX - ev.clientX)))
|
||||
}
|
||||
function up() {
|
||||
resizing = false
|
||||
localStorage.setItem('oikos-rail-width', String(railWidth))
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
}
|
||||
|
||||
const suggestions = [
|
||||
'What needs my attention right now?',
|
||||
'Summarize fleet health',
|
||||
'Any pending approvals or open signals?',
|
||||
'What changed in the last hour?'
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0">
|
||||
<ChatThread
|
||||
messages={$messages}
|
||||
streaming={$streaming}
|
||||
connectionState={$connectionState}
|
||||
error={$error}
|
||||
chatErrors={$chatErrors}
|
||||
onSend={sendMessage}
|
||||
onCancel={cancelStream}
|
||||
onReconnect={reconnect}
|
||||
onDismissError={dismissError}
|
||||
{suggestions}
|
||||
/>
|
||||
|
||||
{#if showRail}
|
||||
<div class="hidden shrink-0 xl:flex" style="width: {railWidth}px">
|
||||
<button
|
||||
type="button"
|
||||
class="group/rz relative w-1.5 shrink-0 cursor-col-resize touch-none"
|
||||
onpointerdown={startResize}
|
||||
aria-label="Resize task panel"
|
||||
>
|
||||
<span
|
||||
class="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors {resizing
|
||||
? 'bg-primary/60'
|
||||
: 'bg-border group-hover/rz:bg-primary/50'}"
|
||||
></span>
|
||||
</button>
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<TaskContextPanel />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,8 +0,0 @@
|
||||
<script lang="ts">
|
||||
import EntityDetailContent from '$lib/components/EntityDetailContent.svelte'
|
||||
import { openEntityWindow } from '$lib/stores/windows'
|
||||
|
||||
let { slug }: { slug: string } = $props()
|
||||
</script>
|
||||
|
||||
<EntityDetailContent {slug} onSelectEntity={openEntityWindow} />
|
||||
@@ -28,7 +28,7 @@
|
||||
// both views are asking the same underlying question ("show me X").
|
||||
let search = $state('')
|
||||
// Tracks only the most recently opened entity, for row/node highlight —
|
||||
// actual detail viewing now happens in floating windows (EntityDesktop),
|
||||
// actual detail viewing now happens in floating windows (WindowLayer, mounted inside Desktop.svelte),
|
||||
// which can have several entities open at once.
|
||||
let lastOpened = $state<string | null>(null)
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
openEntityWindow(slug)
|
||||
}
|
||||
|
||||
// Drop the highlight once its window is closed (from EntityDesktop, not
|
||||
// Drop the highlight once its window is closed (from WindowLayer, not
|
||||
// necessarily from here) rather than leaving a row/node marked "open" when
|
||||
// it isn't anymore.
|
||||
$effect(() => {
|
||||
@@ -273,7 +273,7 @@
|
||||
</div>
|
||||
|
||||
<!-- browse pane — selecting an entity opens it in a floating window
|
||||
(EntityDesktop, mounted globally in App.svelte) instead of a sidebar. -->
|
||||
(WindowLayer, mounted globally inside Desktop.svelte) instead of a sidebar. -->
|
||||
<div class="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
{#if view === 'graph'}
|
||||
<EntityGraph
|
||||
|
||||
@@ -1,47 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { fetchDashboardSummary, type DashboardSummary, type Session } from '$lib/api'
|
||||
import { sessions, loadSessions, newChat, sendMessage } from '$lib/stores/chat'
|
||||
import { openTaskWindow } from '$lib/stores/windows'
|
||||
import { sessions, loadSessions } from '$lib/stores/chat'
|
||||
import { openTaskWindow, openNewTaskWindow } from '$lib/stores/windows'
|
||||
import { liveEvents, subscribeEvents } from '$lib/stores/events'
|
||||
import { bucket, statusStyle, FILTERS, TASK_EVENTS, heading, type Bucket } from '$lib/tasks'
|
||||
import { relativeTime } from '$lib/utils'
|
||||
import GraphBackground from '$lib/components/GraphBackground.svelte'
|
||||
import { Textarea } from '$lib/components/ui/textarea'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'
|
||||
import CircleCheckIcon from '@lucide/svelte/icons/circle-check'
|
||||
import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert'
|
||||
|
||||
// ── Dashboard metrics (ported from the old Overview cards) ──────────────
|
||||
let summary = $state<DashboardSummary | null>(null)
|
||||
|
||||
async function loadSummary() {
|
||||
summary = await fetchDashboardSummary()
|
||||
}
|
||||
|
||||
const totalEntities = $derived(
|
||||
summary ? Object.values(summary.entities_by_type).reduce((a, b) => a + b, 0) : 0
|
||||
)
|
||||
const entityTypeCount = $derived(summary ? Object.keys(summary.entities_by_type).length : 0)
|
||||
const totalMonitored = $derived(
|
||||
summary
|
||||
? summary.health.healthy + summary.health.degraded + summary.health.down + summary.health.unknown
|
||||
: 0
|
||||
)
|
||||
const healthTone = $derived(
|
||||
!summary ? 'ok' : summary.health.down > 0 ? 'down' : summary.health.degraded > 0 ? 'degraded' : 'ok'
|
||||
)
|
||||
const totalSignals = $derived(
|
||||
summary ? Object.values(summary.signals_by_severity).reduce((a, b) => a + b, 0) : 0
|
||||
)
|
||||
const worstSeverity = $derived(
|
||||
summary?.signals_by_severity.critical
|
||||
? 'critical'
|
||||
: summary?.signals_by_severity.warning
|
||||
? 'warning'
|
||||
: 'none'
|
||||
)
|
||||
import PlusIcon from '@lucide/svelte/icons/plus'
|
||||
import type { Session } from '$lib/api'
|
||||
|
||||
// ── Task board ──────────────────────────────────────────────────────────
|
||||
let filter = $state<'all' | Bucket>('all')
|
||||
@@ -59,28 +26,9 @@
|
||||
openTaskWindow(s.id, heading(s))
|
||||
}
|
||||
|
||||
// ── New task entry ──────────────────────────────────────────────────────
|
||||
let input = $state('')
|
||||
function submit() {
|
||||
const text = input.trim()
|
||||
if (!text) return
|
||||
input = ''
|
||||
newChat()
|
||||
sendMessage(text)
|
||||
location.hash = '#/chat'
|
||||
}
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadSummary()
|
||||
loadSessions()
|
||||
const unsubStream = subscribeEvents()
|
||||
const summaryTimer = setInterval(loadSummary, 15000)
|
||||
|
||||
// Refetch the board when a task's lifecycle changes anywhere. Scan all
|
||||
// events newer than the last seen (entity.touched fires constantly and
|
||||
@@ -102,161 +50,78 @@
|
||||
return () => {
|
||||
unsub()
|
||||
unsubStream()
|
||||
clearInterval(summaryTimer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="relative h-full overflow-hidden">
|
||||
<div class="relative flex h-full flex-col gap-3 overflow-hidden p-4">
|
||||
<GraphBackground />
|
||||
|
||||
<div class="relative z-10 h-full overflow-y-auto">
|
||||
<!-- Hero: fills the viewport. The input is pinned to true vertical center via the
|
||||
grid's middle 1fr row; the metrics strip and scroll hint sit in the auto rows
|
||||
above/below without shifting it off-center. Scrolling lifts the whole hero to
|
||||
reveal the table. -->
|
||||
<section class="grid min-h-full grid-rows-[auto_1fr_auto] gap-6 px-4 py-16">
|
||||
<!-- Metrics strip -->
|
||||
<div class="flex flex-wrap items-center justify-center gap-2 text-xs">
|
||||
<div class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur">
|
||||
<span class="text-muted-foreground">Entities</span>
|
||||
<span class="font-semibold tabular-nums">{totalEntities}</span>
|
||||
{#if entityTypeCount}<span class="text-muted-foreground">· {entityTypeCount} types</span>{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur">
|
||||
<span
|
||||
class="size-2 rounded-full {healthTone === 'ok' ? 'bg-success' : healthTone === 'degraded' ? 'bg-warning' : 'bg-destructive'}"
|
||||
></span>
|
||||
<span class="text-muted-foreground">Health</span>
|
||||
<span class="font-semibold tabular-nums">{summary?.health.healthy ?? 0} / {totalMonitored}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (location.hash = '#/signals')}
|
||||
class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur transition-colors hover:border-primary/50"
|
||||
>
|
||||
{#if worstSeverity === 'critical'}
|
||||
<TriangleAlertIcon class="size-3.5 text-destructive" />
|
||||
{:else if worstSeverity === 'warning'}
|
||||
<TriangleAlertIcon class="size-3.5 text-warning" />
|
||||
{:else}
|
||||
<CircleCheckIcon class="size-3.5 text-success" />
|
||||
{/if}
|
||||
<span class="text-muted-foreground">Signals</span>
|
||||
<span class="font-semibold tabular-nums">{totalSignals}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (location.hash = '#/ops')}
|
||||
class="flex items-center gap-1.5 rounded-full border bg-card/60 px-3 py-1.5 backdrop-blur transition-colors hover:border-primary/50"
|
||||
>
|
||||
<span class="text-muted-foreground">Approvals</span>
|
||||
<span class="font-semibold tabular-nums {summary?.approvals_pending ? 'text-destructive' : ''}"
|
||||
>{summary?.approvals_pending ?? 0}</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative z-10 flex flex-wrap items-center gap-1.5">
|
||||
{#each FILTERS as f}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (filter = f.id)}
|
||||
class="rounded-full border px-2.5 py-1 text-xs transition-colors {filter === f.id
|
||||
? 'border-primary bg-primary/10 text-foreground'
|
||||
: 'border-border bg-card/60 text-muted-foreground backdrop-blur hover:bg-muted/50'}"
|
||||
>
|
||||
{f.label}
|
||||
<span class="ml-1 opacity-60">{counts[f.id] ?? 0}</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex-1"></div>
|
||||
<Button size="sm" class="gap-1.5" onclick={openNewTaskWindow}>
|
||||
<PlusIcon class="size-4" />
|
||||
New task
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- New task entry: centered in the middle (1fr) row -->
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-full max-w-2xl text-center">
|
||||
<h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
|
||||
<p class="mb-4 text-sm text-muted-foreground">
|
||||
Describe a goal — Nomos will plan it, execute it, and report the outcome.
|
||||
<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>
|
||||
<form
|
||||
class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}}
|
||||
>
|
||||
<Textarea
|
||||
bind:value={input}
|
||||
onkeydown={handleKeydown}
|
||||
placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
|
||||
rows={3}
|
||||
class="max-h-52 min-h-24 resize-none border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center justify-between px-3 pb-3">
|
||||
<span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
|
||||
<Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
|
||||
<ArrowUpIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="justify-self-center text-[11px] text-muted-foreground/70">Scroll to see all tasks ↓</span>
|
||||
</section>
|
||||
|
||||
<!-- Task table -->
|
||||
<section class="mx-auto w-full max-w-5xl px-4 pb-16">
|
||||
<div class="rounded-xl border bg-card/70 backdrop-blur">
|
||||
<div class="flex flex-wrap items-center gap-1.5 border-b p-3">
|
||||
{#each FILTERS as f}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (filter = f.id)}
|
||||
class="rounded-full border px-2.5 py-1 text-xs transition-colors {filter === f.id
|
||||
? 'border-primary bg-primary/10 text-foreground'
|
||||
: 'border-border text-muted-foreground hover:bg-muted/50'}"
|
||||
{:else}
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-muted-foreground">
|
||||
<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)}
|
||||
>
|
||||
{f.label}
|
||||
<span class="ml-1 opacity-60">{counts[f.id] ?? 0}</span>
|
||||
</button>
|
||||
<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}
|
||||
</div>
|
||||
|
||||
{#if visible.length === 0}
|
||||
<div class="flex flex-col items-center gap-2 px-4 py-16 text-center">
|
||||
<p class="max-w-sm text-sm text-muted-foreground">
|
||||
{filter === 'all'
|
||||
? 'No tasks yet. Start one above and Nomos will plan it, execute it, and report the outcome.'
|
||||
: `No ${FILTERS.find((f) => f.id === filter)?.label.toLowerCase()} tasks.`}
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-muted-foreground">
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
193
web/src/pages/Settings.svelte
Normal file
193
web/src/pages/Settings.svelte
Normal file
@@ -0,0 +1,193 @@
|
||||
<script lang="ts">
|
||||
// The desktop's Settings window — a generic shell (section list + content
|
||||
// pane) so future settings just add a SECTIONS entry instead of a whole
|
||||
// new window/screen. Connection reuses the same config.ts/oidc.ts calls as
|
||||
// pages/Config.svelte (the full-page initial setup screen), just without
|
||||
// that screen's "first run" framing — this is for changing settings while
|
||||
// already inside the desktop.
|
||||
import { Input } from '$lib/components/ui/input'
|
||||
import { Label } from '$lib/components/ui/label'
|
||||
import { Button } from '$lib/components/ui/button'
|
||||
import { Separator } from '$lib/components/ui/separator'
|
||||
import { fetchWithAuth, setConfig, initConfig, getConfig, clearConfig, type OikosConfig } from '$lib/config'
|
||||
import { startLogin, logout as oidcLogout, getUser, isOIDCConfigured } from '$lib/oidc'
|
||||
import { getTheme, setTheme, THEME_LABELS, type Theme } from '$lib/stores/theme.svelte'
|
||||
import { VERSION } from '$lib/version'
|
||||
import { toast } from 'svelte-sonner'
|
||||
import PlugIcon from '@lucide/svelte/icons/plug'
|
||||
import PaletteIcon from '@lucide/svelte/icons/palette'
|
||||
import LockIcon from '@lucide/svelte/icons/lock'
|
||||
import LogInIcon from '@lucide/svelte/icons/log-in'
|
||||
import ServerIcon from '@lucide/svelte/icons/server'
|
||||
import CheckIcon from '@lucide/svelte/icons/check'
|
||||
|
||||
const SECTIONS = [
|
||||
{ id: 'connection', label: 'Connection', icon: PlugIcon },
|
||||
{ id: 'appearance', label: 'Appearance', icon: PaletteIcon }
|
||||
] as const
|
||||
type SectionId = (typeof SECTIONS)[number]['id']
|
||||
|
||||
let section = $state<SectionId>('connection')
|
||||
|
||||
const existing = getConfig()
|
||||
let apiUrl = $state(existing.apiUrl ?? '')
|
||||
let token = $state(existing.token ?? '')
|
||||
let saving = $state(false)
|
||||
let error = $state('')
|
||||
let oidcLoggingIn = $state(false)
|
||||
const oidcUser = getUser()
|
||||
const oidcConfigured = isOIDCConfigured()
|
||||
|
||||
async function save() {
|
||||
error = ''
|
||||
if (!token.trim()) {
|
||||
error = 'Token is required'
|
||||
return
|
||||
}
|
||||
saving = true
|
||||
const prev: OikosConfig = getConfig()
|
||||
setConfig({ apiUrl: apiUrl.trim(), token: token.trim() })
|
||||
initConfig({ apiUrl: apiUrl.trim(), token: token.trim() })
|
||||
try {
|
||||
const res = await fetchWithAuth('/api/v1/dashboard/summary')
|
||||
if (!res.ok) {
|
||||
error = res.status === 401 ? 'Invalid token' : `Server responded ${res.status}`
|
||||
setConfig(prev)
|
||||
initConfig(prev)
|
||||
return
|
||||
}
|
||||
toast.success('Connection saved')
|
||||
} catch {
|
||||
error = 'Could not reach server — check the URL'
|
||||
setConfig(prev)
|
||||
initConfig(prev)
|
||||
} finally {
|
||||
saving = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loginWithAuthentik() {
|
||||
error = ''
|
||||
oidcLoggingIn = true
|
||||
setConfig({ apiUrl: apiUrl.trim(), token: '' })
|
||||
initConfig({ apiUrl: apiUrl.trim(), token: '' })
|
||||
try {
|
||||
await startLogin()
|
||||
} catch (e: unknown) {
|
||||
error = e instanceof Error ? e.message : 'OIDC login failed'
|
||||
oidcLoggingIn = false
|
||||
}
|
||||
}
|
||||
|
||||
// Disconnecting invalidates the token every open window's data depends on
|
||||
// — a reload is the simplest way back to a clean state (lands on the
|
||||
// full-page Config screen since isConfigured() is now false).
|
||||
function forgetConnection() {
|
||||
clearConfig()
|
||||
oidcLogout()
|
||||
location.reload()
|
||||
}
|
||||
|
||||
function pickTheme(t: Theme) {
|
||||
setTheme(t)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<div class="flex min-h-0 flex-1">
|
||||
<nav class="flex w-44 shrink-0 flex-col gap-0.5 border-r bg-muted/20 p-2">
|
||||
{#each SECTIONS as s (s.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors {section === s.id
|
||||
? 'bg-muted font-medium text-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'}"
|
||||
onclick={() => (section = s.id)}
|
||||
>
|
||||
<s.icon class="size-4 shrink-0" />
|
||||
{s.label}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-y-auto p-6">
|
||||
{#if section === 'connection'}
|
||||
<div class="mx-auto flex max-w-md flex-col gap-5">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold">Connection</h2>
|
||||
<p class="mt-0.5 text-xs text-muted-foreground">Where the control room talks to your Oikos server.</p>
|
||||
</div>
|
||||
|
||||
{#if oidcUser}
|
||||
<p class="text-xs text-muted-foreground">
|
||||
Signed in via Authentik as <span class="font-medium text-foreground">{oidcUser}</span>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<Label for="settings-server-url" class="text-xs font-medium">Server URL</Label>
|
||||
<div class="relative">
|
||||
<ServerIcon class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/50" />
|
||||
<Input id="settings-server-url" type="url" placeholder="https://oikos.hubris.network" class="pl-9" bind:value={apiUrl} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="button" variant="secondary" disabled={oidcLoggingIn} onclick={loginWithAuthentik} class="w-full gap-2">
|
||||
<LogInIcon class="size-4" />
|
||||
{oidcLoggingIn ? 'Redirecting…' : oidcConfigured ? 'Switch account with Authentik' : 'Login with Authentik'}
|
||||
</Button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<Separator decorative class="flex-1" />
|
||||
<span class="text-[10px] font-medium uppercase tracking-widest text-muted-foreground/40">or use</span>
|
||||
<Separator decorative class="flex-1" />
|
||||
</div>
|
||||
|
||||
<form class="flex flex-col gap-2.5" onsubmit={(e) => { e.preventDefault(); save() }}>
|
||||
<div class="relative">
|
||||
<LockIcon class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/50" />
|
||||
<Input type="password" placeholder="Bearer token" class="pl-9" bind:value={token} />
|
||||
</div>
|
||||
<Button type="submit" disabled={saving} class="w-full">
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{#if error}
|
||||
<p class="rounded-lg bg-destructive/10 px-3 py-2 text-center text-sm text-destructive">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if existing.token || oidcConfigured}
|
||||
<div class="flex justify-center pt-1">
|
||||
<Button type="button" variant="ghost" size="sm" onclick={forgetConnection}>Forget saved connection</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if section === 'appearance'}
|
||||
<div class="mx-auto flex max-w-md flex-col gap-5">
|
||||
<div>
|
||||
<h2 class="text-sm font-semibold">Appearance</h2>
|
||||
<p class="mt-0.5 text-xs text-muted-foreground">Pick the theme for the whole desktop.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each Object.entries(THEME_LABELS) as [id, label] (id)}
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-between rounded-lg border px-3.5 py-2.5 text-left text-sm transition-colors {getTheme() === (id as Theme)
|
||||
? 'border-primary/50 bg-primary/5 text-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted/50'}"
|
||||
onclick={() => pickTheme(id as Theme)}
|
||||
>
|
||||
{label}
|
||||
{#if getTheme() === (id as Theme)}<CheckIcon class="size-4 text-primary" />{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0 border-t px-3 py-1.5 text-right text-[11px] text-muted-foreground">Oikos {VERSION}</div>
|
||||
</div>
|
||||
17
web/src/test-setup.ts
Normal file
17
web/src/test-setup.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// jsdom doesn't implement matchMedia — anything that transitively imports
|
||||
// theme.svelte.ts (which reads the OS color-scheme preference at module
|
||||
// load) throws without this. Global vitest setup so every test file gets it
|
||||
// for free instead of each one needing its own mock.
|
||||
if (typeof window !== 'undefined' && !window.matchMedia) {
|
||||
window.matchMedia = (query: string): MediaQueryList =>
|
||||
({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false
|
||||
}) as MediaQueryList
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import type { ProxyOptions } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { readFileSync, existsSync } from 'fs'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// In Docker, VERSION is copied into the build WORKDIR (/build/web/VERSION).
|
||||
@@ -45,12 +46,27 @@ export default defineConfig({
|
||||
__OIKOS_DEV_TOKEN__: JSON.stringify(process.env.OIKOS_API_TOKEN ?? ''),
|
||||
},
|
||||
resolve: {
|
||||
alias: { $lib: '/src/lib' }
|
||||
alias: {
|
||||
$lib: '/src/lib',
|
||||
// svelte-splitpanes imports SvelteKit's browser-detection module; this
|
||||
// isn't a SvelteKit app, so point it at a plain shim (see the file).
|
||||
// Needs a real filesystem path (not the /src/... shorthand $lib uses)
|
||||
// so esbuild's dependency pre-bundler can resolve it too.
|
||||
'$app/environment': fileURLToPath(new URL('./src/lib/shims/app-environment.ts', import.meta.url))
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true
|
||||
},
|
||||
optimizeDeps: {
|
||||
// svelte-splitpanes imports SvelteKit's $app/environment (aliased above
|
||||
// to a shim), but esbuild's dependency pre-bundler resolves that
|
||||
// differently and fails before the dev server even starts — skip
|
||||
// pre-bundling it so it goes through Vite's normal (alias-aware)
|
||||
// transform pipeline instead.
|
||||
exclude: ['svelte-splitpanes']
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': authProxy('http://localhost:8090'),
|
||||
@@ -63,6 +79,7 @@ export default defineConfig({
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
globals: true,
|
||||
setupFiles: ['src/test-setup.ts'],
|
||||
include: ['src/**/*.{test,spec}.{ts,js}']
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user