diff options
Diffstat (limited to 'src/features')
126 files changed, 18714 insertions, 2333 deletions
diff --git a/src/features/cache-warming/index.ts b/src/features/cache-warming/index.ts new file mode 100644 index 0000000..976844b --- /dev/null +++ b/src/features/cache-warming/index.ts @@ -0,0 +1,8 @@ +export type { WarmFeedback, WarmNow } from "./logic/view-model"; +export { default as CacheWarmingView } from "./ui/CacheWarmingView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "cache-warming", + description: "Prompt-cache warming controls, history, and countdown", +} as const; diff --git a/src/features/cache-warming/logic/view-model.test.ts b/src/features/cache-warming/logic/view-model.test.ts new file mode 100644 index 0000000..39fec80 --- /dev/null +++ b/src/features/cache-warming/logic/view-model.test.ts @@ -0,0 +1,228 @@ +import type { SurfaceSpec } from "@dispatch/ui-contract"; +import { describe, expect, it } from "vitest"; +import { + clampMinutes, + clampSeconds, + colorClass, + formatCountdown, + formatWarmLabel, + fromMinSec, + initialWarmingState, + observeWarm, + parseControls, + parsePct, + secondsUntilNext, + statusForPct, + toMinSec, +} from "./view-model"; + +const spec = (fields: SurfaceSpec["fields"]): SurfaceSpec => ({ + id: "cache-warming", + region: "side", + title: "Cache Warming", + fields, +}); + +describe("parsePct", () => { + it("parses a percentage string", () => { + expect(parsePct("100%")).toBe(100); + expect(parsePct("93 %")).toBe(93); + expect(parsePct("0%")).toBe(0); + }); + it("returns null for a dash / non-numeric", () => { + expect(parsePct("—")).toBeNull(); + expect(parsePct("n/a")).toBeNull(); + }); +}); + +describe("parseControls", () => { + it("returns empty defaults for a null spec", () => { + const c = parseControls(null); + expect(c).toEqual({ + enabled: false, + toggleActionId: null, + intervalSeconds: 0, + setIntervalActionId: null, + lastPct: null, + retentionPct: null, + nextWarmAt: null, + lastWarmAt: null, + }); + }); + + it("extracts toggle / number / both stats / timer by kind", () => { + const c = parseControls( + spec([ + { + kind: "toggle", + label: "Enabled", + value: true, + action: { actionId: "cache-warming/toggle" }, + }, + { + kind: "number", + label: "Interval", + value: 240, + unit: "s", + action: { actionId: "cache-warming/set-interval" }, + }, + { kind: "stat", label: "Last cache rate", value: "61%" }, + { kind: "stat", label: "Cache retention", value: "100%" }, + { + kind: "custom", + rendererId: "cache-warming-timer", + payload: { nextWarmAt: 1_700_000_240_000, lastWarmAt: 1_700_000_000_000 }, + }, + ]), + ); + expect(c).toEqual({ + enabled: true, + toggleActionId: "cache-warming/toggle", + intervalSeconds: 240, + setIntervalActionId: "cache-warming/set-interval", + lastPct: 61, + retentionPct: 100, + nextWarmAt: 1_700_000_240_000, + lastWarmAt: 1_700_000_000_000, + }); + }); + + it("tells the retention stat apart from the rate stat by label", () => { + const c = parseControls( + spec([ + { kind: "stat", label: "Cache retention", value: "100%" }, + { kind: "stat", label: "Last cache rate", value: "61%" }, + ]), + ); + expect(c.retentionPct).toBe(100); + expect(c.lastPct).toBe(61); + }); + + it("treats a '—' stat as no pct", () => { + const c = parseControls(spec([{ kind: "stat", label: "Last cache rate", value: "—" }])); + expect(c.lastPct).toBeNull(); + }); + + it("ignores an unknown custom renderer and a malformed timer payload", () => { + const c = parseControls( + spec([ + { kind: "custom", rendererId: "something-else", payload: { nextWarmAt: 5 } }, + { kind: "custom", rendererId: "cache-warming-timer", payload: "nope" }, + ]), + ); + expect(c.nextWarmAt).toBeNull(); + expect(c.lastWarmAt).toBeNull(); + }); +}); + +describe("interval ↔ min/sec", () => { + it("clampSeconds caps at 0..59", () => { + expect(clampSeconds(75)).toBe(59); + expect(clampSeconds(-3)).toBe(0); + expect(clampSeconds(30)).toBe(30); + expect(clampSeconds(Number.NaN)).toBe(0); + }); + it("clampMinutes floors at 0", () => { + expect(clampMinutes(-1)).toBe(0); + expect(clampMinutes(4)).toBe(4); + }); + it("toMinSec splits total seconds", () => { + expect(toMinSec(240)).toEqual({ minutes: 4, seconds: 0 }); + expect(toMinSec(125)).toEqual({ minutes: 2, seconds: 5 }); + expect(toMinSec(45)).toEqual({ minutes: 0, seconds: 45 }); + }); + it("fromMinSec combines (clamping seconds to 59)", () => { + expect(fromMinSec(4, 0)).toBe(240); + expect(fromMinSec(2, 5)).toBe(125); + expect(fromMinSec(1, 75)).toBe(119); // 75s clamped to 59 + }); +}); + +describe("status + formatting", () => { + it("statusForPct buckets high/mid/low", () => { + expect(statusForPct(100)).toBe("success"); + expect(statusForPct(80)).toBe("success"); + expect(statusForPct(60)).toBe("warning"); + expect(statusForPct(40)).toBe("warning"); + expect(statusForPct(10)).toBe("error"); + }); + it("colorClass maps to literal DaisyUI classes", () => { + expect(colorClass("success")).toBe("text-success"); + expect(colorClass("warning")).toBe("text-warning"); + expect(colorClass("error")).toBe("text-error"); + }); + it("formatWarmLabel matches the manual-warm phrasing", () => { + expect(formatWarmLabel(100)).toBe("Warmed — 100% cache hit"); + expect(formatWarmLabel(92.6)).toBe("Warmed — 93% cache hit"); + }); + it("formatCountdown renders s and m:ss", () => { + expect(formatCountdown(9)).toBe("9s"); + expect(formatCountdown(59)).toBe("59s"); + expect(formatCountdown(60)).toBe("1:00"); + expect(formatCountdown(185)).toBe("3:05"); + expect(formatCountdown(-5)).toBe("0s"); + }); +}); + +describe("warming history reducer (observeWarm)", () => { + it("starts empty", () => { + const s = initialWarmingState(); + expect(s.history).toEqual([]); + expect(s.lastWarmAt).toBeNull(); + }); + + it("records a new entry on each new authoritative lastWarmAt", () => { + let s = initialWarmingState(); + s = observeWarm(s, 1000, 100); + s = observeWarm(s, 2000, 90); + expect(s.history).toEqual([ + { pct: 90, at: 2000 }, + { pct: 100, at: 1000 }, + ]); + expect(s.lastWarmAt).toBe(2000); + }); + + it("de-duplicates on the timestamp, not the pct (a re-pushed surface → no dup)", () => { + let s = initialWarmingState(); + s = observeWarm(s, 1000, 100); // warm + s = observeWarm(s, 1000, 100); // toggle/interval re-push, same lastWarmAt → skip + expect(s.history).toHaveLength(1); + }); + + it("records two warms with the SAME pct (distinct timestamps both count)", () => { + let s = initialWarmingState(); + s = observeWarm(s, 1000, 100); + s = observeWarm(s, 2000, 100); + expect(s.history.map((e) => e.at)).toEqual([2000, 1000]); + }); + + it("ignores a null lastWarmAt; a null pct advances the key without an entry", () => { + let s = initialWarmingState(); + s = observeWarm(s, null, 100); + expect(s.history).toEqual([]); + s = observeWarm(s, 1000, null); + expect(s.history).toEqual([]); + expect(s.lastWarmAt).toBe(1000); + }); +}); + +describe("secondsUntilNext (authoritative, from nextWarmAt)", () => { + it("is null when nothing is scheduled (nextWarmAt null)", () => { + expect(secondsUntilNext(null, 5000)).toBeNull(); + }); + + it("counts down to nextWarmAt, floored at 0", () => { + expect(secondsUntilNext(10_000, 10_000)).toBe(0); + expect(secondsUntilNext(250_000, 10_000)).toBe(240); + expect(secondsUntilNext(70_000, 10_000)).toBe(60); + }); + + it("treats a nextWarmAt past the stale grace as not scheduled (belt-and-braces)", () => { + // Within the 3s grace an on-time warm may briefly read "0s"… + expect(secondsUntilNext(10_000, 11_000)).toBe(0); + expect(secondsUntilNext(10_000, 13_000)).toBe(0); + // …but beyond it the value is stale → null (the "waiting…" state). + expect(secondsUntilNext(10_000, 13_001)).toBeNull(); + expect(secondsUntilNext(5_000, 999_999)).toBeNull(); + }); +}); diff --git a/src/features/cache-warming/logic/view-model.ts b/src/features/cache-warming/logic/view-model.ts new file mode 100644 index 0000000..bc8cf2e --- /dev/null +++ b/src/features/cache-warming/logic/view-model.ts @@ -0,0 +1,254 @@ +import type { SurfaceSpec } from "@dispatch/ui-contract"; + +/** + * Pure core for the cache-warming view — zero DOM, zero effects, zero Svelte. + * + * The backend's `cache-warming` surface carries a toggle, a number interval (in + * seconds), two `stat`s ("last cache rate" + "cache retention"), and a `custom` + * `cache-warming-timer` field bearing the AUTHORITATIVE `nextWarmAt`/`lastWarmAt` + * epoch-ms timestamps. This module turns those inputs into the view-model the + * (thin) Svelte component renders: parsed controls, a warming-history reducer + * keyed off the authoritative `lastWarmAt`, an authoritative countdown, and the + * status/format helpers. + */ + +// ── Manual-warm port (consumer-defines-port; the composition root adapts the +// store's `POST /chat/warm` result to this shape). ────────────────────────── +export type WarmFeedback = + | { readonly ok: true; readonly cachePct: number; readonly expectedCacheRate: number } + | { readonly ok: false; readonly error: string }; + +export type WarmNow = () => Promise<WarmFeedback | null>; + +// ── Parsed surface controls ─────────────────────────────────────────────────── + +export interface ParsedControls { + readonly enabled: boolean; + readonly toggleActionId: string | null; + readonly intervalSeconds: number; + readonly setIntervalActionId: string | null; + /** Most recent warm's cache-hit %, from the "last cache rate" stat (`null` when "—"/absent). */ + readonly lastPct: number | null; + /** Cross-turn retention %, from the "cache retention" stat (`null` when "—"/absent). */ + readonly retentionPct: number | null; + /** Authoritative epoch-ms the next AUTOMATIC warm fires, or `null` when not scheduled. */ + readonly nextWarmAt: number | null; + /** Authoritative epoch-ms of the most recent completed warm, or `null` if none. */ + readonly lastWarmAt: number | null; +} + +const EMPTY_CONTROLS: ParsedControls = { + enabled: false, + toggleActionId: null, + intervalSeconds: 0, + setIntervalActionId: null, + lastPct: null, + retentionPct: null, + nextWarmAt: null, + lastWarmAt: null, +}; + +/** The `cache-warming-timer` custom field's renderer id (this feature owns it). */ +const TIMER_RENDERER_ID = "cache-warming-timer"; + +/** Parse a stat's display string (e.g. "100%", "93 %", "—") into a number or null. */ +export function parsePct(value: string): number | null { + const match = value.match(/-?\d+(?:\.\d+)?/); + if (match === null) return null; + const n = Number(match[0]); + return Number.isFinite(n) ? n : null; +} + +/** A finite number, else null. */ +function numOrNull(v: unknown): number | null { + return typeof v === "number" && Number.isFinite(v) ? v : null; +} + +/** Pull the authoritative `nextWarmAt`/`lastWarmAt` out of the timer custom payload. */ +function parseTimer(payload: unknown): { nextWarmAt: number | null; lastWarmAt: number | null } { + if (typeof payload !== "object" || payload === null) { + return { nextWarmAt: null, lastWarmAt: null }; + } + const p = payload as Record<string, unknown>; + return { nextWarmAt: numOrNull(p.nextWarmAt), lastWarmAt: numOrNull(p.lastWarmAt) }; +} + +/** + * Extract the cache-warming controls from the surface spec by FIELD KIND. The + * surface has one toggle, one number, two stats (rate + retention, told apart by + * label), and one `custom` timer field. Returns empty defaults when the spec is + * absent. + */ +export function parseControls(spec: SurfaceSpec | null): ParsedControls { + if (spec === null) return EMPTY_CONTROLS; + let enabled = false; + let toggleActionId: string | null = null; + let intervalSeconds = 0; + let setIntervalActionId: string | null = null; + let lastPct: number | null = null; + let retentionPct: number | null = null; + let nextWarmAt: number | null = null; + let lastWarmAt: number | null = null; + let seenToggle = false; + let seenNumber = false; + let seenRateStat = false; + for (const field of spec.fields) { + if (field.kind === "toggle" && !seenToggle) { + enabled = field.value; + toggleActionId = field.action.actionId; + seenToggle = true; + } else if (field.kind === "number" && !seenNumber) { + intervalSeconds = field.value; + setIntervalActionId = field.action.actionId; + seenNumber = true; + } else if (field.kind === "stat") { + // Retention is told apart by its label; everything else is the cache rate + // (first one wins, so a stray later stat can't clobber it). + if (/retention/i.test(field.label)) { + retentionPct = parsePct(field.value); + } else if (!seenRateStat) { + lastPct = parsePct(field.value); + seenRateStat = true; + } + } else if (field.kind === "custom" && field.rendererId === TIMER_RENDERER_ID) { + const timer = parseTimer(field.payload); + nextWarmAt = timer.nextWarmAt; + lastWarmAt = timer.lastWarmAt; + } + } + return { + enabled, + toggleActionId, + intervalSeconds, + setIntervalActionId, + lastPct, + retentionPct, + nextWarmAt, + lastWarmAt, + }; +} + +// ── Interval ↔ minutes/seconds (seconds capped at 59) ───────────────────────── + +export interface MinSec { + readonly minutes: number; + readonly seconds: number; +} + +export function clampSeconds(n: number): number { + if (!Number.isFinite(n)) return 0; + return Math.min(59, Math.max(0, Math.floor(n))); +} + +export function clampMinutes(n: number): number { + if (!Number.isFinite(n)) return 0; + return Math.max(0, Math.floor(n)); +} + +export function toMinSec(totalSeconds: number): MinSec { + const total = Math.max(0, Math.floor(totalSeconds)); + return { minutes: Math.floor(total / 60), seconds: total % 60 }; +} + +/** Combine a minutes + seconds pair (each clamped) into total seconds. */ +export function fromMinSec(minutes: number, seconds: number): number { + return clampMinutes(minutes) * 60 + clampSeconds(seconds); +} + +// ── Status + formatting ─────────────────────────────────────────────────────── + +export type WarmStatus = "success" | "warning" | "error"; + +/** Cache-hit % → semantic status (green high, yellow mid, red low). */ +export function statusForPct(pct: number): WarmStatus { + if (pct >= 80) return "success"; + if (pct >= 40) return "warning"; + return "error"; +} + +/** A status → its DaisyUI text-colour class (full literal so Tailwind keeps it). */ +export function colorClass(status: WarmStatus): string { + switch (status) { + case "success": + return "text-success"; + case "warning": + return "text-warning"; + case "error": + return "text-error"; + } +} + +/** The status line for a warm, matching the manual-warm feedback phrasing. */ +export function formatWarmLabel(pct: number): string { + return `Warmed — ${Math.round(pct)}% cache hit`; +} + +/** Seconds → a short countdown string (e.g. "3:05", "9s"). */ +export function formatCountdown(seconds: number): string { + const s = Math.max(0, Math.floor(seconds)); + if (s < 60) return `${s}s`; + const m = Math.floor(s / 60); + const rem = s % 60; + return `${m}:${String(rem).padStart(2, "0")}`; +} + +// ── Warming history reducer (keyed off the authoritative `lastWarmAt`) ───────── + +export interface WarmEntry { + readonly pct: number; + /** Authoritative epoch-ms of this warm (the surface's `lastWarmAt`). */ + readonly at: number; +} + +export interface WarmingViewState { + /** Warmings, MOST RECENT FIRST. */ + readonly history: readonly WarmEntry[]; + /** The last authoritative `lastWarmAt` recorded, for change-detection (de-dup key). */ + readonly lastWarmAt: number | null; +} + +const MAX_HISTORY = 50; + +export function initialWarmingState(): WarmingViewState { + return { history: [], lastWarmAt: null }; +} + +/** + * Fold the surface's authoritative `lastWarmAt` + current "last cache rate" into + * history. Records a new entry only when `lastWarmAt` CHANGED (a toggle/interval + * update re-pushes the same timestamp → no entry), de-duplicated on the timestamp + * (not the pct, so two warms with the same % both count). A null `lastWarmAt` is + * ignored; a null pct advances the de-dup key without adding an entry. + */ +export function observeWarm( + state: WarmingViewState, + lastWarmAt: number | null, + pct: number | null, +): WarmingViewState { + if (lastWarmAt === null || lastWarmAt === state.lastWarmAt) return state; + if (pct === null) return { ...state, lastWarmAt }; + const history = [{ pct, at: lastWarmAt }, ...state.history].slice(0, MAX_HISTORY); + return { history, lastWarmAt }; +} + +/** + * Grace before a PAST `nextWarmAt` is treated as "not scheduled" (→ the + * "waiting…" state instead of a perpetual "0s"). The backend pushes the FUTURE + * `nextWarmAt` after every warm (CR-4b) and `null` while generating/disabled, so + * this is a belt-and-braces guard that should never trigger — it only matters + * against a stale/buggy emitter, and the small window lets an on-time warm show + * "0s" for the second it takes to complete. + */ +const STALE_NEXT_WARM_MS = 3000; + +/** + * Seconds until the next automatic warm, AUTHORITATIVE: derived straight from the + * backend's `nextWarmAt` epoch-ms (never FE-anchored/guessed). `null` when nothing + * is scheduled (disabled, or a turn is generating so the timer is cancelled) — or + * when `nextWarmAt` is stale (further than the grace into the past). + */ +export function secondsUntilNext(nextWarmAt: number | null, now: number): number | null { + if (nextWarmAt === null) return null; + if (now - nextWarmAt > STALE_NEXT_WARM_MS) return null; + return Math.max(0, Math.ceil((nextWarmAt - now) / 1000)); +} diff --git a/src/features/cache-warming/ui/CacheWarmingView.svelte b/src/features/cache-warming/ui/CacheWarmingView.svelte new file mode 100644 index 0000000..9b3d694 --- /dev/null +++ b/src/features/cache-warming/ui/CacheWarmingView.svelte @@ -0,0 +1,244 @@ +<script lang="ts"> + import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract"; + import { onMount, untrack } from "svelte"; + import { + clampMinutes, + clampSeconds, + colorClass, + formatCountdown, + formatWarmLabel, + fromMinSec, + initialWarmingState, + observeWarm, + parseControls, + secondsUntilNext, + statusForPct, + toMinSec, + type WarmingViewState, + type WarmNow, + } from "../logic/view-model"; + + let { + spec, + canWarm, + onInvoke, + warmNow, + }: { + /** The cache-warming surface spec for the focused conversation, or null. */ + spec: SurfaceSpec | null; + /** Whether a real conversation is focused (a draft has nothing to warm). */ + canWarm: boolean; + onInvoke: (msg: InvokeMessage) => void; + warmNow: WarmNow; + } = $props(); + + const controls = $derived(parseControls(spec)); + + // View-model state (pure reducer) + the injected clock — owned here, not ambient. + let vm = $state<WarmingViewState>(initialWarmingState()); + let now = $state(Date.now()); + let warming = $state(false); + let errorText = $state<string | null>(null); + // Transient result of the most recent manual warm (immediate feedback; history + // itself is driven authoritatively by the surface's `lastWarmAt`). + let manualResult = $state<{ cachePct: number; expectedCacheRate: number } | null>(null); + + // Local interval inputs, seeded from the surface and re-seeded only when the + // surface's interval differs from what's shown (so a stray update mid-edit + // doesn't clobber typing). + let minutes = $state(0); + let seconds = $state(0); + + onMount(() => { + const id = setInterval(() => { + now = Date.now(); + }, 1000); + return () => clearInterval(id); + }); + + // Fold each authoritative warm (new `lastWarmAt`) into history. + $effect(() => { + const at = controls.lastWarmAt; + const pct = controls.lastPct; + untrack(() => { + vm = observeWarm(vm, at, pct); + }); + }); + + // Keep the min/sec inputs in sync with the surface's interval. + $effect(() => { + const target = controls.intervalSeconds; + untrack(() => { + if (fromMinSec(minutes, seconds) !== target) { + const ms = toMinSec(target); + minutes = ms.minutes; + seconds = ms.seconds; + } + }); + }); + + const remaining = $derived(secondsUntilNext(controls.nextWarmAt, now)); + const history = $derived(vm.history); + const latest = $derived(history[0] ?? null); + const earlier = $derived(history.slice(1)); + + function commitInterval() { + const actionId = controls.setIntervalActionId; + if (actionId === null || spec === null) return; + onInvoke({ + type: "invoke", + surfaceId: spec.id, + actionId, + payload: fromMinSec(minutes, seconds), + }); + } + + function onMinutes(event: Event) { + const next = (event.target as HTMLInputElement).valueAsNumber; + if (Number.isNaN(next)) return; // empty input — ignore, don't clobber to 0 + minutes = clampMinutes(next); + commitInterval(); + } + + function onSeconds(event: Event) { + const next = (event.target as HTMLInputElement).valueAsNumber; + if (Number.isNaN(next)) return; // empty input — ignore, don't clobber to 0 + seconds = clampSeconds(next); + commitInterval(); + } + + function onToggle() { + const actionId = controls.toggleActionId; + if (actionId === null || spec === null) return; + // The toggle action FLIPS server-side; no payload. + onInvoke({ type: "invoke", surfaceId: spec.id, actionId }); + } + + async function handleWarm() { + if (warming) return; + warming = true; + errorText = null; + const result = await warmNow(); + warming = false; + if (result === null) return; + if (result.ok) { + // Immediate feedback only — the authoritative surface `update` (new + // `lastWarmAt`) drives the history via `observeWarm`. + manualResult = { cachePct: result.cachePct, expectedCacheRate: result.expectedCacheRate }; + } else { + manualResult = null; + errorText = result.error; + } + } +</script> + +<div class="flex flex-col gap-3"> + <!-- Enabled --> + <label class="flex items-center justify-between gap-2 text-sm"> + <span>Enabled</span> + <input + type="checkbox" + class="toggle toggle-sm toggle-success" + checked={controls.enabled} + disabled={spec === null} + onchange={onToggle} + /> + </label> + + <!-- Refresh interval: minutes + seconds (seconds capped at 59) --> + <div class="flex items-center justify-between gap-2 text-sm"> + <span>Refresh interval</span> + <span class="flex items-center gap-1"> + <input + type="number" + class="input input-bordered input-sm w-16" + min="0" + value={minutes} + disabled={spec === null} + onchange={onMinutes} + aria-label="Interval minutes" + /> + <span class="opacity-60">m</span> + <input + type="number" + class="input input-bordered input-sm w-16" + min="0" + max="59" + value={seconds} + disabled={spec === null} + onchange={onSeconds} + aria-label="Interval seconds" + /> + <span class="opacity-60">s</span> + </span> + </div> + + <!-- Countdown to the next automatic warm (authoritative: driven by nextWarmAt) --> + {#if !controls.enabled} + <p class="text-xs opacity-50">Warming paused.</p> + {:else if remaining !== null} + <p class="text-xs opacity-70">Next warm in {formatCountdown(remaining)}</p> + {:else} + <p class="text-xs opacity-50">Next warm: waiting…</p> + {/if} + + <!-- Cross-turn retention (the "is warming working?" health signal) --> + {#if controls.retentionPct !== null} + <p class="text-xs {colorClass(statusForPct(controls.retentionPct))}"> + Cache retention: {controls.retentionPct}% + </p> + {/if} + + <!-- Manual trigger --> + <button + type="button" + class="btn btn-sm btn-outline" + disabled={!canWarm || warming} + onclick={handleWarm} + > + {#if warming} + <span class="loading loading-spinner loading-xs"></span> + Warming… + {:else} + Warm now + {/if} + </button> + + {#if !canWarm} + <p class="text-xs opacity-60">Open or start a conversation to control its cache warming.</p> + {:else if errorText} + <p class="text-xs text-error">{errorText}</p> + {:else if manualResult} + <!-- Headline the retention (cache health) over the raw hit %. --> + <p class="text-xs {colorClass(statusForPct(manualResult.expectedCacheRate))}"> + Warmed — {manualResult.expectedCacheRate}% retained ({manualResult.cachePct}% of prompt + cached) + </p> + {/if} + + <!-- Warming history: collapse whose title is the most recent warm, coloured by + hit %, with the earlier warmings inside. --> + {#if latest} + <div class="collapse collapse-arrow bg-base-200"> + <input type="checkbox" aria-label="Toggle warming history" /> + <div + class="collapse-title min-h-0 py-2 font-normal text-sm {colorClass( + statusForPct(latest.pct), + )}" + > + {formatWarmLabel(latest.pct)} + </div> + <div class="collapse-content flex flex-col gap-1 text-sm"> + {#if earlier.length > 0} + {#each earlier as entry, i (i)} + <p class={colorClass(statusForPct(entry.pct))}>{formatWarmLabel(entry.pct)}</p> + {/each} + {:else} + <p class="text-xs opacity-60">No earlier warmings.</p> + {/if} + </div> + </div> + {:else} + <p class="text-xs opacity-60">No warming yet.</p> + {/if} +</div> diff --git a/src/features/chat/index.ts b/src/features/chat/index.ts index f1e8e29..cf57cea 100644 --- a/src/features/chat/index.ts +++ b/src/features/chat/index.ts @@ -1,7 +1,37 @@ -export type { RenderedChunk } from "../../core/chunks"; -export type { ChatTransport, HistorySync } from "./ports"; +export type { + ProviderRetryView, + RenderedChunk, + RenderGroup, + ToolBatchEntry, +} from "../../core/chunks"; +export { groupRenderedChunks, resolveImageUrl, viewProviderRetry } from "../../core/chunks"; +export type { TurnMetricsEntry } from "../../core/metrics"; +export { isVisionModel } from "./model-select"; +export type { ChatTransport, HistorySync, HistoryWindow, MetricsSync } from "./ports"; +export type { + EffortOption, + ReasoningEffortSaveResult, + SaveReasoningEffort, +} from "./reasoning-effort"; +export { + DEFAULT_REASONING_EFFORT, + effectiveEffort, + effortOptions, + isReasoningEffort, + REASONING_EFFORT_LEVELS, +} from "./reasoning-effort"; export type { ChatStore, ChatStoreDependencies } from "./store.svelte"; export { createChatStore } from "./store.svelte"; export { default as ChatView } from "./ui/ChatView.svelte"; +export type { CompactNowResult, SaveCompactPercentResult } from "./ui/CompactionView.svelte"; +export { default as CompactionView } from "./ui/CompactionView.svelte"; +export type { ComposerStatus } from "./ui/Composer.svelte"; export { default as Composer } from "./ui/Composer.svelte"; export { default as ModelSelector } from "./ui/ModelSelector.svelte"; +export { default as ReasoningEffortSelector } from "./ui/ReasoningEffortSelector.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "chat", + description: "Conversation turns, composer, model selector, and metrics", +} as const; diff --git a/src/features/chat/model-select.test.ts b/src/features/chat/model-select.test.ts new file mode 100644 index 0000000..6d3081d --- /dev/null +++ b/src/features/chat/model-select.test.ts @@ -0,0 +1,89 @@ +import { describe, expect, it } from "vitest"; +import { + isVisionModel, + joinModelName, + modelKeys, + modelsForKey, + splitModelName, +} from "./model-select"; + +describe("splitModelName", () => { + it("splits on the first slash", () => { + expect(splitModelName("openai/gpt-4")).toEqual({ key: "openai", model: "gpt-4" }); + }); + + it("keeps slashes in the model part (splits only the first)", () => { + expect(splitModelName("openrouter/anthropic/claude")).toEqual({ + key: "openrouter", + model: "anthropic/claude", + }); + }); + + it("treats a slashless name as all key", () => { + expect(splitModelName("local")).toEqual({ key: "local", model: "" }); + }); +}); + +describe("joinModelName", () => { + it("recombines key + model", () => { + expect(joinModelName("openai", "gpt-4")).toBe("openai/gpt-4"); + }); + + it("returns just the key when the model is empty", () => { + expect(joinModelName("local", "")).toBe("local"); + }); + + it("round-trips with splitModelName", () => { + const full = "openrouter/anthropic/claude"; + const { key, model } = splitModelName(full); + expect(joinModelName(key, model)).toBe(full); + }); +}); + +describe("modelKeys", () => { + it("returns distinct keys in first-seen order", () => { + expect( + modelKeys(["openai/gpt-4", "openai/gpt-4o", "anthropic/claude-3", "google/gemini"]), + ).toEqual(["openai", "anthropic", "google"]); + }); + + it("is empty for no models", () => { + expect(modelKeys([])).toEqual([]); + }); +}); + +describe("modelsForKey", () => { + it("returns the model suffixes under a key, in order", () => { + const models = ["openai/gpt-4", "anthropic/claude-3", "openai/gpt-4o"]; + expect(modelsForKey(models, "openai")).toEqual(["gpt-4", "gpt-4o"]); + }); + + it("returns empty for an unknown key", () => { + expect(modelsForKey(["openai/gpt-4"], "anthropic")).toEqual([]); + }); +}); + +describe("isVisionModel", () => { + it("returns true when modelInfo[name].vision is true", () => { + const info = { "kimi/k2": { vision: true } }; + expect(isVisionModel(info, "kimi/k2")).toBe(true); + }); + + it("returns false when vision is false", () => { + const info = { "umans/glm-5.2": { vision: false } }; + expect(isVisionModel(info, "umans/glm-5.2")).toBe(false); + }); + + it("returns false when vision is absent (unknown)", () => { + const info = { "umans/glm-5.2": { contextWindow: 128000 } }; + expect(isVisionModel(info, "umans/glm-5.2")).toBe(false); + }); + + it("returns false for a model with no metadata entry at all", () => { + expect(isVisionModel({}, "unknown/model")).toBe(false); + }); + + it("returns false for an empty modelInfo map", () => { + expect(isVisionModel({}, "kimi/k2")).toBe(false); + }); +}); diff --git a/src/features/chat/model-select.ts b/src/features/chat/model-select.ts new file mode 100644 index 0000000..602e0ef --- /dev/null +++ b/src/features/chat/model-select.ts @@ -0,0 +1,64 @@ +import type { ModelMetadata } from "@dispatch/transport-contract"; + +/** + * Pure helpers for the two-step model picker. + * + * Models arrive from `GET /models` as `<key>/<model>` strings, where `key` is + * the credential name (the part before the FIRST slash) and `model` is the rest. + * These pure functions split that into a key selector + a model selector and + * recombine the choice — zero DOM, zero Svelte. + */ + +export interface SplitModel { + readonly key: string; + readonly model: string; +} + +/** Split `<key>/<model>` on the first slash. A slashless name is all-key. */ +export function splitModelName(full: string): SplitModel { + const i = full.indexOf("/"); + if (i === -1) return { key: full, model: "" }; + return { key: full.slice(0, i), model: full.slice(i + 1) }; +} + +/** Recombine a key + model into a `<key>/<model>` name (key-only if no model). */ +export function joinModelName(key: string, model: string): string { + return model === "" ? key : `${key}/${model}`; +} + +/** Distinct keys across all models, in first-seen order. */ +export function modelKeys(models: readonly string[]): string[] { + const seen = new Set<string>(); + const out: string[] = []; + for (const full of models) { + const { key } = splitModelName(full); + if (!seen.has(key)) { + seen.add(key); + out.push(key); + } + } + return out; +} + +/** The model suffixes available under a given key, in order. */ +export function modelsForKey(models: readonly string[], key: string): string[] { + const out: string[] = []; + for (const full of models) { + const split = splitModelName(full); + if (split.key === key) out.push(split.model); + } + return out; +} + +/** + * Whether a given full model name (`<key>/<model>`) is vision-capable — i.e. + * `GET /models` `modelInfo[name].vision === true`. Absent/`false`/unknown → + * `false` (the server's vision handoff transcribes images to text for it). + * Pure lookup against the catalog metadata; zero DOM. + */ +export function isVisionModel( + modelInfo: Readonly<Record<string, ModelMetadata>>, + fullName: string, +): boolean { + return modelInfo[fullName]?.vision === true; +} diff --git a/src/features/chat/ports.ts b/src/features/chat/ports.ts index 07943c7..2fe10dc 100644 --- a/src/features/chat/ports.ts +++ b/src/features/chat/ports.ts @@ -1,12 +1,43 @@ -import type { ChatSendMessage, ConversationHistoryResponse } from "@dispatch/transport-contract"; +import type { + ChatQueueMessage, + ChatSendMessage, + ConversationHistoryResponse, + ConversationMetricsResponse, +} from "@dispatch/transport-contract"; -/** Injected transport port — sends chat messages to the server. */ +/** + * Injected transport port — sends chat messages to the server. Accepts both + * `chat.send` (start a turn) and `chat.queue` (enqueue a steering message; + * auto-starts a turn if idle). + */ export interface ChatTransport { - send(msg: ChatSendMessage): void; + send(msg: ChatSendMessage | ChatQueueMessage): void; } -/** Injected history-sync port — fetches incremental history from the server. */ +/** + * Optional windowing for a history fetch ([email protected], CR-5). + * Both must be POSITIVE integers when present (the server 400s otherwise). + */ +export interface HistoryWindow { + /** Return only the NEWEST `limit` chunks of the selection (still ascending). */ + readonly limit?: number; + /** Exclusive upper bound: only chunks with `seq < beforeSeq` (backfill paging). */ + readonly beforeSeq?: number; +} + +/** + * Injected history-sync port — fetches incremental history from the server + * (`GET /conversations/:id?sinceSeq=&beforeSeq=&limit=`). NOTE the contract + * caveat: on a windowed/backfill read the response's `latestSeq` describes the + * returned window, not the conversation's high-water mark — never regress a + * tail cursor from it (the FE's cursor comes from the cache's max seq, which + * satisfies this naturally). + */ export type HistorySync = ( - conversationId: string, - sinceSeq: number, + conversationId: string, + sinceSeq: number, + window?: HistoryWindow, ) => Promise<ConversationHistoryResponse>; + +/** Injected metrics-sync port — fetches persisted per-turn metrics from the server. */ +export type MetricsSync = (conversationId: string) => Promise<ConversationMetricsResponse>; diff --git a/src/features/chat/reasoning-effort.test.ts b/src/features/chat/reasoning-effort.test.ts new file mode 100644 index 0000000..6d409e9 --- /dev/null +++ b/src/features/chat/reasoning-effort.test.ts @@ -0,0 +1,45 @@ +import { describe, expect, it } from "vitest"; +import { + DEFAULT_REASONING_EFFORT, + effectiveEffort, + effortOptions, + isReasoningEffort, + REASONING_EFFORT_LEVELS, +} from "./reasoning-effort"; + +describe("reasoning-effort helpers", () => { + it("ladder matches the wire contract, in ascending depth order", () => { + expect(REASONING_EFFORT_LEVELS).toEqual(["low", "medium", "high", "xhigh", "max"]); + }); + + it("the server default is high", () => { + expect(DEFAULT_REASONING_EFFORT).toBe("high"); + }); + + it("isReasoningEffort narrows ladder strings and rejects everything else", () => { + for (const level of REASONING_EFFORT_LEVELS) { + expect(isReasoningEffort(level)).toBe(true); + } + expect(isReasoningEffort("banana")).toBe(false); + expect(isReasoningEffort("")).toBe(false); + expect(isReasoningEffort("HIGH")).toBe(false); + }); + + it("effectiveEffort maps null (never set) to the default, not 'off'", () => { + expect(effectiveEffort(null)).toBe("high"); + }); + + it("effectiveEffort passes a persisted value through", () => { + expect(effectiveEffort("xhigh")).toBe("xhigh"); + expect(effectiveEffort("low")).toBe("low"); + }); + + it("effortOptions lists every level once and marks only the default", () => { + const options = effortOptions(); + expect(options.map((o) => o.value)).toEqual([...REASONING_EFFORT_LEVELS]); + expect(options.find((o) => o.value === "high")?.label).toBe("high (default)"); + for (const option of options) { + if (option.value !== "high") expect(option.label).toBe(option.value); + } + }); +}); diff --git a/src/features/chat/reasoning-effort.ts b/src/features/chat/reasoning-effort.ts new file mode 100644 index 0000000..1eb77b6 --- /dev/null +++ b/src/features/chat/reasoning-effort.ts @@ -0,0 +1,66 @@ +import type { ReasoningEffort } from "@dispatch/transport-contract"; + +/** + * Pure helpers for the reasoning-effort selector (the thinking-depth knob). + * + * The canonical ladder + resolution chain are SERVER-owned (`[email protected]` + * `ReasoningEffort`; per-turn override → persisted conversation value → default + * `"high"`). These helpers only shape the persisted value for display: a `null` + * from `GET /conversations/:id/reasoning-effort` means "never set ⇒ the default + * applies", so the selector shows `high (default)` — never "off". Zero DOM, + * zero Svelte. + */ + +/** The canonical ladder, in ascending thinking-depth order (`[email protected]`). */ +export const REASONING_EFFORT_LEVELS: readonly ReasoningEffort[] = [ + "low", + "medium", + "high", + "xhigh", + "max", +]; + +/** The server's fallback when nothing is set (the resolution chain's tail). */ +export const DEFAULT_REASONING_EFFORT: ReasoningEffort = "high"; + +/** Narrow an untrusted string (e.g. a `<select>` value) to the ladder. */ +export function isReasoningEffort(value: string): value is ReasoningEffort { + return (REASONING_EFFORT_LEVELS as readonly string[]).includes(value); +} + +/** + * The level the selector should show as selected: the persisted value, or the + * server default when never set (`null` = "default applies", not "off"). + */ +export function effectiveEffort(persisted: ReasoningEffort | null): ReasoningEffort { + return persisted ?? DEFAULT_REASONING_EFFORT; +} + +/** One `<option>` of the selector. */ +export interface EffortOption { + readonly value: ReasoningEffort; + readonly label: string; +} + +/** + * The selector's options: every ladder level, with the server default marked + * `(default)` so a never-set conversation reads "high (default)". + */ +export function effortOptions(): readonly EffortOption[] { + return REASONING_EFFORT_LEVELS.map((level) => ({ + value: level, + label: level === DEFAULT_REASONING_EFFORT ? `${level} (default)` : level, + })); +} + +// ── Injected port (consumer-defines-port; the composition root adapts the +// store's `PUT /conversations/:id/reasoning-effort` to this shape). ──────── + +/** Outcome of `PUT /conversations/:id/reasoning-effort`. */ +export type ReasoningEffortSaveResult = + | { readonly ok: true; readonly reasoningEffort: ReasoningEffort } + | { readonly ok: false; readonly error: string }; + +export type SaveReasoningEffort = ( + level: ReasoningEffort, +) => Promise<ReasoningEffortSaveResult | null>; diff --git a/src/features/chat/store.svelte.ts b/src/features/chat/store.svelte.ts index 1d8ab17..9911438 100644 --- a/src/features/chat/store.svelte.ts +++ b/src/features/chat/store.svelte.ts @@ -1,124 +1,409 @@ import type { - ChatDeltaMessage, - ChatErrorMessage, - ChatSendMessage, + ChatDeltaMessage, + ChatErrorMessage, + ChatQueueMessage, + ChatSendMessage, } from "@dispatch/transport-contract"; -import type { ChatMessage } from "@dispatch/wire"; +import type { ChatMessage, ImageInput, StoredChunk, TurnProviderRetryEvent } from "@dispatch/wire"; import type { RenderedChunk, TranscriptState } from "../../core/chunks"; import { - appendUserMessage, - applyHistory, - foldEvent, - initialState, - selectChunks, - selectMessages, + appendUserMessage, + applyHistory, + clearGenerating, + foldEvent, + initialState, + initialWindowSize, + normalizeChatLimit, + restoreEarlier, + selectChunks, + selectGenerating, + selectHasEarlier, + selectMessages, + selectProviderRetry, + trimTranscript, + unloadCount, + windowTranscript, } from "../../core/chunks"; +import type { MetricsState, TurnMetricsEntry } from "../../core/metrics"; +import { + applyDurableMetrics, + foldMetricsEvent, + initialMetricsState, + selectCurrentContextSize, + selectOrderedTurnMetrics, +} from "../../core/metrics"; import type { ConversationCache } from "../conversation-cache"; -import type { ChatTransport, HistorySync } from "./ports"; +import type { ChatTransport, HistorySync, MetricsSync } from "./ports"; export interface ChatStoreDependencies { - readonly conversationId: string; - readonly model?: string; - readonly transport: ChatTransport; - readonly historySync: HistorySync; - readonly cache: ConversationCache; + readonly conversationId: string; + readonly model?: string; + readonly transport: ChatTransport; + readonly historySync: HistorySync; + readonly metricsSync: MetricsSync; + readonly cache: ConversationCache; + /** + * The workspace this conversation belongs to (its URL slug). Sent on + * `chat.send`/`chat.queue` so the backend stamps the conversation's workspace + * at creation (default "default"). Absent → omitted (legacy behavior). + */ + readonly workspaceId?: string; + /** + * The chat limit: max loaded chunks before the oldest quarter is unloaded + * (see `core/chunks/trim.ts`). Normalized via `normalizeChatLimit`; absent → + * `DEFAULT_CHAT_LIMIT`. + */ + readonly chatLimit?: number; + /** + * Whether unloading may run RIGHT NOW. The composition root wires this to the + * smart-scroll "stuck to bottom" state: while the reader is scrolled up, a + * trim would yank the content under them, so it is DEFERRED until they return + * to the bottom (the next fold retries). Absent → always allowed. + */ + readonly canUnload?: () => boolean; + /** + * Called when a swallowed error should be surfaced to the user (e.g. a + * metrics sync failure). Wired by the composition root to the app store's + * `reportError` → full-screen error modal. Absent → errors are logged only. + */ + readonly onError?: (context: string, err: unknown) => void; } export interface ChatStore { - readonly messages: readonly ChatMessage[]; - readonly chunks: readonly RenderedChunk[]; - readonly pendingSync: boolean; - readonly error: string | null; - readonly model: string | undefined; - handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void; - send(text: string): void; - setModel(model: string): void; - load(): Promise<void>; - dispose(): void; + readonly messages: readonly ChatMessage[]; + readonly chunks: readonly RenderedChunk[]; + readonly turnMetrics: readonly TurnMetricsEntry[]; + /** + * The conversation's current context size (tokens occupied) — updated + * PROGRESSIVELY: during an in-flight turn, the most recent step's + * `inputTokens + outputTokens` (each step's input already includes all prior + * context); once the turn seals, its authoritative `contextSize`. `undefined` + * ("unknown") when no step has reported usage yet. Never `0` for the unknown + * case. + */ + readonly currentContextSize: number | undefined; + /** + * Whether a turn is currently generating server-side — derived from the event + * stream (`turn-start`…no-`done`/`turn-sealed`-yet). True for ANY watching + * client: the sender, a second device, or a reconnected client whose in-flight + * turn was replayed. Drives the composer's "generating…" indicator. + */ + readonly generating: boolean; + /** + * The latest `provider-retry` event for the current turn, or `null` when no + * retry is pending. Drives the transient yellow "retrying…" warning banner — + * never persisted (never sent to the model or replayed on reload). Coalesces + * to the newest attempt + delay; cleared when content resumes or the turn ends. + */ + readonly providerRetry: TurnProviderRetryEvent | null; + readonly pendingSync: boolean; + readonly error: string | null; + readonly model: string | undefined; + /** + * Whether earlier history was unloaded by the chat limit (or never loaded by + * the fresh-load window) and can be paged back in — drives the + * "Show earlier messages" affordance. + */ + readonly hasEarlier: boolean; + /** + * Render-key base for thinking collapses: how many thinking chunks are + * unloaded below the watermark, so the UI's ordinal keys stay stable across + * a trim (see `TranscriptState.hiddenThinkingCount`). + */ + readonly thinkingKeyBase: number; + handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void; + /** + * Send a user message (start a turn via `chat.send`). Optimistically echoes + * the text + any `images` as provisional user chunks (`[text, image, …]` in + * order), then forwards them on the WS `chat.send` op. `images` is omitted on + * the wire when none are staged (text-only, backward compatible). An + * images-only send (empty text) is allowed — the message text is `""`. + */ + send(text: string, images?: readonly ImageInput[]): void; + /** + * Enqueue a steering message onto the conversation's queue (`chat.queue` + * WS op). While a turn is generating, the message is delivered mid-turn at + * the next tool-result boundary (a `steering` `AgentEvent` fires + the + * message-queue surface updates). When no turn is active, the server + * auto-starts a turn with the message as its opening prompt (equivalent to + * `chat.send`). No optimistic transcript echo — the queue SURFACE carries the + * pending message until drain; the `steering` event places it in the + * transcript. `text` must be non-empty (the server 400/errors otherwise). + */ + queueMessage(text: string): void; + setModel(model: string): void; + /** + * Update the chat limit LIVE: re-normalizes, then adjusts the loaded window. + * Lowering it unloads older committed chunks (deferred via the gate while the + * reader is scrolled up, catching up on the next mutation). Raising it + * REFILLS older history (cache first, then CR-5 `?beforeSeq=`) up to the + * fresh-load window (`initialWindowSize` = 75% of the limit) — the same + * window a fresh `load()` would show — so upping the limit reveals more + * history instead of leaving a partial view. New deltas + loads use the new + * limit. The refill awaits, so a caller can preserve scroll over the prepend. + */ + setChatLimit(limit: number): Promise<void>; + load(): Promise<void>; + /** + * Page one unload-unit (`ceil(limit/4)`) of earlier history back in — the + * "Show earlier messages" action. Local cache first; when the cache doesn't + * reach far enough back (a server-windowed fresh load), the missing older + * run is fetched via CR-5 `?beforeSeq=&limit=` and persisted to the cache. + */ + showEarlier(): Promise<void>; + /** + * Re-sync after a WS (re)connect. Clears any stale `generating` (a turn may + * have sealed while disconnected — the live `turn-sealed` was missed), then + * pulls newly-sealed turns from history (+ metrics). If the turn is still + * running, the server's post-subscribe replay re-asserts `generating`. The + * app store pairs this with a `chat.subscribe` for the conversation. + */ + resync(): void; + dispose(): void; } export function createChatStore(deps: ChatStoreDependencies): ChatStore { - let transcript = $state<TranscriptState>(initialState()); - let _pendingSync = $state(false); - let _error = $state<string | null>(null); - let _model = $state<string | undefined>(deps.model); - let disposed = false; - - async function syncTail(): Promise<void> { - if (disposed || _pendingSync) return; - _pendingSync = true; - try { - const since = await deps.cache.sinceSeq(deps.conversationId); - const res = await deps.historySync(deps.conversationId, since); - const merged = await deps.cache.commit(deps.conversationId, res.chunks); - transcript = applyHistory(transcript, merged); - _error = null; - } catch (err) { - _error = err instanceof Error ? err.message : String(err); - } finally { - _pendingSync = false; - } - } - - return { - get messages(): readonly ChatMessage[] { - return selectMessages(transcript); - }, - get chunks(): readonly RenderedChunk[] { - return selectChunks(transcript); - }, - get pendingSync(): boolean { - return _pendingSync; - }, - get error(): string | null { - return _error; - }, - get model(): string | undefined { - return _model; - }, - - handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void { - if (msg.type === "chat.error") { - if (msg.conversationId !== undefined && msg.conversationId !== deps.conversationId) { - return; - } - _error = msg.message; - return; - } - if (msg.event.conversationId !== deps.conversationId) { - return; - } - transcript = foldEvent(transcript, msg.event); - if (transcript.sealedTurnId !== null) { - void syncTail(); - } - }, - - send(text: string): void { - transcript = appendUserMessage(transcript, text); - const msg: ChatSendMessage = { - type: "chat.send", - conversationId: deps.conversationId, - message: text, - ...(_model !== undefined ? { model: _model } : {}), - }; - deps.transport.send(msg); - }, - - setModel(model: string): void { - _model = model; - }, - - async load(): Promise<void> { - const cached = await deps.cache.load(deps.conversationId); - if (cached.length > 0) { - transcript = applyHistory(transcript, cached); - } - await syncTail(); - }, - - dispose(): void { - disposed = true; - }, - }; + let transcript = $state<TranscriptState>(initialState()); + let metrics = $state<MetricsState>(initialMetricsState()); + let _pendingSync = $state(false); + let _error = $state<string | null>(null); + let _model = $state<string | undefined>(deps.model); + let disposed = false; + + let chatLimit = normalizeChatLimit(deps.chatLimit); + + /** + * Enforce the chat limit after a transcript mutation — unless the injected + * gate says the reader is scrolled up (then defer; the next mutation retries + * and `trimTranscript` unloads whole quarters to catch up). + */ + function maybeTrim(): void { + if (deps.canUnload !== undefined && !deps.canUnload()) return; + transcript = trimTranscript(transcript, chatLimit); + } + + /** + * Pull `seq > cache-cursor` from the server and fold it in. `coldLimit`, when + * given AND the cache is empty (a truly fresh browser), windows the fetch to + * the newest N chunks (CR-5 `?limit=`) so a huge conversation doesn't ship + * whole. It is deliberately NOT applied to a warm-cache tail: windowing a + * tail that grew past N while we were away would leave a silent seq GAP + * between the cache and the fetched window. + */ + async function syncTail(coldLimit?: number): Promise<void> { + if (disposed || _pendingSync) return; + _pendingSync = true; + try { + const since = await deps.cache.sinceSeq(deps.conversationId); + const window = since === 0 && coldLimit !== undefined ? { limit: coldLimit } : undefined; + const res = await deps.historySync(deps.conversationId, since, window); + const merged = await deps.cache.commit(deps.conversationId, res.chunks); + transcript = applyHistory(transcript, merged); + maybeTrim(); + _error = null; + } catch (err) { + _error = err instanceof Error ? err.message : String(err); + } finally { + _pendingSync = false; + } + } + + async function syncMetrics(): Promise<void> { + if (disposed) return; + try { + const res = await deps.metricsSync(deps.conversationId); + metrics = applyDurableMetrics(metrics, res.turns); + } catch (err) { + // Metrics fetch failure must not block history sync or throw; + // live-folded metrics remain intact. Surface via onError (modal). + console.error("[syncMetrics] failed:", err); + deps.onError?.("Failed to sync conversation metrics", err); + } + } + + /** + * Fetch up to `want` older chunks (seq < `oldest`) — cache first, then a + * CR-5 `?beforeSeq=&limit=` server backfill when the cache is too shallow, + * persisting it so the next read is local. Returns every locally-known + * chunk older than `oldest` (the caller — `restoreEarlier` — takes the + * newest `count` of them). Shared by `showEarlier` and the raise-refill. + */ + async function backfillOlder(oldest: number, want: number): Promise<readonly StoredChunk[]> { + let earlier = (await deps.cache.load(deps.conversationId)).filter((c) => c.seq < oldest); + const oldestKnown = earlier[0]?.seq ?? oldest; + if (earlier.length < want && oldestKnown > 1) { + const res = await deps.historySync(deps.conversationId, 0, { + beforeSeq: oldestKnown, + limit: want - earlier.length, + }); + const merged = await deps.cache.commit(deps.conversationId, res.chunks); + earlier = merged.filter((c) => c.seq < oldest); + } + return earlier; + } + + /** + * Refill toward the fresh-load window after a limit RAISE: pull older + * history (cache first, then server) so the loaded set grows to match what a + * fresh `load()` would show at the new limit. No-op when already at the + * origin (seq 1) or already within the window. `restoreEarlier` re-derives + * the window start at apply time, so a delta landing during the await can't + * corrupt the merge. NOT gated (refilling prepends above the viewport; the + * caller preserves scroll position). + */ + async function refill(): Promise<void> { + if (disposed) return; + const oldest = transcript.committed[0]?.seq ?? transcript.hiddenBeforeSeq; + if (oldest <= 1) return; + const want = initialWindowSize(chatLimit) - transcript.committed.length; + if (want <= 0) return; + try { + const earlier = await backfillOlder(oldest, want); + if (earlier.length === 0) return; + transcript = restoreEarlier(transcript, earlier, want); + _error = null; + } catch (err) { + _error = err instanceof Error ? err.message : String(err); + } + } + + return { + get messages(): readonly ChatMessage[] { + return selectMessages(transcript); + }, + get chunks(): readonly RenderedChunk[] { + return selectChunks(transcript); + }, + get turnMetrics(): readonly TurnMetricsEntry[] { + return selectOrderedTurnMetrics(metrics); + }, + get currentContextSize(): number | undefined { + return selectCurrentContextSize(metrics); + }, + get generating(): boolean { + return selectGenerating(transcript); + }, + get providerRetry(): TurnProviderRetryEvent | null { + return selectProviderRetry(transcript); + }, + get pendingSync(): boolean { + return _pendingSync; + }, + get error(): string | null { + return _error; + }, + get model(): string | undefined { + return _model; + }, + get hasEarlier(): boolean { + return selectHasEarlier(transcript); + }, + get thinkingKeyBase(): number { + return transcript.hiddenThinkingCount; + }, + + handleDelta(msg: ChatDeltaMessage | ChatErrorMessage): void { + if (msg.type === "chat.error") { + if (msg.conversationId !== undefined && msg.conversationId !== deps.conversationId) { + return; + } + _error = msg.message; + return; + } + if (msg.event.conversationId !== deps.conversationId) { + return; + } + transcript = foldEvent(transcript, msg.event); + metrics = foldMetricsEvent(metrics, msg.event); + maybeTrim(); + if (transcript.sealedTurnId !== null) { + void syncTail(); + void syncMetrics(); + } + }, + + send(text: string, images?: readonly ImageInput[]): void { + transcript = appendUserMessage(transcript, text, images); + maybeTrim(); + const msg: ChatSendMessage = { + type: "chat.send", + conversationId: deps.conversationId, + message: text, + ...(_model !== undefined ? { model: _model } : {}), + ...(deps.workspaceId !== undefined ? { workspaceId: deps.workspaceId } : {}), + ...(images !== undefined && images.length > 0 ? { images: [...images] } : {}), + }; + deps.transport.send(msg); + }, + + queueMessage(text: string): void { + const trimmed = text.trim(); + if (trimmed.length === 0) return; + const msg: ChatQueueMessage = { + type: "chat.queue", + conversationId: deps.conversationId, + text: trimmed, + ...(deps.workspaceId !== undefined ? { workspaceId: deps.workspaceId } : {}), + }; + deps.transport.send(msg); + }, + + setModel(model: string): void { + _model = model; + }, + + async setChatLimit(limit: number): Promise<void> { + const prev = chatLimit; + chatLimit = normalizeChatLimit(limit); + if (chatLimit < prev) { + maybeTrim(); + } else if (chatLimit > prev) { + await refill(); + } + }, + + async load(): Promise<void> { + // Fresh load shows only the newest 75% of the limit — headroom before the + // first trim. A warm cache is windowed locally (synchronously with its + // apply — no render in between); a COLD cache passes the window to the + // server instead (CR-5 `?limit=`), so a huge conversation never ships + // whole. The post-sync window re-asserts the cap either way. + const windowSize = initialWindowSize(chatLimit); + const cached = await deps.cache.load(deps.conversationId); + if (cached.length > 0) { + transcript = windowTranscript(applyHistory(transcript, cached), windowSize); + } + await syncTail(windowSize); + transcript = windowTranscript(transcript, windowSize); + await syncMetrics(); + }, + + async showEarlier(): Promise<void> { + if (disposed) return; + const oldest = transcript.committed[0]?.seq ?? transcript.hiddenBeforeSeq; + if (oldest <= 1) return; + const want = unloadCount(chatLimit); + try { + const earlier = await backfillOlder(oldest, want); + transcript = restoreEarlier(transcript, earlier, want); + _error = null; + } catch (err) { + _error = err instanceof Error ? err.message : String(err); + } + }, + + resync(): void { + if (disposed) return; + // A turn may have sealed while we were disconnected (missed `turn-sealed`): + // clear the now-stale spinner BEFORE re-subscribing, so a finished turn + // doesn't spin forever. A still-running turn's replay re-asserts it. + transcript = clearGenerating(transcript); + void syncTail(); + void syncMetrics(); + }, + + dispose(): void { + disposed = true; + }, + }; } diff --git a/src/features/chat/store.test.ts b/src/features/chat/store.test.ts index de60b14..8f36994 100644 --- a/src/features/chat/store.test.ts +++ b/src/features/chat/store.test.ts @@ -1,497 +1,1636 @@ -import type { AgentEvent, StoredChunk } from "@dispatch/wire"; +import type { AgentEvent, ImageInput, StepId, StoredChunk } from "@dispatch/wire"; import { describe, expect, it, vi } from "vitest"; import { createChatStore } from "./store.svelte"; -import { createFakeCache, createFakeHistorySync, createFakeTransport } from "./test-helpers"; +import { + createFakeCache, + createFakeHistorySync, + createFakeMetricsSync, + createFakeTransport, +} from "./test-helpers"; const CONV_ID = "test-conv-1"; function makeStoredChunk(seq: number, role: "user" | "assistant" = "assistant"): StoredChunk { - return { seq, role, chunk: { type: "text", text: `chunk-${seq}` } }; + return { seq, role, chunk: { type: "text", text: `chunk-${seq}` } }; } function deltaEvent(event: AgentEvent): import("@dispatch/transport-contract").ChatDeltaMessage { - return { type: "chat.delta", event }; + return { type: "chat.delta", event }; } function errorMessage(message: string): import("@dispatch/transport-contract").ChatErrorMessage { - return { type: "chat.error", message }; + return { type: "chat.error", message }; } describe("createChatStore", () => { - it("folding a chat.delta updates messages", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta( - deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "Hello" }), - ); - store.handleDelta( - deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: " world" }), - ); - - expect(store.messages).toHaveLength(1); - expect(store.messages[0]?.role).toBe("assistant"); - expect(store.messages[0]?.chunks).toHaveLength(1); - expect(store.messages[0]?.chunks[0]?.type).toBe("text"); - expect((store.messages[0]?.chunks[0] as { type: "text"; text: string }).text).toBe( - "Hello world", - ); - - store.dispose(); - }); - - it("turn-sealed triggers a history sync, commits to cache, and applies merged history", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - // Set up what the history sync will return - historySync.returnChunks = [makeStoredChunk(1), makeStoredChunk(2)]; - - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta( - deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "Hi" }), - ); - store.handleDelta( - deltaEvent({ type: "done", conversationId: CONV_ID, turnId: "t1", reason: "end-turn" }), - ); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); - - // Wait for the async sync to complete - await vi.waitFor(() => { - expect(historySync.calls).toHaveLength(1); - }); - - expect(historySync.calls[0]?.conversationId).toBe(CONV_ID); - expect(historySync.calls[0]?.sinceSeq).toBe(0); - - // Cache should have the committed chunks - const cached = await cache.impl.load(CONV_ID); - expect(cached).toHaveLength(2); - - // Messages should include both provisional and committed - expect(store.messages.length).toBeGreaterThanOrEqual(1); - - store.dispose(); - }); - - it("send posts a chat.send with conversationId", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.send("Hello server"); - - expect(transport.sent).toHaveLength(1); - expect(transport.sent[0]?.type).toBe("chat.send"); - expect(transport.sent[0]?.conversationId).toBe(CONV_ID); - expect(transport.sent[0]?.message).toBe("Hello server"); - expect(transport.sent[0]).not.toHaveProperty("model"); - - store.dispose(); - }); - - it("send posts a chat.send with model when set", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - model: "openai/gpt-4", - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.send("Hello"); - - expect(transport.sent).toHaveLength(1); - expect(transport.sent[0]?.model).toBe("openai/gpt-4"); - - store.dispose(); - }); - - it("chat.error sets error", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - expect(store.error).toBeNull(); - - store.handleDelta(errorMessage("Something broke")); - - expect(store.error).toBe("Something broke"); - - store.dispose(); - }); - - it("load hydrates from cache then syncs the tail", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - - // Pre-populate cache - await cache.impl.commit(CONV_ID, [makeStoredChunk(1, "user"), makeStoredChunk(2, "assistant")]); - - // History sync returns new chunks - historySync.returnChunks = [makeStoredChunk(3, "assistant")]; - - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - await store.load(); - - // Should have synced - expect(historySync.calls).toHaveLength(1); - expect(historySync.calls[0]?.sinceSeq).toBe(2); - - // Messages should include all chunks - expect(store.messages.length).toBeGreaterThanOrEqual(2); - - store.dispose(); - }); - - it("load with empty cache still syncs", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - - historySync.returnChunks = [makeStoredChunk(1, "assistant")]; - - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - await store.load(); - - expect(historySync.calls).toHaveLength(1); - expect(historySync.calls[0]?.sinceSeq).toBe(0); - - store.dispose(); - }); - - it("error is cleared on successful sync", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - // First, set an error - store.handleDelta(errorMessage("fail")); - expect(store.error).toBe("fail"); - - // Now trigger a successful sync via turn-sealed - historySync.returnChunks = [makeStoredChunk(1)]; - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta( - deltaEvent({ type: "done", conversationId: CONV_ID, turnId: "t1", reason: "end-turn" }), - ); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); - - await vi.waitFor(() => { - expect(store.error).toBeNull(); - }); - - store.dispose(); - }); - - it("dispose prevents further syncs", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.dispose(); - - // Trigger a turn-sealed after dispose - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); - - // Wait a tick to let any async work settle - await new Promise((r) => setTimeout(r, 10)); - - // No sync should have happened - expect(historySync.calls).toHaveLength(0); - - store.dispose(); - }); - - it("overlapping syncs are guarded", async () => { - const transport = createFakeTransport(); - const _historySync = createFakeHistorySync(); - const cache = createFakeCache(); - - // Make the first sync slow - let resolveFirstSync: (() => void) | undefined; - const firstSyncPromise = new Promise<void>((resolve) => { - resolveFirstSync = resolve; - }); - - let callCount = 0; - const slowHistorySync: import("./ports").HistorySync = async (_conversationId, sinceSeq) => { - callCount++; - if (callCount === 1) { - await firstSyncPromise; - } - return { chunks: [], latestSeq: sinceSeq }; - }; - - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: slowHistorySync, - cache: cache.impl, - }); - - // Trigger first sync - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); - - // Wait a tick so the first sync starts - await new Promise((r) => setTimeout(r, 0)); - - // Trigger second sync while first is pending - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t2" })); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t2" })); - - // Only one call should have been made (second was guarded) - expect(callCount).toBe(1); - - // Release the first sync - resolveFirstSync?.(); - await new Promise((r) => setTimeout(r, 10)); - - store.dispose(); - }); - - it("handles tool-call and tool-result chunks", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta( - deltaEvent({ - type: "tool-call", - conversationId: CONV_ID, - turnId: "t1", - toolCallId: "tc1", - toolName: "read_file", - input: { path: "/tmp/test.txt" }, - }), - ); - store.handleDelta( - deltaEvent({ - type: "tool-result", - conversationId: CONV_ID, - turnId: "t1", - toolCallId: "tc1", - toolName: "read_file", - content: "file contents", - isError: false, - }), - ); - - expect(store.chunks).toHaveLength(2); - expect(store.chunks[0]?.chunk.type).toBe("tool-call"); - expect(store.chunks[1]?.chunk.type).toBe("tool-result"); - - store.dispose(); - }); - - it("setModel changes the model used by the next send", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - model: "openai/gpt-4", - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.send("First"); - expect(transport.sent[0]?.model).toBe("openai/gpt-4"); - - store.setModel("anthropic/claude-3"); - store.send("Second"); - expect(transport.sent[1]?.model).toBe("anthropic/claude-3"); - - store.dispose(); - }); - - it("setModel from undefined to a model", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.send("First"); - expect(transport.sent[0]).not.toHaveProperty("model"); - - store.setModel("openai/gpt-4o"); - store.send("Second"); - expect(transport.sent[1]?.model).toBe("openai/gpt-4o"); - - store.dispose(); - }); - - it("handleDelta ignores a chat.delta for a different conversationId", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.handleDelta( - deltaEvent({ type: "turn-start", conversationId: "other-conv", turnId: "t1" }), - ); - store.handleDelta( - deltaEvent({ - type: "text-delta", - conversationId: "other-conv", - turnId: "t1", - delta: "Should be ignored", - }), - ); - - expect(store.messages).toHaveLength(0); - - store.dispose(); - }); - - it("handleDelta ignores a chat.error for a different conversationId", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.handleDelta({ type: "chat.error", conversationId: "other-conv", message: "Wrong conv" }); - - expect(store.error).toBeNull(); - - store.dispose(); - }); - - it("send optimistically shows the user message immediately", () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - store.send("hi"); - - expect(store.messages).toHaveLength(1); - expect(store.messages[0]?.role).toBe("user"); - expect(store.messages[0]?.chunks).toHaveLength(1); - expect(store.messages[0]?.chunks[0]?.type).toBe("text"); - expect((store.messages[0]?.chunks[0] as { type: "text"; text: string }).text).toBe("hi"); - - store.dispose(); - }); - - it("the optimistic user message is replaced after turn-sealed + history sync", async () => { - const transport = createFakeTransport(); - const historySync = createFakeHistorySync(); - const cache = createFakeCache(); - const store = createChatStore({ - conversationId: CONV_ID, - transport: transport.impl, - historySync: historySync.impl, - cache: cache.impl, - }); - - historySync.returnChunks = [ - { seq: 1, role: "user", chunk: { type: "text", text: "hi" } }, - { seq: 2, role: "assistant", chunk: { type: "text", text: "hello!" } }, - ]; - - store.send("hi"); - expect(store.messages).toHaveLength(1); - expect(store.messages[0]?.role).toBe("user"); - - store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); - store.handleDelta( - deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "hello!" }), - ); - store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); - - await vi.waitFor(() => { - expect(store.messages.length).toBe(2); - }); - - expect(store.messages[0]?.role).toBe("user"); - expect(store.messages[1]?.role).toBe("assistant"); - - store.dispose(); - }); + it("folding a chat.delta updates messages", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "Hello" }), + ); + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: " world" }), + ); + + expect(store.messages).toHaveLength(1); + expect(store.messages[0]?.role).toBe("assistant"); + expect(store.messages[0]?.chunks).toHaveLength(1); + expect(store.messages[0]?.chunks[0]?.type).toBe("text"); + expect((store.messages[0]?.chunks[0] as { type: "text"; text: string }).text).toBe( + "Hello world", + ); + + store.dispose(); + }); + + it("turn-sealed triggers a history sync, commits to cache, and applies merged history", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // Set up what the history sync will return + historySync.returnChunks = [makeStoredChunk(1), makeStoredChunk(2)]; + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "Hi" }), + ); + store.handleDelta( + deltaEvent({ type: "done", conversationId: CONV_ID, turnId: "t1", reason: "end-turn" }), + ); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + // Wait for the async sync to complete + await vi.waitFor(() => { + expect(historySync.calls).toHaveLength(1); + }); + + expect(historySync.calls[0]?.conversationId).toBe(CONV_ID); + expect(historySync.calls[0]?.sinceSeq).toBe(0); + + // Cache should have the committed chunks + const cached = await cache.impl.load(CONV_ID); + expect(cached).toHaveLength(2); + + // Messages should include both provisional and committed + expect(store.messages.length).toBeGreaterThanOrEqual(1); + + store.dispose(); + }); + + it("send posts a chat.send with conversationId", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.send("Hello server"); + + expect(transport.sent).toHaveLength(1); + expect(transport.sent[0]?.type).toBe("chat.send"); + expect(transport.sent[0]?.conversationId).toBe(CONV_ID); + expect(transport.sent[0]?.message).toBe("Hello server"); + expect(transport.sent[0]).not.toHaveProperty("model"); + + store.dispose(); + }); + + it("send posts a chat.send with model when set", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + model: "openai/gpt-4", + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.send("Hello"); + + expect(transport.sent).toHaveLength(1); + expect(transport.sent[0]?.model).toBe("openai/gpt-4"); + + store.dispose(); + }); + + it("send forwards staged images on chat.send and echoes them provisionally", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + const images: ImageInput[] = [ + { url: "data:image/png;base64,AAAA", mimeType: "image/png" }, + { url: "https://example.com/cat.jpg" }, + ]; + store.send("look at this", images); + + expect(transport.sent).toHaveLength(1); + const msg = transport.sent[0]; + expect(msg?.type).toBe("chat.send"); + expect(msg?.message).toBe("look at this"); + expect(msg?.images).toEqual(images); + + // Optimistic echo: a text chunk + two image chunks, provisional. + const chunks = store.chunks; + expect(chunks).toHaveLength(3); + expect(chunks[0]?.chunk).toEqual({ type: "text", text: "look at this" }); + expect(chunks[1]?.chunk).toEqual({ type: "image", url: images[0]?.url, mimeType: "image/png" }); + expect(chunks[2]?.chunk).toEqual({ type: "image", url: images[1]?.url }); + + store.dispose(); + }); + + it("send omits images on the wire when none are staged (backward compatible)", () => { + const transport = createFakeTransport(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: createFakeHistorySync().impl, + metricsSync: createFakeMetricsSync().impl, + cache: createFakeCache().impl, + }); + + store.send("just text"); + + expect(transport.sent[0]).not.toHaveProperty("images"); + store.dispose(); + }); + + it("send omits images on the wire for an empty array", () => { + const transport = createFakeTransport(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: createFakeHistorySync().impl, + metricsSync: createFakeMetricsSync().impl, + cache: createFakeCache().impl, + }); + + store.send("just text", []); + + expect(transport.sent[0]).not.toHaveProperty("images"); + store.dispose(); + }); + + it("send allows an images-only message (empty text)", () => { + const transport = createFakeTransport(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: createFakeHistorySync().impl, + metricsSync: createFakeMetricsSync().impl, + cache: createFakeCache().impl, + }); + + store.send("", [{ url: "data:image/png;base64,AAAA", mimeType: "image/png" }]); + + expect(transport.sent[0]?.message).toBe(""); + expect(transport.sent[0]?.images).toHaveLength(1); + // The echo is image-only (no text chunk). + expect(store.chunks).toHaveLength(1); + expect(store.chunks[0]?.chunk.type).toBe("image"); + store.dispose(); + }); + + describe("queueMessage (chat.queue — steering)", () => { + it("posts a chat.queue with conversationId + text", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.queueMessage("steer left"); + + expect(transport.sent).toHaveLength(0); // chat.send stays empty + expect(transport.sentQueue).toHaveLength(1); + expect(transport.sentQueue[0]?.type).toBe("chat.queue"); + expect(transport.sentQueue[0]?.conversationId).toBe(CONV_ID); + expect(transport.sentQueue[0]?.text).toBe("steer left"); + + store.dispose(); + }); + + it("trims whitespace before sending", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.queueMessage(" padded "); + + expect(transport.sentQueue[0]?.text).toBe("padded"); + + store.dispose(); + }); + + it("does not send for empty/whitespace-only text", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.queueMessage(" "); + store.queueMessage(""); + + expect(transport.sentQueue).toHaveLength(0); + + store.dispose(); + }); + + it("does NOT optimistically echo into the transcript (the surface carries the queue)", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.queueMessage("queued steering message"); + + expect(store.chunks).toHaveLength(0); // no transcript echo + + store.dispose(); + }); + }); + + it("chat.error sets error", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + expect(store.error).toBeNull(); + + store.handleDelta(errorMessage("Something broke")); + + expect(store.error).toBe("Something broke"); + + store.dispose(); + }); + + it("load hydrates from cache then syncs the tail", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + + // Pre-populate cache + await cache.impl.commit(CONV_ID, [makeStoredChunk(1, "user"), makeStoredChunk(2, "assistant")]); + + // History sync returns new chunks + historySync.returnChunks = [makeStoredChunk(3, "assistant")]; + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + await store.load(); + + // Should have synced + expect(historySync.calls).toHaveLength(1); + expect(historySync.calls[0]?.sinceSeq).toBe(2); + + // Messages should include all chunks + expect(store.messages.length).toBeGreaterThanOrEqual(2); + + store.dispose(); + }); + + it("load with empty cache still syncs", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + + historySync.returnChunks = [makeStoredChunk(1, "assistant")]; + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + await store.load(); + + expect(historySync.calls).toHaveLength(1); + expect(historySync.calls[0]?.sinceSeq).toBe(0); + + store.dispose(); + }); + + it("error is cleared on successful sync", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // First, set an error + store.handleDelta(errorMessage("fail")); + expect(store.error).toBe("fail"); + + // Now trigger a successful sync via turn-sealed + historySync.returnChunks = [makeStoredChunk(1)]; + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ type: "done", conversationId: CONV_ID, turnId: "t1", reason: "end-turn" }), + ); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + await vi.waitFor(() => { + expect(store.error).toBeNull(); + }); + + store.dispose(); + }); + + it("dispose prevents further syncs", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.dispose(); + + // Trigger a turn-sealed after dispose + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + // Wait a tick to let any async work settle + await new Promise((r) => setTimeout(r, 10)); + + // No sync should have happened + expect(historySync.calls).toHaveLength(0); + + store.dispose(); + }); + + it("overlapping syncs are guarded", async () => { + const transport = createFakeTransport(); + const _historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + + // Make the first sync slow + let resolveFirstSync: (() => void) | undefined; + const firstSyncPromise = new Promise<void>((resolve) => { + resolveFirstSync = resolve; + }); + + let callCount = 0; + const slowHistorySync: import("./ports").HistorySync = async (_conversationId, sinceSeq) => { + callCount++; + if (callCount === 1) { + await firstSyncPromise; + } + return { chunks: [], latestSeq: sinceSeq }; + }; + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: slowHistorySync, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // Trigger first sync + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + // Wait a tick so the first sync starts + await new Promise((r) => setTimeout(r, 0)); + + // Trigger second sync while first is pending + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t2" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t2" })); + + // Only one call should have been made (second was guarded) + expect(callCount).toBe(1); + + // Release the first sync + resolveFirstSync?.(); + await new Promise((r) => setTimeout(r, 10)); + + store.dispose(); + }); + + it("handles tool-call and tool-result chunks", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ + type: "tool-call", + conversationId: CONV_ID, + turnId: "t1", + toolCallId: "tc1", + toolName: "read_file", + input: { path: "/tmp/test.txt" }, + stepId: "t1#0" as StepId, + }), + ); + store.handleDelta( + deltaEvent({ + type: "tool-result", + conversationId: CONV_ID, + turnId: "t1", + toolCallId: "tc1", + toolName: "read_file", + content: "file contents", + isError: false, + stepId: "t1#0" as StepId, + }), + ); + + expect(store.chunks).toHaveLength(2); + expect(store.chunks[0]?.chunk.type).toBe("tool-call"); + expect(store.chunks[1]?.chunk.type).toBe("tool-result"); + + store.dispose(); + }); + + it("setModel changes the model used by the next send", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + model: "openai/gpt-4", + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.send("First"); + expect(transport.sent[0]?.model).toBe("openai/gpt-4"); + + store.setModel("anthropic/claude-3"); + store.send("Second"); + expect(transport.sent[1]?.model).toBe("anthropic/claude-3"); + + store.dispose(); + }); + + it("setModel from undefined to a model", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.send("First"); + expect(transport.sent[0]).not.toHaveProperty("model"); + + store.setModel("openai/gpt-4o"); + store.send("Second"); + expect(transport.sent[1]?.model).toBe("openai/gpt-4o"); + + store.dispose(); + }); + + it("handleDelta ignores a chat.delta for a different conversationId", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.handleDelta( + deltaEvent({ type: "turn-start", conversationId: "other-conv", turnId: "t1" }), + ); + store.handleDelta( + deltaEvent({ + type: "text-delta", + conversationId: "other-conv", + turnId: "t1", + delta: "Should be ignored", + }), + ); + + expect(store.messages).toHaveLength(0); + + store.dispose(); + }); + + it("handleDelta ignores a chat.error for a different conversationId", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.handleDelta({ type: "chat.error", conversationId: "other-conv", message: "Wrong conv" }); + + expect(store.error).toBeNull(); + + store.dispose(); + }); + + it("send optimistically shows the user message immediately", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.send("hi"); + + expect(store.messages).toHaveLength(1); + expect(store.messages[0]?.role).toBe("user"); + expect(store.messages[0]?.chunks).toHaveLength(1); + expect(store.messages[0]?.chunks[0]?.type).toBe("text"); + expect((store.messages[0]?.chunks[0] as { type: "text"; text: string }).text).toBe("hi"); + + store.dispose(); + }); + + it("the optimistic user message is replaced after turn-sealed + history sync", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + historySync.returnChunks = [ + { seq: 1, role: "user", chunk: { type: "text", text: "hi" } }, + { seq: 2, role: "assistant", chunk: { type: "text", text: "hello!" } }, + ]; + + store.send("hi"); + expect(store.messages).toHaveLength(1); + expect(store.messages[0]?.role).toBe("user"); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "hello!" }), + ); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + await vi.waitFor(() => { + expect(store.messages.length).toBe(2); + }); + + expect(store.messages[0]?.role).toBe("user"); + expect(store.messages[1]?.role).toBe("assistant"); + + store.dispose(); + }); + + it("folding usage/step-complete/done deltas exposes turnMetrics", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + expect(store.turnMetrics).toHaveLength(0); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ + type: "usage", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + store.handleDelta( + deltaEvent({ + type: "step-complete", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + ttftMs: 200, + genTotalMs: 800, + }), + ); + store.handleDelta( + deltaEvent({ + type: "done", + conversationId: CONV_ID, + turnId: "t1", + reason: "end-turn", + durationMs: 1200, + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + + expect(store.turnMetrics).toHaveLength(1); + const entry = store.turnMetrics[0]; + expect(entry?.turnId).toBe("t1"); + expect(entry?.steps).toHaveLength(1); + expect(entry?.steps[0]?.stepId).toBe("t1#0" as StepId); + expect(entry?.steps[0]?.usage.inputTokens).toBe(100); + expect(entry?.steps[0]?.genTotalMs).toBe(800); + expect(entry?.total).not.toBeNull(); + expect(entry?.total?.usage.inputTokens).toBe(100); + expect(entry?.total?.usage.outputTokens).toBe(50); + expect(entry?.total?.durationMs).toBe(1200); + + store.dispose(); + }); + + it("turnMetrics entry has total: null before done (progressive turn)", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ + type: "usage", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + store.handleDelta( + deltaEvent({ + type: "step-complete", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + ttftMs: 200, + genTotalMs: 800, + }), + ); + + expect(store.turnMetrics).toHaveLength(1); + const entry = store.turnMetrics[0]; + expect(entry?.turnId).toBe("t1"); + expect(entry?.steps).toHaveLength(1); + expect(entry?.steps[0]?.stepId).toBe("t1#0" as StepId); + expect(entry?.total).toBeNull(); + + store.dispose(); + }); + + it("metricsSync durable result overrides live by turnId", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // Live fold gives some metrics + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ + type: "usage", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + store.handleDelta( + deltaEvent({ + type: "done", + conversationId: CONV_ID, + turnId: "t1", + reason: "end-turn", + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + + expect(store.turnMetrics).toHaveLength(1); + expect(store.turnMetrics[0]?.total?.usage.outputTokens).toBe(50); + + // Durable sync returns different numbers for the same turnId + metricsSync.returnTurns = [ + { + turnId: "t1", + usage: { inputTokens: 200, outputTokens: 80 }, + durationMs: 500, + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 200, outputTokens: 80 }, + genTotalMs: 400, + }, + ], + }, + ]; + + // Trigger metrics sync via turn-sealed + historySync.returnChunks = []; + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + await vi.waitFor(() => { + expect(metricsSync.calls).toHaveLength(1); + }); + + // Durable should now override live (syncMetrics is async, wait for it) + await vi.waitFor(() => { + expect(store.turnMetrics[0]?.total?.usage.outputTokens).toBe(80); + }); + + expect(store.turnMetrics).toHaveLength(1); + expect(store.turnMetrics[0]?.total?.durationMs).toBe(500); + + store.dispose(); + }); + + it("rejected metricsSync leaves live metrics intact and does not throw", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // Live fold some metrics + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ + type: "usage", + conversationId: CONV_ID, + turnId: "t1", + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + store.handleDelta( + deltaEvent({ + type: "done", + conversationId: CONV_ID, + turnId: "t1", + reason: "end-turn", + usage: { inputTokens: 100, outputTokens: 50 }, + }), + ); + + expect(store.turnMetrics).toHaveLength(1); + + // Make the metrics sync reject + metricsSync.nextError = "metrics endpoint unavailable"; + + historySync.returnChunks = []; + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + + await vi.waitFor(() => { + expect(metricsSync.calls).toHaveLength(1); + }); + + // Live metrics should still be intact + expect(store.turnMetrics).toHaveLength(1); + expect(store.turnMetrics[0]?.total?.usage.outputTokens).toBe(50); + + // No error should have been thrown to the store + expect(store.error).toBeNull(); + + store.dispose(); + }); + + it("load calls metricsSync after history sync", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + + metricsSync.returnTurns = [ + { + turnId: "t1", + usage: { inputTokens: 300, outputTokens: 100 }, + durationMs: 900, + steps: [], + }, + ]; + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + await store.load(); + + expect(historySync.calls).toHaveLength(1); + expect(metricsSync.calls).toHaveLength(1); + expect(metricsSync.calls[0]).toBe(CONV_ID); + expect(store.turnMetrics).toHaveLength(1); + expect(store.turnMetrics[0]?.total?.usage.inputTokens).toBe(300); + + store.dispose(); + }); + + it("generating reflects the turn lifecycle (idle → running → idle)", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + expect(store.generating).toBe(false); + + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + expect(store.generating).toBe(true); + + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "hi" }), + ); + expect(store.generating).toBe(true); + + store.handleDelta( + deltaEvent({ type: "done", conversationId: CONV_ID, turnId: "t1", reason: "end-turn" }), + ); + expect(store.generating).toBe(false); + + store.dispose(); + }); + + it("generating lights up for a watcher whose turn was replayed (no send first)", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // A late-joiner receives the in-flight turn replayed from turn-start. + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta( + deltaEvent({ type: "text-delta", conversationId: CONV_ID, turnId: "t1", delta: "partial" }), + ); + expect(store.generating).toBe(true); + expect(transport.sent).toHaveLength(0); // it never sent — it's just watching + + store.dispose(); + }); + + it("resync clears a stale generating flag and re-syncs history + metrics", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + // Disconnected mid-turn: turn-start seen, but the live done/turn-sealed was + // missed, so generating is stuck true. + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + expect(store.generating).toBe(true); + + // The turn actually sealed while we were gone — history now has the chunks. + historySync.returnChunks = [makeStoredChunk(1), makeStoredChunk(2)]; + + store.resync(); + + // Generating is cleared synchronously (a finished turn must not spin forever). + expect(store.generating).toBe(false); + + await vi.waitFor(() => { + expect(historySync.calls).toHaveLength(1); + expect(metricsSync.calls).toHaveLength(1); + }); + + store.dispose(); + }); + + it("chat limit: crossing the limit unloads the oldest quarter in one bulk pass", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + // Commit exactly 100 chunks via a sealed turn (at the limit — no trim). + const hundred = Array.from({ length: 100 }, (_, i) => makeStoredChunk(i + 1)); + historySync.returnChunks = hundred; + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + await vi.waitFor(() => { + expect(store.chunks).toHaveLength(100); + }); + expect(store.hasEarlier).toBe(false); + + // The 101st chunk (a live tool-call) crosses the limit → 25 unload → 76 remain. + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t2" })); + store.handleDelta( + deltaEvent({ + type: "tool-call", + conversationId: CONV_ID, + turnId: "t2", + toolCallId: "tc1", + toolName: "probe", + input: {}, + stepId: "t2#0" as StepId, + }), + ); + + expect(store.chunks).toHaveLength(76); + expect(store.chunks[0]?.seq).toBe(26); + expect(store.hasEarlier).toBe(true); + + store.dispose(); + }); + + it("chat limit: unloading is deferred while the gate is closed, then catches up", () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + let atBottom = false; // reader scrolled up + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 10, + canUnload: () => atBottom, + }); + + // 15 live tool-calls: over the limit, but the gate defers every trim. + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + for (let i = 0; i < 15; i++) { + store.handleDelta( + deltaEvent({ + type: "tool-call", + conversationId: CONV_ID, + turnId: "t1", + toolCallId: `tc${i}`, + toolName: "probe", + input: {}, + stepId: `t1#${i}` as StepId, + }), + ); + } + expect(store.chunks).toHaveLength(15); + + // Reader returns to the bottom — the deferred trim now catches up. + // With no committed chunks, it drops the oldest provisional chunks + // (the in-flight turn) to stay within the limit. + atBottom = true; + store.handleDelta( + deltaEvent({ + type: "tool-call", + conversationId: CONV_ID, + turnId: "t1", + toolCallId: "tc15", + toolName: "probe", + input: {}, + stepId: "t1#15" as StepId, + }), + ); + // 16 provisional, limit 10, quarter 3 → drop 6 oldest → 10 remain. + expect(store.chunks).toHaveLength(10); + + store.dispose(); + }); + + it("chat limit: a deferred trim catches up across committed history once the gate opens", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + let atBottom = false; + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + canUnload: () => atBottom, + }); + + // Seal a turn committing 130 chunks while the reader is scrolled up: no trim. + historySync.returnChunks = Array.from({ length: 130 }, (_, i) => makeStoredChunk(i + 1)); + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + await vi.waitFor(() => { + expect(store.chunks).toHaveLength(130); + }); + + // Back at the bottom: the next fold trims whole quarters down to ≤ 100. + atBottom = true; + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t2" })); + // 130 → 2 quarters of 25 → 80 committed (turn-start adds no chunk). + expect(store.chunks).toHaveLength(80); + expect(store.chunks[0]?.seq).toBe(51); + + store.dispose(); + }); + + it("chat limit: load windows a long cached conversation to 75% of the limit", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit( + CONV_ID, + Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1)), + ); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); + + // floor(100 × 0.75) = 75 newest chunks: seqs 426..500. + expect(store.chunks).toHaveLength(75); + expect(store.chunks[0]?.seq).toBe(426); + expect(store.hasEarlier).toBe(true); + // The tail sync still used the cache's real cursor (not the window's edge). + expect(historySync.calls[0]?.sinceSeq).toBe(500); + + store.dispose(); + }); + + it("chat limit: a cold cache (fresh browser) asks the SERVER for the 75% window (CR-5 ?limit=)", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + // The server holds 500 chunks; the windowed fetch returns the newest 75. + historySync.returnChunks = Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1)); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); + + // The cold-cache initial sync carried the window (`?sinceSeq=0&limit=75`). + expect(historySync.calls[0]?.sinceSeq).toBe(0); + expect(historySync.calls[0]?.window).toEqual({ limit: 75 }); + + expect(store.chunks).toHaveLength(75); + expect(store.chunks[0]?.seq).toBe(426); + // hasEarlier derives from the 1-based gap-free seq contract (426 > 1) — + // no local watermark was ever set. + expect(store.hasEarlier).toBe(true); + // Only the window was shipped + cached (the point of CR-5). + const cached = await cache.impl.load(CONV_ID); + expect(cached).toHaveLength(75); + + store.dispose(); + }); + + it("chat limit: a warm cache syncs the tail UNWINDOWED (no seq gap behind the cache)", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit(CONV_ID, [makeStoredChunk(1), makeStoredChunk(2)]); + historySync.returnChunks = [makeStoredChunk(3)]; + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); + + expect(historySync.calls[0]?.sinceSeq).toBe(2); + expect(historySync.calls[0]?.window).toBeUndefined(); + + store.dispose(); + }); + + it("chat limit: showEarlier backfills from the server when the cache is too shallow (CR-5 ?beforeSeq=)", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + historySync.returnChunks = Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1)); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); // server-windowed: loaded + cached = 426..500 + expect(store.chunks[0]?.seq).toBe(426); + + await store.showEarlier(); + + // Nothing below 426 was cached → fetched the missing run from the server. + const backfill = historySync.calls[1]; + expect(backfill?.window).toEqual({ beforeSeq: 426, limit: 25 }); + expect(store.chunks).toHaveLength(100); + expect(store.chunks[0]?.seq).toBe(401); + expect(store.hasEarlier).toBe(true); + // The backfilled run is persisted: the NEXT page-in is cache-local. + const cached = await cache.impl.load(CONV_ID); + expect(cached).toHaveLength(100); + + store.dispose(); + }); + + it("chat limit: showEarlier pages a quarter back in from the cache", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit( + CONV_ID, + Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1)), + ); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); + expect(store.chunks[0]?.seq).toBe(426); + + await store.showEarlier(); // +ceil(100/4) = 25 older chunks + expect(store.chunks).toHaveLength(100); + expect(store.chunks[0]?.seq).toBe(401); + expect(store.hasEarlier).toBe(true); + // The cache reached deep enough — no server backfill was needed. + expect(historySync.calls).toHaveLength(1); + + store.dispose(); + }); + + it("chat limit: showEarlier clears hasEarlier when the cache is exhausted", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit( + CONV_ID, + Array.from({ length: 80 }, (_, i) => makeStoredChunk(i + 1)), + ); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); // window 75: hidden 1..5 + expect(store.chunks).toHaveLength(75); + expect(store.hasEarlier).toBe(true); + + await store.showEarlier(); // restores all 5 → nothing left below + expect(store.chunks).toHaveLength(80); + expect(store.chunks[0]?.seq).toBe(1); + expect(store.hasEarlier).toBe(false); + + store.dispose(); + }); + + it("chat limit: a post-trim history sync does not resurrect unloaded chunks", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit( + CONV_ID, + Array.from({ length: 500 }, (_, i) => makeStoredChunk(i + 1)), + ); + + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + await store.load(); + expect(store.chunks[0]?.seq).toBe(426); + + // A sealed turn triggers syncTail, whose cache.commit returns the FULL + // merged cache (seqs 1..501) — the watermark must keep 1..425 out. + historySync.returnChunks = [makeStoredChunk(501)]; + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t9" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t9" })); + + await vi.waitFor(() => { + expect(store.chunks[store.chunks.length - 1]?.seq).toBe(501); + }); + expect(store.chunks[0]?.seq).toBe(426); + expect(store.chunks).toHaveLength(76); + + store.dispose(); + }); + + it("setChatLimit: lowering the limit trims older committed chunks live", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + // Load 80 committed chunks (under the limit — no trim yet). + historySync.returnChunks = Array.from({ length: 80 }, (_, i) => makeStoredChunk(i + 1)); + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + await vi.waitFor(() => { + expect(store.chunks).toHaveLength(80); + }); + + // Lower the limit to 10: 80 → unload ceil(10/4)=3 per quarter, needs + // ceil((80-10)/3)=24 quarters → drop min(72, 80)=72 → 8 remain. + await store.setChatLimit(10); + expect(store.chunks).toHaveLength(8); + expect(store.chunks[0]?.seq).toBe(73); + expect(store.hasEarlier).toBe(true); + + store.dispose(); + }); + + it("setChatLimit: raising the limit refills older history up to the fresh-load window", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + // Cache holds 200 chunks; load at limit 100 → window 75 → seqs 126..200. + await cache.impl.commit( + CONV_ID, + Array.from({ length: 200 }, (_, i) => makeStoredChunk(i + 1)), + ); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + await store.load(); + expect(store.chunks).toHaveLength(75); + expect(store.chunks[0]?.seq).toBe(126); + expect(store.hasEarlier).toBe(true); + + // Raise to 200 → window floor(0.75×200)=150 → refill 75 older chunks + // (seqs 51..125) from the cache. No server backfill (cache is deep enough). + await store.setChatLimit(200); + expect(historySync.calls).toHaveLength(1); // the load-time tail sync only + expect(store.chunks).toHaveLength(150); + expect(store.chunks[0]?.seq).toBe(51); + expect(store.hasEarlier).toBe(true); // 51 > 1 + + store.dispose(); + }); + + it("setChatLimit: raising backfills from the server when the cache is too shallow", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + // Server holds 200; cold-cache load at limit 100 → window 75 → seqs 126..200. + historySync.returnChunks = Array.from({ length: 200 }, (_, i) => makeStoredChunk(i + 1)); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + await store.load(); + expect(store.chunks[0]?.seq).toBe(126); + + // Raise to 200 → want 75 older. Cache only holds 126..200 → backfill + // seqs 51..125 from the server (CR-5 ?beforeSeq=126&limit=75). + await store.setChatLimit(200); + const backfill = historySync.calls[1]; + expect(backfill?.window).toEqual({ beforeSeq: 126, limit: 75 }); + expect(store.chunks).toHaveLength(150); + expect(store.chunks[0]?.seq).toBe(51); + + store.dispose(); + }); + + it("setChatLimit: raising refills all available older history (down to the origin)", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + // 101 chunks → one trim pass drops 25 → 76 remain (seqs 26..101). + historySync.returnChunks = Array.from({ length: 101 }, (_, i) => makeStoredChunk(i + 1)); + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + await vi.waitFor(() => { + expect(store.chunks).toHaveLength(76); + }); + expect(store.chunks[0]?.seq).toBe(26); + expect(store.hasEarlier).toBe(true); + + // Raise to 500 → window 375 → want 299 older. The cache holds only + // seqs 1..25 below the window (no more server-side) → restore all 25 → + // 101 loaded, reaching the origin. + await store.setChatLimit(500); + expect(store.chunks).toHaveLength(101); + expect(store.chunks[0]?.seq).toBe(1); + expect(store.hasEarlier).toBe(false); + + store.dispose(); + }); + + it("setChatLimit: raising is a no-op when the window already starts at the origin", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + await cache.impl.commit( + CONV_ID, + Array.from({ length: 50 }, (_, i) => makeStoredChunk(i + 1)), + ); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + await store.load(); // only 50 chunks → all loaded, window starts at seq 1 + expect(store.chunks).toHaveLength(50); + expect(store.hasEarlier).toBe(false); + const callsAfterLoad = historySync.calls.length; + + await store.setChatLimit(500); // raise → refill no-ops (oldest = 1) + expect(store.chunks).toHaveLength(50); + expect(store.chunks[0]?.seq).toBe(1); + expect(historySync.calls).toHaveLength(callsAfterLoad); // no backfill + + store.dispose(); + }); + + it("setChatLimit: a nonsensical value is normalized (no crash, no trim)", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + chatLimit: 100, + }); + + historySync.returnChunks = Array.from({ length: 50 }, (_, i) => makeStoredChunk(i + 1)); + store.handleDelta(deltaEvent({ type: "turn-start", conversationId: CONV_ID, turnId: "t1" })); + store.handleDelta(deltaEvent({ type: "turn-sealed", conversationId: CONV_ID, turnId: "t1" })); + await vi.waitFor(() => { + expect(store.chunks).toHaveLength(50); + }); + + // NaN normalizes to the default (256). prev was 100 → raise → refill, + // but the loaded window already starts at seq 1 (origin) → no-op. + await store.setChatLimit(Number.NaN); + expect(store.chunks).toHaveLength(50); + + store.dispose(); + }); + + it("resync is a no-op after dispose", async () => { + const transport = createFakeTransport(); + const historySync = createFakeHistorySync(); + const metricsSync = createFakeMetricsSync(); + const cache = createFakeCache(); + const store = createChatStore({ + conversationId: CONV_ID, + transport: transport.impl, + historySync: historySync.impl, + metricsSync: metricsSync.impl, + cache: cache.impl, + }); + + store.dispose(); + store.resync(); + + await new Promise((r) => setTimeout(r, 10)); + expect(historySync.calls).toHaveLength(0); + expect(metricsSync.calls).toHaveLength(0); + }); }); diff --git a/src/features/chat/test-helpers.ts b/src/features/chat/test-helpers.ts index d37b59e..26c5590 100644 --- a/src/features/chat/test-helpers.ts +++ b/src/features/chat/test-helpers.ts @@ -1,83 +1,142 @@ +import type { ChatQueueMessage, ChatSendMessage } from "@dispatch/transport-contract"; import type { StoredChunk } from "@dispatch/wire"; import type { ConversationCache } from "../conversation-cache"; -import type { ChatTransport, HistorySync } from "./ports"; +import type { ChatTransport, HistorySync, HistoryWindow, MetricsSync } from "./ports"; export interface FakeTransport { - readonly sent: import("@dispatch/transport-contract").ChatSendMessage[]; - readonly impl: ChatTransport; + /** All `chat.send` messages sent through the fake transport. */ + readonly sent: ChatSendMessage[]; + /** All `chat.queue` messages sent through the fake transport. */ + readonly sentQueue: ChatQueueMessage[]; + readonly impl: ChatTransport; } export function createFakeTransport(): FakeTransport { - const sent: import("@dispatch/transport-contract").ChatSendMessage[] = []; - return { - sent, - impl: { - send(msg) { - sent.push(msg); - }, - }, - }; + const sent: ChatSendMessage[] = []; + const sentQueue: ChatQueueMessage[] = []; + return { + sent, + sentQueue, + impl: { + send(msg) { + if (msg.type === "chat.queue") { + sentQueue.push(msg); + } else { + sent.push(msg); + } + }, + }, + }; } export interface FakeHistorySync { - readonly calls: Array<{ conversationId: string; sinceSeq: number }>; - /** Set the chunks to return on the next call. */ - returnChunks: readonly StoredChunk[]; - readonly impl: HistorySync; + readonly calls: Array<{ conversationId: string; sinceSeq: number; window?: HistoryWindow }>; + /** Set the chunks to return on the next call. */ + returnChunks: readonly StoredChunk[]; + readonly impl: HistorySync; } export function createFakeHistorySync(): FakeHistorySync { - const calls: Array<{ conversationId: string; sinceSeq: number }> = []; - let returnChunks: readonly StoredChunk[] = []; - return { - calls, - get returnChunks() { - return returnChunks; - }, - set returnChunks(v: readonly StoredChunk[]) { - returnChunks = v; - }, - impl: async (conversationId, sinceSeq) => { - calls.push({ conversationId, sinceSeq }); - const chunks = returnChunks; - const latestSeq = chunks.length > 0 ? Math.max(...chunks.map((c) => c.seq)) : sinceSeq; - return { chunks, latestSeq }; - }, - }; + const calls: Array<{ conversationId: string; sinceSeq: number; window?: HistoryWindow }> = []; + let returnChunks: readonly StoredChunk[] = []; + return { + calls, + get returnChunks() { + return returnChunks; + }, + set returnChunks(v: readonly StoredChunk[]) { + returnChunks = v; + }, + impl: async (conversationId, sinceSeq, window) => { + calls.push({ conversationId, sinceSeq, ...(window !== undefined ? { window } : {}) }); + // Apply the CR-5 WINDOW semantics (`beforeSeq` bound, then newest-`limit`) + // so store tests exercise the real windowed flows. `sinceSeq` filtering is + // deliberately NOT applied — tests set `returnChunks` to the slice they + // mean the server to hold past the cursor. + let chunks = returnChunks; + const before = window?.beforeSeq; + if (before !== undefined) { + chunks = chunks.filter((c) => c.seq < before); + } + if (window?.limit !== undefined && chunks.length > window.limit) { + chunks = chunks.slice(-window.limit); + } + const latestSeq = chunks.length > 0 ? Math.max(...chunks.map((c) => c.seq)) : sinceSeq; + return { chunks, latestSeq }; + }, + }; +} + +export interface FakeMetricsSync { + readonly calls: string[]; + returnTurns: import("@dispatch/wire").TurnMetrics[]; + /** If set, the next call will reject with this error. */ + nextError: string | undefined; + readonly impl: MetricsSync; +} + +export function createFakeMetricsSync(): FakeMetricsSync { + const calls: string[] = []; + let returnTurns: import("@dispatch/wire").TurnMetrics[] = []; + let nextError: string | undefined; + return { + calls, + get returnTurns() { + return returnTurns; + }, + set returnTurns(v: import("@dispatch/wire").TurnMetrics[]) { + returnTurns = v; + }, + get nextError() { + return nextError; + }, + set nextError(v: string | undefined) { + nextError = v; + }, + impl: async (conversationId) => { + calls.push(conversationId); + if (nextError !== undefined) { + const err = nextError; + nextError = undefined; + throw new Error(err); + } + return { turns: returnTurns }; + }, + }; } export interface FakeCache { - readonly store: Map<string, StoredChunk[]>; - readonly impl: ConversationCache; + readonly store: Map<string, StoredChunk[]>; + readonly impl: ConversationCache; } export function createFakeCache(): FakeCache { - const store = new Map<string, StoredChunk[]>(); - return { - store, - impl: { - async load(conversationId) { - return store.get(conversationId) ?? []; - }, - async commit(conversationId, incoming) { - const existing = store.get(conversationId) ?? []; - const seen = new Set(existing.map((c) => c.seq)); - const toAppend = incoming.filter((c) => !seen.has(c.seq)); - const merged = [...existing, ...toAppend].sort((a, b) => a.seq - b.seq); - store.set(conversationId, merged); - return merged; - }, - async sinceSeq(conversationId) { - const chunks = store.get(conversationId) ?? []; - if (chunks.length === 0) return 0; - return Math.max(...chunks.map((c) => c.seq)); - }, - async evictIfOverBudget() { - return []; - }, - async delete(conversationId) { - store.delete(conversationId); - }, - }, - }; + const store = new Map<string, StoredChunk[]>(); + return { + store, + impl: { + async load(conversationId) { + return store.get(conversationId) ?? []; + }, + async commit(conversationId, incoming) { + const existing = store.get(conversationId) ?? []; + const seen = new Set(existing.map((c) => c.seq)); + const toAppend = incoming.filter((c) => !seen.has(c.seq)); + const merged = [...existing, ...toAppend].sort((a, b) => a.seq - b.seq); + store.set(conversationId, merged); + return merged; + }, + async sinceSeq(conversationId) { + const chunks = store.get(conversationId) ?? []; + if (chunks.length === 0) return 0; + return Math.max(...chunks.map((c) => c.seq)); + }, + async evictIfOverBudget() { + return []; + }, + async delete(conversationId) { + store.delete(conversationId); + }, + }, + }; } diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts index ac8f640..5f8067d 100644 --- a/src/features/chat/ui.test.ts +++ b/src/features/chat/ui.test.ts @@ -1,298 +1,1165 @@ -import { render, screen } from "@testing-library/svelte"; +import type { StepId } from "@dispatch/wire"; +import { render, screen, within } from "@testing-library/svelte"; import userEvent from "@testing-library/user-event"; import { describe, expect, it, vi } from "vitest"; import type { RenderedChunk } from "../../core/chunks"; +import type { TurnMetricsEntry } from "../../core/metrics"; import ChatView from "./ui/ChatView.svelte"; import Composer from "./ui/Composer.svelte"; import ModelSelector from "./ui/ModelSelector.svelte"; +import ReasoningEffortSelector from "./ui/ReasoningEffortSelector.svelte"; describe("ChatView", () => { - it("renders a message's text chunk", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "assistant", - chunk: { type: "text", text: "Hello world" }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("Hello world")).toBeInTheDocument(); - expect(screen.getByText("assistant")).toBeInTheDocument(); - }); - - it("renders multiple chunks", () => { - const chunks: RenderedChunk[] = [ - { seq: 1, role: "user", chunk: { type: "text", text: "Hi there" }, provisional: false }, - { - seq: 2, - role: "assistant", - chunk: { type: "text", text: "Hello!" }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("Hi there")).toBeInTheDocument(); - expect(screen.getByText("Hello!")).toBeInTheDocument(); - }); - - it("renders tool-call chunks", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "assistant", - chunk: { - type: "tool-call", - toolCallId: "tc1", - toolName: "read_file", - input: { path: "/tmp/test.txt" }, - }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("read_file")).toBeInTheDocument(); - const pre = screen.getByText((content, element) => { - return element?.tagName === "PRE" && content.includes("/tmp/test.txt"); - }); - expect(pre).toBeInTheDocument(); - }); - - it("renders tool-result chunks", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "tool", - chunk: { - type: "tool-result", - toolCallId: "tc1", - toolName: "read_file", - content: "file contents here", - isError: false, - }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("read_file")).toBeInTheDocument(); - expect(screen.getByText("file contents here")).toBeInTheDocument(); - }); - - it("renders error chunks with alert role", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "assistant", - chunk: { type: "error", message: "Something failed" }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - const alert = screen.getByRole("alert"); - expect(alert).toHaveTextContent("Something failed"); - }); - - it("renders error chunks with code", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "assistant", - chunk: { type: "error", message: "Rate limited", code: "RATE_LIMIT" }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("Rate limited")).toBeInTheDocument(); - expect(screen.getByText("[RATE_LIMIT]")).toBeInTheDocument(); - }); - - it("renders system chunks", () => { - const chunks: RenderedChunk[] = [ - { - seq: 1, - role: "system", - chunk: { type: "system", text: "System context loaded" }, - provisional: false, - }, - ]; - - render(ChatView, { props: { chunks } }); - - expect(screen.getByText("System context loaded")).toBeInTheDocument(); - }); - - it("marks provisional chunks", () => { - const chunks: RenderedChunk[] = [ - { - seq: null, - role: "assistant", - chunk: { type: "text", text: "Streaming..." }, - provisional: true, - }, - ]; - - render(ChatView, { props: { chunks } }); - - const bubble = screen.getByText("Streaming...").closest(".chat-bubble"); - expect(bubble).toHaveClass("opacity-50"); - }); - - it("renders empty transcript", () => { - render(ChatView, { props: { chunks: [] } }); - - const log = screen.getByRole("log"); - expect(log).toBeInTheDocument(); - expect(log.children).toHaveLength(0); - }); - - it("thinking <details> stays open across a streaming update", async () => { - const initial: RenderedChunk[] = [ - { - seq: null, - role: "assistant", - chunk: { type: "thinking", text: "Let me think..." }, - provisional: true, - }, - ]; - - const { rerender } = render(ChatView, { props: { chunks: initial } }); - - const details = screen.getByText("Thinking").closest("details"); - expect(details).not.toBeNull(); - expect(details).not.toHaveAttribute("open"); - if (details) details.open = true; - expect(details).toHaveAttribute("open"); - - const updated: RenderedChunk[] = [ - { - seq: null, - role: "assistant", - chunk: { type: "thinking", text: "Let me think... step by step" }, - provisional: true, - }, - ]; - await rerender({ chunks: updated }); - - const detailsAfter = screen.getByText("Thinking").closest("details"); - expect(detailsAfter).not.toBeNull(); - expect(detailsAfter).toHaveAttribute("open"); - expect(detailsAfter).toHaveTextContent("Let me think... step by step"); - }); + it("renders a message's text chunk", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { type: "text", text: "Hello world" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("Hello world")).toBeInTheDocument(); + }); + + it("renders multiple chunks", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Hi there" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Hello!" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("Hi there")).toBeInTheDocument(); + expect(screen.getByText("Hello!")).toBeInTheDocument(); + }); + + it("shows the show-earlier button only when earlier history is unloaded, and pages it in", async () => { + const chunks: RenderedChunk[] = [ + { seq: 26, role: "user", chunk: { type: "text", text: "later" }, provisional: false }, + ]; + + let resolveEarlier: (() => void) | undefined; + const onShowEarlier = vi.fn( + () => + new Promise<void>((resolve) => { + resolveEarlier = resolve; + }), + ); + + render(ChatView, { props: { chunks, hasEarlier: true, onShowEarlier } }); + + const button = screen.getByRole("button", { name: /show earlier messages/i }); + const user = userEvent.setup(); + await user.click(button); + + expect(onShowEarlier).toHaveBeenCalledTimes(1); + // While the page-in is awaited the button is disabled (no double-fire). + expect(screen.getByRole("button", { name: /loading earlier messages/i })).toBeDisabled(); + + resolveEarlier?.(); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: /show earlier messages/i })).toBeEnabled(); + }); + }); + + it("hides the show-earlier button when nothing is unloaded", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "all here" }, provisional: false }, + ]; + + render(ChatView, { props: { chunks, hasEarlier: false, onShowEarlier: vi.fn() } }); + + expect(screen.queryByRole("button", { name: /show earlier/i })).not.toBeInTheDocument(); + }); + + it("renders tool-call chunks", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "read_file", + input: { path: "/tmp/test.txt" }, + }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("read_file")).toBeInTheDocument(); + const pre = screen.getByText((content, element) => { + return element?.tagName === "PRE" && content.includes("/tmp/test.txt"); + }); + expect(pre).toBeInTheDocument(); + }); + + it("renders tool-result chunks", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "tool", + chunk: { + type: "tool-result", + toolCallId: "tc1", + toolName: "read_file", + content: "file contents here", + isError: false, + }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("read_file")).toBeInTheDocument(); + expect(screen.getByText("file contents here")).toBeInTheDocument(); + }); + + it("renders error chunks with alert role", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { type: "error", message: "Something failed" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + const alert = screen.getByRole("alert"); + expect(alert).toHaveTextContent("Something failed"); + }); + + it("renders error chunks with code", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { type: "error", message: "Rate limited", code: "RATE_LIMIT" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("Rate limited")).toBeInTheDocument(); + expect(screen.getByText("[RATE_LIMIT]")).toBeInTheDocument(); + }); + + it("renders system chunks", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "system", + chunk: { type: "system", text: "System context loaded" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText("System context loaded")).toBeInTheDocument(); + }); + + it("renders provisional (in-flight) chunks without any dimming", () => { + const chunks: RenderedChunk[] = [ + { + seq: null, + role: "assistant", + chunk: { type: "text", text: "Streaming..." }, + provisional: true, + }, + ]; + + render(ChatView, { props: { chunks } }); + + // In-flight chunks render at full opacity (no faded "disabled" look). + const wrapper = screen.getByText("Streaming...").closest("div"); + expect(wrapper).not.toHaveClass("opacity-50"); + }); + + it("renders empty transcript", () => { + render(ChatView, { props: { chunks: [] } }); + + const log = screen.getByRole("log"); + expect(log).toBeInTheDocument(); + expect(log.children).toHaveLength(0); + }); + + it("groups batched tool calls (shared stepId) into one DaisyUI list", () => { + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "a", + toolName: "read_file", + input: { path: "/a" }, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + { + seq: 2, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "b", + toolName: "list_dir", + input: { path: "/b" }, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + { + seq: 3, + role: "tool", + chunk: { + type: "tool-result", + toolCallId: "a", + toolName: "read_file", + content: "contents-of-a", + isError: false, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + ]; + + const { container } = render(ChatView, { props: { chunks } }); + + // Batched calls render as collapsible cards (one per call), not a list. + const collapses = container.querySelectorAll(".collapse"); + expect(collapses).toHaveLength(2); + + // Both call names + the available result are shown; the result is absorbed + // (no standalone tool-result card). + expect(screen.getByText("read_file")).toBeInTheDocument(); + expect(screen.getByText("list_dir")).toBeInTheDocument(); + expect(screen.getByText("contents-of-a")).toBeInTheDocument(); + }); + + it("thinking is a checkbox collapse (no arrow) inside a visible bubble", () => { + const chunks: RenderedChunk[] = [ + { + seq: null, + role: "assistant", + chunk: { type: "thinking", text: "Let me think..." }, + provisional: true, + streaming: true, + }, + ]; + + const { container } = render(ChatView, { props: { chunks } }); + + const collapse = container.querySelector(".collapse"); + expect(collapse).not.toBeNull(); + expect(collapse).not.toHaveClass("collapse-arrow"); // no indicator icon + expect(collapse).not.toHaveClass("collapse-plus"); + // Visible bubble, like tool cards. + expect(collapse).toHaveClass("bg-base-200"); + expect(collapse).toHaveClass("rounded-box"); + expect(screen.getByRole("checkbox", { name: "Toggle thoughts" })).toBeInTheDocument(); + }); + + it("title is 'Thinking' + dots while streaming, then 'Thoughts' with no dots once complete; open state persists", async () => { + const streaming: RenderedChunk[] = [ + { + seq: null, + role: "assistant", + chunk: { type: "thinking", text: "hmm" }, + provisional: true, + streaming: true, + }, + ]; + + const { container, rerender } = render(ChatView, { props: { chunks: streaming } }); + + // Streaming: "Thinking" + loading dots. + expect(screen.getByText("Thinking")).toBeInTheDocument(); + expect(screen.queryByText("Thoughts")).toBeNull(); + expect(container.querySelector(".loading")).not.toBeNull(); + + // Open it. + const checkbox = screen.getByRole("checkbox", { name: "Toggle thoughts" }); + await userEvent.click(checkbox); + expect(checkbox).toBeChecked(); + + // Transition generating → completed/committed (seq assigned, no longer streaming). + await rerender({ + chunks: [ + { + seq: 1, + role: "assistant", + chunk: { type: "thinking", text: "hmm, all done" }, + provisional: false, + }, + ], + }); + + // Completed: "Thoughts", no dots — and the open state survived the transition. + expect(screen.getByText("Thoughts")).toBeInTheDocument(); + expect(screen.queryByText("Thinking")).toBeNull(); + expect(container.querySelector(".loading")).toBeNull(); + expect(screen.getByRole("checkbox", { name: "Toggle thoughts" })).toBeChecked(); + expect(container).toHaveTextContent("hmm, all done"); + }); + + it("renders step and turn metrics as separate rows", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Hi" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Hello!" }, + provisional: false, + }, + { + seq: 3, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "test", + input: {}, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + ]; + + const turnMetrics: TurnMetricsEntry[] = [ + { + turnId: "t1", + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + genTotalMs: 800, + }, + ], + total: { + turnId: "t1", + usage: { inputTokens: 100, outputTokens: 50 }, + durationMs: 1200, + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + genTotalMs: 800, + }, + ], + }, + }, + ]; + + render(ChatView, { props: { chunks, turnMetrics } }); + + expect(screen.getByText("Hi")).toBeInTheDocument(); + expect(screen.getByText("Hello!")).toBeInTheDocument(); + expect(screen.getByText(/step 1/)).toBeInTheDocument(); + expect(screen.getAllByText(/150 tok/)).toHaveLength(2); + expect(screen.getByText(/turn 1 · 150 tok \(100 in \/ 50 out\)/)).toBeInTheDocument(); + expect(screen.getByText(/1\.2s/)).toBeInTheDocument(); + }); + + it("renders cache hit-rate badges (Last turn + Chat Total) coloured by level", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Hi" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Hello!" }, + provisional: false, + }, + ]; + const turnMetrics: TurnMetricsEntry[] = [ + { + turnId: "t1", + steps: [], + total: { + turnId: "t1", + usage: { inputTokens: 100, outputTokens: 10, cacheReadTokens: 93 }, + steps: [], + }, + }, + ]; + + const { container } = render(ChatView, { props: { chunks, turnMetrics } }); + + expect(screen.getByText("Last turn:")).toBeInTheDocument(); + expect(screen.getByText("Chat Total:")).toBeInTheDocument(); + // single turn ⇒ both the turn rate and the cumulative are 93% ⇒ success badge + const badges = container.querySelectorAll(".badge"); + expect(badges).toHaveLength(2); + for (const b of badges) { + expect(b.textContent).toBe("93%"); + expect(b.classList.contains("badge-success")).toBe(true); + } + }); + + it("renders step-metrics inline after tool group", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Run it" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "bash", + input: { command: "ls" }, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + { + seq: 3, + role: "tool", + chunk: { + type: "tool-result", + toolCallId: "tc1", + toolName: "bash", + content: "file.txt", + isError: false, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + { + seq: 4, + role: "assistant", + chunk: { type: "text", text: "Done!" }, + provisional: false, + }, + ]; + + const turnMetrics: TurnMetricsEntry[] = [ + { + turnId: "t1", + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 80, outputTokens: 20 }, + genTotalMs: 300, + }, + ], + total: { + turnId: "t1", + usage: { inputTokens: 80, outputTokens: 20 }, + durationMs: 500, + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 80, outputTokens: 20 }, + genTotalMs: 300, + }, + ], + }, + }, + ]; + + render(ChatView, { props: { chunks, turnMetrics } }); + + // Both step-metrics and turn-metrics render + expect(screen.getByText(/step 1/)).toBeInTheDocument(); + expect(screen.getByText(/turn 1 · 100 tok/)).toBeInTheDocument(); + + // They are in separate elements (different rows) + const stepEl = screen.getByText(/step 1 · 100 tok/).closest("div"); + const turnEl = screen.getByText(/turn 1 · 100 tok/).closest("div"); + expect(stepEl).not.toBe(turnEl); + }); + + it("renders no metrics bubble when turnMetrics is empty", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Hi" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Hello!" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks, turnMetrics: [] } }); + + expect(screen.getByText("Hi")).toBeInTheDocument(); + expect(screen.getByText("Hello!")).toBeInTheDocument(); + expect(screen.queryByText(/step 1/)).toBeNull(); + expect(screen.queryByText(/^turn/)).toBeNull(); + }); + + it("omits null view values from metrics bubbles", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Test" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Response" }, + provisional: false, + }, + { + seq: 3, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "test", + input: {}, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + ]; + + const turnMetrics: TurnMetricsEntry[] = [ + { + turnId: "t1", + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 10, outputTokens: 5 }, + }, + ], + total: { + turnId: "t1", + usage: { inputTokens: 10, outputTokens: 5 }, + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 10, outputTokens: 5 }, + }, + ], + }, + }, + ]; + + render(ChatView, { props: { chunks, turnMetrics } }); + + // Step metrics rendered + expect(screen.getByText(/step 1/)).toBeInTheDocument(); + expect(screen.getAllByText(/15 tok/)).toHaveLength(2); + // Turn metrics rendered + expect(screen.getByText(/turn 1 · 15 tok \(10 in \/ 5 out\)/)).toBeInTheDocument(); + // No "null" or "undefined" in the DOM + expect(screen.queryByText("null")).toBeNull(); + expect(screen.queryByText("undefined")).toBeNull(); + }); + + it("renders step text but no turn total for a progressive turn (total: null)", () => { + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "Hi" }, provisional: false }, + { + seq: 2, + role: "assistant", + chunk: { type: "text", text: "Hello!" }, + provisional: false, + }, + { + seq: 3, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "test", + input: {}, + stepId: "t1#0" as StepId, + }, + provisional: false, + }, + ]; + + const turnMetrics: TurnMetricsEntry[] = [ + { + turnId: "t1", + steps: [ + { + stepId: "t1#0" as StepId, + usage: { inputTokens: 100, outputTokens: 50 }, + genTotalMs: 800, + }, + ], + total: null, + }, + ]; + + render(ChatView, { props: { chunks, turnMetrics } }); + + // Step metrics should render + expect(screen.getByText(/step 1/)).toBeInTheDocument(); + expect(screen.getByText(/150 tok/)).toBeInTheDocument(); + + // Turn total should NOT render (total is null — turn still in progress) + expect(screen.queryByText(/^turn/)).toBeNull(); + }); + + it("renders a user image chunk as an <img> with the chunk's url", () => { + const url = "data:image/png;base64,AAAA"; + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "user", + chunk: { type: "image", url, mimeType: "image/png" }, + provisional: false, + }, + ]; + + const { container } = render(ChatView, { props: { chunks } }); + + const img = container.querySelector("img"); + expect(img).not.toBeNull(); + expect(img?.getAttribute("src")).toBe(url); + expect(img?.getAttribute("alt")).toBe("image/png"); + expect(img?.getAttribute("loading")).toBe("lazy"); + }); + + it("resolves a persisted image chunk's relative url against apiBaseUrl", () => { + // Persisted image chunks now carry a compact relative path (`/images/…`) + // served by the backend — prepend the API base to render them. + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "user", + chunk: { type: "image", url: "/images/conv-123/abc-456.png", mimeType: "image/png" }, + provisional: false, + }, + ]; + + const { container } = render(ChatView, { + props: { chunks, apiBaseUrl: "http://localhost:24203" }, + }); + + expect(container.querySelector("img")?.getAttribute("src")).toBe( + "http://localhost:24203/images/conv-123/abc-456.png", + ); + }); + + it("passes a data URL through unchanged even with apiBaseUrl set (optimistic echo)", () => { + // The optimistic echo (what the FE just sent) is still a data URL; it must + // NOT be mangled by the base-URL prepend. + const dataUrl = "data:image/png;base64,iVBOR="; + const chunks: RenderedChunk[] = [ + { seq: null, role: "user", chunk: { type: "image", url: dataUrl }, provisional: true }, + ]; + + const { container } = render(ChatView, { + props: { chunks, apiBaseUrl: "http://localhost:24203" }, + }); + + expect(container.querySelector("img")?.getAttribute("src")).toBe(dataUrl); + }); + + it("leaves a relative image url root-relative when apiBaseUrl is absent", () => { + // No apiBaseUrl → a browser resolves `/images/…` against the document origin. + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "user", + chunk: { type: "image", url: "/images/conv-1/x.png" }, + provisional: false, + }, + ]; + + const { container } = render(ChatView, { props: { chunks } }); + + expect(container.querySelector("img")?.getAttribute("src")).toBe("/images/conv-1/x.png"); + }); + + it("renders a multi-chunk user message [text, image] and a transcription text", () => { + // A non-vision model: the server persists the original image chunk AND a + // transcription text chunk in the SAME user message — render both. + const url = "data:image/png;base64,BBQ="; + const chunks: RenderedChunk[] = [ + { seq: 1, role: "user", chunk: { type: "text", text: "describe this" }, provisional: false }, + { + seq: 2, + role: "user", + chunk: { type: "image", url, mimeType: "image/png" }, + provisional: false, + }, + { + seq: 3, + role: "user", + chunk: { type: "text", text: "[Image analysis (via kimi/k2)]: a red square" }, + provisional: false, + }, + ]; + + const { container } = render(ChatView, { props: { chunks } }); + + expect(screen.getByText("describe this")).toBeInTheDocument(); + expect(screen.getByText(/\[Image analysis/)).toBeInTheDocument(); + expect(container.querySelector("img")?.getAttribute("src")).toBe(url); + }); + + it("renders a consult_vision tool call/result like any other tool", () => { + // read_image is GONE — replaced by consult_vision (opens a vision-model + // conversation, attaches the image + question, returns the answer). It is + // a normal tool call: rendered generically by toolName. + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "assistant", + chunk: { + type: "tool-call", + toolCallId: "tc1", + toolName: "consult_vision", + input: { question: "what is in this image?", imageIds: [1] }, + }, + provisional: false, + }, + { + seq: 2, + role: "tool", + chunk: { + type: "tool-result", + toolCallId: "tc1", + toolName: "consult_vision", + content: "a red square on a white background", + isError: false, + }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getAllByText("consult_vision").length).toBeGreaterThan(0); + expect(screen.getByText("a red square on a white background")).toBeInTheDocument(); + }); + + it("renders a non-vision placeholder text chunk as-is", () => { + // A non-vision model gets a numbered placeholder (a regular text chunk) + // instead of an auto-transcription. Renders like any text chunk. + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "user", + chunk: { + type: "text", + text: "[Image 1 attached — call consult_vision with imageIds=[1] and a specific question to analyze it]", + }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText(/\[Image 1 attached/)).toBeInTheDocument(); + expect(screen.getByText(/consult_vision with imageIds/)).toBeInTheDocument(); + }); + + it("renders a compacted-image text chunk as-is", () => { + // Image compaction transcribes old images to [Compacted image]: <desc>. + // Regular text chunk — render as-is. + const chunks: RenderedChunk[] = [ + { + seq: 1, + role: "user", + chunk: { type: "text", text: "[Compacted image]: a chart showing rising sales" }, + provisional: false, + }, + ]; + + render(ChatView, { props: { chunks } }); + + expect(screen.getByText(/\[Compacted image\]/)).toBeInTheDocument(); + expect(screen.getByText(/rising sales/)).toBeInTheDocument(); + }); }); describe("Composer", () => { - it("calls onSend with the typed text and clears", async () => { - const onSend = vi.fn(); - const user = userEvent.setup(); + it("calls onSend with the typed text and clears", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + + render(Composer, { props: { onSend } }); + + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "Hello world"); + + const sendButton = screen.getByRole("button", { name: "Send" }); + await user.click(sendButton); + + expect(onSend).toHaveBeenCalledTimes(1); + expect(onSend).toHaveBeenCalledWith("Hello world", undefined); + expect(textarea).toHaveValue(""); + }); + + it("does not call onSend with empty text", async () => { + const onSend = vi.fn(); + const _user = userEvent.setup(); + + render(Composer, { props: { onSend } }); + + const sendButton = screen.getByRole("button", { name: "Send" }); + expect(sendButton).toBeDisabled(); + + expect(onSend).not.toHaveBeenCalled(); + }); + + it("trims whitespace before sending", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + + render(Composer, { props: { onSend } }); + + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, " hello "); + + const sendButton = screen.getByRole("button", { name: "Send" }); + await user.click(sendButton); + + expect(onSend).toHaveBeenCalledWith("hello", undefined); + }); + + it("sends on Enter key (without Shift)", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + + render(Composer, { props: { onSend } }); + + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "Test message{Enter}"); + + expect(onSend).toHaveBeenCalledWith("Test message", undefined); + }); + + it("does not send on Shift+Enter", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + + render(Composer, { props: { onSend } }); + + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "Line 1{Shift>}{Enter}{/Shift}Line 2"); + + expect(onSend).not.toHaveBeenCalled(); + }); + + it("stages a pasted image and forwards it on send", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + const { container } = render(Composer, { props: { onSend } }); - render(Composer, { props: { onSend } }); + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "look at this"); - const textarea = screen.getByRole("textbox", { name: "Message input" }); - await user.type(textarea, "Hello world"); + // jsdom has no ClipboardEvent/DataTransfer: dispatch a plain paste event + // carrying a mock clipboardData whose only item is an image File. + const file = new File(["PNG"], "shot.png", { type: "image/png" }); + const paste = new Event("paste", { bubbles: true }); + Object.defineProperty(paste, "clipboardData", { + value: { + items: [{ kind: "file", type: "image/png", getAsFile: () => file }], + }, + }); + container.querySelector("textarea")?.dispatchEvent(paste); - const sendButton = screen.getByRole("button", { name: "Send" }); - await user.click(sendButton); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Remove image" })).toBeInTheDocument(); + }); - expect(onSend).toHaveBeenCalledTimes(1); - expect(onSend).toHaveBeenCalledWith("Hello world"); - expect(textarea).toHaveValue(""); - }); + await user.click(screen.getByRole("button", { name: "Send" })); - it("does not call onSend with empty text", async () => { - const onSend = vi.fn(); - const _user = userEvent.setup(); + expect(onSend).toHaveBeenCalledTimes(1); + const [, images] = onSend.mock.calls[0] ?? []; + expect(images).toHaveLength(1); + expect(images[0]?.url).toMatch(/^data:image\/png;base64,/); + expect(images[0]?.mimeType).toBe("image/png"); + }); - render(Composer, { props: { onSend } }); + it("lets a text paste proceed when no image is on the clipboard", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + const { container } = render(Composer, { props: { onSend } }); - const sendButton = screen.getByRole("button", { name: "Send" }); - expect(sendButton).toBeDisabled(); + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "hello"); - expect(onSend).not.toHaveBeenCalled(); - }); + // A text-only paste: no file items → the component must NOT preventDefault, + // so the default text paste path is unaffected (no image staged). + const paste = new Event("paste", { bubbles: true }); + Object.defineProperty(paste, "clipboardData", { + value: { items: [{ kind: "string", type: "text/plain" }] }, + }); + container.querySelector("textarea")?.dispatchEvent(paste); - it("trims whitespace before sending", async () => { - const onSend = vi.fn(); - const user = userEvent.setup(); + await new Promise((r) => setTimeout(r, 0)); + expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument(); + }); - render(Composer, { props: { onSend } }); + it("stages an image via the attach button's file picker", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + const { container } = render(Composer, { props: { onSend } }); - const textarea = screen.getByRole("textbox", { name: "Message input" }); - await user.type(textarea, " hello "); + const file = new File(["JPG"], "photo.jpg", { type: "image/jpeg" }); + const input = container.querySelector('input[type="file"]') as HTMLInputElement; + Object.defineProperty(input, "files", { value: [file], writable: false }); + input.dispatchEvent(new Event("change", { bubbles: true })); - const sendButton = screen.getByRole("button", { name: "Send" }); - await user.click(sendButton); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Remove image" })).toBeInTheDocument(); + }); - expect(onSend).toHaveBeenCalledWith("hello"); - }); + // Image-only send (no text): the Send button is enabled. + const send = screen.getByRole("button", { name: "Send" }); + expect(send).not.toBeDisabled(); + await user.click(send); - it("sends on Enter key (without Shift)", async () => { - const onSend = vi.fn(); - const user = userEvent.setup(); + expect(onSend).toHaveBeenCalledTimes(1); + const [text, images] = onSend.mock.calls[0] ?? []; + expect(text).toBe(""); + expect(images).toHaveLength(1); + expect(images[0]?.mimeType).toBe("image/jpeg"); + }); - render(Composer, { props: { onSend } }); + it("removes a staged image via the remove button", async () => { + const onSend = vi.fn(); + const user = userEvent.setup(); + const { container } = render(Composer, { props: { onSend } }); - const textarea = screen.getByRole("textbox", { name: "Message input" }); - await user.type(textarea, "Test message{Enter}"); + const file = new File(["PNG"], "shot.png", { type: "image/png" }); + const input = container.querySelector('input[type="file"]') as HTMLInputElement; + Object.defineProperty(input, "files", { value: [file], writable: false }); + input.dispatchEvent(new Event("change", { bubbles: true })); - expect(onSend).toHaveBeenCalledWith("Test message"); - }); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Remove image" })).toBeInTheDocument(); + }); + await user.click(screen.getByRole("button", { name: "Remove image" })); - it("does not send on Shift+Enter", async () => { - const onSend = vi.fn(); - const user = userEvent.setup(); + expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument(); + // With no text and no images, Send is disabled again. + expect(screen.getByRole("button", { name: "Send" })).toBeDisabled(); + }); - render(Composer, { props: { onSend } }); + it("ignores a non-image file chosen via the picker", async () => { + const onSend = vi.fn(); + const { container } = render(Composer, { props: { onSend } }); - const textarea = screen.getByRole("textbox", { name: "Message input" }); - await user.type(textarea, "Line 1{Shift>}{Enter}{/Shift}Line 2"); + const file = new File(["TXT"], "notes.txt", { type: "text/plain" }); + const input = container.querySelector('input[type="file"]') as HTMLInputElement; + Object.defineProperty(input, "files", { value: [file], writable: false }); + input.dispatchEvent(new Event("change", { bubbles: true })); - expect(onSend).not.toHaveBeenCalled(); - }); + // Give the async staging a chance; a non-image is skipped. + await new Promise((r) => setTimeout(r, 0)); + expect(screen.queryByRole("button", { name: "Remove image" })).not.toBeInTheDocument(); + }); + + it("queues (steers) text-only and never forwards images", async () => { + // While running, the Send button becomes "Queue"; steering is text-only. + const onQueue = vi.fn(); + const onSend = vi.fn(); + const user = userEvent.setup(); + const { container } = render(Composer, { props: { onSend, onQueue, status: "running" } }); + + const textarea = screen.getByRole("textbox", { name: "Message input" }); + await user.type(textarea, "steer here"); + + // Also stage an image — it must NOT be forwarded on a queue. + const file = new File(["PNG"], "shot.png", { type: "image/png" }); + const input = container.querySelector('input[type="file"]') as HTMLInputElement; + Object.defineProperty(input, "files", { value: [file], writable: false }); + input.dispatchEvent(new Event("change", { bubbles: true })); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Remove image" })).toBeInTheDocument(); + }); + + await user.click(screen.getByRole("button", { name: "Queue" })); + expect(onQueue).toHaveBeenCalledWith("steer here"); + expect(onSend).not.toHaveBeenCalled(); + }); }); describe("ModelSelector", () => { - it("renders the options and current selection", () => { - const models = ["openai/gpt-4", "anthropic/claude-3", "google/gemini"]; - render(ModelSelector, { - props: { models, selected: "anthropic/claude-3", onSelect: vi.fn() }, - }); - - const select = screen.getByRole("combobox", { name: "Model selector" }); - expect(select).toBeInTheDocument(); - expect(select).toHaveValue("anthropic/claude-3"); - - const options = screen.getAllByRole("option"); - expect(options).toHaveLength(3); - expect(options[0]).toHaveValue("openai/gpt-4"); - expect(options[1]).toHaveValue("anthropic/claude-3"); - expect(options[2]).toHaveValue("google/gemini"); - }); - - it("calls onSelect on change", async () => { - const onSelect = vi.fn(); - const user = userEvent.setup(); - const models = ["openai/gpt-4", "anthropic/claude-3"]; - - render(ModelSelector, { - props: { models, selected: "openai/gpt-4", onSelect }, - }); - - const select = screen.getByRole("combobox", { name: "Model selector" }); - await user.selectOptions(select, "anthropic/claude-3"); - - expect(onSelect).toHaveBeenCalledTimes(1); - expect(onSelect).toHaveBeenCalledWith("anthropic/claude-3"); - }); + const optionValues = (el: HTMLElement): string[] => + within(el) + .getAllByRole("option") + .map((o) => (o as HTMLOptionElement).value); + + it("renders a key selector (distinct keys) and a model selector (models for the current key)", () => { + const models = ["openai/gpt-4", "openai/gpt-4o", "anthropic/claude-3", "google/gemini"]; + render(ModelSelector, { + props: { models, selected: "anthropic/claude-3", onSelect: vi.fn() }, + }); + + const keySelect = screen.getByRole("combobox", { name: "Key selector" }); + const modelSelect = screen.getByRole("combobox", { name: "Model selector" }); + expect(keySelect).toHaveValue("anthropic"); + expect(modelSelect).toHaveValue("claude-3"); + + expect(optionValues(keySelect)).toEqual(["openai", "anthropic", "google"]); + // only the models under the selected key + expect(optionValues(modelSelect)).toEqual(["claude-3"]); + }); + + it("selecting a key switches to the first model under it", async () => { + const onSelect = vi.fn(); + const user = userEvent.setup(); + const models = ["openai/gpt-4", "openai/gpt-4o", "anthropic/claude-3"]; + + render(ModelSelector, { + props: { models, selected: "openai/gpt-4o", onSelect }, + }); + + await user.selectOptions(screen.getByRole("combobox", { name: "Key selector" }), "anthropic"); + + expect(onSelect).toHaveBeenCalledTimes(1); + expect(onSelect).toHaveBeenCalledWith("anthropic/claude-3"); + }); + + it("selecting a model keeps the current key", async () => { + const onSelect = vi.fn(); + const user = userEvent.setup(); + const models = ["openai/gpt-4", "openai/gpt-4o"]; + + render(ModelSelector, { + props: { models, selected: "openai/gpt-4", onSelect }, + }); + + await user.selectOptions(screen.getByRole("combobox", { name: "Model selector" }), "gpt-4o"); + + expect(onSelect).toHaveBeenCalledTimes(1); + expect(onSelect).toHaveBeenCalledWith("openai/gpt-4o"); + }); + + it("marks vision-capable models in the model dropdown", () => { + const models = ["kimi/k2", "kimi/k1.5"]; + const modelInfo = { + "kimi/k2": { vision: true }, + "kimi/k1.5": { vision: false }, + }; + render(ModelSelector, { + props: { models, selected: "kimi/k2", onSelect: vi.fn(), modelInfo }, + }); + + const modelSelect = screen.getByRole("combobox", { name: "Model selector" }); + const options = within(modelSelect).getAllByRole("option"); + expect(options).toHaveLength(2); + expect(options[0]?.textContent).toContain("vision"); + expect(options[1]?.textContent).not.toContain("vision"); + }); + + it("shows the vision indicator when the selected model is vision-capable", () => { + render(ModelSelector, { + props: { + models: ["kimi/k2"], + selected: "kimi/k2", + onSelect: vi.fn(), + modelInfo: { "kimi/k2": { vision: true } }, + }, + }); + expect(screen.getByText(/sees images natively/)).toBeInTheDocument(); + }); + + it("shows the vision-handoff hint when the selected model is non-vision", () => { + render(ModelSelector, { + props: { + models: ["umans/glm-5.2"], + selected: "umans/glm-5.2", + onSelect: vi.fn(), + modelInfo: { "umans/glm-5.2": { vision: false } }, + }, + }); + expect(screen.getByText(/auto-described/i)).toBeInTheDocument(); + expect(screen.queryByText(/sees images natively/)).not.toBeInTheDocument(); + }); + + it("shows the handoff hint when modelInfo is absent", () => { + render(ModelSelector, { + props: { models: ["openai/gpt-4"], selected: "openai/gpt-4", onSelect: vi.fn() }, + }); + expect(screen.getByText(/auto-described/i)).toBeInTheDocument(); + }); +}); + +describe("ReasoningEffortSelector", () => { + it("renders null (never set) as the default level, marked '(default)'", () => { + render(ReasoningEffortSelector, { props: { persisted: null, save: vi.fn() } }); + + const select = screen.getByRole("combobox", { name: "Reasoning effort" }); + expect(select).toHaveValue("high"); + expect(within(select).getByRole("option", { name: "high (default)" })).toBeInTheDocument(); + // All five ladder levels are offered. + expect(within(select).getAllByRole("option")).toHaveLength(5); + }); + + it("renders a persisted level as selected", () => { + render(ReasoningEffortSelector, { props: { persisted: "xhigh", save: vi.fn() } }); + + expect(screen.getByRole("combobox", { name: "Reasoning effort" })).toHaveValue("xhigh"); + }); + + it("selecting a level saves it via the injected port and confirms", async () => { + const save = vi.fn(async (level: "low" | "medium" | "high" | "xhigh" | "max") => ({ + ok: true as const, + reasoningEffort: level, + })); + const user = userEvent.setup(); + + render(ReasoningEffortSelector, { props: { persisted: null, save } }); + + await user.selectOptions(screen.getByRole("combobox", { name: "Reasoning effort" }), "max"); + + expect(save).toHaveBeenCalledTimes(1); + expect(save).toHaveBeenCalledWith("max"); + await vi.waitFor(() => { + expect(screen.getByText(/applies from the next turn/i)).toBeInTheDocument(); + }); + expect(screen.getByRole("combobox", { name: "Reasoning effort" })).toHaveValue("max"); + }); + + it("a failed save shows the error and reverts to the persisted value", async () => { + const save = vi.fn(async () => ({ ok: false as const, error: "nope" })); + const user = userEvent.setup(); + + render(ReasoningEffortSelector, { props: { persisted: "low", save } }); + + await user.selectOptions(screen.getByRole("combobox", { name: "Reasoning effort" }), "max"); + + await vi.waitFor(() => { + expect(screen.getByText("nope")).toBeInTheDocument(); + }); + expect(screen.getByRole("combobox", { name: "Reasoning effort" })).toHaveValue("low"); + }); + + it("disables the select while a save is in flight (no double-fire)", async () => { + let resolveSave: ((r: { ok: true; reasoningEffort: "max" }) => void) | undefined; + const save = vi.fn( + () => + new Promise<{ ok: true; reasoningEffort: "max" }>((resolve) => { + resolveSave = resolve; + }), + ); + const user = userEvent.setup(); + + render(ReasoningEffortSelector, { props: { persisted: null, save } }); + + await user.selectOptions(screen.getByRole("combobox", { name: "Reasoning effort" }), "max"); + + expect(screen.getByRole("combobox", { name: "Reasoning effort" })).toBeDisabled(); + + resolveSave?.({ ok: true, reasoningEffort: "max" }); + await vi.waitFor(() => { + expect(screen.getByRole("combobox", { name: "Reasoning effort" })).toBeEnabled(); + }); + }); }); diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte index cb6069b..e67ca5b 100644 --- a/src/features/chat/ui/ChatView.svelte +++ b/src/features/chat/ui/ChatView.svelte @@ -1,47 +1,368 @@ <script lang="ts"> - import type { RenderedChunk } from "../index"; + import type { TurnProviderRetryEvent } from "@dispatch/wire"; + import { groupRenderedChunks, resolveImageUrl, type RenderedChunk, viewProviderRetry } from "../index"; + import { + interleaveTurnMetrics, + viewCacheRate, + viewExpectedCache, + viewStepMetrics, + viewTurnMetrics, + type TurnMetricsEntry, + } from "../../../core/metrics"; + import { Markdown } from "../../markdown"; - let { chunks }: { chunks: readonly RenderedChunk[] } = $props(); + const badgeClass = { + success: "badge-success", + warning: "badge-warning", + error: "badge-error", + } as const; + + let { + chunks, + turnMetrics = [], + hasEarlier = false, + onShowEarlier, + thinkingKeyBase = 0, + providerRetry = null, + apiBaseUrl = "", + }: { + chunks: readonly RenderedChunk[]; + turnMetrics?: readonly TurnMetricsEntry[]; + /** Earlier history is unloaded (chat limit) and can be paged back in. */ + hasEarlier?: boolean; + /** Page earlier history back in; the caller owns scroll-position preservation. */ + onShowEarlier?: () => Promise<void>; + /** + * Ordinal base for thinking-collapse keys: the count of thinking chunks + * unloaded by the chat limit, so the remaining ordinals don't shift (and + * swap collapse state) when a trim removes older thinking blocks. + */ + thinkingKeyBase?: number; + /** + * The latest `provider-retry` event for the current turn, or `null` when + * no retry is pending → renders the transient yellow "retrying…" banner. + * Never persisted (never part of the message history); coalesces to the + * newest attempt + delay, and is cleared when content resumes / turn ends. + */ + providerRetry?: TurnProviderRetryEvent | null; + /** + * The HTTP API base URL (e.g. `http://localhost:24203`). Persisted image + * chunks carry a compact relative path (`/images/<conv>/<uuid>.png`); this + * base is prepended to render them. The optimistic echo's data URL and any + * absolute URL pass through unchanged (see `resolveImageUrl`). Defaults to + * "" (root-relative — a browser resolves `/images/…` against its origin). + */ + apiBaseUrl?: string; + } = $props(); + + // True while a show-earlier page-in is awaited (disables the button). + let loadingEarlier = $state(false); + + async function showEarlier() { + if (!onShowEarlier || loadingEarlier) return; + loadingEarlier = true; + try { + await onShowEarlier(); + } finally { + loadingEarlier = false; + } + } + + const groups = $derived(groupRenderedChunks(chunks)); + + const rows = $derived(interleaveTurnMetrics(groups, turnMetrics)); + + // Stable per-row keys. Thinking blocks get an ordinal key (`think<n>`) that + // survives the provisional→committed (seq null → seq N) transition, so the + // collapse's open/close state is NOT lost when a turn seals. The ordinal + // starts at `thinkingKeyBase` so keys also survive a chat-limit trim removing + // older thinking blocks. (App isolates these keys per conversation via {#key}.) + const keyedRows = $derived.by(() => { + let thinking = thinkingKeyBase; + return rows.map((row, i) => { + if (row.kind === "step-metrics") { + return { row, key: `s${row.step.stepId}` }; + } + if (row.kind === "turn-metrics") { + return { row, key: `m${row.turn.turnId}` }; + } + const group = row.group; + let key: string; + if (group.kind === "tool-batch") { + key = `b${group.stepId}`; + } else if (group.chunk.chunk.type === "thinking") { + key = `think${thinking++}`; + } else if (group.chunk.seq != null) { + key = `c${group.chunk.seq}`; + } else { + key = `p${i}`; + } + return { row, key }; + }); + }); </script> -<div class="flex flex-col gap-2 p-4" role="log" aria-live="polite"> - {#each chunks as rendered, i (rendered.seq != null ? `c${rendered.seq}` : `p${i}`)} - <div class="chat {rendered.role === 'user' ? 'chat-start' : 'chat-end'}"> - <div class="chat-header text-xs opacity-70">{rendered.role}</div> - <div - class="chat-bubble" - class:chat-bubble-primary={rendered.role === "user"} - class:chat-bubble-secondary={rendered.role === "assistant"} - class:opacity-50={rendered.provisional} - > - {#if rendered.chunk.type === "text"} - <p>{rendered.chunk.text}</p> - {:else if rendered.chunk.type === "thinking"} - <details> - <summary>Thinking</summary> - <p>{rendered.chunk.text}</p> - </details> - {:else if rendered.chunk.type === "tool-call"} - <div class="text-sm"> - <strong>{rendered.chunk.toolName}</strong> - <pre class="text-xs mt-1">{JSON.stringify(rendered.chunk.input, null, 2)}</pre> - </div> - {:else if rendered.chunk.type === "tool-result"} - <div class="text-sm" class:text-error={rendered.chunk.isError}> - <strong>{rendered.chunk.toolName}</strong> - <pre class="text-xs mt-1">{rendered.chunk.content}</pre> - </div> - {:else if rendered.chunk.type === "error"} - <div class="text-error" role="alert"> - {rendered.chunk.message} - {#if rendered.chunk.code} - <span class="text-xs opacity-70">[{rendered.chunk.code}]</span> - {/if} - </div> - {:else if rendered.chunk.type === "system"} - <div class="text-sm opacity-70">{rendered.chunk.text}</div> - {/if} - </div> - </div> - {/each} +{#snippet chunkRow(rendered: RenderedChunk)} + {#if rendered.role === "user"} + <!-- User: a speech bubble, left-aligned. A user message may be multi-chunk + ([text, image, image, …]); each chunk renders in its own bubble. A + persisted image chunk's url is a compact relative path (`/images/…`) + served by the backend — resolve it against the API base. The + optimistic echo's data URL (and any absolute URL) passes through. --> + <div class="chat chat-start"> + <div class="chat-bubble chat-bubble-primary"> + {#if rendered.chunk.type === "text"} + <p>{rendered.chunk.text}</p> + {:else if rendered.chunk.type === "image"} + <img + src={resolveImageUrl(rendered.chunk.url, apiBaseUrl)} + alt={rendered.chunk.mimeType ?? "pasted image"} + loading="lazy" + decoding="async" + class="max-h-80 max-w-full rounded" + /> + {/if} + </div> + </div> + {:else if rendered.chunk.type === "thinking"} + <!-- Thinking: a visible bubble (like tool cards), holding a checkbox collapse + (no arrow icon, smooth open/close). Title reads "Thinking" + loading dots + while generating, then "Thoughts" with no dots once complete. --> + <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0"> + <div class="chat-bubble w-full bg-transparent"> + <div class="collapse w-full rounded-box bg-base-200 text-sm"> + <input type="checkbox" aria-label="Toggle thoughts" /> + <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium"> + <span>{rendered.streaming ? "Thinking" : "Thoughts"}</span> + {#if rendered.streaming} + <span class="loading loading-dots loading-sm" aria-label="Generating"></span> + {/if} + </div> + <div class="collapse-content"> + <p class="whitespace-pre-wrap">{rendered.chunk.text}</p> + </div> + </div> + </div> + </div> + {:else if rendered.chunk.type === "tool-call" || rendered.chunk.type === "tool-result"} + <!-- Single tool call/result: a collapsible card (collapsed by default, + like thinking). Title shows the tool name; content shows the + input/output. Same chat-start grid shim as the thinking block. --> + <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0"> + <div class="chat-bubble w-full bg-transparent"> + {#if rendered.chunk.type === "tool-call"} + <div class="collapse w-full rounded-box bg-base-200 text-sm"> + <input type="checkbox" aria-label="Toggle tool call" /> + <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium"> + <svg + class="h-4 w-4 opacity-60" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + ><path + d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" + /></svg + > + <span>{rendered.chunk.toolName}</span> + </div> + <div class="collapse-content"> + <pre class="overflow-x-auto text-xs">{JSON.stringify( + rendered.chunk.input, + null, + 2, + )}</pre> + </div> + </div> + {:else} + <div class="collapse w-full rounded-box bg-base-200 text-sm"> + <input type="checkbox" aria-label="Toggle tool result" /> + <div + class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium" + class:text-error={rendered.chunk.isError} + > + <svg + class="h-4 w-4 opacity-60" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + ><path + d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" + /></svg + > + <span>{rendered.chunk.toolName}</span> + {#if rendered.chunk.isError} + <span class="badge badge-error badge-xs">error</span> + {/if} + </div> + <div class="collapse-content"> + <pre class="max-h-96 overflow-auto text-xs">{rendered.chunk.content}</pre> + </div> + </div> + {/if} + </div> + </div> + {:else} + <!-- Assistant text / system / error: an INVISIBLE speech bubble — same + chat-start grid as the user bubble, so it inherits identical left spacing. --> + <div class="chat chat-start [&>.chat-bubble]:max-w-5xl"> + <div class="chat-bubble w-full bg-transparent"> + {#if rendered.chunk.type === "text"} + <Markdown text={rendered.chunk.text} streaming={rendered.streaming ?? false} /> + {:else if rendered.chunk.type === "error"} + <div class="text-error" role="alert"> + {rendered.chunk.message} + {#if rendered.chunk.code} + <span class="text-xs opacity-70">[{rendered.chunk.code}]</span> + {/if} + </div> + {:else if rendered.chunk.type === "system"} + <div class="text-sm opacity-70">{rendered.chunk.text}</div> + {/if} + </div> + </div> + {/if} +{/snippet} + +<div class="flex flex-col gap-2 pt-4 pb-4 pl-6" role="log" aria-live="polite"> + {#if hasEarlier && onShowEarlier} + <!-- Chat limit: older chunks are unloaded; offer to page them back in. --> + <div class="flex justify-center"> + <button class="btn btn-ghost btn-xs" disabled={loadingEarlier} onclick={showEarlier}> + {#if loadingEarlier} + <span class="loading loading-spinner loading-xs" aria-hidden="true"></span> + Loading earlier messages… + {:else} + Show earlier messages + {/if} + </button> + </div> + {/if} + {#each keyedRows as { row, key } (key)} + {#if row.kind === "step-metrics"} + {@const sv = viewStepMetrics(row.step, row.index)} + <div class="chat chat-start"> + <div class="chat-bubble w-full max-w-5xl bg-transparent p-0"> + <div class="text-xs opacity-70"> + {sv.label} · {sv.tokensLabel} + {#if sv.tps} + · {sv.tps}{/if} + {#if sv.genTotal} + · {sv.genTotal}{/if} + </div> + </div> + </div> + {:else if row.kind === "turn-metrics"} + {@const turnView = viewTurnMetrics(row.turn, row.turnNumber)} + {@const lastCache = viewCacheRate(row.turn.usage)} + {@const chatCache = viewCacheRate(row.cumulativeUsage)} + {@const retention = viewExpectedCache(row.turn.usage, row.prevTurnUsage)} + <div class="chat chat-start"> + <div class="chat-bubble w-full max-w-5xl bg-transparent p-0"> + <div class="flex flex-col gap-1 text-xs"> + <div class="opacity-70"> + {turnView.label} · {turnView.tokensLabel} ({turnView.breakdown}) + {#if turnView.tps} + · {turnView.tps}{/if} + {#if turnView.duration} + · {turnView.duration}{/if} + </div> + <div class="flex flex-wrap items-center gap-x-3 gap-y-1"> + <span class="flex items-center gap-1"> + <span class="opacity-70">Last turn:</span> + <span class="badge badge-sm {badgeClass[lastCache.level]}">{lastCache.pct}%</span> + </span> + <span class="flex items-center gap-1"> + <span class="opacity-70">Chat Total:</span> + <span class="badge badge-sm {badgeClass[chatCache.level]}">{chatCache.pct}%</span> + </span> + {#if retention} + <span class="flex items-center gap-1"> + <span class="opacity-70">Retention:</span> + <span class="badge badge-sm {badgeClass[retention.level]}">{retention.pct}%</span> + </span> + {/if} + </div> + </div> + </div> + </div> + {:else if row.group.kind === "single"} + {@render chunkRow(row.group.chunk)} + {:else} + <!-- Batched tool calls (one step): each entry is a collapsible card. + Click to expand and see the input/output. --> + <div class="chat chat-start [&>.chat-bubble]:max-w-5xl [&>.chat-bubble]:p-0"> + <div class="chat-bubble w-full bg-transparent"> + <div class="flex flex-col gap-1"> + {#each row.group.entries as entry (entry.call.toolCallId)} + <div class="collapse w-full rounded-box bg-base-200 text-sm"> + <input type="checkbox" aria-label="Toggle tool call" /> + <div class="collapse-title flex min-h-0 items-center gap-2 py-2 font-medium"> + <svg + class="h-4 w-4 opacity-60" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + ><path + d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" + /></svg + > + <span>{entry.call.toolName}</span> + {#if entry.result?.isError} + <span class="badge badge-error badge-xs">error</span> + {:else if entry.result === null} + <span class="loading loading-spinner loading-xs" aria-label="Running"></span> + {/if} + </div> + <div class="collapse-content"> + <pre class="overflow-x-auto text-xs">{JSON.stringify( + entry.call.input, + null, + 2, + )}</pre> + {#if entry.result} + <pre + class="mt-1 max-h-96 overflow-auto text-xs" + class:text-error={entry.result.isError}>{entry.result.content}</pre> + {/if} + </div> + </div> + {/each} + </div> + </div> + </div> + {/if} + {/each} + {#if providerRetry} + {@const rv = viewProviderRetry(providerRetry)} + <!-- Transient yellow warning: a provider error is being retried with backoff. + NOT a message chunk (never persisted/replayed) — a live UI notification only, + shown where the reply would appear. Coalesces to the newest attempt + delay, + and is cleared (foldEvent) when content resumes or the turn ends. --> + <div class="chat chat-start [&>.chat-bubble]:max-w-5xl"> + <div class="chat-bubble w-full bg-transparent"> + <div class="alert alert-warning flex-wrap items-start gap-2 py-2 text-sm" role="status"> + <div class="flex flex-wrap items-center gap-2 font-medium"> + <span aria-hidden="true">⚠</span> + <span>{rv.attemptLabel} — retrying in {rv.delayLabel}…</span> + {#if rv.code} + <span class="badge badge-warning badge-sm font-mono">{rv.code}</span> + {/if} + </div> + <div class="w-full font-mono text-xs opacity-70">{rv.message}</div> + </div> + </div> + </div> + {/if} </div> diff --git a/src/features/chat/ui/CompactionView.svelte b/src/features/chat/ui/CompactionView.svelte new file mode 100644 index 0000000..5014e5c --- /dev/null +++ b/src/features/chat/ui/CompactionView.svelte @@ -0,0 +1,154 @@ +<script lang="ts"> + export type CompactNowResult = + | { readonly ok: true; readonly messagesSummarized: number; readonly messagesKept: number } + | { readonly ok: false; readonly error: string }; + + export type SaveCompactPercentResult = + | { readonly ok: true; readonly percent: number } + | { readonly ok: false; readonly error: string }; + + let { + percent, + canCompact, + compactNow, + savePercent, + }: { + /** The conversation's auto-compact percent (0-100), or null when not yet fetched. 0 = disabled. */ + percent: number | null; + /** Whether a real conversation is focused (a draft has nothing to compact). */ + canCompact: boolean; + compactNow: () => Promise<CompactNowResult | null>; + savePercent: (percent: number) => Promise<SaveCompactPercentResult | null>; + } = $props(); + + const DEFAULT_PERCENT = 85; + + let compacting = $state(false); + let compactError = $state<string | null>(null); + let compactResult = $state<{ summarized: number; kept: number } | null>(null); + + let percentInput = $state(""); + let savingPercent = $state(false); + let percentError = $state<string | null>(null); + let percentSaved = $state(false); + + // Sync the input from the prop when it changes (focus switch / initial load). + let lastPercent = $state<number | null>(null); + $effect(() => { + if (percent !== lastPercent) { + lastPercent = percent; + percentInput = percent !== null ? String(percent) : ""; + percentError = null; + percentSaved = false; + } + }); + + const percentLabel = $derived( + percent == null + ? "Loading…" + : percent === 0 + ? "Disabled (manual only)" + : percent === DEFAULT_PERCENT + ? `${percent}% (default)` + : `${percent}%`, + ); + + async function handleCompact() { + if (compacting || !canCompact) return; + compacting = true; + compactError = null; + compactResult = null; + const result = await compactNow(); + compacting = false; + if (result === null) return; + if (result.ok) { + compactResult = { summarized: result.messagesSummarized, kept: result.messagesKept }; + } else { + compactError = result.error; + } + } + + async function handleSavePercent() { + const value = Number.parseInt(percentInput, 10); + if (Number.isNaN(value) || value < 0 || value > 100) { + percentError = "Must be 0-100"; + return; + } + savingPercent = true; + percentError = null; + percentSaved = false; + const result = await savePercent(value); + savingPercent = false; + if (result === null) return; + if (result.ok) { + percentSaved = true; + } else { + percentError = result.error; + } + } +</script> + +<div class="flex flex-col gap-3"> + <!-- Manual compaction --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Manual compaction</span> + <button + type="button" + class="btn btn-sm btn-outline" + disabled={!canCompact || compacting} + onclick={handleCompact} + > + {#if compacting} + <span class="loading loading-spinner loading-xs"></span> + Compacting… + {:else} + Compact now + {/if} + </button> + {#if !canCompact} + <p class="text-xs opacity-60">Open or start a conversation to compact its history.</p> + {:else if compactError} + <p class="text-xs text-error">{compactError}</p> + {:else if compactResult} + <p class="text-xs text-success"> + Compacted — {compactResult.summarized} messages summarized, {compactResult.kept} kept. + </p> + {:else} + <p class="text-xs opacity-50"> + Summarizes old messages into a system summary + retains the most recent messages. + </p> + {/if} + </section> + + <!-- Auto-compact percent --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Auto-compact percent</span> + <div class="flex items-center gap-2"> + <input + type="number" + class="input input-bordered input-sm w-24" + min="0" + max="100" + placeholder={String(DEFAULT_PERCENT)} + value={percentInput} + disabled={savingPercent} + onchange={handleSavePercent} + aria-label="Compact percent (0-100)" + /> + <span class="text-xs opacity-60">%</span> + {#if savingPercent} + <span class="loading loading-spinner loading-xs"></span> + {/if} + </div> + <p class="text-xs opacity-50"> + Current: {percentLabel} + <br /> + 0 disables auto-compact. Default is {DEFAULT_PERCENT}%. + </p> + {#if percentError} + <p class="text-xs text-error">{percentError}</p> + {:else if percentSaved} + <p class="text-xs text-success">Saved.</p> + {/if} + </section> +</div> diff --git a/src/features/chat/ui/Composer.svelte b/src/features/chat/ui/Composer.svelte index 3762340..04c28cd 100644 --- a/src/features/chat/ui/Composer.svelte +++ b/src/features/chat/ui/Composer.svelte @@ -1,33 +1,413 @@ <script lang="ts"> - let { onSend }: { onSend: (text: string) => void } = $props(); - - let text = $state(""); - - function handleSubmit(): void { - const trimmed = text.trim(); - if (trimmed.length === 0) return; - onSend(trimmed); - text = ""; - } - - function handleKeydown(e: KeyboardEvent): void { - if (e.key === "Enter" && !e.shiftKey) { - e.preventDefault(); - handleSubmit(); - } - } + import type { ImageInput } from "@dispatch/wire"; + import { computeContextUsage, formatCompactTokens } from "../../../core/metrics"; + + const FALLBACK_CONTEXT_WINDOW = 1_000_000; + const MAX_LINES = 7; + /** Accept only raster images (the provider image-content formats). */ + const IMAGE_ACCEPT = "image/png,image/jpeg,image/gif,image/webp"; + /** Reject images larger than this before base64-encoding (keeps payloads sane). */ + const MAX_IMAGE_BYTES = 8 * 1024 * 1024; + + /** A staged image awaiting send: a stable id + the `ImageInput` to forward. */ + interface StagedImage { + readonly id: string; + readonly input: ImageInput; + } + + let { + onSend, + onQueue, + onStop, + contextSize = undefined, + contextWindow = undefined, + status = "idle", + }: { + /** + * Send a message (start a turn via `chat.send`). Carries any staged images + * as `ImageInput[]` (base64 data URLs or https URLs); the store forwards + * them on the WS `chat.send` op / `POST /chat` body. `images` is omitted + * (not an empty array) when none are staged, so the wire stays text-only. + */ + onSend: (text: string, images?: ImageInput[]) => void; + /** + * Enqueue a steering message (`chat.queue`). When provided AND the status + * is `running`, the send button becomes a "Queue" button that steers the + * in-flight turn instead of starting a new one. Steering is text-only — + * it never carries images (a mid-turn injection has no image surface). + */ + onQueue?: (text: string) => void; + /** Stop the in-flight generation (`POST /conversations/:id/stop`). */ + onStop?: () => void; + // Current context occupancy — updated progressively during a turn (the + // latest step's input+output) and finalized to the turn's `contextSize` on + // seal, or `undefined` when unknown — the status bar then shows + // "— tokens", never 0%. + contextSize?: number | undefined; + /** Per-model context window (max tokens) from `GET /models` modelInfo. */ + contextWindow?: number | undefined; + /** + * Coarse agent status for the status-bar icon. `queued` = the turn is in + * flight but waiting for a concurrency slot (CR-13) — shown as a loading + * RING (vs the loading DOTS of `running`/actively generating). Behaves like + * `running` for the send button (steer/stop). + */ + status?: ComposerStatus; + } = $props(); + + export type ComposerStatus = "idle" | "running" | "queued" | "error"; + + let text = $state(""); + let images = $state<StagedImage[]>([]); + let inputEl: HTMLTextAreaElement | undefined; + let fileInputEl: HTMLInputElement | undefined; + let dragOver = $state(false); + + const hasText = $derived(text.trim().length > 0); + const hasImages = $derived(images.length > 0); + const canSend = $derived(hasText || hasImages); + const effectiveMax = $derived(contextWindow ?? FALLBACK_CONTEXT_WINDOW); + const usage = $derived(computeContextUsage(contextSize, effectiveMax)); + + // One button, three modes: + // - idle → "Send" (starts a turn via chat.send) + // - running/queued + text → "Queue" (steers via chat.queue — text only) + // - running/queued + empty → "Stop" (aborts via POST /stop) + // (`queued` behaves like `running` — the turn is in flight, just waiting for a + // concurrency slot; the user can still steer or stop it.) + // Steering never carries images: when running with images staged but no text, + // the images stay staged (queue is text-only). Images-without-text while running + // is an unusual case that still sends (the server auto-starts/resolves). + const inFlight = $derived(status === "running" || status === "queued"); + const buttonMode = $derived.by<"send" | "queue" | "stop">(() => { + if (inFlight && !hasText && !hasImages && onStop !== undefined) return "stop"; + if (inFlight && hasText && onQueue !== undefined) return "queue"; + return "send"; + }); + const placeholder = $derived( + status === "queued" + ? "Queued for a slot…" + : status === "running" + ? "Steer the conversation..." + : "Type a message, paste or drop an image…", + ); + + // As the window fills, escalate color: calm → warning → danger. + function fillClass(pct: number): string { + if (pct >= 90) return "progress-error"; + if (pct >= 70) return "progress-warning"; + return "progress-success"; + } + + function resize(): void { + const el = inputEl; + if (!el) return; + el.style.height = "auto"; + const style = getComputedStyle(el); + const lineHeight = Number.parseFloat(style.lineHeight) || 20; + const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom); + const borderY = + Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth); + const maxHeight = lineHeight * MAX_LINES + paddingY + borderY; + const next = Math.min(el.scrollHeight, maxHeight); + el.style.height = `${next}px`; + el.style.overflowY = el.scrollHeight > maxHeight ? "auto" : "hidden"; + } + + // Re-run resize whenever the value changes (covers programmatic clears too). + $effect(() => { + void text; + resize(); + }); + + /** Read a File into a base64 data URL (`data:image/…;base64,…`). */ + function fileToDataUrl(file: File): Promise<string> { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => { + if (typeof reader.result === "string") resolve(reader.result); + else reject(new Error("unreadable image")); + }; + reader.onerror = () => reject(reader.error ?? new Error("read failed")); + reader.readAsDataURL(file); + }); + } + + let imgSeq = 0; + /** Stage a File as an image (skip non-images / oversized). Returns whether staged. */ + async function stageFile(file: File): Promise<boolean> { + if (!file.type.startsWith("image/")) return false; + if (file.size > MAX_IMAGE_BYTES) return false; + const url = await fileToDataUrl(file); + // Prefer the file's declared MIME; fall back to the data URL's prefix. + const mimeType = file.type || undefined; + const id = `img-${Date.now()}-${imgSeq++}`; + images = [...images, { id, input: { url, ...(mimeType ? { mimeType } : {}) } }]; + return true; + } + + function removeImage(id: string): void { + images = images.filter((img) => img.id !== id); + } + + /** Handle a paste anywhere in the form: extract image items from the clipboard. */ + async function handlePaste(e: ClipboardEvent): Promise<void> { + const items = e.clipboardData?.items; + if (items === undefined) return; + let hadImage = false; + const staged: File[] = []; + for (const item of items) { + if (item.kind === "file" && item.type.startsWith("image/")) { + const file = item.getAsFile(); + if (file !== null) { + staged.push(file); + hadImage = true; + } + } + } + if (!hadImage) return; // let the default text paste proceed + e.preventDefault(); // suppress pasting the image as a filename string + for (const file of staged) { + await stageFile(file); + } + } + + /** File-picker <input type="file"> change. */ + async function handleFilePick(e: Event): Promise<void> { + const target = e.currentTarget as HTMLInputElement; + const files = target.files; + if (files === null) return; + for (const file of files) { + await stageFile(file); + } + target.value = ""; // reset so picking the same file again re-fires change + } + + /** Drop images onto the composer. */ + async function handleDrop(e: DragEvent): Promise<void> { + dragOver = false; + const files = e.dataTransfer?.files; + if (files === undefined || files.length === 0) return; + const hadImage = Array.from(files).some((f) => f.type.startsWith("image/")); + if (!hadImage) return; + e.preventDefault(); + for (const file of files) { + await stageFile(file); + } + } + + function handleSubmit(): void { + const trimmed = text.trim(); + // Allow a send with images even when text is empty (an image-only turn). + if (trimmed.length === 0 && !hasImages) return; + if (buttonMode === "queue") { + // Steering is text-only — never forward images. + onQueue?.(trimmed); + } else { + const toSend: ImageInput[] | undefined = hasImages + ? images.map((img) => img.input) + : undefined; + onSend(trimmed, toSend); + } + text = ""; + images = []; + } + + function handleKeydown(e: KeyboardEvent): void { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSubmit(); + } + } </script> -<form class="flex gap-2 p-4" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}> - <textarea - class="textarea textarea-bordered flex-1" - bind:value={text} - onkeydown={handleKeydown} - placeholder="Type a message..." - rows="3" - aria-label="Message input" - ></textarea> - <button class="btn btn-primary" type="submit" disabled={text.trim().length === 0}> - Send - </button> +<form + class="flex flex-col" + onsubmit={(e) => { + e.preventDefault(); + handleSubmit(); + }} + ondrop={handleDrop} + ondragover={(e) => { + if (e.dataTransfer?.types?.includes("Files")) { + e.preventDefault(); + dragOver = true; + } + }} + ondragleave={() => (dragOver = false)} +> + <!-- Top bar: expanding textarea + image-attach button + single context-aware button --> + <div class="flex items-end gap-2 px-4 pt-3 pb-2"> + <div + class="flex-1" + onpaste={handlePaste} + class:border-2={dragOver} + class:border-primary={dragOver} + class:border-dashed={dragOver} + class:rounded={dragOver} + > + <textarea + bind:this={inputEl} + class="textarea textarea-bordered w-full resize-none leading-normal !min-h-0 h-auto" + bind:value={text} + onkeydown={handleKeydown} + {placeholder} + rows="1" + aria-label="Message input"></textarea> + </div> + + <!-- Hidden file picker (images only; multiple). --> + <input + bind:this={fileInputEl} + type="file" + accept={IMAGE_ACCEPT} + multiple + class="hidden" + onchange={handleFilePick} + /> + <!-- Attach image button (opens the file picker). --> + <button + class="btn btn-ghost btn-square shrink-0" + type="button" + aria-label="Attach image" + title="Attach image" + onclick={() => fileInputEl?.click()} + > + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="h-5 w-5" + > + <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> + <circle cx="8.5" cy="8.5" r="1.5"></circle> + <polyline points="21 15 16 10 5 21"></polyline> + </svg> + </button> + + {#if buttonMode === "stop"} + <button + class="btn btn-error w-20 shrink-0" + type="button" + aria-label="Stop generation" + onclick={() => onStop?.()} + > + Stop + </button> + {:else} + <button class="btn btn-primary w-20 shrink-0" type="submit" disabled={!canSend}> + {buttonMode === "queue" ? "Queue" : "Send"} + </button> + {/if} + </div> + + <!-- Staged image thumbnails (previews) with remove buttons. --> + {#if hasImages} + <div class="flex flex-wrap gap-2 px-4 pb-1"> + {#each images as img (img.id)} + <div class="group relative h-20 w-20 shrink-0 overflow-hidden rounded border border-base-300"> + <img + src={img.input.url} + alt={img.input.mimeType ?? "staged image"} + class="h-full w-full object-cover" + /> + <button + class="btn btn-circle btn-xs absolute right-0 top-0 bg-base-100/80 hover:bg-error hover:text-error-content" + type="button" + aria-label="Remove image" + onclick={() => removeImage(img.id)} + > + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round" + class="h-3 w-3" + > + <line x1="18" y1="6" x2="6" y2="18"></line> + <line x1="6" y1="6" x2="18" y2="18"></line> + </svg> + </button> + </div> + {/each} + </div> + {/if} + + <!-- Bottom status bar: status icon · context-window fill · token count --> + <div class="flex items-center gap-2 px-4 pb-2 text-xs text-base-content/50"> + <span class="shrink-0"> + {#if status === "queued"} + <!-- Waiting for a concurrency slot — a ring (vs the dots of `running`). --> + <span + class="loading loading-ring loading-xs text-primary" + aria-label="Queued" + title="Waiting for a concurrency slot" + ></span> + {:else if status === "running"} + <span class="loading loading-dots loading-xs text-primary"></span> + {:else if status === "error"} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-error" + aria-label="Error" + > + <circle cx="12" cy="12" r="10"></circle> + <line x1="12" y1="8" x2="12" y2="12"></line> + <line x1="12" y1="16" x2="12.01" y2="16"></line> + </svg> + {:else} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2.5" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-success" + aria-label="Idle" + > + <polyline points="20 6 9 17 4 12"></polyline> + </svg> + {/if} + </span> + + {#if usage.percent !== null} + <progress + class="progress h-2 flex-1 {fillClass(usage.percent)}" + value={usage.percent} + max="100" + ></progress> + {:else} + <progress class="progress h-2 flex-1 opacity-40" value="0" max="100"></progress> + {/if} + + <span class="shrink-0 whitespace-nowrap font-mono"> + {#if usage.current !== null} + {formatCompactTokens(usage.current)}{#if usage.max !== null}<span + class="text-base-content/40" + > + / {formatCompactTokens(usage.max)}</span + >{/if} + {#if usage.percent !== null} + <span class="ml-1">· {usage.percent.toFixed(1)}%</span> + {/if} + {:else} + <span class="text-base-content/40">— tokens</span> + {/if} + </span> + </div> </form> diff --git a/src/features/chat/ui/ModelSelector.svelte b/src/features/chat/ui/ModelSelector.svelte index 3e25ec3..11b9feb 100644 --- a/src/features/chat/ui/ModelSelector.svelte +++ b/src/features/chat/ui/ModelSelector.svelte @@ -1,22 +1,92 @@ <script lang="ts"> - let { - models, - selected, - onSelect, - }: { - models: readonly string[]; - selected: string; - onSelect: (model: string) => void; - } = $props(); + import type { ModelMetadata } from "@dispatch/transport-contract"; + import { isVisionModel, joinModelName, modelKeys, modelsForKey, splitModelName } from "../model-select"; + + let { + models, + selected, + onSelect, + modelInfo = {}, + }: { + models: readonly string[]; + selected: string; + onSelect: (model: string) => void; + /** + * Per-model metadata from `GET /models` (`{ [name]: ModelMetadata }`). + * Used to show a "vision" badge next to models with `vision: true` (they + * natively accept images; others rely on the server's vision handoff). + * Optional — absent metadata → no badge (treated as non-vision). + */ + modelInfo?: Readonly<Record<string, ModelMetadata>>; + } = $props(); + + const keys = $derived(modelKeys(models)); + const current = $derived(splitModelName(selected)); + const keyModels = $derived(modelsForKey(models, current.key)); + + // Whether the currently-selected full model name is vision-capable. + const selectedVision = $derived(isVisionModel(modelInfo, selected)); + + // Switching key jumps to the first model available under it. + function selectKey(key: string): void { + const first = modelsForKey(models, key)[0] ?? ""; + onSelect(joinModelName(key, first)); + } + + function selectModel(model: string): void { + onSelect(joinModelName(current.key, model)); + } + + // The full `<key>/<model>` name for a model suffix under the current key. + function fullNameFor(modelSuffix: string): string { + return joinModelName(current.key, modelSuffix); + } </script> -<select - class="select" - value={selected} - onchange={(e) => onSelect(e.currentTarget.value)} - aria-label="Model selector" -> - {#each models as model (model)} - <option value={model}>{model}</option> - {/each} -</select> +<div class="flex flex-col gap-2"> + <select + class="select w-full" + value={current.key} + onchange={(e) => selectKey(e.currentTarget.value)} + aria-label="Key selector" + > + {#each keys as key (key)} + <option value={key}>{key}</option> + {/each} + </select> + <select + class="select w-full" + value={current.model} + onchange={(e) => selectModel(e.currentTarget.value)} + aria-label="Model selector" + > + {#each keyModels as model (model)} + <option value={model}> + {model}{#if isVisionModel(modelInfo, fullNameFor(model))} · vision{/if} + </option> + {/each} + </select> + {#if selectedVision} + <div class="flex items-center gap-1 text-xs text-base-content/60"> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + class="h-3.5 w-3.5" + aria-hidden="true" + > + <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path> + <circle cx="12" cy="12" r="3"></circle> + </svg> + <span>Vision — this model sees images natively</span> + </div> + {:else} + <div class="text-xs text-base-content/40"> + Pasted images are auto-described (vision handoff) + </div> + {/if} +</div> diff --git a/src/features/chat/ui/ReasoningEffortSelector.svelte b/src/features/chat/ui/ReasoningEffortSelector.svelte new file mode 100644 index 0000000..d982905 --- /dev/null +++ b/src/features/chat/ui/ReasoningEffortSelector.svelte @@ -0,0 +1,75 @@ +<script lang="ts"> + import type { ReasoningEffort } from "@dispatch/transport-contract"; + import { + effectiveEffort, + effortOptions, + isReasoningEffort, + type SaveReasoningEffort, + } from "../reasoning-effort"; + + let { + persisted, + save, + }: { + /** The conversation's persisted level, or null when never set (default applies). */ + persisted: ReasoningEffort | null; + save: SaveReasoningEffort; + } = $props(); + + const options = effortOptions(); + + // The user's in-flight choice; null = mirror the (async-loaded) persisted prop. + // Re-mounted per conversation, so there is no cross-tab bleed. + let chosen = $state<ReasoningEffort | null>(null); + let saving = $state(false); + let error = $state<string | null>(null); + let justSaved = $state(false); + + const selected = $derived(chosen ?? effectiveEffort(persisted)); + + async function handleChange(value: string) { + if (!isReasoningEffort(value) || saving) return; + chosen = value; + saving = true; + error = null; + justSaved = false; + const result = await save(value); + saving = false; + if (result === null) return; + if (result.ok) { + justSaved = true; + } else { + error = result.error; + chosen = null; // revert to the persisted value + } + } +</script> + +<div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Reasoning effort</span> + <div class="flex items-center gap-2"> + <select + class="select select-sm w-full" + value={selected} + disabled={saving} + onchange={(e) => handleChange(e.currentTarget.value)} + aria-label="Reasoning effort" + > + {#each options as option (option.value)} + <option value={option.value}>{option.label}</option> + {/each} + </select> + {#if saving} + <span class="loading loading-spinner loading-xs" aria-label="Saving reasoning effort"></span> + {/if} + </div> + {#if error} + <p class="text-xs text-error">{error}</p> + {:else if justSaved} + <p class="text-xs text-success">Saved — applies from the next turn.</p> + {:else} + <p class="text-xs opacity-50"> + How long the model thinks before answering. Changing it can re-prefill the prompt cache once. + </p> + {/if} +</div> diff --git a/src/features/computer/index.ts b/src/features/computer/index.ts new file mode 100644 index 0000000..05e56cc --- /dev/null +++ b/src/features/computer/index.ts @@ -0,0 +1,31 @@ +export type { + Badge, + ComputerListResult, + ComputerSaveResult, + ComputerStatusResult, + ComputerStatusView, + ComputerView, + LoadComputerStatus, + LoadComputers, + SaveComputer, + TestComputer, + TestComputerResult, + TestResultView, +} from "./logic/view-model"; +export { + formatHost, + knownHostLabel, + summarizeComputers, + viewComputer, + viewComputerStatus, + viewComputers, + viewTestResult, +} from "./logic/view-model"; +export { default as ComputerField } from "./ui/ComputerField.svelte"; +export { default as ComputerSelect } from "./ui/ComputerSelect.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "computer", + description: "Per-conversation / per-workspace SSH computer selection + status", +} as const; diff --git a/src/features/computer/logic/view-model.test.ts b/src/features/computer/logic/view-model.test.ts new file mode 100644 index 0000000..45d459e --- /dev/null +++ b/src/features/computer/logic/view-model.test.ts @@ -0,0 +1,167 @@ +import type { ComputerStatusResponse, TestComputerResponse } from "@dispatch/transport-contract"; +import type { ComputerEntry } from "@dispatch/wire"; +import { describe, expect, it } from "vitest"; +import { + formatHost, + knownHostLabel, + summarizeComputers, + viewComputer, + viewComputerStatus, + viewComputers, + viewTestResult, +} from "./view-model"; + +function computer(overrides: Partial<ComputerEntry> = {}): ComputerEntry { + return { + alias: "buildbox", + hostName: "10.0.0.5", + port: 22, + user: "deploy", + identityFile: "/home/deploy/.ssh/id_ed25519", + knownHost: true, + usageCount: 0, + ...overrides, + }; +} + +describe("formatHost", () => { + it("is user@host with no port when port is the SSH default (22)", () => { + expect(formatHost(computer({ port: 22 }))).toBe("[email protected]"); + }); + + it("appends a non-default port", () => { + expect(formatHost(computer({ port: 2222 }))).toBe("[email protected]:2222"); + }); + + it("falls back to the alias when hostName is empty", () => { + expect(formatHost(computer({ hostName: "" }))).toBe("deploy@buildbox"); + }); +}); + +describe("knownHostLabel", () => { + it("is 'known host' when known", () => { + expect(knownHostLabel(true)).toBe("known host"); + }); + + it("is 'new host' when not known", () => { + expect(knownHostLabel(false)).toBe("new host"); + }); +}); + +describe("viewComputer", () => { + it("projects alias + hostSummary + identity + known-host label", () => { + const v = viewComputer(computer()); + expect(v.alias).toBe("buildbox"); + expect(v.hostSummary).toBe("[email protected]"); + expect(v.identityFile).toBe("/home/deploy/.ssh/id_ed25519"); + expect(v.knownHostLabel).toBe("known host"); + expect(v.knownHost).toBe(true); + }); + + it("preserves a null identityFile (default key)", () => { + const v = viewComputer(computer({ identityFile: null })); + expect(v.identityFile).toBeNull(); + }); +}); + +describe("viewComputers", () => { + it("maps each entry (and drops usageCount from the view)", () => { + const views = viewComputers([ + computer({ alias: "a", usageCount: 3 }), + computer({ alias: "b", hostName: "b.local", usageCount: 0 }), + ]); + expect(views).toHaveLength(2); + expect(views.at(0)?.alias).toBe("a"); + expect(views.at(1)?.hostSummary).toBe("[email protected]"); + }); +}); + +describe("summarizeComputers", () => { + it("is 'No computers discovered' for an empty list", () => { + expect(summarizeComputers([])).toBe("No computers discovered"); + }); + + it("is singular for one computer", () => { + expect(summarizeComputers([computer()])).toBe("1 computer"); + }); + + it("is plural for many", () => { + expect(summarizeComputers([computer(), computer(), computer()])).toBe("3 computers"); + }); +}); + +describe("viewComputerStatus", () => { + function status( + state: ComputerStatusResponse["state"], + overrides: Partial<ComputerStatusResponse> = {}, + ): ComputerStatusResponse { + return { alias: "buildbox", state, knownHost: true, ...overrides }; + } + + it("connected → success badge, not busy, no error", () => { + const v = viewComputerStatus(status("connected")); + expect(v.statusLabel).toBe("Connected"); + expect(v.badge).toBe("success"); + expect(v.busy).toBe(false); + expect(v.error).toBeNull(); + }); + + it("connecting → warning badge + busy (spinner), no error", () => { + const v = viewComputerStatus(status("connecting")); + expect(v.statusLabel).toBe("Connecting…"); + expect(v.badge).toBe("warning"); + expect(v.busy).toBe(true); + expect(v.error).toBeNull(); + }); + + it("disconnected → neutral badge, NOT busy (a stable idle state)", () => { + const v = viewComputerStatus(status("disconnected")); + expect(v.statusLabel).toBe("Disconnected"); + expect(v.badge).toBe("neutral"); + expect(v.busy).toBe(false); + expect(v.error).toBeNull(); + }); + + it("error → error badge, not busy, surfaces the reason", () => { + const v = viewComputerStatus(status("error", { error: "auth refused" })); + expect(v.statusLabel).toBe("Error"); + expect(v.badge).toBe("error"); + expect(v.busy).toBe(false); + expect(v.error).toBe("auth refused"); + }); + + it("error falls back to a default reason when the backend omits one", () => { + const v = viewComputerStatus(status("error")); + expect(v.error).toBe("Connection failed"); + }); + + it("carries the knownHost flag through", () => { + const v = viewComputerStatus(status("connected", { knownHost: false })); + expect(v.knownHost).toBe(false); + }); +}); + +describe("viewTestResult", () => { + it("ok=true → no error, 'Connection OK' label", () => { + const r = viewTestResult({ alias: "buildbox", ok: true } as TestComputerResponse); + expect(r.ok).toBe(true); + expect(r.error).toBeNull(); + expect(r.label).toBe("Connection OK"); + }); + + it("ok=false → surfaces the failure reason", () => { + const r = viewTestResult({ + alias: "buildbox", + ok: false, + error: "host unreachable", + } as TestComputerResponse); + expect(r.ok).toBe(false); + expect(r.error).toBe("host unreachable"); + expect(r.label).toBe("Failed"); + }); + + it("ok=false without a reason falls back to a default", () => { + const r = viewTestResult({ alias: "buildbox", ok: false } as TestComputerResponse); + expect(r.error).toBe("Connection failed"); + }); +}); diff --git a/src/features/computer/logic/view-model.ts b/src/features/computer/logic/view-model.ts new file mode 100644 index 0000000..d489fb5 --- /dev/null +++ b/src/features/computer/logic/view-model.ts @@ -0,0 +1,184 @@ +import type { ComputerStatusResponse, TestComputerResponse } from "@dispatch/transport-contract"; +import type { Computer, ComputerEntry } from "@dispatch/wire"; + +/** + * Pure core for the computer feature — zero DOM, zero effects, zero Svelte. + * + * A **computer** is a remote SSH target discovered from the user's `~/.ssh/config` + * (read-only — there is no CRUD store; the user edits their config to add one). + * The computer feature surfaces, per-conversation and per-workspace, WHICH + * computer a turn's tools execute on (the computer analog of `cwd`). It is a + * USER-facing control only: the computer is a tool-execution target forwarded to + * tools and NEVER part of the model prompt (so it does not affect prompt + * caching) — the agent never sees it. + * + * This module holds the pure logic: formatting a `Computer` for display, mapping a + * live `ComputerStatusResponse.state` to a display badge, and the one-line + * discovered-list summary. The effects (the HTTP list/get/status/test + + * per-conversation get/set) are INJECTED via the ports below; the composition root + * implements them. + */ + +// ── Injected ports (consumer-defines-port; the composition root adapts the +// store's HTTP calls to these shapes). Mirrors cwd-lsp's ports. ────────────── + +/** Outcome of `PUT /conversations/:id/computer`; `null` when no real conversation is focused. */ +export type ComputerSaveResult = + | { readonly ok: true; readonly computerId: string | null } + | { readonly ok: false; readonly error: string }; + +export type SaveComputer = (computerId: string | null) => Promise<ComputerSaveResult | null>; + +/** Outcome of `GET /computers`; `null` when the list couldn't be loaded. */ +export type ComputerListResult = + | { readonly ok: true; readonly computers: readonly ComputerEntry[] } + | { readonly ok: false; readonly error: string }; + +export type LoadComputers = () => Promise<ComputerListResult | null>; + +/** Outcome of `GET /computers/:alias/status`; `null` when no alias / not loaded. */ +export type ComputerStatusResult = + | { readonly ok: true; readonly status: ComputerStatusResponse } + | { readonly ok: false; readonly error: string }; + +export type LoadComputerStatus = (alias: string) => Promise<ComputerStatusResult | null>; + +/** Outcome of `POST /computers/:alias/test`. */ +export type TestComputerResult = + | { readonly ok: true; readonly response: TestComputerResponse } + | { readonly ok: false; readonly error: string }; + +export type TestComputer = (alias: string) => Promise<TestComputerResult | null>; + +// ── Computer → display view ────────────────────────────────────────────────── + +export type Badge = "success" | "warning" | "error" | "neutral"; + +export interface ComputerView { + /** The SSH config `Host` alias — also the `computerId` users select. */ + readonly alias: string; + /** A compact `user@host:port` connection string (the resolved config values). */ + readonly hostSummary: string; + /** The resolved `IdentityFile`, or `null` = default `~/.ssh/id_*`. */ + readonly identityFile: string | null; + /** Short label for the known-host indicator, e.g. "known host" / "new host". */ + readonly knownHostLabel: string; + /** Whether the host's key is already in `~/.ssh/known_hosts`. */ + readonly knownHost: boolean; +} + +/** + * Format a computer's connection target as `user@host:port`, omitting the port + * when it is the SSH default (22) so the summary stays compact (mirrors how a user + * reads an ssh config `Host` block). `hostName` falls back to the alias itself + * (the backend resolves this, but this is defensive). + */ +export function formatHost(computer: Computer): string { + const host = computer.hostName || computer.alias; + const port = computer.port === 22 ? "" : `:${computer.port}`; + return `${computer.user}@${host}${port}`; +} + +/** The display label for the known-host indicator. */ +export function knownHostLabel(knownHost: boolean): string { + return knownHost ? "known host" : "new host"; +} + +export function viewComputer(computer: Computer): ComputerView { + return { + alias: computer.alias, + hostSummary: formatHost(computer), + identityFile: computer.identityFile, + knownHostLabel: knownHostLabel(computer.knownHost), + knownHost: computer.knownHost, + }; +} + +export function viewComputers(computers: readonly ComputerEntry[]): readonly ComputerView[] { + return computers.map(viewComputer); +} + +/** + * A one-line summary of the discovered list, e.g. "3 computers" / "No computers + * discovered" (the latter is the expected state until the `ssh` extension lands). + */ +export function summarizeComputers(computers: readonly ComputerEntry[]): string { + if (computers.length === 0) return "No computers discovered"; + return `${computers.length} computer${computers.length === 1 ? "" : "s"}`; +} + +// ── Connection status → display view ────────────────────────────────────────── + +export interface ComputerStatusView { + readonly alias: string; + readonly state: ComputerStatusResponse["state"]; + readonly statusLabel: string; + readonly badge: Badge; + /** True while the state is transient (show a spinner). */ + readonly busy: boolean; + /** The error reason when `state === "error"`, else null. */ + readonly error: string | null; + /** Whether the host's key is already in `~/.ssh/known_hosts`. */ + readonly knownHost: boolean; +} + +/** + * Map a computer's live connection state to a display label + badge + busy flag. + * Mirrors the LSP/MCP status→badge pattern (each feature owns its own mapping — + * the enums differ, so they are not shared). Exhaustive vs the contract: + * `connected`→success, `connecting`→warning+busy, `disconnected`→neutral (a stable + * idle state, NOT busy), `error`→error. + */ +export function viewComputerStatus(status: ComputerStatusResponse): ComputerStatusView { + let statusLabel: string; + let badge: Badge; + let busy = false; + switch (status.state) { + case "connected": + statusLabel = "Connected"; + badge = "success"; + break; + case "connecting": + statusLabel = "Connecting…"; + badge = "warning"; + busy = true; + break; + case "disconnected": + statusLabel = "Disconnected"; + badge = "neutral"; + break; + case "error": + statusLabel = "Error"; + badge = "error"; + break; + } + return { + alias: status.alias, + state: status.state, + statusLabel, + badge, + busy, + error: status.state === "error" ? (status.error ?? "Connection failed") : null, + knownHost: status.knownHost, + }; +} + +// ── Test-connection result → display view ─────────────────────────────────── + +export interface TestResultView { + readonly alias: string; + readonly ok: boolean; + /** The failure reason when `ok` is false, else null. */ + readonly error: string | null; + /** A short result label, e.g. "Connection OK" / "Failed". */ + readonly label: string; +} + +export function viewTestResult(response: TestComputerResponse): TestResultView { + return { + alias: response.alias, + ok: response.ok, + error: response.ok ? null : (response.error ?? "Connection failed"), + label: response.ok ? "Connection OK" : "Failed", + }; +} diff --git a/src/features/computer/ui/ComputerField.svelte b/src/features/computer/ui/ComputerField.svelte new file mode 100644 index 0000000..6b54c88 --- /dev/null +++ b/src/features/computer/ui/ComputerField.svelte @@ -0,0 +1,211 @@ +<script lang="ts"> + import type { ComputerStatusResponse } from "@dispatch/transport-contract"; + import ComputerSelect from "./ComputerSelect.svelte"; + import { + viewComputerStatus, + type ComputerStatusView, + type LoadComputerStatus, + type SaveComputer, + type TestComputer, + } from "../logic/view-model"; + import type { ComputerEntry } from "@dispatch/wire"; + import { untrack } from "svelte"; + + let { + computerId, + canEdit, + computers, + save, + loadStatus, + test, + }: { + /** The active conversation's persisted computer alias, or null (local/inherit). */ + computerId: string | null; + /** Whether a real conversation is focused (a draft can't persist yet). */ + canEdit: boolean; + /** Discovered computers from `GET /computers` (read-only). */ + computers: readonly ComputerEntry[]; + save: SaveComputer; + loadStatus: LoadComputerStatus; + test: TestComputer; + } = $props(); + + // ── Save: selecting a dropdown option persists immediately (PUT /computer). ── + let saving = $state(false); + let error = $state<string | null>(null); + let justSaved = $state(false); + + async function select(computerId: string | null) { + if (saving || !canEdit) return; + saving = true; + error = null; + justSaved = false; + const result = await save(computerId); + saving = false; + if (result === null) return; + if (result.ok) { + justSaved = true; + } else { + error = result.error; + } + } + + // ── Connection status: poll the selected computer's live state. Owned + ── + // disposed here (never leaks across conversations — the field re-mounts per + // conversation via the {#key} in App.svelte, like CwdField). No poll while + // local (no alias) or while a draft can't persist. + let statusView = $state<ComputerStatusView | null>(null); + let statusError = $state<string | null>(null); + + async function refreshStatus() { + const alias = untrack(() => computerId); + if (alias === null) { + statusView = null; + statusError = null; + return; + } + const result = await loadStatus(alias); + if (result === null) return; + if (result.ok) { + statusView = viewComputerStatus(result.status); + statusError = null; + } else { + statusView = null; + statusError = result.error; + } + } + + // Re-fetch on mount + whenever the selected alias changes (incl. after a save). + // Clear the test result so a stale ✓ from alias A doesn't persist for alias B. + $effect(() => { + void computerId; + testResult = null; + void refreshStatus(); + }); + + // Poll the status while a computer is selected. `connecting` is transient, so + // a faster cadence helps it flip to `connected`; a connected host is stable. + const POLL_MS = 4000; + $effect(() => { + const alias = computerId; + if (alias === null) return; + const handle = setInterval(() => void refreshStatus(), POLL_MS); + return () => clearInterval(handle); + }); + + // ── Test connection: one-shot probe (POST /computers/:alias/test). ────────── + let testing = $state(false); + let testResult = $state<{ ok: boolean; error: string | null } | null>(null); + + async function runTest() { + const alias = untrack(() => computerId); + if (alias === null || testing) return; + testing = true; + testResult = null; + const result = await test(alias); + testing = false; + if (result === null) return; + testResult = result.ok ? { ok: true, error: null } : { ok: false, error: result.error }; + // Refresh the connection-status badge so it reflects the post-test state + // (clears a stale "connecting" spinner caught by the poll mid-test). + void refreshStatus(); + } + + const badgeClass = $derived.by(() => { + const b = statusView?.badge ?? "neutral"; + switch (b) { + case "success": + return "badge-success"; + case "warning": + return "badge-warning"; + case "error": + return "badge-error"; + default: + return "badge-ghost"; + } + }); +</script> + +<div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Computer (SSH)</span> + <div class="flex items-center gap-2"> + <ComputerSelect + value={computerId} + {computers} + disabled={!canEdit || saving} + onSelect={select} + /> + {#if saving} + <span class="loading loading-spinner loading-xs shrink-0"></span> + {/if} + </div> + + {#if !canEdit} + <p class="text-xs opacity-60">Start or open a conversation to set its computer.</p> + {:else if computerId !== null} + <!-- Connection status badge + Test affordance for the selected computer. --> + <div class="flex flex-wrap items-center gap-2"> + {#if statusView} + <span + class="badge badge-sm {badgeClass}" + title={statusView.error ?? statusView.statusLabel} + > + {#if statusView.busy} + <span class="loading loading-spinner loading-[10px]"></span> + {/if} + {statusView.statusLabel} + </span> + {:else if statusError} + <span class="badge badge-sm badge-error" title={statusError}>Status error</span> + {:else} + <span class="badge badge-sm badge-ghost">—</span> + {/if} + + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={testing} + onclick={runTest} + title={testResult + ? testResult.ok + ? "Connection OK" + : (testResult.error ?? "Failed") + : "Test connection"} + > + {#if testing} + <span class="loading loading-spinner loading-[10px]"></span> + {:else if testResult?.ok} + <span class="text-success">✓</span> + {:else if testResult} + <span class="text-error">✗</span> + {:else} + Test + {/if} + </button> + + {#if testResult} + <span class="text-xs {testResult.ok ? 'text-success' : 'text-error'}"> + {testResult.ok ? "OK" : (testResult.error ?? "Failed")} + </span> + {/if} + </div> + {#if statusView?.error} + <p class="text-xs text-error">{statusView.error}</p> + {/if} + {:else if computers.length === 0} + <p class="text-xs opacity-50"> + No computers discovered — add a `Host` block to your `~/.ssh/config` to use a remote computer. + </p> + {:else if justSaved && !error} + <p class="text-xs text-success">Saved.</p> + {/if} + + {#if error} + <p class="text-xs text-error">{error}</p> + {/if} + + <p class="text-xs opacity-50"> + Where this conversation's tools run. `null` (Local) runs on the server; an alias runs over SSH. + Not seen by the agent. + </p> +</div> diff --git a/src/features/computer/ui/ComputerSelect.svelte b/src/features/computer/ui/ComputerSelect.svelte new file mode 100644 index 0000000..c580b60 --- /dev/null +++ b/src/features/computer/ui/ComputerSelect.svelte @@ -0,0 +1,39 @@ +<script lang="ts"> + import type { ComputerEntry } from "@dispatch/wire"; + + let { + value, + computers, + disabled = false, + onSelect, + }: { + /** The currently selected computer alias, or null for "Local (none)". */ + value: string | null; + /** Discovered computers from `GET /computers` (read-only). */ + computers: readonly ComputerEntry[]; + disabled?: boolean; + onSelect: (computerId: string | null) => void; + } = $props(); + + // A `<select>` value is a string; map "" ↔ null (Local). The chosen option's + // value is the alias, with "" meaning "clear / local". + const selectValue = $derived(value ?? ""); + + function onChange(e: Event) { + const v = (e.currentTarget as HTMLSelectElement).value; + onSelect(v === "" ? null : v); + } +</script> + +<select + class="select select-bordered select-sm w-full font-mono text-xs" + value={selectValue} + {disabled} + onchange={onChange} + aria-label="Computer" +> + <option value="">Local (none)</option> + {#each computers as c (c.alias)} + <option value={c.alias}>{c.alias}{c.knownHost ? "" : " · new host"}</option> + {/each} +</select> diff --git a/src/features/concurrency/index.ts b/src/features/concurrency/index.ts new file mode 100644 index 0000000..c0870e3 --- /dev/null +++ b/src/features/concurrency/index.ts @@ -0,0 +1,63 @@ +export type { + // Contract shapes re-exported for a single import surface. + ConcurrencyCooldownResponse, + ConcurrencyCooldownResult, + ConcurrencyDeleteResult, + ConcurrencyLimitEntry, + ConcurrencyLimitResponse, + ConcurrencyLimitResult, + ConcurrencyLimitsResponse, + ConcurrencyLimitsResult, + ConcurrencyStatusEntry, + ConcurrencyStatusResponse, + ConcurrencyStatusResult, + DeleteConcurrencyLimit, + GetConcurrencyCooldown, + GetConcurrencyLimit, + LoadConcurrencyLimits, + LoadConcurrencyStatus, + RestoreOutcome, + SaveConcurrencyCooldown, + SaveConcurrencyLimit, + SetConcurrencyCooldownRequest, + SetConcurrencyLimitRequest, +} from "./logic/types"; +export type { + AutoReduceNotice, + Badge, + ConcurrencyLimitView, + ConcurrencyStatusView, +} from "./logic/view-model"; +export { + autoReduceNotices, + cooldownLabel, + DEFAULT_COOLDOWN_MS, + formatPauseDuration, + normalizeConcurrencyCooldown, + normalizeConcurrencyLimit, + normalizeConcurrencyLimits, + normalizeConcurrencyStatus, + normalizeLimit, + parseCooldownInput, + parseLimitInput, + pauseLabel, + providerFromModel, + providerOptions, + statusLabel, + summarizeLimits, + summarizeStatus, + viewAutoReduce, + viewConcurrencyLimit, + viewConcurrencyLimits, + viewConcurrencyStatus, + viewConcurrencyStatuses, +} from "./logic/view-model"; +export { default as AutoReduceBanner } from "./ui/AutoReduceBanner.svelte"; +export { default as ConcurrencyLimitRow } from "./ui/ConcurrencyLimitRow.svelte"; +export { default as ConcurrencyView } from "./ui/ConcurrencyView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "concurrency", + description: "Per-provider concurrency limits + live in-flight/queue status", +} as const; diff --git a/src/features/concurrency/logic/types.ts b/src/features/concurrency/logic/types.ts new file mode 100644 index 0000000..a0c5f6b --- /dev/null +++ b/src/features/concurrency/logic/types.ts @@ -0,0 +1,119 @@ +import type { + ConcurrencyCooldownResponse, + ConcurrencyLimitResponse, + ConcurrencyLimitsResponse, + ConcurrencyStatusEntry, + ConcurrencyStatusResponse, + SetConcurrencyCooldownRequest, + SetConcurrencyLimitRequest, +} from "@dispatch/transport-contract"; + +/** + * Pure core types for the concurrency feature — zero DOM, zero effects, zero + * Svelte. + * + * The backend tracks + limits how many concurrent token-generating API requests + * are in flight PER PROVIDER. When the cap is reached, additional requests queue + * and are granted slots oldest-agent-first; a 429 backoff PAUSES a provider's + * queue until `pausedUntil`. The cap is in-memory + per-provider (no persistence), + * managed via a plain REST surface under `/concurrency/...` provided by the + * `concurrency` extension. When the extension isn't loaded, the list + status + * endpoints return empty arrays (`{ limits: [] }` / `{ providers: [] }`); the + * single / PUT / DELETE endpoints return `503`. + * + * The data shapes ARE part of `@dispatch/transport-contract` (0.23.0), so they + * are imported directly (mirrors `mcp` / `computer`). The result types + injected + * ports below are FE-owned (the composition root adapts the store's HTTP calls to + * them). The endpoints are GLOBAL (not workspace- or conversation-scoped). + * + * Concurrency-fixes (additive, no version bump): each `ConcurrencyStatusEntry` + * now also carries `cooldownMs` (per-slot release cooldown, configurable + + * persisted), `autoReduced` (a 429 auto-reduced the limit by 1, one-way), and + * when auto-reduced, `autoReducedFrom` + a `notice` banner string. A manual + * `PUT /concurrency/limits/:providerId` clears `autoReduced`. Two new endpoints + * `GET`/`PUT /concurrency/cooldown/:providerId` view/change the cooldown. + */ + +/** Re-export the contract shapes so consumers import a single surface. */ +export type { + ConcurrencyCooldownResponse, + ConcurrencyLimitResponse, + ConcurrencyLimitsResponse, + ConcurrencyStatusEntry, + ConcurrencyStatusResponse, + SetConcurrencyCooldownRequest, + SetConcurrencyLimitRequest, +}; + +/** + * A configured concurrency limit — one provider's cap on in-flight requests. + * Same shape as the contract's `ConcurrencyLimitResponse`. + */ +export interface ConcurrencyLimitEntry { + readonly providerId: string; + readonly limit: number; +} + +// ── Result types (port outcomes; the store returns these directly) ────────────── + +/** Outcome of `GET /concurrency/limits` (all configured limits). */ +export type ConcurrencyLimitsResult = + | { readonly ok: true; readonly limits: readonly ConcurrencyLimitEntry[] } + | { readonly ok: false; readonly error: string }; + +/** + * Outcome of `GET`/`PUT /concurrency/limits/:providerId` — the configured limit + * for one provider. `GET` returns `404` when the provider has no limit (surfaced + * as `ok: false`); `PUT` returns `400` for a non-positive-integer body. + */ +export type ConcurrencyLimitResult = + | { readonly ok: true; readonly providerId: string; readonly limit: number } + | { readonly ok: false; readonly error: string }; + +/** Outcome of `DELETE /concurrency/limits/:providerId` (remove → unlimited). */ +export type ConcurrencyDeleteResult = + | { readonly ok: true; readonly providerId: string } + | { readonly ok: false; readonly error: string }; + +/** Outcome of `GET /concurrency/status` (live status for every limited provider). */ +export type ConcurrencyStatusResult = + | { readonly ok: true; readonly providers: readonly ConcurrencyStatusEntry[] } + | { readonly ok: false; readonly error: string }; + +/** + * Outcome of `GET`/`PUT /concurrency/cooldown/:providerId` — the per-slot + * release cooldown (ms) for one provider. `GET` returns `404` when the provider + * has no concurrency config at all (no limit, no cooldown); `PUT` returns `400` + * for a non-negative-integer body. Both return `503` when the extension isn't + * loaded. + */ +export type ConcurrencyCooldownResult = + | { readonly ok: true; readonly providerId: string; readonly cooldownMs: number } + | { readonly ok: false; readonly error: string }; + +/** + * Outcome of an auto-reduce banner's "Restore to N" action (PUT the limit back + * to `autoReducedFrom` via `PUT /concurrency/limits/:providerId`). Carried back to + * the banner so a FAILED restore surfaces an inline error next to the button + * (instead of silently re-enabling the button / showing the error far away). + */ +export type RestoreOutcome = { readonly ok: true } | { readonly ok: false; readonly error: string }; + +// ── Injected ports (consumer-defines-port; the composition root adapts the +// store's HTTP calls to these shapes). ────────────────────────────────────── + +export type LoadConcurrencyLimits = () => Promise<ConcurrencyLimitsResult>; +export type GetConcurrencyLimit = (providerId: string) => Promise<ConcurrencyLimitResult>; +export type SaveConcurrencyLimit = ( + providerId: string, + limit: number, +) => Promise<ConcurrencyLimitResult>; +export type DeleteConcurrencyLimit = (providerId: string) => Promise<ConcurrencyDeleteResult>; +export type LoadConcurrencyStatus = () => Promise<ConcurrencyStatusResult>; +/** `GET /concurrency/cooldown/:providerId` — read the per-slot release cooldown. */ +export type GetConcurrencyCooldown = (providerId: string) => Promise<ConcurrencyCooldownResult>; +/** `PUT /concurrency/cooldown/:providerId` — set the per-slot release cooldown (non-negative int). */ +export type SaveConcurrencyCooldown = ( + providerId: string, + cooldownMs: number, +) => Promise<ConcurrencyCooldownResult>; diff --git a/src/features/concurrency/logic/view-model.test.ts b/src/features/concurrency/logic/view-model.test.ts new file mode 100644 index 0000000..6e6b770 --- /dev/null +++ b/src/features/concurrency/logic/view-model.test.ts @@ -0,0 +1,670 @@ +import type { ConcurrencyStatusEntry } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import { + autoReduceNotices, + cooldownLabel, + DEFAULT_COOLDOWN_MS, + formatPauseDuration, + normalizeConcurrencyCooldown, + normalizeConcurrencyLimit, + normalizeConcurrencyLimits, + normalizeConcurrencyStatus, + parseCooldownInput, + parseLimitInput, + pauseLabel, + providerFromModel, + providerOptions, + statusLabel, + summarizeLimits, + summarizeStatus, + viewAutoReduce, + viewConcurrencyLimit, + viewConcurrencyLimits, + viewConcurrencyStatus, + viewConcurrencyStatuses, +} from "./view-model"; + +const status = (over: Partial<ConcurrencyStatusEntry> = {}): ConcurrencyStatusEntry => ({ + providerId: "umans", + limit: 4, + inFlight: 2, + queued: 0, + paused: false, + cooldownMs: 350, + autoReduced: false, + ...over, +}); + +// ── parseLimitInput ─────────────────────────────────────────────────────────── + +describe("parseLimitInput", () => { + it("accepts positive integers", () => { + expect(parseLimitInput("4")).toBe(4); + expect(parseLimitInput(" 12 ")).toBe(12); + expect(parseLimitInput("1")).toBe(1); + }); + + it("rejects zero, negatives, non-integers, and garbage", () => { + expect(parseLimitInput("0")).toBeNull(); + expect(parseLimitInput("-1")).toBeNull(); + expect(parseLimitInput("4.5")).toBeNull(); + expect(parseLimitInput("")).toBeNull(); + expect(parseLimitInput(" ")).toBeNull(); + expect(parseLimitInput("abc")).toBeNull(); + expect(parseLimitInput("4abc")).toBeNull(); + }); +}); + +// ── parseCooldownInput (non-negative integer — 0 is valid, unlike the limit) ── + +describe("parseCooldownInput", () => { + it("accepts zero + positive integers", () => { + expect(parseCooldownInput("0")).toBe(0); + expect(parseCooldownInput("350")).toBe(350); + expect(parseCooldownInput(" 100 ")).toBe(100); + }); + + it("rejects negatives, non-integers, and garbage", () => { + expect(parseCooldownInput("-1")).toBeNull(); + expect(parseCooldownInput("4.5")).toBeNull(); + expect(parseCooldownInput("")).toBeNull(); + expect(parseCooldownInput("abc")).toBeNull(); + expect(parseCooldownInput("100ms")).toBeNull(); + }); +}); + +// ── cooldownLabel ───────────────────────────────────────────────────────────── + +describe("cooldownLabel", () => { + it("0 → off label", () => { + expect(cooldownLabel(0)).toBe("0ms (off)"); + }); + it("sub-second → ms", () => { + expect(cooldownLabel(350)).toBe("350ms"); + expect(cooldownLabel(999)).toBe("999ms"); + }); + it("≥1s → seconds (trims trailing .0)", () => { + expect(cooldownLabel(1000)).toBe("1s"); + expect(cooldownLabel(1500)).toBe("1.5s"); + expect(cooldownLabel(60_000)).toBe("60s"); + }); +}); + +// ── providerFromModel / providerOptions ─────────────────────────────────────── + +describe("providerFromModel", () => { + it("takes the part before the first slash", () => { + expect(providerFromModel("openai/gpt-4o")).toBe("openai"); + expect(providerFromModel("openai-compat/gpt-4o-mini")).toBe("openai-compat"); + }); + it("returns the whole string when there is no slash", () => { + expect(providerFromModel("umans")).toBe("umans"); + }); +}); + +describe("providerOptions", () => { + it("derives distinct provider ids from models, first-seen order", () => { + expect( + providerOptions(["openai/gpt-4o", "umans/umans-glm-5.2", "openai/gpt-4o-mini"], []), + ).toEqual(["openai", "umans"]); + }); + it("unions with providers already carrying a configured limit", () => { + expect(providerOptions(["openai/gpt-4o"], [{ providerId: "anthropic", limit: 4 }])).toEqual([ + "openai", + "anthropic", + ]); + }); + it("does not duplicate a provider present in both models and limits", () => { + expect(providerOptions(["openai/gpt-4o"], [{ providerId: "openai", limit: 4 }])).toEqual([ + "openai", + ]); + }); + it("ignores models whose provider prefix is empty", () => { + expect(providerOptions(["/model-only", "umans/x"], [])).toEqual(["umans"]); + }); + it("returns [] when there are no models and no limits", () => { + expect(providerOptions([], [])).toEqual([]); + }); +}); + +// ── pauseLabel + formatPauseDuration ─────────────────────────────────────────── + +describe("formatPauseDuration", () => { + it("formats seconds / minutes+seconds / hours+minutes", () => { + expect(formatPauseDuration(30_000)).toBe("30s"); + expect(formatPauseDuration(65_000)).toBe("1m 05s"); + expect(formatPauseDuration(3_660_000)).toBe("1h 01m"); + }); + + it("non-positive → resuming", () => { + expect(formatPauseDuration(0)).toBe("resuming"); + expect(formatPauseDuration(-5_000)).toBe("resuming"); + }); +}); + +describe("pauseLabel", () => { + it("null when not paused", () => { + expect(pauseLabel(false, undefined, 0)).toBeNull(); + expect(pauseLabel(false, 10_000, 0)).toBeNull(); + }); + + it("'paused' (bare) when paused without a usable timestamp", () => { + expect(pauseLabel(true, undefined, 0)).toBe("paused"); + expect(pauseLabel(true, null, 0)).toBe("paused"); + expect(pauseLabel(true, Number.NaN, 0)).toBe("paused"); + }); + + it("countdown when paused with a future timestamp", () => { + const now = 1_000_000; + expect(pauseLabel(true, now + 30_000, now)).toBe("paused — resumes in 30s"); + expect(pauseLabel(true, now + 65_000, now)).toBe("paused — resumes in 1m 05s"); + }); + + it("'paused' (bare) when the timestamp is missing, non-finite, or expired", () => { + expect(pauseLabel(true, 0, 1_000)).toBe("paused"); + expect(pauseLabel(true, 1_000, 2_000)).toBe("paused"); + expect(pauseLabel(true, Number.NaN, 0)).toBe("paused"); + // The countdown prefix only appears with a FUTURE timestamp: + expect(pauseLabel(true, 2_000, 1_000)).toBe("paused — resumes in 1s"); + }); +}); + +// ── viewConcurrencyStatus ────────────────────────────────────────────────────── + +describe("viewConcurrencyStatus", () => { + it("serving under capacity → success badge, in-flight label, no queue", () => { + const v = viewConcurrencyStatus(status({ inFlight: 2, limit: 4, queued: 0 }), 0); + expect(v.inFlightLabel).toBe("2/4"); + expect(v.queuedLabel).toBe("no queue"); + expect(v.pausedLabel).toBeNull(); + expect(v.badge).toBe("success"); + expect(v.busy).toBe(false); + }); + + it("at capacity with a queue → warning badge + busy (spinner)", () => { + const v = viewConcurrencyStatus(status({ inFlight: 4, limit: 4, queued: 3 }), 0); + expect(v.inFlightLabel).toBe("4/4"); + expect(v.queuedLabel).toBe("3 queued"); + expect(v.badge).toBe("warning"); + expect(v.busy).toBe(true); + }); + + it("idle (no in-flight) → neutral badge, not busy", () => { + const v = viewConcurrencyStatus(status({ inFlight: 0, limit: 4, queued: 0 }), 0); + expect(v.badge).toBe("neutral"); + expect(v.busy).toBe(false); + expect(v.inFlightLabel).toBe("0/4"); + }); + + it("paused → warning badge + pause countdown label", () => { + const now = 1_000_000; + const v = viewConcurrencyStatus( + status({ paused: true, pausedUntil: now + 30_000, inFlight: 4, limit: 4, queued: 3 }), + now, + ); + expect(v.paused).toBe(true); + expect(v.pausedLabel).toBe("paused — resumes in 30s"); + expect(v.badge).toBe("warning"); + expect(v.busy).toBe(true); + }); + + it("at capacity but no queue → success (busy only when queuing)", () => { + const v = viewConcurrencyStatus(status({ inFlight: 4, limit: 4, queued: 0 }), 0); + expect(v.badge).toBe("success"); + expect(v.busy).toBe(false); + }); + + it("normalizes garbage counts to 0 and a malformed limit to 1", () => { + const v = viewConcurrencyStatus( + { + providerId: "x", + limit: -3, + inFlight: Number.NaN, + queued: "oops" as unknown as number, + paused: false, + cooldownMs: Number.NaN, + autoReduced: false, + }, + 0, + ); + expect(v.limit).toBe(1); + expect(v.inFlight).toBe(0); + expect(v.queued).toBe(0); + expect(v.inFlightLabel).toBe("0/1"); + expect(v.cooldownMs).toBe(DEFAULT_COOLDOWN_MS); + }); + + it("viewConcurrencyStatuses maps a list preserving order", () => { + const views = viewConcurrencyStatuses( + [status({ providerId: "a" }), status({ providerId: "b" })], + 0, + ); + expect(views.map((v) => v.providerId)).toEqual(["a", "b"]); + }); + + it("carries cooldownMs + label + autoReduced fields onto the view", () => { + const v = viewConcurrencyStatus(status({ cooldownMs: 1500 }), 0); + expect(v.cooldownMs).toBe(1500); + expect(v.cooldownLabel).toBe("1.5s"); + expect(v.autoReduced).toBe(false); + expect(v.autoReducedFrom).toBeNull(); + }); + + it("auto-reduced → warning badge (not busy) + autoReducedFrom carried", () => { + const v = viewConcurrencyStatus( + status({ limit: 3, autoReduced: true, autoReducedFrom: 4, inFlight: 0 }), + 0, + ); + expect(v.autoReduced).toBe(true); + expect(v.autoReducedFrom).toBe(4); + expect(v.badge).toBe("warning"); + // autoReduced alone does NOT flip busy (a reduced limit still admits agents). + expect(v.busy).toBe(false); + }); +}); + +// ── statusLabel (the row's status badge word) ────────────────────────────────── + +describe("statusLabel", () => { + it("idle (no in-flight) → Idle", () => { + expect( + statusLabel(viewConcurrencyStatus(status({ inFlight: 0, limit: 4, queued: 0 }), 0)), + ).toBe("Idle"); + }); + + it("serving under capacity → Active", () => { + expect( + statusLabel(viewConcurrencyStatus(status({ inFlight: 2, limit: 4, queued: 0 }), 0)), + ).toBe("Active"); + }); + + it("at capacity with a queue → At capacity", () => { + expect( + statusLabel(viewConcurrencyStatus(status({ inFlight: 4, limit: 4, queued: 3 }), 0)), + ).toBe("At capacity"); + }); + + it("at capacity but no queue → Active (not At capacity)", () => { + expect( + statusLabel(viewConcurrencyStatus(status({ inFlight: 4, limit: 4, queued: 0 }), 0)), + ).toBe("Active"); + }); + + it("paused → Paused (regardless of in-flight/queue)", () => { + expect( + statusLabel( + viewConcurrencyStatus(status({ paused: true, inFlight: 4, limit: 4, queued: 3 }), 0), + ), + ).toBe("Paused"); + }); +}); + +// ── viewAutoReduce / autoReduceNotices (the auto-reduce banner view) ─────────── + +describe("viewAutoReduce", () => { + it("returns null when not auto-reduced", () => { + expect(viewAutoReduce(status({ autoReduced: false }))).toBeNull(); + }); + + it("uses the backend notice verbatim + carries from/current limits", () => { + const notice = viewAutoReduce( + status({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429.", + }), + ); + expect(notice).toEqual({ + providerId: "umans", + message: "Concurrency limit auto-reduced to 3 after a 429.", + fromLimit: 4, + currentLimit: 3, + }); + }); + + it("synthesizes a fallback notice when the backend notice is absent/empty", () => { + expect(viewAutoReduce(status({ limit: 3, autoReduced: true, autoReducedFrom: 4 }))).toEqual({ + providerId: "umans", + message: "Concurrency limit auto-reduced to 3 after a 429 — restore manually when ready.", + fromLimit: 4, + currentLimit: 3, + }); + expect( + viewAutoReduce(status({ limit: 3, autoReduced: true, autoReducedFrom: 4, notice: "" })), + ).not.toBeNull(); + }); + + it("falls back to currentLimit+1 when autoReducedFrom is missing/garbage", () => { + const notice = viewAutoReduce(status({ limit: 3, autoReduced: true })); + expect(notice?.fromLimit).toBe(4); // 3 + 1 + }); +}); + +describe("autoReduceNotices", () => { + it("collects one banner per auto-reduced provider (input order), empty when none", () => { + expect(autoReduceNotices([status({ providerId: "a" })])).toEqual([]); + const out = autoReduceNotices([ + status({ providerId: "a", autoReduced: true, autoReducedFrom: 4, limit: 3 }), + status({ providerId: "b" }), + status({ providerId: "c", autoReduced: true, autoReducedFrom: 2, limit: 1 }), + ]); + expect(out.map((n) => n.providerId)).toEqual(["a", "c"]); + expect(out[1]?.fromLimit).toBe(2); + }); +}); + +// ── viewConcurrencyLimit ─────────────────────────────────────────────────────── + +describe("viewConcurrencyLimit", () => { + it("passes through id + normalizes the limit", () => { + const v = viewConcurrencyLimit({ providerId: "umans", limit: 4 }); + expect(v.providerId).toBe("umans"); + expect(v.limit).toBe(4); + }); + + it("clamps a malformed limit to 1", () => { + expect(viewConcurrencyLimit({ providerId: "x", limit: 0 }).limit).toBe(1); + expect(viewConcurrencyLimit({ providerId: "x", limit: -2 }).limit).toBe(1); + expect(viewConcurrencyLimit({ providerId: "x", limit: 2.9 }).limit).toBe(2); + }); + + it("viewConcurrencyLimits maps a list preserving order", () => { + const views = viewConcurrencyLimits([ + { providerId: "a", limit: 1 }, + { providerId: "b", limit: 2 }, + ]); + expect(views.map((v) => v.providerId)).toEqual(["a", "b"]); + }); +}); + +// ── summarizeLimits / summarizeStatus ────────────────────────────────────────── + +describe("summarizeLimits", () => { + it("empty → No limits configured", () => { + expect(summarizeLimits([])).toBe("No limits configured"); + }); + it("counts limits (singular/plural)", () => { + expect(summarizeLimits([{ providerId: "a", limit: 1 }])).toBe("1 limit configured"); + expect( + summarizeLimits([ + { providerId: "a", limit: 1 }, + { providerId: "b", limit: 2 }, + ]), + ).toBe("2 limits configured"); + }); +}); + +describe("summarizeStatus", () => { + it("empty → No limits configured", () => { + expect(summarizeStatus([], 0)).toBe("No limits configured"); + }); + it("aggregates providers + in-flight totals", () => { + const s = summarizeStatus( + [ + status({ providerId: "a", limit: 4, inFlight: 2 }), + status({ providerId: "b", limit: 6, inFlight: 3 }), + ], + 0, + ); + expect(s).toBe("2 providers · 5/10 in flight"); + }); + it("includes queued + paused fragments only when non-zero", () => { + const s = summarizeStatus( + [ + status({ providerId: "a", limit: 4, inFlight: 4, queued: 2 }), + status({ + providerId: "b", + limit: 4, + inFlight: 1, + queued: 0, + paused: true, + pausedUntil: 1000, + }), + ], + 0, + ); + expect(s).toBe("2 providers · 5/8 in flight · 2 queued · 1 paused"); + }); + it("singular provider", () => { + expect(summarizeStatus([status({ providerId: "a", limit: 4, inFlight: 1 })], 0)).toBe( + "1 provider · 1/4 in flight", + ); + }); + it("includes an auto-reduced fragment only when non-zero", () => { + const s = summarizeStatus( + [ + status({ providerId: "a", limit: 3, inFlight: 1, autoReduced: true, autoReducedFrom: 4 }), + status({ providerId: "b", limit: 4, inFlight: 1 }), + ], + 0, + ); + expect(s).toBe("2 providers · 2/7 in flight · 1 auto-reduced"); + }); +}); + +// ── Network-seam normalizers ─────────────────────────────────────────────────── + +describe("normalizeConcurrencyLimits", () => { + it("coerces a well-formed body", () => { + const limits = normalizeConcurrencyLimits({ + limits: [ + { providerId: "umans", limit: 4 }, + { providerId: "openai-compat", limit: 5 }, + ], + }); + expect(limits).toEqual([ + { providerId: "umans", limit: 4 }, + { providerId: "openai-compat", limit: 5 }, + ]); + }); + + it("non-array / missing limits → []", () => { + expect(normalizeConcurrencyLimits({})).toEqual([]); + expect(normalizeConcurrencyLimits({ limits: "nope" })).toEqual([]); + expect(normalizeConcurrencyLimits(null)).toEqual([]); + expect(normalizeConcurrencyLimits(undefined)).toEqual([]); + }); + + it("drops entries without a provider id + clamps limits", () => { + const limits = normalizeConcurrencyLimits({ + limits: [ + { providerId: "umans", limit: 4 }, + { providerId: "", limit: 9 }, + { providerId: 123, limit: 1 }, + { limit: 2 }, + { providerId: "anthropic", limit: -5 }, + ], + }); + expect(limits).toEqual([ + { providerId: "umans", limit: 4 }, + { providerId: "anthropic", limit: 1 }, + ]); + }); +}); + +describe("normalizeConcurrencyLimit", () => { + it("coerces a well-formed single response", () => { + expect(normalizeConcurrencyLimit({ providerId: "umans", limit: 4 })).toEqual({ + providerId: "umans", + limit: 4, + }); + }); + it("null when the provider id is missing/non-string", () => { + expect(normalizeConcurrencyLimit({ limit: 4 })).toBeNull(); + expect(normalizeConcurrencyLimit({ providerId: "", limit: 4 })).toBeNull(); + expect(normalizeConcurrencyLimit(null)).toBeNull(); + }); + it("clamps a malformed limit to 1", () => { + expect(normalizeConcurrencyLimit({ providerId: "x", limit: 0 })).toEqual({ + providerId: "x", + limit: 1, + }); + }); +}); + +describe("normalizeConcurrencyStatus", () => { + it("coerces a well-formed body, preserving pausedUntil only when present", () => { + const now = Date.now(); + const providers = normalizeConcurrencyStatus({ + providers: [ + { providerId: "umans", limit: 4, inFlight: 2, queued: 1, paused: false }, + { + providerId: "openai-compat", + limit: 5, + inFlight: 5, + queued: 3, + paused: true, + pausedUntil: now, + }, + ], + }); + expect(providers).toHaveLength(2); + const [first, second] = providers; + expect(first).toEqual({ + providerId: "umans", + limit: 4, + inFlight: 2, + queued: 1, + paused: false, + cooldownMs: 350, + autoReduced: false, + }); + expect(first !== undefined && !("pausedUntil" in first)).toBe(true); + expect(second).toEqual({ + providerId: "openai-compat", + limit: 5, + inFlight: 5, + queued: 3, + paused: true, + pausedUntil: now, + cooldownMs: 350, + autoReduced: false, + }); + }); + + it("non-array / missing providers → []", () => { + expect(normalizeConcurrencyStatus({})).toEqual([]); + expect(normalizeConcurrencyStatus({ providers: 42 })).toEqual([]); + expect(normalizeConcurrencyStatus(null)).toEqual([]); + }); + + it("drops entries without a provider id + clamps counts", () => { + const providers = normalizeConcurrencyStatus({ + providers: [ + { providerId: "umans", limit: 4, inFlight: 2, queued: 1, paused: false }, + { providerId: "", inFlight: 1 }, + { limit: 2 }, + { providerId: 9, inFlight: 0 }, + { providerId: "x", limit: -1, inFlight: "bad", queued: null, paused: "yes" }, + ], + }); + expect(providers).toEqual([ + { + providerId: "umans", + limit: 4, + inFlight: 2, + queued: 1, + paused: false, + cooldownMs: 350, + autoReduced: false, + }, + { + providerId: "x", + limit: 1, + inFlight: 0, + queued: 0, + paused: false, + cooldownMs: 350, + autoReduced: false, + }, + ]); + }); + + it("omits pausedUntil when it is not a finite number", () => { + const providers = normalizeConcurrencyStatus({ + providers: [ + { providerId: "a", limit: 1, inFlight: 0, queued: 0, paused: true, pausedUntil: "x" }, + { providerId: "b", limit: 1, inFlight: 0, queued: 0, paused: true, pausedUntil: null }, + ], + }); + for (const p of providers) expect("pausedUntil" in p).toBe(false); + }); + + it("coerces cooldownMs (default 350) + carries auto-reduce fields only when true", () => { + const [reduced, healthy] = normalizeConcurrencyStatus({ + providers: [ + { + providerId: "umans", + limit: 3, + inFlight: 1, + queued: 0, + paused: false, + cooldownMs: 500, + autoReduced: true, + autoReducedFrom: 4, + notice: "auto-reduced to 3 after a 429.", + }, + { providerId: "openai", limit: 4, inFlight: 0, queued: 0, paused: false }, + ], + }); + expect(reduced?.cooldownMs).toBe(500); + expect(reduced?.autoReduced).toBe(true); + expect(reduced?.autoReducedFrom).toBe(4); + expect(reduced?.notice).toBe("auto-reduced to 3 after a 429."); + // Healthy entry: cooldownMs defaults to 350 when absent; auto-reduce fields + // are NOT present (they are only included when autoReduced===true). + expect(healthy?.cooldownMs).toBe(DEFAULT_COOLDOWN_MS); + expect(healthy?.autoReduced).toBe(false); + expect(healthy && "autoReducedFrom" in healthy).toBe(false); + expect(healthy && "notice" in healthy).toBe(false); + }); + + it("drops autoReducedFrom/notice when autoReduced is false (even if present in JSON)", () => { + const [p] = normalizeConcurrencyStatus({ + providers: [ + { + providerId: "x", + limit: 4, + inFlight: 0, + queued: 0, + paused: false, + autoReduced: false, + autoReducedFrom: 9, + notice: "stale", + }, + ], + }); + expect(p?.autoReduced).toBe(false); + expect(p && "autoReducedFrom" in p).toBe(false); + expect(p && "notice" in p).toBe(false); + }); +}); + +// ── normalizeConcurrencyCooldown ─────────────────────────────────────────────── + +describe("normalizeConcurrencyCooldown", () => { + it("coerces a well-formed body", () => { + expect(normalizeConcurrencyCooldown({ providerId: "umans", cooldownMs: 500 })).toEqual({ + providerId: "umans", + cooldownMs: 500, + }); + }); + + it("defaults a malformed/absent cooldownMs to 350", () => { + expect(normalizeConcurrencyCooldown({ providerId: "x", cooldownMs: -1 })?.cooldownMs).toBe( + DEFAULT_COOLDOWN_MS, + ); + expect(normalizeConcurrencyCooldown({ providerId: "x" })?.cooldownMs).toBe(DEFAULT_COOLDOWN_MS); + expect(normalizeConcurrencyCooldown({ providerId: "x", cooldownMs: "fast" })?.cooldownMs).toBe( + DEFAULT_COOLDOWN_MS, + ); + }); + + it("returns null for a missing/malformed providerId", () => { + expect(normalizeConcurrencyCooldown({ cooldownMs: 350 })).toBeNull(); + expect(normalizeConcurrencyCooldown({ providerId: "", cooldownMs: 350 })).toBeNull(); + expect(normalizeConcurrencyCooldown(null)).toBeNull(); + expect(normalizeConcurrencyCooldown({})).toBeNull(); + }); +}); diff --git a/src/features/concurrency/logic/view-model.ts b/src/features/concurrency/logic/view-model.ts new file mode 100644 index 0000000..8a37198 --- /dev/null +++ b/src/features/concurrency/logic/view-model.ts @@ -0,0 +1,487 @@ +import type { + ConcurrencyCooldownResponse, + ConcurrencyStatusEntry, +} from "@dispatch/transport-contract"; +import type { ConcurrencyLimitEntry } from "./types"; + +/** + * Pure view-models for the concurrency feature — zero DOM, zero effects, zero + * Svelte. Maps backend `ConcurrencyLimitEntry` / `ConcurrencyStatusEntry` to + * display shapes (badges, "2/4" in-flight labels, pause countdowns, cooldown + * labels, auto-reduce banners, summaries), holds the limit/cooldown-input + * parsing, and the network-seam normalizers the composition root coerces the + * untyped JSON with. + */ + +export type Badge = "success" | "warning" | "error" | "neutral"; + +/** A configured limit row shaped for display. */ +export interface ConcurrencyLimitView { + readonly providerId: string; + readonly limit: number; +} + +/** + * A live status row shaped for display. Carries the raw counts plus pre-computed + * labels so the template stays thin. + */ +export interface ConcurrencyStatusView { + readonly providerId: string; + readonly limit: number; + readonly inFlight: number; + readonly queued: number; + readonly paused: boolean; + /** "2/4" — in-flight slots held vs the cap. */ + readonly inFlightLabel: string; + /** "1 queued" / "no queue". */ + readonly queuedLabel: string; + /** A pause label when paused, e.g. "paused — resumes in 30s"; null otherwise. */ + readonly pausedLabel: string | null; + readonly badge: Badge; + /** True when paused or at capacity (show a spinner). */ + readonly busy: boolean; + /** Per-slot release cooldown in ms (defensive default 350 on garbage). */ + readonly cooldownMs: number; + /** "350ms" / "1.2s" / "0ms (off)" — display label for the cooldown. */ + readonly cooldownLabel: string; + /** Whether the limit was auto-reduced by a 429 (one-way; user restores manually). */ + readonly autoReduced: boolean; + /** The original limit before auto-reduction; null when not auto-reduced. */ + readonly autoReducedFrom: number | null; +} + +/** + * A view-model for the auto-reduce banner — derived from a status entry whose + * `autoReduced` is `true`. `message` is the backend's `notice` when present, else + * a synthesized fallback. `viewAutoReduce` returns this (or null) so the banner + * section renders without reaching into the raw entry. + */ +export interface AutoReduceNotice { + readonly providerId: string; + readonly message: string; + /** The original limit before reduction — the value "Restore to N" PUTs. */ + readonly fromLimit: number; + /** The current (reduced) limit. */ + readonly currentLimit: number; +} + +// ── Limit input parsing ─────────────────────────────────────────────────────── + +/** + * Parse a raw limit input into a positive integer, or `null` when it is not a + * valid positive integer. Accepts "4" → 4; rejects "0", "-1", "4.5", "", "abc". + * Drives the Add/Save button's disabled state so an invalid value never reaches + * the backend (the backend is still the authority — it 400s a non-positive body). + */ +export function parseLimitInput(value: string): number | null { + const trimmed = value.trim(); + if (trimmed === "" || !/^[0-9]+$/.test(trimmed)) return null; + const n = Number.parseInt(trimmed, 10); + return Number.isFinite(n) && n >= 1 ? n : null; +} + +/** + * Coerce an untrusted limit value into a positive integer (default 1). Used when + * normalizing backend responses so a malformed `limit` can never be 0/negative. + */ +export function normalizeLimit(value: unknown): number { + const n = typeof value === "number" && Number.isFinite(value) ? value : 1; + const int = Math.floor(n); + return int >= 1 ? int : 1; +} + +// ── Cooldown input parsing ──────────────────────────────────────────────────── +// +// The per-slot release cooldown (ms) is a NON-NEGATIVE integer (0 = no cooldown, +// instant re-admission) — unlike the limit, 0 is a VALID value. The default is +// 350ms (the backend's server default when a limit is set but no explicit +// cooldown was configured). It is configurable + persisted per provider via +// `PUT /concurrency/cooldown/:providerId`. + +/** The server's default cooldown (ms) — used when none is explicitly set. */ +export const DEFAULT_COOLDOWN_MS = 350; + +/** + * Parse a raw cooldown input into a non-negative integer, or `null` when it is + * not valid. Accepts "0" → 0, "350" → 350; rejects "-1", "4.5", "", "abc". + * Drives the cooldown Save button's disabled state so an invalid value never + * reaches the backend (the backend 400s a non-negative-integer body). + */ +export function parseCooldownInput(value: string): number | null { + const trimmed = value.trim(); + if (trimmed === "" || !/^[0-9]+$/.test(trimmed)) return null; + const n = Number.parseInt(trimmed, 10); + return Number.isFinite(n) && n >= 0 ? n : null; +} + +/** + * Coerce an untrusted cooldown value into a non-negative integer (default + * {@link DEFAULT_COOLDOWN_MS}). Used when normalizing backend responses so a + * malformed `cooldownMs` can never be negative/non-finite. + */ +export function normalizeCooldown(value: unknown): number { + const n = typeof value === "number" && Number.isFinite(value) ? value : DEFAULT_COOLDOWN_MS; + const int = Math.floor(n); + return int >= 0 ? int : DEFAULT_COOLDOWN_MS; +} + +/** + * Format a cooldown (ms) as a short display label: + * 0 → "0ms (off)" · <1000 → "350ms" · ≥1000 → "1.2s" (trailing ".0" trimmed). + */ +export function cooldownLabel(ms: number): string { + if (ms <= 0) return "0ms (off)"; + if (ms < 1000) return `${ms}ms`; + const secs = ms / 1000; + const fixed = secs.toFixed(1); + return `${fixed.endsWith(".0") ? fixed.slice(0, -2) : fixed}s`; +} + +// ── Provider options (the Add-form dropdown) ─────────────────────────────────── +// +// A concurrency `providerId` is the credential name that prefixes a model name +// (`<provider>/<model>` — the same key the model picker groups by). The dropdown +// is the UNION of providers discoverable from the available models AND providers +// already carrying a configured limit (so a limit set out-of-band but whose +// model list is empty still appears), in first-seen order. Models are the +// authority; a provider with models but no limit is still selectable (Add sets it). + +/** The provider id prefix of a `<provider>/<model>` name (the part before the first `/`, or the whole string). */ +export function providerFromModel(full: string): string { + const i = full.indexOf("/"); + return i === -1 ? full : full.slice(0, i); +} + +/** Distinct provider ids to offer in the Add dropdown, first-seen order. */ +export function providerOptions( + models: readonly string[], + limits: readonly ConcurrencyLimitEntry[], +): string[] { + const seen = new Set<string>(); + const out: string[] = []; + const add = (p: string): void => { + if (p !== "" && !seen.has(p)) { + seen.add(p); + out.push(p); + } + }; + for (const m of models) add(providerFromModel(m)); + for (const l of limits) add(l.providerId); + return out; +} + +// ── Status → display view ────────────────────────────────────────────────────── + +const NO_LIMITS = "No limits configured"; + +/** + * Format a remaining-ms delta as a short pause countdown: "30s", "1m 05s", + * "resuming" (≤ 0). Pure via the injected `remainingMs`. The component recomputes + * this on each status poll (every ~2s) — a 1s ticking timer is optional. + */ +export function formatPauseDuration(remainingMs: number): string { + if (remainingMs <= 0) return "resuming"; + const totalSec = Math.floor(remainingMs / 1000); + const hours = Math.floor(totalSec / 3600); + const mins = Math.floor((totalSec % 3600) / 60); + const secs = totalSec % 60; + if (hours > 0) return `${hours}h ${String(mins).padStart(2, "0")}m`; + if (mins > 0) return `${mins}m ${String(secs).padStart(2, "0")}s`; + return `${secs}s`; +} + +/** + * The pause label for a status entry, or `null` when not paused. When paused with + * a future `pausedUntil`, shows "paused — resumes in 30s"; when paused without a + * usable timestamp, shows "paused". Pure via the injectable `now`. + */ +export function pauseLabel( + paused: boolean, + pausedUntil: number | null | undefined, + now: number = Date.now(), +): string | null { + if (!paused) return null; + if (typeof pausedUntil === "number" && Number.isFinite(pausedUntil)) { + const remaining = pausedUntil - now; + if (remaining > 0) return `paused — resumes in ${formatPauseDuration(remaining)}`; + } + // Paused without a usable future timestamp (missing, non-finite, or already + // expired): the next status poll will clear `paused`. Show "paused" meanwhile. + return "paused"; +} + +/** + * Build a display view for a status entry. `now` is injectable for tests + * (defaults to `Date.now()`); the composition-root component passes nothing in + * production (it recomputes on each poll). + * + * `autoReduced` does NOT flip `busy` (a reduced limit still admits agents; it is + * a degraded-but-active state surfaced via the banner, not a spinner) — it only + * nudges the badge to `warning` so the row signals attention. + */ +export function viewConcurrencyStatus( + entry: ConcurrencyStatusEntry, + now: number = Date.now(), +): ConcurrencyStatusView { + const limit = normalizeLimit(entry.limit); + const inFlight = clampCount(entry.inFlight); + const queued = clampCount(entry.queued); + const paused = entry.paused === true; + const autoReduced = entry.autoReduced === true; + const atCapacity = inFlight >= limit; + let badge: Badge; + if (paused) badge = "warning"; + else if (autoReduced) badge = "warning"; + else if (atCapacity && queued > 0) badge = "warning"; + else if (inFlight > 0) badge = "success"; + else badge = "neutral"; + const cooldownMs = normalizeCooldown(entry.cooldownMs); + const autoReducedFrom = + autoReduced && + typeof entry.autoReducedFrom === "number" && + Number.isFinite(entry.autoReducedFrom) + ? normalizeLimit(entry.autoReducedFrom) + : null; + return { + providerId: entry.providerId, + limit, + inFlight, + queued, + paused, + inFlightLabel: `${inFlight}/${limit}`, + queuedLabel: queued === 0 ? "no queue" : `${queued} queued`, + pausedLabel: pauseLabel(paused, entry.pausedUntil, now), + badge, + busy: paused || (atCapacity && queued > 0), + cooldownMs, + cooldownLabel: cooldownLabel(cooldownMs), + autoReduced, + autoReducedFrom, + }; +} + +/** + * A short status word for a status view, for the row's status badge: + * "Paused" · "At capacity" (in-flight at the cap with a queue) · "Active" + * (in-flight > 0) · "Idle". Mirrors the badge-text branching so the template + * holds no branching logic. + */ +export function statusLabel(view: ConcurrencyStatusView): string { + if (view.paused) return "Paused"; + if (view.inFlight >= view.limit && view.queued > 0) return "At capacity"; + if (view.inFlight > 0) return "Active"; + return "Idle"; +} + +/** + * The auto-reduce banner view for a status entry, or `null` when it is not + * auto-reduced. `message` prefers the backend's `notice` (verbatim, when present + * + non-empty); otherwise a synthesized fallback is built from + * `autoReducedFrom` → `limit`. `fromLimit` is the value "Restore to N" PUTs back. + */ +export function viewAutoReduce(entry: ConcurrencyStatusEntry): AutoReduceNotice | null { + if (entry.autoReduced !== true) return null; + const currentLimit = normalizeLimit(entry.limit); + const fromLimit = + typeof entry.autoReducedFrom === "number" && Number.isFinite(entry.autoReducedFrom) + ? normalizeLimit(entry.autoReducedFrom) + : currentLimit + 1; + const notice = + typeof entry.notice === "string" && entry.notice.length > 0 + ? entry.notice + : `Concurrency limit auto-reduced to ${currentLimit} after a 429 — restore manually when ready.`; + return { + providerId: entry.providerId, + message: notice, + fromLimit, + currentLimit, + }; +} + +/** + * All auto-reduce banners across a status list (one per auto-reduced provider), + * in input order. Empty when none are auto-reduced. + */ +export function autoReduceNotices( + entries: readonly ConcurrencyStatusEntry[], +): readonly AutoReduceNotice[] { + const out: AutoReduceNotice[] = []; + for (const e of entries) { + const n = viewAutoReduce(e); + if (n !== null) out.push(n); + } + return out; +} + +export function viewConcurrencyStatuses( + entries: readonly ConcurrencyStatusEntry[], + now: number = Date.now(), +): readonly ConcurrencyStatusView[] { + return entries.map((e) => viewConcurrencyStatus(e, now)); +} + +/** A display view for a configured limit entry. */ +export function viewConcurrencyLimit(entry: ConcurrencyLimitEntry): ConcurrencyLimitView { + return { providerId: entry.providerId, limit: normalizeLimit(entry.limit) }; +} + +export function viewConcurrencyLimits( + entries: readonly ConcurrencyLimitEntry[], +): readonly ConcurrencyLimitView[] { + return entries.map(viewConcurrencyLimit); +} + +// ── Summaries ────────────────────────────────────────────────────────────────── + +/** A one-line summary of the configured limits list, e.g. "2 limits configured". */ +export function summarizeLimits(limits: readonly ConcurrencyLimitEntry[]): string { + if (limits.length === 0) return NO_LIMITS; + return `${limits.length} limit${limits.length === 1 ? "" : "s"} configured`; +} + +/** + * A one-line summary of the live status, e.g. + * "2 providers · 6/10 in flight · 1 queued · 1 paused · 1 auto-reduced". Only the + * queued / paused / auto-reduced fragments appear when non-zero. + */ +export function summarizeStatus( + providers: readonly ConcurrencyStatusEntry[], + now: number = Date.now(), +): string { + if (providers.length === 0) return NO_LIMITS; + let inFlight = 0; + let limitTotal = 0; + let queued = 0; + let paused = 0; + let autoReduced = 0; + for (const p of providers) { + const limit = normalizeLimit(p.limit); + inFlight += clampCount(p.inFlight); + limitTotal += limit; + queued += clampCount(p.queued); + if (p.paused === true) paused += 1; + if (p.autoReduced === true) autoReduced += 1; + } + const parts: string[] = []; + parts.push( + `${providers.length} provider${providers.length === 1 ? "" : "s"}`, + `${inFlight}/${limitTotal} in flight`, + ); + if (queued > 0) parts.push(`${queued} queued`); + if (paused > 0) parts.push(`${paused} paused`); + if (autoReduced > 0) parts.push(`${autoReduced} auto-reduced`); + // Touch `now` so the summary recomputes alongside the per-row pause countdown. + void now; + return parts.join(" · "); +} + +// ── Network-seam normalization (pure; called by the composition root) ─────────── +// +// The concurrency responses are untyped JSON at runtime. The store coerces each +// defensively HERE (pure + tested) — a malformed/partial backend value (e.g. the +// extension returning `{}`) can never crash the renderer. Mirrors the +// `normalizeHeartbeatConfig` / inline `Array.isArray(data.servers)` guards. + +function isRecord(value: unknown): value is Record<string, unknown> { + return value !== null && typeof value === "object"; +} + +function asString(value: unknown): string | null { + return typeof value === "string" && value.length > 0 ? value : null; +} + +/** Coerce a non-negative count field to a non-negative integer (0 on garbage). */ +function clampCount(value: unknown): number { + const n = typeof value === "number" && Number.isFinite(value) ? value : 0; + const int = Math.floor(n); + return int >= 0 ? int : 0; +} + +/** Coerce an untrusted `GET /concurrency/limits` body into a typed limit list. */ +export function normalizeConcurrencyLimits(data: unknown): readonly ConcurrencyLimitEntry[] { + if (!isRecord(data) || !Array.isArray(data.limits)) return []; + const limits = data.limits as readonly unknown[]; + return limits + .filter((r): r is Record<string, unknown> => isRecord(r)) + .map((r) => ({ + providerId: asString(r.providerId) ?? "", + limit: normalizeLimit(r.limit), + })) + .filter((r) => r.providerId !== ""); +} + +/** Coerce an untrusted `GET`/`PUT /concurrency/limits/:id` body into a limit, or null. */ +export function normalizeConcurrencyLimit(data: unknown): ConcurrencyLimitEntry | null { + if (!isRecord(data)) return null; + const providerId = asString(data.providerId); + if (providerId === null) return null; + return { providerId, limit: normalizeLimit(data.limit) }; +} + +/** + * Coerce an untrusted `GET /concurrency/status` body into a typed status list. + * `pausedUntil` is included only when it is a finite number (it is absent when + * not paused). `cooldownMs` (default 350) + `autoReduced` are always coerced; + * `autoReducedFrom` + `notice` are included only when `autoReduced` is true (and + * well-formed), mirroring the backend's "present only when auto-reduced" contract. + */ +export function normalizeConcurrencyStatus(data: unknown): readonly ConcurrencyStatusEntry[] { + if (!isRecord(data) || !Array.isArray(data.providers)) return []; + const providers = data.providers as readonly unknown[]; + return providers + .filter((r): r is Record<string, unknown> => isRecord(r)) + .map((r): ConcurrencyStatusEntry => { + const providerId = asString(r.providerId) ?? ""; + const limit = normalizeLimit(r.limit); + const inFlight = clampCount(r.inFlight); + const queued = clampCount(r.queued); + const paused = r.paused === true; + const cooldownMs = normalizeCooldown(r.cooldownMs); + const autoReduced = r.autoReduced === true; + // Build immutably (the contract fields are readonly): start with the always- + // present fields, then layer the optional `pausedUntil` (finite number only) + // + the auto-reduce-only `autoReducedFrom`/`notice` (present only when true). + let entry: ConcurrencyStatusEntry = { + providerId, + limit, + inFlight, + queued, + paused, + cooldownMs, + autoReduced, + }; + if (typeof r.pausedUntil === "number" && Number.isFinite(r.pausedUntil)) { + entry = { ...entry, pausedUntil: r.pausedUntil }; + } + if (autoReduced) { + // Accumulate the auto-reduce-only optionals into a plain record (the + // contract fields are readonly, so we can't mutate a typed partial — + // collect then spread into a fresh entry). + const patch: { autoReducedFrom?: number; notice?: string } = {}; + if (typeof r.autoReducedFrom === "number" && Number.isFinite(r.autoReducedFrom)) { + patch.autoReducedFrom = normalizeLimit(r.autoReducedFrom); + } + if (typeof r.notice === "string" && r.notice.length > 0) { + patch.notice = r.notice; + } + if (patch.autoReducedFrom !== undefined || patch.notice !== undefined) { + entry = { ...entry, ...patch }; + } + } + return entry; + }) + .filter((r) => r.providerId !== ""); +} + +/** + * Coerce an untrusted `GET`/`PUT /concurrency/cooldown/:providerId` body into a + * typed cooldown response, or `null` when it is malformed (missing/malformed + * `providerId` or `cooldownMs`). The composition root surfaces a 404/400/503 as + * `ok: false` separately; this only defends the success body. + */ +export function normalizeConcurrencyCooldown(data: unknown): ConcurrencyCooldownResponse | null { + if (!isRecord(data)) return null; + const providerId = asString(data.providerId); + if (providerId === null) return null; + return { providerId, cooldownMs: normalizeCooldown(data.cooldownMs) }; +} diff --git a/src/features/concurrency/ui/AutoReduceBanner.svelte b/src/features/concurrency/ui/AutoReduceBanner.svelte new file mode 100644 index 0000000..132ebc7 --- /dev/null +++ b/src/features/concurrency/ui/AutoReduceBanner.svelte @@ -0,0 +1,81 @@ +<script lang="ts"> + import type { AutoReduceNotice } from "../logic/view-model"; + import type { RestoreOutcome } from "../logic/types"; + + let { + notice, + onRestore, + onDismiss, + }: { + /** The auto-reduce banner view (providerId + message + from/current limit). */ + notice: AutoReduceNotice; + /** + * "Restore to N" — PUT the limit back to `fromLimit`. Returns the outcome so + * a FAILED restore surfaces an inline error here (the banner owns its error + * display; the parent only refreshes on success). + */ + onRestore: (providerId: string, limit: number) => Promise<RestoreOutcome>; + /** Hide this banner locally (persists hidden while autoReduced stays true). */ + onDismiss: (providerId: string) => void; + } = $props(); + + let restoring = $state(false); + /** Inline restore error (e.g. "Concurrency service not available"); cleared on retry. */ + let error = $state<string | null>(null); + + async function handleRestore(): Promise<void> { + restoring = true; + error = null; + // The parent PUTs the limit + refreshes status on success; the banner clears + // once the next poll shows autoReduced===false. On failure the outcome is + // bubbled back here so the error shows inline next to the button. + const result = await onRestore(notice.providerId, notice.fromLimit); + restoring = false; + if (!result.ok) { + error = result.error; + } + } +</script> + +<div + class="alert alert-warning flex flex-col gap-2 py-2 text-xs" + role="status" + data-testid={`auto-reduce-banner-${notice.providerId}`} +> + <div class="flex items-start gap-2"> + <span class="shrink-0">⚠</span> + <div class="flex-1"> + <p>{notice.message}</p> + <p class="opacity-70"> + Was {notice.fromLimit}, now {notice.currentLimit}. + </p> + </div> + <div class="flex shrink-0 items-center gap-1"> + <!-- The "Restore to N" text stays visible while loading (only the spinner is + prepended) so the button keeps its accessible name during the PUT — a + spinner-only button loses its name for screen-reader users. --> + <button + type="button" + class="btn btn-warning btn-xs gap-1" + disabled={restoring} + onclick={handleRestore} + > + {#if restoring} + <span class="loading loading-spinner loading-xs"></span> + {/if} + Restore to {notice.fromLimit} + </button> + <button + type="button" + class="btn btn-ghost btn-xs" + aria-label={`Dismiss auto-reduce notice for ${notice.providerId}`} + onclick={() => onDismiss(notice.providerId)} + > + ✕ + </button> + </div> + </div> + {#if error} + <p class="font-mono text-error" data-testid={`restore-error-${notice.providerId}`}>{error}</p> + {/if} +</div> diff --git a/src/features/concurrency/ui/ConcurrencyLimitRow.svelte b/src/features/concurrency/ui/ConcurrencyLimitRow.svelte new file mode 100644 index 0000000..bf06ac0 --- /dev/null +++ b/src/features/concurrency/ui/ConcurrencyLimitRow.svelte @@ -0,0 +1,204 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import { + DEFAULT_COOLDOWN_MS, + parseCooldownInput, + parseLimitInput, + statusLabel, + type Badge, + type ConcurrencyLimitView, + type ConcurrencyStatusView, + } from "../logic/view-model"; + import type { + DeleteConcurrencyLimit, + SaveConcurrencyCooldown, + SaveConcurrencyLimit, + } from "../logic/types"; + + let { + limit, + status, + save, + saveCooldown, + remove, + }: { + /** The configured limit row (providerId + current limit). */ + limit: ConcurrencyLimitView; + /** The provider's live status view (in-flight/queue/badge), or null when no + * status entry exists yet. Drives the status line + seeds the cooldown input. */ + status: ConcurrencyStatusView | null; + save: SaveConcurrencyLimit; + saveCooldown: SaveConcurrencyCooldown; + remove: DeleteConcurrencyLimit; + } = $props(); + + // The badge→color map (presentational). Mirrors the old status-card mapping. + const badgeClass: Record<Badge, string> = { + success: "badge-success", + warning: "badge-warning", + error: "badge-error", + neutral: "badge-ghost", + }; + + // The cooldown input seed: the live cooldown when a status entry exists, else + // the server default (350). + const cooldownMs = $derived(status?.cooldownMs ?? DEFAULT_COOLDOWN_MS); + + // Inline-edit state for the limit + cooldown inputs. Each is seeded from its + // canonical value, but only while untouched — so a save echo / status-poll + // refresh re-syncs without clobbering an in-flight edit. Mirrors the + // ChatLimitField seed pattern (avoids reading the prop in the $state init). + let limitDraft = $state(""); + let lastLimitSeed = $state(""); + let cooldownDraft = $state(""); + let lastCooldownSeed = $state(""); + let saving = $state(false); + let removing = $state(false); + let error = $state<string | null>(null); + /** Brief "Saved" confirmation after a successful save; cleared on edit. */ + let justSaved = $state(false); + + $effect(() => { + const incomingLimit = String(limit.limit); + const incomingCooldown = String(cooldownMs); + untrack(() => { + if (limitDraft === lastLimitSeed) limitDraft = incomingLimit; + lastLimitSeed = incomingLimit; + if (cooldownDraft === lastCooldownSeed) cooldownDraft = incomingCooldown; + lastCooldownSeed = incomingCooldown; + }); + }); + + const parsedLimit = $derived(parseLimitInput(limitDraft)); + const parsedCooldown = $derived(parseCooldownInput(cooldownDraft)); + const dirtyLimit = $derived(parsedLimit !== null && parsedLimit !== limit.limit); + const dirtyCooldown = $derived(parsedCooldown !== null && parsedCooldown !== cooldownMs); + const dirty = $derived(dirtyLimit || dirtyCooldown); + + // Clear the "Saved" hint + any error as soon as the user edits either field. + function onInput(): void { + justSaved = false; + error = null; + } + + // "Set" saves whichever field is dirty: the limit first (PUT + // /concurrency/limits/:id), then the cooldown (PUT /concurrency/cooldown/:id). + // Stops + surfaces an inline error on the first failure. + async function handleSet(): Promise<void> { + if (!dirty || saving || removing) return; + saving = true; + error = null; + try { + if (dirtyLimit && parsedLimit !== null) { + const r = await save(limit.providerId, parsedLimit); + if (!r.ok) { + error = r.error; + return; + } + // Reflect the echoed limit back immediately (the prop re-asserts it via + // the seed effect once the parent reloads). + limitDraft = String(r.limit); + lastLimitSeed = limitDraft; + } + if (dirtyCooldown && parsedCooldown !== null) { + const r = await saveCooldown(limit.providerId, parsedCooldown); + if (!r.ok) { + error = r.error; + return; + } + cooldownDraft = String(r.cooldownMs); + lastCooldownSeed = cooldownDraft; + } + justSaved = true; + } finally { + saving = false; + } + } + + async function handleRemove(): Promise<void> { + removing = true; + error = null; + const result = await remove(limit.providerId); + removing = false; + if (!result.ok) { + error = result.error; + } + // On success the parent drops this row (re-loaded limits list). + } +</script> + +<div class="flex flex-col gap-1 rounded-box bg-base-200 p-2 text-sm"> + <!-- Line 1: provider + limit + cooldown + Set + ✕ (all on one line — nowrap so + the buttons never wrap; tight gap + narrow inputs keep the provider name + visible; the provider shrinks via flex-1 + min-w-0). --> + <div class="flex flex-nowrap items-center gap-1"> + <span class="min-w-0 flex-1 truncate font-medium font-mono" title={limit.providerId} + >{limit.providerId}</span + > + <input + type="text" + inputmode="numeric" + class="input input-bordered input-xs w-12 min-w-0 font-mono" + aria-label={`Concurrency limit for ${limit.providerId}`} + bind:value={limitDraft} + oninput={onInput} + disabled={saving || removing} + /> + <input + type="text" + inputmode="numeric" + class="input input-bordered input-xs w-14 min-w-0 font-mono" + aria-label={`Release cooldown (ms) for ${limit.providerId}`} + bind:value={cooldownDraft} + oninput={onInput} + disabled={saving || removing} + /> + <span class="shrink-0 text-[10px] opacity-50">ms</span> + <button + type="button" + class="btn btn-primary btn-xs shrink-0" + aria-label={`Set concurrency for ${limit.providerId}`} + disabled={!dirty || saving || removing} + onclick={handleSet} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Set + {/if} + </button> + <button + type="button" + class="btn btn-ghost btn-xs shrink-0 text-error" + aria-label={`Remove concurrency limit for ${limit.providerId}`} + disabled={saving || removing} + onclick={handleRemove} + > + {#if removing} + <span class="loading loading-spinner loading-xs"></span> + {:else} + ✕ + {/if} + </button> + </div> + + <!-- Line 2: in-flight count (left) + status badge (right). Hidden until the + first status poll for this provider lands. --> + {#if status !== null} + <div class="flex items-center justify-between gap-2 text-xs opacity-70"> + <span title="In-flight slots held vs cap">{status.inFlightLabel} in flight</span> + <span class="badge badge-sm {badgeClass[status.badge]} gap-1"> + {#if status.busy} + <span class="loading loading-spinner loading-xs"></span> + {/if} + {statusLabel(status)} + </span> + </div> + {/if} + + {#if error} + <span class="font-mono text-xs text-error">{error}</span> + {:else if justSaved && !dirty} + <span class="text-xs text-success">Saved.</span> + {/if} +</div> diff --git a/src/features/concurrency/ui/ConcurrencyView.svelte b/src/features/concurrency/ui/ConcurrencyView.svelte new file mode 100644 index 0000000..aadb8d1 --- /dev/null +++ b/src/features/concurrency/ui/ConcurrencyView.svelte @@ -0,0 +1,433 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import type { ConcurrencyStatusEntry } from "@dispatch/transport-contract"; + import { + autoReduceNotices, + DEFAULT_COOLDOWN_MS, + parseCooldownInput, + parseLimitInput, + providerOptions, + summarizeLimits, + viewConcurrencyLimits, + viewConcurrencyStatus, + type ConcurrencyStatusView, + } from "../logic/view-model"; + import type { + ConcurrencyLimitEntry, + DeleteConcurrencyLimit, + LoadConcurrencyLimits, + LoadConcurrencyStatus, + RestoreOutcome, + SaveConcurrencyCooldown, + SaveConcurrencyLimit, + } from "../logic/types"; + import AutoReduceBanner from "./AutoReduceBanner.svelte"; + import ConcurrencyLimitRow from "./ConcurrencyLimitRow.svelte"; + + let { + models, + loadLimits, + saveLimit, + deleteLimit, + loadStatus, + saveCooldown, + }: { + /** Available models (`<provider>/<model>`) — the source of provider ids for the Add dropdown. */ + models: readonly string[]; + loadLimits: LoadConcurrencyLimits; + saveLimit: SaveConcurrencyLimit; + deleteLimit: DeleteConcurrencyLimit; + loadStatus: LoadConcurrencyStatus; + saveCooldown: SaveConcurrencyCooldown; + } = $props(); + + // ── Limits (config: list / add / update / remove) ──────────────────────────── + let limits = $state<readonly ConcurrencyLimitEntry[]>([]); + let limitsError = $state<string | null>(null); + /** True after the first load settles (gates the empty state). */ + let hasLoadedLimits = $state(false); + /** Re-entrancy guard for background/silent refreshes (no UI — prevents + * overlapping fetches). The refresh is near-instant, so a visible loading + * indicator would flicker every poll/reload; it stays INVISIBLE (mirrors the + * heartbeat runs list). */ + let limitsInFlight = false; + + // Add-row state. The provider id is chosen from a dropdown of known providers + // (derived from the available models + any already-configured limit providers). + // The row is revealed by the "Add" button; "Set" saves it, ✕ cancels. + let addOpen = $state(false); + let newProviderId = $state(""); + let newLimitInput = $state(""); + let newCooldownInput = $state(""); + let adding = $state(false); + let addError = $state<string | null>(null); + + const providerOpts = $derived(providerOptions(models, limits)); + const limitViews = $derived(viewConcurrencyLimits(limits)); + const limitsSummary = $derived(summarizeLimits(limits)); + const parsedNewLimit = $derived(parseLimitInput(newLimitInput)); + const parsedNewCooldown = $derived(parseCooldownInput(newCooldownInput)); + /** Only send a cooldown PUT when the user moved it off the server default. */ + const newCooldownChanged = $derived( + parsedNewCooldown !== null && parsedNewCooldown !== DEFAULT_COOLDOWN_MS, + ); + const canSet = $derived( + newProviderId !== "" && + parsedNewLimit !== null && + parsedNewCooldown !== null && + !limits.some((l) => l.providerId === newProviderId) && + !adding, + ); + + // Keep the dropdown selection valid: default to the first option, and if the + // selected provider is removed from the options (e.g. its limit was deleted and + // it has no models), fall back to the first remaining option. Runs untracked so + // it doesn't loop on its own assignment. + $effect(() => { + const opts = providerOpts; + untrack(() => { + if (opts.length === 0) { + if (newProviderId !== "") newProviderId = ""; + return; + } + if (!opts.includes(newProviderId)) newProviderId = opts[0] ?? ""; + }); + }); + + async function refreshLimits(): Promise<void> { + if (limitsInFlight) return; + limitsInFlight = true; + const result = await loadLimits(); + limitsInFlight = false; + hasLoadedLimits = true; + if (result.ok) { + limits = result.limits; + // Clear the error only on success so it stays visible (stable, no flicker) + // during an in-flight retry rather than vanishing mid-refresh. + limitsError = null; + } else { + limitsError = result.error; + } + } + + function startAdd(): void { + addOpen = true; + addError = null; + newLimitInput = ""; + newCooldownInput = String(DEFAULT_COOLDOWN_MS); + // newProviderId is kept valid (defaults to the first option) by the effect above. + } + + function cancelAdd(): void { + addOpen = false; + addError = null; + newLimitInput = ""; + newCooldownInput = ""; + } + + // "Set" on the add row: save the limit, then the cooldown (only when the user + // moved it off the server default of 350ms — the backend defaults to 350 when a + // limit is set, so an unchanged value needs no extra PUT). On full success the + // add row closes + the limits/status reload (the new limit appears as a row). + async function handleAdd(): Promise<void> { + if (parsedNewLimit === null || parsedNewCooldown === null || newProviderId === "") return; + adding = true; + addError = null; + const limitResult = await saveLimit(newProviderId, parsedNewLimit); + if (!limitResult.ok) { + adding = false; + addError = limitResult.error; + return; + } + if (newCooldownChanged) { + const cooldownResult = await saveCooldown(newProviderId, parsedNewCooldown); + adding = false; + if (!cooldownResult.ok) { + // The limit was saved (→ a row will appear after reload); the cooldown PUT + // failed. Surface the error but keep the add row open so it's visible. The + // user can edit the cooldown on the now-saved row. + addError = cooldownResult.error; + void refreshLimits(); + void refreshStatus(); + return; + } + } else { + adding = false; + } + addOpen = false; + newLimitInput = ""; + newCooldownInput = ""; + void refreshLimits(); + void refreshStatus(); + } + + // Wrap the ports so a row's save/remove reloads the authoritative list + status + // on success (the row still gets the result to drive its own UI). + async function rowSave(providerId: string, limit: number) { + const result = await saveLimit(providerId, limit); + if (result.ok) { + void refreshLimits(); + void refreshStatus(); + } + return result; + } + + async function rowRemove(providerId: string) { + const result = await deleteLimit(providerId); + if (result.ok) { + void refreshLimits(); + void refreshStatus(); + } + return result; + } + + // Wrap the cooldown save so a successful PUT refreshes the live status (which + // re-carries the new `cooldownMs`). The row still gets the result to drive its + // own UI. + async function cooldownSave(providerId: string, cooldownMs: number) { + const result = await saveCooldown(providerId, cooldownMs); + if (result.ok) { + void refreshStatus(); + } + return result; + } + + // ── Live status (polls while mounted — seeds cooldown inputs + drives the + // auto-reduce banners; the poll is silent, no status cards) ──────────────── + let statusEntries = $state<readonly ConcurrencyStatusEntry[]>([]); + let statusError = $state<string | null>(null); + /** True after the first load settles (gates the empty state). */ + let hasLoadedStatus = $state(false); + /** Re-entrancy guard for the 2s background poll (no UI — a visible loading + * indicator flickered every poll because the refresh is near-instant; it stays + * INVISIBLE, mirroring the heartbeat runs list). */ + let statusInFlight = false; + + // Per-provider status view (from the live status poll) so each saved limit row + // renders its in-flight count + status badge + seeds its cooldown input. Null + // when a provider has no status entry yet (the row falls back to Idle + the + // server-default cooldown of 350). + const statusByProvider = $derived.by(() => { + const map = new Map<string, ConcurrencyStatusView>(); + for (const e of statusEntries) map.set(e.providerId, viewConcurrencyStatus(e)); + return map; + }); + + // ── Auto-reduce banners (persist while autoReduced===true; dismissible) ─────── + // + // When a provider's limit is auto-reduced by a 429, `GET /concurrency/status` + // carries `autoReduced: true` (+ `autoReducedFrom` + `notice`). We render a + // banner per such provider. The banner is DISMISSIBLE: a dismissed provider + // stays hidden while it remains auto-reduced (persist-while-true), and is + // UN-dismissed the moment a poll shows it no longer auto-reduced — so a future + // auto-reduce re-shows the banner. Restoring the limit (PUT) clears + // `autoReduced` server-side → the next poll drops the banner automatically. + // + // The dismissed set is intentionally COMPONENT-LOCAL (NOT persisted to + // localStorage / a module-global): it resets on remount (sidebar view switch / + // reload). This is correct — `autoReduced` is a REAL persisted degraded state, + // so re-showing the banner on a fresh mount reminds the user. Persisting a + // dismissal across reloads would risk HIDING an ongoing degradation (a + // footgun), and AGENTS.md forbids module-global ambient state. Mirrors the + // component-local `limitsError`/`statusError` pattern. + let dismissedAutoReduce = $state<ReadonlySet<string>>(new Set()); + + const allNotices = $derived(autoReduceNotices(statusEntries)); + const visibleNotices = $derived( + allNotices.filter((n) => !dismissedAutoReduce.has(n.providerId)), + ); + + // Reconcile the dismissed set against the live auto-reduced providers: keep a + // dismissed entry ONLY while its provider is still auto-reduced. A provider + // that has been restored (no longer in `allNotices`) is dropped from the + // dismissed set so a future auto-reduce re-shows its banner. + $effect(() => { + const autoReducedIds = new Set(allNotices.map((n) => n.providerId)); + untrack(() => { + let changed = false; + const next = new Set<string>(); + for (const id of dismissedAutoReduce) { + if (autoReducedIds.has(id)) next.add(id); + else changed = true; + } + if (changed) dismissedAutoReduce = next; + }); + }); + + function dismissAutoReduce(providerId: string): void { + if (dismissedAutoReduce.has(providerId)) return; + dismissedAutoReduce = new Set([...dismissedAutoReduce, providerId]); + } + + // "Restore to N" — PUT the limit back to `autoReducedFrom` via the limits + // endpoint (a manual PUT clears `autoReduced` server-side). Refreshes limits + + // status on success; the next status poll shows `autoReduced===false` and the + // banner drops (the dismissed-set effect above un-dismisses it too). The banner + // component owns its own restoring-spinner + inline error; on FAILURE the + // outcome is bubbled back so the banner shows the error inline (instead of + // silently re-enabling the button / surfacing it only in the limits section). + async function restoreLimit(providerId: string, limit: number): Promise<RestoreOutcome> { + const result = await saveLimit(providerId, limit); + if (result.ok) { + void refreshLimits(); + void refreshStatus(); + return { ok: true }; + } + return { ok: false, error: result.error }; + } + + async function refreshStatus(): Promise<void> { + if (statusInFlight) return; + statusInFlight = true; + const result = await loadStatus(); + statusInFlight = false; + hasLoadedStatus = true; + if (result.ok) { + statusEntries = result.providers; + // Clear the error only on success so it stays visible (stable, no flicker) + // during an in-flight retry rather than vanishing mid-poll. + statusError = null; + } else { + statusError = result.error; + } + } + + const STATUS_POLL_MS = 2000; + + // Load limits + status on mount, and poll the live status while the view is + // alive (so a saved limit's cooldown input re-seeds + auto-reduce banners stay + // fresh without a manual refresh). Runs once — no reactive deps read inside. + $effect(() => { + untrack(() => { + void refreshLimits(); + void refreshStatus(); + }); + const h = setInterval(() => { + void refreshStatus(); + }, STATUS_POLL_MS); + return () => clearInterval(h); + }); +</script> + +<div class="flex flex-col gap-4"> + <!-- Auto-reduce banners (appear when a provider's limit was auto-reduced by a 429) --> + {#if visibleNotices.length > 0} + <section class="flex flex-col gap-2" aria-label="Concurrency auto-reduce notices"> + {#each visibleNotices as notice (notice.providerId)} + <AutoReduceBanner {notice} onRestore={restoreLimit} onDismiss={dismissAutoReduce} /> + {/each} + </section> + {/if} + + <!-- Limits (config) — a single list of editable rows. --> + <section class="flex flex-col gap-2"> + <div class="flex items-center justify-between gap-2"> + <h3 class="text-xs font-semibold uppercase opacity-60">Concurrency limits</h3> + <button + type="button" + class="btn btn-ghost btn-xs" + onclick={() => { + void refreshLimits(); + void refreshStatus(); + }} + aria-label="Refresh concurrency limits" + > + Refresh + </button> + </div> + + <span class="text-xs opacity-70">{limitsSummary}</span> + + {#if limitsError} + <p class="text-xs text-error">{limitsError}</p> + {:else if hasLoadedLimits && limitViews.length === 0 && !addOpen} + <p class="text-xs opacity-60">No limits configured — providers run unlimited.</p> + {/if} + + <ul class="flex flex-col gap-2"> + {#each limitViews as limit (limit.providerId)} + <li> + <ConcurrencyLimitRow + {limit} + status={statusByProvider.get(limit.providerId) ?? null} + save={rowSave} + saveCooldown={cooldownSave} + remove={rowRemove} + /> + </li> + {/each} + </ul> + + <!-- Add row: an "Add" button reveals a new item (dropdown + limit + cooldown + + Set + ✕). Set saves the limit (+ cooldown when moved off the default); + ✕ cancels the draft. --> + {#if addOpen} + <div class="flex flex-col gap-1 rounded-box bg-base-200 p-2 text-sm"> + <!-- All on one line — nowrap so the buttons never wrap (tight gap + narrow + inputs keep the provider dropdown visible; it shrinks via flex-1 + min-w-0). --> + <div class="flex flex-nowrap items-center gap-1"> + <select + class="select select-bordered select-xs min-w-0 flex-1 font-mono" + aria-label="Provider" + bind:value={newProviderId} + disabled={adding || providerOpts.length === 0} + > + {#if providerOpts.length === 0} + <option value="" disabled>No providers available</option> + {:else} + {#each providerOpts as provider (provider)} + <option value={provider}>{provider}</option> + {/each} + {/if} + </select> + <input + type="text" + inputmode="numeric" + class="input input-bordered input-xs w-12 min-w-0 font-mono" + placeholder="4" + aria-label="New concurrency limit" + bind:value={newLimitInput} + disabled={adding} + /> + <input + type="text" + inputmode="numeric" + class="input input-bordered input-xs w-14 min-w-0 font-mono" + aria-label="New release cooldown (ms)" + bind:value={newCooldownInput} + disabled={adding} + /> + <span class="shrink-0 text-[10px] opacity-50">ms</span> + <button + type="button" + class="btn btn-primary btn-xs shrink-0" + disabled={!canSet} + onclick={handleAdd} + > + {#if adding} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Set + {/if} + </button> + <button + type="button" + class="btn btn-ghost btn-xs shrink-0 text-error" + aria-label="Cancel add" + disabled={adding} + onclick={cancelAdd} + > + ✕ + </button> + </div> + {#if addError} + <p class="font-mono text-xs text-error">{addError}</p> + {/if} + </div> + {:else} + <button type="button" class="btn btn-ghost btn-xs w-fit" onclick={startAdd}> + + Add + </button> + {/if} + </section> +</div> diff --git a/src/features/concurrency/ui/ConcurrencyView.test.ts b/src/features/concurrency/ui/ConcurrencyView.test.ts new file mode 100644 index 0000000..a8163c2 --- /dev/null +++ b/src/features/concurrency/ui/ConcurrencyView.test.ts @@ -0,0 +1,559 @@ +import type { ConcurrencyStatusEntry } from "@dispatch/transport-contract"; +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it } from "vitest"; +import type { + ConcurrencyCooldownResult, + ConcurrencyDeleteResult, + ConcurrencyLimitResult, + ConcurrencyLimitsResult, + ConcurrencyStatusResult, +} from "../logic/types"; +import ConcurrencyView from "./ConcurrencyView.svelte"; + +// Available models → provider ids are "umans", "anthropic", "openai-compat". +const MODELS = ["umans/umans-glm-5.2", "anthropic/claude-sonnet", "openai-compat/gpt-4o"] as const; + +// A status entry factory (defaults to a healthy limited provider). The new +// concurrency-fixes fields (`cooldownMs`, `autoReduced`) are always present. +function statusEntry(over: Partial<ConcurrencyStatusEntry> = {}): ConcurrencyStatusEntry { + return { + providerId: "umans", + limit: 4, + inFlight: 2, + queued: 1, + paused: false, + cooldownMs: 350, + autoReduced: false, + ...over, + }; +} + +// Fakes for the injected ports. Each resolves immediately so the mount effect's +// initial load settles in a microtask (assertions await via findBy*). The status +// list is mutable so a test can flip `autoReduced` between polls to simulate a +// restore clearing the banner. +function makeFakes(opts?: { + limits?: readonly { providerId: string; limit: number }[]; + status?: ConcurrencyStatusEntry[]; + /** + * When set, `saveLimit` rejects with this error (returns `ok: false`) — used + * to test the auto-reduce banner's inline restore-error feedback. + */ + saveLimitError?: string; + /** + * Optional hook invoked inside `saveLimit` AFTER recording the call. Lets a + * test simulate a backend side-effect of the PUT (e.g. clearing `autoReduced` + * on the next status poll). Receives the providerId + limit + the fakes bag so + * it can mutate the status list. (A plain method reassignment would NOT reach + * the already-rendered component — the prop captured the original closure.) + */ + onSaveLimit?: ( + providerId: string, + limit: number, + self: { calls: MakeFakesCalls; setStatus: (next: ConcurrencyStatusEntry[]) => void }, + ) => void; +}) { + let limits = opts?.limits ?? [{ providerId: "umans", limit: 4 }]; + let status = opts?.status ?? [statusEntry()]; + const onSaveLimit = opts?.onSaveLimit; + const saveLimitError = opts?.saveLimitError; + + const calls: MakeFakesCalls = { + loadLimits: 0, + loadStatus: 0, + saves: [] as { providerId: string; limit: number }[], + deletes: [] as string[], + cooldownSaves: [] as { providerId: string; cooldownMs: number }[], + }; + + function setStatus(next: ConcurrencyStatusEntry[]): void { + status = next; + } + + return { + calls, + // Allow a test to mutate the status list between polls (e.g. clear + // autoReduced after a restore to simulate the next poll). + setStatus, + loadLimits: async (): Promise<ConcurrencyLimitsResult> => { + calls.loadLimits++; + return { ok: true, limits }; + }, + saveLimit: async (providerId: string, limit: number): Promise<ConcurrencyLimitResult> => { + calls.saves.push({ providerId, limit }); + if (saveLimitError !== undefined) { + return { ok: false, error: saveLimitError }; + } + // Reflect the new limit into the list the next load returns. + limits = [...limits.filter((l) => l.providerId !== providerId), { providerId, limit }]; + if (onSaveLimit !== undefined) onSaveLimit(providerId, limit, { calls, setStatus }); + return { ok: true, providerId, limit }; + }, + deleteLimit: async (providerId: string): Promise<ConcurrencyDeleteResult> => { + calls.deletes.push(providerId); + limits = limits.filter((l) => l.providerId !== providerId); + return { ok: true, providerId }; + }, + loadStatus: async (): Promise<ConcurrencyStatusResult> => { + calls.loadStatus++; + return { ok: true, providers: status }; + }, + saveCooldown: async ( + providerId: string, + cooldownMs: number, + ): Promise<ConcurrencyCooldownResult> => { + calls.cooldownSaves.push({ providerId, cooldownMs }); + // Reflect the new cooldown into the status list the next load returns. + status = status.map((s) => (s.providerId === providerId ? { ...s, cooldownMs } : s)); + return { ok: true, providerId, cooldownMs }; + }, + }; +} + +type MakeFakesCalls = { + loadLimits: number; + loadStatus: number; + saves: { providerId: string; limit: number }[]; + deletes: string[]; + cooldownSaves: { providerId: string; cooldownMs: number }[]; +}; + +function props(fakes: ReturnType<typeof makeFakes>) { + return { + models: MODELS as unknown as readonly string[], + loadLimits: fakes.loadLimits, + saveLimit: fakes.saveLimit, + deleteLimit: fakes.deleteLimit, + loadStatus: fakes.loadStatus, + saveCooldown: fakes.saveCooldown, + }; +} + +describe("ConcurrencyView", () => { + it("loads + renders the configured limits list on mount", async () => { + const fakes = makeFakes(); + render(ConcurrencyView, { props: props(fakes) }); + + // The limits summary + the row's remove control (unique to the limits list). + expect(await screen.findByText(/1 limit configured/)).toBeInTheDocument(); + expect(await screen.findByLabelText("Remove concurrency limit for umans")).toBeVisible(); + expect(fakes.calls.loadLimits).toBeGreaterThanOrEqual(1); + expect(fakes.calls.loadStatus).toBeGreaterThanOrEqual(1); + }); + + it("renders the per-provider cooldown input seeded from the live status", async () => { + const fakes = makeFakes({ status: [statusEntry({ cooldownMs: 350 })] }); + render(ConcurrencyView, { props: props(fakes) }); + + // The saved row's cooldown input (in the same row as the limit) is seeded 350. + const cooldownInput = await screen.findByLabelText("Release cooldown (ms) for umans"); + expect((cooldownInput as HTMLInputElement).value).toBe("350"); + }); + + it("renders a status line (in-flight count left + badge right) below the edit line", async () => { + // Default status: limit 4, inFlight 2, queued 1, not paused → Active, "2/4". + const fakes = makeFakes(); + render(ConcurrencyView, { props: props(fakes) }); + + expect(await screen.findByText("2/4 in flight")).toBeVisible(); + expect(await screen.findByText("Active")).toBeVisible(); + }); + + it("shows the At-capacity badge when in-flight is at the cap with a queue", async () => { + const fakes = makeFakes({ + status: [statusEntry({ inFlight: 4, limit: 4, queued: 3 })], + }); + render(ConcurrencyView, { props: props(fakes) }); + + expect(await screen.findByText("4/4 in flight")).toBeVisible(); + expect(await screen.findByText("At capacity")).toBeVisible(); + }); + + it("shows the Idle badge when no slots are in flight", async () => { + const fakes = makeFakes({ + status: [statusEntry({ inFlight: 0, limit: 4, queued: 0 })], + }); + render(ConcurrencyView, { props: props(fakes) }); + + expect(await screen.findByText("0/4 in flight")).toBeVisible(); + expect(await screen.findByText("Idle")).toBeVisible(); + }); + + it("surfaces NO loading indicator during refresh (background poll is silent — no flicker)", async () => { + // The 2s status poll + post-mutation reloads are SILENT: they never toggle a + // visible loading state, so the Refresh button is plain-text (no spinner). + const fakes = makeFakes(); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/1 limit configured/); + + const limitsRefresh = screen.getByLabelText("Refresh concurrency limits"); + expect(limitsRefresh).toHaveTextContent("Refresh"); + expect(limitsRefresh.querySelector(".loading-spinner")).toBeNull(); + expect(limitsRefresh).not.toBeDisabled(); + + // A manual refresh stays silent too (no spinner appears). + await fakes.loadStatus(); + expect(limitsRefresh.querySelector(".loading-spinner")).toBeNull(); + }); + + it("shows an empty state + Add button when no limits are configured", async () => { + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + expect(await screen.findByText(/No limits configured/)).toBeInTheDocument(); + expect(screen.getByRole("button", { name: "+ Add" })).toBeVisible(); + // No provider dropdown until Add is clicked. + expect(screen.queryByLabelText("Provider")).toBeNull(); + }); + + it("reveals a new item row (dropdown + limit + cooldown + Set + ✕) when Add is clicked", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + + // The new-item row appears with a provider dropdown (auto-selected first), + // a limit input, a cooldown input (seeded with the default 350), Set + ✕. + const providerSelect = screen.getByLabelText("Provider"); + expect((providerSelect as HTMLSelectElement).value).not.toBe(""); + expect(screen.getByPlaceholderText("4")).toBeVisible(); + const cooldownInput = screen.getByLabelText("New release cooldown (ms)"); + expect((cooldownInput as HTMLInputElement).value).toBe("350"); + expect(screen.getByRole("button", { name: "Set" })).toBeVisible(); + expect(screen.getByRole("button", { name: "Cancel add" })).toBeVisible(); + }); + + it("adds a provider limit via the new-item row Set (calls saveLimit + reloads)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + + const providerSelect = screen.getByLabelText("Provider"); + // Choose "anthropic" from the dropdown (the list is auto-selected first). + await user.selectOptions(providerSelect, "anthropic"); + await user.type(screen.getByPlaceholderText("4"), "8"); + await user.click(screen.getByRole("button", { name: "Set" })); + + expect(fakes.calls.saves).toEqual([{ providerId: "anthropic", limit: 8 }]); + // The cooldown was left at the default (350) → no extra cooldown PUT fired. + expect(fakes.calls.cooldownSaves).toHaveLength(0); + // After save the component reloads the limits list (now showing the row). + expect(fakes.calls.loadLimits).toBeGreaterThanOrEqual(2); + expect(await screen.findByText(/1 limit configured/)).toBeInTheDocument(); + expect(await screen.findByLabelText("Remove concurrency limit for anthropic")).toBeVisible(); + // The add row closed back to the Add button. + expect(screen.getByRole("button", { name: "+ Add" })).toBeVisible(); + }); + + it("sends a cooldown PUT when the new item's cooldown is moved off the default", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + + await user.selectOptions(screen.getByLabelText("Provider"), "anthropic"); + await user.type(screen.getByPlaceholderText("4"), "8"); + const cooldownInput = screen.getByLabelText("New release cooldown (ms)"); + await user.clear(cooldownInput); + await user.type(cooldownInput, "500"); + await user.click(screen.getByRole("button", { name: "Set" })); + + expect(fakes.calls.saves).toEqual([{ providerId: "anthropic", limit: 8 }]); + expect(fakes.calls.cooldownSaves).toEqual([{ providerId: "anthropic", cooldownMs: 500 }]); + }); + + it("disables Set when the limit is empty/invalid (provider is auto-selected)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + + const providerSelect = screen.getByLabelText("Provider"); + // A provider is auto-selected from the dropdown. + expect((providerSelect as HTMLSelectElement).value).not.toBe(""); + const setBtn = screen.getByRole("button", { name: "Set" }); + expect(setBtn).toBeDisabled(); // no limit entered yet + + // An invalid (non-numeric) limit keeps Set disabled. + await user.type(screen.getByPlaceholderText("4"), "abc"); + expect(setBtn).toBeDisabled(); + + // A valid positive-integer limit enables Set. + const limitInput = screen.getByPlaceholderText("4"); + await user.clear(limitInput); + await user.type(limitInput, "5"); + expect(setBtn).toBeEnabled(); + }); + + it("shows no-providers + disables the dropdown when there are no models", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { + props: { ...props(fakes), models: [] as unknown as readonly string[] }, + }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + + const providerSelect = screen.getByLabelText("Provider"); + expect(providerSelect).toBeDisabled(); + expect(screen.getByRole("button", { name: "Set" })).toBeDisabled(); + }); + + it("cancels the new-item row (✕) without saving", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ limits: [], status: [] }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByText(/No limits configured/); + await user.click(screen.getByRole("button", { name: "+ Add" })); + await user.type(screen.getByPlaceholderText("4"), "8"); + await user.click(screen.getByRole("button", { name: "Cancel add" })); + + // The row collapses back to the Add button; nothing was saved. + expect(screen.queryByLabelText("Provider")).toBeNull(); + expect(screen.getByRole("button", { name: "+ Add" })).toBeVisible(); + expect(fakes.calls.saves).toHaveLength(0); + }); + + it("removes a provider limit via the row ✕ (calls deleteLimit + reloads)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes(); + render(ConcurrencyView, { props: props(fakes) }); + + // Wait for the limits to load (unique summary) before interacting. + await screen.findByText(/1 limit configured/); + await user.click(screen.getByLabelText("Remove concurrency limit for umans")); + + expect(fakes.calls.deletes).toEqual(["umans"]); + expect(fakes.calls.loadLimits).toBeGreaterThanOrEqual(2); + }); + + it("surfaces a load error from the limits endpoint", async () => { + const failing = { + models: MODELS as unknown as readonly string[], + loadLimits: async (): Promise<ConcurrencyLimitsResult> => ({ + ok: false, + error: "Concurrency service not available", + }), + saveLimit: async (): Promise<ConcurrencyLimitResult> => ({ ok: false, error: "noop" }), + deleteLimit: async (): Promise<ConcurrencyDeleteResult> => ({ ok: false, error: "noop" }), + loadStatus: async (): Promise<ConcurrencyStatusResult> => ({ ok: true, providers: [] }), + saveCooldown: async (): Promise<ConcurrencyCooldownResult> => ({ ok: false, error: "noop" }), + }; + render(ConcurrencyView, { props: failing }); + expect(await screen.findByText("Concurrency service not available")).toBeVisible(); + }); + + // ── Concurrency-fixes: auto-reduce banner + cooldown editing ──────────────── + + it("renders an auto-reduce banner (with the backend notice + Restore) when a provider is auto-reduced", async () => { + const fakes = makeFakes({ + status: [ + statusEntry({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429 — restore manually when ready.", + }), + ], + }); + render(ConcurrencyView, { props: props(fakes) }); + + // The banner shows the backend notice verbatim + a "Restore to 4" action. + expect(await screen.findByText(/auto-reduced to 3 after a 429/)).toBeVisible(); + expect(await screen.findByRole("button", { name: /Restore to 4/ })).toBeVisible(); + // The "Was 4, now 3." provenance line is shown. + expect(await screen.findByText(/Was 4, now 3\./)).toBeVisible(); + }); + + it("clears the banner after Restore (next status poll shows autoReduced===false)", async () => { + const user = userEvent.setup(); + // Start auto-reduced (limit 3, was 4). The restore PUT clears `autoReduced` + // server-side; the next status poll returns limit 4 + autoReduced===false → + // the banner drops. + const fakes = makeFakes({ + status: [ + statusEntry({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429.", + }), + ], + onSaveLimit: (_providerId, limit, self) => { + // Simulate the backend clearing `autoReduced` on the manual PUT: the next + // status load returns the restored limit with autoReduced===false. + self.setStatus([statusEntry({ limit, autoReduced: false })]); + }, + }); + render(ConcurrencyView, { props: props(fakes) }); + + const restoreBtn = await screen.findByRole("button", { name: /Restore to 4/ }); + await user.click(restoreBtn); + + // The restore PUT the limit back to the original (autoReducedFrom = 4). + expect(fakes.calls.saves).toEqual([{ providerId: "umans", limit: 4 }]); + // The banner is gone (no Restore button, no notice text); the limits list + // now reflects the restored limit (the row's limit input re-seeds to 4). + const limitInput = await screen.findByLabelText("Concurrency limit for umans"); + expect((limitInput as HTMLInputElement).value).toBe("4"); + expect(screen.queryByRole("button", { name: /Restore to/ })).toBeNull(); + expect(screen.queryByText(/auto-reduced to 3 after a 429/)).toBeNull(); + }); + + it("dismisses the auto-reduce banner locally while it stays auto-reduced", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ + status: [ + statusEntry({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429.", + }), + ], + }); + render(ConcurrencyView, { props: props(fakes) }); + + await screen.findByRole("button", { name: /Restore to 4/ }); + // Dismiss the banner (hide locally — the provider is still auto-reduced). + await user.click(screen.getByLabelText("Dismiss auto-reduce notice for umans")); + expect(screen.queryByRole("button", { name: /Restore to/ })).toBeNull(); + expect(screen.queryByText(/auto-reduced to 3 after a 429/)).toBeNull(); + }); + + it("shows an inline error in the banner when the Restore PUT fails (no silent re-enable)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ + status: [ + statusEntry({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429.", + }), + ], + saveLimitError: "Concurrency service not available", + }); + render(ConcurrencyView, { props: props(fakes) }); + + const restoreBtn = await screen.findByRole("button", { name: /Restore to 4/ }); + await user.click(restoreBtn); + + // The error surfaces INLINE in the banner (near the restore action), not + // only in the far-away limits section. The banner is still present (restore + // did not succeed) and the button re-enabled for a retry. + expect(await screen.findByTestId("restore-error-umans")).toHaveTextContent( + "Concurrency service not available", + ); + expect(screen.getByRole("button", { name: /Restore to 4/ })).toBeVisible(); + expect(screen.getByRole("button", { name: /Restore to 4/ })).not.toBeDisabled(); + // The restore PUT was attempted. + expect(fakes.calls.saves).toEqual([{ providerId: "umans", limit: 4 }]); + }); + + it("clears the inline restore error on a retry that succeeds", async () => { + const user = userEvent.setup(); + // First restore fails; the second succeeds (clears autoReduced). Reassigning + // `fakes.saveLimit` BEFORE `props(fakes)` is captured would NOT reach the + // rendered component, so swap it BEFORE render here. + const fakes = makeFakes({ + status: [ + statusEntry({ + limit: 3, + autoReduced: true, + autoReducedFrom: 4, + notice: "Concurrency limit auto-reduced to 3 after a 429.", + }), + ], + onSaveLimit: (_providerId, limit, self) => { + self.setStatus([statusEntry({ limit, autoReduced: false })]); + }, + }); + let attempts = 0; + const succeeding = fakes.saveLimit; + fakes.saveLimit = async (providerId, limit) => { + attempts++; + if (attempts === 1) return { ok: false, error: "Concurrency service not available" }; + return succeeding(providerId, limit); + }; + render(ConcurrencyView, { props: props(fakes) }); + + const restoreBtn = await screen.findByRole("button", { name: /Restore to 4/ }); + await user.click(restoreBtn); + // First attempt: inline error appears. + expect(await screen.findByTestId("restore-error-umans")).toBeInTheDocument(); + + // Retry: the error clears, the banner drops (restore succeeded). + await user.click(screen.getByRole("button", { name: /Restore to 4/ })); + const limitInput = await screen.findByLabelText("Concurrency limit for umans"); + expect((limitInput as HTMLInputElement).value).toBe("4"); + expect(screen.queryByTestId("restore-error-umans")).toBeNull(); + expect(screen.queryByRole("button", { name: /Restore to/ })).toBeNull(); + }); + + it("edits the per-provider cooldown in the limit row (PUT /concurrency/cooldown + reloads)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ status: [statusEntry({ cooldownMs: 350 })] }); + render(ConcurrencyView, { props: props(fakes) }); + + // Wait for the saved row + its cooldown input (seeded with 350). + const cooldownInput = await screen.findByLabelText("Release cooldown (ms) for umans"); + expect((cooldownInput as HTMLInputElement).value).toBe("350"); + + await user.clear(cooldownInput); + await user.type(cooldownInput, "500"); + await user.click(screen.getByRole("button", { name: "Set concurrency for umans" })); + + // The cooldown PUT fired with the new value. + expect(fakes.calls.cooldownSaves).toEqual([{ providerId: "umans", cooldownMs: 500 }]); + // The limit was NOT re-saved (unchanged) — only the cooldown PUT fired. + expect(fakes.calls.saves).toHaveLength(0); + }); + + it("edits the per-provider limit in the row (PUT /concurrency/limits + reloads)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes(); + render(ConcurrencyView, { props: props(fakes) }); + + const limitInput = await screen.findByLabelText("Concurrency limit for umans"); + expect((limitInput as HTMLInputElement).value).toBe("4"); + + await user.clear(limitInput); + await user.type(limitInput, "8"); + await user.click(screen.getByRole("button", { name: "Set concurrency for umans" })); + + expect(fakes.calls.saves).toEqual([{ providerId: "umans", limit: 8 }]); + // Cooldown unchanged → no cooldown PUT. + expect(fakes.calls.cooldownSaves).toHaveLength(0); + }); + + it("rejects a negative cooldown input (Set disabled — non-negative integer only)", async () => { + const user = userEvent.setup(); + const fakes = makeFakes({ status: [statusEntry({ cooldownMs: 350 })] }); + render(ConcurrencyView, { props: props(fakes) }); + + const cooldownInput = await screen.findByLabelText("Release cooldown (ms) for umans"); + // 0 is valid (no cooldown); a negative is not. + await user.clear(cooldownInput); + await user.type(cooldownInput, "0"); + expect(screen.getByRole("button", { name: "Set concurrency for umans" })).toBeEnabled(); + + await user.clear(cooldownInput); + await user.type(cooldownInput, "-5"); + expect(screen.getByRole("button", { name: "Set concurrency for umans" })).toBeDisabled(); + expect(fakes.calls.cooldownSaves).toHaveLength(0); + }); +}); diff --git a/src/features/conversation-cache/cache.test.ts b/src/features/conversation-cache/cache.test.ts index 89e81b8..ce1c60c 100644 --- a/src/features/conversation-cache/cache.test.ts +++ b/src/features/conversation-cache/cache.test.ts @@ -4,9 +4,9 @@ import { createConversationCache } from "./cache"; import type { ConversationCacheIndexEntry, ConversationChunkStore } from "./types"; const chunk = (seq: number, role: "user" | "assistant" = "user"): StoredChunk => ({ - seq, - role, - chunk: { type: "text", text: `chunk-${seq}` }, + seq, + role, + chunk: { type: "text", text: `chunk-${seq}` }, }); /** @@ -14,184 +14,184 @@ const chunk = (seq: number, role: "user" | "assistant" = "user"): StoredChunk => * An outermost edge: simulates the storage port without any real I/O. */ function createFakeStore(): ConversationChunkStore { - const store = new Map<string, StoredChunk[]>(); - - return { - async load(conversationId) { - return store.get(conversationId) ?? []; - }, - - async append(conversationId, chunks) { - const existing = store.get(conversationId) ?? []; - const existingSeqs = new Set(existing.map((c) => c.seq)); - const toAdd = chunks.filter((c) => !existingSeqs.has(c.seq)); - store.set( - conversationId, - [...existing, ...toAdd].sort((a, b) => a.seq - b.seq), - ); - }, - - async delete(conversationId) { - store.delete(conversationId); - }, - - async index() { - const entries: ConversationCacheIndexEntry[] = []; - for (const [id, chunks] of store) { - if (chunks.length === 0) continue; - let maxSeq = 0; - for (const c of chunks) { - if (c.seq > maxSeq) maxSeq = c.seq; - } - entries.push({ - conversationId: id, - chunkCount: chunks.length, - maxSeq, - }); - } - return entries; - }, - }; + const store = new Map<string, StoredChunk[]>(); + + return { + async load(conversationId) { + return store.get(conversationId) ?? []; + }, + + async append(conversationId, chunks) { + const existing = store.get(conversationId) ?? []; + const existingSeqs = new Set(existing.map((c) => c.seq)); + const toAdd = chunks.filter((c) => !existingSeqs.has(c.seq)); + store.set( + conversationId, + [...existing, ...toAdd].sort((a, b) => a.seq - b.seq), + ); + }, + + async delete(conversationId) { + store.delete(conversationId); + }, + + async index() { + const entries: ConversationCacheIndexEntry[] = []; + for (const [id, chunks] of store) { + if (chunks.length === 0) continue; + let maxSeq = 0; + for (const c of chunks) { + if (c.seq > maxSeq) maxSeq = c.seq; + } + entries.push({ + conversationId: id, + chunkCount: chunks.length, + maxSeq, + }); + } + return entries; + }, + }; } describe("cache.load", () => { - it("returns stored chunks", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - await store.append("conv-1", [chunk(1), chunk(2)]); - const result = await cache.load("conv-1"); - expect(result).toEqual([chunk(1), chunk(2)]); - }); - - it("returns empty array for absent conversation", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - const result = await cache.load("nonexistent"); - expect(result).toEqual([]); - }); + it("returns stored chunks", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + await store.append("conv-1", [chunk(1), chunk(2)]); + const result = await cache.load("conv-1"); + expect(result).toEqual([chunk(1), chunk(2)]); + }); + + it("returns empty array for absent conversation", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + const result = await cache.load("nonexistent"); + expect(result).toEqual([]); + }); }); describe("cache.commit", () => { - it("appends only new chunks", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - await store.append("conv-1", [chunk(1), chunk(2)]); - - const merged = await cache.commit("conv-1", [chunk(2), chunk(3)]); - expect(merged).toEqual([chunk(1), chunk(2), chunk(3)]); - - // Verify store has all chunks - const stored = await store.load("conv-1"); - expect(stored).toEqual([chunk(1), chunk(2), chunk(3)]); - }); - - it("returns full merged result", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - - const merged = await cache.commit("conv-1", [chunk(3), chunk(1)]); - expect(merged).toEqual([chunk(1), chunk(3)]); - }); - - it("is idempotent — re-committing same chunks is a no-op", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - - await cache.commit("conv-1", [chunk(1), chunk(2)]); - const merged = await cache.commit("conv-1", [chunk(1), chunk(2)]); - expect(merged).toEqual([chunk(1), chunk(2)]); - - const stored = await store.load("conv-1"); - expect(stored).toEqual([chunk(1), chunk(2)]); - }); + it("appends only new chunks", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + await store.append("conv-1", [chunk(1), chunk(2)]); + + const merged = await cache.commit("conv-1", [chunk(2), chunk(3)]); + expect(merged).toEqual([chunk(1), chunk(2), chunk(3)]); + + // Verify store has all chunks + const stored = await store.load("conv-1"); + expect(stored).toEqual([chunk(1), chunk(2), chunk(3)]); + }); + + it("returns full merged result", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + + const merged = await cache.commit("conv-1", [chunk(3), chunk(1)]); + expect(merged).toEqual([chunk(1), chunk(3)]); + }); + + it("is idempotent — re-committing same chunks is a no-op", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + + await cache.commit("conv-1", [chunk(1), chunk(2)]); + const merged = await cache.commit("conv-1", [chunk(1), chunk(2)]); + expect(merged).toEqual([chunk(1), chunk(2)]); + + const stored = await store.load("conv-1"); + expect(stored).toEqual([chunk(1), chunk(2)]); + }); }); describe("cache.sinceSeq", () => { - it("returns max seq from cache", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - await store.append("conv-1", [chunk(1), chunk(5), chunk(3)]); - expect(await cache.sinceSeq("conv-1")).toBe(5); - }); - - it("returns 0 for empty conversation", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); - expect(await cache.sinceSeq("conv-1")).toBe(0); - }); + it("returns max seq from cache", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + await store.append("conv-1", [chunk(1), chunk(5), chunk(3)]); + expect(await cache.sinceSeq("conv-1")).toBe(5); + }); + + it("returns 0 for empty conversation", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); + expect(await cache.sinceSeq("conv-1")).toBe(0); + }); }); describe("cache.evictIfOverBudget", () => { - it("deletes selected conversations", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store, { maxChunks: 5 }); - - await store.append("a", [chunk(1), chunk(2)]); - await store.append("b", [chunk(1), chunk(2)]); - await store.append("c", [chunk(1)]); - - // Total = 5, max = 5, under budget - const evicted = await cache.evictIfOverBudget(null); - expect(evicted).toEqual([]); - - // Add more to go over budget - await store.append("d", [chunk(1), chunk(2), chunk(3)]); - // Total = 8, max = 5, need to evict 3+ chunks - - const evicted2 = await cache.evictIfOverBudget(null); - expect(evicted2.length).toBeGreaterThan(0); - - // Verify evicted conversations are deleted - for (const id of evicted2) { - expect(await store.load(id)).toEqual([]); - } - }); - - it("never evicts the active conversation", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store, { maxChunks: 3 }); - - await store.append("active", [chunk(1), chunk(2), chunk(3)]); - await store.append("other", [chunk(1), chunk(2)]); - - // Total = 5, max = 3, need to evict 2+ chunks - const evicted = await cache.evictIfOverBudget("active"); - expect(evicted).not.toContain("active"); - expect(evicted).toContain("other"); - }); - - it("returns empty when under budget", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store, { maxChunks: 100 }); - - await store.append("a", [chunk(1)]); - await store.append("b", [chunk(1)]); - - const evicted = await cache.evictIfOverBudget(null); - expect(evicted).toEqual([]); - }); + it("deletes selected conversations", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store, { maxChunks: 5 }); + + await store.append("a", [chunk(1), chunk(2)]); + await store.append("b", [chunk(1), chunk(2)]); + await store.append("c", [chunk(1)]); + + // Total = 5, max = 5, under budget + const evicted = await cache.evictIfOverBudget(null); + expect(evicted).toEqual([]); + + // Add more to go over budget + await store.append("d", [chunk(1), chunk(2), chunk(3)]); + // Total = 8, max = 5, need to evict 3+ chunks + + const evicted2 = await cache.evictIfOverBudget(null); + expect(evicted2.length).toBeGreaterThan(0); + + // Verify evicted conversations are deleted + for (const id of evicted2) { + expect(await store.load(id)).toEqual([]); + } + }); + + it("never evicts the active conversation", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store, { maxChunks: 3 }); + + await store.append("active", [chunk(1), chunk(2), chunk(3)]); + await store.append("other", [chunk(1), chunk(2)]); + + // Total = 5, max = 3, need to evict 2+ chunks + const evicted = await cache.evictIfOverBudget("active"); + expect(evicted).not.toContain("active"); + expect(evicted).toContain("other"); + }); + + it("returns empty when under budget", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store, { maxChunks: 100 }); + + await store.append("a", [chunk(1)]); + await store.append("b", [chunk(1)]); + + const evicted = await cache.evictIfOverBudget(null); + expect(evicted).toEqual([]); + }); }); describe("cache.delete", () => { - it("removes the conversation from the store", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); + it("removes the conversation from the store", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); - await store.append("conv-1", [chunk(1), chunk(2)]); - await cache.delete("conv-1"); + await store.append("conv-1", [chunk(1), chunk(2)]); + await cache.delete("conv-1"); - const stored = await store.load("conv-1"); - expect(stored).toEqual([]); - }); + const stored = await store.load("conv-1"); + expect(stored).toEqual([]); + }); - it("then load returns []", async () => { - const store = createFakeStore(); - const cache = createConversationCache(store); + it("then load returns []", async () => { + const store = createFakeStore(); + const cache = createConversationCache(store); - await cache.commit("conv-1", [chunk(1), chunk(2), chunk(3)]); - await cache.delete("conv-1"); + await cache.commit("conv-1", [chunk(1), chunk(2), chunk(3)]); + await cache.delete("conv-1"); - const result = await cache.load("conv-1"); - expect(result).toEqual([]); - }); + const result = await cache.load("conv-1"); + expect(result).toEqual([]); + }); }); diff --git a/src/features/conversation-cache/cache.ts b/src/features/conversation-cache/cache.ts index 3d5743a..4953944 100644 --- a/src/features/conversation-cache/cache.ts +++ b/src/features/conversation-cache/cache.ts @@ -3,31 +3,31 @@ import { nextSinceSeq, reconcileCache, selectEvictions } from "./logic"; import type { ConversationChunkStore } from "./types"; export interface ConversationCache { - /** Load all cached chunks for a conversation. */ - load(conversationId: string): Promise<readonly StoredChunk[]>; + /** Load all cached chunks for a conversation. */ + load(conversationId: string): Promise<readonly StoredChunk[]>; - /** - * Load + reconcile + append new chunks. - * Returns the merged cache (the new authoritative cache for this conversation). - */ - commit(conversationId: string, incoming: readonly StoredChunk[]): Promise<readonly StoredChunk[]>; + /** + * Load + reconcile + append new chunks. + * Returns the merged cache (the new authoritative cache for this conversation). + */ + commit(conversationId: string, incoming: readonly StoredChunk[]): Promise<readonly StoredChunk[]>; - /** Return the `?sinceSeq=` cursor for the next incremental sync. */ - sinceSeq(conversationId: string): Promise<number>; + /** Return the `?sinceSeq=` cursor for the next incremental sync. */ + sinceSeq(conversationId: string): Promise<number>; - /** - * Evict conversations over budget. - * Returns the evicted conversationIds. - */ - evictIfOverBudget(activeConversationId: string | null): Promise<readonly string[]>; + /** + * Evict conversations over budget. + * Returns the evicted conversationIds. + */ + evictIfOverBudget(activeConversationId: string | null): Promise<readonly string[]>; - /** Delete all cached data for a single conversation (local forget). */ - delete(conversationId: string): Promise<void>; + /** Delete all cached data for a single conversation (local forget). */ + delete(conversationId: string): Promise<void>; } export interface ConversationCacheOptions { - /** Maximum total chunks across all conversations before eviction triggers. */ - readonly maxChunks?: number; + /** Maximum total chunks across all conversations before eviction triggers. */ + readonly maxChunks?: number; } const DEFAULT_MAX_CHUNKS = 10_000; @@ -38,41 +38,41 @@ const DEFAULT_MAX_CHUNKS = 10_000; * The ONLY impurity is the injected `store`; all logic delegates to pure functions. */ export function createConversationCache( - store: ConversationChunkStore, - opts?: ConversationCacheOptions, + store: ConversationChunkStore, + opts?: ConversationCacheOptions, ): ConversationCache { - const maxChunks = opts?.maxChunks ?? DEFAULT_MAX_CHUNKS; + const maxChunks = opts?.maxChunks ?? DEFAULT_MAX_CHUNKS; - return { - async load(conversationId) { - return store.load(conversationId); - }, + return { + async load(conversationId) { + return store.load(conversationId); + }, - async commit(conversationId, incoming) { - const cached = await store.load(conversationId); - const { merged, toAppend } = reconcileCache(cached, incoming); - if (toAppend.length > 0) { - await store.append(conversationId, toAppend); - } - return merged; - }, + async commit(conversationId, incoming) { + const cached = await store.load(conversationId); + const { merged, toAppend } = reconcileCache(cached, incoming); + if (toAppend.length > 0) { + await store.append(conversationId, toAppend); + } + return merged; + }, - async sinceSeq(conversationId) { - const cached = await store.load(conversationId); - return nextSinceSeq(cached); - }, + async sinceSeq(conversationId) { + const cached = await store.load(conversationId); + return nextSinceSeq(cached); + }, - async evictIfOverBudget(activeConversationId) { - const idx = await store.index(); - const toEvict = selectEvictions(idx, { maxChunks, activeConversationId }); - for (const id of toEvict) { - await store.delete(id); - } - return toEvict; - }, + async evictIfOverBudget(activeConversationId) { + const idx = await store.index(); + const toEvict = selectEvictions(idx, { maxChunks, activeConversationId }); + for (const id of toEvict) { + await store.delete(id); + } + return toEvict; + }, - async delete(conversationId) { - await store.delete(conversationId); - }, - }; + async delete(conversationId) { + await store.delete(conversationId); + }, + }; } diff --git a/src/features/conversation-cache/index.ts b/src/features/conversation-cache/index.ts index ba3f69a..25e2af7 100644 --- a/src/features/conversation-cache/index.ts +++ b/src/features/conversation-cache/index.ts @@ -2,7 +2,13 @@ export type { ConversationCache, ConversationCacheOptions } from "./cache"; export { createConversationCache } from "./cache"; export { nextSinceSeq, reconcileCache, selectEvictions } from "./logic"; export type { - ConversationCacheIndexEntry, - ConversationChunkStore, - ReconcileResult, + ConversationCacheIndexEntry, + ConversationChunkStore, + ReconcileResult, } from "./types"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "conversation-cache", + description: "IndexedDB-backed chunk cache with reconciliation", +} as const; diff --git a/src/features/conversation-cache/logic.test.ts b/src/features/conversation-cache/logic.test.ts index 858460a..880c32e 100644 --- a/src/features/conversation-cache/logic.test.ts +++ b/src/features/conversation-cache/logic.test.ts @@ -4,137 +4,137 @@ import { nextSinceSeq, reconcileCache, selectEvictions } from "./logic"; import type { ConversationCacheIndexEntry } from "./types"; const chunk = (seq: number, role: "user" | "assistant" = "user"): StoredChunk => ({ - seq, - role, - chunk: { type: "text", text: `chunk-${seq}` }, + seq, + role, + chunk: { type: "text", text: `chunk-${seq}` }, }); describe("reconcileCache", () => { - it("merges and dedupes by seq", () => { - const cached = [chunk(1), chunk(2)]; - const incoming = [chunk(2), chunk(3)]; - const result = reconcileCache(cached, incoming); - expect(result.merged).toEqual([chunk(1), chunk(2), chunk(3)]); - }); - - it("toAppend excludes already-cached seqs", () => { - const cached = [chunk(1), chunk(2)]; - const incoming = [chunk(2), chunk(3)]; - const result = reconcileCache(cached, incoming); - expect(result.toAppend).toEqual([chunk(3)]); - }); - - it("tolerates out-of-order incoming", () => { - const cached = [chunk(1)]; - const incoming = [chunk(5), chunk(3), chunk(2)]; - const result = reconcileCache(cached, incoming); - expect(result.merged).toEqual([chunk(1), chunk(2), chunk(3), chunk(5)]); - expect(result.toAppend).toEqual([chunk(5), chunk(3), chunk(2)]); - }); - - it("returns empty merged and toAppend when both inputs are empty", () => { - const result = reconcileCache([], []); - expect(result.merged).toEqual([]); - expect(result.toAppend).toEqual([]); - }); - - it("handles empty cached with incoming", () => { - const incoming = [chunk(3), chunk(1)]; - const result = reconcileCache([], incoming); - expect(result.merged).toEqual([chunk(1), chunk(3)]); - expect(result.toAppend).toEqual([chunk(3), chunk(1)]); - }); - - it("handles cached with empty incoming", () => { - const cached = [chunk(1), chunk(2)]; - const result = reconcileCache(cached, []); - expect(result.merged).toEqual([chunk(1), chunk(2)]); - expect(result.toAppend).toEqual([]); - }); - - it("is idempotent — re-reconciling same incoming produces same result", () => { - const cached = [chunk(1)]; - const incoming = [chunk(2), chunk(3)]; - const first = reconcileCache(cached, incoming); - const second = reconcileCache(first.merged, incoming); - expect(second.merged).toEqual(first.merged); - expect(second.toAppend).toEqual([]); - }); + it("merges and dedupes by seq", () => { + const cached = [chunk(1), chunk(2)]; + const incoming = [chunk(2), chunk(3)]; + const result = reconcileCache(cached, incoming); + expect(result.merged).toEqual([chunk(1), chunk(2), chunk(3)]); + }); + + it("toAppend excludes already-cached seqs", () => { + const cached = [chunk(1), chunk(2)]; + const incoming = [chunk(2), chunk(3)]; + const result = reconcileCache(cached, incoming); + expect(result.toAppend).toEqual([chunk(3)]); + }); + + it("tolerates out-of-order incoming", () => { + const cached = [chunk(1)]; + const incoming = [chunk(5), chunk(3), chunk(2)]; + const result = reconcileCache(cached, incoming); + expect(result.merged).toEqual([chunk(1), chunk(2), chunk(3), chunk(5)]); + expect(result.toAppend).toEqual([chunk(5), chunk(3), chunk(2)]); + }); + + it("returns empty merged and toAppend when both inputs are empty", () => { + const result = reconcileCache([], []); + expect(result.merged).toEqual([]); + expect(result.toAppend).toEqual([]); + }); + + it("handles empty cached with incoming", () => { + const incoming = [chunk(3), chunk(1)]; + const result = reconcileCache([], incoming); + expect(result.merged).toEqual([chunk(1), chunk(3)]); + expect(result.toAppend).toEqual([chunk(3), chunk(1)]); + }); + + it("handles cached with empty incoming", () => { + const cached = [chunk(1), chunk(2)]; + const result = reconcileCache(cached, []); + expect(result.merged).toEqual([chunk(1), chunk(2)]); + expect(result.toAppend).toEqual([]); + }); + + it("is idempotent — re-reconciling same incoming produces same result", () => { + const cached = [chunk(1)]; + const incoming = [chunk(2), chunk(3)]; + const first = reconcileCache(cached, incoming); + const second = reconcileCache(first.merged, incoming); + expect(second.merged).toEqual(first.merged); + expect(second.toAppend).toEqual([]); + }); }); describe("nextSinceSeq", () => { - it("returns max seq", () => { - const cached = [chunk(1), chunk(5), chunk(3)]; - expect(nextSinceSeq(cached)).toBe(5); - }); - - it("returns 0 when empty", () => { - expect(nextSinceSeq([])).toBe(0); - }); - - it("returns single seq for single chunk", () => { - expect(nextSinceSeq([chunk(42)])).toBe(42); - }); + it("returns max seq", () => { + const cached = [chunk(1), chunk(5), chunk(3)]; + expect(nextSinceSeq(cached)).toBe(5); + }); + + it("returns 0 when empty", () => { + expect(nextSinceSeq([])).toBe(0); + }); + + it("returns single seq for single chunk", () => { + expect(nextSinceSeq([chunk(42)])).toBe(42); + }); }); describe("selectEvictions", () => { - it("never evicts the active conversation", () => { - const index: ConversationCacheIndexEntry[] = [ - { conversationId: "active", chunkCount: 100, maxSeq: 100, lastAccess: 1000 }, - { conversationId: "other", chunkCount: 50, maxSeq: 50, lastAccess: 1 }, - ]; - const result = selectEvictions(index, { maxChunks: 50, activeConversationId: "active" }); - expect(result).not.toContain("active"); - expect(result).toContain("other"); - }); - - it("evicts LRU until under budget", () => { - const index: ConversationCacheIndexEntry[] = [ - { conversationId: "a", chunkCount: 30, maxSeq: 30, lastAccess: 100 }, - { conversationId: "b", chunkCount: 30, maxSeq: 30, lastAccess: 50 }, - { conversationId: "c", chunkCount: 30, maxSeq: 30, lastAccess: 200 }, - { conversationId: "d", chunkCount: 30, maxSeq: 30, lastAccess: 10 }, - ]; - // Total = 120, max = 60, need to evict 60+ chunks - // LRU order: d(10), b(50), a(100), c(200) - const result = selectEvictions(index, { maxChunks: 60, activeConversationId: null }); - expect(result).toEqual(["d", "b"]); - }); - - it("is a no-op under budget", () => { - const index: ConversationCacheIndexEntry[] = [ - { conversationId: "a", chunkCount: 10, maxSeq: 10, lastAccess: 100 }, - { conversationId: "b", chunkCount: 10, maxSeq: 10, lastAccess: 50 }, - ]; - const result = selectEvictions(index, { maxChunks: 100, activeConversationId: null }); - expect(result).toEqual([]); - }); - - it("returns empty for empty index", () => { - const result = selectEvictions([], { maxChunks: 100, activeConversationId: null }); - expect(result).toEqual([]); - }); - - it("tie-breaks by smaller maxSeq when lastAccess is equal", () => { - const index: ConversationCacheIndexEntry[] = [ - { conversationId: "a", chunkCount: 30, maxSeq: 100, lastAccess: 50 }, - { conversationId: "b", chunkCount: 30, maxSeq: 50, lastAccess: 50 }, - { conversationId: "c", chunkCount: 30, maxSeq: 200, lastAccess: 50 }, - ]; - // Total = 90, max = 60, need to evict 30+ chunks - // All have same lastAccess, tie-break by maxSeq: b(50), a(100), c(200) - const result = selectEvictions(index, { maxChunks: 60, activeConversationId: null }); - expect(result).toEqual(["b"]); - }); - - it("handles missing lastAccess (treated as 0)", () => { - const index: ConversationCacheIndexEntry[] = [ - { conversationId: "a", chunkCount: 30, maxSeq: 30, lastAccess: 100 }, - { conversationId: "b", chunkCount: 30, maxSeq: 30 }, - ]; - // Total = 60, max = 30, need to evict 30+ chunks - // b has no lastAccess (0), a has 100 - const result = selectEvictions(index, { maxChunks: 30, activeConversationId: null }); - expect(result).toEqual(["b"]); - }); + it("never evicts the active conversation", () => { + const index: ConversationCacheIndexEntry[] = [ + { conversationId: "active", chunkCount: 100, maxSeq: 100, lastAccess: 1000 }, + { conversationId: "other", chunkCount: 50, maxSeq: 50, lastAccess: 1 }, + ]; + const result = selectEvictions(index, { maxChunks: 50, activeConversationId: "active" }); + expect(result).not.toContain("active"); + expect(result).toContain("other"); + }); + + it("evicts LRU until under budget", () => { + const index: ConversationCacheIndexEntry[] = [ + { conversationId: "a", chunkCount: 30, maxSeq: 30, lastAccess: 100 }, + { conversationId: "b", chunkCount: 30, maxSeq: 30, lastAccess: 50 }, + { conversationId: "c", chunkCount: 30, maxSeq: 30, lastAccess: 200 }, + { conversationId: "d", chunkCount: 30, maxSeq: 30, lastAccess: 10 }, + ]; + // Total = 120, max = 60, need to evict 60+ chunks + // LRU order: d(10), b(50), a(100), c(200) + const result = selectEvictions(index, { maxChunks: 60, activeConversationId: null }); + expect(result).toEqual(["d", "b"]); + }); + + it("is a no-op under budget", () => { + const index: ConversationCacheIndexEntry[] = [ + { conversationId: "a", chunkCount: 10, maxSeq: 10, lastAccess: 100 }, + { conversationId: "b", chunkCount: 10, maxSeq: 10, lastAccess: 50 }, + ]; + const result = selectEvictions(index, { maxChunks: 100, activeConversationId: null }); + expect(result).toEqual([]); + }); + + it("returns empty for empty index", () => { + const result = selectEvictions([], { maxChunks: 100, activeConversationId: null }); + expect(result).toEqual([]); + }); + + it("tie-breaks by smaller maxSeq when lastAccess is equal", () => { + const index: ConversationCacheIndexEntry[] = [ + { conversationId: "a", chunkCount: 30, maxSeq: 100, lastAccess: 50 }, + { conversationId: "b", chunkCount: 30, maxSeq: 50, lastAccess: 50 }, + { conversationId: "c", chunkCount: 30, maxSeq: 200, lastAccess: 50 }, + ]; + // Total = 90, max = 60, need to evict 30+ chunks + // All have same lastAccess, tie-break by maxSeq: b(50), a(100), c(200) + const result = selectEvictions(index, { maxChunks: 60, activeConversationId: null }); + expect(result).toEqual(["b"]); + }); + + it("handles missing lastAccess (treated as 0)", () => { + const index: ConversationCacheIndexEntry[] = [ + { conversationId: "a", chunkCount: 30, maxSeq: 30, lastAccess: 100 }, + { conversationId: "b", chunkCount: 30, maxSeq: 30 }, + ]; + // Total = 60, max = 30, need to evict 30+ chunks + // b has no lastAccess (0), a has 100 + const result = selectEvictions(index, { maxChunks: 30, activeConversationId: null }); + expect(result).toEqual(["b"]); + }); }); diff --git a/src/features/conversation-cache/logic.ts b/src/features/conversation-cache/logic.ts index 4a4479e..3cb23e2 100644 --- a/src/features/conversation-cache/logic.ts +++ b/src/features/conversation-cache/logic.ts @@ -9,24 +9,24 @@ import type { ConversationCacheIndexEntry, ReconcileResult } from "./types"; * (exactly what to persist). Idempotent; tolerant of out-of-order/overlapping `incoming`. */ export function reconcileCache( - cached: readonly StoredChunk[], - incoming: readonly StoredChunk[], + cached: readonly StoredChunk[], + incoming: readonly StoredChunk[], ): ReconcileResult { - const seen = new Set<number>(); - for (const chunk of cached) { - seen.add(chunk.seq); - } + const seen = new Set<number>(); + for (const chunk of cached) { + seen.add(chunk.seq); + } - const toAppend: StoredChunk[] = []; - for (const chunk of incoming) { - if (!seen.has(chunk.seq)) { - toAppend.push(chunk); - seen.add(chunk.seq); - } - } + const toAppend: StoredChunk[] = []; + for (const chunk of incoming) { + if (!seen.has(chunk.seq)) { + toAppend.push(chunk); + seen.add(chunk.seq); + } + } - const merged = [...cached, ...toAppend].sort((a, b) => a.seq - b.seq); - return { merged, toAppend }; + const merged = [...cached, ...toAppend].sort((a, b) => a.seq - b.seq); + return { merged, toAppend }; } /** @@ -34,12 +34,12 @@ export function reconcileCache( * This is the `?sinceSeq=` cursor for the next incremental sync. */ export function nextSinceSeq(cached: readonly StoredChunk[]): number { - if (cached.length === 0) return 0; - let max = 0; - for (const chunk of cached) { - if (chunk.seq > max) max = chunk.seq; - } - return max; + if (cached.length === 0) return 0; + let max = 0; + for (const chunk of cached) { + if (chunk.seq > max) max = chunk.seq; + } + return max; } /** @@ -50,28 +50,28 @@ export function nextSinceSeq(cached: readonly StoredChunk[]): number { * Returns [] when under budget. */ export function selectEvictions( - index: readonly ConversationCacheIndexEntry[], - opts: { maxChunks: number; activeConversationId: string | null }, + index: readonly ConversationCacheIndexEntry[], + opts: { maxChunks: number; activeConversationId: string | null }, ): readonly string[] { - const totalChunks = index.reduce((sum, entry) => sum + entry.chunkCount, 0); - if (totalChunks <= opts.maxChunks) return []; + const totalChunks = index.reduce((sum, entry) => sum + entry.chunkCount, 0); + if (totalChunks <= opts.maxChunks) return []; - const candidates = index - .filter((entry) => entry.conversationId !== opts.activeConversationId) - .sort((a, b) => { - const aAccess = a.lastAccess ?? 0; - const bAccess = b.lastAccess ?? 0; - if (aAccess !== bAccess) return aAccess - bAccess; - return a.maxSeq - b.maxSeq; - }); + const candidates = index + .filter((entry) => entry.conversationId !== opts.activeConversationId) + .sort((a, b) => { + const aAccess = a.lastAccess ?? 0; + const bAccess = b.lastAccess ?? 0; + if (aAccess !== bAccess) return aAccess - bAccess; + return a.maxSeq - b.maxSeq; + }); - let remaining = totalChunks; - const evictions: string[] = []; - for (const entry of candidates) { - if (remaining <= opts.maxChunks) break; - evictions.push(entry.conversationId); - remaining -= entry.chunkCount; - } + let remaining = totalChunks; + const evictions: string[] = []; + for (const entry of candidates) { + if (remaining <= opts.maxChunks) break; + evictions.push(entry.conversationId); + remaining -= entry.chunkCount; + } - return evictions; + return evictions; } diff --git a/src/features/conversation-cache/types.ts b/src/features/conversation-cache/types.ts index 2a349cc..345ab71 100644 --- a/src/features/conversation-cache/types.ts +++ b/src/features/conversation-cache/types.ts @@ -2,10 +2,10 @@ import type { StoredChunk } from "@dispatch/wire"; /** Metadata entry for a cached conversation, used by eviction logic. */ export interface ConversationCacheIndexEntry { - readonly conversationId: string; - readonly chunkCount: number; - readonly maxSeq: number; - readonly lastAccess?: number; + readonly conversationId: string; + readonly chunkCount: number; + readonly maxSeq: number; + readonly lastAccess?: number; } /** @@ -17,26 +17,26 @@ export interface ConversationCacheIndexEntry { * All methods MUST be idempotent on `seq`: re-appending an existing seq is a no-op. */ export interface ConversationChunkStore { - /** Load all cached chunks for a conversation, seq-ordered. Returns [] if absent. */ - load(conversationId: string): Promise<readonly StoredChunk[]>; + /** Load all cached chunks for a conversation, seq-ordered. Returns [] if absent. */ + load(conversationId: string): Promise<readonly StoredChunk[]>; - /** - * Append committed chunks to a conversation's cache. - * MUST be idempotent on `seq`: re-appending an existing seq is a no-op. - */ - append(conversationId: string, chunks: readonly StoredChunk[]): Promise<void>; + /** + * Append committed chunks to a conversation's cache. + * MUST be idempotent on `seq`: re-appending an existing seq is a no-op. + */ + append(conversationId: string, chunks: readonly StoredChunk[]): Promise<void>; - /** Delete all cached data for a conversation. */ - delete(conversationId: string): Promise<void>; + /** Delete all cached data for a conversation. */ + delete(conversationId: string): Promise<void>; - /** Return metadata for all cached conversations (for eviction). */ - index(): Promise<readonly ConversationCacheIndexEntry[]>; + /** Return metadata for all cached conversations (for eviction). */ + index(): Promise<readonly ConversationCacheIndexEntry[]>; } /** Result of reconciling cached chunks with incoming authoritative chunks. */ export interface ReconcileResult { - /** The merged, deduplicated, seq-ordered chunk list. */ - readonly merged: readonly StoredChunk[]; - /** The subset of incoming chunks that need to be appended (not already cached). */ - readonly toAppend: readonly StoredChunk[]; + /** The merged, deduplicated, seq-ordered chunk list. */ + readonly merged: readonly StoredChunk[]; + /** The subset of incoming chunks that need to be appended (not already cached). */ + readonly toAppend: readonly StoredChunk[]; } diff --git a/src/features/cwd-lsp/index.ts b/src/features/cwd-lsp/index.ts new file mode 100644 index 0000000..36ea1b2 --- /dev/null +++ b/src/features/cwd-lsp/index.ts @@ -0,0 +1,14 @@ +export type { + CwdSaveResult, + LoadLspStatus, + LspStatusResult, + SaveCwd, +} from "./logic/view-model"; +export { default as CwdField } from "./ui/CwdField.svelte"; +export { default as LspStatusView } from "./ui/LspStatusView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "cwd-lsp", + description: "Per-conversation working directory + language-server status", +} as const; diff --git a/src/features/cwd-lsp/logic/view-model.test.ts b/src/features/cwd-lsp/logic/view-model.test.ts new file mode 100644 index 0000000..7bc0aad --- /dev/null +++ b/src/features/cwd-lsp/logic/view-model.test.ts @@ -0,0 +1,101 @@ +import type { LspServerInfo } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import { + cwdChanged, + isSubmittableCwd, + normalizeCwd, + summarizeServers, + viewLspServer, + viewLspServers, +} from "./view-model"; + +const server = (over: Partial<LspServerInfo> = {}): LspServerInfo => ({ + id: "typescript", + name: "TypeScript", + root: "/home/me/project", + extensions: [".ts", ".tsx"], + state: "connected", + ...over, +}); + +describe("cwd helpers", () => { + it("normalizeCwd trims surrounding whitespace", () => { + expect(normalizeCwd(" /a/b ")).toBe("/a/b"); + expect(normalizeCwd("\t/x\n")).toBe("/x"); + }); + + it("isSubmittableCwd is false for empty / whitespace-only", () => { + expect(isSubmittableCwd("")).toBe(false); + expect(isSubmittableCwd(" ")).toBe(false); + expect(isSubmittableCwd("/a")).toBe(true); + }); + + it("cwdChanged: true only when a non-empty trimmed value differs from current", () => { + expect(cwdChanged("/a/b", null)).toBe(true); + expect(cwdChanged("/a/b", "/a/b")).toBe(false); + expect(cwdChanged(" /a/b ", "/a/b")).toBe(false); // trim-equal → no change + expect(cwdChanged("/a/c", "/a/b")).toBe(true); + expect(cwdChanged("", "/a/b")).toBe(false); // empty is not a change (can't clear) + expect(cwdChanged(" ", null)).toBe(false); + }); +}); + +describe("viewLspServer", () => { + it("connected → success badge, not busy, no error", () => { + const v = viewLspServer(server({ state: "connected" })); + expect(v.badge).toBe("success"); + expect(v.statusLabel).toBe("Connected"); + expect(v.busy).toBe(false); + expect(v.error).toBeNull(); + expect(v.extensionsLabel).toBe(".ts .tsx"); + }); + + it("starting / not-started → busy (spinner) with warning / neutral badge", () => { + const starting = viewLspServer(server({ state: "starting" })); + expect(starting.badge).toBe("warning"); + expect(starting.busy).toBe(true); + + const notStarted = viewLspServer(server({ state: "not-started" })); + expect(notStarted.badge).toBe("neutral"); + expect(notStarted.busy).toBe(true); + }); + + it("error → error badge + surfaces the reason (with a fallback)", () => { + const withReason = viewLspServer(server({ state: "error", error: "ENOENT" })); + expect(withReason.badge).toBe("error"); + expect(withReason.busy).toBe(false); + expect(withReason.error).toBe("ENOENT"); + + const noReason = viewLspServer(server({ state: "error" })); + expect(noReason.error).toBe("Failed to start"); + }); + + it("viewLspServers maps a list preserving order", () => { + const views = viewLspServers([server({ id: "a" }), server({ id: "b" })]); + expect(views.map((v) => v.id)).toEqual(["a", "b"]); + }); +}); + +describe("summarizeServers", () => { + it("empty list", () => { + expect(summarizeServers([])).toBe("No language servers"); + }); + + it("counts connected / starting / errors", () => { + expect(summarizeServers([server({ state: "connected" })])).toBe("1 connected"); + expect( + summarizeServers([ + server({ id: "a", state: "connected" }), + server({ id: "b", state: "error" }), + ]), + ).toBe("1 connected, 1 error"); + expect( + summarizeServers([ + server({ id: "a", state: "connected" }), + server({ id: "b", state: "starting" }), + server({ id: "c", state: "error" }), + server({ id: "d", state: "error" }), + ]), + ).toBe("1 connected, 1 starting, 2 errors"); + }); +}); diff --git a/src/features/cwd-lsp/logic/view-model.ts b/src/features/cwd-lsp/logic/view-model.ts new file mode 100644 index 0000000..7642418 --- /dev/null +++ b/src/features/cwd-lsp/logic/view-model.ts @@ -0,0 +1,130 @@ +import type { LspServerInfo, LspServerState } from "@dispatch/transport-contract"; + +/** + * Pure core for the cwd-lsp feature — zero DOM, zero effects, zero Svelte. + * + * The cwd-lsp feature exposes a conversation's per-tab working directory (cwd) + * and the live status of the language servers configured for that cwd. This + * module holds the pure logic: cwd normalization/validation, the mapping of a + * backend `LspServerState` to a display badge, and a one-line server summary. + * The effects (the HTTP get/set cwd + get LSP status) are INJECTED via the ports + * below; the composition root implements them. + */ + +// ── Injected ports (consumer-defines-port; the composition root adapts the +// store's HTTP calls to these shapes). ────────────────────────────────────── + +/** Outcome of `PUT /conversations/:id/cwd`; `null` when no real conversation is focused. */ +export type CwdSaveResult = + | { readonly ok: true; readonly cwd: string | null } + | { readonly ok: false; readonly error: string }; + +export type SaveCwd = (cwd: string) => Promise<CwdSaveResult | null>; + +/** Outcome of `GET /conversations/:id/lsp`; `null` when no real conversation is focused. */ +export type LspStatusResult = + | { readonly ok: true; readonly cwd: string | null; readonly servers: readonly LspServerInfo[] } + | { readonly ok: false; readonly error: string }; + +export type LoadLspStatus = () => Promise<LspStatusResult | null>; + +// ── cwd helpers ─────────────────────────────────────────────────────────────── + +/** Trim surrounding whitespace; the backend rejects an empty cwd. */ +export function normalizeCwd(raw: string): string { + return raw.trim(); +} + +/** Whether a typed cwd is submittable (non-empty after trim). */ +export function isSubmittableCwd(raw: string): boolean { + return normalizeCwd(raw).length > 0; +} + +/** + * Whether saving `typed` would change the persisted `current` cwd. A no-op save + * (unchanged, or empty) should be disabled. + */ +export function cwdChanged(typed: string, current: string | null): boolean { + const next = normalizeCwd(typed); + if (next.length === 0) return false; + return next !== (current ?? ""); +} + +// ── LSP server status → display view ────────────────────────────────────────── + +export type Badge = "success" | "warning" | "error" | "neutral"; + +export interface LspServerView { + readonly id: string; + readonly name: string; + readonly root: string; + /** Space-joined extension list, e.g. ".ts .tsx". */ + readonly extensionsLabel: string; + readonly state: LspServerState; + readonly statusLabel: string; + readonly badge: Badge; + /** True while the state is transient (show a spinner). */ + readonly busy: boolean; + /** The error reason when `state === "error"`, else null. */ + readonly error: string | null; +} + +/** Map a server's state to a display label + badge severity + busy flag. */ +export function viewLspServer(server: LspServerInfo): LspServerView { + let statusLabel: string; + let badge: Badge; + let busy = false; + switch (server.state) { + case "connected": + statusLabel = "Connected"; + badge = "success"; + break; + case "starting": + statusLabel = "Starting…"; + badge = "warning"; + busy = true; + break; + case "not-started": + statusLabel = "Not started"; + badge = "neutral"; + busy = true; + break; + case "error": + statusLabel = "Error"; + badge = "error"; + break; + } + return { + id: server.id, + name: server.name, + root: server.root, + extensionsLabel: server.extensions.join(" "), + state: server.state, + statusLabel, + badge, + busy, + error: server.state === "error" ? (server.error ?? "Failed to start") : null, + }; +} + +export function viewLspServers(servers: readonly LspServerInfo[]): readonly LspServerView[] { + return servers.map(viewLspServer); +} + +/** A short one-line summary, e.g. "2 connected" / "1 connected, 1 error". */ +export function summarizeServers(servers: readonly LspServerInfo[]): string { + if (servers.length === 0) return "No language servers"; + let connected = 0; + let errored = 0; + let pending = 0; + for (const s of servers) { + if (s.state === "connected") connected++; + else if (s.state === "error") errored++; + else pending++; + } + const parts: string[] = []; + if (connected > 0) parts.push(`${connected} connected`); + if (pending > 0) parts.push(`${pending} starting`); + if (errored > 0) parts.push(`${errored} error${errored === 1 ? "" : "s"}`); + return parts.join(", "); +} diff --git a/src/features/cwd-lsp/ui/CwdField.svelte b/src/features/cwd-lsp/ui/CwdField.svelte new file mode 100644 index 0000000..c83f5ce --- /dev/null +++ b/src/features/cwd-lsp/ui/CwdField.svelte @@ -0,0 +1,96 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import { cwdChanged, normalizeCwd, type SaveCwd } from "../logic/view-model"; + + let { + cwd, + canEdit, + save, + }: { + /** The active conversation's persisted cwd, or null when unset. */ + cwd: string | null; + /** Whether a real conversation is focused (a draft can't persist a cwd yet). */ + canEdit: boolean; + save: SaveCwd; + } = $props(); + + // Start empty; the $effect below seeds from the (async-loaded) cwd prop. (Reading + // the prop directly into initial $state would only capture its first value.) + let value = $state(""); + let lastSeed = $state(""); + let saving = $state(false); + let error = $state<string | null>(null); + let justSaved = $state(false); + + // Seed the input from the persisted cwd (it loads async). Only reseed while the + // field is untouched, so an in-flight load can't clobber what the user typed. + // Re-mounted per conversation, so there is no cross-tab bleed. + $effect(() => { + const incoming = cwd ?? ""; + untrack(() => { + if (value === lastSeed) value = incoming; + lastSeed = incoming; + }); + }); + + const dirty = $derived(cwdChanged(value, cwd)); + + async function handleSave() { + if (saving || !canEdit || !dirty) return; + saving = true; + error = null; + justSaved = false; + const result = await save(normalizeCwd(value)); + saving = false; + if (result === null) return; + if (result.ok) { + justSaved = true; + } else { + error = result.error; + } + } + + function onInput() { + justSaved = false; + error = null; + } +</script> + +<div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Working directory</span> + <div class="flex items-center gap-2"> + <input + type="text" + class="input input-bordered input-sm w-full font-mono text-xs" + placeholder={canEdit ? "/abs/path/to/project" : "Open a conversation first"} + bind:value + disabled={!canEdit || saving} + oninput={onInput} + onkeydown={(e) => { + if (e.key === "Enter") handleSave(); + }} + aria-label="Working directory" + /> + <button + type="button" + class="btn btn-primary btn-sm" + disabled={!canEdit || saving || !dirty} + onclick={handleSave} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Set + {/if} + </button> + </div> + {#if !canEdit} + <p class="text-xs opacity-60">Start or open a conversation to set its working directory.</p> + {:else if error} + <p class="text-xs text-error">{error}</p> + {:else if justSaved && !dirty} + <p class="text-xs text-success">Saved.</p> + {:else} + <p class="text-xs opacity-50">Defaults each turn's cwd; drives the language servers below.</p> + {/if} +</div> diff --git a/src/features/cwd-lsp/ui/LspStatusView.svelte b/src/features/cwd-lsp/ui/LspStatusView.svelte new file mode 100644 index 0000000..c8c9ea8 --- /dev/null +++ b/src/features/cwd-lsp/ui/LspStatusView.svelte @@ -0,0 +1,129 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import { + type Badge, + type LoadLspStatus, + type LspServerView, + summarizeServers, + viewLspServers, + } from "../logic/view-model"; + + let { + cwd, + canView, + load, + }: { + /** The active conversation's cwd — the trigger to (re)load when it changes. */ + cwd: string | null; + /** Whether a real conversation is focused. */ + canView: boolean; + load: LoadLspStatus; + } = $props(); + + const badgeClass: Record<Badge, string> = { + success: "badge-success", + warning: "badge-warning", + error: "badge-error", + neutral: "badge-ghost", + }; + + let servers = $state<readonly LspServerView[]>([]); + let loading = $state(false); + let error = $state<string | null>(null); + let loadedCwd = $state<string | null>(null); + let hasLoaded = $state(false); + let summary = $state(""); + + async function refresh() { + if (!canView) return; + loading = true; + error = null; + const result = await load(); + loading = false; + if (result === null) return; + hasLoaded = true; + if (result.ok) { + servers = viewLspServers(result.servers); + summary = summarizeServers(result.servers); + loadedCwd = result.cwd; + } else { + error = result.error; + } + } + + // (Re)load on mount and whenever the conversation's cwd changes. The LSP GET + // lazily spawns servers, so we avoid a redundant fetch when `cwd` resolves to + // the value we already loaded for. + $effect(() => { + const target = cwd; + const can = canView; + untrack(() => { + if (!can) return; + if (!hasLoaded || target !== loadedCwd) void refresh(); + }); + }); +</script> + +<div class="flex flex-col gap-2"> + <div class="flex items-center justify-between gap-2"> + <span class="text-xs opacity-70"> + {#if loading} + Resolving… + {:else if hasLoaded && loadedCwd !== null} + {summary} + {:else} + Language servers + {/if} + </span> + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={!canView || loading} + onclick={() => refresh()} + aria-label="Refresh language server status" + > + {#if loading} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Refresh + {/if} + </button> + </div> + + {#if !canView} + <p class="text-xs opacity-60">Open or start a conversation to see its language servers.</p> + {:else if error} + <p class="text-xs text-error">{error}</p> + {:else if hasLoaded && loadedCwd === null} + <p class="text-xs opacity-60"> + Set a working directory in the Model panel to enable language servers. + </p> + {:else if hasLoaded && servers.length === 0 && !loading} + <p class="text-xs opacity-60">No language servers configured for this directory.</p> + {:else} + <ul class="flex flex-col gap-2"> + {#each servers as server (server.id)} + <li class="flex flex-col gap-1 rounded-box bg-base-200 p-2 text-sm"> + <div class="flex items-center justify-between gap-2"> + <span class="font-medium">{server.name}</span> + <span class="badge badge-sm {badgeClass[server.badge]} gap-1"> + {#if server.busy} + <span class="loading loading-spinner loading-xs"></span> + {/if} + {server.statusLabel} + </span> + </div> + {#if server.extensionsLabel} + <span class="font-mono text-xs opacity-60">{server.extensionsLabel}</span> + {/if} + <span class="truncate font-mono text-xs opacity-50" title={server.root} + >{server.root}</span + > + {#if server.error} + <span class="font-mono text-xs text-error">{server.error}</span> + {/if} + </li> + {/each} + </ul> + {/if} +</div> diff --git a/src/features/heartbeat/index.ts b/src/features/heartbeat/index.ts new file mode 100644 index 0000000..cc438f1 --- /dev/null +++ b/src/features/heartbeat/index.ts @@ -0,0 +1,50 @@ +export type { + HeartbeatConfig, + HeartbeatConfigPatch, + HeartbeatConfigResult, + HeartbeatNextRunResult, + HeartbeatRun, + HeartbeatRunStatus, + HeartbeatRunsResult, + HeartbeatStopResult, + LoadHeartbeatConfig, + LoadHeartbeatNextRun, + LoadHeartbeatRuns, + SaveHeartbeatConfig, + StopHeartbeatRun, +} from "./logic/types"; +export type { Badge, HeartbeatFormState, HeartbeatRunView } from "./logic/view-model"; +export { + approximateNextRunEpoch, + badgeForStatus, + DEFAULT_INTERVAL_MINUTES, + effectiveSystemPrompt, + effortOptions, + emptyForm, + formatCountdown, + formatRunTime, + formDiffers, + formFromConfig, + isInheritingSystemPrompt, + joinInterval, + nextRunEpoch, + normalizeHeartbeatConfig, + normalizeHeartbeatRuns, + normalizeInterval, + patchFromForm, + persistedSystemPrompt, + relativeLabel, + splitInterval, + statusLabelFor, + viewRun, + viewRuns, +} from "./logic/view-model"; +export { default as HeartbeatView } from "./ui/HeartbeatView.svelte"; +export { default as PromptEditor } from "./ui/PromptEditor.svelte"; +export { default as RunModal } from "./ui/RunModal.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "heartbeat", + description: "Workspace autonomous-agent heartbeat: config, run history, live run chat", +} as const; diff --git a/src/features/heartbeat/logic/types.ts b/src/features/heartbeat/logic/types.ts new file mode 100644 index 0000000..3d3d525 --- /dev/null +++ b/src/features/heartbeat/logic/types.ts @@ -0,0 +1,103 @@ +import type { ReasoningEffort } from "@dispatch/transport-contract"; + +/** + * Pure core types for the heartbeat feature — zero DOM, zero effects, zero Svelte. + * + * Heartbeat is a workspace-scoped autonomous agent loop: the backend periodically + * runs a turn in a dedicated conversation using a configured system prompt, task + * prompt, model, reasoning effort, and interval. The FE exposes the config + * (`GET`/`PUT /workspaces/:id/heartbeat`), the run history + * (`GET /workspaces/:id/heartbeat/runs`), and a per-run stop + * (`POST /workspaces/:id/heartbeat/runs/:runId/stop`). + * + * The backend's heartbeat API is a plain REST surface — it is NOT part of the + * shared `@dispatch/transport-contract` / `@dispatch/wire` packages (verified: + * no `heartbeat` symbol in either `dist/`). So, following the consumer-defines- + * port pattern (mirrors `features/mcp` / `features/computer` result types), the + * FE owns these shapes here and adapts the untyped JSON at the network seam in + * the composition root. If the backend later promotes these to a shared contract + * package, swap the local types for the imports (see `backend-handoff.md`). + */ + +/** The canonical run lifecycle status (backend-owned enum, verbatim). */ +export type HeartbeatRunStatus = "running" | "completed" | "stopped"; + +/** The workspace's heartbeat configuration (`GET /workspaces/:id/heartbeat`). */ +export interface HeartbeatConfig { + /** Whether the autonomous loop is enabled (running on the interval). */ + readonly enabled: boolean; + readonly systemPrompt: string; + readonly taskPrompt: string; + /** Minutes between runs. */ + readonly intervalMinutes: number; + /** The model name (`<credential>/<model>`) the heartbeat runs with. */ + readonly model: string; + /** + * The heartbeat's reasoning effort, or null when never set (the server + * default `"high"` then applies) — mirrors the per-conversation knob's + * resolution chain. + */ + readonly reasoningEffort: ReasoningEffort | null; +} + +/** + * A partial config patch for `PUT /workspaces/:id/heartbeat`. Every field is + * optional — the backend merges the patch onto the stored config. + */ +export interface HeartbeatConfigPatch { + readonly enabled?: boolean; + readonly systemPrompt?: string; + readonly taskPrompt?: string; + readonly intervalMinutes?: number; + readonly model?: string; + readonly reasoningEffort?: ReasoningEffort | null; +} + +/** One heartbeat run (`GET /workspaces/:id/heartbeat/runs`). */ +export interface HeartbeatRun { + readonly id: string; + /** The conversation this run wrote to (watch it live for the chat). */ + readonly conversationId: string; + /** ISO timestamp of when the run was triggered. */ + readonly triggeredAt: string; + readonly status: HeartbeatRunStatus; +} + +// ── Injected ports (consumer-defines-port; the composition root adapts the +// store's HTTP calls to these shapes). ────────────────────────────────────── + +/** Outcome of `GET /workspaces/:id/heartbeat` (or the PUT response). */ +export type HeartbeatConfigResult = + | { readonly ok: true; readonly config: HeartbeatConfig } + | { readonly ok: false; readonly error: string }; + +/** Outcome of `GET /workspaces/:id/heartbeat/runs`. */ +export type HeartbeatRunsResult = + | { readonly ok: true; readonly runs: readonly HeartbeatRun[] } + | { readonly ok: false; readonly error: string }; + +/** Outcome of `POST /workspaces/:id/heartbeat/runs/:runId/stop`. */ +export type HeartbeatStopResult = + | { readonly ok: true } + | { readonly ok: false; readonly error: string }; + +export type LoadHeartbeatConfig = () => Promise<HeartbeatConfigResult | null>; +export type SaveHeartbeatConfig = ( + patch: HeartbeatConfigPatch, +) => Promise<HeartbeatConfigResult | null>; +export type LoadHeartbeatRuns = () => Promise<HeartbeatRunsResult | null>; +export type StopHeartbeatRun = (runId: string) => Promise<HeartbeatStopResult | null>; + +/** + * Outcome of `GET /workspaces/:id/heartbeat/next-run` — the server-authoritative + * timestamp of the next scheduled heartbeat run (ISO 8601 string), or `null` + * when the heartbeat is disabled or no run is scheduled. The FE computes a live + * countdown from this + a 1s clock (see `formatCountdown`). When the endpoint is + * unavailable (404 — backend hasn't shipped it yet), the FE falls back to an + * approximation from the runs + config (see `approximateNextRunEpoch`). + */ +export type HeartbeatNextRunResult = + | { readonly ok: true; readonly nextRunAt: string | null } + | { readonly ok: false; readonly error: string }; + +export type LoadHeartbeatNextRun = () => Promise<HeartbeatNextRunResult | null>; diff --git a/src/features/heartbeat/logic/view-model.test.ts b/src/features/heartbeat/logic/view-model.test.ts new file mode 100644 index 0000000..aca0aa6 --- /dev/null +++ b/src/features/heartbeat/logic/view-model.test.ts @@ -0,0 +1,470 @@ +import type { ReasoningEffort } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import type { HeartbeatConfig, HeartbeatRun } from "./types"; +import { + approximateNextRunEpoch, + badgeForStatus, + DEFAULT_INTERVAL_MINUTES, + effectiveSystemPrompt, + effortOptions, + emptyForm, + formatCountdown, + formatRunTime, + formDiffers, + formFromConfig, + isInheritingSystemPrompt, + joinInterval, + nextRunEpoch, + normalizeHeartbeatConfig, + normalizeHeartbeatRuns, + normalizeInterval, + patchFromForm, + persistedSystemPrompt, + relativeLabel, + splitInterval, + statusLabelFor, + viewRun, + viewRuns, +} from "./view-model"; + +const NOW = Date.UTC(2026, 5, 25, 14, 30, 5); // 2026-06-25T14:30:05Z +const ISO_AT = "2026-06-25T14:30:05Z"; // exactly NOW +const run = (over: Partial<HeartbeatRun> = {}): HeartbeatRun => ({ + id: "run-1", + conversationId: "conv-1", + triggeredAt: ISO_AT, + status: "completed", + ...over, +}); + +const config = (over: Partial<HeartbeatConfig> = {}): HeartbeatConfig => ({ + enabled: false, + systemPrompt: "be helpful", + taskPrompt: "check status", + intervalMinutes: 15, + model: "openai/gpt-4o", + reasoningEffort: null, + ...over, +}); + +describe("badgeForStatus", () => { + it("running → warning + busy (spinner)", () => { + expect(badgeForStatus("running")).toEqual({ badge: "warning", busy: true }); + }); + it("completed → success, not busy", () => { + expect(badgeForStatus("completed")).toEqual({ badge: "success", busy: false }); + }); + it("stopped → neutral, not busy", () => { + expect(badgeForStatus("stopped")).toEqual({ badge: "neutral", busy: false }); + }); +}); + +describe("statusLabelFor", () => { + it("maps each status to a display label", () => { + expect(statusLabelFor("running")).toBe("Running"); + expect(statusLabelFor("completed")).toBe("Completed"); + expect(statusLabelFor("stopped")).toBe("Stopped"); + }); +}); + +describe("formatRunTime", () => { + it("formats an ISO timestamp as HH:MM:SS (UTC components)", () => { + // Uses local getHours/Minutes/Seconds; under UTC env (TZ=UTC) reads 14:30:05. + // We assert the SHAPE (3 colon-separated 2-digit groups) so it's TZ-stable. + expect(formatRunTime(ISO_AT)).toMatch(/^\d{2}:\d{2}:\d{2}$/); + expect(formatRunTime(ISO_AT).split(":")).toHaveLength(3); + }); + it("returns — for an unparseable timestamp", () => { + expect(formatRunTime("not-a-date")).toBe("—"); + expect(formatRunTime("")).toBe("—"); + }); +}); + +describe("relativeLabel", () => { + it("just now when within a minute", () => { + expect(relativeLabel(ISO_AT, NOW)).toBe("just now"); + expect(relativeLabel(ISO_AT, NOW + 30_000)).toBe("just now"); + }); + it("Nm ago under an hour", () => { + expect(relativeLabel(ISO_AT, NOW + 5 * 60_000)).toBe("5m ago"); + expect(relativeLabel(ISO_AT, NOW + 59 * 60_000)).toBe("59m ago"); + }); + it("Nh ago under a day", () => { + expect(relativeLabel(ISO_AT, NOW + 2 * 3_600_000)).toBe("2h ago"); + }); + it("absolute date+time past a day", () => { + const label = relativeLabel(ISO_AT, NOW + 26 * 3_600_000); + expect(label).toMatch(/^[A-Z][a-z]{2} \d+, \d{2}:\d{2}$/); + }); + it("future timestamp → just now (clock skew tolerance)", () => { + expect(relativeLabel(ISO_AT, NOW - 10_000)).toBe("just now"); + }); + it("returns — for an unparseable timestamp", () => { + expect(relativeLabel("nope", NOW)).toBe("—"); + }); +}); + +describe("viewRun / viewRuns", () => { + it("running run: warning badge + busy + labels", () => { + const v = viewRun(run({ status: "running" }), NOW); + expect(v.badge).toBe("warning"); + expect(v.busy).toBe(true); + expect(v.statusLabel).toBe("Running"); + expect(v.id).toBe("run-1"); + expect(v.conversationId).toBe("conv-1"); + expect(v.timeLabel).toMatch(/^\d{2}:\d{2}:\d{2}$/); + expect(v.relativeLabel).toBe("just now"); + }); + it("completed run: success badge, not busy", () => { + expect(viewRun(run({ status: "completed" }), NOW).badge).toBe("success"); + }); + it("stopped run: neutral badge, not busy", () => { + expect(viewRun(run({ status: "stopped" }), NOW).badge).toBe("neutral"); + }); + it("viewRuns preserves order", () => { + const views = viewRuns([run({ id: "a" }), run({ id: "b" })], NOW); + expect(views.map((v) => v.id)).toEqual(["a", "b"]); + }); +}); + +describe("config form", () => { + it("emptyForm has defaults (disabled, default interval split, default effort)", () => { + const f = emptyForm(); + expect(f.enabled).toBe(false); + // 30 min → 0h 30m + expect(f.intervalHours).toBe(0); + expect(f.intervalMinutes).toBe(30); + expect(f.reasoningEffort).toBe("high"); // DEFAULT_REASONING_EFFORT + expect(f.systemPrompt).toBe(""); + expect(f.model).toBe(""); + }); + + it("formFromConfig resolves null reasoningEffort to the default", () => { + const f = formFromConfig(config({ reasoningEffort: null })); + expect(f.reasoningEffort).toBe("high"); + }); + + it("formFromConfig passes through a set reasoningEffort", () => { + const f = formFromConfig(config({ reasoningEffort: "max" })); + expect(f.reasoningEffort).toBe("max"); + }); + + it("formFromConfig splits intervalMinutes into hours + minutes (0–59)", () => { + expect(formFromConfig(config({ intervalMinutes: 90 }))).toMatchObject({ + intervalHours: 1, + intervalMinutes: 30, + }); + expect(formFromConfig(config({ intervalMinutes: 60 }))).toMatchObject({ + intervalHours: 1, + intervalMinutes: 0, + }); + expect(formFromConfig(config({ intervalMinutes: 59 }))).toMatchObject({ + intervalHours: 0, + intervalMinutes: 59, + }); + expect(formFromConfig(config({ intervalMinutes: 1440 }))).toMatchObject({ + intervalHours: 24, + intervalMinutes: 0, + }); + }); + + it("formFromConfig coerces malformed fields safely", () => { + const f = formFromConfig( + config({ + enabled: "yes" as unknown as boolean, + intervalMinutes: -5, + model: 42 as unknown as string, + systemPrompt: undefined as unknown as string, + }), + ); + expect(f.enabled).toBe(false); // non-true → false + // -5 clamps to 1 → 0h 1m + expect(f.intervalHours).toBe(0); + expect(f.intervalMinutes).toBe(1); + expect(f.model).toBe(""); // non-string → "" + expect(f.systemPrompt).toBe(""); // undefined → "" + }); + + it("normalizeInterval clamps to 1–1440 and rounds", () => { + expect(normalizeInterval(0)).toBe(1); + expect(normalizeInterval(-10)).toBe(1); + expect(normalizeInterval(1.4)).toBe(1); + expect(normalizeInterval(15.6)).toBe(16); + expect(normalizeInterval(2000)).toBe(1440); + expect(normalizeInterval("30" as unknown as number)).toBe(30); // default on non-number + expect(normalizeInterval(undefined)).toBe(DEFAULT_INTERVAL_MINUTES); + }); + + it("splitInterval / joinInterval round-trip (and clamp)", () => { + expect(splitInterval(90)).toEqual({ hours: 1, minutes: 30 }); + expect(splitInterval(0)).toEqual({ hours: 0, minutes: 1 }); // 0 → clamps to 1 + expect(splitInterval(1440)).toEqual({ hours: 24, minutes: 0 }); + expect(splitInterval(2000)).toEqual({ hours: 24, minutes: 0 }); // clamped + // join recomputes + clamps + expect(joinInterval(1, 30)).toBe(90); + expect(joinInterval(0, 0)).toBe(1); // 0 → clamps to 1 + expect(joinInterval(25, 0)).toBe(1440); // 1500 → clamps to 1440 + expect(joinInterval(-1, 30)).toBe(30); // negatives floored to 0 + expect(joinInterval("x" as unknown as number, 15)).toBe(15); // non-finite → 0h + }); + + it("patchFromForm recombines hours+minutes into intervalMinutes + carries every field", () => { + const f = formFromConfig(config({ intervalMinutes: 2000 })); + // 2000 clamps to 1440 → 24h 0m in the form + expect(f.intervalHours).toBe(24); + expect(f.intervalMinutes).toBe(0); + const patch = patchFromForm(f); + expect(patch.intervalMinutes).toBe(1440); + expect(patch.enabled).toBe(false); + expect(patch.model).toBe("openai/gpt-4o"); + expect(patch.reasoningEffort).toBe("high"); + expect(patch.systemPrompt).toBe("be helpful"); + expect(patch.taskPrompt).toBe("check status"); + }); + + it("patchFromForm recombines an arbitrary hours/minutes edit", () => { + const f = formFromConfig(config({ intervalMinutes: 15 })); + f.intervalHours = 2; + f.intervalMinutes = 45; + expect(patchFromForm(f).intervalMinutes).toBe(165); + }); + + it("formDiffers is false for a form seeded from the config (no edits)", () => { + const c = config({ reasoningEffort: "medium" }); + const f = formFromConfig(c); + expect(formDiffers(f, c)).toBe(false); + }); + + it("formDiffers is true after an edit", () => { + const c = config(); + const f = formFromConfig(c); + f.systemPrompt = "changed"; + expect(formDiffers(f, c)).toBe(true); + }); + + it("formDiffers is true after an interval edit (hours or minutes)", () => { + const c = config({ intervalMinutes: 90 }); + const f = formFromConfig(c); + f.intervalMinutes = 45; // 1h45m vs 1h30m + expect(formDiffers(f, c)).toBe(true); + }); + + it("formDiffers treats null config effort as the default (matches the resolved form)", () => { + const c = config({ reasoningEffort: null }); + const f = formFromConfig(c); + expect(formDiffers(f, c)).toBe(false); // null resolves to "high" == form + }); +}); + +describe("system-prompt inheritance (override ⇄ global default)", () => { + const DEFAULT = "You are a helpful assistant."; + + it("effectiveSystemPrompt: override wins when non-empty, else the default", () => { + expect(effectiveSystemPrompt("custom", DEFAULT)).toBe("custom"); + expect(effectiveSystemPrompt("", DEFAULT)).toBe(DEFAULT); + }); + + it("isInheritingSystemPrompt: true iff the override is empty", () => { + expect(isInheritingSystemPrompt("")).toBe(true); + expect(isInheritingSystemPrompt("custom")).toBe(false); + }); + + it('persistedSystemPrompt: empty or matching-the-default → inherit ("")', () => { + // matching the default → inherit (never duplicate the default into the config) + expect(persistedSystemPrompt(DEFAULT, DEFAULT)).toBe(""); + // empty edit → inherit + expect(persistedSystemPrompt("", DEFAULT)).toBe(""); + }); + + it("persistedSystemPrompt: a distinct edit → the override verbatim", () => { + expect(persistedSystemPrompt("custom", DEFAULT)).toBe("custom"); + expect(persistedSystemPrompt(`${DEFAULT}\nmore`, DEFAULT)).toBe(`${DEFAULT}\nmore`); + }); + + it("round-trip: inherit → display default → reset (no edit) → persist inherit", () => { + // A heartbeat inheriting (override "") displays the default; with no edit, + // persisting yields inherit ("") — so the global default stays the source. + const override = ""; + const displayed = effectiveSystemPrompt(override, DEFAULT); + expect(displayed).toBe(DEFAULT); + expect(persistedSystemPrompt(displayed, DEFAULT)).toBe(""); + }); + + it("round-trip: override → reset to default → persist inherit (clears override)", () => { + // User had an override, clicks Reset (textarea ← default): persisting clears + // the override ("" → inherit) because the text now matches the default. + const afterReset = DEFAULT; + expect(persistedSystemPrompt(afterReset, DEFAULT)).toBe(""); + }); +}); + +describe("effortOptions re-export", () => { + it("exposes the canonical ladder with the default marked", () => { + const opts = effortOptions(); + const values = opts.map((o) => o.value) as readonly string[]; + expect(values).toEqual(["low", "medium", "high", "xhigh", "max"]); + const def = opts.find((o) => o.value === "high"); + expect(def?.label).toBe("high (default)"); + }); +}); + +describe("reasoningEffort type narrowing (sanity)", () => { + // Ensures the imported ladder stays the wire's canonical set — if the wire + // ladder changes, this test flags the drift alongside the chat feature. + it("the five canonical levels", () => { + const levels: readonly ReasoningEffort[] = ["low", "medium", "high", "xhigh", "max"]; + expect(levels).toHaveLength(5); + }); +}); + +describe("normalizeHeartbeatConfig", () => { + it("passes through a well-formed config", () => { + const c = normalizeHeartbeatConfig({ + enabled: true, + systemPrompt: "sys", + taskPrompt: "task", + intervalMinutes: 20, + model: "openai/gpt-4o", + reasoningEffort: "max", + }); + expect(c).toEqual({ + enabled: true, + systemPrompt: "sys", + taskPrompt: "task", + intervalMinutes: 20, + model: "openai/gpt-4o", + reasoningEffort: "max", + }); + }); + it("coerces a malformed body safely (never throws, never undefined)", () => { + const c = normalizeHeartbeatConfig({ + enabled: "yes", + intervalMinutes: -3, + reasoningEffort: "bogus", + }); + expect(c.enabled).toBe(false); + expect(c.intervalMinutes).toBe(1); + expect(c.reasoningEffort).toBeNull(); + expect(c.systemPrompt).toBe(""); + expect(c.taskPrompt).toBe(""); + expect(c.model).toBe(""); + }); + it("accepts a null reasoningEffort", () => { + expect(normalizeHeartbeatConfig({ reasoningEffort: null }).reasoningEffort).toBeNull(); + }); + it("handles null / non-object input", () => { + const c = normalizeHeartbeatConfig(null); + expect(c.enabled).toBe(false); + expect(c.intervalMinutes).toBe(DEFAULT_INTERVAL_MINUTES); + expect(c.model).toBe(""); + }); + it("clamps a huge interval", () => { + expect(normalizeHeartbeatConfig({ intervalMinutes: 99999 }).intervalMinutes).toBe(1440); + }); +}); + +describe("normalizeHeartbeatRuns", () => { + it("maps a well-formed runs list", () => { + const runs = normalizeHeartbeatRuns({ + runs: [ + { id: "r1", conversationId: "c1", triggeredAt: "2026-06-25T10:00:00Z", status: "running" }, + { + id: "r2", + conversationId: "c2", + triggeredAt: "2026-06-25T09:00:00Z", + status: "completed", + }, + ], + }); + expect(runs).toHaveLength(2); + expect(runs[0]).toMatchObject({ id: "r1", status: "running" }); + expect(runs[1]).toMatchObject({ id: "r2", status: "completed" }); + }); + it("returns [] for malformed body", () => { + expect(normalizeHeartbeatRuns(null)).toEqual([]); + expect(normalizeHeartbeatRuns({})).toEqual([]); + expect(normalizeHeartbeatRuns({ runs: "nope" })).toEqual([]); + }); + it("drops runs missing id/conversationId and defaults unknown status", () => { + const runs = normalizeHeartbeatRuns({ + runs: [ + { id: "r1", conversationId: "c1", triggeredAt: "x", status: "garbage" }, + { id: "", conversationId: "c2", triggeredAt: "x", status: "completed" }, + { id: "r3", conversationId: "", triggeredAt: "x", status: "running" }, + { id: "r4", conversationId: "c4", triggeredAt: "x", status: "stopped" }, + ], + }); + expect(runs).toHaveLength(2); + expect(runs[0]?.status).toBe("completed"); // "garbage" → default + expect(runs[0]?.id).toBe("r1"); + expect(runs[1]?.id).toBe("r4"); + }); +}); + +describe("next-run countdown", () => { + const ISO_AT = "2026-06-25T14:05:00Z"; // 5 min past the hour + + describe("nextRunEpoch", () => { + it("parses an ISO timestamp to epoch-ms", () => { + expect(nextRunEpoch(ISO_AT)).toBe(Date.parse(ISO_AT)); + }); + it("returns null for unparseable / empty / non-string", () => { + expect(nextRunEpoch("not-a-date")).toBeNull(); + expect(nextRunEpoch("")).toBeNull(); + expect(nextRunEpoch(null)).toBeNull(); + expect(nextRunEpoch(undefined)).toBeNull(); + }); + }); + + describe("formatCountdown", () => { + it("null → —", () => { + expect(formatCountdown(null)).toBe("—"); + }); + it("≤ 0 → due", () => { + expect(formatCountdown(0)).toBe("due"); + expect(formatCountdown(-5000)).toBe("due"); + }); + it("seconds only (< 1m)", () => { + expect(formatCountdown(32_000)).toBe("32s"); + expect(formatCountdown(1_000)).toBe("1s"); + }); + it("minutes + seconds (1m–1h)", () => { + expect(formatCountdown(4 * 60_000 + 32_000)).toBe("4m 32s"); + expect(formatCountdown(59 * 60_000 + 5_000)).toBe("59m 05s"); + }); + it("hours + minutes (≥ 1h)", () => { + expect(formatCountdown(3_600_000 + 5 * 60_000)).toBe("1h 05m"); + expect(formatCountdown(2 * 3_600_000 + 30 * 60_000)).toBe("2h 30m"); + }); + }); + + describe("approximateNextRunEpoch", () => { + const runs = (times: string[]): HeartbeatRun[] => + times.map((t, i) => ({ + id: `r${i}`, + conversationId: "c", + triggeredAt: t, + status: "completed", + })); + + it("disabled → null", () => { + expect(approximateNextRunEpoch(runs([ISO_AT]), 15, false)).toBeNull(); + }); + it("no runs → null (no fabricated countdown)", () => { + expect(approximateNextRunEpoch([], 15, true)).toBeNull(); + }); + it("latest run + interval (minutes)", () => { + // latest is the max triggeredAt (runs need not be ordered) + const unordered = runs(["2026-06-25T13:00:00Z", "2026-06-25T13:50:00Z"]); + // 13:50 + 15 min = 14:05 + expect(approximateNextRunEpoch(unordered, 15, true)).toBe(Date.parse("2026-06-25T14:05:00Z")); + }); + it("ignores unparseable triggeredAt values", () => { + const mixed = runs(["not-a-date", "2026-06-25T13:50:00Z"]); + expect(approximateNextRunEpoch(mixed, 15, true)).toBe(Date.parse("2026-06-25T14:05:00Z")); + }); + it("all-unparseable → null", () => { + expect(approximateNextRunEpoch(runs(["nope", "also-nope"]), 15, true)).toBeNull(); + }); + }); +}); diff --git a/src/features/heartbeat/logic/view-model.ts b/src/features/heartbeat/logic/view-model.ts new file mode 100644 index 0000000..e91febd --- /dev/null +++ b/src/features/heartbeat/logic/view-model.ts @@ -0,0 +1,410 @@ +import type { ReasoningEffort } from "@dispatch/transport-contract"; +import { + DEFAULT_REASONING_EFFORT, + effectiveEffort, + effortOptions, +} from "../../chat/reasoning-effort"; +import type { + HeartbeatConfig, + HeartbeatConfigPatch, + HeartbeatRun, + HeartbeatRunStatus, +} from "./types"; + +/** + * Pure view-models for the heartbeat feature — zero DOM, zero effects, zero + * Svelte. Maps backend `HeartbeatConfig`/`HeartbeatRun` to display shapes + * (badges, labels, formatted times) and holds the config-form helpers. + * + * The reasoning-effort ladder + resolution are SERVER-owned and shared with the + * per-conversation knob, so they are REUSED from `features/chat/reasoning-effort` + * (a sanctioned cross-feature import through its public exports) rather than + * redefined — no drift. + */ + +export type Badge = "success" | "warning" | "error" | "neutral"; + +/** A run shaped for display in the scrolling runs list. */ +export interface HeartbeatRunView { + readonly id: string; + readonly conversationId: string; + readonly status: HeartbeatRunStatus; + readonly statusLabel: string; + readonly badge: Badge; + /** True while the run is in flight (show a spinner). */ + readonly busy: boolean; + /** A short absolute clock label, e.g. "14:30:05". */ + readonly timeLabel: string; + /** A relative label, e.g. "5m ago" / "just now". */ + readonly relativeLabel: string; +} + +const RUNNING_LABEL = "Running"; +const COMPLETED_LABEL = "Completed"; +const STOPPED_LABEL = "Stopped"; + +/** + * Map a run's status to a display badge + busy flag. `running` → warning + + * spinner, `completed` → success, `stopped` → neutral. Mirrors the LSP/MCP + * status visual treatment. + */ +export function badgeForStatus(status: HeartbeatRunStatus): { badge: Badge; busy: boolean } { + switch (status) { + case "running": + return { badge: "warning", busy: true }; + case "completed": + return { badge: "success", busy: false }; + case "stopped": + return { badge: "neutral", busy: false }; + } +} + +export function statusLabelFor(status: HeartbeatRunStatus): string { + switch (status) { + case "running": + return RUNNING_LABEL; + case "completed": + return COMPLETED_LABEL; + case "stopped": + return STOPPED_LABEL; + } +} + +/** + * Format an ISO timestamp as a short absolute clock label (HH:MM:SS) in the + * viewer's locale. Returns "—" for an unparseable timestamp so the UI never + * crashes on a malformed backend value. Pure (no `now` needed — an absolute + * clock label doesn't depend on the current time). + */ +export function formatRunTime(triggeredAt: string): string { + const t = parseTime(triggeredAt); + if (t === null) return "—"; + return clockLabel(t); +} + +/** + * A coarse relative label — "just now" (<1m), "Nm ago", "Nh ago", else the + * absolute date+time (so an old run reads "Jun 24, 14:30"). Pure via `now`. + */ +export function relativeLabel(triggeredAt: string, now: number = Date.now()): string { + const t = parseTime(triggeredAt); + if (t === null) return "—"; + const deltaMs = now - t; + if (deltaMs < 0) return "just now"; + const mins = Math.floor(deltaMs / 60000); + if (mins < 1) return "just now"; + if (mins < 60) return `${mins}m ago`; + const hours = Math.floor(mins / 60); + if (hours < 24) return `${hours}h ago`; + return dateLabel(t); +} + +/** + * Build a display view for a run. `now` is injectable for tests (defaults to + * `Date.now()`); the composition-root component passes nothing in production. + */ +export function viewRun(run: HeartbeatRun, now: number = Date.now()): HeartbeatRunView { + const { badge, busy } = badgeForStatus(run.status); + return { + id: run.id, + conversationId: run.conversationId, + status: run.status, + statusLabel: statusLabelFor(run.status), + badge, + busy, + timeLabel: formatRunTime(run.triggeredAt), + relativeLabel: relativeLabel(run.triggeredAt, now), + }; +} + +export function viewRuns( + runs: readonly HeartbeatRun[], + now: number = Date.now(), +): readonly HeartbeatRunView[] { + return runs.map((r) => viewRun(r, now)); +} + +// ── Time formatting (pure: no `Date` mutation; injectable `now` for tests) ───── + +/** Parse an ISO timestamp to epoch ms, or null if unparseable. */ +function parseTime(iso: string): number | null { + if (typeof iso !== "string" || iso.length === 0) return null; + const t = Date.parse(iso); + return Number.isNaN(t) ? null : t; +} + +/** `HH:MM:SS` in the viewer's locale (24h where the locale uses it). */ +function clockLabel(epochMs: number): string { + const d = new Date(epochMs); + const hh = String(d.getHours()).padStart(2, "0"); + const mm = String(d.getMinutes()).padStart(2, "0"); + const ss = String(d.getSeconds()).padStart(2, "0"); + return `${hh}:${mm}:${ss}`; +} + +/** A short absolute date+time label for an old run, e.g. "Jun 24, 14:30". */ +function dateLabel(epochMs: number): string { + const d = new Date(epochMs); + const month = d.toLocaleString(undefined, { month: "short" }); + const day = d.getDate(); + const hh = String(d.getHours()).padStart(2, "0"); + const mm = String(d.getMinutes()).padStart(2, "0"); + return `${month} ${day}, ${hh}:${mm}`; +} + +// ── Next-run countdown (timer of when the next heartbeat fires) ─────────────── +// +// The authoritative next-run time comes from the backend +// (`GET /workspaces/:id/heartbeat/next-run` → `nextRunAt` ISO string); the FE +// computes a live countdown from it + a 1s clock. When that endpoint is absent, +// the FE falls back to an approximation (`approximateNextRunEpoch`) from the +// latest run + the configured interval. + +/** Parse an ISO timestamp to epoch-ms, or null if unparseable. */ +export function nextRunEpoch(iso: string | null | undefined): number | null { + if (typeof iso !== "string" || iso.length === 0) return null; + const t = Date.parse(iso); + return Number.isNaN(t) ? null : t; +} + +/** + * Format a remaining-ms delta as a short countdown: "4m 32s", "32s", "1h 05m", + * "due" (≤ 0), or "—" (unknown/null). Pure via the injected `remainingMs`. + */ +export function formatCountdown(remainingMs: number | null): string { + if (remainingMs === null) return "—"; + if (remainingMs <= 0) return "due"; + const totalSec = Math.floor(remainingMs / 1000); + const hours = Math.floor(totalSec / 3600); + const mins = Math.floor((totalSec % 3600) / 60); + const secs = totalSec % 60; + if (hours > 0) return `${hours}h ${String(mins).padStart(2, "0")}m`; + if (mins > 0) return `${mins}m ${String(secs).padStart(2, "0")}s`; + return `${secs}s`; +} + +/** + * Approximate the next-run epoch-ms when the backend's `next-run` endpoint is + * unavailable: the LATEST run's `triggeredAt` + `intervalMinutes` (only when the + * heartbeat is enabled AND at least one run exists). Returns null otherwise (the + * FE then shows no countdown — never a fabricated one). The latest run is the + * max `triggeredAt` (runs need not be ordered). Pure (no `now` needed — the next + * run is latest + interval, independent of the current time). + */ +export function approximateNextRunEpoch( + runs: readonly HeartbeatRun[], + intervalMinutes: number, + enabled: boolean, +): number | null { + if (!enabled) return null; + let latest: number | null = null; + for (const r of runs) { + const t = Date.parse(r.triggeredAt); + if (!Number.isNaN(t) && (latest === null || t > latest)) latest = t; + } + if (latest === null) return null; + return latest + intervalMinutes * 60_000; +} + +// ── Config form ─────────────────────────────────────────────────────────────── + +/** + * The editable form state for the config panel — a mutable mirror of a loaded + * `HeartbeatConfig` that the inputs bind to. `reasoningEffort` is resolved to + * an effective level for the `<select>` (null ⇒ default `high`), exactly like + * the per-conversation selector. + * + * The interval is split into `intervalHours` + `intervalMinutes` (0–59) for the + * UI (two inputs), and recombined to a total-minutes value at the patch seam + * (`patchFromForm`); the backend stores a single `intervalMinutes`. + */ +export interface HeartbeatFormState { + enabled: boolean; + systemPrompt: string; + taskPrompt: string; + intervalHours: number; + intervalMinutes: number; + model: string; + reasoningEffort: ReasoningEffort; +} + +/** The default interval (minutes) shown for an empty/unset config. */ +export const DEFAULT_INTERVAL_MINUTES = 30; + +/** Split a total-minutes value into { hours, minutes (0–59) }. Pure. */ +export function splitInterval(totalMinutes: number): { hours: number; minutes: number } { + const total = normalizeInterval(totalMinutes); + const hours = Math.floor(total / 60); + const minutes = total - hours * 60; + return { hours, minutes }; +} + +/** Recombine hours + minutes into a clamped total-minutes value. Pure. */ +export function joinInterval(hours: number, minutes: number): number { + const h = Number.isFinite(hours) ? Math.max(0, Math.floor(hours)) : 0; + const m = Number.isFinite(minutes) ? Math.max(0, Math.floor(minutes)) : 0; + return normalizeInterval(h * 60 + m); +} + +/** + * Seed the editable form state from a loaded config, applying safe defaults for + * any malformed/absent backend field so the inputs are never `undefined`. + */ +export function formFromConfig(config: HeartbeatConfig): HeartbeatFormState { + const { hours, minutes } = splitInterval(config.intervalMinutes); + return { + enabled: config.enabled === true, + systemPrompt: config.systemPrompt ?? "", + taskPrompt: config.taskPrompt ?? "", + intervalHours: hours, + intervalMinutes: minutes, + model: typeof config.model === "string" ? config.model : "", + reasoningEffort: effectiveEffort(config.reasoningEffort ?? null), + }; +} + +/** An empty form (before the config loads). */ +export function emptyForm(): HeartbeatFormState { + const { hours, minutes } = splitInterval(DEFAULT_INTERVAL_MINUTES); + return { + enabled: false, + systemPrompt: "", + taskPrompt: "", + intervalHours: hours, + intervalMinutes: minutes, + model: "", + reasoningEffort: DEFAULT_REASONING_EFFORT, + }; +} + +/** Clamp a raw interval to a sane positive-minute range (1–1440 = 1 min–24 h). */ +export function normalizeInterval(value: unknown): number { + const n = typeof value === "number" && Number.isFinite(value) ? value : DEFAULT_INTERVAL_MINUTES; + const int = Math.round(n); + if (int < 1) return 1; + if (int > 1440) return 1440; + return int; +} + +/** + * The patch to PUT when persisting the form. The split hours+minutes are + * recombined into a single `intervalMinutes` (clamped); text fields are sent + * verbatim. `reasoningEffort` is always present (a resolved level) since the + * heartbeat has no per-run override — it persists the level. + */ +export function patchFromForm(form: HeartbeatFormState): HeartbeatConfigPatch { + return { + enabled: form.enabled, + systemPrompt: form.systemPrompt, + taskPrompt: form.taskPrompt, + intervalMinutes: joinInterval(form.intervalHours, form.intervalMinutes), + model: form.model, + reasoningEffort: form.reasoningEffort, + }; +} + +/** Whether the form differs from the loaded config (drives the Save button). */ +export function formDiffers(form: HeartbeatFormState, config: HeartbeatConfig): boolean { + const { hours, minutes } = splitInterval(config.intervalMinutes); + return ( + form.enabled !== config.enabled || + form.systemPrompt !== (config.systemPrompt ?? "") || + form.taskPrompt !== (config.taskPrompt ?? "") || + form.intervalHours !== hours || + form.intervalMinutes !== minutes || + form.model !== (typeof config.model === "string" ? config.model : "") || + form.reasoningEffort !== effectiveEffort(config.reasoningEffort ?? null) + ); +} + +// ── System-prompt inheritance (heartbeat override ⇄ global default) ──────────── +// +// The heartbeat's `systemPrompt` is an OVERRIDE of the global system prompt (the +// one every workspace conversation uses — there is no per-workspace system +// prompt; `GET /system-prompt` is global). An EMPTY override means "inherit the +// global default" (server-owned resolution: the backend resolves empty → global +// at run time; see CR-HB-2). These pure helpers keep the override/inherit +// semantics in ONE place so the editor + form agree. + +/** + * The prompt to DISPLAY: the heartbeat's override if it set one, else the global + * default. The editor pre-fills the textarea with this so the user can see (and + * tweak) what will run — but a pre-filled default is NOT an explicit edit. + */ +export function effectiveSystemPrompt(override: string, defaultPrompt: string): string { + return override !== "" ? override : defaultPrompt; +} + +/** Whether the heartbeat is inheriting the global default (empty override). */ +export function isInheritingSystemPrompt(override: string): boolean { + return override === ""; +} + +/** + * The `systemPrompt` value to PERSIST for the given editable text: if the user's + * text matches the global default (or is empty), persist `""` to INHERIT (so a + * later change to the global default still flows through); otherwise persist the + * text verbatim as an override. This keeps "matching the default = inheriting it" + * — never duplicating the default into the heartbeat config. + */ +export function persistedSystemPrompt(editable: string, defaultPrompt: string): string { + if (editable === "" || editable === defaultPrompt) return ""; + return editable; +} + +// The reasoning-effort `<option>`s are reused verbatim from the per-conversation +// selector (re-exported so the config panel imports a single source). +export { effortOptions }; + +// ── Network-seam normalization (pure; called by the composition root) ──────── +// +// The heartbeat API is untyped JSON (not a transport-contract type), so the +// store coerces each response defensively HERE (pure + tested) — a malformed/ +// partial backend value can never crash the renderer. Mirrors the inline +// `Array.isArray(data.servers) ? … : []` guard the store does for LSP/MCP. + +/** Narrow an untrusted string to the run-status enum, defaulting to "completed". */ +function asRunStatus(value: unknown): HeartbeatRunStatus { + if (value === "running" || value === "completed" || value === "stopped") return value; + return "completed"; +} + +/** Coerce an untrusted `GET .../heartbeat/runs` body into a typed run list. */ +export function normalizeHeartbeatRuns(data: unknown): readonly HeartbeatRun[] { + if (!isRecord(data) || !Array.isArray(data.runs)) return []; + const runs = data.runs as readonly unknown[]; + return runs + .filter((r): r is Record<string, unknown> => r !== null && typeof r === "object") + .map((r) => ({ + id: typeof r.id === "string" ? r.id : "", + conversationId: typeof r.conversationId === "string" ? r.conversationId : "", + triggeredAt: typeof r.triggeredAt === "string" ? r.triggeredAt : "", + status: asRunStatus(r.status), + })) + .filter((r) => r.id !== "" && r.conversationId !== ""); +} + +/** Coerce an untrusted `GET`/`PUT .../heartbeat` body into a typed config. */ +export function normalizeHeartbeatConfig(data: unknown): HeartbeatConfig { + const d = isRecord(data) ? data : {}; + const effort = d.reasoningEffort; + return { + enabled: d.enabled === true, + systemPrompt: typeof d.systemPrompt === "string" ? d.systemPrompt : "", + taskPrompt: typeof d.taskPrompt === "string" ? d.taskPrompt : "", + intervalMinutes: normalizeInterval(d.intervalMinutes), + model: typeof d.model === "string" ? d.model : "", + reasoningEffort: + effort === "low" || + effort === "medium" || + effort === "high" || + effort === "xhigh" || + effort === "max" + ? effort + : null, + }; +} + +function isRecord(value: unknown): value is Record<string, unknown> { + return value !== null && typeof value === "object"; +} diff --git a/src/features/heartbeat/ui/HeartbeatView.svelte b/src/features/heartbeat/ui/HeartbeatView.svelte new file mode 100644 index 0000000..5f262f8 --- /dev/null +++ b/src/features/heartbeat/ui/HeartbeatView.svelte @@ -0,0 +1,536 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import type { ReasoningEffort } from "@dispatch/transport-contract"; + import { isReasoningEffort } from "../../chat/reasoning-effort"; + import { + approximateNextRunEpoch, + badgeForStatus, + type Badge, + emptyForm, + effortOptions, + formatCountdown, + formDiffers, + formFromConfig, + joinInterval, + nextRunEpoch, + patchFromForm, + viewRuns, + type HeartbeatFormState, + type HeartbeatRunView, + } from "../logic/view-model"; + import type { + HeartbeatRun, + LoadHeartbeatConfig, + LoadHeartbeatNextRun, + LoadHeartbeatRuns, + SaveHeartbeatConfig, + StopHeartbeatRun, + } from "../logic/types"; + import type { + LoadSystemPrompt, + LoadSystemPromptVariables, + } from "../../system-prompt"; + import PromptEditor from "./PromptEditor.svelte"; + + let { + models, + loadConfig, + saveConfig, + loadRuns, + stopRun, + loadVariables, + loadDefaultPrompt, + loadNextRun, + onOpenRun, + }: { + /** The available model names (for the config's model dropdown). */ + models: readonly string[]; + loadConfig: LoadHeartbeatConfig; + saveConfig: SaveHeartbeatConfig; + loadRuns: LoadHeartbeatRuns; + stopRun: StopHeartbeatRun; + /** Load the available system-prompt variables (palette in the prompt editor). */ + loadVariables: LoadSystemPromptVariables; + /** Load the global system prompt — the default the heartbeat inherits when + * its `systemPrompt` is empty (the workspace's regular prompt). */ + loadDefaultPrompt: LoadSystemPrompt; + /** Load the server-authoritative next-run timestamp (the countdown source). */ + loadNextRun: LoadHeartbeatNextRun; + /** Open a run's chat in the fullscreen modal (composition-root wires the live watch). */ + onOpenRun: (run: HeartbeatRunView) => void; + } = $props(); + + const badgeClass: Record<Badge, string> = { + success: "badge-success", + warning: "badge-warning", + error: "badge-error", + neutral: "badge-ghost", + }; + + const effortOpts = effortOptions(); + + // ── Config form ────────────────────────────────────────────────────────── + let form = $state<HeartbeatFormState>(emptyForm()); + /** The last successfully loaded/saved config, to diff the form against. */ + let loadedConfig = $state<HeartbeatFormState>(emptyForm()); + let configLoading = $state(false); + let configError = $state<string | null>(null); + let saving = $state(false); + let saveError = $state<string | null>(null); + let justSaved = $state(false); + let hasConfig = $state(false); + let promptEditorOpen = $state(false); + + const hasChanges = $derived(formDiffers(form, loadedConfig) && hasConfig); + + async function refreshConfig(): Promise<void> { + configLoading = true; + configError = null; + const result = await loadConfig(); + configLoading = false; + if (result === null) return; + if (result.ok) { + hasConfig = true; + form = formFromConfig(result.config); + loadedConfig = formFromConfig(result.config); + saveError = null; + } else { + configError = result.error; + } + } + + async function handleSave(): Promise<void> { + if (saving || !hasChanges) return; + saving = true; + saveError = null; + justSaved = false; + const result = await saveConfig(patchFromForm(form)); + saving = false; + if (result === null) return; + if (result.ok) { + // Re-seed from the authoritative response so the form tracks the server. + form = formFromConfig(result.config); + loadedConfig = formFromConfig(result.config); + justSaved = true; + } else { + saveError = result.error; + } + } + + // The enable toggle is the primary action — persist it immediately (don't + // require a separate Save). Mirrors the codebase's save-on-change controls. + async function handleToggleEnabled(): Promise<void> { + if (saving) return; + const next = !form.enabled; + form = { ...form, enabled: next }; + saving = true; + saveError = null; + justSaved = false; + const result = await saveConfig({ enabled: next }); + saving = false; + if (result === null) return; + if (result.ok) { + form = formFromConfig(result.config); + loadedConfig = formFromConfig(result.config); + justSaved = true; + } else { + saveError = result.error; + // Revert the toggle to the last-known state. + form = { ...form, enabled: loadedConfig.enabled }; + } + } + + // ── Runs list (polls while mounted) ─────────────────────────────────────── + let runs = $state<readonly HeartbeatRunView[]>([]); + /** The raw backend runs (carry `triggeredAt`), kept for the next-run + * approximation fallback (the view drops `triggeredAt` for display labels). */ + let rawRuns = $state<readonly HeartbeatRun[]>([]); + /** True after the first successful load (gates the "No runs yet" empty state + * WITHOUT flashing it before the initial fetch resolves). The per-poll + * loading is intentionally INVISIBLE — it's near-instant and a visible + * loading indicator caused the sidebar to flicker every poll (height shift). */ + let hasLoadedRuns = $state(false); + let runsError = $state<string | null>(null); + let stoppingId = $state<string | null>(null); + let stopError = $state<string | null>(null); + let pollHandle: ReturnType<typeof setInterval> | null = null; + /** Re-entrancy guard for background polling (no UI — prevents overlapping fetches). */ + let refreshInFlight = false; + + // ── Next-run countdown ─────────────────────────────────────────────────── + /** Epoch-ms of the next scheduled run, or null (no countdown shown). Sourced + * from the backend's `next-run` endpoint; falls back to an approximation + * (latest run + interval) when the endpoint is unavailable (404 — pre-CR-HB-3). */ + let nextRunAt = $state<number | null>(null); + /** Once the next-run endpoint fails (404), stop polling it (avoid 404 spam) and + * rely on the approximation. Reset only on remount. */ + let nextRunEndpointFailed = $state(false); + + async function refreshNextRun(): Promise<void> { + if (nextRunEndpointFailed) return; + const result = await loadNextRun(); + if (result === null) return; + if (result.ok) { + nextRunAt = nextRunEpoch(result.nextRunAt); + } else { + // Endpoint absent / errored → stop polling it + use the approximation. + nextRunEndpointFailed = true; + } + } + + /** The fallback countdown source: latest run + interval (only when enabled + + * ≥1 run). Recomputed reactively from the loaded config + raw runs. */ + const approxNextRun = $derived( + approximateNextRunEpoch( + rawRuns, + joinInterval(loadedConfig.intervalHours, loadedConfig.intervalMinutes), + loadedConfig.enabled, + ), + ); + /** The effective next-run epoch: the server value if available, else the + * approximation. Drives the countdown. */ + const effectiveNextRun = $derived(nextRunEndpointFailed ? approxNextRun : nextRunAt); + + const RUN_POLL_MS = 4000; + + async function refreshRuns(): Promise<void> { + if (refreshInFlight) return; + refreshInFlight = true; + const result = await loadRuns(); + refreshInFlight = false; + if (result === null) return; + if (result.ok) { + rawRuns = result.runs; + runs = viewRuns(result.runs); + // Clear the error only on success so it stays visible (stable, no + // flicker) during an in-flight retry rather than vanishing mid-poll. + runsError = null; + hasLoadedRuns = true; + } else { + runsError = result.error; + } + } + + async function handleStop(runId: string): Promise<void> { + if (stoppingId !== null) return; + stoppingId = runId; + stopError = null; + const result = await stopRun(runId); + stoppingId = null; + if (result === null) return; + if (result.ok) { + await refreshRuns(); + } else { + stopError = result.error; + } + } + + // Load config + runs + next-run on mount, and poll them while the view is + // alive so a running run's completion/stopped transition + the next-run timer + // stay fresh without a manual refresh. + $effect(() => { + untrack(() => { + void refreshConfig(); + void refreshRuns(); + void refreshNextRun(); + }); + pollHandle = setInterval(() => { + void refreshRuns(); + void refreshNextRun(); + }, RUN_POLL_MS); + return () => { + if (pollHandle !== null) clearInterval(pollHandle); + pollHandle = null; + }; + }); + + // A relative label ("5m ago") drifts as time passes; re-derive runs every + // minute so the list stays fresh without a full re-fetch. + let tick = $state(0); + $effect(() => { + const h = setInterval(() => { + tick++; + }, 60000); + return () => clearInterval(h); + }); + const runsView = $derived.by(() => { + void tick; // depend on the ticker + return runs; + }); + + // The countdown clock: ticks every second so the "next run in Xm Ys" stays + // live. Pure countdown math is in `formatCountdown` (view-model); this only + // advances `now`. + let now = $state(Date.now()); + $effect(() => { + const h = setInterval(() => { + now = Date.now(); + }, 1000); + return () => clearInterval(h); + }); + const countdownMs = $derived( + effectiveNextRun !== null ? effectiveNextRun - now : null, + ); + const countdownLabel = $derived(formatCountdown(countdownMs)); +</script> + +<div class="flex flex-col gap-3"> + <!-- Enable / status header --> + <section class="flex flex-col gap-1"> + <div class="flex items-center justify-between gap-2"> + <div class="flex items-center gap-2"> + <button + type="button" + role="switch" + aria-checked={form.enabled} + aria-label="Toggle heartbeat" + class="toggle toggle-sm" + class:toggle-primary={form.enabled} + disabled={saving || configLoading} + onclick={handleToggleEnabled} + ></button> + <span class="text-xs font-semibold uppercase opacity-60"> + {#if configLoading} + Loading… + {:else if form.enabled} + Enabled + {:else} + Disabled + {/if} + </span> + </div> + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={configLoading} + onclick={() => refreshConfig()} + aria-label="Refresh heartbeat config" + > + {#if configLoading} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Refresh + {/if} + </button> + </div> + {#if form.enabled && effectiveNextRun !== null} + <p class="text-xs opacity-60" title="When the next heartbeat run fires"> + Next run in {countdownLabel} + </p> + {/if} + </section> + + {#if configError} + <p class="text-xs text-error">{configError}</p> + {:else} + <!-- Prompts (open the full-page editor) --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Prompts</span> + <button + type="button" + class="btn btn-sm btn-outline" + disabled={saving || configLoading} + onclick={() => (promptEditorOpen = true)} + > + Edit prompts + </button> + <p class="text-xs opacity-50"> + Open the editor for the system + task prompts (with a variable palette). + </p> + </section> + + <!-- Model + reasoning effort --> + <section class="flex flex-col gap-2"> + <div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Model</span> + <select + class="select select-sm w-full" + value={form.model} + disabled={saving || configLoading} + onchange={(e) => (form = { ...form, model: e.currentTarget.value })} + aria-label="Heartbeat model" + > + {#if models.length === 0} + <option value="">No models available</option> + {:else} + <option value="" disabled>Select a model</option> + {#each models as model (model)} + <option value={model}>{model}</option> + {/each} + {/if} + </select> + </div> + + <div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Reasoning effort</span> + <select + class="select select-sm w-full" + value={form.reasoningEffort} + disabled={saving || configLoading} + onchange={(e) => { + const v = e.currentTarget.value; + if (isReasoningEffort(v)) form = { ...form, reasoningEffort: v as ReasoningEffort }; + }} + aria-label="Heartbeat reasoning effort" + > + {#each effortOpts as option (option.value)} + <option value={option.value}>{option.label}</option> + {/each} + </select> + </div> + </section> + + <!-- Interval (hours + minutes) --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Interval</span> + <div class="flex items-center gap-2"> + <input + type="number" + class="input input-bordered input-sm w-20" + min="0" + max="24" + value={form.intervalHours} + disabled={saving || configLoading} + oninput={(e) => { + const n = Number.parseInt(e.currentTarget.value, 10); + form = { ...form, intervalHours: Number.isNaN(n) ? 0 : n }; + }} + onchange={(e) => { + const clamped = Math.max(0, Math.min(24, form.intervalHours)); + form = { ...form, intervalHours: clamped }; + e.currentTarget.value = String(clamped); + }} + aria-label="Heartbeat interval hours" + /> + <span class="text-xs opacity-60">h</span> + <input + type="number" + class="input input-bordered input-sm w-20" + min="0" + max="59" + value={form.intervalMinutes} + disabled={saving || configLoading} + oninput={(e) => { + const n = Number.parseInt(e.currentTarget.value, 10); + form = { ...form, intervalMinutes: Number.isNaN(n) ? 0 : n }; + }} + onchange={(e) => { + const clamped = Math.max(0, Math.min(59, form.intervalMinutes)); + form = { ...form, intervalMinutes: clamped }; + e.currentTarget.value = String(clamped); + }} + aria-label="Heartbeat interval minutes" + /> + <span class="text-xs opacity-60">m between runs</span> + </div> + </section> + + <!-- Save --> + <section class="flex flex-col gap-1"> + <button + type="button" + class="btn btn-sm btn-primary" + disabled={!hasChanges || saving || configLoading} + onclick={handleSave} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + Saving… + {:else} + Save config + {/if} + </button> + {#if saveError} + <p class="text-xs text-error">{saveError}</p> + {:else if justSaved} + <p class="text-xs text-success">Saved.</p> + {/if} + </section> + {/if} + + <!-- Runs list --> + <section class="flex flex-col gap-1"> + <div class="flex items-center justify-between gap-2"> + <span class="text-xs font-semibold uppercase opacity-60">Runs</span> + <button + type="button" + class="btn btn-ghost btn-xs" + onclick={() => refreshRuns()} + aria-label="Refresh heartbeat runs" + > + Refresh + </button> + </div> + + {#if runsError} + <p class="text-xs text-error">{runsError}</p> + {:else if runs.length > 0} + <ul class="flex max-h-72 flex-col gap-1 overflow-y-auto"> + {#each runsView as run (run.id)} + <li> + <button + type="button" + class="flex w-full items-center justify-between gap-2 rounded-box bg-base-200 p-2 text-left hover:bg-base-300" + onclick={() => onOpenRun(run)} + aria-label="Open heartbeat run {run.id} chat" + > + <span class="flex min-w-0 flex-col gap-0.5"> + <span class="truncate font-mono text-xs opacity-70">{run.id}</span> + <span class="text-xs opacity-60"> + {run.relativeLabel} · {run.timeLabel} + </span> + </span> + <span class="flex items-center gap-1"> + {#if run.busy} + <span class="loading loading-spinner loading-xs"></span> + {/if} + <span class="badge badge-sm {badgeClass[run.badge]}">{run.statusLabel}</span> + </span> + </button> + {#if run.busy} + <button + type="button" + class="btn btn-ghost btn-xs mt-0.5 text-xs" + disabled={stoppingId === run.id} + onclick={() => handleStop(run.id)} + > + {#if stoppingId === run.id} + <span class="loading loading-spinner loading-xs"></span> + Stopping… + {:else} + Stop + {/if} + </button> + {/if} + </li> + {/each} + </ul> + {#if stopError} + <p class="text-xs text-error">{stopError}</p> + {/if} + {:else if hasLoadedRuns} + <!-- Loaded with zero runs (not the pre-first-load gap). No loading + indicator — polling is near-instant and a visible one flickered. --> + <p class="text-xs opacity-60">No runs yet. Enable the heartbeat to start the loop.</p> + {/if} + </section> +</div> + +{#if promptEditorOpen} + <PromptEditor + systemPrompt={form.systemPrompt} + taskPrompt={form.taskPrompt} + {loadVariables} + {loadDefaultPrompt} + {saveConfig} + onSaved={(systemPrompt, taskPrompt) => { + // Sync the form + the diff baseline so the main Save button + formDiffers + // stay accurate (the editor persisted the prompts already). `systemPrompt` + // may be "" (inherit) — the form stores the raw override. + form = { ...form, systemPrompt, taskPrompt }; + loadedConfig = { ...loadedConfig, systemPrompt, taskPrompt }; + justSaved = true; + }} + onClose={() => (promptEditorOpen = false)} + /> +{/if} diff --git a/src/features/heartbeat/ui/PromptEditor.svelte b/src/features/heartbeat/ui/PromptEditor.svelte new file mode 100644 index 0000000..2320827 --- /dev/null +++ b/src/features/heartbeat/ui/PromptEditor.svelte @@ -0,0 +1,412 @@ +<script lang="ts"> + import type { SystemPromptVariable } from "@dispatch/transport-contract"; + import { tick, untrack } from "svelte"; + import { + buildTag, + groupVariables, + insertTag, + isDynamicVariable, + type LoadSystemPrompt, + type LoadSystemPromptVariables, + } from "../../system-prompt"; + import type { SaveHeartbeatConfig } from "../logic/types"; + import { + effectiveSystemPrompt, + isInheritingSystemPrompt, + persistedSystemPrompt, + } from "../logic/view-model"; + import { portal } from "../../../adapters/portal"; + + let { + systemPrompt, + taskPrompt, + loadVariables, + loadDefaultPrompt, + saveConfig, + onSaved, + onClose, + }: { + /** + * The heartbeat's persisted system prompt (raw override). Empty = inherit + * the global system prompt (the workspace's regular prompt). + */ + systemPrompt: string; + /** The current task prompt (seeded from the loaded config). */ + taskPrompt: string; + /** Load the available variables (`GET /system-prompt/variables`). */ + loadVariables: LoadSystemPromptVariables; + /** Load the GLOBAL system prompt (`GET /system-prompt`) — the default the + * heartbeat inherits when its `systemPrompt` is empty. */ + loadDefaultPrompt: LoadSystemPrompt; + /** Persist both prompts via a partial heartbeat config PUT. */ + saveConfig: SaveHeartbeatConfig; + /** Called after a successful save with the RAW persisted prompts (system + * may be "" = inherit), so the parent can sync its form. */ + onSaved: (systemPrompt: string, taskPrompt: string) => void; + onClose: () => void; + } = $props(); + + // The global default system prompt (loaded async on open). Empty until loaded + // (or when no global prompt is configured) — the editor degrades gracefully. + let defaultPrompt = $state(""); + + // The editable system text. Pre-filled with the EFFECTIVE prompt — the + // heartbeat's override, or the global default when inheriting (so the user + // can see + tweak what will run). A pre-filled default is NOT an explicit + // edit (see `hasChanges`). + let system = $state(untrack(() => systemPrompt)); + let task = $state(untrack(() => taskPrompt)); + + // The raw persisted override at open + after each save (the diff baseline for + // the system field). Empty = the heartbeat is inheriting the global default. + // REACTIVE so a successful save can update it to the newly-persisted value — + // otherwise `systemBaseline` stays pinned to the open-time value and + // `hasChanges` never clears (the "Save flickers and reverts" bug). + let loadedSystemRaw = $state(untrack(() => systemPrompt)); + let loadedTask = $state(untrack(() => taskPrompt)); + + let variables = $state<readonly SystemPromptVariable[]>([]); + let varsLoading = $state(false); + let varsError = $state<string | null>(null); + let defaultLoading = $state(false); + + let saving = $state(false); + let saveError = $state<string | null>(null); + let justSaved = $state(false); + + // The textarea currently focused — variable insertion targets THIS one. + type Field = "system" | "task"; + let activeField = $state<Field>("system"); + let systemEl = $state<HTMLTextAreaElement | null>(null); + let taskEl = $state<HTMLTextAreaElement | null>(null); + + const groups = $derived(groupVariables(variables)); + /** The baseline system text to diff against: the effective prompt at open + + * after the last save (override, or the default when inheriting) — so a + * pre-filled default does NOT register as an unsaved change, and a saved + * edit clears `hasChanges` (the baseline tracks the persisted value). */ + const systemBaseline = $derived(effectiveSystemPrompt(loadedSystemRaw, defaultPrompt)); + const hasChanges = $derived(system !== systemBaseline || task !== loadedTask); + /** Whether the current text matches the default (i.e. saving would inherit). */ + const inheriting = $derived(system === defaultPrompt && defaultPrompt !== ""); + + async function loadVars(): Promise<void> { + untrack(() => { + varsLoading = true; + varsError = null; + }); + const result = await loadVariables(); + varsLoading = false; + if (result.ok) { + variables = result.variables; + } else { + varsError = result.error; + } + } + + async function loadDefault(): Promise<void> { + untrack(() => { + defaultLoading = true; + }); + const result = await loadDefaultPrompt(); + defaultLoading = false; + if (result.ok) { + defaultPrompt = result.template; + // Pre-fill an inheriting (empty) override with the global default so the + // user can see + tweak what will run — but ONLY if they haven't edited + // the system field yet (system still equals the open-time raw override). + // Done here (not in a reactive $effect) so a late-loading default can't + // clobber an in-flight edit. + if (isInheritingSystemPrompt(loadedSystemRaw) && system === loadedSystemRaw) { + system = defaultPrompt; + } + } + // A failed default load is non-fatal: the editor still works with the + // raw override; only the "inherit" affordance is unavailable. + } + + async function save(): Promise<void> { + if (saving || !hasChanges) return; + saving = true; + saveError = null; + justSaved = false; + // Persist the system prompt via the inheritance helper: matching the + // default (or empty) → "" (inherit); otherwise the override verbatim. + const systemToPersist = persistedSystemPrompt(system, defaultPrompt); + const result = await saveConfig({ systemPrompt: systemToPersist, taskPrompt: task }); + saving = false; + if (result === null) return; + if (result.ok) { + // Advance the diff baseline to the persisted value so `hasChanges` + // clears (systemBaseline recomputes off loadedSystemRaw). Without this + // the baseline stays pinned to the open-time value and the Save button + // never settles ("flickers and reverts to unsaved"). + loadedSystemRaw = systemToPersist; + loadedTask = task; + justSaved = true; + onSaved(systemToPersist, task); + } else { + saveError = result.error; + } + } + + /** Revert ALL edits to the open-time state (system effective prompt + task). */ + function reset(): void { + system = systemBaseline; + task = loadedTask; + saveError = null; + justSaved = false; + } + + /** Reset ONLY the system prompt to the global default (clears any override → + * inherit on save). No-op until the default has loaded. */ + function resetSystemToDefault(): void { + if (defaultPrompt === "") return; + system = defaultPrompt; + saveError = null; + justSaved = false; + } + + /** + * Insert a variable tag into the ACTIVE textarea at its cursor. The active + * field is tracked via focus handlers; insertion uses that field's element + + * its own text (so a tag never lands in the wrong box). + */ + async function insertAtActive(tag: string): Promise<void> { + const el = activeField === "system" ? systemEl : taskEl; + if (el === null) return; + const start = el.selectionStart; + const end = el.selectionEnd; + if (activeField === "system") { + const ins = insertTag(system, tag, start, end); + system = ins.template; + await tick(); + el.focus(); + el.setSelectionRange(ins.cursor, ins.cursor); + } else { + const ins = insertTag(task, tag, start, end); + task = ins.template; + await tick(); + el.focus(); + el.setSelectionRange(ins.cursor, ins.cursor); + } + } + + /** Dynamic (file:<path>) variable: build the tag from the input + insert. */ + async function insertDynamic(type: string, path: string): Promise<void> { + const trimmed = path.trim(); + if (trimmed.length === 0) return; + await insertAtActive(buildTag(type, trimmed)); + } + + function onKeydown(e: KeyboardEvent): void { + if (e.key === "Escape") onClose(); + } + + // Load the variable palette + the global default once on open. + $effect(() => { + void loadVars(); + void loadDefault(); + }); +</script> + +<svelte:window onkeydown={onKeydown} /> + +<!-- Teleported to <body> (use:portal) so `position: fixed` resolves against the + VIEWPORT, not the sidebar's `transform: translateX(...)` container — an + ancestor transform establishes a containing block for `fixed`, which would + otherwise clip this overlay to the sidebar area. (RunModal/SystemPromptBuilder + avoid this by rendering at the composition root; this modal lives inside + HeartbeatView, so it must escape its ancestor.) --> +<!-- svelte-ignore a11y_no_static_element_interactions --> +<div + use:portal + class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" + role="dialog" + aria-modal="true" + aria-label="Heartbeat prompt editor" + tabindex="-1" + onclick={onClose} + onkeydown={onKeydown} +> + <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions --> + <div + class="flex h-[85vh] w-full max-w-6xl flex-col overflow-hidden rounded-box bg-base-100 shadow-2xl" + onclick={(e) => e.stopPropagation()} + > + <!-- Header --> + <div class="flex shrink-0 items-center justify-between border-b border-base-300 px-4 py-3"> + <div class="flex items-center gap-2"> + <h2 class="text-sm font-semibold">Heartbeat Prompts</h2> + {#if varsLoading} + <span class="loading loading-spinner loading-xs"></span> + {/if} + </div> + <button + type="button" + class="btn btn-ghost btn-sm btn-square" + onclick={onClose} + aria-label="Close prompt editor" + > + ✕ + </button> + </div> + + <!-- Body: half editor (two boxes) / half variables --> + <div class="flex min-h-0 flex-1"> + <!-- Left: two text editors (system top, task bottom) --> + <div class="flex w-1/2 min-w-0 flex-col gap-2 border-r border-base-300 p-4"> + <div class="flex min-h-0 flex-1 flex-col gap-1"> + <div class="flex shrink-0 items-center justify-between gap-2"> + <div class="flex items-center gap-2"> + <span class="text-xs font-semibold uppercase opacity-60">System prompt</span> + {#if defaultLoading} + <span class="loading loading-spinner loading-xs"></span> + {:else if inheriting} + <span class="badge badge-ghost badge-sm font-normal">Inheriting workspace default</span> + {/if} + </div> + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={defaultPrompt === "" || saving} + onclick={resetSystemToDefault} + title="Reset the system prompt to the workspace default (inherit)" + > + Reset to default + </button> + </div> + <textarea + bind:this={systemEl} + bind:value={system} + onfocus={() => (activeField = "system")} + class="textarea textarea-bordered min-h-0 w-full flex-1 resize-none font-mono text-xs" + placeholder={defaultPrompt || "You are an autonomous agent…"} + disabled={saving} + aria-label="Heartbeat system prompt" + ></textarea> + <p class="shrink-0 text-xs opacity-50"> + {#if inheriting} + Matches the workspace default — saving will inherit it (no override). + {:else if defaultPrompt !== ""} + Editing overrides the workspace default. + {:else} + Empty — no system prompt set. + {/if} + </p> + </div> + + <div class="flex min-h-0 flex-1 flex-col gap-1"> + <span class="shrink-0 text-xs font-semibold uppercase opacity-60">Task prompt</span> + <textarea + bind:this={taskEl} + bind:value={task} + onfocus={() => (activeField = "task")} + class="textarea textarea-bordered min-h-0 w-full flex-1 resize-none font-mono text-xs" + placeholder="Check the system status and report…" + disabled={saving} + aria-label="Heartbeat task prompt" + ></textarea> + </div> + + <div class="flex shrink-0 flex-wrap items-center gap-2"> + <button + type="button" + class="btn btn-primary btn-sm" + disabled={saving || !hasChanges} + onclick={save} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Save + {/if} + </button> + <button + type="button" + class="btn btn-ghost btn-sm" + disabled={!hasChanges} + onclick={reset} + > + Reset + </button> + {#if justSaved && !hasChanges} + <span class="text-xs text-success">Saved.</span> + {:else if hasChanges} + <span class="text-xs opacity-60">Unsaved changes</span> + {/if} + </div> + + {#if saveError} + <p class="shrink-0 text-xs text-error">{saveError}</p> + {/if} + </div> + + <!-- Right: variable palette --> + <div class="flex w-1/2 min-w-0 flex-col overflow-y-auto p-4"> + <h3 class="mb-2 shrink-0 text-xs font-semibold uppercase opacity-60">Variables</h3> + <p class="mb-3 shrink-0 text-xs opacity-50"> + Click a variable to insert it into the focused prompt box. + </p> + {#if varsError} + <p class="text-xs text-error">{varsError}</p> + {:else if groups.length === 0 && !varsLoading} + <p class="text-xs opacity-60">No variables available.</p> + {:else} + <div class="flex flex-col gap-3"> + {#each groups as group (group.type)} + <div class="rounded-box bg-base-200 p-3"> + <span class="text-xs font-semibold uppercase opacity-70">{group.type}</span> + <div class="mt-2 flex flex-wrap gap-1"> + {#each group.variables as variable (variable.type + variable.name)} + {#if isDynamicVariable(variable)} + <!-- Dynamic (file:<path>) variable: a path input + Insert button. --> + <div class="flex items-center gap-1"> + <input + type="text" + class="input input-bordered input-xs w-32 font-mono" + placeholder={variable.name} + onkeydown={(e) => { + if (e.key === "Enter") { + const v = e.currentTarget.value; + void insertDynamic(variable.type, v); + e.currentTarget.value = ""; + } + }} + /> + <button + type="button" + class="btn btn-xs" + onclick={(e) => { + const input = (e.currentTarget as HTMLButtonElement) + .previousElementSibling as HTMLInputElement | null; + if (input !== null) { + void insertDynamic(variable.type, input.value); + input.value = ""; + } + }} + > + Insert + </button> + </div> + {:else} + <button + type="button" + class="btn btn-xs" + title={variable.description} + onclick={() => + void insertAtActive(buildTag(variable.type, variable.name))} + > + {variable.name} + </button> + {/if} + {/each} + </div> + </div> + {/each} + </div> + {/if} + </div> + </div> + </div> +</div> diff --git a/src/features/heartbeat/ui/PromptEditor.test.ts b/src/features/heartbeat/ui/PromptEditor.test.ts new file mode 100644 index 0000000..284b319 --- /dev/null +++ b/src/features/heartbeat/ui/PromptEditor.test.ts @@ -0,0 +1,167 @@ +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; +import type { + HeartbeatConfigPatch, + HeartbeatConfigResult, + SaveHeartbeatConfig, +} from "../logic/types"; +import PromptEditor from "./PromptEditor.svelte"; + +// Fakes for the injected ports. + +function fakeLoadVariables() { + return vi.fn(async () => ({ ok: true, variables: [] }) as const); +} + +function fakeLoadDefaultPrompt(template = "You are a helpful assistant.") { + return vi.fn(async () => ({ ok: true, template }) as const); +} + +/** A capturing saveConfig that resolves ok, echoing the merged config shape. */ +function fakeSaveConfig(): { + calls: HeartbeatConfigPatch[]; + impl: SaveHeartbeatConfig; +} { + const calls: HeartbeatConfigPatch[] = []; + const impl: SaveHeartbeatConfig = async (patch) => { + calls.push(patch); + // Echo a config that reflects the persisted patch (so onSaved sync is realistic). + const config = { + enabled: false, + systemPrompt: patch.systemPrompt ?? "", + taskPrompt: patch.taskPrompt ?? "", + intervalMinutes: 30, + model: "openai/gpt-4o", + reasoningEffort: null, + }; + return { ok: true, config } satisfies HeartbeatConfigResult; + }; + return { calls, impl }; +} + +const baseProps = (overrides: Record<string, unknown> = {}) => ({ + systemPrompt: "", + taskPrompt: "", + loadVariables: fakeLoadVariables(), + loadDefaultPrompt: fakeLoadDefaultPrompt(), + saveConfig: fakeSaveConfig().impl, + onSaved: vi.fn(), + onClose: vi.fn(), + ...overrides, +}); + +describe("PromptEditor save flow", () => { + it("persists an edited system prompt and clears the unsaved state (regression: save flickered + reverted)", async () => { + const user = userEvent.setup(); + const save = fakeSaveConfig(); + const onSaved = vi.fn(); + render(PromptEditor, { + props: baseProps({ + // Start inheriting (empty override); the default pre-fills. + systemPrompt: "", + saveConfig: save.impl, + onSaved, + }), + }); + + // Wait for the default to load + pre-fill the system textarea. + const systemBox = await screen.findByLabelText("Heartbeat system prompt"); + expect(systemBox).toHaveValue("You are a helpful assistant."); + + // Save is disabled while it matches the default (no explicit edit). + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + + // Edit the system prompt → an override. + await user.clear(systemBox); + await user.type(systemBox, "custom override"); + + // Save is now enabled. + const saveBtn = screen.getByRole("button", { name: "Save" }); + expect(saveBtn).toBeEnabled(); + await user.click(saveBtn); + + // The save port was called with the override persisted verbatim. + expect(save.calls).toHaveLength(1); + expect(save.calls[0]?.systemPrompt).toBe("custom override"); + expect(onSaved).toHaveBeenCalledWith("custom override", ""); + + // THE REGRESSION: after save, hasChanges must clear (Save disabled again) + // and the "Saved." confirmation shows — NOT "Unsaved changes". + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + }); + expect(screen.getByText("Saved.")).toBeInTheDocument(); + expect(screen.queryByText(/Unsaved changes/i)).not.toBeInTheDocument(); + }); + + it("persisting text that matches the default sends '' (inherit) and clears unsaved state", async () => { + const user = userEvent.setup(); + const save = fakeSaveConfig(); + render(PromptEditor, { + props: baseProps({ + // Start with an override. + systemPrompt: "old override", + saveConfig: save.impl, + }), + }); + + const systemBox = await screen.findByLabelText("Heartbeat system prompt"); + expect(systemBox).toHaveValue("old override"); + + // Reset to default → text matches the default → saving inherits (""). + await user.click(screen.getByRole("button", { name: "Reset to default" })); + expect(systemBox).toHaveValue("You are a helpful assistant."); + + const saveBtn = screen.getByRole("button", { name: "Save" }); + expect(saveBtn).toBeEnabled(); + await user.click(saveBtn); + + expect(save.calls).toHaveLength(1); + expect(save.calls[0]?.systemPrompt).toBe(""); // inherit + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + }); + expect(screen.getByText("Saved.")).toBeInTheDocument(); + }); + + it("editing the task prompt saves + clears unsaved state", async () => { + const user = userEvent.setup(); + const save = fakeSaveConfig(); + render(PromptEditor, { + props: baseProps({ saveConfig: save.impl }), + }); + + const taskBox = await screen.findByLabelText("Heartbeat task prompt"); + await user.type(taskBox, "do the thing"); + + const saveBtn = screen.getByRole("button", { name: "Save" }); + expect(saveBtn).toBeEnabled(); + await user.click(saveBtn); + + expect(save.calls[0]?.taskPrompt).toBe("do the thing"); + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + }); + expect(screen.getByText("Saved.")).toBeInTheDocument(); + }); + + it("a failed save surfaces the error and keeps the edit unsaved", async () => { + const user = userEvent.setup(); + const failingSave: SaveHeartbeatConfig = async () => ({ ok: false, error: "boom" }); + render(PromptEditor, { + props: baseProps({ saveConfig: failingSave }), + }); + + const systemBox = await screen.findByLabelText("Heartbeat system prompt"); + await user.clear(systemBox); + await user.type(systemBox, "custom"); + + await user.click(screen.getByRole("button", { name: "Save" })); + + expect(screen.getByText("boom")).toBeInTheDocument(); + // Still unsaved (Save stays enabled), no success badge. + expect(screen.getByRole("button", { name: "Save" })).toBeEnabled(); + expect(screen.queryByText("Saved.")).not.toBeInTheDocument(); + }); +}); diff --git a/src/features/heartbeat/ui/RunModal.svelte b/src/features/heartbeat/ui/RunModal.svelte new file mode 100644 index 0000000..92068ae --- /dev/null +++ b/src/features/heartbeat/ui/RunModal.svelte @@ -0,0 +1,176 @@ +<script lang="ts"> + import { tick } from "svelte"; + import { ChatView } from "../../chat"; + import type { ChatStore } from "../../chat"; + import type { HeartbeatRunView } from "../logic/view-model"; + import type { StopHeartbeatRun } from "../logic/types"; + + let { + run, + openChat, + closeChat, + stopRun, + onClose, + apiBaseUrl = "", + }: { + /** The run to display (its conversation's chat is shown live). */ + run: HeartbeatRunView; + /** + * Open a live watch on a conversation (the store's `watchConversation`): + * returns a {@link ChatStore} subscribed to the conversation's turn stream + * + history loaded. The modal owns the watch lifecycle — calls + * `closeChat` on unmount. + */ + openChat: (conversationId: string) => ChatStore; + /** Dispose + unsubscribe the watch opened by `openChat`. */ + closeChat: (conversationId: string) => void; + /** Stop the heartbeat run (`POST .../runs/:runId/stop`). */ + stopRun: StopHeartbeatRun; + onClose: () => void; + /** + * The HTTP API base URL, to resolve persisted image chunk URLs + * (`/images/…`) in the run's transcript. Defaults to "" (root-relative). + */ + apiBaseUrl?: string; + } = $props(); + + // Open the live watch ONCE on mount (the modal is keyed per run.id, so a run + // switch remounts it). `untrack` avoids re-running if the prop fn identity + // changes — `run.conversationId` is the real dependency, captured once here. + let chat = $state<ChatStore | null>(null); + $effect(() => { + chat = openChat(run.conversationId); + return () => closeChat(run.conversationId); + }); + + // Live scroll: keep the transcript pinned to the bottom while it streams + // (unless the reader has scrolled up — then we don't fight them). + let scrollEl = $state<HTMLDivElement | undefined>(); + let contentEl = $state<HTMLDivElement | undefined>(); + let pinned = $state(true); + + function onScroll() { + const el = scrollEl; + if (el === undefined) return; + pinned = el.scrollHeight - el.scrollTop - el.clientHeight < 40; + } + + // Follow the bottom on new content while pinned. Reads `chunks.length` so the + // effect re-runs on every streamed append. + const chunkCount = $derived(chat?.chunks.length ?? 0); + $effect(() => { + void chunkCount; + if (!pinned) return; + void tick().then(() => { + const el = scrollEl; + if (el !== undefined) el.scrollTop = el.scrollHeight; + }); + }); + + // Stop state. + let stopping = $state(false); + let stopError = $state<string | null>(null); + + async function handleStop() { + if (stopping) return; + stopping = true; + stopError = null; + const result = await stopRun(run.id); + stopping = false; + if (result === null) return; + if (!result.ok) stopError = result.error; + } + + // The live "running" signal: the chat store's `generating` reflects the + // actual event stream (turn-start…turn-sealed). True while a turn streams — + // that is when a Stop is meaningful. Falls back to the run's status snapshot + // before the stream attaches. + const live = $derived(chat?.generating ?? run.busy); + + function handleKeydown(e: KeyboardEvent) { + if (e.key === "Escape") onClose(); + } +</script> + +<svelte:window onkeydown={handleKeydown} /> + +<!-- Fullscreen overlay. --> +<div class="fixed inset-0 z-50 flex flex-col bg-base-100"> + <!-- Header --> + <header class="flex items-center justify-between gap-2 border-b border-base-300 px-4 py-2"> + <div class="flex min-w-0 items-center gap-2"> + <button + type="button" + class="btn btn-ghost btn-sm" + onclick={onClose} + aria-label="Close run chat" + > + ✕ + </button> + <span class="truncate font-mono text-xs opacity-70" title="Run id">{run.id}</span> + {#if live} + <span class="badge badge-sm badge-warning gap-1"> + <span class="loading loading-spinner loading-xs"></span> + Running + </span> + {:else} + <span class="badge badge-sm badge-ghost">{run.statusLabel}</span> + {/if} + </div> + <div class="flex items-center gap-2"> + {#if stopError} + <span class="text-xs text-error">{stopError}</span> + {/if} + {#if live} + <button + type="button" + class="btn btn-sm btn-error btn-outline" + disabled={stopping} + onclick={handleStop} + > + {#if stopping} + <span class="loading loading-spinner loading-xs"></span> + Stopping… + {:else} + Stop + {/if} + </button> + {/if} + </div> + </header> + + <!-- Transcript --> + <div class="relative min-h-0 flex-1"> + <div bind:this={scrollEl} class="h-full overflow-y-auto" onscroll={onScroll}> + <div bind:this={contentEl} class="p-4"> + {#if chat === null} + <div class="flex h-full items-center justify-center"> + <span class="loading loading-spinner loading-md"></span> + </div> + {:else if chat.chunks.length === 0 && chat.pendingSync} + <div class="flex h-full items-center justify-center"> + <span class="loading loading-spinner loading-md"></span> + </div> + {:else} + <ChatView + chunks={chat.chunks} + turnMetrics={chat.turnMetrics} + hasEarlier={chat.hasEarlier} + onShowEarlier={chat.showEarlier} + thinkingKeyBase={chat.thinkingKeyBase} + providerRetry={chat.providerRetry} + apiBaseUrl={apiBaseUrl} + /> + {/if} + </div> + </div> + {#if chat !== null && chat.chunks.length === 0 && !chat.pendingSync} + <div + class="pointer-events-none absolute inset-0 flex items-center justify-center" + aria-hidden="true" + > + <span class="select-none text-2xl font-bold opacity-10">No messages</span> + </div> + {/if} + </div> +</div> diff --git a/src/features/markdown/index.ts b/src/features/markdown/index.ts new file mode 100644 index 0000000..ff3aefa --- /dev/null +++ b/src/features/markdown/index.ts @@ -0,0 +1,8 @@ +export { renderMarkdown } from "./logic/markdown"; +export { default as Markdown } from "./ui/Markdown.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "markdown", + description: "Renders assistant messages as sanitized Markdown (GFM + syntax highlighting)", +} as const; diff --git a/src/features/markdown/logic/markdown.test.ts b/src/features/markdown/logic/markdown.test.ts new file mode 100644 index 0000000..54b0086 --- /dev/null +++ b/src/features/markdown/logic/markdown.test.ts @@ -0,0 +1,58 @@ +import { describe, expect, it } from "vitest"; +import { renderMarkdown } from "./markdown"; + +describe("renderMarkdown", () => { + it("renders GFM markdown (headings, emphasis)", () => { + const html = renderMarkdown("# Title\n\nSome **bold** text."); + expect(html).toContain("<h1"); + expect(html).toContain("Title"); + expect(html).toContain("<strong>bold</strong>"); + }); + + it("highlights fenced code for a known language", () => { + const html = renderMarkdown("```javascript\nconst x = 1;\n```"); + expect(html).toContain("language-javascript"); + expect(html).toContain("hljs-keyword"); // `const` got highlighted + }); + + it("resolves language aliases (js -> javascript)", () => { + const html = renderMarkdown("```js\nconst x = 1;\n```"); + expect(html).toContain("hljs-keyword"); + }); + + it("escapes code for an unknown language without throwing", () => { + const html = renderMarkdown("```nope\n<b>x</b>\n```"); + expect(html).toContain("<b>"); + }); + + it("sanitizes dangerous HTML", () => { + const html = renderMarkdown("Hi <script>alert(1)</script> there"); + expect(html).not.toContain("<script>"); + expect(html).toContain("Hi"); + }); + + it("balances dangling bold emphasis while streaming", () => { + expect(renderMarkdown("a **bold", { streaming: true })).toContain("<strong>bold</strong>"); + }); + + it("does not balance delimiters when not streaming", () => { + expect(renderMarkdown("a **bold")).not.toContain("<strong>"); + }); + + it("wraps fenced code blocks with a copy button", () => { + const html = renderMarkdown("```js\nconst x = 1;\n```"); + expect(html).toContain("code-block"); + expect(html).toContain("data-copy"); + expect(html).toContain("<pre>"); + }); + + it("does not add a copy button to inline code", () => { + const html = renderMarkdown("use `npm run dev` please"); + expect(html).not.toContain("data-copy"); + expect(html).toContain("<code>npm run dev</code>"); + }); + + it("returns an empty string for empty input", () => { + expect(renderMarkdown("")).toBe(""); + }); +}); diff --git a/src/features/markdown/logic/markdown.ts b/src/features/markdown/logic/markdown.ts new file mode 100644 index 0000000..ad8a8bd --- /dev/null +++ b/src/features/markdown/logic/markdown.ts @@ -0,0 +1,165 @@ +/** + * Pure Markdown → sanitized-HTML renderer for assistant messages. + * + * Mirrors old Dispatch's stack (marked + marked-highlight + highlight.js + + * DOMPurify; GFM + line breaks; streaming delimiter-closing), but kept fully + * SYNCHRONOUS and pure: `input → output`, no effects, no `$effect`. Languages + * are a fixed "hot set" registered at module load (no lazy dynamic import), so a + * single `renderMarkdown(text)` call is deterministic and unit-testable. + * + * The only ambient dependency is DOMPurify, which sanitizes against the DOM — + * present in the browser and in the jsdom test env. + */ + +import DOMPurify from "dompurify"; +import type { LanguageFn } from "highlight.js"; +import hljs from "highlight.js/lib/core"; +import bash from "highlight.js/lib/languages/bash"; +import c from "highlight.js/lib/languages/c"; +import cpp from "highlight.js/lib/languages/cpp"; +import csharp from "highlight.js/lib/languages/csharp"; +import css from "highlight.js/lib/languages/css"; +import go from "highlight.js/lib/languages/go"; +import java from "highlight.js/lib/languages/java"; +import javascript from "highlight.js/lib/languages/javascript"; +import json from "highlight.js/lib/languages/json"; +import markdownLang from "highlight.js/lib/languages/markdown"; +import php from "highlight.js/lib/languages/php"; +import plaintext from "highlight.js/lib/languages/plaintext"; +import python from "highlight.js/lib/languages/python"; +import ruby from "highlight.js/lib/languages/ruby"; +import rust from "highlight.js/lib/languages/rust"; +import shell from "highlight.js/lib/languages/shell"; +import sql from "highlight.js/lib/languages/sql"; +import typescript from "highlight.js/lib/languages/typescript"; +import xml from "highlight.js/lib/languages/xml"; +import yaml from "highlight.js/lib/languages/yaml"; +import { Marked } from "marked"; +import { markedHighlight } from "marked-highlight"; + +// Hot set: registered eagerly so common code blocks highlight on first paint. +const HOT_LANGUAGES: Record<string, LanguageFn> = { + bash, + c, + cpp, + csharp, + css, + go, + java, + javascript, + json, + markdown: markdownLang, + php, + plaintext, + python, + ruby, + rust, + shell, + sql, + typescript, + xml, + yaml, +}; +for (const [name, lang] of Object.entries(HOT_LANGUAGES)) { + hljs.registerLanguage(name, lang); +} + +// Normalize common fence aliases to canonical highlight.js names. +const ALIASES: Record<string, string> = { + js: "javascript", + jsx: "javascript", + mjs: "javascript", + cjs: "javascript", + ts: "typescript", + tsx: "typescript", + py: "python", + py3: "python", + rb: "ruby", + sh: "bash", + zsh: "bash", + yml: "yaml", + "c++": "cpp", + cxx: "cpp", + "c#": "csharp", + cs: "csharp", + htm: "xml", + html: "xml", + svg: "xml", + md: "markdown", + mdx: "markdown", + golang: "go", + rs: "rust", +}; + +function normalizeLang(lang: string): string { + const lower = lang.toLowerCase().trim(); + return ALIASES[lower] ?? lower; +} + +function escapeHtml(s: string): string { + return s + .replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); +} + +const md = new Marked( + markedHighlight({ + emptyLangClass: "hljs", + langPrefix: "hljs language-", + highlight(code: string, lang: string): string { + if (!lang) return escapeHtml(code); + const name = normalizeLang(lang); + if (!hljs.getLanguage(name)) return escapeHtml(code); + try { + return hljs.highlight(code, { language: name, ignoreIllegals: true }).value; + } catch { + return escapeHtml(code); + } + }, + }), + { gfm: true, breaks: true }, +); + +/** + * While a message is still streaming, balance dangling fences / emphasis so the + * partial text renders cleanly instead of flashing raw markers. + */ +function closeOpenDelimiters(src: string): string { + let out = src; + const fenceCount = (out.match(/^```/gm) ?? []).length; + if (fenceCount % 2 !== 0) out += "\n```"; + const boldCount = (out.match(/\*\*/g) ?? []).length; + if (boldCount % 2 !== 0) out += "**"; + const inlineCode = (out.match(/(?<!`)`(?!`)/g) ?? []).length; + if (inlineCode % 2 !== 0) out += "`"; + return out; +} + +// Wrap each fenced code block (`<pre>…</pre>`) in a positioned container with a +// copy button. marked emits exactly one `<pre>`/`</pre>` pair per block and +// escapes `<`/`>` inside code, so these literal tags only ever delimit blocks. +// `data-copy` is the delegation hook the component listens for; DOMPurify keeps +// `<button>` + `data-*` by default. Inline `<code>` has no `<pre>`, so it's untouched. +const COPY_BUTTON = + '<button type="button" data-copy aria-label="Copy code"' + + ' class="copy-btn btn btn-xs absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100">Copy</button>'; + +function addCopyButtons(html: string): string { + return html + .replace(/<pre>/g, `<div class="code-block group relative">${COPY_BUTTON}<pre>`) + .replace(/<\/pre>/g, "</pre></div>"); +} + +/** Render Markdown to sanitized HTML. Returns `""` if parsing ever throws. */ +export function renderMarkdown(text: string, opts?: { streaming?: boolean }): string { + const src = opts?.streaming === true ? closeOpenDelimiters(text) : text; + try { + const raw = md.parse(src) as string; + return DOMPurify.sanitize(addCopyButtons(raw)); + } catch { + return ""; + } +} diff --git a/src/features/markdown/ui/Markdown.svelte b/src/features/markdown/ui/Markdown.svelte new file mode 100644 index 0000000..72b892b --- /dev/null +++ b/src/features/markdown/ui/Markdown.svelte @@ -0,0 +1,58 @@ +<script lang="ts"> + import { renderMarkdown } from "../logic/markdown"; + + let { + text, + streaming = false, + }: { + text: string; + /** Balance dangling delimiters while the message is still generating. */ + streaming?: boolean; + } = $props(); + + // Pure transform; the HTML is already DOMPurify-sanitized in renderMarkdown. + const html = $derived(renderMarkdown(text, { streaming })); + + let container: HTMLElement; + + // One delegated listener on the stable container handles every code block's + // copy button — including blocks re-created when `html` changes (streaming), + // since the listener lives on the container, not the buttons. Clipboard is the + // edge effect; absent (insecure context) → no-op. + $effect(() => { + const el = container; + if (el === undefined) return; + + const onClick = (event: Event): void => { + const target = event.target; + if (!(target instanceof Element)) return; + const button = target.closest<HTMLButtonElement>("[data-copy]"); + if (button === null) return; + + const code = button.closest(".code-block")?.querySelector("code")?.textContent ?? ""; + const clipboard = navigator.clipboard; + if (clipboard === undefined) return; + + void clipboard + .writeText(code) + .then(() => { + const prev = button.textContent; + button.textContent = "Copied"; + setTimeout(() => { + button.textContent = prev; + }, 1200); + }) + .catch(() => { + // Clipboard denied — leave the button as-is. + }); + }; + + el.addEventListener("click", onClick); + return () => el.removeEventListener("click", onClick); + }); +</script> + +<div class="markdown-body" bind:this={container}> + <!-- {@html} is safe here: `html` is DOMPurify-sanitized inside renderMarkdown. --> + {@html html} +</div> diff --git a/src/features/markdown/ui/markdown.test.ts b/src/features/markdown/ui/markdown.test.ts new file mode 100644 index 0000000..d65b3d1 --- /dev/null +++ b/src/features/markdown/ui/markdown.test.ts @@ -0,0 +1,40 @@ +import { fireEvent, render, screen } from "@testing-library/svelte"; +import { describe, expect, it, vi } from "vitest"; +import Markdown from "./Markdown.svelte"; + +describe("Markdown", () => { + it("renders markdown into a .markdown-body container", () => { + const { container } = render(Markdown, { props: { text: "# Hello\n\n**hi**" } }); + + expect(container.querySelector(".markdown-body")).not.toBeNull(); + expect(screen.getByRole("heading", { level: 1, name: "Hello" })).toBeInTheDocument(); + expect(container.querySelector("strong")?.textContent).toBe("hi"); + }); + + it("strips dangerous markup", () => { + const { container } = render(Markdown, { + props: { text: "before <script>alert(1)</script> after" }, + }); + + expect(container.querySelector("script")).toBeNull(); + expect(container.textContent).toContain("before"); + }); + + it("renders a copy button on a code block that copies the code to the clipboard", async () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true }); + + const { container } = render(Markdown, { + props: { text: "```js\nconst x = 1;\n```" }, + }); + + const button = container.querySelector<HTMLElement>("[data-copy]"); + expect(button).not.toBeNull(); + if (button === null) throw new Error("expected a copy button"); + + await fireEvent.click(button); + + expect(writeText).toHaveBeenCalledTimes(1); + expect(writeText.mock.calls[0]?.[0]).toContain("const x = 1;"); + }); +}); diff --git a/src/features/mcp/index.ts b/src/features/mcp/index.ts new file mode 100644 index 0000000..9abc023 --- /dev/null +++ b/src/features/mcp/index.ts @@ -0,0 +1,8 @@ +export type { LoadMcpStatus, McpStatusResult } from "./logic/view-model"; +export { default as McpStatusView } from "./ui/McpStatusView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "mcp", + description: "Per-conversation MCP (Model Context Protocol) server status", +} as const; diff --git a/src/features/mcp/logic/view-model.test.ts b/src/features/mcp/logic/view-model.test.ts new file mode 100644 index 0000000..d1a77d1 --- /dev/null +++ b/src/features/mcp/logic/view-model.test.ts @@ -0,0 +1,88 @@ +import type { McpServerInfo } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import { summarizeMcpServers, viewMcpServer, viewMcpServers } from "./view-model"; + +const server = (over: Partial<McpServerInfo> = {}): McpServerInfo => ({ + id: "freecad", + state: "connected", + toolCount: 12, + ...over, +}); + +describe("viewMcpServer", () => { + it("connected → success badge, not busy, no error, passes toolCount", () => { + const v = viewMcpServer(server({ toolCount: 5 })); + expect(v.badge).toBe("success"); + expect(v.statusLabel).toBe("Connected"); + expect(v.busy).toBe(false); + expect(v.error).toBeNull(); + expect(v.toolCount).toBe(5); + expect(v.configSource).toBeNull(); + }); + + it("connecting → warning badge + busy (spinner)", () => { + const v = viewMcpServer(server({ state: "connecting" })); + expect(v.badge).toBe("warning"); + expect(v.statusLabel).toBe("Connecting…"); + expect(v.busy).toBe(true); + expect(v.error).toBeNull(); + }); + + it("disconnected → neutral badge, not busy", () => { + const v = viewMcpServer(server({ state: "disconnected" })); + expect(v.badge).toBe("neutral"); + expect(v.statusLabel).toBe("Disconnected"); + expect(v.busy).toBe(false); + expect(v.error).toBeNull(); + }); + + it("error → error badge + surfaces the reason (with a fallback)", () => { + const withReason = viewMcpServer(server({ state: "error", error: "ENOENT: npx" })); + expect(withReason.badge).toBe("error"); + expect(withReason.busy).toBe(false); + expect(withReason.error).toBe("ENOENT: npx"); + + const noReason = viewMcpServer(server({ state: "error" })); + expect(noReason.error).toBe("Failed to connect"); + }); + + it("passes through configSource when present", () => { + const v = viewMcpServer(server({ configSource: ".dispatch/mcp.json" })); + expect(v.configSource).toBe(".dispatch/mcp.json"); + }); + + it("viewMcpServers maps a list preserving order", () => { + const views = viewMcpServers([server({ id: "a" }), server({ id: "b" })]); + expect(views.map((v) => v.id)).toEqual(["a", "b"]); + }); +}); + +describe("summarizeMcpServers", () => { + it("empty list", () => { + expect(summarizeMcpServers([])).toBe("No MCP servers"); + }); + + it("counts connected / connecting / disconnected / errors", () => { + expect(summarizeMcpServers([server({ state: "connected" })])).toBe("1 connected"); + expect( + summarizeMcpServers([ + server({ id: "a", state: "connected" }), + server({ id: "b", state: "error" }), + ]), + ).toBe("1 connected, 1 error"); + expect( + summarizeMcpServers([ + server({ id: "a", state: "connected" }), + server({ id: "b", state: "connecting" }), + server({ id: "c", state: "disconnected" }), + server({ id: "d", state: "error" }), + server({ id: "e", state: "error" }), + ]), + ).toBe("1 connected, 1 connecting, 1 disconnected, 2 errors"); + }); + + it("lists only non-zero buckets", () => { + expect(summarizeMcpServers([server({ state: "disconnected" })])).toBe("1 disconnected"); + expect(summarizeMcpServers([server({ id: "a", state: "connecting" })])).toBe("1 connecting"); + }); +}); diff --git a/src/features/mcp/logic/view-model.ts b/src/features/mcp/logic/view-model.ts new file mode 100644 index 0000000..fdff78a --- /dev/null +++ b/src/features/mcp/logic/view-model.ts @@ -0,0 +1,110 @@ +import type { McpServerInfo, McpServerState } from "@dispatch/transport-contract"; + +/** + * Pure core for the mcp feature — zero DOM, zero effects, zero Svelte. + * + * The mcp feature exposes the live status of the MCP (Model Context Protocol) + * servers configured for a conversation's working directory, fetched from + * `GET /conversations/:id/mcp`. This module holds the pure logic: the mapping + * of a backend `McpServerState` to a display badge + label, and a one-line + * server summary. The effect (the HTTP get MCP status) is INJECTED via the + * `LoadMcpStatus` port below; the composition root implements it. + */ + +// ── Injected port (consumer-defines-port; the composition root adapts the +// store's HTTP call to this shape). ────────────────────────────────────────── + +/** Outcome of `GET /conversations/:id/mcp`; `null` when no real conversation is focused. */ +export type McpStatusResult = + | { readonly ok: true; readonly cwd: string | null; readonly servers: readonly McpServerInfo[] } + | { readonly ok: false; readonly error: string }; + +export type LoadMcpStatus = () => Promise<McpStatusResult | null>; + +// ── MCP server status → display view ─────────────────────────────────────────── + +export type Badge = "success" | "warning" | "error" | "neutral"; + +export interface McpServerView { + readonly id: string; + readonly state: McpServerState; + readonly statusLabel: string; + readonly badge: Badge; + /** True while the state is transient (show a spinner). */ + readonly busy: boolean; + /** The error reason when `state === "error"`, else null. */ + readonly error: string | null; + /** Number of tools discovered from this server. */ + readonly toolCount: number; + /** Which config source the server was resolved from, else null. */ + readonly configSource: string | null; +} + +/** + * Map a server's state to a display label + badge severity + busy flag. Mirrors + * the LSP status visual treatment: `connected` → success, `connecting` (the + * transient state, analogous to LSP's `starting`) → warning + spinner, `error` + * → error, and `disconnected` (a stable idle state) → neutral. + */ +export function viewMcpServer(server: McpServerInfo): McpServerView { + let statusLabel: string; + let badge: Badge; + let busy = false; + switch (server.state) { + case "connected": + statusLabel = "Connected"; + badge = "success"; + break; + case "connecting": + statusLabel = "Connecting…"; + badge = "warning"; + busy = true; + break; + case "disconnected": + statusLabel = "Disconnected"; + badge = "neutral"; + break; + case "error": + statusLabel = "Error"; + badge = "error"; + break; + } + return { + id: server.id, + state: server.state, + statusLabel, + badge, + busy, + error: server.state === "error" ? (server.error ?? "Failed to connect") : null, + toolCount: server.toolCount, + configSource: server.configSource ?? null, + }; +} + +export function viewMcpServers(servers: readonly McpServerInfo[]): readonly McpServerView[] { + return servers.map(viewMcpServer); +} + +/** + * A short one-line summary, e.g. "2 connected" / "1 connected, 1 connecting, + * 1 error". Only non-zero buckets are listed. + */ +export function summarizeMcpServers(servers: readonly McpServerInfo[]): string { + if (servers.length === 0) return "No MCP servers"; + let connected = 0; + let connecting = 0; + let disconnected = 0; + let errored = 0; + for (const s of servers) { + if (s.state === "connected") connected++; + else if (s.state === "error") errored++; + else if (s.state === "connecting") connecting++; + else disconnected++; + } + const parts: string[] = []; + if (connected > 0) parts.push(`${connected} connected`); + if (connecting > 0) parts.push(`${connecting} connecting`); + if (disconnected > 0) parts.push(`${disconnected} disconnected`); + if (errored > 0) parts.push(`${errored} error${errored === 1 ? "" : "s"}`); + return parts.join(", "); +} diff --git a/src/features/mcp/ui/McpStatusView.svelte b/src/features/mcp/ui/McpStatusView.svelte new file mode 100644 index 0000000..ad51496 --- /dev/null +++ b/src/features/mcp/ui/McpStatusView.svelte @@ -0,0 +1,133 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import { + type Badge, + type LoadMcpStatus, + type McpServerView, + summarizeMcpServers, + viewMcpServers, + } from "../logic/view-model"; + + let { + cwd, + canView, + load, + }: { + /** The active conversation's cwd — the trigger to (re)load when it changes. */ + cwd: string | null; + /** Whether a real conversation is focused. */ + canView: boolean; + load: LoadMcpStatus; + } = $props(); + + const badgeClass: Record<Badge, string> = { + success: "badge-success", + warning: "badge-warning", + error: "badge-error", + neutral: "badge-ghost", + }; + + let servers = $state<readonly McpServerView[]>([]); + let loading = $state(false); + let error = $state<string | null>(null); + let loadedCwd = $state<string | null>(null); + let hasLoaded = $state(false); + let summary = $state(""); + + async function refresh() { + if (!canView) return; + loading = true; + error = null; + const result = await load(); + loading = false; + if (result === null) return; + hasLoaded = true; + if (result.ok) { + servers = viewMcpServers(result.servers); + summary = summarizeMcpServers(result.servers); + loadedCwd = result.cwd; + } else { + error = result.error; + } + } + + // (Re)load on mount and whenever the conversation's cwd changes. The MCP GET + // lazily spawns/connects servers, so we avoid a redundant fetch when `cwd` + // resolves to the value we already loaded for. + $effect(() => { + const target = cwd; + const can = canView; + untrack(() => { + if (!can) return; + if (!hasLoaded || target !== loadedCwd) void refresh(); + }); + }); +</script> + +<div class="flex flex-col gap-2"> + <div class="flex items-center justify-between gap-2"> + <span class="text-xs opacity-70"> + {#if loading} + Resolving… + {:else if hasLoaded && loadedCwd !== null} + {summary} + {:else} + MCP servers + {/if} + </span> + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={!canView || loading} + onclick={() => refresh()} + aria-label="Refresh MCP server status" + > + {#if loading} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Refresh + {/if} + </button> + </div> + + {#if !canView} + <p class="text-xs opacity-60">Open or start a conversation to see its MCP servers.</p> + {:else if error} + <p class="text-xs text-error">{error}</p> + {:else if hasLoaded && loadedCwd === null} + <p class="text-xs opacity-60"> + Set a working directory in the Model panel to enable MCP servers. + </p> + {:else if hasLoaded && servers.length === 0 && !loading} + <p class="text-xs opacity-60">No MCP servers configured for this directory.</p> + {:else} + <ul class="flex flex-col gap-2"> + {#each servers as server (server.id)} + <li class="flex flex-col gap-1 rounded-box bg-base-200 p-2 text-sm"> + <div class="flex items-center justify-between gap-2"> + <span class="font-medium font-mono">{server.id}</span> + <span class="badge badge-sm {badgeClass[server.badge]} gap-1"> + {#if server.busy} + <span class="loading loading-spinner loading-xs"></span> + {/if} + {server.statusLabel} + </span> + </div> + <div class="flex items-center justify-between gap-2 text-xs opacity-60"> + {#if server.configSource} + <span class="font-mono" title="Config source">{server.configSource}</span> + {:else} + <span></span> + {/if} + <span title="Discovered tools" + >{server.toolCount} tool{server.toolCount === 1 ? "" : "s"}</span + > + </div> + {#if server.error} + <span class="font-mono text-xs text-error">{server.error}</span> + {/if} + </li> + {/each} + </ul> + {/if} +</div> diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts new file mode 100644 index 0000000..3942e97 --- /dev/null +++ b/src/features/settings/index.ts @@ -0,0 +1,9 @@ +export type { ChatLimitParse, ChatLimitSaveResult, SaveChatLimit } from "./logic/view-model"; +export { chatLimitChanged, parseChatLimit } from "./logic/view-model"; +export { default as ChatLimitField } from "./ui/ChatLimitField.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "settings", + description: "FE-local settings (chat limit)", +} as const; diff --git a/src/features/settings/logic/view-model.test.ts b/src/features/settings/logic/view-model.test.ts new file mode 100644 index 0000000..93c4786 --- /dev/null +++ b/src/features/settings/logic/view-model.test.ts @@ -0,0 +1,61 @@ +import { describe, expect, it } from "vitest"; +import { MAX_CHAT_LIMIT, MIN_CHAT_LIMIT } from "../../../core/chunks"; +import { chatLimitChanged, parseChatLimit } from "./view-model"; + +describe("parseChatLimit", () => { + it("parses a plain integer", () => { + expect(parseChatLimit("256")).toEqual({ ok: true, value: 256 }); + expect(parseChatLimit("100")).toEqual({ ok: true, value: 100 }); + }); + + it("trims surrounding whitespace", () => { + expect(parseChatLimit(" 50 ")).toEqual({ ok: true, value: 50 }); + }); + + it("floors a decimal", () => { + expect(parseChatLimit("100.9")).toEqual({ ok: true, value: 100 }); + }); + + it("clamps below the floor to MIN_CHAT_LIMIT", () => { + expect(parseChatLimit("0")).toEqual({ ok: true, value: MIN_CHAT_LIMIT }); + expect(parseChatLimit("-5")).toEqual({ ok: true, value: MIN_CHAT_LIMIT }); + expect(parseChatLimit("5")).toEqual({ ok: true, value: MIN_CHAT_LIMIT }); + }); + + it("clamps above the ceiling to MAX_CHAT_LIMIT", () => { + expect(parseChatLimit("99999999")).toEqual({ ok: true, value: MAX_CHAT_LIMIT }); + }); + + it("rejects an empty string", () => { + expect(parseChatLimit("")).toEqual({ ok: false, error: expect.any(String) }); + expect(parseChatLimit(" ")).toEqual({ ok: false, error: expect.any(String) }); + }); + + it("rejects non-numeric input", () => { + expect(parseChatLimit("abc")).toEqual({ ok: false, error: expect.any(String) }); + expect(parseChatLimit("twelve")).toEqual({ ok: false, error: expect.any(String) }); + }); +}); + +describe("chatLimitChanged", () => { + it("is false when the typed value normalizes to the current limit", () => { + expect(chatLimitChanged("256", 256)).toBe(false); + }); + + it("is true when the typed value differs", () => { + expect(chatLimitChanged("100", 256)).toBe(true); + expect(chatLimitChanged("256", 100)).toBe(true); + }); + + it("is false for empty / invalid input (nothing submittable)", () => { + expect(chatLimitChanged("", 256)).toBe(false); + expect(chatLimitChanged("abc", 256)).toBe(false); + }); + + it("is false when the typed value clamps to the current limit", () => { + // 5 clamps to MIN (10); current is already 10 → no change. + expect(chatLimitChanged("5", MIN_CHAT_LIMIT)).toBe(false); + // A huge value clamps to MAX; current is already MAX → no change. + expect(chatLimitChanged("99999999", MAX_CHAT_LIMIT)).toBe(false); + }); +}); diff --git a/src/features/settings/logic/view-model.ts b/src/features/settings/logic/view-model.ts new file mode 100644 index 0000000..73f6d17 --- /dev/null +++ b/src/features/settings/logic/view-model.ts @@ -0,0 +1,60 @@ +import { normalizeChatLimit } from "../../../core/chunks"; + +/** + * Pure core for the settings feature — zero DOM, zero effects, zero Svelte. + * + * The settings feature exposes FE-local, user-tunable settings. Currently the + * chat limit (max loaded chunks per conversation; the policy lives in + * `core/chunks/trim.ts`): this module is the view-model seam that parses + + * validates a typed value into a normalized limit, so the UI can disable submit + * and show an error on garbage input. The bound constants + normalization are + * OWNED by `core/chunks` (the single source of truth); this module never + * redefines them. + */ + +// ── Injected port (consumer-defines-port; the composition root adapts the +// store's localStorage persistence to this shape). ────────────────────────── + +/** Outcome of persisting a chat-limit setting. */ +export type ChatLimitSaveResult = + | { readonly ok: true; readonly chatLimit: number } + | { readonly ok: false; readonly error: string }; + +export type SaveChatLimit = (value: number) => Promise<ChatLimitSaveResult>; + +// ── chat-limit parse / validate ─────────────────────────────────────────────── + +/** Result of parsing a typed chat-limit string. */ +export type ChatLimitParse = + | { readonly ok: true; readonly value: number } + | { readonly ok: false; readonly error: string }; + +/** + * Parse a typed chat-limit string into a normalized limit (floored + clamped to + * [MIN_CHAT_LIMIT, MAX_CHAT_LIMIT] via `normalizeChatLimit`). Empty or + * non-numeric input is an ERROR (so the UI can disable submit + message), NOT a + * silent default — the default only applies at boot for an unset key, never + * from user typing. + */ +export function parseChatLimit(raw: string): ChatLimitParse { + const trimmed = raw.trim(); + if (trimmed.length === 0) { + return { ok: false, error: "Enter a number." }; + } + const n = Number(trimmed); + if (!Number.isFinite(n)) { + return { ok: false, error: "Must be a number." }; + } + return { ok: true, value: normalizeChatLimit(n) }; +} + +/** + * Whether saving `typed` would change the `current` chat limit. A no-op save + * (empty/invalid, or equal after normalization) should be disabled. This is the + * dirty-check for the input — it must NOT mutate or clamp, only compare. + */ +export function chatLimitChanged(typed: string, current: number): boolean { + const parsed = parseChatLimit(typed); + if (!parsed.ok) return false; + return parsed.value !== current; +} diff --git a/src/features/settings/ui/ChatLimitField.svelte b/src/features/settings/ui/ChatLimitField.svelte new file mode 100644 index 0000000..502212f --- /dev/null +++ b/src/features/settings/ui/ChatLimitField.svelte @@ -0,0 +1,104 @@ +<script lang="ts"> + import { untrack } from "svelte"; + import { MAX_CHAT_LIMIT, MIN_CHAT_LIMIT } from "../../../core/chunks"; + import { chatLimitChanged, parseChatLimit, type SaveChatLimit } from "../logic/view-model"; + + let { + chatLimit, + save, + }: { + /** The persisted chat limit (max loaded chunks per conversation). */ + chatLimit: number; + save: SaveChatLimit; + } = $props(); + + // Seed from the prop; the $effect below re-seeds on external changes (a live + // apply from elsewhere) but only while the field is untouched, so an in-flight + // change can't clobber what the user typed. + let value = $state(""); + let lastSeed = $state(""); + let saving = $state(false); + let error = $state<string | null>(null); + let justSaved = $state(false); + let savedValue = $state<number | null>(null); + + $effect(() => { + const incoming = String(chatLimit); + untrack(() => { + if (value === lastSeed) value = incoming; + lastSeed = incoming; + }); + }); + + const dirty = $derived(chatLimitChanged(value, chatLimit)); + + async function handleSave() { + if (saving || !dirty) return; + const parsed = parseChatLimit(value); + if (!parsed.ok) { + error = parsed.error; + return; + } + saving = true; + error = null; + justSaved = false; + const result = await save(parsed.value); + saving = false; + if (result.ok) { + justSaved = true; + savedValue = result.chatLimit; + // Reflect the clamped / persisted value back into the input immediately + // (the prop will also re-assert it via the effect above). + value = String(result.chatLimit); + lastSeed = value; + } else { + error = result.error; + } + } + + function onInput() { + justSaved = false; + error = null; + } +</script> + +<div class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Chat limit</span> + <div class="flex items-center gap-2"> + <input + type="text" + inputmode="numeric" + class="input input-bordered input-sm w-full font-mono text-xs" + placeholder={String(chatLimit)} + bind:value + disabled={saving} + oninput={onInput} + onkeydown={(e) => { + if (e.key === "Enter") handleSave(); + }} + aria-label="Chat limit" + /> + <button + type="button" + class="btn btn-primary btn-sm" + disabled={saving || !dirty} + onclick={handleSave} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Set + {/if} + </button> + </div> + {#if error} + <p class="text-xs text-error">{error}</p> + {:else if justSaved && !dirty} + <p class="text-xs text-success">Saved{savedValue !== null ? `: ${savedValue}.` : "."}</p> + {:else} + <p class="text-xs opacity-50"> + Max loaded chunks per conversation ({MIN_CHAT_LIMIT}–{MAX_CHAT_LIMIT}). Lowering it unloads + older history; raise it and use "Show earlier" to page back in. + </p> + {/if} +</div> diff --git a/src/features/settings/ui/ChatLimitField.test.ts b/src/features/settings/ui/ChatLimitField.test.ts new file mode 100644 index 0000000..8f8da25 --- /dev/null +++ b/src/features/settings/ui/ChatLimitField.test.ts @@ -0,0 +1,89 @@ +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it } from "vitest"; +import type { ChatLimitSaveResult } from "../logic/view-model"; +import ChatLimitField from "./ChatLimitField.svelte"; + +// A fake save that resolves ok with the value it was given. +function fakeSave(): { + saves: number[]; + last: number | null; + impl: (value: number) => Promise<ChatLimitSaveResult>; +} { + const saves: number[] = []; + return { + saves, + last: null, + impl: async (value: number) => { + saves.push(value); + return { ok: true, chatLimit: value }; + }, + }; +} + +describe("ChatLimitField", () => { + it("seeds the input from the persisted limit and disables Set while unchanged", () => { + render(ChatLimitField, { props: { chatLimit: 256, save: fakeSave().impl } }); + expect(screen.getByLabelText("Chat limit")).toHaveValue("256"); + expect(screen.getByRole("button", { name: "Set" })).toBeDisabled(); + }); + + it("enables Set when the typed value differs (regression: number-binding coercion)", async () => { + const user = userEvent.setup(); + const save = fakeSave(); + render(ChatLimitField, { props: { chatLimit: 256, save: save.impl } }); + + const input = screen.getByLabelText("Chat limit"); + await user.clear(input); + await user.type(input, "10"); + + expect(screen.getByRole("button", { name: "Set" })).toBeEnabled(); + }); + + it("keeps Set disabled for non-numeric input", async () => { + const user = userEvent.setup(); + const save = fakeSave(); + render(ChatLimitField, { props: { chatLimit: 256, save: save.impl } }); + + const input = screen.getByLabelText("Chat limit"); + await user.clear(input); + await user.type(input, "abc"); + + expect(screen.getByRole("button", { name: "Set" })).toBeDisabled(); + }); + + it("clicking Set calls save with the parsed value and shows the confirmation", async () => { + const user = userEvent.setup(); + const save = fakeSave(); + const { rerender } = render(ChatLimitField, { + props: { chatLimit: 256, save: save.impl }, + }); + + const input = screen.getByLabelText("Chat limit"); + await user.clear(input); + await user.type(input, "50"); + await user.click(screen.getByRole("button", { name: "Set" })); + + expect(save.saves).toEqual([50]); + // In the real app the reactive `chatLimit` prop updates to the saved value + // (the store sets it synchronously), which clears `dirty` and reveals the + // "Saved" badge. Rerender simulates that propagation. + rerender({ chatLimit: 50, save: save.impl }); + expect(screen.getByText(/Saved/i)).toBeInTheDocument(); + }); + + it("clamps a below-floor value when saving", async () => { + const user = userEvent.setup(); + const save = fakeSave(); + render(ChatLimitField, { props: { chatLimit: 256, save: save.impl } }); + + const input = screen.getByLabelText("Chat limit"); + await user.clear(input); + await user.type(input, "5"); // clamps to MIN (10) + await user.click(screen.getByRole("button", { name: "Set" })); + + // The save port receives the clamped value (the view-model clamps before save). + expect(save.saves).toEqual([10]); + expect(input).toHaveValue("10"); + }); +}); diff --git a/src/features/smart-scroll/index.ts b/src/features/smart-scroll/index.ts new file mode 100644 index 0000000..73b11d6 --- /dev/null +++ b/src/features/smart-scroll/index.ts @@ -0,0 +1,25 @@ +export type { + ScrollCommand, + ScrollGeometry, + SmartScrollResult, + SmartScrollState, +} from "./logic/smart-scroll"; +export { + createSmartScrollState, + isNearBottom, + NEAR_BOTTOM_THRESHOLD, + onContentChange, + onReset, + onResume, + onScroll, +} from "./logic/smart-scroll"; +export type { SmartScrollController } from "./ui/controller.svelte"; +export { createSmartScrollController } from "./ui/controller.svelte"; +export { default as ScrollToBottom } from "./ui/ScrollToBottom.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "smart-scroll", + description: + "Keeps the transcript pinned to the bottom while it streams, unless the reader scrolls up", +} as const; diff --git a/src/features/smart-scroll/logic/smart-scroll.test.ts b/src/features/smart-scroll/logic/smart-scroll.test.ts new file mode 100644 index 0000000..94ba1d7 --- /dev/null +++ b/src/features/smart-scroll/logic/smart-scroll.test.ts @@ -0,0 +1,103 @@ +import { describe, expect, it } from "vitest"; +import { + createSmartScrollState, + isNearBottom, + NEAR_BOTTOM_THRESHOLD, + onContentChange, + onReset, + onResume, + onScroll, + type ScrollGeometry, +} from "./smart-scroll"; + +// A viewport 100px tall over 1000px of content: scrollTop 900 == pinned to bottom. +const atBottom: ScrollGeometry = { scrollTop: 900, scrollHeight: 1000, clientHeight: 100 }; +const nearBottom: ScrollGeometry = { + scrollTop: 900 - NEAR_BOTTOM_THRESHOLD, + scrollHeight: 1000, + clientHeight: 100, +}; +const scrolledUp: ScrollGeometry = { scrollTop: 200, scrollHeight: 1000, clientHeight: 100 }; + +describe("isNearBottom", () => { + it("is true exactly at the bottom", () => { + expect(isNearBottom(atBottom)).toBe(true); + }); + + it("is true within the threshold of the bottom", () => { + expect(isNearBottom(nearBottom)).toBe(true); + }); + + it("is false just beyond the threshold", () => { + expect( + isNearBottom({ + scrollTop: 900 - NEAR_BOTTOM_THRESHOLD - 1, + scrollHeight: 1000, + clientHeight: 100, + }), + ).toBe(false); + }); + + it("is false when scrolled well up", () => { + expect(isNearBottom(scrolledUp)).toBe(false); + }); + + it("honours a custom threshold", () => { + const geom: ScrollGeometry = { scrollTop: 800, scrollHeight: 1000, clientHeight: 100 }; + expect(isNearBottom(geom, 50)).toBe(false); + expect(isNearBottom(geom, 150)).toBe(true); + }); +}); + +describe("smart-scroll reducer", () => { + it("starts stuck and hides the button", () => { + const s = createSmartScrollState(); + expect(s.stuck).toBe(true); + }); + + it("onScroll up unsticks and shows the button, with no command", () => { + const r = onScroll(createSmartScrollState(), scrolledUp); + expect(r.state.stuck).toBe(false); + expect(r.showButton).toBe(true); + expect(r.command).toBeNull(); + }); + + it("onScroll back to the bottom re-sticks and hides the button", () => { + const up = onScroll(createSmartScrollState(), scrolledUp).state; + const r = onScroll(up, atBottom); + expect(r.state.stuck).toBe(true); + expect(r.showButton).toBe(false); + expect(r.command).toBeNull(); + }); + + it("onContentChange while stuck emits a NON-animated scroll (keep up with the stream)", () => { + const r = onContentChange(createSmartScrollState(), atBottom); + expect(r.command).toEqual({ kind: "scroll-to-bottom", animate: false }); + expect(r.state.stuck).toBe(true); + }); + + it("onContentChange while unstuck emits NO command (leave the reader in place)", () => { + const up = onScroll(createSmartScrollState(), scrolledUp).state; + const r = onContentChange(up, scrolledUp); + expect(r.command).toBeNull(); + expect(r.state.stuck).toBe(false); + expect(r.showButton).toBe(true); + }); + + it("onResume re-sticks and emits an ANIMATED scroll", () => { + const up = onScroll(createSmartScrollState(), scrolledUp).state; + const r = onResume(up); + expect(r.state.stuck).toBe(true); + expect(r.showButton).toBe(false); + expect(r.command).toEqual({ kind: "scroll-to-bottom", animate: true }); + }); + + it("onReset returns to stuck and snaps (non-animated) to the bottom", () => { + const up = onScroll(createSmartScrollState(), scrolledUp).state; + const r = onReset(); + void up; + expect(r.state.stuck).toBe(true); + expect(r.command).toEqual({ kind: "scroll-to-bottom", animate: false }); + expect(r.showButton).toBe(false); + }); +}); diff --git a/src/features/smart-scroll/logic/smart-scroll.ts b/src/features/smart-scroll/logic/smart-scroll.ts new file mode 100644 index 0000000..4a04812 --- /dev/null +++ b/src/features/smart-scroll/logic/smart-scroll.ts @@ -0,0 +1,93 @@ +// Pure smart-scroll reducer — "stick the transcript to the bottom while it grows, +// unless the user has scrolled up". Zero DOM, zero Svelte: it takes scroll +// GEOMETRY snapshots in and returns the next state plus an optional scroll +// COMMAND for the shell to execute. The injected shell (the Svelte action) reads +// the geometry off a real element and runs the commands. + +/** A snapshot of a scroll container's vertical geometry (in CSS pixels). */ +export interface ScrollGeometry { + /** Current scroll offset from the top. */ + readonly scrollTop: number; + /** Total scrollable content height. */ + readonly scrollHeight: number; + /** Visible viewport height. */ + readonly clientHeight: number; +} + +/** Distance (px) from the bottom within which we still consider the view "at bottom". */ +export const NEAR_BOTTOM_THRESHOLD = 64; + +/** True when the viewport is within `threshold` px of the content's bottom edge. */ +export function isNearBottom( + geom: ScrollGeometry, + threshold: number = NEAR_BOTTOM_THRESHOLD, +): boolean { + return geom.scrollHeight - geom.scrollTop - geom.clientHeight <= threshold; +} + +/** A scroll the shell should perform on the real element. */ +export interface ScrollCommand { + readonly kind: "scroll-to-bottom"; + /** Smooth-scroll (a deliberate resume) vs. jump (keeping up with a stream). */ + readonly animate: boolean; +} + +export interface SmartScrollState { + /** + * Whether the view is currently following the bottom. While `stuck`, new + * content keeps the view pinned to the bottom; once the user scrolls up it + * goes false and stays false until they return to the bottom (or resume). + */ + readonly stuck: boolean; +} + +/** A reducer step's result: the next state, an optional command, and whether to show the button. */ +export interface SmartScrollResult { + readonly state: SmartScrollState; + readonly command: ScrollCommand | null; + /** Show the "scroll to bottom" affordance exactly when not stuck. */ + readonly showButton: boolean; +} + +/** Initial state — start stuck so the first content snaps to the bottom. */ +export function createSmartScrollState(): SmartScrollState { + return { stuck: true }; +} + +function result(state: SmartScrollState, command: ScrollCommand | null): SmartScrollResult { + return { state, command, showButton: !state.stuck }; +} + +/** + * The user scrolled (or the viewport resized). Re-derive `stuck` purely from + * geometry: near the bottom ⇒ stuck (follow), otherwise unstuck. Never emits a + * command — reacting to the user's own scroll with a scroll would fight them. + */ +export function onScroll(_state: SmartScrollState, geom: ScrollGeometry): SmartScrollResult { + return result({ stuck: isNearBottom(geom) }, null); +} + +/** + * Content changed (a streamed delta, a new message, history loaded). If we're + * stuck, emit a non-animated scroll to keep up; otherwise leave the user where + * they are. State is unchanged — content growth alone never flips `stuck`. + */ +export function onContentChange(state: SmartScrollState, _geom: ScrollGeometry): SmartScrollResult { + return result(state, state.stuck ? { kind: "scroll-to-bottom", animate: false } : null); +} + +/** + * The user asked to return to the bottom (clicked the button). Force-stick and + * emit an animated scroll. + */ +export function onResume(_state: SmartScrollState): SmartScrollResult { + return result({ stuck: true }, { kind: "scroll-to-bottom", animate: true }); +} + +/** + * The transcript context changed entirely (e.g. a conversation/tab switch). + * Reset to stuck and snap (non-animated) to the bottom of the new content. + */ +export function onReset(): SmartScrollResult { + return result(createSmartScrollState(), { kind: "scroll-to-bottom", animate: false }); +} diff --git a/src/features/smart-scroll/ui/ScrollToBottom.svelte b/src/features/smart-scroll/ui/ScrollToBottom.svelte new file mode 100644 index 0000000..38ec1f5 --- /dev/null +++ b/src/features/smart-scroll/ui/ScrollToBottom.svelte @@ -0,0 +1,36 @@ +<script lang="ts"> + // Thin affordance: a floating "scroll to bottom" button shown while the reader + // has scrolled up. Holds no logic — `show` and `onResume` come from the + // smart-scroll controller. + let { + show, + onResume, + }: { + show: boolean; + onResume: () => void; + } = $props(); +</script> + +<button + type="button" + class="btn btn-circle btn-sm absolute bottom-4 left-1/2 -translate-x-1/2 shadow-lg transition-opacity duration-200" + class:opacity-0={!show} + class:pointer-events-none={!show} + class:opacity-100={show} + onclick={onResume} + aria-label="Scroll to bottom" + aria-hidden={!show} + tabindex={show ? 0 : -1} +> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2.5" + class="size-4" + aria-hidden="true" + > + <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /> + </svg> +</button> diff --git a/src/features/smart-scroll/ui/controller.svelte.ts b/src/features/smart-scroll/ui/controller.svelte.ts new file mode 100644 index 0000000..fee6561 --- /dev/null +++ b/src/features/smart-scroll/ui/controller.svelte.ts @@ -0,0 +1,140 @@ +// Injected shell for smart-scroll: binds a real scrollable element to the pure +// reducer (logic/smart-scroll). It owns the reactive `showButton` flag (a thin +// rune wrapper over the reducer state), runs the scroll COMMANDS the reducer +// emits against the element, and listens at the outermost edges (the element's +// `scroll`/`scrollend` events + a ResizeObserver on the content). No ambient +// state: the consumer instantiates ONE controller per scroll region and disposes +// it on unmount. + +import { + createSmartScrollState, + onContentChange, + onReset, + onResume, + onScroll, + type ScrollCommand, + type ScrollGeometry, + type SmartScrollResult, + type SmartScrollState, +} from "../logic/smart-scroll"; + +export interface SmartScrollController { + /** Reactive: show the "scroll to bottom" affordance (the user has scrolled up). */ + readonly showButton: boolean; + /** + * Non-reactive point-in-time query: is the view stuck to the bottom right now? + * For imperative callers (e.g. the chat-limit unload gate) that poll at event + * time rather than subscribing — reads the reducer state, not a rune. + */ + isAtBottom(): boolean; + /** + * Attach to the scroll container; returns a teardown to call on unmount. + * Pass the inner CONTENT element to also follow height changes that aren't a + * transcript update (async markdown/highlight, image loads, a collapse toggling, + * viewport reflow) via a ResizeObserver. + */ + attach(el: HTMLElement, content?: HTMLElement): () => void; + /** + * Notify that the transcript content changed (a streamed delta / new message). + * While stuck, keeps the view pinned to the bottom. + */ + contentChanged(): void; + /** Reset for a new transcript context (e.g. conversation switch): snap to bottom. */ + reset(): void; + /** The user clicked the affordance: re-stick and smooth-scroll to the bottom. */ + resume(): void; +} + +function geometryOf(el: HTMLElement): ScrollGeometry { + return { + scrollTop: el.scrollTop, + scrollHeight: el.scrollHeight, + clientHeight: el.clientHeight, + }; +} + +export function createSmartScrollController(): SmartScrollController { + let state: SmartScrollState = createSmartScrollState(); + let showButton = $state(false); + let el: HTMLElement | null = null; + // True while WE drive a programmatic scroll, so the resulting `scroll` event + // doesn't get misread as the user scrolling up. Cleared on `scrollend`. + let selfScrolling = false; + + function run(command: ScrollCommand | null): void { + if (!command || !el) return; + selfScrolling = true; + el.scrollTo({ + top: el.scrollHeight, + behavior: command.animate ? "smooth" : "instant", + }); + } + + function apply(r: SmartScrollResult): void { + state = r.state; + showButton = r.showButton; + run(r.command); + } + + function handleScroll(): void { + if (!el || selfScrolling) return; + apply(onScroll(state, geometryOf(el))); + } + + function handleScrollEnd(): void { + selfScrolling = false; + } + + return { + get showButton(): boolean { + return showButton; + }, + + isAtBottom(): boolean { + return state.stuck; + }, + + attach(node: HTMLElement, content?: HTMLElement): () => void { + el = node; + node.addEventListener("scroll", handleScroll, { passive: true }); + node.addEventListener("scrollend", handleScrollEnd); + + // A ResizeObserver keeps the view pinned through height changes that are + // NOT a transcript update — async markdown/syntax-highlight, image loads, a + // collapse toggling, font swaps, viewport reflow — which a content-count + // signal can't see. Observe the CONTENT (it grows) and the container (it + // changes on viewport resize). Routed through `onContentChange`, so it only + // scrolls while stuck and never fights the reader. The `selfScrolling` guard + // (and the fact that scrolling doesn't resize content) prevents any loop. + let ro: ResizeObserver | null = null; + if (typeof ResizeObserver !== "undefined") { + ro = new ResizeObserver(() => { + if (!el || selfScrolling) return; + apply(onContentChange(state, geometryOf(el))); + }); + if (content) ro.observe(content); + ro.observe(node); + } + + return () => { + node.removeEventListener("scroll", handleScroll); + node.removeEventListener("scrollend", handleScrollEnd); + ro?.disconnect(); + if (el === node) el = null; + }; + }, + + contentChanged(): void { + if (!el) return; + apply(onContentChange(state, geometryOf(el))); + }, + + reset(): void { + apply(onReset()); + }, + + resume(): void { + apply(onResume(state)); + }, + }; +} diff --git a/src/features/smart-scroll/ui/controller.test.ts b/src/features/smart-scroll/ui/controller.test.ts new file mode 100644 index 0000000..906cc91 --- /dev/null +++ b/src/features/smart-scroll/ui/controller.test.ts @@ -0,0 +1,172 @@ +import { describe, expect, it, vi } from "vitest"; +import { createSmartScrollController } from "./controller.svelte"; + +// A minimal fake of the only DOM surface the controller touches: scroll +// geometry, scrollTo, and add/removeEventListener for "scroll"/"scrollend". +// Faking this outermost edge is the sanctioned mock (no internal modules mocked). +function createFakeScrollEl(opts?: { scrollHeight?: number; clientHeight?: number }) { + const listeners = new Map<string, Set<EventListener>>(); + const el = { + scrollTop: 0, + scrollHeight: opts?.scrollHeight ?? 1000, + clientHeight: opts?.clientHeight ?? 100, + scrollTo: vi.fn((arg: ScrollToOptions) => { + // Emulate the browser: jump scrollTop, then (for "instant") fire scrollend. + el.scrollTop = (arg.top ?? 0) - 0; + if (arg.behavior !== "smooth") { + fire("scroll"); + fire("scrollend"); + } + }), + addEventListener: (type: string, fn: EventListener) => { + if (!listeners.has(type)) listeners.set(type, new Set()); + listeners.get(type)?.add(fn); + }, + removeEventListener: (type: string, fn: EventListener) => { + listeners.get(type)?.delete(fn); + }, + }; + function fire(type: string): void { + for (const fn of listeners.get(type) ?? []) fn(new Event(type)); + } + // Simulate the USER scrolling to a given offset (fires scroll, not self-driven). + function userScrollTo(top: number): void { + el.scrollTop = top; + fire("scroll"); + } + return { + el: el as unknown as HTMLElement, + scrollTo: el.scrollTo, + fire, + userScrollTo, + listenerCount: () => listeners, + }; +} + +describe("smart-scroll controller", () => { + it("starts with the button hidden", () => { + const c = createSmartScrollController(); + expect(c.showButton).toBe(false); + }); + + it("contentChanged while stuck scrolls to the bottom instantly", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + c.attach(fake.el); + c.contentChanged(); + expect(fake.scrollTo).toHaveBeenCalledWith({ + top: 1000, + behavior: "instant", + }); + expect(c.showButton).toBe(false); + }); + + it("a user scroll up shows the button and stops auto-following", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + c.attach(fake.el); + fake.userScrollTo(200); // far from the bottom + expect(c.showButton).toBe(true); + + const scrollTo = fake.scrollTo; + scrollTo.mockClear(); + c.contentChanged(); // streaming more content... + expect(scrollTo).not.toHaveBeenCalled(); // ...must NOT yank the reader down + expect(c.showButton).toBe(true); + }); + + it("self-driven scrolls are not misread as the user scrolling up", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + c.attach(fake.el); + // contentChanged drives an instant scrollTo, whose synthetic scroll event + // must NOT flip us to unstuck (selfScrolling guard). + c.contentChanged(); + expect(c.showButton).toBe(false); + }); + + it("resume re-sticks and smooth-scrolls to the bottom", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + c.attach(fake.el); + fake.userScrollTo(200); + expect(c.showButton).toBe(true); + + c.resume(); + expect(fake.scrollTo).toHaveBeenCalledWith({ + top: 1000, + behavior: "smooth", + }); + expect(c.showButton).toBe(false); + }); + + it("reset snaps to the bottom and hides the button", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + c.attach(fake.el); + fake.userScrollTo(200); + expect(c.showButton).toBe(true); + c.reset(); + expect(fake.scrollTo).toHaveBeenCalledWith({ + top: 1000, + behavior: "instant", + }); + expect(c.showButton).toBe(false); + }); + + it("observes content via a ResizeObserver: follows growth while stuck, not while unstuck", () => { + const holder: { cb: ResizeObserverCallback | null } = { cb: null }; + const observed: unknown[] = []; + const disconnect = vi.fn(); + class FakeResizeObserver { + constructor(cb: ResizeObserverCallback) { + holder.cb = cb; + } + observe(target: Element): void { + observed.push(target); + } + unobserve(): void {} + disconnect = disconnect; + } + vi.stubGlobal("ResizeObserver", FakeResizeObserver); + try { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + const content = { id: "content" } as unknown as HTMLElement; + const teardown = c.attach(fake.el, content); + + // Observes both the content (it grows) and the scroll container (viewport resize). + expect(observed).toContain(content); + expect(observed).toContain(fake.el); + + // Stuck → a resize keeps us pinned to the bottom. + fake.scrollTo.mockClear(); + holder.cb?.([], {} as ResizeObserver); + expect(fake.scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: "instant" }); + + // Reader scrolls up → a later resize must NOT yank them down. + fake.userScrollTo(200); + fake.scrollTo.mockClear(); + holder.cb?.([], {} as ResizeObserver); + expect(fake.scrollTo).not.toHaveBeenCalled(); + + // Teardown disconnects the observer. + teardown(); + expect(disconnect).toHaveBeenCalled(); + } finally { + vi.unstubAllGlobals(); + } + }); + + it("attach returns a teardown that removes both listeners", () => { + const c = createSmartScrollController(); + const fake = createFakeScrollEl(); + const teardown = c.attach(fake.el); + const before = fake.listenerCount(); + expect(before.get("scroll")?.size).toBe(1); + expect(before.get("scrollend")?.size).toBe(1); + teardown(); + expect(before.get("scroll")?.size).toBe(0); + expect(before.get("scrollend")?.size).toBe(0); + }); +}); diff --git a/src/features/surface-host/index.ts b/src/features/surface-host/index.ts index afa3127..1e21e3d 100644 --- a/src/features/surface-host/index.ts +++ b/src/features/surface-host/index.ts @@ -1,3 +1,9 @@ export { buildInvoke, planSurface } from "./logic/plan"; export type { FieldView, SurfaceRenderPlan } from "./logic/types"; export { default as SurfaceView } from "./ui/SurfaceView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "surface-host", + description: "Generic renderer for backend-declared surfaces", +} as const; diff --git a/src/features/surface-host/logic/message-queue.test.ts b/src/features/surface-host/logic/message-queue.test.ts new file mode 100644 index 0000000..8d55eb7 --- /dev/null +++ b/src/features/surface-host/logic/message-queue.test.ts @@ -0,0 +1,48 @@ +import type { QueuedMessage } from "@dispatch/wire"; +import { describe, expect, it } from "vitest"; +import { parseMessageQueuePayload } from "./message-queue"; + +const msg = (id: string, text: string, queuedAt = 1_700_000_000_000): QueuedMessage => ({ + id, + text, + queuedAt, +}); + +describe("parseMessageQueuePayload", () => { + it("parses a well-formed payload with messages", () => { + const data = parseMessageQueuePayload({ + messages: [msg("m1", "steer left"), msg("m2", "actually, go right")], + }); + expect(data).toEqual({ + messages: [msg("m1", "steer left"), msg("m2", "actually, go right")], + }); + }); + + it("parses an empty-messages payload (queue is empty)", () => { + expect(parseMessageQueuePayload({ messages: [] })).toEqual({ messages: [] }); + }); + + it("preserves message order", () => { + const data = parseMessageQueuePayload({ + messages: [msg("a", "first"), msg("b", "second"), msg("c", "third")], + }); + expect(data?.messages.map((m) => m.id)).toEqual(["a", "b", "c"]); + }); + + it.each([ + ["null", null], + ["a number", 7], + ["a string", "nope"], + ["missing messages key", { foo: [] }], + ["messages not an array", { messages: "x" }], + ["entry not an object", { messages: ["x"] }], + ["entry missing id", { messages: [{ text: "x", queuedAt: 1 }] }], + ["entry with non-string id", { messages: [{ id: 1, text: "x", queuedAt: 1 }] }], + ["entry missing text", { messages: [{ id: "m1", queuedAt: 1 }] }], + ["entry with non-string text", { messages: [{ id: "m1", text: 1, queuedAt: 1 }] }], + ["entry missing queuedAt", { messages: [{ id: "m1", text: "x" }] }], + ["entry with non-finite queuedAt", { messages: [msg("m1", "x", Number.NaN)] }], + ])("returns null for invalid payload: %s", (_label, payload) => { + expect(parseMessageQueuePayload(payload)).toBeNull(); + }); +}); diff --git a/src/features/surface-host/logic/message-queue.ts b/src/features/surface-host/logic/message-queue.ts new file mode 100644 index 0000000..79707a5 --- /dev/null +++ b/src/features/surface-host/logic/message-queue.ts @@ -0,0 +1,45 @@ +import type { QueuedMessage } from "@dispatch/wire"; + +/** + * Pure parser for the `rendererId: "message-queue"` custom-field payload. + * + * The message-queue extension's per-conversation surface emits ONE `custom` + * field with `rendererId: "message-queue"` and `payload: QueuePayload` + * (`{ messages: QueuedMessage[] }` — the current queue snapshot). This parser + * validates the untyped `payload: unknown` at the network seam so a + * hostile/partial payload can never crash the renderer (graceful skip → null). + * + * Empty `messages` is a valid, parseable state (the queue is empty — nothing to + * render); the caller hides the panel. Null is returned only for a malformed + * payload shape. + */ +export interface MessageQueueData { + readonly messages: readonly QueuedMessage[]; +} + +function isQueuedMessage(v: unknown): v is QueuedMessage { + if (typeof v !== "object" || v === null) return false; + const o = v as Record<string, unknown>; + return ( + typeof o.id === "string" && + typeof o.text === "string" && + typeof o.queuedAt === "number" && + Number.isFinite(o.queuedAt) + ); +} + +export function parseMessageQueuePayload(payload: unknown): MessageQueueData | null { + if (typeof payload !== "object" || payload === null) return null; + const obj = payload as Record<string, unknown>; + const raw = obj.messages; + if (!Array.isArray(raw)) return null; + const messages: QueuedMessage[] = []; + for (const entry of raw) { + if (!isQueuedMessage(entry)) return null; + messages.push(entry); + } + return { messages }; +} + +/** The `rendererId` the message-queue extension's `custom` surface field uses. */ +export const MESSAGE_QUEUE_RENDERER_ID = "message-queue"; diff --git a/src/features/surface-host/logic/plan.test.ts b/src/features/surface-host/logic/plan.test.ts index 50d6f11..9c8a34d 100644 --- a/src/features/surface-host/logic/plan.test.ts +++ b/src/features/surface-host/logic/plan.test.ts @@ -1,161 +1,250 @@ import type { SurfaceField, SurfaceSpec } from "@dispatch/ui-contract"; import { describe, expect, it } from "vitest"; -import { buildInvoke, planSurface } from "./plan"; +import { buildInvoke, groupRenderFields, planSurface } from "./plan"; +import type { FieldView } from "./types"; const makeSpec = (...fields: SurfaceField[]): SurfaceSpec => ({ - id: "test-surface", - region: "test", - title: "Test Surface", - fields, + id: "test-surface", + region: "test", + title: "Test Surface", + fields, }); describe("planSurface", () => { - it("maps a toggle field to a ToggleFieldView", () => { - const plan = planSurface( - makeSpec({ kind: "toggle", label: "Dark mode", value: true, action: { actionId: "dm" } }), - ); - expect(plan.fields).toEqual([ - { kind: "toggle", label: "Dark mode", value: true, action: { actionId: "dm" } }, - ]); - }); - - it("maps a progress field to a ProgressFieldView", () => { - const plan = planSurface(makeSpec({ kind: "progress", label: "Loading", value: 0.42 })); - expect(plan.fields).toEqual([{ kind: "progress", label: "Loading", value: 0.42 }]); - }); - - it("maps a selector field to a SelectorFieldView", () => { - const plan = planSurface( - makeSpec({ - kind: "selector", - label: "Model", - value: "gpt-4", - options: [ - { value: "gpt-4", label: "GPT-4" }, - { value: "gpt-3.5", label: "GPT-3.5" }, - ], - action: { actionId: "set-model" }, - }), - ); - expect(plan.fields).toEqual([ - { - kind: "selector", - label: "Model", - value: "gpt-4", - options: [ - { value: "gpt-4", label: "GPT-4" }, - { value: "gpt-3.5", label: "GPT-3.5" }, - ], - action: { actionId: "set-model" }, - }, - ]); - }); - - it("maps a stat field to a StatFieldView", () => { - const plan = planSurface(makeSpec({ kind: "stat", label: "Tokens", value: "1,234" })); - expect(plan.fields).toEqual([{ kind: "stat", label: "Tokens", value: "1,234" }]); - }); - - it("maps a button field to a ButtonFieldView", () => { - const plan = planSurface( - makeSpec({ kind: "button", label: "Retry", action: { actionId: "retry" } }), - ); - expect(plan.fields).toEqual([ - { kind: "button", label: "Retry", action: { actionId: "retry" } }, - ]); - }); - - it("preserves field order", () => { - const plan = planSurface( - makeSpec( - { kind: "stat", label: "A", value: "1" }, - { kind: "toggle", label: "B", value: false, action: { actionId: "b" } }, - { kind: "progress", label: "C", value: 0.5 }, - { kind: "button", label: "D", action: { actionId: "d" } }, - ), - ); - expect(plan.fields.map((f) => f.label)).toEqual(["A", "B", "C", "D"]); - }); - - it("drops unknown field kinds gracefully", () => { - const plan = planSurface( - makeSpec({ kind: "stat", label: "Known", value: "ok" }, { - kind: "future-kind" as "stat", - label: "Unknown", - value: "?", - } as SurfaceField), - ); - expect(plan.fields).toHaveLength(1); - expect(plan.fields[0]?.label).toBe("Known"); - }); - - it("drops custom fields (no renderer registered)", () => { - const plan = planSurface( - makeSpec( - { kind: "stat", label: "Before", value: "1" }, - { kind: "custom", rendererId: "chart", payload: { data: [1, 2, 3] } }, - { kind: "stat", label: "After", value: "2" }, - ), - ); - expect(plan.fields).toHaveLength(2); - expect(plan.fields.map((f) => f.label)).toEqual(["Before", "After"]); - }); - - it("returns empty fields for an empty spec", () => { - const plan = planSurface(makeSpec()); - expect(plan.fields).toEqual([]); - }); - - it("drops all fields when all are custom", () => { - const plan = planSurface( - makeSpec( - { kind: "custom", rendererId: "x", payload: null }, - { kind: "custom", rendererId: "y", payload: 42 }, - ), - ); - expect(plan.fields).toEqual([]); - }); + it("maps a toggle field to a ToggleFieldView", () => { + const plan = planSurface( + makeSpec({ kind: "toggle", label: "Dark mode", value: true, action: { actionId: "dm" } }), + ); + expect(plan.fields).toEqual([ + { kind: "toggle", label: "Dark mode", value: true, action: { actionId: "dm" } }, + ]); + }); + + it("maps a progress field to a ProgressFieldView", () => { + const plan = planSurface(makeSpec({ kind: "progress", label: "Loading", value: 0.42 })); + expect(plan.fields).toEqual([{ kind: "progress", label: "Loading", value: 0.42 }]); + }); + + it("maps a selector field to a SelectorFieldView", () => { + const plan = planSurface( + makeSpec({ + kind: "selector", + label: "Model", + value: "gpt-4", + options: [ + { value: "gpt-4", label: "GPT-4" }, + { value: "gpt-3.5", label: "GPT-3.5" }, + ], + action: { actionId: "set-model" }, + }), + ); + expect(plan.fields).toEqual([ + { + kind: "selector", + label: "Model", + value: "gpt-4", + options: [ + { value: "gpt-4", label: "GPT-4" }, + { value: "gpt-3.5", label: "GPT-3.5" }, + ], + action: { actionId: "set-model" }, + }, + ]); + }); + + it("maps a stat field to a StatFieldView", () => { + const plan = planSurface(makeSpec({ kind: "stat", label: "Tokens", value: "1,234" })); + expect(plan.fields).toEqual([{ kind: "stat", label: "Tokens", value: "1,234" }]); + }); + + it("maps a number field to a NumberFieldView, carrying optional hints", () => { + const plan = planSurface( + makeSpec({ + kind: "number", + label: "Interval", + value: 240, + min: 1, + step: 1, + unit: "s", + action: { actionId: "cache-warming/set-interval" }, + }), + ); + expect(plan.fields).toEqual([ + { + kind: "number", + label: "Interval", + value: 240, + min: 1, + step: 1, + unit: "s", + action: { actionId: "cache-warming/set-interval" }, + }, + ]); + }); + + it("omits absent number hints (no max key when undefined)", () => { + const plan = planSurface( + makeSpec({ + kind: "number", + label: "Interval", + value: 240, + min: 1, + action: { actionId: "set" }, + }), + ); + const field = plan.fields[0]; + expect(field).not.toHaveProperty("max"); + expect(field).not.toHaveProperty("step"); + expect(field).not.toHaveProperty("unit"); + }); + + it("maps a button field to a ButtonFieldView", () => { + const plan = planSurface( + makeSpec({ kind: "button", label: "Retry", action: { actionId: "retry" } }), + ); + expect(plan.fields).toEqual([ + { kind: "button", label: "Retry", action: { actionId: "retry" } }, + ]); + }); + + it("preserves field order", () => { + const plan = planSurface( + makeSpec( + { kind: "stat", label: "A", value: "1" }, + { kind: "toggle", label: "B", value: false, action: { actionId: "b" } }, + { kind: "progress", label: "C", value: 0.5 }, + { kind: "button", label: "D", action: { actionId: "d" } }, + ), + ); + expect(plan.fields.map((f) => ("label" in f ? f.label : null))).toEqual(["A", "B", "C", "D"]); + }); + + it("drops unknown field kinds gracefully", () => { + const plan = planSurface( + makeSpec({ kind: "stat", label: "Known", value: "ok" }, { + kind: "future-kind" as "stat", + label: "Unknown", + value: "?", + } as SurfaceField), + ); + expect(plan.fields).toHaveLength(1); + const first = plan.fields[0]; + expect(first && "label" in first ? first.label : null).toBe("Known"); + }); + + it("carries custom fields through verbatim, preserving order", () => { + const plan = planSurface( + makeSpec( + { kind: "stat", label: "Before", value: "1" }, + { kind: "custom", rendererId: "chart", payload: { data: [1, 2, 3] } }, + { kind: "stat", label: "After", value: "2" }, + ), + ); + expect(plan.fields).toHaveLength(3); + expect(plan.fields[1]).toEqual({ + kind: "custom", + rendererId: "chart", + payload: { data: [1, 2, 3] }, + }); + }); + + it("returns empty fields for an empty spec", () => { + const plan = planSurface(makeSpec()); + expect(plan.fields).toEqual([]); + }); + + it("keeps every custom field (render-time decides whether to show each)", () => { + const plan = planSurface( + makeSpec( + { kind: "custom", rendererId: "x", payload: null }, + { kind: "custom", rendererId: "y", payload: 42 }, + ), + ); + expect(plan.fields.map((f) => f.kind)).toEqual(["custom", "custom"]); + }); +}); + +describe("groupRenderFields", () => { + const stat = (label: string, value: string): FieldView => ({ kind: "stat", label, value }); + const toggle = (label: string): FieldView => ({ + kind: "toggle", + label, + value: false, + action: { actionId: label }, + }); + + it("coalesces consecutive stats into a single stats group", () => { + const groups = groupRenderFields([stat("a", "1"), stat("b", "2"), stat("c", "3")]); + expect(groups).toHaveLength(1); + expect(groups[0]).toEqual({ + type: "stats", + stats: [ + { kind: "stat", label: "a", value: "1" }, + { kind: "stat", label: "b", value: "2" }, + { kind: "stat", label: "c", value: "3" }, + ], + }); + }); + + it("keeps non-stat fields as standalone groups and preserves order", () => { + const groups = groupRenderFields([stat("a", "1"), toggle("t"), stat("b", "2")]); + expect(groups.map((g) => g.type)).toEqual(["stats", "field", "stats"]); + const first = groups[0]; + const last = groups[2]; + if (first?.type !== "stats" || last?.type !== "stats") throw new Error("bad grouping"); + expect(first.stats.map((s) => s.label)).toEqual(["a"]); + expect(last.stats.map((s) => s.label)).toEqual(["b"]); + }); + + it("starts a new stats run after an interrupting field", () => { + const groups = groupRenderFields([stat("a", "1"), stat("b", "2"), toggle("t"), stat("c", "3")]); + expect(groups.map((g) => g.type)).toEqual(["stats", "field", "stats"]); + }); + + it("returns no groups for an empty field list", () => { + expect(groupRenderFields([])).toEqual([]); + }); }); describe("buildInvoke", () => { - it("builds an invoke message for a toggle field", () => { - const field = { kind: "toggle" as const, label: "T", value: false, action: { actionId: "t" } }; - const msg = buildInvoke("s1", field, true); - expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "t", payload: true }); - }); - - it("builds an invoke message for a selector field", () => { - const field = { - kind: "selector" as const, - label: "S", - value: "a", - options: [], - action: { actionId: "sel" }, - }; - const msg = buildInvoke("s1", field, "b"); - expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "sel", payload: "b" }); - }); - - it("builds an invoke message without payload for a button field", () => { - const field = { kind: "button" as const, label: "B", action: { actionId: "btn" } }; - const msg = buildInvoke("s1", field); - expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "btn" }); - }); - - it("omits payload key when value is undefined", () => { - const field = { kind: "button" as const, label: "B", action: { actionId: "btn" } }; - const msg = buildInvoke("s1", field, undefined); - expect(msg).not.toHaveProperty("payload"); - }); - - it("uses the field's actionId, not a surface-level id", () => { - const field = { - kind: "toggle" as const, - label: "X", - value: true, - action: { actionId: "custom-action-123" }, - }; - const msg = buildInvoke("surf", field, false); - expect(msg.actionId).toBe("custom-action-123"); - }); + it("builds an invoke message for a toggle field", () => { + const field = { kind: "toggle" as const, label: "T", value: false, action: { actionId: "t" } }; + const msg = buildInvoke("s1", field, true); + expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "t", payload: true }); + }); + + it("builds an invoke message for a selector field", () => { + const field = { + kind: "selector" as const, + label: "S", + value: "a", + options: [], + action: { actionId: "sel" }, + }; + const msg = buildInvoke("s1", field, "b"); + expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "sel", payload: "b" }); + }); + + it("builds an invoke message without payload for a button field", () => { + const field = { kind: "button" as const, label: "B", action: { actionId: "btn" } }; + const msg = buildInvoke("s1", field); + expect(msg).toEqual({ type: "invoke", surfaceId: "s1", actionId: "btn" }); + }); + + it("omits payload key when value is undefined", () => { + const field = { kind: "button" as const, label: "B", action: { actionId: "btn" } }; + const msg = buildInvoke("s1", field, undefined); + expect(msg).not.toHaveProperty("payload"); + }); + + it("uses the field's actionId, not a surface-level id", () => { + const field = { + kind: "toggle" as const, + label: "X", + value: true, + action: { actionId: "custom-action-123" }, + }; + const msg = buildInvoke("surf", field, false); + expect(msg.actionId).toBe("custom-action-123"); + }); }); diff --git a/src/features/surface-host/logic/plan.ts b/src/features/surface-host/logic/plan.ts index 5b4530b..c8f82b9 100644 --- a/src/features/surface-host/logic/plan.ts +++ b/src/features/surface-host/logic/plan.ts @@ -1,59 +1,123 @@ import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract"; -import type { FieldView, SurfaceRenderPlan } from "./types"; +import type { + FieldView, + NumberFieldView, + RenderGroup, + StatFieldView, + SurfaceRenderPlan, +} from "./types"; -const KNOWN_KINDS = new Set(["toggle", "progress", "selector", "stat", "button"]); +const KNOWN_KINDS = new Set([ + "toggle", + "progress", + "selector", + "stat", + "number", + "button", + "custom", +]); /** * Validate and normalise a SurfaceSpec into a renderable plan. - * Keeps known field kinds in order; drops unknown kinds and `custom` fields - * (no renderer registry yet — graceful skip, never throw). + * Keeps known field kinds in order (including `custom`, carried through verbatim + * for the renderer to dispatch on `rendererId`); drops unknown kinds — graceful + * skip, never throw. Whether a `custom` field actually renders is a RENDER-time + * decision (unknown `rendererId` → skipped there), not a planning one. */ export function planSurface(spec: SurfaceSpec): SurfaceRenderPlan { - const fields: FieldView[] = []; - for (const field of spec.fields) { - if (!KNOWN_KINDS.has(field.kind)) continue; - switch (field.kind) { - case "toggle": - fields.push({ - kind: "toggle", - label: field.label, - value: field.value, - action: field.action, - }); - break; - case "progress": - fields.push({ - kind: "progress", - label: field.label, - value: field.value, - }); - break; - case "selector": - fields.push({ - kind: "selector", - label: field.label, - value: field.value, - options: field.options, - action: field.action, - }); - break; - case "stat": - fields.push({ - kind: "stat", - label: field.label, - value: field.value, - }); - break; - case "button": - fields.push({ - kind: "button", - label: field.label, - action: field.action, - }); - break; - } - } - return { fields }; + const fields: FieldView[] = []; + for (const field of spec.fields) { + if (!KNOWN_KINDS.has(field.kind)) continue; + switch (field.kind) { + case "toggle": + fields.push({ + kind: "toggle", + label: field.label, + value: field.value, + action: field.action, + }); + break; + case "progress": + fields.push({ + kind: "progress", + label: field.label, + value: field.value, + }); + break; + case "selector": + fields.push({ + kind: "selector", + label: field.label, + value: field.value, + options: field.options, + action: field.action, + }); + break; + case "stat": + fields.push({ + kind: "stat", + label: field.label, + value: field.value, + }); + break; + case "number": { + // Carry optional hints only when present (exactOptionalPropertyTypes). + const view: NumberFieldView = { + kind: "number", + label: field.label, + value: field.value, + action: field.action, + ...(field.min !== undefined ? { min: field.min } : {}), + ...(field.max !== undefined ? { max: field.max } : {}), + ...(field.step !== undefined ? { step: field.step } : {}), + ...(field.unit !== undefined ? { unit: field.unit } : {}), + }; + fields.push(view); + break; + } + case "button": + fields.push({ + kind: "button", + label: field.label, + action: field.action, + }); + break; + case "custom": + fields.push({ + kind: "custom", + rendererId: field.rendererId, + payload: field.payload, + }); + break; + } + } + return { fields }; +} + +/** + * Coalesce a field list into render groups: maximal runs of consecutive `stat` + * fields become one `stats` group (rendered as a single aligned table), every + * other field stays a standalone `field` group. Order is preserved. Pure. + */ +export function groupRenderFields(fields: readonly FieldView[]): RenderGroup[] { + const groups: RenderGroup[] = []; + let run: StatFieldView[] = []; + const flush = (): void => { + if (run.length > 0) { + groups.push({ type: "stats", stats: run }); + run = []; + } + }; + for (const field of fields) { + if (field.kind === "stat") { + run.push(field); + } else { + flush(); + groups.push({ type: "field", field }); + } + } + flush(); + return groups; } /** @@ -62,13 +126,13 @@ export function planSurface(spec: SurfaceSpec): SurfaceRenderPlan { * for button the payload is omitted. */ export function buildInvoke( - surfaceId: string, - field: Extract<FieldView, { action: unknown }>, - value?: unknown, + surfaceId: string, + field: Extract<FieldView, { action: unknown }>, + value?: unknown, ): InvokeMessage { - const base = { type: "invoke" as const, surfaceId, actionId: field.action.actionId }; - if (value !== undefined) { - return { ...base, payload: value }; - } - return base; + const base = { type: "invoke" as const, surfaceId, actionId: field.action.actionId }; + if (value !== undefined) { + return { ...base, payload: value }; + } + return base; } diff --git a/src/features/surface-host/logic/table.test.ts b/src/features/surface-host/logic/table.test.ts new file mode 100644 index 0000000..6fb558a --- /dev/null +++ b/src/features/surface-host/logic/table.test.ts @@ -0,0 +1,47 @@ +import { describe, expect, it } from "vitest"; +import { parseTablePayload } from "./table"; + +describe("parseTablePayload", () => { + it("parses a well-formed table payload", () => { + const data = parseTablePayload({ + columns: ["Name", "Version"], + rows: [ + ["alpha", "1.0"], + ["beta", "2.3"], + ], + }); + expect(data).toEqual({ + columns: ["Name", "Version"], + rows: [ + ["alpha", "1.0"], + ["beta", "2.3"], + ], + }); + }); + + it("coerces numeric and boolean cells to strings", () => { + const data = parseTablePayload({ + columns: ["k", "n", "b"], + rows: [["x", 42, true]], + }); + expect(data?.rows[0]).toEqual(["x", "42", "true"]); + }); + + it("accepts an empty rows array", () => { + expect(parseTablePayload({ columns: ["A"], rows: [] })).toEqual({ columns: ["A"], rows: [] }); + }); + + it.each([ + ["null", null], + ["a number", 7], + ["a string", "nope"], + ["missing columns", { rows: [] }], + ["missing rows", { columns: ["A"] }], + ["non-string column", { columns: [1], rows: [] }], + ["row that is not an array", { columns: ["A"], rows: ["x"] }], + ["cell of unsupported type", { columns: ["A"], rows: [[{ nested: true }]] }], + ["non-finite numeric cell", { columns: ["A"], rows: [[Number.NaN]] }], + ])("returns null for invalid payload: %s", (_label, payload) => { + expect(parseTablePayload(payload)).toBeNull(); + }); +}); diff --git a/src/features/surface-host/logic/table.ts b/src/features/surface-host/logic/table.ts new file mode 100644 index 0000000..5d2b831 --- /dev/null +++ b/src/features/surface-host/logic/table.ts @@ -0,0 +1,54 @@ +/** + * Pure parser for the `rendererId: "table"` custom-field payload. + * + * This is the FRONTEND-side renderer contract for tabular custom fields: a + * backend that wants a table emits a `custom` field with `rendererId: "table"` + * and a payload of `{ columns: string[]; rows: (string|number)[][] }`. Cells are + * coerced to strings. Anything that does not match the shape returns `null`, so + * the renderer gracefully skips it (never throws on hostile/partial data). + */ + +export interface TableData { + readonly columns: readonly string[]; + readonly rows: readonly (readonly string[])[]; +} + +function isStringArray(v: unknown): v is unknown[] { + return Array.isArray(v); +} + +function coerceCell(v: unknown): string | null { + if (typeof v === "string") return v; + if (typeof v === "number" && Number.isFinite(v)) return String(v); + if (typeof v === "boolean") return String(v); + return null; +} + +export function parseTablePayload(payload: unknown): TableData | null { + if (typeof payload !== "object" || payload === null) return null; + const obj = payload as Record<string, unknown>; + + const rawColumns = obj.columns; + const rawRows = obj.rows; + if (!isStringArray(rawColumns) || !isStringArray(rawRows)) return null; + + const columns: string[] = []; + for (const col of rawColumns) { + if (typeof col !== "string") return null; + columns.push(col); + } + + const rows: string[][] = []; + for (const row of rawRows) { + if (!Array.isArray(row)) return null; + const cells: string[] = []; + for (const cell of row) { + const c = coerceCell(cell); + if (c === null) return null; + cells.push(c); + } + rows.push(cells); + } + + return { columns, rows }; +} diff --git a/src/features/surface-host/logic/todo.test.ts b/src/features/surface-host/logic/todo.test.ts new file mode 100644 index 0000000..66ff036 --- /dev/null +++ b/src/features/surface-host/logic/todo.test.ts @@ -0,0 +1,67 @@ +import { describe, expect, it } from "vitest"; +import { parseTodoPayload, type TodoItem } from "./todo"; + +const item = (content: string, status: TodoItem["status"] = "pending"): TodoItem => ({ + content, + status, +}); + +describe("parseTodoPayload", () => { + it("parses a well-formed payload with items", () => { + const data = parseTodoPayload({ + todos: [ + item("Write tests", "in_progress"), + item("Ship it", "pending"), + item("Read docs", "completed"), + ], + }); + expect(data).toEqual({ + todos: [ + item("Write tests", "in_progress"), + item("Ship it", "pending"), + item("Read docs", "completed"), + ], + }); + }); + + it("parses an empty-todos payload", () => { + expect(parseTodoPayload({ todos: [] })).toEqual({ todos: [] }); + }); + + it("preserves item order", () => { + const data = parseTodoPayload({ todos: [item("a"), item("b"), item("c")] }); + expect(data?.todos.map((t) => t.content)).toEqual(["a", "b", "c"]); + }); + + it("accepts all four status values", () => { + const data = parseTodoPayload({ + todos: [ + item("p", "pending"), + item("i", "in_progress"), + item("c", "completed"), + item("x", "cancelled"), + ], + }); + expect(data?.todos.map((t) => t.status)).toEqual([ + "pending", + "in_progress", + "completed", + "cancelled", + ]); + }); + + it.each([ + ["null", null], + ["a number", 7], + ["a string", "nope"], + ["missing todos key", { foo: [] }], + ["todos not an array", { todos: "x" }], + ["entry not an object", { todos: ["x"] }], + ["entry missing content", { todos: [{ status: "pending" }] }], + ["entry with non-string content", { todos: [{ content: 1, status: "pending" }] }], + ["entry missing status", { todos: [{ content: "x" }] }], + ["entry with invalid status", { todos: [item("x", "done" as never)] }], + ])("returns null for invalid payload: %s", (_label, payload) => { + expect(parseTodoPayload(payload)).toBeNull(); + }); +}); diff --git a/src/features/surface-host/logic/todo.ts b/src/features/surface-host/logic/todo.ts new file mode 100644 index 0000000..8b8a5ef --- /dev/null +++ b/src/features/surface-host/logic/todo.ts @@ -0,0 +1,49 @@ +/** + * Pure parser for the `rendererId: "todo"` custom-field payload. + * + * The `todo` backend extension maintains a per-conversation task list (written + * by the model via a `todo_write` tool) and exposes it as a read-only + * conversation-scoped surface with one `custom` field + * (`rendererId: "todo"`, `payload: TodoPayload`). This parser validates the + * untyped `payload: unknown` at the network seam so a hostile/partial payload + * can never crash the renderer (graceful skip → null). + * + * The `TodoItem` type is NOT in `@dispatch/wire` — it is defined by the `todo` + * extension and carried in the surface payload, so we define it here (the FE's + * rendering contract for the shape). Empty `todos` is a valid, parseable state + * (the model hasn't created a list / cleared it); the caller hides the panel. + */ +export type TodoStatus = "pending" | "in_progress" | "completed" | "cancelled"; + +export interface TodoItem { + readonly content: string; + readonly status: TodoStatus; +} + +export interface TodoData { + readonly todos: readonly TodoItem[]; +} + +const STATUSES = new Set<string>(["pending", "in_progress", "completed", "cancelled"]); + +function isTodoItem(v: unknown): v is TodoItem { + if (typeof v !== "object" || v === null) return false; + const o = v as Record<string, unknown>; + return typeof o.content === "string" && typeof o.status === "string" && STATUSES.has(o.status); +} + +export function parseTodoPayload(payload: unknown): TodoData | null { + if (typeof payload !== "object" || payload === null) return null; + const obj = payload as Record<string, unknown>; + const raw = obj.todos; + if (!Array.isArray(raw)) return null; + const todos: TodoItem[] = []; + for (const entry of raw) { + if (!isTodoItem(entry)) return null; + todos.push(entry); + } + return { todos }; +} + +/** The `rendererId` the `todo` extension's `custom` surface field uses. */ +export const TODO_RENDERER_ID = "todo"; diff --git a/src/features/surface-host/logic/types.ts b/src/features/surface-host/logic/types.ts index f24438a..11c222f 100644 --- a/src/features/surface-host/logic/types.ts +++ b/src/features/surface-host/logic/types.ts @@ -2,51 +2,89 @@ import type { ActionRef, SurfaceOption } from "@dispatch/ui-contract"; /** Normalised view-model for a toggle field. */ export interface ToggleFieldView { - readonly kind: "toggle"; - readonly label: string; - readonly value: boolean; - readonly action: ActionRef; + readonly kind: "toggle"; + readonly label: string; + readonly value: boolean; + readonly action: ActionRef; } /** Normalised view-model for a progress field. */ export interface ProgressFieldView { - readonly kind: "progress"; - readonly label: string; - readonly value: number; + readonly kind: "progress"; + readonly label: string; + readonly value: number; } /** Normalised view-model for a selector field. */ export interface SelectorFieldView { - readonly kind: "selector"; - readonly label: string; - readonly value: string; - readonly options: readonly SurfaceOption[]; - readonly action: ActionRef; + readonly kind: "selector"; + readonly label: string; + readonly value: string; + readonly options: readonly SurfaceOption[]; + readonly action: ActionRef; } /** Normalised view-model for a stat field. */ export interface StatFieldView { - readonly kind: "stat"; - readonly label: string; - readonly value: string; + readonly kind: "stat"; + readonly label: string; + readonly value: string; +} + +/** + * Normalised view-model for a number field — the free-value counterpart to + * selector. `min`/`max`/`step`/`unit` are optional semantic hints (absent when + * the spec omits them). The renderer posts the new number as the action payload. + */ +export interface NumberFieldView { + readonly kind: "number"; + readonly label: string; + readonly value: number; + readonly min?: number; + readonly max?: number; + readonly step?: number; + readonly unit?: string; + readonly action: ActionRef; } /** Normalised view-model for a button field. */ export interface ButtonFieldView { - readonly kind: "button"; - readonly label: string; - readonly action: ActionRef; + readonly kind: "button"; + readonly label: string; + readonly action: ActionRef; +} + +/** + * Normalised view-model for a custom (escape-hatch) field. The plan carries it + * through verbatim; the renderer dispatches on `rendererId` (a renderer KIND, + * never a surface id) and gracefully skips ids it has no renderer for. + */ +export interface CustomFieldView { + readonly kind: "custom"; + readonly rendererId: string; + readonly payload: unknown; } /** A normalised field view-model — one entry per renderable field kind. */ export type FieldView = - | ToggleFieldView - | ProgressFieldView - | SelectorFieldView - | StatFieldView - | ButtonFieldView; + | ToggleFieldView + | ProgressFieldView + | SelectorFieldView + | StatFieldView + | NumberFieldView + | ButtonFieldView + | CustomFieldView; /** The output of `planSurface`: the ordered list of renderable fields. */ export interface SurfaceRenderPlan { - readonly fields: readonly FieldView[]; + readonly fields: readonly FieldView[]; } + +/** + * A render group: a maximal run of consecutive `stat` fields (rendered together + * as one aligned label/value table), or a single non-stat field. Grouping is a + * GENERIC presentation rule keyed on field kind — it never inspects a surface id. + */ +export type RenderGroup = + | { readonly type: "stats"; readonly stats: readonly StatFieldView[] } + | { readonly type: "field"; readonly field: Exclude<FieldView, StatFieldView> }; diff --git a/src/features/surface-host/ui/Button.svelte b/src/features/surface-host/ui/Button.svelte index 62d7acf..ee9097c 100644 --- a/src/features/surface-host/ui/Button.svelte +++ b/src/features/surface-host/ui/Button.svelte @@ -1,21 +1,21 @@ <script lang="ts"> - import type { InvokeMessage } from "@dispatch/ui-contract"; - import type { ButtonFieldView } from "../logic/types"; + import type { InvokeMessage } from "@dispatch/ui-contract"; + import type { ButtonFieldView } from "../logic/types"; - let { - field, - surfaceId, - onInvoke, - }: { field: ButtonFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = - $props(); + let { + field, + surfaceId, + onInvoke, + }: { field: ButtonFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = + $props(); - function handleClick() { - onInvoke({ - type: "invoke", - surfaceId, - actionId: field.action.actionId, - }); - } + function handleClick() { + onInvoke({ + type: "invoke", + surfaceId, + actionId: field.action.actionId, + }); + } </script> <button onclick={handleClick}>{field.label}</button> diff --git a/src/features/surface-host/ui/MessageQueueList.svelte b/src/features/surface-host/ui/MessageQueueList.svelte new file mode 100644 index 0000000..554fa02 --- /dev/null +++ b/src/features/surface-host/ui/MessageQueueList.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import { parseMessageQueuePayload } from "../logic/message-queue"; + + let { payload }: { readonly payload: unknown } = $props(); + + // Parse defensively; an unparseable payload yields null → render nothing + // (graceful skip, per the custom-field contract). + const data = $derived(parseMessageQueuePayload(payload)); +</script> + +{#if data !== null && data.messages.length > 0} + <ul class="flex flex-col gap-1 text-sm"> + {#each data.messages as msg (msg.id)} + <li class="rounded-box bg-base-200 px-3 py-2"> + <p class="whitespace-pre-wrap">{msg.text}</p> + <time class="text-xs opacity-50" datetime={new Date(msg.queuedAt).toISOString()}> + {new Date(msg.queuedAt).toLocaleTimeString()} + </time> + </li> + {/each} + </ul> +{/if} diff --git a/src/features/surface-host/ui/Number.svelte b/src/features/surface-host/ui/Number.svelte new file mode 100644 index 0000000..5a67087 --- /dev/null +++ b/src/features/surface-host/ui/Number.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + import type { InvokeMessage } from "@dispatch/ui-contract"; + import type { NumberFieldView } from "../logic/types"; + + let { + field, + surfaceId, + onInvoke, + }: { field: NumberFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = + $props(); + + // Commit on change/Enter rather than every keystroke. Ignore empty/non-numeric + // input (the backend also floors/validates); send the new number as payload. + function commit(event: Event) { + const target = event.target as HTMLInputElement; + const next = target.valueAsNumber; + if (Number.isNaN(next)) return; + onInvoke({ + type: "invoke", + surfaceId, + actionId: field.action.actionId, + payload: next, + }); + } +</script> + +<label class="flex items-center justify-between gap-2 text-sm"> + <span>{field.label}</span> + <span class="flex items-center gap-1"> + <input + type="number" + class="input input-bordered input-sm w-24" + value={field.value} + min={field.min} + max={field.max} + step={field.step} + onchange={commit} + /> + {#if field.unit} + <span class="opacity-60">{field.unit}</span> + {/if} + </span> +</label> diff --git a/src/features/surface-host/ui/Progress.svelte b/src/features/surface-host/ui/Progress.svelte index cba9e0f..e291c79 100644 --- a/src/features/surface-host/ui/Progress.svelte +++ b/src/features/surface-host/ui/Progress.svelte @@ -1,13 +1,13 @@ <script lang="ts"> - import type { ProgressFieldView } from "../logic/types"; + import type { ProgressFieldView } from "../logic/types"; - let { field }: { field: ProgressFieldView } = $props(); + let { field }: { field: ProgressFieldView } = $props(); - const percent = $derived(Math.round(field.value * 100)); + const percent = $derived(Math.round(field.value * 100)); </script> <div> - <span>{field.label}</span> - <progress max="100" value={percent}>{percent}%</progress> - <span>{percent}%</span> + <span>{field.label}</span> + <progress max="100" value={percent}>{percent}%</progress> + <span>{percent}%</span> </div> diff --git a/src/features/surface-host/ui/Selector.svelte b/src/features/surface-host/ui/Selector.svelte index 2da104f..4cb3536 100644 --- a/src/features/surface-host/ui/Selector.svelte +++ b/src/features/surface-host/ui/Selector.svelte @@ -1,32 +1,32 @@ <script lang="ts"> - import type { InvokeMessage } from "@dispatch/ui-contract"; - import type { SelectorFieldView } from "../logic/types"; + import type { InvokeMessage } from "@dispatch/ui-contract"; + import type { SelectorFieldView } from "../logic/types"; - let { - field, - surfaceId, - onInvoke, - }: { field: SelectorFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = - $props(); + let { + field, + surfaceId, + onInvoke, + }: { field: SelectorFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = + $props(); - function handleChange(event: Event) { - const target = event.target as HTMLSelectElement; - onInvoke({ - type: "invoke", - surfaceId, - actionId: field.action.actionId, - payload: target.value, - }); - } + function handleChange(event: Event) { + const target = event.target as HTMLSelectElement; + onInvoke({ + type: "invoke", + surfaceId, + actionId: field.action.actionId, + payload: target.value, + }); + } </script> <label> - {field.label} - <select onchange={handleChange}> - {#each field.options as option (option.value)} - <option value={option.value} selected={option.value === field.value}> - {option.label} - </option> - {/each} - </select> + {field.label} + <select onchange={handleChange}> + {#each field.options as option (option.value)} + <option value={option.value} selected={option.value === field.value}> + {option.label} + </option> + {/each} + </select> </label> diff --git a/src/features/surface-host/ui/Stat.svelte b/src/features/surface-host/ui/Stat.svelte deleted file mode 100644 index e184dab..0000000 --- a/src/features/surface-host/ui/Stat.svelte +++ /dev/null @@ -1,10 +0,0 @@ -<script lang="ts"> - import type { StatFieldView } from "../logic/types"; - - let { field }: { field: StatFieldView } = $props(); -</script> - -<dl> - <dt>{field.label}</dt> - <dd>{field.value}</dd> -</dl> diff --git a/src/features/surface-host/ui/StatTable.svelte b/src/features/surface-host/ui/StatTable.svelte new file mode 100644 index 0000000..c559352 --- /dev/null +++ b/src/features/surface-host/ui/StatTable.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { StatFieldView } from "../logic/types"; + + // Renders a run of stat fields as one aligned label/value table. Headerless: + // the column semantics aren't known generically, but the two-column layout + // gives the tidy, aligned readout the stats deserve (e.g. extension → version). + let { stats }: { readonly stats: readonly StatFieldView[] } = $props(); +</script> + +<div class="overflow-x-auto"> + <table class="table table-sm"> + <tbody> + {#each stats as stat, i (i)} + <tr> + <th class="font-medium">{stat.label}</th> + <td class="text-right tabular-nums">{stat.value}</td> + </tr> + {/each} + </tbody> + </table> +</div> diff --git a/src/features/surface-host/ui/SurfaceTable.svelte b/src/features/surface-host/ui/SurfaceTable.svelte new file mode 100644 index 0000000..e47c122 --- /dev/null +++ b/src/features/surface-host/ui/SurfaceTable.svelte @@ -0,0 +1,14 @@ +<script lang="ts"> + import Table from "../../../components/Table.svelte"; + import { parseTablePayload } from "../logic/table"; + + let { payload }: { readonly payload: unknown } = $props(); + + // Parse defensively; an unparseable payload yields null → render nothing + // (graceful skip, per the custom-field contract). + const data = $derived(parseTablePayload(payload)); +</script> + +{#if data !== null} + <Table columns={data.columns} rows={data.rows} /> +{/if} diff --git a/src/features/surface-host/ui/SurfaceView.svelte b/src/features/surface-host/ui/SurfaceView.svelte index 4207913..aed8d03 100644 --- a/src/features/surface-host/ui/SurfaceView.svelte +++ b/src/features/surface-host/ui/SurfaceView.svelte @@ -1,33 +1,49 @@ <script lang="ts"> - import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract"; - import { planSurface } from "../logic/plan"; - import Button from "./Button.svelte"; - import Progress from "./Progress.svelte"; - import Selector from "./Selector.svelte"; - import Stat from "./Stat.svelte"; - import Toggle from "./Toggle.svelte"; + import type { InvokeMessage, SurfaceSpec } from "@dispatch/ui-contract"; + import { groupRenderFields, planSurface } from "../logic/plan"; + import Button from "./Button.svelte"; + import MessageQueueList from "./MessageQueueList.svelte"; + import Number from "./Number.svelte"; + import Progress from "./Progress.svelte"; + import Selector from "./Selector.svelte"; + import StatTable from "./StatTable.svelte"; + import SurfaceTable from "./SurfaceTable.svelte"; + import TodoList from "./TodoList.svelte"; + import Toggle from "./Toggle.svelte"; - let { - spec, - onInvoke, - }: { spec: SurfaceSpec; onInvoke: (msg: InvokeMessage) => void } = $props(); + let { spec, onInvoke }: { spec: SurfaceSpec; onInvoke: (msg: InvokeMessage) => void } = $props(); - const plan = $derived(planSurface(spec)); + const plan = $derived(planSurface(spec)); + // Consecutive stats render together as one aligned table; everything else is + // a standalone widget. Grouping keys on field KIND only — never the surface id. + const groups = $derived(groupRenderFields(plan.fields)); </script> <article> - <h2>{spec.title}</h2> - {#each plan.fields as field (field)} - {#if field.kind === "toggle"} - <Toggle {field} surfaceId={spec.id} {onInvoke} /> - {:else if field.kind === "progress"} - <Progress {field} /> - {:else if field.kind === "selector"} - <Selector {field} surfaceId={spec.id} {onInvoke} /> - {:else if field.kind === "stat"} - <Stat {field} /> - {:else if field.kind === "button"} - <Button {field} surfaceId={spec.id} {onInvoke} /> - {/if} - {/each} + <h2>{spec.title}</h2> + {#each groups as group, i (i)} + {#if group.type === "stats"} + <StatTable stats={group.stats} /> + {:else if group.field.kind === "toggle"} + <Toggle field={group.field} surfaceId={spec.id} {onInvoke} /> + {:else if group.field.kind === "progress"} + <Progress field={group.field} /> + {:else if group.field.kind === "selector"} + <Selector field={group.field} surfaceId={spec.id} {onInvoke} /> + {:else if group.field.kind === "number"} + <Number field={group.field} surfaceId={spec.id} {onInvoke} /> + {:else if group.field.kind === "button"} + <Button field={group.field} surfaceId={spec.id} {onInvoke} /> + {:else if group.field.kind === "custom"} + <!-- Dispatch on rendererId (a renderer KIND, never a surface id); + unknown ids gracefully render nothing. --> + {#if group.field.rendererId === "table"} + <SurfaceTable payload={group.field.payload} /> + {:else if group.field.rendererId === "message-queue"} + <MessageQueueList payload={group.field.payload} /> + {:else if group.field.rendererId === "todo"} + <TodoList payload={group.field.payload} /> + {/if} + {/if} + {/each} </article> diff --git a/src/features/surface-host/ui/TodoList.svelte b/src/features/surface-host/ui/TodoList.svelte new file mode 100644 index 0000000..cffefde --- /dev/null +++ b/src/features/surface-host/ui/TodoList.svelte @@ -0,0 +1,66 @@ +<script lang="ts"> + import { parseTodoPayload } from "../logic/todo"; + + let { payload }: { readonly payload: unknown } = $props(); + + const data = $derived(parseTodoPayload(payload)); +</script> + +<!-- Fixed at 30% of the viewport height so the region is consistent whether the + list is empty or overflowing — it always reserves the space and scrolls + internally (mirrors the tabs view). --> +<ul class="flex h-[30vh] flex-col gap-1 overflow-y-auto pr-1"> + {#if data !== null && data.todos.length > 0} + {#each data.todos as todo, i (i)} + <li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm"> + <!-- Status indicator --> + <span class="mt-0.5 shrink-0"> + {#if todo.status === "in_progress"} + <span class="block h-4 w-4 rounded-full bg-primary"></span> + {:else if todo.status === "completed"} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-success" + > + <polyline points="20 6 9 17 4 12"></polyline> + </svg> + {:else if todo.status === "cancelled"} + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="3" + stroke-linecap="round" + stroke-linejoin="round" + class="h-4 w-4 text-base-content/40" + > + <line x1="18" y1="6" x2="6" y2="18"></line> + <line x1="6" y1="6" x2="18" y2="18"></line> + </svg> + {:else} + <!-- pending: empty circle --> + <span class="block h-4 w-4 rounded-full border-2 border-base-content/30"></span> + {/if} + </span> + + <!-- Content --> + <span + class:flex-1={true} + class:line-through={todo.status === "completed" || todo.status === "cancelled"} + class:opacity-50={todo.status === "completed" || todo.status === "cancelled"} + > + {todo.content} + </span> + </li> + {/each} + {:else} + <li class="text-xs opacity-60">No tasks yet.</li> + {/if} +</ul> diff --git a/src/features/surface-host/ui/Toggle.svelte b/src/features/surface-host/ui/Toggle.svelte index aec8f4e..0326851 100644 --- a/src/features/surface-host/ui/Toggle.svelte +++ b/src/features/surface-host/ui/Toggle.svelte @@ -1,25 +1,25 @@ <script lang="ts"> - import type { InvokeMessage } from "@dispatch/ui-contract"; - import type { ToggleFieldView } from "../logic/types"; + import type { InvokeMessage } from "@dispatch/ui-contract"; + import type { ToggleFieldView } from "../logic/types"; - let { - field, - surfaceId, - onInvoke, - }: { field: ToggleFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = - $props(); + let { + field, + surfaceId, + onInvoke, + }: { field: ToggleFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } = + $props(); - function handleChange() { - onInvoke({ - type: "invoke", - surfaceId, - actionId: field.action.actionId, - payload: !field.value, - }); - } + function handleChange() { + onInvoke({ + type: "invoke", + surfaceId, + actionId: field.action.actionId, + payload: !field.value, + }); + } </script> <label> - <input type="checkbox" checked={field.value} onchange={handleChange} /> - {field.label} + <input type="checkbox" checked={field.value} onchange={handleChange} /> + {field.label} </label> diff --git a/src/features/system-prompt/index.ts b/src/features/system-prompt/index.ts new file mode 100644 index 0000000..50d9d21 --- /dev/null +++ b/src/features/system-prompt/index.ts @@ -0,0 +1,17 @@ +export type { + LoadSystemPrompt, + LoadSystemPromptVariables, + SaveSystemPrompt, + SystemPromptLoadResult, + SystemPromptSaveResult, + SystemPromptVariablesResult, + VariableGroup, +} from "./logic/view-model"; +export { buildTag, groupVariables, insertTag, isDynamicVariable } from "./logic/view-model"; +export { default as SystemPromptBuilder } from "./ui/SystemPromptBuilder.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "system-prompt", + description: "Global system prompt template builder with variable placeholders", +} as const; diff --git a/src/features/system-prompt/logic/view-model.test.ts b/src/features/system-prompt/logic/view-model.test.ts new file mode 100644 index 0000000..223327b --- /dev/null +++ b/src/features/system-prompt/logic/view-model.test.ts @@ -0,0 +1,90 @@ +import type { SystemPromptVariable } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import { + buildIfNotTag, + buildIfTag, + buildTag, + groupVariables, + insertTag, + isDynamicVariable, +} from "./view-model"; + +describe("system-prompt view-model", () => { + describe("buildTag", () => { + it("builds a variable placeholder", () => { + expect(buildTag("system", "time")).toBe("[system:time]"); + }); + }); + + describe("buildIfTag", () => { + it("builds an opening conditional tag", () => { + expect(buildIfTag("file", "AGENTS.md")).toBe("[if file:AGENTS.md]"); + }); + }); + + describe("buildIfNotTag", () => { + it("builds a negated opening conditional tag", () => { + expect(buildIfNotTag("prompt", "cwd")).toBe("[if !prompt:cwd]"); + }); + }); + + describe("insertTag", () => { + it("inserts a tag at the cursor position", () => { + expect(insertTag("Hello world", "[system:time]", 5, 5)).toEqual({ + template: "Hello[system:time] world", + cursor: 18, + }); + }); + + it("replaces the selected text", () => { + const tag = buildTag("file", "README.md"); + expect(insertTag("Hello world", tag, 6, 11)).toEqual({ + template: `Hello ${tag}`, + cursor: 6 + tag.length, + }); + }); + + it("inserts at the end", () => { + const tag = buildTag("git", "branch"); + expect(insertTag("", tag, 0, 0)).toEqual({ + template: tag, + cursor: tag.length, + }); + }); + }); + + describe("groupVariables", () => { + it("groups by type in first-appearing order", () => { + const variables: SystemPromptVariable[] = [ + { type: "system", name: "time", description: "" }, + { type: "prompt", name: "cwd", description: "" }, + { type: "system", name: "date", description: "" }, + { type: "git", name: "branch", description: "" }, + ]; + const groups = groupVariables(variables); + expect(groups.map((g) => g.type)).toEqual(["system", "prompt", "git"]); + expect(groups[0]?.variables.map((v) => v.name)).toEqual(["time", "date"]); + expect(groups[1]?.variables.map((v) => v.name)).toEqual(["cwd"]); + expect(groups[2]?.variables.map((v) => v.name)).toEqual(["branch"]); + }); + + it("returns an empty array when no variables", () => { + expect(groupVariables([])).toEqual([]); + }); + }); + + describe("isDynamicVariable", () => { + it("returns true when dynamic is true", () => { + expect( + isDynamicVariable({ type: "file", name: "path", description: "", dynamic: true }), + ).toBe(true); + }); + + it("returns false when dynamic is missing or false", () => { + expect(isDynamicVariable({ type: "system", name: "time", description: "" })).toBe(false); + expect( + isDynamicVariable({ type: "system", name: "time", description: "", dynamic: false }), + ).toBe(false); + }); + }); +}); diff --git a/src/features/system-prompt/logic/view-model.ts b/src/features/system-prompt/logic/view-model.ts new file mode 100644 index 0000000..e202ee3 --- /dev/null +++ b/src/features/system-prompt/logic/view-model.ts @@ -0,0 +1,106 @@ +import type { SystemPromptVariable } from "@dispatch/transport-contract"; + +/** + * Pure core for the system prompt builder — zero DOM, zero effects, zero Svelte. + * + * The system prompt is a global template, stored on the backend, resolved once + * per conversation at first turn (then persisted for prompt-cache safety). The + * frontend builder exposes the template text plus a palette of available + * variables; clicking a variable inserts `[type:name]` at the cursor. This module + * holds the pure logic: tag construction, insertion into a template, and + * grouping of variables. The HTTP edge is injected via the ports defined below. + */ + +// ── Injected ports (composition root adapts the store to these shapes) ───────── + +export type SystemPromptLoadResult = + | { readonly ok: true; readonly template: string } + | { readonly ok: false; readonly error: string }; + +export type LoadSystemPrompt = () => Promise<SystemPromptLoadResult>; + +export type SystemPromptSaveResult = + | { readonly ok: true; readonly template: string } + | { readonly ok: false; readonly error: string }; + +export type SaveSystemPrompt = (template: string) => Promise<SystemPromptSaveResult>; + +export type SystemPromptVariablesResult = + | { readonly ok: true; readonly variables: readonly SystemPromptVariable[] } + | { readonly ok: false; readonly error: string }; + +export type LoadSystemPromptVariables = () => Promise<SystemPromptVariablesResult>; + +// ── Template helpers ────────────────────────────────────────────────────────── + +/** Build the literal placeholder `[type:name]` for a variable. */ +export function buildTag(type: string, name: string): string { + return `[${type}:${name}]`; +} + +/** Build the literal placeholder `[if type:name]` for a conditional block. */ +export function buildIfTag(type: string, name: string): string { + return `[if ${type}:${name}]`; +} + +/** Build the literal placeholder `[if !type:name]` for a negated conditional block. */ +export function buildIfNotTag(type: string, name: string): string { + return `[if !${type}:${name}]`; +} + +export interface Insertion { + /** Template text after insertion. */ + template: string; + /** New cursor position (caret index) after insertion. */ + cursor: number; +} + +/** + * Insert `tag` into `template` at the current selection range. Replaces any + * selected text. Returns both the new template and the new cursor position so + * the caller can restore the caret after the inserted tag. + */ +export function insertTag( + template: string, + tag: string, + selectionStart: number, + selectionEnd: number, +): Insertion { + const before = template.slice(0, selectionStart); + const after = template.slice(selectionEnd); + const next = before + tag + after; + return { template: next, cursor: selectionStart + tag.length }; +} + +// ── Variable grouping ───────────────────────────────────────────────────────── + +export interface VariableGroup { + /** Variable type (e.g. `"system"`, `"file"`, `"prompt"`, `"git"`). */ + readonly type: string; + /** Variables of this type. */ + readonly variables: readonly SystemPromptVariable[]; +} + +/** + * Group variables by type, preserving the order of first appearance within each + * group and the order of first-appearing types. + */ +export function groupVariables( + variables: readonly SystemPromptVariable[], +): readonly VariableGroup[] { + const order: string[] = []; + const map = new Map<string, SystemPromptVariable[]>(); + for (const v of variables) { + if (!map.has(v.type)) { + map.set(v.type, []); + order.push(v.type); + } + map.get(v.type)?.push(v); + } + return order.map((type) => ({ type, variables: map.get(type) ?? [] })); +} + +/** Whether a variable is "dynamic" (any name is valid, e.g. `file:<path>`). */ +export function isDynamicVariable(variable: SystemPromptVariable): boolean { + return variable.dynamic === true; +} diff --git a/src/features/system-prompt/ui/SystemPromptBuilder.svelte b/src/features/system-prompt/ui/SystemPromptBuilder.svelte new file mode 100644 index 0000000..2e92e26 --- /dev/null +++ b/src/features/system-prompt/ui/SystemPromptBuilder.svelte @@ -0,0 +1,243 @@ +<script lang="ts"> + import type { SystemPromptVariable } from "@dispatch/transport-contract"; + import { tick, untrack } from "svelte"; + import { + buildTag, + groupVariables, + insertTag, + isDynamicVariable, + type LoadSystemPrompt, + type LoadSystemPromptVariables, + type SaveSystemPrompt, + } from "../logic/view-model"; + + let { + loadPrompt, + savePrompt, + loadVariables, + onClose, + }: { + loadPrompt: LoadSystemPrompt; + savePrompt: SaveSystemPrompt; + loadVariables: LoadSystemPromptVariables; + onClose: () => void; + } = $props(); + + let value = $state(""); + let loadedTemplate = $state(""); + let loading = $state(false); + let saving = $state(false); + let error = $state<string | null>(null); + let justSaved = $state(false); + let variables = $state<readonly SystemPromptVariable[]>([]); + let filePath = $state(""); + let textarea: HTMLTextAreaElement | null = null; + + const groups = $derived(groupVariables(variables)); + const hasChanges = $derived(value !== loadedTemplate); + + async function load() { + untrack(() => { + loading = true; + error = null; + }); + + const [templateResult, variablesResult] = await Promise.all([loadPrompt(), loadVariables()]); + + loading = false; + + if (!templateResult.ok || !variablesResult.ok) { + const parts: string[] = []; + if (!templateResult.ok) parts.push(templateResult.error); + if (!variablesResult.ok) parts.push(variablesResult.error); + error = parts.join("; "); + return; + } + + value = templateResult.template; + loadedTemplate = templateResult.template; + variables = variablesResult.variables; + } + + async function save() { + if (saving || loading) return; + saving = true; + error = null; + justSaved = false; + const result = await savePrompt(value); + saving = false; + if (!result.ok) { + error = result.error; + return; + } + loadedTemplate = result.template; + value = result.template; + justSaved = true; + } + + function reset() { + value = loadedTemplate; + error = null; + justSaved = false; + } + + async function insertTagAtCursor(tag: string) { + if (textarea === null) return; + const start = textarea.selectionStart; + const end = textarea.selectionEnd; + const insertion = insertTag(value, tag, start, end); + value = insertion.template; + await tick(); + textarea.focus(); + textarea.setSelectionRange(insertion.cursor, insertion.cursor); + } + + async function insertFileVariable(type: string) { + const path = filePath.trim(); + if (path.length === 0) return; + await insertTagAtCursor(buildTag(type, path)); + filePath = ""; + } + + function onKeydown(e: KeyboardEvent) { + if (e.key === "Escape") onClose(); + } + + // Load on mount once. + $effect(() => { + void load(); + }); +</script> + +<svelte:window onkeydown={onKeydown} /> + +<!-- svelte-ignore a11y_no_static_element_interactions --> +<div + class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" + role="dialog" + aria-modal="true" + aria-label="System prompt builder" + tabindex="-1" + onclick={onClose} + onkeydown={onKeydown} +> + <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions --> + <div + class="flex h-[85vh] w-full max-w-6xl flex-col overflow-hidden rounded-box bg-base-100 shadow-2xl" + onclick={(e) => e.stopPropagation()} + > + <!-- Header --> + <div class="flex shrink-0 items-center justify-between border-b border-base-300 px-4 py-3"> + <div class="flex items-center gap-2"> + <h2 class="text-sm font-semibold">System Prompt</h2> + {#if loading} + <span class="loading loading-spinner loading-xs"></span> + {/if} + </div> + <button + type="button" + class="btn btn-ghost btn-sm btn-square" + onclick={onClose} + aria-label="Close system prompt builder" + > + ✕ + </button> + </div> + + <!-- Body: half editor / half variables --> + <div class="flex min-h-0 flex-1"> + <!-- Left: template editor --> + <div class="flex w-1/2 min-w-0 flex-col gap-2 border-r border-base-300 p-4"> + <textarea + bind:this={textarea} + bind:value + class="textarea textarea-bordered min-h-0 w-full flex-1 resize-none font-mono text-xs" + placeholder={loading + ? "Loading template..." + : "Edit the global system prompt template..."} + disabled={loading} + aria-label="System prompt template"></textarea> + + <div class="flex shrink-0 items-center gap-2"> + <button + type="button" + class="btn btn-primary btn-sm" + disabled={loading || saving || !hasChanges} + onclick={save} + > + {#if saving} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Save + {/if} + </button> + <button + type="button" + class="btn btn-ghost btn-sm" + disabled={loading || !hasChanges} + onclick={reset} + > + Reset + </button> + {#if justSaved && !hasChanges} + <span class="text-xs text-success">Saved.</span> + {:else if hasChanges} + <span class="text-xs opacity-60">Unsaved changes</span> + {/if} + </div> + + {#if error} + <p class="shrink-0 text-xs text-error">{error}</p> + {/if} + </div> + + <!-- Right: variable palette --> + <div class="flex w-1/2 min-w-0 flex-col overflow-y-auto p-4"> + <h3 class="mb-2 shrink-0 text-xs font-semibold uppercase opacity-60">Variables</h3> + {#if groups.length === 0 && !loading} + <p class="text-xs opacity-60">No variables available.</p> + {/if} + <div class="flex flex-col gap-3"> + {#each groups as group (group.type)} + <div class="rounded-box bg-base-200 p-3"> + <span class="text-xs font-semibold uppercase opacity-70">{group.type}</span> + <div class="mt-2 flex flex-wrap gap-1"> + {#each group.variables as variable (variable.type + variable.name)} + {#if isDynamicVariable(variable)} + <div class="flex items-center gap-1"> + <input + type="text" + class="input input-bordered input-xs w-32 font-mono" + bind:value={filePath} + placeholder={variable.name} + onkeydown={(e) => { + if (e.key === "Enter") void insertFileVariable(variable.type); + }} + /> + <button + type="button" + class="btn btn-xs" + onclick={() => void insertFileVariable(variable.type)} + > + Insert + </button> + </div> + {:else} + <button + type="button" + class="btn btn-xs" + title={variable.description} + onclick={() => void insertTagAtCursor(buildTag(variable.type, variable.name))} + > + {variable.name} + </button> + {/if} + {/each} + </div> + </div> + {/each} + </div> + </div> + </div> + </div> +</div> diff --git a/src/features/tabs/index.ts b/src/features/tabs/index.ts index 835788a..7520215 100644 --- a/src/features/tabs/index.ts +++ b/src/features/tabs/index.ts @@ -1,15 +1,23 @@ export type { Tab, TabsState } from "./tabs"; export { - activeTab, - closeTab, - createTab, - deriveTitle, - initialState, - newDraft, - selectTab, - setModel, - setTitle, + activeTab, + closeTab, + createTab, + deriveTitle, + initialState, + MIN_HANDLE_LENGTH, + newDraft, + selectTab, + setModel, + setTitle, + shortHandle, } from "./tabs"; export type { TabsStorage, TabsStore } from "./tabs-store.svelte"; export { createTabsStore } from "./tabs-store.svelte"; -export { default as TabBar } from "./ui/TabBar.svelte"; +export { default as TabList } from "./ui/TabList.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "tabs", + description: "Conversation tabs with title derivation and persistence", +} as const; diff --git a/src/features/tabs/tabs-store.svelte.ts b/src/features/tabs/tabs-store.svelte.ts index cba527e..d044b1f 100644 --- a/src/features/tabs/tabs-store.svelte.ts +++ b/src/features/tabs/tabs-store.svelte.ts @@ -1,67 +1,73 @@ import type { Tab, TabsState } from "./tabs"; import { - initialState, - closeTab as reduceCloseTab, - createTab as reduceCreateTab, - newDraft as reduceNewDraft, - selectTab as reduceSelectTab, - setModel as reduceSetModel, - setTitle as reduceSetTitle, - activeTab as selectActiveTab, + initialState, + closeTab as reduceCloseTab, + createTab as reduceCreateTab, + newDraft as reduceNewDraft, + openTab as reduceOpenTab, + selectTab as reduceSelectTab, + setModel as reduceSetModel, + setTitle as reduceSetTitle, + activeTab as selectActiveTab, } from "./tabs"; export interface TabsStorage { - load(): TabsState | null; - save(state: TabsState): void; + load(): TabsState | null; + save(state: TabsState): void; } export interface TabsStore { - readonly tabs: readonly Tab[]; - readonly activeConversationId: string | null; - readonly activeTab: Tab | null; - newDraft(): void; - createTab(tab: Tab): void; - selectTab(conversationId: string): void; - closeTab(conversationId: string): void; - setModel(conversationId: string, model: string): void; - setTitle(conversationId: string, title: string): void; + readonly tabs: readonly Tab[]; + readonly activeConversationId: string | null; + readonly activeTab: Tab | null; + newDraft(): void; + createTab(tab: Tab): void; + /** Add a tab WITHOUT focusing it (for `conversation.open`). No-op if already open. */ + openTab(tab: Tab): void; + selectTab(conversationId: string): void; + closeTab(conversationId: string): void; + setModel(conversationId: string, model: string): void; + setTitle(conversationId: string, title: string): void; } export function createTabsStore(storage: TabsStorage): TabsStore { - let state = $state<TabsState>(storage.load() ?? initialState()); + let state = $state<TabsState>(storage.load() ?? initialState()); - function apply(next: TabsState): void { - state = next; - storage.save(next); - } + function apply(next: TabsState): void { + state = next; + storage.save(next); + } - return { - get tabs(): readonly Tab[] { - return state.tabs; - }, - get activeConversationId(): string | null { - return state.activeConversationId; - }, - get activeTab(): Tab | null { - return selectActiveTab(state); - }, - newDraft(): void { - apply(reduceNewDraft(state)); - }, - createTab(tab: Tab): void { - apply(reduceCreateTab(state, tab)); - }, - selectTab(conversationId: string): void { - apply(reduceSelectTab(state, conversationId)); - }, - closeTab(conversationId: string): void { - apply(reduceCloseTab(state, conversationId)); - }, - setModel(conversationId: string, model: string): void { - apply(reduceSetModel(state, conversationId, model)); - }, - setTitle(conversationId: string, title: string): void { - apply(reduceSetTitle(state, conversationId, title)); - }, - }; + return { + get tabs(): readonly Tab[] { + return state.tabs; + }, + get activeConversationId(): string | null { + return state.activeConversationId; + }, + get activeTab(): Tab | null { + return selectActiveTab(state); + }, + newDraft(): void { + apply(reduceNewDraft(state)); + }, + createTab(tab: Tab): void { + apply(reduceCreateTab(state, tab)); + }, + openTab(tab: Tab): void { + apply(reduceOpenTab(state, tab)); + }, + selectTab(conversationId: string): void { + apply(reduceSelectTab(state, conversationId)); + }, + closeTab(conversationId: string): void { + apply(reduceCloseTab(state, conversationId)); + }, + setModel(conversationId: string, model: string): void { + apply(reduceSetModel(state, conversationId, model)); + }, + setTitle(conversationId: string, title: string): void { + apply(reduceSetTitle(state, conversationId, title)); + }, + }; } diff --git a/src/features/tabs/tabs-store.test.ts b/src/features/tabs/tabs-store.test.ts index 81ec8ad..bb4df98 100644 --- a/src/features/tabs/tabs-store.test.ts +++ b/src/features/tabs/tabs-store.test.ts @@ -4,154 +4,154 @@ import type { TabsStorage } from "./tabs-store.svelte"; import { createTabsStore } from "./tabs-store.svelte"; function createMemoryStorage(initial?: TabsState): TabsStorage & { data: TabsState | null } { - let data: TabsState | null = initial ?? null; - return { - get data() { - return data; - }, - set data(v: TabsState | null) { - data = v; - }, - load() { - return data; - }, - save(state: TabsState) { - data = state; - }, - }; + let data: TabsState | null = initial ?? null; + return { + get data() { + return data; + }, + set data(v: TabsState | null) { + data = v; + }, + load() { + return data; + }, + save(state: TabsState) { + data = state; + }, + }; } describe("createTabsStore", () => { - it("loads persisted state on construct", () => { - const persisted: TabsState = { - tabs: [{ conversationId: "c1", model: "m1", title: "T1" }], - activeConversationId: "c1", - }; - const storage = createMemoryStorage(persisted); - const store = createTabsStore(storage); - - expect(store.tabs).toHaveLength(1); - expect(store.activeConversationId).toBe("c1"); - expect(store.activeTab?.conversationId).toBe("c1"); - }); - - it("starts with empty draft when no persisted state", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - expect(store.tabs).toHaveLength(0); - expect(store.activeConversationId).toBeNull(); - expect(store.activeTab).toBeNull(); - }); - - it("saves after every mutation", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - expect(storage.data?.tabs).toHaveLength(1); - expect(storage.data?.activeConversationId).toBe("c1"); - - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); - expect(storage.data?.tabs).toHaveLength(2); - - store.selectTab("c1"); - expect(storage.data?.activeConversationId).toBe("c1"); - - store.closeTab("c1"); - expect(storage.data?.tabs).toHaveLength(1); - expect(storage.data?.activeConversationId).toBe("c2"); - - store.setModel("c2", "new-model"); - expect(storage.data?.tabs[0]?.model).toBe("new-model"); - - store.setTitle("c2", "New Title"); - expect(storage.data?.tabs[0]?.title).toBe("New Title"); - - store.newDraft(); - expect(storage.data?.activeConversationId).toBeNull(); - }); - - it("createTab appends and activates", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - expect(store.tabs).toHaveLength(1); - expect(store.activeConversationId).toBe("c1"); - - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); - expect(store.tabs).toHaveLength(2); - expect(store.activeConversationId).toBe("c2"); - }); - - it("selectTab changes active", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); - - store.selectTab("c1"); - expect(store.activeConversationId).toBe("c1"); - }); - - it("closeTab removes and activates neighbour", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); - store.createTab({ conversationId: "c3", model: "m3", title: "T3" }); - - store.selectTab("c2"); - store.closeTab("c2"); - expect(store.tabs).toHaveLength(2); - expect(store.activeConversationId).toBe("c1"); - }); - - it("closing the last tab returns to draft", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - store.closeTab("c1"); - expect(store.tabs).toHaveLength(0); - expect(store.activeConversationId).toBeNull(); - }); - - it("setModel updates the right tab", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); - - store.createTab({ conversationId: "c1", model: "old", title: "T1" }); - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); - - store.setModel("c1", "new-model"); - expect(store.tabs[0]?.model).toBe("new-model"); - expect(store.tabs[1]?.model).toBe("m2"); - }); + it("loads persisted state on construct", () => { + const persisted: TabsState = { + tabs: [{ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }], + activeConversationId: "c1", + }; + const storage = createMemoryStorage(persisted); + const store = createTabsStore(storage); + + expect(store.tabs).toHaveLength(1); + expect(store.activeConversationId).toBe("c1"); + expect(store.activeTab?.conversationId).toBe("c1"); + }); + + it("starts with empty draft when no persisted state", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + expect(store.tabs).toHaveLength(0); + expect(store.activeConversationId).toBeNull(); + expect(store.activeTab).toBeNull(); + }); + + it("saves after every mutation", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + expect(storage.data?.tabs).toHaveLength(1); + expect(storage.data?.activeConversationId).toBe("c1"); + + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); + expect(storage.data?.tabs).toHaveLength(2); + + store.selectTab("c1"); + expect(storage.data?.activeConversationId).toBe("c1"); + + store.closeTab("c1"); + expect(storage.data?.tabs).toHaveLength(1); + expect(storage.data?.activeConversationId).toBe("c2"); + + store.setModel("c2", "new-model"); + expect(storage.data?.tabs[0]?.model).toBe("new-model"); + + store.setTitle("c2", "New Title"); + expect(storage.data?.tabs[0]?.title).toBe("New Title"); + + store.newDraft(); + expect(storage.data?.activeConversationId).toBeNull(); + }); + + it("createTab appends and activates", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + expect(store.tabs).toHaveLength(1); + expect(store.activeConversationId).toBe("c1"); + + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); + expect(store.tabs).toHaveLength(2); + expect(store.activeConversationId).toBe("c2"); + }); + + it("selectTab changes active", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); + + store.selectTab("c1"); + expect(store.activeConversationId).toBe("c1"); + }); + + it("closeTab removes and activates neighbour", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); + store.createTab({ conversationId: "c3", model: "m3", title: "T3", workspaceId: "default" }); + + store.selectTab("c2"); + store.closeTab("c2"); + expect(store.tabs).toHaveLength(2); + expect(store.activeConversationId).toBe("c1"); + }); + + it("closing the last tab returns to draft", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + store.closeTab("c1"); + expect(store.tabs).toHaveLength(0); + expect(store.activeConversationId).toBeNull(); + }); + + it("setModel updates the right tab", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); + + store.createTab({ conversationId: "c1", model: "old", title: "T1", workspaceId: "default" }); + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); + + store.setModel("c1", "new-model"); + expect(store.tabs[0]?.model).toBe("new-model"); + expect(store.tabs[1]?.model).toBe("m2"); + }); - it("setTitle updates the right tab", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); + it("setTitle updates the right tab", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); - store.createTab({ conversationId: "c1", model: "m1", title: "Old" }); + store.createTab({ conversationId: "c1", model: "m1", title: "Old", workspaceId: "default" }); - store.setTitle("c1", "New Title"); - expect(store.tabs[0]?.title).toBe("New Title"); - }); + store.setTitle("c1", "New Title"); + expect(store.tabs[0]?.title).toBe("New Title"); + }); - it("newDraft clears active but keeps tabs", () => { - const storage = createMemoryStorage(); - const store = createTabsStore(storage); + it("newDraft clears active but keeps tabs", () => { + const storage = createMemoryStorage(); + const store = createTabsStore(storage); - store.createTab({ conversationId: "c1", model: "m1", title: "T1" }); - store.createTab({ conversationId: "c2", model: "m2", title: "T2" }); + store.createTab({ conversationId: "c1", model: "m1", title: "T1", workspaceId: "default" }); + store.createTab({ conversationId: "c2", model: "m2", title: "T2", workspaceId: "default" }); - store.newDraft(); - expect(store.tabs).toHaveLength(2); - expect(store.activeConversationId).toBeNull(); - expect(store.activeTab).toBeNull(); - }); + store.newDraft(); + expect(store.tabs).toHaveLength(2); + expect(store.activeConversationId).toBeNull(); + expect(store.activeTab).toBeNull(); + }); }); diff --git a/src/features/tabs/tabs.test.ts b/src/features/tabs/tabs.test.ts index 3034e76..ec93076 100644 --- a/src/features/tabs/tabs.test.ts +++ b/src/features/tabs/tabs.test.ts @@ -1,191 +1,225 @@ import { describe, expect, it } from "vitest"; import type { Tab, TabsState } from "./tabs"; import { - activeTab, - closeTab, - createTab, - deriveTitle, - initialState, - newDraft, - selectTab, - setModel, - setTitle, + activeTab, + closeTab, + createTab, + deriveTitle, + initialState, + MIN_HANDLE_LENGTH, + newDraft, + selectTab, + setModel, + setTitle, + shortHandle, } from "./tabs"; const tab = (conversationId: string, model = "default", title = "Chat"): Tab => ({ - conversationId, - model, - title, + conversationId, + model, + title, + workspaceId: "default", }); describe("initialState", () => { - it("returns empty draft state when no persisted state", () => { - const state = initialState(); - expect(state.tabs).toEqual([]); - expect(state.activeConversationId).toBeNull(); - }); - - it("returns persisted state when provided", () => { - const persisted: TabsState = { - tabs: [tab("c1")], - activeConversationId: "c1", - }; - const state = initialState(persisted); - expect(state.tabs).toHaveLength(1); - expect(state.activeConversationId).toBe("c1"); - }); + it("returns empty draft state when no persisted state", () => { + const state = initialState(); + expect(state.tabs).toEqual([]); + expect(state.activeConversationId).toBeNull(); + }); + + it("returns persisted state when provided", () => { + const persisted: TabsState = { + tabs: [tab("c1")], + activeConversationId: "c1", + }; + const state = initialState(persisted); + expect(state.tabs).toHaveLength(1); + expect(state.activeConversationId).toBe("c1"); + }); }); describe("newDraft", () => { - it("sets activeConversationId to null", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; - const next = newDraft(state); - expect(next.activeConversationId).toBeNull(); - }); - - it("keeps existing tabs", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; - const next = newDraft(state); - expect(next.tabs).toHaveLength(2); - }); + it("sets activeConversationId to null", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; + const next = newDraft(state); + expect(next.activeConversationId).toBeNull(); + }); + + it("keeps existing tabs", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; + const next = newDraft(state); + expect(next.tabs).toHaveLength(2); + }); }); describe("createTab", () => { - it("appends and activates", () => { - const state = initialState(); - const next = createTab(state, tab("c1")); - expect(next.tabs).toHaveLength(1); - expect(next.tabs[0]?.conversationId).toBe("c1"); - expect(next.activeConversationId).toBe("c1"); - }); - - it("does not duplicate an existing conversationId", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; - const next = createTab(state, tab("c1")); - expect(next.tabs).toHaveLength(1); - }); - - it("activates an already-existing tab when createTab is called again", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c2" }; - const next = createTab(state, tab("c1")); - expect(next.activeConversationId).toBe("c1"); - }); + it("appends and activates", () => { + const state = initialState(); + const next = createTab(state, tab("c1")); + expect(next.tabs).toHaveLength(1); + expect(next.tabs[0]?.conversationId).toBe("c1"); + expect(next.activeConversationId).toBe("c1"); + }); + + it("does not duplicate an existing conversationId", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; + const next = createTab(state, tab("c1")); + expect(next.tabs).toHaveLength(1); + }); + + it("activates an already-existing tab when createTab is called again", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c2" }; + const next = createTab(state, tab("c1")); + expect(next.activeConversationId).toBe("c1"); + }); }); describe("selectTab", () => { - it("changes active", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; - const next = selectTab(state, "c2"); - expect(next.activeConversationId).toBe("c2"); - }); + it("changes active", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; + const next = selectTab(state, "c2"); + expect(next.activeConversationId).toBe("c2"); + }); }); describe("closeTab", () => { - it("removes the tab", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; - const next = closeTab(state, "c2"); - expect(next.tabs).toHaveLength(1); - expect(next.tabs[0]?.conversationId).toBe("c1"); - }); - - it("closing the active tab activates a neighbour (previous preferred)", () => { - const state: TabsState = { - tabs: [tab("c1"), tab("c2"), tab("c3")], - activeConversationId: "c2", - }; - const next = closeTab(state, "c2"); - expect(next.activeConversationId).toBe("c1"); - }); - - it("closing the first active tab activates the next", () => { - const state: TabsState = { - tabs: [tab("c1"), tab("c2"), tab("c3")], - activeConversationId: "c1", - }; - const next = closeTab(state, "c1"); - expect(next.activeConversationId).toBe("c2"); - }); - - it("closing the last tab returns to draft (null active)", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; - const next = closeTab(state, "c1"); - expect(next.tabs).toHaveLength(0); - expect(next.activeConversationId).toBeNull(); - }); - - it("closing a non-active tab does not change active", () => { - const state: TabsState = { - tabs: [tab("c1"), tab("c2"), tab("c3")], - activeConversationId: "c3", - }; - const next = closeTab(state, "c1"); - expect(next.activeConversationId).toBe("c3"); - }); - - it("closing a non-existent tab is a no-op", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; - const next = closeTab(state, "missing"); - expect(next).toEqual(state); - }); + it("removes the tab", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; + const next = closeTab(state, "c2"); + expect(next.tabs).toHaveLength(1); + expect(next.tabs[0]?.conversationId).toBe("c1"); + }); + + it("closing the active tab activates a neighbour (previous preferred)", () => { + const state: TabsState = { + tabs: [tab("c1"), tab("c2"), tab("c3")], + activeConversationId: "c2", + }; + const next = closeTab(state, "c2"); + expect(next.activeConversationId).toBe("c1"); + }); + + it("closing the first active tab activates the next", () => { + const state: TabsState = { + tabs: [tab("c1"), tab("c2"), tab("c3")], + activeConversationId: "c1", + }; + const next = closeTab(state, "c1"); + expect(next.activeConversationId).toBe("c2"); + }); + + it("closing the last tab returns to draft (null active)", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; + const next = closeTab(state, "c1"); + expect(next.tabs).toHaveLength(0); + expect(next.activeConversationId).toBeNull(); + }); + + it("closing a non-active tab does not change active", () => { + const state: TabsState = { + tabs: [tab("c1"), tab("c2"), tab("c3")], + activeConversationId: "c3", + }; + const next = closeTab(state, "c1"); + expect(next.activeConversationId).toBe("c3"); + }); + + it("closing a non-existent tab is a no-op", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: "c1" }; + const next = closeTab(state, "missing"); + expect(next).toEqual(state); + }); }); describe("setModel", () => { - it("updates the right tab", () => { - const state: TabsState = { tabs: [tab("c1", "old"), tab("c2")], activeConversationId: "c1" }; - const next = setModel(state, "c1", "new-model"); - expect(next.tabs[0]?.model).toBe("new-model"); - expect(next.tabs[1]?.model).toBe("default"); - }); + it("updates the right tab", () => { + const state: TabsState = { tabs: [tab("c1", "old"), tab("c2")], activeConversationId: "c1" }; + const next = setModel(state, "c1", "new-model"); + expect(next.tabs[0]?.model).toBe("new-model"); + expect(next.tabs[1]?.model).toBe("default"); + }); }); describe("setTitle", () => { - it("updates the right tab", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; - const next = setTitle(state, "c1", "Updated title"); - expect(next.tabs[0]?.title).toBe("Updated title"); - expect(next.tabs[1]?.title).toBe("Chat"); - }); + it("updates the right tab", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c1" }; + const next = setTitle(state, "c1", "Updated title"); + expect(next.tabs[0]?.title).toBe("Updated title"); + expect(next.tabs[1]?.title).toBe("Chat"); + }); }); describe("activeTab", () => { - it("returns the active tab", () => { - const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c2" }; - expect(activeTab(state)?.conversationId).toBe("c2"); - }); - - it("returns null when activeConversationId is null", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: null }; - expect(activeTab(state)).toBeNull(); - }); - - it("returns null when active tab is not found in tabs", () => { - const state: TabsState = { tabs: [tab("c1")], activeConversationId: "missing" }; - expect(activeTab(state)).toBeNull(); - }); + it("returns the active tab", () => { + const state: TabsState = { tabs: [tab("c1"), tab("c2")], activeConversationId: "c2" }; + expect(activeTab(state)?.conversationId).toBe("c2"); + }); + + it("returns null when activeConversationId is null", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: null }; + expect(activeTab(state)).toBeNull(); + }); + + it("returns null when active tab is not found in tabs", () => { + const state: TabsState = { tabs: [tab("c1")], activeConversationId: "missing" }; + expect(activeTab(state)).toBeNull(); + }); }); describe("deriveTitle", () => { - it("truncates long messages with ellipsis", () => { - const msg = "This is a very long message that should be truncated at some point"; - expect(deriveTitle(msg, 20)).toBe("This is a very long \u2026"); - }); - - it("returns full message when under max", () => { - expect(deriveTitle("Short", 40)).toBe("Short"); - }); - - it("collapses whitespace", () => { - expect(deriveTitle(" hello world ")).toBe("hello world"); - }); - - it("falls back to 'New chat' for empty input", () => { - expect(deriveTitle("")).toBe("New chat"); - expect(deriveTitle(" ")).toBe("New chat"); - }); - - it("uses default max of ~40 chars", () => { - const msg = "a".repeat(50); - const result = deriveTitle(msg); - expect(result).toBe(`${"a".repeat(40)}\u2026`); - }); + it("truncates long messages with ellipsis", () => { + const msg = "This is a very long message that should be truncated at some point"; + expect(deriveTitle(msg, 20)).toBe("This is a very long \u2026"); + }); + + it("returns full message when under max", () => { + expect(deriveTitle("Short", 40)).toBe("Short"); + }); + + it("collapses whitespace", () => { + expect(deriveTitle(" hello world ")).toBe("hello world"); + }); + + it("falls back to 'New chat' for empty input", () => { + expect(deriveTitle("")).toBe("New chat"); + expect(deriveTitle(" ")).toBe("New chat"); + }); + + it("uses default max of ~40 chars", () => { + const msg = "a".repeat(50); + const result = deriveTitle(msg); + expect(result).toBe(`${"a".repeat(40)}\u2026`); + }); +}); + +describe("shortHandle", () => { + it("uses the minimum length when the id is unique", () => { + const h = shortHandle("3f9a1b2c-aaaa", ["3f9a1b2c-aaaa", "7c2d-bbbb"]); + expect(h).toBe("3f9a"); + expect(h.length).toBe(MIN_HANDLE_LENGTH); + }); + + it("grows the prefix until unique among open tabs", () => { + // two ids share the first 5 chars → handle grows to 6 to disambiguate + expect(shortHandle("abcde1-xxxx", ["abcde1-xxxx", "abcde2-yyyy"])).toBe("abcde1"); + expect(shortHandle("abcde2-yyyy", ["abcde1-xxxx", "abcde2-yyyy"])).toBe("abcde2"); + }); + + it("shrinks back to the minimum when the colliding sibling is gone", () => { + expect(shortHandle("abcde1-xxxx", ["abcde1-xxxx"])).toBe("abcd"); + }); + + it("ignores the id itself when present in the list", () => { + expect(shortHandle("deadbeef", ["deadbeef"])).toBe("dead"); + }); + + it("returns the whole id when shorter than the minimum length", () => { + expect(shortHandle("ab", ["ab", "cd"])).toBe("ab"); + }); + + it("falls back to the full id when one id is a prefix of another", () => { + // "abcd" is a prefix of "abcd1234" → no unique shorter prefix exists for it + expect(shortHandle("abcd", ["abcd", "abcd1234"])).toBe("abcd"); + }); }); diff --git a/src/features/tabs/tabs.ts b/src/features/tabs/tabs.ts index 9af522f..63cda35 100644 --- a/src/features/tabs/tabs.ts +++ b/src/features/tabs/tabs.ts @@ -1,74 +1,114 @@ export interface Tab { - readonly conversationId: string; - readonly model: string; - readonly title: string; + readonly conversationId: string; + readonly model: string; + readonly title: string; + /** The workspace this tab belongs to (the workspace's URL slug). */ + readonly workspaceId: string; } export interface TabsState { - readonly tabs: readonly Tab[]; - readonly activeConversationId: string | null; + readonly tabs: readonly Tab[]; + readonly activeConversationId: string | null; } const DEFAULT_TITLE = "New chat"; const DEFAULT_MAX_TITLE_LENGTH = 40; export function initialState(persisted?: TabsState): TabsState { - if (persisted !== undefined) return persisted; - return { tabs: [], activeConversationId: null }; + if (persisted !== undefined) { + // Migrate tabs persisted before workspaces: assign them to the "default" + // workspace (the fallback for conversations with no workspace). + const tabs = persisted.tabs.map((t) => { + const wid = (t as { workspaceId?: string }).workspaceId; + return { ...t, workspaceId: wid ?? "default" }; + }); + return { tabs, activeConversationId: persisted.activeConversationId }; + } + return { tabs: [], activeConversationId: null }; } export function newDraft(state: TabsState): TabsState { - return { ...state, activeConversationId: null }; + return { ...state, activeConversationId: null }; } export function createTab(state: TabsState, tab: Tab): TabsState { - const exists = state.tabs.some((t) => t.conversationId === tab.conversationId); - const tabs = exists ? state.tabs : [...state.tabs, tab]; - return { tabs, activeConversationId: tab.conversationId }; + const exists = state.tabs.some((t) => t.conversationId === tab.conversationId); + const tabs = exists ? state.tabs : [...state.tabs, tab]; + return { tabs, activeConversationId: tab.conversationId }; +} + +/** + * Add a tab WITHOUT switching the active conversation — used by the + * `conversation.open` WS broadcast (CLI `--open`): the tab appears in the + * strip but the user stays on their current tab. No-op if already open. + */ +export function openTab(state: TabsState, tab: Tab): TabsState { + const exists = state.tabs.some((t) => t.conversationId === tab.conversationId); + if (exists) return state; + return { tabs: [...state.tabs, tab], activeConversationId: state.activeConversationId }; } export function selectTab(state: TabsState, conversationId: string): TabsState { - return { ...state, activeConversationId: conversationId }; + return { ...state, activeConversationId: conversationId }; } export function closeTab(state: TabsState, conversationId: string): TabsState { - const idx = state.tabs.findIndex((t) => t.conversationId === conversationId); - if (idx === -1) return state; + const idx = state.tabs.findIndex((t) => t.conversationId === conversationId); + if (idx === -1) return state; - const tabs = state.tabs.filter((t) => t.conversationId !== conversationId); + const tabs = state.tabs.filter((t) => t.conversationId !== conversationId); - if (state.activeConversationId !== conversationId) { - return { tabs, activeConversationId: state.activeConversationId }; - } + if (state.activeConversationId !== conversationId) { + return { tabs, activeConversationId: state.activeConversationId }; + } - if (tabs.length === 0) { - return { tabs, activeConversationId: null }; - } + if (tabs.length === 0) { + return { tabs, activeConversationId: null }; + } - // prefer previous tab, else next - const neighborIdx = idx > 0 ? idx - 1 : 0; - const neighbor = tabs[neighborIdx]; - return { tabs, activeConversationId: neighbor?.conversationId ?? null }; + // prefer previous tab, else next + const neighborIdx = idx > 0 ? idx - 1 : 0; + const neighbor = tabs[neighborIdx]; + return { tabs, activeConversationId: neighbor?.conversationId ?? null }; } export function setModel(state: TabsState, conversationId: string, model: string): TabsState { - const tabs = state.tabs.map((t) => (t.conversationId === conversationId ? { ...t, model } : t)); - return { tabs, activeConversationId: state.activeConversationId }; + const tabs = state.tabs.map((t) => (t.conversationId === conversationId ? { ...t, model } : t)); + return { tabs, activeConversationId: state.activeConversationId }; } export function setTitle(state: TabsState, conversationId: string, title: string): TabsState { - const tabs = state.tabs.map((t) => (t.conversationId === conversationId ? { ...t, title } : t)); - return { tabs, activeConversationId: state.activeConversationId }; + const tabs = state.tabs.map((t) => (t.conversationId === conversationId ? { ...t, title } : t)); + return { tabs, activeConversationId: state.activeConversationId }; } export function activeTab(state: TabsState): Tab | null { - if (state.activeConversationId === null) return null; - return state.tabs.find((t) => t.conversationId === state.activeConversationId) ?? null; + if (state.activeConversationId === null) return null; + return state.tabs.find((t) => t.conversationId === state.activeConversationId) ?? null; } export function deriveTitle(message: string, max: number = DEFAULT_MAX_TITLE_LENGTH): string { - const trimmed = message.trim().replace(/\s+/g, " "); - if (trimmed.length === 0) return DEFAULT_TITLE; - if (trimmed.length <= max) return trimmed; - return `${trimmed.slice(0, max)}\u2026`; + const trimmed = message.trim().replace(/\s+/g, " "); + if (trimmed.length === 0) return DEFAULT_TITLE; + if (trimmed.length <= max) return trimmed; + return `${trimmed.slice(0, max)}\u2026`; +} + +/** Minimum length of a tab handle (git-style short id). */ +export const MIN_HANDLE_LENGTH = 4; + +/** + * The short "handle" shown on a tab: the shortest prefix of `conversationId` + * (at least `MIN_HANDLE_LENGTH` chars) that is unique among all open tabs — a + * git-style short id. Grows by a char only when another open tab shares the + * prefix, and shrinks back when that sibling closes. Pure: the id + every open + * id in, the handle string out. (`allIds` may include `conversationId` itself.) + */ +export function shortHandle(conversationId: string, allIds: readonly string[]): string { + const others = allIds.filter((id) => id !== conversationId); + for (let len = MIN_HANDLE_LENGTH; len < conversationId.length; len++) { + const candidate = conversationId.slice(0, len); + if (!others.some((id) => id.startsWith(candidate))) return candidate; + } + return conversationId; } diff --git a/src/features/tabs/ui.test.ts b/src/features/tabs/ui.test.ts index 53df0be..ae2a021 100644 --- a/src/features/tabs/ui.test.ts +++ b/src/features/tabs/ui.test.ts @@ -1,148 +1,298 @@ -import { render, screen } from "@testing-library/svelte"; +import { fireEvent, render, screen } from "@testing-library/svelte"; import userEvent from "@testing-library/user-event"; import { describe, expect, it, vi } from "vitest"; import type { Tab } from "./tabs"; -import TabBar from "./ui/TabBar.svelte"; +import TabList from "./ui/TabList.svelte"; const sampleTabs: readonly Tab[] = [ - { conversationId: "c1", model: "openai/gpt-4", title: "First" }, - { conversationId: "c2", model: "anthropic/claude-3", title: "Second" }, - { conversationId: "c3", model: "google/gemini", title: "Third" }, + { conversationId: "c1", model: "openai/gpt-4", title: "First", workspaceId: "default" }, + { conversationId: "c2", model: "anthropic/claude-3", title: "Second", workspaceId: "default" }, + { conversationId: "c3", model: "google/gemini", title: "Third", workspaceId: "default" }, ]; -describe("TabBar", () => { - it("renders one role=tab element per tab showing each title", () => { - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c1", - onSelect: vi.fn(), - onClose: vi.fn(), - onNewDraft: vi.fn(), - }, - }); - - const tabs = screen.getAllByRole("tab"); - expect(tabs).toHaveLength(sampleTabs.length); - expect(tabs[0]).toHaveTextContent("First"); - expect(tabs[1]).toHaveTextContent("Second"); - expect(tabs[2]).toHaveTextContent("Third"); - }); - - it("applies tab-active to the active tab only", () => { - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c2", - onSelect: vi.fn(), - onClose: vi.fn(), - onNewDraft: vi.fn(), - }, - }); - - const tabs = screen.getAllByRole("tab"); - expect(tabs[0]).not.toHaveClass("tab-active"); - expect(tabs[1]).toHaveClass("tab-active"); - expect(tabs[2]).not.toHaveClass("tab-active"); - }); - - it("applies tab-active to New chat button when activeConversationId is null", () => { - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: null, - onSelect: vi.fn(), - onClose: vi.fn(), - onNewDraft: vi.fn(), - }, - }); - - const newChat = screen.getByRole("button", { name: "New chat" }); - expect(newChat).toHaveClass("tab-active"); - }); - - it("calls onSelect with the conversationId when a tab is clicked", async () => { - const onSelect = vi.fn(); - const onClose = vi.fn(); - const user = userEvent.setup(); - - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c1", - onSelect, - onClose, - onNewDraft: vi.fn(), - }, - }); - - const tabs = screen.getAllByRole("tab"); - const secondTab = tabs[1]; - if (!secondTab) throw new Error("second tab not found"); - await user.click(secondTab); - - expect(onSelect).toHaveBeenCalledTimes(1); - expect(onSelect).toHaveBeenCalledWith("c2"); - expect(onClose).not.toHaveBeenCalled(); - }); - - it("calls onClose when the close button is clicked and does not call onSelect", async () => { - const onSelect = vi.fn(); - const onClose = vi.fn(); - const user = userEvent.setup(); - - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c1", - onSelect, - onClose, - onNewDraft: vi.fn(), - }, - }); - - const closeButtons = screen.getAllByRole("button", { name: "Close tab" }); - const firstClose = closeButtons[0]; - if (!firstClose) throw new Error("first close button not found"); - await user.click(firstClose); - - expect(onClose).toHaveBeenCalledTimes(1); - expect(onClose).toHaveBeenCalledWith("c1"); - expect(onSelect).not.toHaveBeenCalled(); - }); - - it("calls onNewDraft when the New chat button is clicked", async () => { - const onNewDraft = vi.fn(); - const user = userEvent.setup(); - - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c1", - onSelect: vi.fn(), - onClose: vi.fn(), - onNewDraft, - }, - }); - - const newChat = screen.getByRole("button", { name: "New chat" }); - await user.click(newChat); - - expect(onNewDraft).toHaveBeenCalledTimes(1); - }); - - it("the New chat button has the sticky class", () => { - render(TabBar, { - props: { - tabs: sampleTabs, - activeConversationId: "c1", - onSelect: vi.fn(), - onClose: vi.fn(), - onNewDraft: vi.fn(), - }, - }); - - const newChat = screen.getByRole("button", { name: "New chat" }); - expect(newChat).toHaveClass("sticky"); - }); +describe("TabList", () => { + it("renders one role=tab element per tab showing each title", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const tabs = screen.getAllByRole("tab"); + expect(tabs).toHaveLength(sampleTabs.length); + expect(tabs[0]).toHaveTextContent("First"); + expect(tabs[1]).toHaveTextContent("Second"); + expect(tabs[2]).toHaveTextContent("Third"); + }); + + it("marks the active tab as aria-selected", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c2", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const tabs = screen.getAllByRole("tab"); + expect(tabs[0]).toHaveAttribute("aria-selected", "false"); + expect(tabs[1]).toHaveAttribute("aria-selected", "true"); + expect(tabs[2]).toHaveAttribute("aria-selected", "false"); + }); + + it("calls onSelect with the conversationId when a tab is clicked", async () => { + const onSelect = vi.fn(); + const onClose = vi.fn(); + const user = userEvent.setup(); + + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect, + onClose, + onNewDraft: vi.fn(), + }, + }); + + const tabs = screen.getAllByRole("tab"); + const secondTab = tabs[1]; + if (!secondTab) throw new Error("second tab not found"); + await user.click(secondTab); + + expect(onSelect).toHaveBeenCalledTimes(1); + expect(onSelect).toHaveBeenCalledWith("c2"); + expect(onClose).not.toHaveBeenCalled(); + }); + + it("calls onClose when the close button is clicked and does not call onSelect", async () => { + const onSelect = vi.fn(); + const onClose = vi.fn(); + const user = userEvent.setup(); + + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect, + onClose, + onNewDraft: vi.fn(), + }, + }); + + const closeButtons = screen.getAllByRole("button", { name: "Close tab" }); + const firstClose = closeButtons[0]; + if (!firstClose) throw new Error("first close button not found"); + await user.click(firstClose); + + expect(onClose).toHaveBeenCalledTimes(1); + expect(onClose).toHaveBeenCalledWith("c1"); + expect(onSelect).not.toHaveBeenCalled(); + }); + + it("calls onNewDraft when the New chat button is clicked", async () => { + const onNewDraft = vi.fn(); + const user = userEvent.setup(); + + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft, + }, + }); + + const newChat = screen.getByRole("button", { name: "New chat" }); + await user.click(newChat); + + expect(onNewDraft).toHaveBeenCalledTimes(1); + }); + + it("shows visible 'New Chat' text when activeConversationId is null", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: null, + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const newChat = screen.getByRole("button", { name: "New chat" }); + expect(newChat).toHaveTextContent("New Chat"); + }); + + it("does not show 'New Chat' text when a real tab is active", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const newChat = screen.getByRole("button", { name: "New chat" }); + expect(newChat).not.toHaveTextContent("New Chat"); + }); + + it("renders a short-handle tab ID badge (shortest unique prefix) per tab", () => { + const tabs: readonly Tab[] = [ + { conversationId: "3f9a1b2c-1111", model: "m", title: "Alpha", workspaceId: "default" }, + { conversationId: "7c2db4e5-2222", model: "m", title: "Beta", workspaceId: "default" }, + ]; + render(TabList, { + props: { + tabs, + activeConversationId: "3f9a1b2c-1111", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + expect(screen.getByText("3f9a")).toBeInTheDocument(); + expect(screen.getByText("7c2d")).toBeInTheDocument(); + }); + + it("renders each tab as a single vertical row (flex-col list, not a horizontal strip)", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + // The scroll region containing the tab rows is a vertical flex column. + const tabs = screen.getAllByRole("tab"); + expect(tabs.length).toBeGreaterThan(0); + const region = tabs[0]?.parentElement; + expect(region).toHaveClass("flex-col"); + }); + + it("fixes the tab list region at 40vh so a long set scrolls internally", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const tabs = screen.getAllByRole("tab"); + const region = tabs[0]?.parentElement; + expect(region).toHaveClass("h-[40vh]"); + expect(region).toHaveClass("overflow-y-auto"); + }); + + it("calls onRename when a tab title is double-clicked and committed with Enter", async () => { + const onRename = vi.fn(); + const user = userEvent.setup(); + + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + onRename, + }, + }); + + const titleButtons = screen.getAllByRole("button"); + // The inline-rename trigger is the title span (role=button) — find the one + // whose text matches the first tab's title. + const titleButton = titleButtons.find((b) => b.textContent === "First"); + if (!titleButton) throw new Error("title button not found"); + await user.dblClick(titleButton); + + const input = screen.getByRole("textbox"); + await user.clear(input); + await user.type(input, "Renamed{Enter}"); + + expect(onRename).toHaveBeenCalledTimes(1); + expect(onRename).toHaveBeenCalledWith("c1", "Renamed"); + }); + + it("copies the conversation id to the clipboard and highlights the badge text when clicked", async () => { + const writeText = vi.fn().mockResolvedValue(undefined); + Object.defineProperty(navigator, "clipboard", { + value: { writeText }, + configurable: true, + }); + + const onSelect = vi.fn(); + + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + onSelect, + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + const idBadge = screen.getByRole("button", { name: "Copy conversation id c1" }); + await fireEvent.click(idBadge); + + expect(writeText).toHaveBeenCalledTimes(1); + expect(writeText).toHaveBeenCalledWith("c1"); + // The badge text is NOT swapped (no width shift) — the highlight (selection) + // is the only indicator. + expect(idBadge).toHaveTextContent("c1"); + expect(idBadge).not.toHaveTextContent("Copied"); + // The badge text is selected (highlighted) as the copy indicator. + const selection = window.getSelection(); + expect(selection?.toString()).toBe("c1"); + // Clicking the ID must NOT switch tabs (the badge stops propagation). + expect(onSelect).not.toHaveBeenCalled(); + }); + + it("shows a loading RING for a 'queued' tab and loading DOTS for an 'active' tab", () => { + render(TabList, { + props: { + tabs: sampleTabs, + activeConversationId: "c1", + statusFor: (id: string) => (id === "c1" ? "queued" : id === "c2" ? "active" : undefined), + onSelect: vi.fn(), + onClose: vi.fn(), + onNewDraft: vi.fn(), + }, + }); + + // c1 is queued → a ring (DaisyUI `loading-ring`), labeled "Queued". + const queuedRing = screen.getByLabelText("Queued"); + expect(queuedRing.className).toContain("loading-ring"); + expect(queuedRing.closest('[role="tab"]')).toHaveTextContent("First"); + + const tabs = screen.getAllByRole("tab"); + expect(tabs).toHaveLength(3); + const activeTab = tabs[1]; + const idleTab = tabs[2]; + if (activeTab === undefined || idleTab === undefined) throw new Error("missing tabs"); + + // c2 is active → loading dots (NOT a ring). + expect(activeTab.querySelector(".loading-dots")).not.toBeNull(); + expect(activeTab.querySelector(".loading-ring")).toBeNull(); + + // c3 has no status → no spinner at all. + expect(idleTab.querySelector(".loading")).toBeNull(); + }); }); diff --git a/src/features/tabs/ui/TabBar.svelte b/src/features/tabs/ui/TabBar.svelte deleted file mode 100644 index 76fab05..0000000 --- a/src/features/tabs/ui/TabBar.svelte +++ /dev/null @@ -1,54 +0,0 @@ -<script lang="ts"> - import type { Tab } from "../tabs"; - - let { - tabs, - activeConversationId, - onSelect, - onClose, - onNewDraft, - }: { - tabs: readonly Tab[]; - activeConversationId: string | null; - onSelect: (conversationId: string) => void; - onClose: (conversationId: string) => void; - onNewDraft: () => void; - } = $props(); -</script> - -<div class="overflow-x-auto border-b border-base-300"> - <div class="tabs tabs-border min-w-max"> - {#each tabs as tab (tab.conversationId)} - <div - class="tab" - class:tab-active={tab.conversationId === activeConversationId} - role="tab" - tabindex="0" - onclick={() => onSelect(tab.conversationId)} - onkeydown={(e) => { - if (e.key === "Enter") onSelect(tab.conversationId); - }} - > - <span class="max-w-[120px] truncate">{tab.title}</span> - <button - class="btn btn-ghost btn-xs ml-1" - aria-label="Close tab" - onclick={(e) => { - e.stopPropagation(); - onClose(tab.conversationId); - }} - > - × - </button> - </div> - {/each} - <button - class="tab sticky right-0 z-10 bg-base-200 shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.2)]" - class:tab-active={activeConversationId === null} - aria-label="New chat" - onclick={() => onNewDraft()} - > - + - </button> - </div> -</div> diff --git a/src/features/tabs/ui/TabList.svelte b/src/features/tabs/ui/TabList.svelte new file mode 100644 index 0000000..6d85065 --- /dev/null +++ b/src/features/tabs/ui/TabList.svelte @@ -0,0 +1,183 @@ +<script lang="ts"> + import type { Tab } from "../tabs"; + import { shortHandle } from "../tabs"; + + let { + tabs, + activeConversationId, + statusFor, + onSelect, + onClose, + onNewDraft, + onRename, + }: { + tabs: readonly Tab[]; + activeConversationId: string | null; + /** Returns the conversation's lifecycle status, or undefined when unknown. */ + statusFor?: (conversationId: string) => string | undefined; + onSelect: (conversationId: string) => void; + onClose: (conversationId: string) => void; + onNewDraft: () => void; + onRename?: (conversationId: string, title: string) => void; + } = $props(); + + // Git-style short handle (shortest unique prefix) per open tab — the visible + // "tab ID". Derived from the set of open conversation ids; pure helper. + const handles = $derived.by(() => { + const ids = tabs.map((t) => t.conversationId); + const map = new Map<string, string>(); + for (const id of ids) map.set(id, shortHandle(id, ids)); + return map; + }); + + // Inline rename: double-click a tab's title to edit, Enter/blur to save. + let editingId = $state<string | null>(null); + let editValue = $state(""); + let editEl = $state<HTMLInputElement>(); + + function startRename(tab: Tab): void { + if (onRename === undefined) return; + editingId = tab.conversationId; + editValue = tab.title; + // Focus the input after it renders. + queueMicrotask(() => editEl?.focus()); + } + + function commitRename(): void { + const id = editingId; + if (id !== null && onRename !== undefined) { + const trimmed = editValue.trim(); + if (trimmed.length > 0) onRename(id, trimmed); + } + editingId = null; + } + + function cancelRename(): void { + editingId = null; + } + + // Click-to-copy the agent (conversation) id: clicking the ID badge copies the + // FULL conversationId to the clipboard (the stable, useful id — the badge + // only shows a short prefix) and highlights the badge text as feedback. The + // highlight (text selection) is the indicator — no text is swapped, so the + // badge keeps a stable width. If the clipboard write fails, the selection is + // already in place so the user can Ctrl+C the text manually. + async function copyId(conversationId: string, el: HTMLElement): Promise<void> { + selectText(el); + const clipboard = navigator.clipboard; + if (clipboard === undefined) return; + try { + await clipboard.writeText(conversationId); + } catch { + // Selection already lets the user copy manually. + } + } + + function selectText(el: HTMLElement): void { + const range = document.createRange(); + range.selectNodeContents(el); + const selection = window.getSelection(); + selection?.removeAllRanges(); + selection?.addRange(range); + } +</script> + +<div class="flex flex-col gap-2"> + <!-- Single-column vertical tab list. Fixed at 40% of the viewport height so a + long tab set scrolls inside this region instead of growing the whole sidebar. --> + <div class="flex h-[40vh] flex-col gap-1 overflow-y-auto pr-1"> + {#each tabs as tab (tab.conversationId)} + <div + class="flex items-center gap-1.5 rounded px-2 py-1.5 text-sm hover:bg-base-300" + class:bg-base-300={tab.conversationId === activeConversationId} + role="tab" + tabindex="0" + aria-selected={tab.conversationId === activeConversationId} + title={tab.title} + onclick={() => onSelect(tab.conversationId)} + onkeydown={(e) => { + if (e.key === "Enter") onSelect(tab.conversationId); + }} + > + <button + type="button" + class="shrink-0 rounded bg-base-300 px-1 py-0.5 font-mono text-[10px] leading-none text-base-content/60 transition-colors hover:bg-primary hover:text-primary-content" + data-copy-id={tab.conversationId} + title="Click to copy conversation id" + aria-label={`Copy conversation id ${tab.conversationId}`} + onclick={(e) => { + e.stopPropagation(); + void copyId(tab.conversationId, e.currentTarget); + }} + > + {handles.get(tab.conversationId) ?? tab.conversationId} + </button> + {#if editingId === tab.conversationId} + <input + bind:this={editEl} + bind:value={editValue} + class="min-w-0 flex-1 rounded bg-base-100 px-1 py-0.5 text-left text-sm outline outline-1 outline-primary" + onclick={(e) => e.stopPropagation()} + onkeydown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + commitRename(); + } else if (e.key === "Escape") { + e.preventDefault(); + cancelRename(); + } + }} + onblur={commitRename} + /> + {:else} + <span + class="min-w-0 flex-1 cursor-pointer truncate text-left" + role="button" + tabindex="-1" + title={tab.title} + ondblclick={(e) => { + e.stopPropagation(); + startRename(tab); + }} + > + {tab.title} + </span> + {/if} + {#if statusFor?.(tab.conversationId) === "queued"} + <!-- Waiting for a concurrency slot — a ring (vs the dots of `active`). --> + <span + class="loading loading-ring loading-xs shrink-0 text-primary" + aria-label="Queued" + title="Waiting for a concurrency slot" + ></span> + {:else if statusFor?.(tab.conversationId) === "active"} + <span class="loading loading-dots loading-xs shrink-0 text-primary"></span> + {/if} + <button + class="btn btn-ghost btn-xs shrink-0" + aria-label="Close tab" + onclick={(e) => { + e.stopPropagation(); + onClose(tab.conversationId); + }} + > + × + </button> + </div> + {/each} + </div> + + <button + type="button" + class="btn btn-ghost btn-sm w-full border border-base-300" + class:btn-primary={activeConversationId === null} + aria-label="New chat" + onclick={() => onNewDraft()} + > + {#if activeConversationId === null} + New Chat + {:else} + + New chat + {/if} + </button> +</div> diff --git a/src/features/views/index.ts b/src/features/views/index.ts new file mode 100644 index 0000000..164241d --- /dev/null +++ b/src/features/views/index.ts @@ -0,0 +1,15 @@ +export { + addPanel, + initialPanels, + type PanelsState, + removePanel, + selectKind, + type ViewPanel, +} from "./logic/panels"; +export { default as ViewSidebar } from "./ui/ViewSidebar.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "views", + description: "Sidebar view panels (dropdown picker + add / remove)", +} as const; diff --git a/src/features/views/logic/panels.test.ts b/src/features/views/logic/panels.test.ts new file mode 100644 index 0000000..aadbf5e --- /dev/null +++ b/src/features/views/logic/panels.test.ts @@ -0,0 +1,55 @@ +import { describe, expect, it } from "vitest"; +import { addPanel, initialPanels, removePanel, selectKind } from "./panels"; + +describe("view panels reducer", () => { + it("seeds one empty panel by default", () => { + const s = initialPanels(); + expect(s.panels).toHaveLength(1); + expect(s.panels[0]?.kind).toBeNull(); + }); + + it("seeds a panel per provided kind, in order, with unique ids", () => { + const s = initialPanels(["surfaces", null]); + expect(s.panels.map((p) => p.kind)).toEqual(["surfaces", null]); + expect(new Set(s.panels.map((p) => p.id)).size).toBe(2); + }); + + it("addPanel appends an empty panel with a fresh id", () => { + const seed = initialPanels(["surfaces"]); + const s = addPanel(seed); + expect(s.panels).toHaveLength(2); + expect(s.panels[1]?.kind).toBeNull(); + expect(s.panels[1]?.id).not.toBe(s.panels[0]?.id); + }); + + it("addPanel can seed a kind", () => { + const s = addPanel(initialPanels([null]), "surfaces"); + expect(s.panels[1]?.kind).toBe("surfaces"); + }); + + it("removePanel drops the matching id only", () => { + const seed = initialPanels(["surfaces", null]); + const firstId = seed.panels[0]?.id ?? -1; + const s = removePanel(seed, firstId); + expect(s.panels).toHaveLength(1); + expect(s.panels[0]?.kind).toBeNull(); + }); + + it("selectKind updates only the targeted panel", () => { + const seed = initialPanels([null, null]); + const targetId = seed.panels[1]?.id ?? -1; + const s = selectKind(seed, targetId, "surfaces"); + expect(s.panels[0]?.kind).toBeNull(); + expect(s.panels[1]?.kind).toBe("surfaces"); + }); + + it("is pure — never mutates the input state", () => { + const seed = initialPanels(["surfaces"]); + const snapshot = JSON.stringify(seed); + const id = seed.panels[0]?.id ?? -1; + addPanel(seed); + removePanel(seed, id); + selectKind(seed, id, null); + expect(JSON.stringify(seed)).toBe(snapshot); + }); +}); diff --git a/src/features/views/logic/panels.ts b/src/features/views/logic/panels.ts new file mode 100644 index 0000000..fa22be6 --- /dev/null +++ b/src/features/views/logic/panels.ts @@ -0,0 +1,49 @@ +/** + * Pure reducer for the view sidebar's panel stack. + * + * A "view" is the RESERVED Dispatch sidebar affordance (see GLOSSARY): the user + * stacks panels, each showing one view KIND chosen from a dropdown, and adds + * more with a `+` button. This module is the pure model — zero DOM, zero Svelte. + * The component (`ViewSidebar.svelte`) is a thin runes wrapper over it. + * + * `id` is a per-session stable key for `{#each}` only; it is never persisted. + */ + +export interface ViewPanel { + readonly id: number; + /** Selected view-kind id, or `null` while the panel still reads "Select a view". */ + readonly kind: string | null; +} + +export interface PanelsState { + readonly panels: readonly ViewPanel[]; + readonly nextId: number; +} + +/** + * Seed state. Each entry becomes one panel in order; pass `["surfaces"]` to open + * a single preset panel, or `[null]` for one empty "Select a view" panel. + */ +export function initialPanels(kinds: readonly (string | null)[] = [null]): PanelsState { + let nextId = 0; + const panels = kinds.map((kind) => ({ id: nextId++, kind })); + return { panels, nextId }; +} + +export function addPanel(state: PanelsState, kind: string | null = null): PanelsState { + return { + panels: [...state.panels, { id: state.nextId, kind }], + nextId: state.nextId + 1, + }; +} + +export function removePanel(state: PanelsState, id: number): PanelsState { + return { ...state, panels: state.panels.filter((p) => p.id !== id) }; +} + +export function selectKind(state: PanelsState, id: number, kind: string | null): PanelsState { + return { + ...state, + panels: state.panels.map((p) => (p.id === id ? { ...p, kind } : p)), + }; +} diff --git a/src/features/views/ui/ViewSidebar.svelte b/src/features/views/ui/ViewSidebar.svelte new file mode 100644 index 0000000..e9e8682 --- /dev/null +++ b/src/features/views/ui/ViewSidebar.svelte @@ -0,0 +1,95 @@ +<script lang="ts"> + import { type Snippet, untrack } from "svelte"; + import { + addPanel, + initialPanels, + type PanelsState, + removePanel, + selectKind, + } from "../logic/panels"; + + interface ViewKind { + readonly id: string; + readonly label: string; + } + + let { + kinds, + content, + initial, + onChange, + }: { + /** The view kinds offered in every panel's dropdown. */ + kinds: readonly ViewKind[]; + /** Renders a panel body for the given (non-null) view-kind id. */ + content: Snippet<[string]>; + /** Optional seed of panel kinds; defaults to one panel of the first kind. */ + initial?: readonly (string | null)[]; + /** Called whenever the panel layout changes (add/remove/select). */ + onChange?: (kinds: readonly (string | null)[]) => void; + } = $props(); + + // Local UI composition state, owned by this unit and folded through the pure + // reducer — never reached from elsewhere (no ambient store). Seeded ONCE from + // the props (untrack makes that one-time read explicit, not reactive). + let state = $state<PanelsState>(untrack(() => initialPanels(initial ?? [kinds[0]?.id ?? null]))); + + function notify(): void { + onChange?.(state.panels.map((p) => p.kind)); + } +</script> + +<div class="flex min-h-0 flex-col gap-2"> + {#each state.panels as panel, idx (panel.id)} + <div class="flex flex-col rounded-lg bg-base-200 p-3"> + <div class="flex items-center gap-1"> + <select + class="select select-bordered select-sm flex-1" + aria-label="Select a view" + value={panel.kind ?? ""} + onchange={(e) => { + const v = e.currentTarget.value; + state = selectKind(state, panel.id, v === "" ? null : v); + notify(); + }} + > + <option value="" disabled>Select a view</option> + {#each kinds as kind (kind.id)} + <option value={kind.id}>{kind.label}</option> + {/each} + </select> + {#if idx > 0} + <button + type="button" + class="btn btn-square btn-ghost btn-sm shrink-0" + aria-label="Remove view" + onclick={() => { + state = removePanel(state, panel.id); + notify(); + }} + > + ✕ + </button> + {/if} + </div> + + {#if panel.kind !== null} + <div class="mt-2"> + {@render content(panel.kind)} + </div> + {/if} + </div> + {/each} + + <button + type="button" + class="btn w-full border-none bg-base-200 text-lg hover:bg-base-300" + aria-label="Add view" + onclick={() => { + state = addPanel(state); + notify(); + }} + > + + + </button> +</div> diff --git a/src/features/views/ui/ViewSidebar.test.ts b/src/features/views/ui/ViewSidebar.test.ts new file mode 100644 index 0000000..0618506 --- /dev/null +++ b/src/features/views/ui/ViewSidebar.test.ts @@ -0,0 +1,58 @@ +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { createRawSnippet } from "svelte"; +import { describe, expect, it } from "vitest"; +import ViewSidebar from "./ViewSidebar.svelte"; + +const kinds = [ + { id: "surfaces", label: "Surfaces" }, + { id: "tasks", label: "Tasks" }, +]; + +// A raw snippet that echoes the kind it was rendered for, so tests can assert +// which view-kind content each panel shows. +const content = createRawSnippet<[string]>((kind) => ({ + render: () => `<div data-testid="view-content">kind:${kind()}</div>`, +})); + +describe("ViewSidebar", () => { + it("opens one panel seeded with the first kind and renders its content", () => { + render(ViewSidebar, { props: { kinds, content } }); + expect(screen.getAllByRole("combobox")).toHaveLength(1); + expect(screen.getByTestId("view-content")).toHaveTextContent("kind:surfaces"); + }); + + it("the first panel has no remove button", () => { + render(ViewSidebar, { props: { kinds, content } }); + expect(screen.queryByRole("button", { name: "Remove view" })).toBeNull(); + }); + + it("the add button appends a new empty panel", async () => { + const user = userEvent.setup(); + render(ViewSidebar, { props: { kinds, content } }); + await user.click(screen.getByRole("button", { name: "Add view" })); + expect(screen.getAllByRole("combobox")).toHaveLength(2); + // the new panel is empty → only the first panel renders content + expect(screen.getAllByTestId("view-content")).toHaveLength(1); + }); + + it("non-first panels can be removed", async () => { + const user = userEvent.setup(); + render(ViewSidebar, { props: { kinds, content } }); + await user.click(screen.getByRole("button", { name: "Add view" })); + const removeButtons = screen.getAllByRole("button", { name: "Remove view" }); + expect(removeButtons).toHaveLength(1); + const target = removeButtons[0]; + if (target === undefined) throw new Error("expected a remove button"); + await user.click(target); + expect(screen.getAllByRole("combobox")).toHaveLength(1); + }); + + it("selecting a kind renders that kind's content", async () => { + const user = userEvent.setup(); + render(ViewSidebar, { props: { kinds, content, initial: [null] } }); + expect(screen.queryByTestId("view-content")).toBeNull(); + await user.selectOptions(screen.getByRole("combobox"), "tasks"); + expect(screen.getByTestId("view-content")).toHaveTextContent("kind:tasks"); + }); +}); diff --git a/src/features/vision/index.ts b/src/features/vision/index.ts new file mode 100644 index 0000000..6956d75 --- /dev/null +++ b/src/features/vision/index.ts @@ -0,0 +1,30 @@ +export type { + CompactionModelOption, + ImageLimitParse, + LoadVisionSettings, + LoadVisionSettingsResult, + SaveVisionSettings, + SaveVisionSettingsResult, + VisionSettings, + VisionSettingsPatch, +} from "./logic/view-model"; +export { + AUTO_COMPACTION_MODEL, + compactionModelChanged, + compactionModelFromValue, + compactionModelOptions, + DEFAULT_IMAGE_LIMIT, + imageLimitChanged, + imageLimitLabel, + MAX_IMAGE_LIMIT, + normalizeVisionSettings, + parseImageLimit, + selectedCompactionValue, +} from "./logic/view-model"; +export { default as VisionSettingsView } from "./ui/VisionSettingsView.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "vision", + description: "Global vision settings (image compaction limit + model)", +} as const; diff --git a/src/features/vision/logic/view-model.test.ts b/src/features/vision/logic/view-model.test.ts new file mode 100644 index 0000000..b1db822 --- /dev/null +++ b/src/features/vision/logic/view-model.test.ts @@ -0,0 +1,198 @@ +import type { ModelMetadata } from "@dispatch/transport-contract"; +import { describe, expect, it } from "vitest"; +import { + AUTO_COMPACTION_MODEL, + compactionModelChanged, + compactionModelFromValue, + compactionModelOptions, + DEFAULT_IMAGE_LIMIT, + imageLimitChanged, + imageLimitLabel, + MAX_IMAGE_LIMIT, + normalizeVisionSettings, + parseImageLimit, + selectedCompactionValue, +} from "./view-model"; + +describe("normalizeVisionSettings", () => { + it("returns the value as-is for a well-formed body", () => { + expect(normalizeVisionSettings({ imageLimit: 5, compactionModel: "kimi/k2" })).toEqual({ + imageLimit: 5, + compactionModel: "kimi/k2", + }); + }); + + it("coerces a null compactionModel to null", () => { + expect(normalizeVisionSettings({ imageLimit: 10, compactionModel: null })).toEqual({ + imageLimit: 10, + compactionModel: null, + }); + }); + + it("defaults imageLimit when absent or non-numeric", () => { + expect(normalizeVisionSettings({ compactionModel: "kimi/k2" })).toEqual({ + imageLimit: DEFAULT_IMAGE_LIMIT, + compactionModel: "kimi/k2", + }); + expect(normalizeVisionSettings({ imageLimit: "oops", compactionModel: null })).toEqual({ + imageLimit: DEFAULT_IMAGE_LIMIT, + compactionModel: null, + }); + }); + + it("floors a fractional imageLimit", () => { + expect(normalizeVisionSettings({ imageLimit: 7.9, compactionModel: null }).imageLimit).toBe(7); + }); + + it("defaults for a null/non-object body (never crashes)", () => { + expect(normalizeVisionSettings(null)).toEqual({ + imageLimit: DEFAULT_IMAGE_LIMIT, + compactionModel: null, + }); + expect(normalizeVisionSettings("nope")).toEqual({ + imageLimit: DEFAULT_IMAGE_LIMIT, + compactionModel: null, + }); + }); + + it("treats a negative imageLimit as the default", () => { + expect(normalizeVisionSettings({ imageLimit: -3, compactionModel: null }).imageLimit).toBe( + DEFAULT_IMAGE_LIMIT, + ); + }); + + it("treats an empty compactionModel string as null", () => { + expect( + normalizeVisionSettings({ imageLimit: 10, compactionModel: "" }).compactionModel, + ).toBeNull(); + }); +}); + +describe("parseImageLimit", () => { + it("parses a non-negative integer", () => { + expect(parseImageLimit("5")).toEqual({ ok: true, value: 5 }); + expect(parseImageLimit("0")).toEqual({ ok: true, value: 0 }); + }); + + it("floors a fractional value", () => { + expect(parseImageLimit("7.9")).toEqual({ ok: true, value: 7 }); + }); + + it("trims whitespace", () => { + expect(parseImageLimit(" 12 ")).toEqual({ ok: true, value: 12 }); + }); + + it("errors on empty input", () => { + expect(parseImageLimit("")).toEqual({ ok: false, error: "Enter a number." }); + }); + + it("errors on non-numeric input", () => { + expect(parseImageLimit("lots").ok).toBe(false); + }); + + it("errors on a negative value", () => { + expect(parseImageLimit("-1").ok).toBe(false); + }); + + it("errors when above the max", () => { + expect(parseImageLimit(String(MAX_IMAGE_LIMIT + 1)).ok).toBe(false); + }); + + it("accepts the max", () => { + expect(parseImageLimit(String(MAX_IMAGE_LIMIT))).toEqual({ ok: true, value: MAX_IMAGE_LIMIT }); + }); +}); + +describe("imageLimitChanged", () => { + it("is true when the typed value differs after normalization", () => { + expect(imageLimitChanged("5", 10)).toBe(true); + }); + + it("is false when equal", () => { + expect(imageLimitChanged("10", 10)).toBe(false); + }); + + it("is false for invalid input", () => { + expect(imageLimitChanged("abc", 10)).toBe(false); + expect(imageLimitChanged("", 10)).toBe(false); + }); + + it("compares after flooring", () => { + expect(imageLimitChanged("7.9", 7)).toBe(false); + }); +}); + +describe("compactionModelOptions", () => { + const modelInfo: Record<string, ModelMetadata> = { + "kimi/k2": { vision: true }, + "kimi/k1.5": { vision: true }, + "umans/glm-5.2": { vision: false }, + "openai/gpt-4": { contextWindow: 128000 }, + }; + + it("includes the Auto option first", () => { + const opts = compactionModelOptions([], {}); + expect(opts).toHaveLength(1); + expect(opts[0]?.auto).toBe(true); + expect(opts[0]?.value).toBe(AUTO_COMPACTION_MODEL); + }); + + it("includes only vision-capable models, in catalog order", () => { + const models = ["umans/glm-5.2", "kimi/k2", "openai/gpt-4", "kimi/k1.5"]; + const opts = compactionModelOptions(models, modelInfo); + expect(opts.map((o) => o.label)).toEqual(["Auto (server-selected)", "kimi/k2", "kimi/k1.5"]); + }); + + it("excludes non-vision models even with metadata present", () => { + const opts = compactionModelOptions(["umans/glm-5.2"], modelInfo); + expect(opts).toHaveLength(1); // only Auto + }); +}); + +describe("compactionModel value round-trip", () => { + it("selectedCompactionValue maps null to the auto sentinel", () => { + expect(selectedCompactionValue(null)).toBe(AUTO_COMPACTION_MODEL); + }); + + it("selectedCompactionValue maps a model name to itself", () => { + expect(selectedCompactionValue("kimi/k2")).toBe("kimi/k2"); + }); + + it("compactionModelFromValue maps the auto sentinel back to null", () => { + expect(compactionModelFromValue(AUTO_COMPACTION_MODEL)).toBeNull(); + }); + + it("compactionModelFromValue maps a model name to itself", () => { + expect(compactionModelFromValue("kimi/k2")).toBe("kimi/k2"); + }); +}); + +describe("compactionModelChanged", () => { + it("is true when the value maps to a different model", () => { + expect(compactionModelChanged("kimi/k2", null)).toBe(true); + expect(compactionModelChanged(AUTO_COMPACTION_MODEL, "kimi/k2")).toBe(true); + }); + + it("is false when equal (null vs auto, or same model)", () => { + expect(compactionModelChanged(AUTO_COMPACTION_MODEL, null)).toBe(false); + expect(compactionModelChanged("kimi/k2", "kimi/k2")).toBe(false); + }); +}); + +describe("imageLimitLabel", () => { + it("labels null as loading", () => { + expect(imageLimitLabel(null)).toBe("Loading…"); + }); + + it("labels 0 as disabled", () => { + expect(imageLimitLabel(0)).toBe("0 (compaction disabled)"); + }); + + it("labels the default with (default)", () => { + expect(imageLimitLabel(DEFAULT_IMAGE_LIMIT)).toBe(`${DEFAULT_IMAGE_LIMIT} (default)`); + }); + + it("labels other values plainly", () => { + expect(imageLimitLabel(7)).toBe("7"); + }); +}); diff --git a/src/features/vision/logic/view-model.ts b/src/features/vision/logic/view-model.ts new file mode 100644 index 0000000..97a7093 --- /dev/null +++ b/src/features/vision/logic/view-model.ts @@ -0,0 +1,189 @@ +import type { ModelMetadata } from "@dispatch/transport-contract"; +import { isVisionModel } from "../../chat"; + +/** + * Pure core for the vision settings feature — zero DOM, zero effects, zero Svelte. + * + * The global vision configuration (`GET`/`PUT /settings/vision`) controls image + * compaction: how many native images a vision model keeps per turn before the + * oldest are transcribed to text (`imageLimit`), and which vision model does the + * transcribing (`compactionModel`, null = auto). This module is the view-model + * seam: typed settings, parse/validate, dirty-check, network normalization, and + * the vision-capable model option list. The composition root adapts the store's + * HTTP calls to the injected ports. + */ + +// ── Types (owned locally — consumer-defines-port; the contract shapes are a +// plain REST surface not in a shared contract package version bump, mirroring +// the heartbeat/mcp pattern). If the backend promotes these to a shared +// package, swap the local types for the imports + re-mirror. ────────────── + +/** The global vision settings (mirrors `VisionSettingsResponse`). */ +export interface VisionSettings { + /** Max native images per turn (default 10); 0 disables compaction. */ + readonly imageLimit: number; + /** Which model transcribes old images (`<key>/<model>`), or null = auto. */ + readonly compactionModel: string | null; +} + +/** A partial update (mirrors `SetVisionSettingsRequest`). */ +export interface VisionSettingsPatch { + readonly imageLimit?: number; + readonly compactionModel?: string | null; +} + +// ── Injected ports (consumer-defines-port). ─────────────────────────────────── + +/** Outcome of loading the vision settings. */ +export type LoadVisionSettingsResult = + | { readonly ok: true; readonly settings: VisionSettings } + | { readonly ok: false; readonly error: string }; + +/** Outcome of saving a partial vision-settings update. */ +export type SaveVisionSettingsResult = + | { readonly ok: true; readonly settings: VisionSettings } + | { readonly ok: false; readonly error: string }; + +export type LoadVisionSettings = () => Promise<LoadVisionSettingsResult>; +export type SaveVisionSettings = (patch: VisionSettingsPatch) => Promise<SaveVisionSettingsResult>; + +// ── Constants ──────────────────────────────────────────────────────────────── + +/** The backend's default image limit when none is persisted. */ +export const DEFAULT_IMAGE_LIMIT = 10; +/** Upper bound for the image limit input (defensive — the backend owns real clamping). */ +export const MAX_IMAGE_LIMIT = 1000; + +// ── Network normalization (pure; coerces untyped JSON at the seam). ────────── + +/** + * Coerce an untyped JSON body (from `GET /settings/vision`) into a valid + * `VisionSettings`. A malformed/partial response can never crash the renderer: + * `imageLimit` falls back to the default; `compactionModel` coerces to null. + */ +export function normalizeVisionSettings(body: unknown): VisionSettings { + if (body === null || typeof body !== "object") { + return { imageLimit: DEFAULT_IMAGE_LIMIT, compactionModel: null }; + } + const raw = body as Record<string, unknown>; + const limitRaw = raw.imageLimit; + const imageLimit = + typeof limitRaw === "number" && Number.isFinite(limitRaw) && limitRaw >= 0 + ? Math.floor(limitRaw) + : DEFAULT_IMAGE_LIMIT; + const modelRaw = raw.compactionModel; + const compactionModel = typeof modelRaw === "string" && modelRaw.length > 0 ? modelRaw : null; + return { imageLimit, compactionModel }; +} + +// ── imageLimit parse / validate ─────────────────────────────────────────────── + +/** Result of parsing a typed image-limit string. */ +export type ImageLimitParse = + | { readonly ok: true; readonly value: number } + | { readonly ok: false; readonly error: string }; + +/** + * Parse a typed image-limit string into a non-negative integer (floored, + * clamped to [0, MAX_IMAGE_LIMIT]). Empty or non-numeric input is an ERROR + * (so the UI can disable submit + message), NOT a silent default. + */ +export function parseImageLimit(raw: string): ImageLimitParse { + const trimmed = raw.trim(); + if (trimmed.length === 0) { + return { ok: false, error: "Enter a number." }; + } + const n = Number(trimmed); + if (!Number.isFinite(n) || n < 0) { + return { ok: false, error: "Must be 0 or a positive number." }; + } + const floored = Math.floor(n); + if (floored > MAX_IMAGE_LIMIT) { + return { ok: false, error: `Must be at most ${MAX_IMAGE_LIMIT}.` }; + } + return { ok: true, value: floored }; +} + +/** + * Whether saving `typed` would change the `current` image limit. A no-op save + * (empty/invalid, or equal) should be disabled. This is the dirty-check for the + * input — it must NOT mutate or clamp, only compare. + */ +export function imageLimitChanged(typed: string, current: number): boolean { + const parsed = parseImageLimit(typed); + if (!parsed.ok) return false; + return parsed.value !== current; +} + +// ── compactionModel option list ─────────────────────────────────────────────── + +/** + * The sentinel value for the "Auto" option (null compactionModel — the server + * auto-selects a vision model). Used as the `<option value>` for the auto row. + */ +export const AUTO_COMPACTION_MODEL = "__auto__"; + +/** A selectable compaction-model option. */ +export interface CompactionModelOption { + /** The value to send (`<key>/<model>`, or `AUTO_COMPACTION_MODEL` for auto). */ + readonly value: string; + /** The human-readable label. */ + readonly label: string; + /** Whether this is the "Auto" sentinel. */ + readonly auto: boolean; +} + +/** + * Build the compaction-model dropdown options: the "Auto" entry (null) plus + * every vision-capable model from the catalog (those with + * `modelInfo[name].vision === true`), in catalog order. Non-vision models are + * excluded — they cannot transcribe images. + */ +export function compactionModelOptions( + models: readonly string[], + modelInfo: Readonly<Record<string, ModelMetadata>>, +): CompactionModelOption[] { + const options: CompactionModelOption[] = [ + { value: AUTO_COMPACTION_MODEL, label: "Auto (server-selected)", auto: true }, + ]; + for (const name of models) { + if (isVisionModel(modelInfo, name)) { + options.push({ value: name, label: name, auto: false }); + } + } + return options; +} + +/** + * The `<option value>` to mark selected for the current `compactionModel`: + * `AUTO_COMPACTION_MODEL` when null (auto), else the model name itself. + */ +export function selectedCompactionValue(compactionModel: string | null): string { + return compactionModel ?? AUTO_COMPACTION_MODEL; +} + +/** + * Convert a selected `<option value>` back into a `VisionSettingsPatch` + * `compactionModel` (the auto sentinel → null). Returns the patch alone so the + * caller can merge it with other fields. + */ +export function compactionModelFromValue(value: string): string | null { + return value === AUTO_COMPACTION_MODEL ? null : value; +} + +/** + * Whether choosing `value` would change the current `compactionModel`. + */ +export function compactionModelChanged(value: string, current: string | null): boolean { + return compactionModelFromValue(value) !== current; +} + +// ── Labels ──────────────────────────────────────────────────────────────────── + +/** A human-readable label for the current image limit (for the status line). */ +export function imageLimitLabel(imageLimit: number | null): string { + if (imageLimit === null) return "Loading…"; + if (imageLimit === 0) return "0 (compaction disabled)"; + if (imageLimit === DEFAULT_IMAGE_LIMIT) return `${imageLimit} (default)`; + return String(imageLimit); +} diff --git a/src/features/vision/ui/VisionSettingsView.svelte b/src/features/vision/ui/VisionSettingsView.svelte new file mode 100644 index 0000000..2b4ebba --- /dev/null +++ b/src/features/vision/ui/VisionSettingsView.svelte @@ -0,0 +1,192 @@ +<script lang="ts"> + import type { ModelMetadata } from "@dispatch/transport-contract"; + import { + compactionModelChanged, + compactionModelFromValue, + compactionModelOptions, + DEFAULT_IMAGE_LIMIT, + imageLimitChanged, + imageLimitLabel, + parseImageLimit, + selectedCompactionValue, + type LoadVisionSettings, + type SaveVisionSettings, + type VisionSettings, + } from "../logic/view-model"; + + let { + models, + modelInfo = {}, + load, + save, + }: { + /** The model catalog (`GET /models` `models`) — for the compaction-model dropdown. */ + models: readonly string[]; + /** Per-model metadata — to filter the dropdown to vision-capable models. */ + modelInfo?: Readonly<Record<string, ModelMetadata>>; + /** Load the global vision settings (`GET /settings/vision`). */ + load: LoadVisionSettings; + /** Save a partial vision-settings update (`PUT /settings/vision`). */ + save: SaveVisionSettings; + } = $props(); + + let settings = $state<VisionSettings | null>(null); + let loadError = $state<string | null>(null); + + // imageLimit input state. + let imageLimitInput = $state(""); + let savingImageLimit = $state(false); + let imageLimitError = $state<string | null>(null); + let imageLimitSaved = $state(false); + + // compactionModel select state. + let compactionSaving = $state(false); + let compactionError = $state<string | null>(null); + let compactionSaved = $state(false); + + // Load on mount. + $effect(() => { + void refresh(); + }); + + async function refresh(): Promise<void> { + const result = await load(); + if (result.ok) { + settings = result.settings; + imageLimitInput = String(result.settings.imageLimit); + loadError = null; + imageLimitError = null; + imageLimitSaved = false; + compactionError = null; + compactionSaved = false; + } else { + loadError = result.error; + } + } + + const options = $derived(compactionModelOptions(models, modelInfo)); + const selectedCompaction = $derived( + settings ? selectedCompactionValue(settings.compactionModel) : selectedCompactionValue(null), + ); + const limitLabel = $derived(imageLimitLabel(settings?.imageLimit ?? null)); + + const canSaveImageLimit = $derived( + settings !== null && imageLimitChanged(imageLimitInput, settings.imageLimit), + ); + + async function handleSaveImageLimit(): Promise<void> { + if (settings === null || savingImageLimit) return; + const parsed = parseImageLimit(imageLimitInput); + if (!parsed.ok) { + imageLimitError = parsed.error; + imageLimitSaved = false; + return; + } + savingImageLimit = true; + imageLimitError = null; + imageLimitSaved = false; + const result = await save({ imageLimit: parsed.value }); + savingImageLimit = false; + if (result.ok) { + settings = result.settings; + imageLimitInput = String(result.settings.imageLimit); + imageLimitSaved = true; + } else { + imageLimitError = result.error; + } + } + + async function handleCompactionChange(e: Event): Promise<void> { + if (settings === null || compactionSaving) return; + const value = (e.currentTarget as HTMLSelectElement).value; + if (!compactionModelChanged(value, settings.compactionModel)) return; + compactionSaving = true; + compactionError = null; + compactionSaved = false; + const result = await save({ compactionModel: compactionModelFromValue(value) }); + compactionSaving = false; + if (result.ok) { + settings = result.settings; + compactionSaved = true; + } else { + compactionError = result.error; + } + } +</script> + +<div class="flex flex-col gap-3"> + {#if loadError} + <p class="text-xs text-error">{loadError}</p> + {/if} + + {#if settings === null && !loadError} + <p class="text-xs opacity-60">Loading vision settings…</p> + {:else if settings !== null} + <!-- imageLimit --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Image limit</span> + <div class="flex items-center gap-2"> + <input + type="text" + inputmode="numeric" + class="input input-bordered input-sm w-24" + placeholder={String(DEFAULT_IMAGE_LIMIT)} + bind:value={imageLimitInput} + disabled={savingImageLimit} + aria-label="Image limit (max native images per turn)" + /> + <button + type="button" + class="btn btn-sm btn-outline" + disabled={!canSaveImageLimit || savingImageLimit} + onclick={handleSaveImageLimit} + > + {#if savingImageLimit} + <span class="loading loading-spinner loading-xs"></span> + Saving… + {:else} + Save + {/if} + </button> + </div> + <p class="text-xs opacity-50"> + Current: {limitLabel} + <br /> + Max native images per turn before the oldest are transcribed to text. + 0 disables compaction. Default is {DEFAULT_IMAGE_LIMIT}. + </p> + {#if imageLimitError} + <p class="text-xs text-error">{imageLimitError}</p> + {:else if imageLimitSaved} + <p class="text-xs text-success">Saved.</p> + {/if} + </section> + + <!-- compactionModel --> + <section class="flex flex-col gap-1"> + <span class="text-xs font-semibold uppercase opacity-60">Compaction model</span> + <select + class="select select-bordered select-sm w-full" + value={selectedCompaction} + disabled={compactionSaving} + onchange={handleCompactionChange} + aria-label="Compaction model (which vision model transcribes old images)" + > + {#each options as opt (opt.value)} + <option value={opt.value}>{opt.label}</option> + {/each} + </select> + {#if compactionSaving} + <p class="text-xs opacity-60">Saving…</p> + {/if} + <p class="text-xs opacity-50"> + The vision-capable model that transcribes old images to text. "Auto" lets the server choose. + </p> + {#if compactionError} + <p class="text-xs text-error">{compactionError}</p> + {:else if compactionSaved} + <p class="text-xs text-success">Saved.</p> + {/if} + </section> + {/if} +</div> diff --git a/src/features/vision/ui/VisionSettingsView.test.ts b/src/features/vision/ui/VisionSettingsView.test.ts new file mode 100644 index 0000000..48afc71 --- /dev/null +++ b/src/features/vision/ui/VisionSettingsView.test.ts @@ -0,0 +1,241 @@ +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; +import type { + LoadVisionSettingsResult, + SaveVisionSettingsResult, + VisionSettings, +} from "../logic/view-model"; +import VisionSettingsView from "./VisionSettingsView.svelte"; + +const SETTINGS: VisionSettings = { imageLimit: 10, compactionModel: null }; + +function fakeLoad(settings: VisionSettings = SETTINGS): { + calls: number; + impl: () => Promise<LoadVisionSettingsResult>; +} { + let calls = 0; + return { + get calls() { + return calls; + }, + impl: async () => { + calls += 1; + return { ok: true, settings }; + }, + }; +} + +function fakeSaveOk(): { + patches: object[]; + impl: (patch: object) => Promise<SaveVisionSettingsResult>; +} { + const patches: object[] = []; + return { + get patches() { + return patches; + }, + impl: async (patch) => { + patches.push(patch); + // Merge into the current settings to simulate the server echo. + const next: VisionSettings = { + imageLimit: + "imageLimit" in patch ? (patch as VisionSettings).imageLimit : SETTINGS.imageLimit, + compactionModel: + "compactionModel" in patch + ? (patch as VisionSettings).compactionModel + : SETTINGS.compactionModel, + }; + return { ok: true, settings: next }; + }, + }; +} + +describe("VisionSettingsView", () => { + it("loads settings on mount and seeds the imageLimit input", async () => { + const load = fakeLoad({ imageLimit: 7, compactionModel: "kimi/k2" }); + render(VisionSettingsView, { + props: { + models: ["kimi/k2"], + modelInfo: { "kimi/k2": { vision: true } }, + load: load.impl, + save: fakeSaveOk().impl, + }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Image limit/)).toHaveValue("7"); + }); + // "Auto" is selected (compactionModel was kimi/k2 here actually) + expect(screen.getByLabelText(/Compaction model/)).toHaveValue("kimi/k2"); + }); + + it("disables Save until the imageLimit input differs", async () => { + const load = fakeLoad(); + const save = fakeSaveOk(); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { models: [], modelInfo: {}, load: load.impl, save: save.impl }, + }); + + await vi.waitFor(() => { + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + }); + + const input = screen.getByLabelText(/Image limit/); + await user.clear(input); + await user.type(input, "5"); + expect(screen.getByRole("button", { name: "Save" })).toBeEnabled(); + }); + + it("saves the imageLimit on click and confirms", async () => { + const load = fakeLoad(); + const save = fakeSaveOk(); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { models: [], modelInfo: {}, load: load.impl, save: save.impl }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Image limit/)).toHaveValue("10"); + }); + + const input = screen.getByLabelText(/Image limit/); + await user.clear(input); + await user.type(input, "3"); + await user.click(screen.getByRole("button", { name: "Save" })); + + await vi.waitFor(() => { + expect(save.patches).toEqual([{ imageLimit: 3 }]); + }); + expect(screen.getByText(/Saved/i)).toBeInTheDocument(); + }); + + it("shows an error for a non-numeric imageLimit on save", async () => { + const load = fakeLoad(); + const save = fakeSaveOk(); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { models: [], modelInfo: {}, load: load.impl, save: save.impl }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Image limit/)).toHaveValue("10"); + }); + + const input = screen.getByLabelText(/Image limit/); + await user.clear(input); + await user.type(input, "abc"); + // Save is disabled for invalid input, so no save fires; the error surfaces + // only on a submit attempt — but the button is disabled, so just assert that. + expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); + expect(save.patches).toEqual([]); + }); + + it("renders the compaction-model dropdown with Auto + vision-capable models", async () => { + const load = fakeLoad(); + render(VisionSettingsView, { + props: { + models: ["kimi/k2", "umans/glm-5.2", "kimi/k1.5"], + modelInfo: { + "kimi/k2": { vision: true }, + "kimi/k1.5": { vision: true }, + "umans/glm-5.2": { vision: false }, + }, + load: load.impl, + save: fakeSaveOk().impl, + }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Compaction model/)).toBeInTheDocument(); + }); + const select = screen.getByLabelText(/Compaction model/) as HTMLSelectElement; + const optionTexts = Array.from(select.options).map((o) => o.textContent ?? ""); + expect(optionTexts).toEqual(["Auto (server-selected)", "kimi/k2", "kimi/k1.5"]); + // Non-vision glm-5.2 is excluded. + expect(optionTexts.some((t) => t.includes("glm-5.2"))).toBe(false); + }); + + it("saves the compactionModel on change (Auto → a vision model)", async () => { + const load = fakeLoad({ imageLimit: 10, compactionModel: null }); + const save = fakeSaveOk(); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { + models: ["kimi/k2"], + modelInfo: { "kimi/k2": { vision: true } }, + load: load.impl, + save: save.impl, + }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Compaction model/)).toBeInTheDocument(); + }); + + await user.selectOptions(screen.getByLabelText(/Compaction model/), "kimi/k2"); + + await vi.waitFor(() => { + expect(save.patches).toEqual([{ compactionModel: "kimi/k2" }]); + }); + expect(screen.getByText(/Saved/i)).toBeInTheDocument(); + }); + + it("saves null (Auto) when the auto option is chosen", async () => { + const load = fakeLoad({ imageLimit: 10, compactionModel: "kimi/k2" }); + const save = fakeSaveOk(); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { + models: ["kimi/k2"], + modelInfo: { "kimi/k2": { vision: true } }, + load: load.impl, + save: save.impl, + }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Compaction model/)).toHaveValue("kimi/k2"); + }); + + await user.selectOptions(screen.getByLabelText(/Compaction model/), "__auto__"); + + await vi.waitFor(() => { + expect(save.patches).toEqual([{ compactionModel: null }]); + }); + }); + + it("surfaces a load error", async () => { + const load = vi.fn(async () => ({ ok: false, error: "vision unavailable" }) as const); + render(VisionSettingsView, { + props: { models: [], modelInfo: {}, load, save: fakeSaveOk().impl }, + }); + + await vi.waitFor(() => { + expect(screen.getByText("vision unavailable")).toBeInTheDocument(); + }); + }); + + it("surfaces a save error", async () => { + const load = fakeLoad(); + const save = vi.fn(async () => ({ ok: false, error: "boom" }) as const); + const user = userEvent.setup(); + render(VisionSettingsView, { + props: { models: [], modelInfo: {}, load: load.impl, save }, + }); + + await vi.waitFor(() => { + expect(screen.getByLabelText(/Image limit/)).toHaveValue("10"); + }); + + const input = screen.getByLabelText(/Image limit/); + await user.clear(input); + await user.type(input, "3"); + await user.click(screen.getByRole("button", { name: "Save" })); + + await vi.waitFor(() => { + expect(screen.getByText("boom")).toBeInTheDocument(); + }); + }); +}); diff --git a/src/features/workspaces/adapter/http.test.ts b/src/features/workspaces/adapter/http.test.ts new file mode 100644 index 0000000..18d8939 --- /dev/null +++ b/src/features/workspaces/adapter/http.test.ts @@ -0,0 +1,189 @@ +import { describe, expect, it, vi } from "vitest"; +import { createWorkspaceHttp } from "./http"; + +/** Build a fake `fetch` returning a canned Response. */ +function fakeFetch(responses: Array<{ status?: number; body?: unknown } | Error>): typeof fetch { + let i = 0; + return vi.fn(async () => { + const next = responses[i++]; + if (next === undefined) throw new Error("fakeFetch: no more canned responses"); + if (next instanceof Error) throw next; + const status = next.status ?? 200; + const body = next.body; + return { + ok: status >= 200 && status < 300, + status, + async json() { + return body; + }, + } as Response; + }) as unknown as typeof fetch; +} + +const BASE = "http://x"; + +describe("createWorkspaceHttp", () => { + it("list returns the workspaces", async () => { + const fetchImpl = fakeFetch([ + { + body: { + workspaces: [ + { + id: "a", + title: "A", + defaultCwd: null, + createdAt: 1, + lastActivityAt: 2, + conversationCount: 3, + }, + ], + }, + }, + ]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const list = await http.list(); + expect(list).toHaveLength(1); + expect(list[0]?.id).toBe("a"); + expect(list[0]?.conversationCount).toBe(3); + expect(fetchImpl).toHaveBeenCalledWith(`${BASE}/workspaces`); + }); + + it("list returns [] on a failed response (non-fatal)", async () => { + const http = createWorkspaceHttp(BASE, fakeFetch([{ status: 500 }])); + expect(await http.list()).toEqual([]); + }); + + it("list returns [] on a network error", async () => { + const http = createWorkspaceHttp(BASE, fakeFetch([new Error("network")])); + expect(await http.list()).toEqual([]); + }); + + it("ensure PUTs the id + returns the workspace", async () => { + const ws = { id: "my-ws", title: "my-ws", defaultCwd: null, createdAt: 10, lastActivityAt: 10 }; + const fetchImpl = fakeFetch([{ body: ws }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const result = await http.ensure("my-ws"); + expect(result).toEqual({ ok: true, value: ws }); + expect(fetchImpl).toHaveBeenCalledWith( + `${BASE}/workspaces/my-ws`, + expect.objectContaining({ method: "PUT" }), + ); + }); + + it("ensure surfaces the backend error on a 400 (invalid slug)", async () => { + const http = createWorkspaceHttp( + BASE, + fakeFetch([{ status: 400, body: { error: "invalid slug" } }]), + ); + const result = await http.ensure("UPPER"); + expect(result).toEqual({ ok: false, error: "invalid slug" }); + }); + + it("get returns null on 404", async () => { + const http = createWorkspaceHttp(BASE, fakeFetch([{ status: 404 }])); + expect(await http.get("nope")).toBeNull(); + }); + + it("get returns the workspace on 200", async () => { + const ws = { id: "x", title: "X", defaultCwd: "/home", createdAt: 1, lastActivityAt: 2 }; + const http = createWorkspaceHttp(BASE, fakeFetch([{ body: ws }])); + expect(await http.get("x")).toEqual(ws); + }); + + it("setTitle PUTs the title", async () => { + const ws = { id: "a", title: "Renamed", defaultCwd: null, createdAt: 1, lastActivityAt: 2 }; + const fetchImpl = fakeFetch([{ body: ws }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const result = await http.setTitle("a", "Renamed"); + expect(result).toEqual({ ok: true, value: ws }); + const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0]; + expect(call?.[0]).toBe(`${BASE}/workspaces/a/title`); + expect(JSON.parse(call?.[1]?.body)).toEqual({ title: "Renamed" }); + }); + + it("setDefaultCwd PUTs null to clear", async () => { + const ws = { id: "a", title: "A", defaultCwd: null, createdAt: 1, lastActivityAt: 2 }; + const fetchImpl = fakeFetch([{ body: ws }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + await http.setDefaultCwd("a", null); + const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0]; + expect(call?.[0]).toBe(`${BASE}/workspaces/a/default-cwd`); + expect(JSON.parse(call?.[1]?.body)).toEqual({ defaultCwd: null }); + }); + + it("delete returns closedCount", async () => { + const fetchImpl = fakeFetch([{ body: { workspaceId: "a", closedCount: 4 } }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const result = await http.delete("a"); + expect(result).toEqual({ ok: true, value: { closedCount: 4 } }); + expect(fetchImpl).toHaveBeenCalledWith( + `${BASE}/workspaces/a`, + expect.objectContaining({ method: "DELETE" }), + ); + }); + + it("delete surfaces 409 for 'default'", async () => { + const http = createWorkspaceHttp( + BASE, + fakeFetch([{ status: 409, body: { error: "cannot delete default" } }]), + ); + const result = await http.delete("default"); + expect(result).toEqual({ ok: false, error: "cannot delete default" }); + }); + + it("star PUTs /star with no body and returns the updated workspace", async () => { + const ws = { + id: "a", + title: "A", + defaultCwd: null, + defaultComputerId: null, + starred: true, + createdAt: 1, + lastActivityAt: 2, + }; + const fetchImpl = fakeFetch([{ body: ws }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const result = await http.star("a"); + expect(result).toEqual({ ok: true, value: ws }); + const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0]; + expect(call?.[0]).toBe(`${BASE}/workspaces/a/star`); + expect(call?.[1]).toEqual({ method: "PUT" }); + }); + + it("unstar DELETEs /star with no body and returns the updated workspace", async () => { + const ws = { + id: "a", + title: "A", + defaultCwd: null, + defaultComputerId: null, + starred: false, + createdAt: 1, + lastActivityAt: 2, + }; + const fetchImpl = fakeFetch([{ body: ws }]); + const http = createWorkspaceHttp(BASE, fetchImpl); + const result = await http.unstar("a"); + expect(result).toEqual({ ok: true, value: ws }); + const call = (fetchImpl as unknown as ReturnType<typeof vi.fn>).mock.calls[0]; + expect(call?.[0]).toBe(`${BASE}/workspaces/a/star`); + expect(call?.[1]).toEqual({ method: "DELETE" }); + }); + + it("star surfaces a 400 for an invalid slug", async () => { + const http = createWorkspaceHttp( + BASE, + fakeFetch([{ status: 400, body: { error: "invalid slug" } }]), + ); + const result = await http.star("UPPER"); + expect(result).toEqual({ ok: false, error: "invalid slug" }); + }); + + it("unstar surfaces the backend error on failure", async () => { + const http = createWorkspaceHttp( + BASE, + fakeFetch([{ status: 500, body: { error: "Failed to unstar workspace" } }]), + ); + const result = await http.unstar("a"); + expect(result).toEqual({ ok: false, error: "Failed to unstar workspace" }); + }); +}); diff --git a/src/features/workspaces/adapter/http.ts b/src/features/workspaces/adapter/http.ts new file mode 100644 index 0000000..5673881 --- /dev/null +++ b/src/features/workspaces/adapter/http.ts @@ -0,0 +1,187 @@ +import type { + DeleteWorkspaceResponse, + EnsureWorkspaceRequest, + SetWorkspaceDefaultComputerRequest, + SetWorkspaceDefaultCwdRequest, + SetWorkspaceTitleRequest, + Workspace, + WorkspaceEntry, + WorkspaceListResponse, + WorkspaceResponse, +} from "@dispatch/transport-contract"; + +/** + * Workspace HTTP effects — the injected edge that talks to the backend's + * workspace endpoints. Mirrors the store's fetch pattern: `httpBase` + an + * injected `fetchImpl` (so it is testable without the network). Returns typed + * `WorkspaceResult<T>` (`{ok,value}` | `{ok:false,error}`) for mutating ops so a + * caller can surface the backend's `{ error }` reason; reads return data or a + * safe empty/null on failure (non-fatal — the UI falls back gracefully). + * + * Endpoints ([email protected]): + * - `GET /workspaces` → list + * - `PUT /workspaces/:id` (create-on-miss, idempotent) → ensure + * - `GET /workspaces/:id` (404 → null) → get + * - `PUT /workspaces/:id/title` → rename + * - `PUT /workspaces/:id/default-cwd` → set/clear default cwd + * - `PUT /workspaces/:id/default-computer` → set/clear default computer (SSH handoff #2) + * - `PUT /workspaces/:id/star` (create-on-miss) → star (concurrency priority) + * - `DELETE /workspaces/:id/star` (create-on-miss) → unstar + * - `DELETE /workspaces/:id` (409 for "default") → delete + */ +export type WorkspaceResult<T> = + | { readonly ok: true; readonly value: T } + | { readonly ok: false; readonly error: string }; + +export interface WorkspaceHttp { + list(): Promise<readonly WorkspaceEntry[]>; + ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>; + get(id: string): Promise<Workspace | null>; + setTitle(id: string, title: string): Promise<WorkspaceResult<Workspace>>; + setDefaultCwd(id: string, defaultCwd: string | null): Promise<WorkspaceResult<Workspace>>; + setDefaultComputer(id: string, computerId: string | null): Promise<WorkspaceResult<Workspace>>; + /** Star a workspace (concurrency priority). Create-on-miss; no body. */ + star(id: string): Promise<WorkspaceResult<Workspace>>; + /** Unstar a workspace. Create-on-miss; no body. */ + unstar(id: string): Promise<WorkspaceResult<Workspace>>; + delete(id: string): Promise<WorkspaceResult<{ closedCount: number }>>; +} + +async function errText(res: Response): Promise<string> { + try { + const body = (await res.json()) as { error?: string }; + return body.error ?? `HTTP ${res.status}`; + } catch { + return `HTTP ${res.status}`; + } +} + +export function createWorkspaceHttp(httpBase: string, fetchImpl: typeof fetch): WorkspaceHttp { + return { + async list(): Promise<readonly WorkspaceEntry[]> { + try { + const res = await fetchImpl(`${httpBase}/workspaces`); + if (!res.ok) return []; + const data = (await res.json()) as WorkspaceListResponse; + return data.workspaces; + } catch { + return []; + } + }, + + async ensure(id, body): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body ?? {}), + }); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { + ok: false, + error: err instanceof Error ? err.message : "Workspace request failed", + }; + } + }, + + async get(id): Promise<Workspace | null> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`); + if (res.status === 404 || !res.ok) return null; + return (await res.json()) as WorkspaceResponse; + } catch { + return null; + } + }, + + async setTitle(id, title): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/title`, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ title } satisfies SetWorkspaceTitleRequest), + }); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { ok: false, error: err instanceof Error ? err.message : "Rename failed" }; + } + }, + + async setDefaultCwd(id, defaultCwd): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl( + `${httpBase}/workspaces/${encodeURIComponent(id)}/default-cwd`, + { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ defaultCwd } satisfies SetWorkspaceDefaultCwdRequest), + }, + ); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { ok: false, error: err instanceof Error ? err.message : "Set default cwd failed" }; + } + }, + + async setDefaultComputer(id, computerId): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl( + `${httpBase}/workspaces/${encodeURIComponent(id)}/default-computer`, + { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ computerId } satisfies SetWorkspaceDefaultComputerRequest), + }, + ); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { + ok: false, + error: err instanceof Error ? err.message : "Set default computer failed", + }; + } + }, + + async star(id): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/star`, { + method: "PUT", + }); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { ok: false, error: err instanceof Error ? err.message : "Star failed" }; + } + }, + + async unstar(id): Promise<WorkspaceResult<Workspace>> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}/star`, { + method: "DELETE", + }); + if (!res.ok) return { ok: false, error: await errText(res) }; + return { ok: true, value: (await res.json()) as WorkspaceResponse }; + } catch (err) { + return { ok: false, error: err instanceof Error ? err.message : "Unstar failed" }; + } + }, + + async delete(id): Promise<WorkspaceResult<{ closedCount: number }>> { + try { + const res = await fetchImpl(`${httpBase}/workspaces/${encodeURIComponent(id)}`, { + method: "DELETE", + }); + if (!res.ok) return { ok: false, error: await errText(res) }; + const data = (await res.json()) as DeleteWorkspaceResponse; + return { ok: true, value: { closedCount: data.closedCount } }; + } catch (err) { + return { ok: false, error: err instanceof Error ? err.message : "Delete failed" }; + } + }, + }; +} diff --git a/src/features/workspaces/index.ts b/src/features/workspaces/index.ts new file mode 100644 index 0000000..dab1dec --- /dev/null +++ b/src/features/workspaces/index.ts @@ -0,0 +1,21 @@ +export type { WorkspaceHttp, WorkspaceResult } from "./adapter/http"; +export { createWorkspaceHttp } from "./adapter/http"; +export type { Route } from "./logic/route"; +export { + DEFAULT_WORKSPACE_ID, + isValidSlug, + parsePath, + WORKSPACE_SLUG_RE, + workspacePath, +} from "./logic/route"; +export { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./logic/view-model"; +export type { WorkspaceStore } from "./store.svelte"; +export { createWorkspaceStore } from "./store.svelte"; +export { default as WorkspaceCard } from "./ui/WorkspaceCard.svelte"; +export { default as WorkspacesHome } from "./ui/WorkspacesHome.svelte"; + +/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */ +export const manifest = { + name: "workspaces", + description: "URL-driven conversation grouping with a backend-owned default cwd", +} as const; diff --git a/src/features/workspaces/logic/route.test.ts b/src/features/workspaces/logic/route.test.ts new file mode 100644 index 0000000..96e0ff3 --- /dev/null +++ b/src/features/workspaces/logic/route.test.ts @@ -0,0 +1,77 @@ +import { describe, expect, it } from "vitest"; +import { + DEFAULT_WORKSPACE_ID, + isValidSlug, + parsePath, + WORKSPACE_SLUG_RE, + workspacePath, +} from "./route"; + +describe("parsePath", () => { + it("treats the root path as home", () => { + expect(parsePath("/")).toEqual({ kind: "home" }); + expect(parsePath("")).toEqual({ kind: "home" }); + }); + + it("trims surrounding slashes", () => { + expect(parsePath("//")).toEqual({ kind: "home" }); + expect(parsePath("/my-ws/")).toEqual({ kind: "workspace", id: "my-ws" }); + }); + + it("parses a single segment as a workspace id", () => { + expect(parsePath("/default")).toEqual({ kind: "workspace", id: "default" }); + expect(parsePath("/my-workspace")).toEqual({ kind: "workspace", id: "my-workspace" }); + expect(parsePath("/ws1")).toEqual({ kind: "workspace", id: "ws1" }); + }); + + it("takes only the first segment of a deeper path", () => { + expect(parsePath("/foo/bar")).toEqual({ kind: "workspace", id: "foo" }); + expect(parsePath("/foo/bar/baz")).toEqual({ kind: "workspace", id: "foo" }); + }); + + it("URL-decodes the segment", () => { + expect(parsePath("/my%20ws")).toEqual({ kind: "workspace", id: "my ws" }); + }); + + it("does not validate the slug — an invalid id is still a workspace route", () => { + expect(parsePath("/UPPER")).toEqual({ kind: "workspace", id: "UPPER" }); + expect(parsePath("/has space")).toEqual({ kind: "workspace", id: "has space" }); + }); +}); + +describe("isValidSlug", () => { + it("accepts lowercase alphanumeric + internal hyphens", () => { + expect(isValidSlug("default")).toBe(true); + expect(isValidSlug("my-workspace")).toBe(true); + expect(isValidSlug("a")).toBe(true); + expect(isValidSlug("ws-1")).toBe(true); + }); + + it("accepts up to 40 chars", () => { + expect(isValidSlug("a".repeat(40))).toBe(true); + }); + + it("rejects empty and too-long", () => { + expect(isValidSlug("")).toBe(false); + expect(isValidSlug("a".repeat(41))).toBe(false); + }); + + it("rejects uppercase, spaces, and leading/trailing hyphens", () => { + expect(isValidSlug("MyWS")).toBe(false); + expect(isValidSlug("has space")).toBe(false); + expect(isValidSlug("-leading")).toBe(false); + expect(isValidSlug("trailing-")).toBe(false); + expect(isValidSlug("double--hyphen")).toBe(true); // internal doubles are allowed by the regex + }); + + it("WORKSPACE_SLUG_RE matches the default id", () => { + expect(WORKSPACE_SLUG_RE.test(DEFAULT_WORKSPACE_ID)).toBe(true); + }); +}); + +describe("workspacePath", () => { + it("builds the URL path for a workspace id", () => { + expect(workspacePath("default")).toBe("/default"); + expect(workspacePath("my-ws")).toBe("/my-ws"); + }); +}); diff --git a/src/features/workspaces/logic/route.ts b/src/features/workspaces/logic/route.ts new file mode 100644 index 0000000..015c6d6 --- /dev/null +++ b/src/features/workspaces/logic/route.ts @@ -0,0 +1,63 @@ +/** + * Pure routing logic for the workspaces feature — zero DOM, zero effects, zero Svelte. + * + * The app is URL-driven: the root path `/` is the workspaces HOME (lists all + * workspaces); a single path segment `/<id>` opens the workspace with that id + * (the slug). This module holds the pure mapping from a pathname to a `Route`, + * plus the slug-validation rules mirrored from the backend's `PUT /workspaces/:id`. + */ + +/** + * The workspace slug regex (mirrors the backend's `PUT /workspaces/:id` + * validation): 1–40 chars, lowercase alphanumeric with internal hyphens only + * (no leading/trailing hyphen). `"default"` matches and is a valid (but + * non-deletable) id. + */ +export const WORKSPACE_SLUG_RE = /^[a-z0-9](?:[a-z0-9-]{0,38}[a-z0-9])?$/; + +/** A route derived from the URL path. */ +export type Route = { readonly kind: "home" } | { readonly kind: "workspace"; readonly id: string }; + +/** The reserved id of the always-present fallback workspace. */ +export const DEFAULT_WORKSPACE_ID = "default"; + +/** + * Parse a pathname into a `Route`. `/` (or empty) → home; a leading segment → + * the workspace with that id (URL-decoded, surrounding slashes trimmed). Deeper + * paths take their FIRST segment (nested routes are not used in v1). Pure: + * pathname in, route out. Does NOT validate the slug — an invalid id still + * produces a `workspace` route; the backend's ensure call rejects it (the FE + * surfaces the error). + */ +export function parsePath(pathname: string): Route { + const trimmed = pathname.replace(/^\/+|\/+$/g, ""); + if (trimmed === "") return { kind: "home" }; + const first = trimmed.split("/")[0] ?? ""; + const id = safeDecode(first); + if (id === "") return { kind: "home" }; + return { kind: "workspace", id }; +} + +/** + * Whether a slug is valid for a NEW workspace (the form the backend accepts). + * Used by the home view's "new workspace" input before navigating. + */ +export function isValidSlug(slug: string): boolean { + return WORKSPACE_SLUG_RE.test(slug); +} + +/** + * Build the URL path for a workspace id. Used when navigating to / linking a + * workspace. Pure: id in, path string out. + */ +export function workspacePath(id: string): string { + return `/${id}`; +} + +function safeDecode(segment: string): string { + try { + return decodeURIComponent(segment); + } catch { + return segment; + } +} diff --git a/src/features/workspaces/logic/view-model.test.ts b/src/features/workspaces/logic/view-model.test.ts new file mode 100644 index 0000000..44d2f31 --- /dev/null +++ b/src/features/workspaces/logic/view-model.test.ts @@ -0,0 +1,179 @@ +import type { WorkspaceEntry } from "@dispatch/wire"; +import { describe, expect, it } from "vitest"; +import { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./view-model"; + +describe("relativeTime", () => { + const now = 1_000_000_000_000; // 2001-09-09 + + it("is 'now' within a minute", () => { + expect(relativeTime(now, now)).toBe("now"); + expect(relativeTime(now - 59_000, now)).toBe("now"); + }); + + it("is minutes under an hour", () => { + expect(relativeTime(now - 5 * 60_000, now)).toBe("5m"); + expect(relativeTime(now - 59 * 60_000, now)).toBe("59m"); + }); + + it("is hours under a day", () => { + expect(relativeTime(now - 2 * 60 * 60_000, now)).toBe("2h"); + }); + + it("is days under a week", () => { + expect(relativeTime(now - 3 * 24 * 60 * 60_000, now)).toBe("3d"); + }); + + it("is a short date beyond a week", () => { + // 7+ days ago: just check it is a MM/DD string. + const s = relativeTime(now - 10 * 24 * 60 * 60_000, now); + expect(s).toMatch(/^\d{2}\/\d{2}$/); + }); +}); + +describe("pageTitle", () => { + // Minimal valid WorkspaceEntry (the irrelevant metadata is zeroed). + const ws = (id: string, title: string): WorkspaceEntry => ({ + id, + title, + defaultCwd: null, + defaultComputerId: null, + starred: false, + createdAt: 0, + lastActivityAt: 0, + conversationCount: 0, + }); + + it("is 'Dispatch' for the home route", () => { + expect(pageTitle({ kind: "home" }, [])).toBe("Dispatch"); + expect(pageTitle({ kind: "home" }, [ws("default", "Default")])).toBe("Dispatch"); + }); + + it("is 'Dispatch: {title}' for a workspace with a display title", () => { + const list = [ws("default", "Default"), ws("my-ws", "My Workspace")]; + expect(pageTitle({ kind: "workspace", id: "my-ws" }, list)).toBe("Dispatch: My Workspace"); + }); + + it("falls back to the slug (id) until the list has loaded the workspace", () => { + expect(pageTitle({ kind: "workspace", id: "pending" }, [])).toBe("Dispatch: pending"); + }); + + it("uses the id as the title when it was never customized (defaults to id)", () => { + const list = [ws("default", "default")]; + expect(pageTitle({ kind: "workspace", id: "default" }, list)).toBe("Dispatch: default"); + }); + + it("matches by id, not title", () => { + const list = [ws("a", "shared-title"), ws("b", "shared-title")]; + expect(pageTitle({ kind: "workspace", id: "b" }, list)).toBe("Dispatch: shared-title"); + }); +}); + +describe("sortWorkspaces", () => { + const entry = (id: string, starred: boolean, lastActivityAt: number): WorkspaceEntry => ({ + id, + title: id, + defaultCwd: null, + defaultComputerId: null, + starred, + createdAt: 0, + lastActivityAt, + conversationCount: 0, + }); + + it("puts starred workspaces before unstarred", () => { + const list = [entry("plain", false, 9_000), entry("star", true, 1_000)]; + expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["star", "plain"]); + }); + + it("within the starred group, sorts by lastActivityAt desc", () => { + const list = [ + entry("old-star", true, 1_000), + entry("new-star", true, 5_000), + entry("plain", false, 9_000), + ]; + expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["new-star", "old-star", "plain"]); + }); + + it("within the unstarred group, sorts by lastActivityAt desc", () => { + const list = [ + entry("star", true, 1_000), + entry("old-plain", false, 1_000), + entry("new-plain", false, 5_000), + ]; + expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["star", "new-plain", "old-plain"]); + }); + + it("returns a new array (does not mutate the input)", () => { + const list = [entry("plain", false, 9_000), entry("star", true, 1_000)]; + const sorted = sortWorkspaces(list); + expect(sorted).not.toBe(list); + // Input order is preserved (not mutated). + expect(list.map((w) => w.id)).toEqual(["plain", "star"]); + expect(sorted.map((w) => w.id)).toEqual(["star", "plain"]); + }); + + it("handles an empty list", () => { + expect(sortWorkspaces([])).toEqual([]); + }); + + it("is stable for equal lastActivityAt within a group", () => { + const list = [ + entry("first", false, 5_000), + entry("second", false, 5_000), + entry("third", false, 5_000), + ]; + expect(sortWorkspaces(list).map((w) => w.id)).toEqual(["first", "second", "third"]); + }); +}); + +describe("applyStarred", () => { + const entry = (id: string, starred: boolean): WorkspaceEntry => ({ + id, + title: id, + defaultCwd: null, + defaultComputerId: null, + starred, + createdAt: 0, + lastActivityAt: 0, + conversationCount: 0, + }); + + it("sets the named workspace's starred flag", () => { + const list = [entry("a", false), entry("b", false)]; + const next = applyStarred(list, "b", true); + expect(next.map((w) => [w.id, w.starred])).toEqual([ + ["a", false], + ["b", true], + ]); + }); + + it("returns a new array (does not mutate the input)", () => { + const list = [entry("a", false)]; + const next = applyStarred(list, "a", true); + expect(next).not.toBe(list); + expect(list[0]?.starred).toBe(false); + expect(next[0]?.starred).toBe(true); + }); + + it("leaves other entries referentially unchanged (only the target is replaced)", () => { + const a = entry("a", false); + const b = entry("b", false); + const next = applyStarred([a, b], "b", true); + expect(next[0]).toBe(a); + expect(next[1]).not.toBe(b); + }); + + it("leaves the list unchanged when the id is absent (not yet loaded)", () => { + const list = [entry("a", false)]; + const next = applyStarred(list, "missing", true); + expect(next.map((w) => [w.id, w.starred])).toEqual([["a", false]]); + }); + + it("can revert by re-applying the previous value", () => { + const list = [entry("a", false)]; + const optimistic = applyStarred(list, "a", true); + expect(optimistic[0]?.starred).toBe(true); + const reverted = applyStarred(optimistic, "a", false); + expect(reverted[0]?.starred).toBe(false); + }); +}); diff --git a/src/features/workspaces/logic/view-model.ts b/src/features/workspaces/logic/view-model.ts new file mode 100644 index 0000000..b994b7c --- /dev/null +++ b/src/features/workspaces/logic/view-model.ts @@ -0,0 +1,71 @@ +/** + * Pure view-model helpers for the workspaces feature — zero DOM, zero effects. + */ + +import type { WorkspaceEntry } from "@dispatch/wire"; +import type { Route } from "./route"; + +/** + * The browser tab / page (`document.title`) text for a route. The home route + * (`/`) is "Dispatch"; a workspace route (`/<id>`) is "Dispatch: {title}", + * using the workspace's display title and falling back to the URL slug (`id`) + * until the workspace list has loaded it — the backend defaults a workspace's + * title to its id, so the slug is the correct transient value. Pure: route + + * workspaces in, string out. + */ +export function pageTitle(route: Route, workspaces: readonly WorkspaceEntry[]): string { + if (route.kind === "home") return "Dispatch"; + const ws = workspaces.find((w) => w.id === route.id); + return `Dispatch: ${ws?.title ?? route.id}`; +} + +/** + * Sort workspaces for display: starred first, then most-recently-active. Pure: + * the list in, a NEW sorted array out (the input is not mutated). Starred + * workspaces jump to the top (the FE-side echo of their concurrency-priority); + * within each group (starred / not) `lastActivityAt` desc breaks ties, matching + * the backend's list ordering. Stable for equal `lastActivityAt`. + */ +export function sortWorkspaces<T extends WorkspaceEntry>(workspaces: readonly T[]): T[] { + return [...workspaces].sort((a, b) => { + if (a.starred !== b.starred) return a.starred ? -1 : 1; + return b.lastActivityAt - a.lastActivityAt; + }); +} + +/** + * Return a NEW list with the one workspace's `starred` flag set (immutably — + * the entry is replaced, the rest keep their identity). Pure: the optimistic + * star/unstar transformation shared by the apply + the error revert. A missing + * `id` (not yet in the list — e.g. starring a workspace the home view hasn't + * loaded) leaves the list unchanged; the backend's create-on-miss still applies + * server-side and a subsequent refresh reconciles. + */ +export function applyStarred<T extends WorkspaceEntry>( + workspaces: readonly T[], + id: string, + starred: boolean, +): T[] { + return workspaces.map((w) => (w.id === id ? { ...w, starred } : w)); +} + +/** + * Format an epoch-ms timestamp as a short relative string ("now", "3m", "2h", + * "5d", or a date). Pure: `now` + `then` in, string out. Future timestamps + * (a workspace just created) read as "now". + */ +export function relativeTime(then: number, now: number): string { + const diff = now - then; + if (diff < 60_000) return "now"; + const mins = Math.floor(diff / 60_000); + if (mins < 60) return `${mins}m`; + const hours = Math.floor(mins / 60); + if (hours < 24) return `${hours}h`; + const days = Math.floor(hours / 24); + if (days < 7) return `${days}d`; + // Beyond a week: a short date (MM/DD). Uses UTC parts for determinism in tests. + const d = new Date(then); + const month = String(d.getUTCMonth() + 1).padStart(2, "0"); + const day = String(d.getUTCDate()).padStart(2, "0"); + return `${month}/${day}`; +} diff --git a/src/features/workspaces/store.svelte.ts b/src/features/workspaces/store.svelte.ts new file mode 100644 index 0000000..22d73b5 --- /dev/null +++ b/src/features/workspaces/store.svelte.ts @@ -0,0 +1,114 @@ +import type { EnsureWorkspaceRequest } from "@dispatch/transport-contract"; +import type { Workspace, WorkspaceEntry } from "@dispatch/wire"; +import type { WorkspaceHttp, WorkspaceResult } from "./adapter/http"; +import { applyStarred, sortWorkspaces } from "./logic/view-model"; + +/** + * Workspace store — a thin reactive wrapper over the pure HTTP edge. Owns the + * list + loading/error state; mutations call the injected `WorkspaceHttp` and + * refresh the list. State is per-instance (no ambient store); subscriptions are + * owned by the composition root. + */ +export interface WorkspaceStore { + /** + * All workspaces, sorted for display: starred first (their FE-side echo of + * concurrency-priority), then most-recently-active. The backing list is the + * backend's `lastActivityAt`-desc order; this getter re-sorts reactively. + */ + readonly list: readonly WorkspaceEntry[]; + readonly loading: boolean; + readonly error: string | null; + /** Refresh the list from the backend. */ + refresh(): Promise<void>; + /** `PUT /workspaces/:id` (create-on-miss). Returns the workspace or an error. */ + ensure(id: string, body?: EnsureWorkspaceRequest): Promise<WorkspaceResult<Workspace>>; + /** Rename a workspace (display only; id unchanged). */ + rename(id: string, title: string): Promise<WorkspaceResult<Workspace>>; + /** Set/clear a workspace's default cwd. */ + setDefaultCwd(id: string, defaultCwd: string | null): Promise<WorkspaceResult<Workspace>>; + /** Set/clear a workspace's default computer (SSH `Host` alias; null = local). */ + setDefaultComputer(id: string, computerId: string | null): Promise<WorkspaceResult<Workspace>>; + /** + * Toggle a workspace's star (concurrency priority). Optimistic: the local + * `starred` flag flips immediately and the sorted list re-orders; on error it + * reverts to the prior value. No full refresh on success (avoids flicker). + */ + setStarred(id: string, starred: boolean): Promise<WorkspaceResult<Workspace>>; + /** Delete a workspace (closes its conversations, reassigns to "default"). */ + remove(id: string): Promise<WorkspaceResult<{ closedCount: number }>>; +} + +export function createWorkspaceStore(http: WorkspaceHttp): WorkspaceStore { + let list = $state<readonly WorkspaceEntry[]>([]); + // Sorted view (starred first, then most-recent) — derived so it recomputes + // only when the backing list changes, not on every read. + let sorted = $derived(sortWorkspaces(list)); + let loading = $state(false); + let error = $state<string | null>(null); + + return { + get list(): readonly WorkspaceEntry[] { + return sorted; + }, + get loading(): boolean { + return loading; + }, + get error(): string | null { + return error; + }, + + async refresh(): Promise<void> { + loading = true; + error = null; + try { + list = await http.list(); + } catch (err) { + error = err instanceof Error ? err.message : "Failed to load workspaces"; + } finally { + loading = false; + } + }, + + async ensure(id, body): Promise<WorkspaceResult<Workspace>> { + const result = await http.ensure(id, body); + if (result.ok) void this.refresh(); + return result; + }, + + async rename(id, title): Promise<WorkspaceResult<Workspace>> { + const result = await http.setTitle(id, title); + if (result.ok) void this.refresh(); + return result; + }, + + async setDefaultCwd(id, defaultCwd): Promise<WorkspaceResult<Workspace>> { + const result = await http.setDefaultCwd(id, defaultCwd); + if (result.ok) void this.refresh(); + return result; + }, + + async setDefaultComputer(id, computerId): Promise<WorkspaceResult<Workspace>> { + const result = await http.setDefaultComputer(id, computerId); + if (result.ok) void this.refresh(); + return result; + }, + + async setStarred(id, starred): Promise<WorkspaceResult<Workspace>> { + const prev = list.find((w) => w.id === id)?.starred ?? false; + // Optimistic: flip immediately (the sorted getter re-orders reactively). + list = applyStarred(list, id, starred); + const result = starred ? await http.star(id) : await http.unstar(id); + if (!result.ok) { + // Revert the optimistic flip on failure. + list = applyStarred(list, id, prev); + } + return result; + }, + + async remove(id): Promise<WorkspaceResult<{ closedCount: number }>> { + const result = await http.delete(id); + if (result.ok) void this.refresh(); + return result; + }, + }; +} diff --git a/src/features/workspaces/store.test.ts b/src/features/workspaces/store.test.ts new file mode 100644 index 0000000..4caac9f --- /dev/null +++ b/src/features/workspaces/store.test.ts @@ -0,0 +1,145 @@ +import type { Workspace, WorkspaceEntry } from "@dispatch/wire"; +import { describe, expect, it, vi } from "vitest"; +import type { WorkspaceResult } from "./adapter/http"; +import { createWorkspaceStore } from "./store.svelte"; + +function entry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry { + return { + id: "a", + title: "A", + defaultCwd: null, + defaultComputerId: null, + starred: false, + createdAt: 1, + lastActivityAt: 2, + conversationCount: 0, + ...overrides, + }; +} + +/** A fake `WorkspaceHttp` with stubbed star/unstar + a controllable list. */ +function fakeHttp(opts: { + list?: readonly WorkspaceEntry[]; + star?: (id: string) => Promise<WorkspaceResult<Workspace>>; + unstar?: (id: string) => Promise<WorkspaceResult<Workspace>>; +}) { + return { + list: vi.fn(async (): Promise<readonly WorkspaceEntry[]> => opts.list ?? []), + ensure: vi.fn(), + get: vi.fn(), + setTitle: vi.fn(), + setDefaultCwd: vi.fn(), + setDefaultComputer: vi.fn(), + star: + opts.star ?? + vi.fn( + async (id: string): Promise<WorkspaceResult<Workspace>> => ({ + ok: true, + value: entry({ id, starred: true }), + }), + ), + unstar: + opts.unstar ?? + vi.fn( + async (id: string): Promise<WorkspaceResult<Workspace>> => ({ + ok: true, + value: entry({ id, starred: false }), + }), + ), + delete: vi.fn(), + }; +} + +describe("createWorkspaceStore — setStarred", () => { + it("optimistically flips starred to true before the request resolves", async () => { + const http = fakeHttp({ list: [entry({ id: "a", starred: false })] }); + const store = createWorkspaceStore(http); + await store.refresh(); + + let observedDuringCall = false; + http.star = vi.fn(async (_id: string): Promise<WorkspaceResult<Workspace>> => { + // While the request is in flight, the store already shows the new state. + observedDuringCall = store.list[0]?.starred === true; + return { ok: true, value: entry({ id: "a", starred: true }) }; + }); + + await store.setStarred("a", true); + + expect(observedDuringCall).toBe(true); + expect(http.star).toHaveBeenCalledWith("a"); + expect(store.list[0]?.starred).toBe(true); + }); + + it("calls unstar (DELETE) when starring false", async () => { + const http = fakeHttp({ list: [entry({ id: "a", starred: true })] }); + const store = createWorkspaceStore(http); + await store.refresh(); + + await store.setStarred("a", false); + + expect(http.unstar).toHaveBeenCalledWith("a"); + expect(http.star).not.toHaveBeenCalled(); + expect(store.list[0]?.starred).toBe(false); + }); + + it("reverts the optimistic flip on error", async () => { + const http = fakeHttp({ list: [entry({ id: "a", starred: false })] }); + const store = createWorkspaceStore(http); + await store.refresh(); + + http.star = vi.fn( + async (): Promise<WorkspaceResult<Workspace>> => ({ ok: false, error: "boom" }), + ); + + const result = await store.setStarred("a", true); + + expect(result).toEqual({ ok: false, error: "boom" }); + // Reverted to the prior value. + expect(store.list[0]?.starred).toBe(false); + }); + + it("does not set the store-wide load error on a star failure", async () => { + const http = fakeHttp({ list: [entry({ id: "a", starred: false })] }); + const store = createWorkspaceStore(http); + await store.refresh(); + + http.star = vi.fn( + async (): Promise<WorkspaceResult<Workspace>> => ({ ok: false, error: "boom" }), + ); + await store.setStarred("a", true); + + expect(store.error).toBeNull(); + }); + + it("re-sorts so starred workspaces bubble to the top", async () => { + const http = fakeHttp({ + list: [ + entry({ id: "plain", starred: false, lastActivityAt: 9_000 }), + entry({ id: "star", starred: false, lastActivityAt: 1_000 }), + ], + }); + const store = createWorkspaceStore(http); + await store.refresh(); + + // Before: backend order (most-active first). + expect(store.list.map((w) => w.id)).toEqual(["plain", "star"]); + + await store.setStarred("star", true); + + // After: starred jumps above the more-recent unstarred workspace. + expect(store.list.map((w) => w.id)).toEqual(["star", "plain"]); + }); + + it("treats a missing id as not-starred and still calls through (create-on-miss)", async () => { + const http = fakeHttp({ list: [] }); + const store = createWorkspaceStore(http); + await store.refresh(); + + const result = await store.setStarred("ghost", true); + + expect(result.ok).toBe(true); + expect(http.star).toHaveBeenCalledWith("ghost"); + // The list is unchanged (the workspace wasn't loaded); a refresh reconciles. + expect(store.list).toHaveLength(0); + }); +}); diff --git a/src/features/workspaces/ui/WorkspaceCard.svelte b/src/features/workspaces/ui/WorkspaceCard.svelte new file mode 100644 index 0000000..6de4109 --- /dev/null +++ b/src/features/workspaces/ui/WorkspaceCard.svelte @@ -0,0 +1,279 @@ +<script lang="ts"> + import type { ComputerEntry, WorkspaceEntry } from "@dispatch/wire"; + import { untrack } from "svelte"; + import type { WorkspaceStore } from "../store.svelte"; + import { relativeTime } from "../logic/view-model"; + import { workspacePath } from "../logic/route"; + import ComputerSelect from "../../computer/ui/ComputerSelect.svelte"; + + let { + ws, + store, + onNavigate, + computers, + hasActive, + }: { + ws: WorkspaceEntry; + store: WorkspaceStore; + onNavigate: (path: string) => void; + /** Discovered computers (`GET /computers`), for the default-computer dropdown. */ + computers: readonly ComputerEntry[]; + /** + * Optional port: returns whether the workspace has at least one active + * (generating / queued) conversation — drives a loading-dots indicator on + * the card. Wired by the composition root to the app store's + * `workspaceHasActiveConversations`. Absent → no indicator (e.g. tests). + */ + hasActive?: (workspaceId: string) => boolean; + } = $props(); + + // Whether at least one conversation in this workspace is currently active + // (generating). Reactive: the composition-root port reads the app store's + // reactive tab set + lifecycle statuses, so this re-derives on change. + const active = $derived(hasActive?.(ws.id) ?? false); + + // ── Title: double-click to rename inline ────────────────────────────────── + let editingTitle = $state(false); + let titleDraft = $state(""); + let titleInput = $state<HTMLInputElement | undefined>(); + let titleError = $state<string | null>(null); + + function startEditTitle(): void { + titleDraft = ws.title; + titleError = null; + editingTitle = true; + queueMicrotask(() => titleInput?.focus()); + } + + async function saveTitle(): Promise<void> { + if (!editingTitle) return; + const title = titleDraft.trim(); + editingTitle = false; + if (title === "" || title === ws.title) return; + const result = await store.rename(ws.id, title); + if (!result.ok) titleError = result.error; + } + + function cancelTitle(): void { + editingTitle = false; + titleError = null; + } + + // ── Default cwd: inline input ───────────────────────────────────────────── + let cwdDraft = $state(untrack(() => ws.defaultCwd ?? "")); + // Reseed when the backend value changes (e.g., after a save or an external + // refresh). Mid-edit (same value) does NOT re-run, so typing is never clobbered. + $effect(() => { + cwdDraft = ws.defaultCwd ?? ""; + }); + + const cwdDirty = $derived(cwdDraft.trim() !== (ws.defaultCwd ?? "")); + let savingCwd = $state(false); + let cwdError = $state<string | null>(null); + + async function saveCwd(): Promise<void> { + if (!cwdDirty || savingCwd) return; + savingCwd = true; + cwdError = null; + const cwd = cwdDraft.trim(); + const result = await store.setDefaultCwd(ws.id, cwd === "" ? null : cwd); + savingCwd = false; + if (!result.ok) cwdError = result.error; + } + + // ── Default computer: dropdown (Local / discovered SSH aliases) ──────────── + let savingComputer = $state(false); + let computerError = $state<string | null>(null); + + async function saveComputer(computerId: string | null): Promise<void> { + if (savingComputer) return; + // No-op when unchanged (the select only fires on a real change, but guard). + if (computerId === (ws.defaultComputerId ?? null)) return; + savingComputer = true; + computerError = null; + const result = await store.setDefaultComputer(ws.id, computerId); + savingComputer = false; + if (!result.ok) computerError = result.error; + } + + // ── Star (concurrency priority) ────────────────────────────────────────────── + let savingStar = $state(false); + let starError = $state<string | null>(null); + + async function toggleStar(): Promise<void> { + if (savingStar) return; + savingStar = true; + starError = null; + try { + // Optimistic: the store flips `starred` immediately and re-sorts; revert + // on error is handled there. We read `ws.starred` for the target value. + const result = await store.setStarred(ws.id, !ws.starred); + if (!result.ok) starError = result.error; + } catch (err) { + // A throw (e.g. a rejected effect) — surface it; the store already + // reverted the optimistic flip if it got far enough to apply it. + starError = err instanceof Error ? err.message : "Star toggle failed"; + } finally { + savingStar = false; + } + } + + // ── Delete ───────────────────────────────────────────────────────────────── + let deleting = $state(false); + + async function handleDelete(): Promise<void> { + if ( + !window.confirm( + `Delete workspace "${ws.title}"? Its conversations will be closed and moved to "default".`, + ) + ) { + return; + } + deleting = true; + await store.remove(ws.id); + deleting = false; + } +</script> + +<li class="flex flex-col gap-2 rounded-box border border-primary bg-primary/10 p-3"> + <div class="flex items-center gap-2"> + {#if editingTitle} + <input + bind:this={titleInput} + bind:value={titleDraft} + class="input input-bordered input-sm flex-1" + aria-label="Workspace title" + onkeydown={(e) => { + if (e.key === "Enter") saveTitle(); + else if (e.key === "Escape") cancelTitle(); + }} + onblur={saveTitle} + /> + {:else} + <!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events --> + <span + class="flex-1 cursor-default truncate font-semibold" + title="Double-click to rename" + ondblclick={startEditTitle}>{ws.title}</span + > + {/if} + {#if active} + <span + class="loading loading-dots loading-xs shrink-0 text-primary" + aria-label="Workspace has active conversations" + title="A conversation in this workspace is generating"></span + > + {/if} + <span class="font-mono text-xs opacity-50">/{ws.id}</span> + <button + type="button" + class="btn btn-ghost btn-xs px-1" + disabled={savingStar} + aria-pressed={ws.starred} + aria-label={ws.starred ? "Unstar workspace" : "Star workspace"} + title={ws.starred + ? "Starred — its agents get concurrency priority. Click to unstar." + : "Star this workspace to give its agents concurrency priority."} + onclick={toggleStar} + > + {#if savingStar} + <span class="loading loading-spinner loading-xs"></span> + {:else if ws.starred} + <span class="text-warning" aria-hidden="true">★</span> + {:else} + <span class="opacity-40" aria-hidden="true">☆</span> + {/if} + </button> + <span class="ml-auto text-xs opacity-50"> + {ws.conversationCount} + {ws.conversationCount === 1 ? "conversation" : "conversations"} + · {relativeTime(ws.lastActivityAt, Date.now())} + </span> + <button + type="button" + class="btn btn-ghost btn-xs" + disabled={deleting} + title="Delete workspace" + aria-label="Delete workspace" + onclick={handleDelete} + > + {#if deleting} + <span class="loading loading-spinner loading-xs"></span> + {:else} + ✕ + {/if} + </button> + </div> + + {#if titleError} + <p class="text-xs text-error">{titleError}</p> + {/if} + + {#if starError} + <p class="text-xs text-error">{starError}</p> + {/if} + + <div class="flex items-center gap-2"> + <span class="w-8 shrink-0 text-xs opacity-60">cwd</span> + <input + type="text" + class="input input-bordered input-sm flex-1 font-mono text-xs" + placeholder="inherits the server default" + bind:value={cwdDraft} + aria-label="Default working directory" + onkeydown={(e) => { + if (e.key === "Enter") saveCwd(); + }} + /> + <button + type="button" + class="btn btn-primary btn-xs" + disabled={!cwdDirty || savingCwd} + onclick={saveCwd} + > + {#if savingCwd} + <span class="loading loading-spinner loading-xs"></span> + {:else} + Set + {/if} + </button> + </div> + + <div class="flex items-center gap-2"> + <span class="w-8 shrink-0 text-xs opacity-60">ssh</span> + <ComputerSelect + value={ws.defaultComputerId} + {computers} + disabled={savingComputer} + onSelect={saveComputer} + /> + {#if savingComputer} + <span class="loading loading-spinner loading-xs shrink-0"></span> + {/if} + </div> + + <div class="flex justify-start"> + <a + class="btn" + href={workspacePath(ws.id)} + onclick={(e) => { + e.preventDefault(); + onNavigate(workspacePath(ws.id)); + }} + > + Open + </a> + </div> + + {#if cwdError} + <p class="text-xs text-error">{cwdError}</p> + {:else if !cwdDirty && !ws.defaultCwd} + <p class="text-xs opacity-50">No default cwd set — conversations inherit the server default.</p> + {/if} + + {#if computerError} + <p class="text-xs text-error">{computerError}</p> + {:else if !ws.defaultComputerId} + <p class="text-xs opacity-50">No default computer — conversations run locally (no SSH).</p> + {/if} +</li> diff --git a/src/features/workspaces/ui/WorkspaceCard.test.ts b/src/features/workspaces/ui/WorkspaceCard.test.ts new file mode 100644 index 0000000..72f4e60 --- /dev/null +++ b/src/features/workspaces/ui/WorkspaceCard.test.ts @@ -0,0 +1,305 @@ +import type { WorkspaceEntry } from "@dispatch/wire"; +import { render, screen } from "@testing-library/svelte"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; +import type { WorkspaceResult } from "../adapter/http"; +import type { WorkspaceStore } from "../store.svelte"; +import WorkspaceCard from "./WorkspaceCard.svelte"; + +function fakeEntry(overrides: Partial<WorkspaceEntry> = {}): WorkspaceEntry { + return { + id: "my-ws", + title: "My Workspace", + defaultCwd: null, + defaultComputerId: null, + starred: false, + createdAt: 1, + lastActivityAt: 2, + conversationCount: 3, + ...overrides, + }; +} + +/** A fake store that records calls + resolves ok. */ +function fakeStore() { + return { + rename: vi.fn( + async (id: string, _title: string): Promise<WorkspaceResult<WorkspaceEntry>> => ({ + ok: true, + value: fakeEntry({ id, title: _title }), + }), + ), + setDefaultCwd: vi.fn( + async (id: string, defaultCwd: string | null): Promise<WorkspaceResult<WorkspaceEntry>> => ({ + ok: true, + value: fakeEntry({ id, defaultCwd }), + }), + ), + setDefaultComputer: vi.fn( + async (id: string, computerId: string | null): Promise<WorkspaceResult<WorkspaceEntry>> => ({ + ok: true, + value: fakeEntry({ id, defaultComputerId: computerId }), + }), + ), + setStarred: vi.fn( + async (id: string, starred: boolean): Promise<WorkspaceResult<WorkspaceEntry>> => ({ + ok: true, + value: fakeEntry({ id, starred }), + }), + ), + remove: vi.fn( + async (): Promise<WorkspaceResult<{ closedCount: number }>> => ({ + ok: true, + value: { closedCount: 0 }, + }), + ), + }; +} + +describe("WorkspaceCard", () => { + it("renders the title, slug, and an Open link", () => { + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] }, + }); + expect(screen.getByText("My Workspace")).toBeInTheDocument(); + expect(screen.getByText("/my-ws")).toBeInTheDocument(); + expect(screen.getByRole("link", { name: "Open" })).toHaveAttribute("href", "/my-ws"); + }); + + it("double-clicking the title reveals an edit input", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.dblClick(screen.getByText("My Workspace")); + expect(screen.getByLabelText("Workspace title")).toHaveValue("My Workspace"); + }); + + it("renames via the store on Enter", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.dblClick(screen.getByText("My Workspace")); + const input = screen.getByLabelText("Workspace title"); + await user.clear(input); + await user.type(input, "Renamed{Enter}"); + + expect(store.rename).toHaveBeenCalledWith("my-ws", "Renamed"); + }); + + it("enables Set only when the cwd differs, then saves it", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ defaultCwd: "/old" }), store, onNavigate: vi.fn(), computers: [] }, + }); + + const input = screen.getByLabelText("Default working directory"); + expect(input).toHaveValue("/old"); + expect(screen.getByRole("button", { name: "Set" })).toBeDisabled(); + + await user.clear(input); + await user.type(input, "/new/path"); + expect(screen.getByRole("button", { name: "Set" })).toBeEnabled(); + + await user.click(screen.getByRole("button", { name: "Set" })); + expect(store.setDefaultCwd).toHaveBeenCalledWith("my-ws", "/new/path"); + }); + + it("clears the cwd to null when saved empty (inherits the server default)", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ defaultCwd: "/old" }), store, onNavigate: vi.fn(), computers: [] }, + }); + + const input = screen.getByLabelText("Default working directory"); + await user.clear(input); + await user.click(screen.getByRole("button", { name: "Set" })); + + expect(store.setDefaultCwd).toHaveBeenCalledWith("my-ws", null); + }); + + it("the Open link navigates to the workspace in the same tab (SPA navigation, no new tab)", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + const onNavigate = vi.fn(); + render(WorkspaceCard, { props: { ws: fakeEntry(), store, onNavigate, computers: [] } }); + + const open = screen.getByRole("link", { name: "Open" }); + // Still a real link (progressive enhancement): href points at the workspace. + expect(open).toHaveAttribute("href", "/my-ws"); + // But it no longer opens a new browser tab. + expect(open).not.toHaveAttribute("target", "_blank"); + // Clicking navigates in-place via the SPA callback. + await user.click(open); + expect(onNavigate).toHaveBeenCalledTimes(1); + expect(onNavigate).toHaveBeenCalledWith("/my-ws"); + }); + + // ── Active indicator (loading dots) ────────────────────────────────────── + + it("shows no loading-dots when no hasActive port is given", () => { + const store = fakeStore() as unknown as WorkspaceStore; + const { container } = render(WorkspaceCard, { + props: { ws: fakeEntry(), store, onNavigate: vi.fn(), computers: [] }, + }); + expect(container.querySelector(".loading-dots")).toBeNull(); + }); + + it("shows no loading-dots when hasActive returns false", () => { + const store = fakeStore() as unknown as WorkspaceStore; + const { container } = render(WorkspaceCard, { + props: { + ws: fakeEntry(), + store, + onNavigate: vi.fn(), + computers: [], + hasActive: () => false, + }, + }); + expect(container.querySelector(".loading-dots")).toBeNull(); + }); + + it("shows loading-dots when hasActive returns true", () => { + const store = fakeStore() as unknown as WorkspaceStore; + const { container } = render(WorkspaceCard, { + props: { + ws: fakeEntry(), + store, + onNavigate: vi.fn(), + computers: [], + hasActive: () => true, + }, + }); + const dots = container.querySelector(".loading-dots"); + expect(dots).not.toBeNull(); + // Accessible label ties the indicator to the workspace-active concept. + expect(dots?.getAttribute("aria-label")).toBe("Workspace has active conversations"); + }); + + it("forwards the workspace id to hasActive", () => { + const store = fakeStore() as unknown as WorkspaceStore; + const seen: string[] = []; + render(WorkspaceCard, { + props: { + ws: fakeEntry({ id: "proj-x" }), + store, + onNavigate: vi.fn(), + computers: [], + hasActive: (id: string) => { + seen.push(id); + return false; + }, + }, + }); + expect(seen).toEqual(["proj-x"]); + }); + + it("renders an outline star button for an unstarred workspace", () => { + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + const star = screen.getByRole("button", { name: "Star workspace" }); + expect(star).toHaveAttribute("aria-pressed", "false"); + }); + + it("renders a filled star button for a starred workspace", () => { + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: true }), store, onNavigate: vi.fn(), computers: [] }, + }); + const star = screen.getByRole("button", { name: "Unstar workspace" }); + expect(star).toHaveAttribute("aria-pressed", "true"); + }); + + it("toggles the star via the store on click", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.click(screen.getByRole("button", { name: "Star workspace" })); + expect(store.setStarred).toHaveBeenCalledWith("my-ws", true); + }); + + it("clicking a starred workspace's star calls setStarred(id, false)", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: true }), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.click(screen.getByRole("button", { name: "Unstar workspace" })); + expect(store.setStarred).toHaveBeenCalledWith("my-ws", false); + }); + + it("renders no star error on a successful toggle", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.click(screen.getByRole("button", { name: "Star workspace" })); + expect(screen.queryByText(/Star toggle failed/i)).not.toBeInTheDocument(); + }); + + it("shows an inline error when setStarred fails (result.ok false)", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + // The store reverts the optimistic flip on failure, so the entry's + // `starred` stays false — fake the revert by returning ok:false unchanged. + store.setStarred = vi.fn( + async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({ ok: false, error: "boom" }), + ); + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + + await user.click(screen.getByRole("button", { name: "Star workspace" })); + + expect(screen.getByText("boom")).toBeInTheDocument(); + }); + + it("re-enables the star button after a failure (savingStar resets)", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + store.setStarred = vi.fn( + async (): Promise<WorkspaceResult<WorkspaceEntry>> => ({ ok: false, error: "boom" }), + ); + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + + const star = screen.getByRole("button", { name: "Star workspace" }); + await user.click(star); + // After the failed toggle, the button is NOT disabled (savingStar reset). + expect(star).not.toBeDisabled(); + }); + + it("re-enables the star button even when setStarred throws", async () => { + const user = userEvent.setup(); + const store = fakeStore() as unknown as WorkspaceStore; + store.setStarred = vi.fn(async (): Promise<WorkspaceResult<WorkspaceEntry>> => { + throw new Error("network"); + }); + render(WorkspaceCard, { + props: { ws: fakeEntry({ starred: false }), store, onNavigate: vi.fn(), computers: [] }, + }); + + const star = screen.getByRole("button", { name: "Star workspace" }); + await user.click(star); + // savingStar must reset via try/finally even on a throw. + expect(star).not.toBeDisabled(); + expect(screen.getByText("network")).toBeInTheDocument(); + }); +}); diff --git a/src/features/workspaces/ui/WorkspacesHome.svelte b/src/features/workspaces/ui/WorkspacesHome.svelte new file mode 100644 index 0000000..d97eab7 --- /dev/null +++ b/src/features/workspaces/ui/WorkspacesHome.svelte @@ -0,0 +1,110 @@ +<script lang="ts"> + import { onMount } from "svelte"; + import type { ComputerEntry } from "@dispatch/wire"; + import type { WorkspaceStore } from "../store.svelte"; + import { isValidSlug, workspacePath } from "../logic/route"; + import WorkspaceCard from "./WorkspaceCard.svelte"; + + let { + store, + onNavigate, + computers, + hasActive, + }: { + store: WorkspaceStore; + onNavigate: (path: string) => void; + computers: readonly ComputerEntry[]; + /** + * Optional port forwarded to each {@link WorkspaceCard}: whether the + * workspace has at least one active (generating / queued) conversation. + * Wired by the composition root to the app store. Absent → no indicator. + */ + hasActive?: (workspaceId: string) => boolean; + } = $props(); + + onMount(() => { + void store.refresh(); + }); + + let newSlug = $state(""); + let slugError = $state<string | null>(null); + + const slugValid = $derived(newSlug.length > 0 && isValidSlug(newSlug)); + + function createWorkspace(): void { + const slug = newSlug.trim(); + if (!isValidSlug(slug)) { + slugError = "Lowercase letters, digits, and hyphens (1–40 chars)."; + return; + } + slugError = null; + newSlug = ""; + onNavigate(workspacePath(slug)); + } +</script> + +<div class="mx-auto flex h-screen w-full max-w-3xl flex-col gap-4 p-6"> + <header class="flex items-center justify-between"> + <h1 class="text-2xl font-bold">Workspaces</h1> + <a + href="/default" + class="btn btn-ghost btn-sm" + onclick={(e) => { + e.preventDefault(); + onNavigate("/default"); + }} + > + Default + </a> + </header> + + <form + class="flex items-end gap-2" + onsubmit={(e) => { + e.preventDefault(); + createWorkspace(); + }} + > + <div class="flex-1"> + <label for="new-ws" class="mb-1 block text-xs font-semibold uppercase opacity-60" + >New workspace</label + > + <input + id="new-ws" + class="input input-bordered w-full" + placeholder="my-workspace" + bind:value={newSlug} + autocomplete="off" + spellcheck="false" + /> + </div> + <button type="submit" class="btn btn-primary btn-sm" disabled={!slugValid}>Create</button> + </form> + {#if slugError} + <p class="text-xs text-error">{slugError}</p> + {/if} + + <div class="flex-1 overflow-y-auto"> + {#if store.loading && store.list.length === 0} + <div class="flex h-32 items-center justify-center"> + <span class="loading loading-spinner loading-sm opacity-60"></span> + </div> + {:else if store.list.length === 0} + <p class="py-8 text-center text-sm opacity-60"> + No workspaces yet. Create one above or visit <code>/your-name</code> in the URL. + </p> + {:else} + <ul class="flex flex-col gap-2"> + {#each store.list as ws (ws.id)} + <WorkspaceCard + {ws} + {store} + {onNavigate} + {computers} + {...(hasActive ? { hasActive } : {})} + /> + {/each} + </ul> + {/if} + </div> +</div> |