@agimon-ai/doompi-web 0.0.1-alpha.0

package/src/web/stores/paletteStore.ts

@@ -0,0 +1,25 @@
+import { Store } from '@tanstack/store';
+
+export interface PaletteState {
+  open: boolean;
+  /** The key path typed so far, mirroring Leader Space's prefix map. */
+  path: string;
+}
+
+export const paletteStore = new Store<PaletteState>({ open: false, path: '' });
+
+export function openPalette(): void {
+  paletteStore.setState(() => ({ open: true, path: '' }));
+}
+
+export function closePalette(): void {
+  paletteStore.setState(() => ({ open: false, path: '' }));
+}
+
+export function togglePalette(): void {
+  paletteStore.setState((state) => ({ open: !state.open, path: '' }));
+}
+
+export function setPalettePath(path: string): void {
+  paletteStore.setState((state) => ({ ...state, path }));
+}

package/src/web/stores/sessionStore.ts

@@ -0,0 +1,303 @@
+import { useStore } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
+import {
+  abortCommand,
+  dialogCancelled,
+  dialogConfirmed,
+  dialogValue,
+  followUpCommand,
+  getAvailableModelsCommand,
+  getAvailableThinkingLevelsCommand,
+  getCommandsCommand,
+  getSessionStatsCommand,
+  getStateCommand,
+  promptCommand,
+  setModelCommand,
+  setSessionNameCommand,
+  setThinkingLevelCommand,
+  steerCommand,
+} from '../lib/commands.ts';
+import {
+  appendQueued,
+  appendUserPrompt,
+  clearDialog,
+  initialSessionState,
+  prependHistory,
+  reduceSession,
+  type SessionState,
+  type TimelineEntry,
+} from '../lib/sessionModel.ts';
+import { HISTORY_REQUEST_TYPE } from '../../types/hub.ts';
+import { sendFrame, sendHubFrame } from '../lib/transport.ts';
+import { activeSessionId, sessionsStore } from './sessionsStore.ts';
+
+/**
+ * One store per session, created on first touch.
+ *
+ * The heavyweight timeline state only exists for sessions this page has
+ * subscribed to; the rail runs on hub summaries alone.
+ */
+const stores = new Map<string, Store<SessionState>>();
+
+/** Read-only stand-in while no session is focused, so hooks stay unconditional. */
+const detachedStore = new Store<SessionState>(initialSessionState);
+
+export function sessionStoreFor(sessionId: string | null): Store<SessionState> {
+  if (sessionId === null) return detachedStore;
+  const existing = stores.get(sessionId);
+  if (existing) return existing;
+  const created = new Store<SessionState>(initialSessionState);
+  stores.set(sessionId, created);
+  return created;
+}
+
+/** Reads the focused session's state; components stay on the useStore idiom. */
+export function useActiveSession<T>(selector: (state: SessionState) => T): T {
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  return useStore(sessionStoreFor(activeId), selector);
+}
+
+export function applySessionFrame(sessionId: string, frame: Record<string, unknown>): void {
+  // The transcript arrives over Pi's protocol; this wire carries what the
+  // protocol has no shape for.
+  sessionStoreFor(sessionId).setState((state) => reduceSession(state, frame, { transcriptFromProtocol: true }));
+}
+
+/** A thread has no protocol session, so its journal remains its authoritative transcript. */
+export function applyThreadFrame(threadKey: string, frame: Record<string, unknown>): void {
+  sessionStoreFor(threadKey).setState((state) => reduceSession(state, frame));
+}
+
+/**
+ * One session's paging state: how far back the page has read, and whether a
+ * request is already in flight. Kept beside the timeline rather than inside it
+ * because it describes the reading, not the session.
+ */
+interface HistoryState {
+  cursor: string | null;
+  hasMore: boolean;
+  loading: boolean;
+  /** Pages taken so far; also what keeps prepended entry ids unique. */
+  pages: number;
+}
+
+const history = new Map<string, HistoryState>();
+const historyStore = new Store<Record<string, HistoryState>>({});
+const NO_HISTORY: HistoryState = { cursor: null, hasMore: true, loading: false, pages: 0 };
+
+function historyFor(sessionId: string): HistoryState {
+  return history.get(sessionId) ?? NO_HISTORY;
+}
+
+function setHistory(sessionId: string, next: HistoryState): void {
+  history.set(sessionId, next);
+  historyStore.setState((state) => ({ ...state, [sessionId]: next }));
+}
+
+/** Whether more transcript exists above what this session's page holds. */
+export function useHasOlderHistory(sessionId: string | null): boolean {
+  return useStore(historyStore, (state) => (sessionId === null ? false : (state[sessionId] ?? NO_HISTORY).hasMore));
+}
+
+/**
+ * Asks the hub for the window above what this page holds.
+ *
+ * One request at a time: a reader flicking upwards would otherwise ask for the
+ * same window repeatedly before the first answer lands, and every copy would
+ * be prepended.
+ */
+export function requestOlderHistory(sessionId: string | null): void {
+  if (sessionId === null) return;
+  const current = historyFor(sessionId);
+  if (current.loading || !current.hasMore) return;
+  setHistory(sessionId, { ...current, loading: true });
+  sendHubFrame({
+    type: HISTORY_REQUEST_TYPE,
+    sessionId,
+    ...(current.cursor === null ? {} : { before: current.cursor }),
+  });
+}
+
+/** Folds one answered window above the timeline and records how far back it reached. */
+export function applyHistoryPage(sessionId: string, frames: Record<string, unknown>[], next: HistoryPage): void {
+  const current = historyFor(sessionId);
+  const pages = current.pages + 1;
+  sessionStoreFor(sessionId).setState((state) => prependHistory(state, frames, pages));
+  setHistory(sessionId, { cursor: next.cursor, hasMore: next.hasMore, loading: false, pages });
+}
+
+export interface HistoryPage {
+  cursor: string | null;
+  hasMore: boolean;
+}
+
+/** The oldest entry the page holds, which is where the next window ends. */
+export function seedHistoryCursor(sessionId: string, cursor: string | null): void {
+  setHistory(sessionId, { ...NO_HISTORY, cursor });
+}
+
+/** Keeps DoomPi-only timeline entries beside the protocol items that preceded them. */
+function mergeProtocolEntries(previous: TimelineEntry[], protocol: TimelineEntry[]): TimelineEntry[] {
+  const protocolKinds = new Set(['user', 'assistant', 'tool']);
+  const localByAnchor = new Map<string | null, TimelineEntry[]>();
+  let anchor: string | null = null;
+  for (const entry of previous) {
+    if (protocolKinds.has(entry.kind)) {
+      anchor = entry.id;
+      continue;
+    }
+    const local = localByAnchor.get(anchor) ?? [];
+    local.push(entry);
+    localByAnchor.set(anchor, local);
+  }
+
+  const merged = [...(localByAnchor.get(null) ?? [])];
+  const used = new Set<string | null>([null]);
+  for (const entry of protocol) {
+    merged.push(entry, ...(localByAnchor.get(entry.id) ?? []));
+    used.add(entry.id);
+  }
+  for (const [entryAnchor, local] of localByAnchor) {
+    if (!used.has(entryAnchor)) merged.push(...local);
+  }
+  return merged;
+}
+
+/**
+ * Replaces protocol-owned transcript items with the authoritative snapshot.
+ *
+ * Local echoes disappear when the protocol publishes them. DoomPi-only entries,
+ * such as notices, queued messages, and run dividers, retain their place beside
+ * the protocol item that preceded them.
+ */
+export function applyProtocolTranscript(sessionId: string, entries: TimelineEntry[], streaming: boolean): void {
+  sessionStoreFor(sessionId).setState((state) => ({
+    ...state,
+    entries: mergeProtocolEntries(state.entries, entries),
+    streaming,
+    settled: !streaming,
+    pendingUserId: null,
+    pendingUserText: '',
+  }));
+}
+
+export function resetSessionStore(sessionId: string): void {
+  sessionStoreFor(sessionId).setState(() => initialSessionState);
+  history.delete(sessionId);
+  historyStore.setState((state) => {
+    const { [sessionId]: _dropped, ...rest } = state;
+    return rest;
+  });
+}
+
+export function dropSessionStore(sessionId: string): void {
+  stores.delete(sessionId);
+}
+
+export function resetSessionStores(): void {
+  stores.clear();
+  detachedStore.setState(() => initialSessionState);
+}
+
+/** Asks for the facts the cockpit shows but Pi only reports on request. */
+export function refreshSessionFacts(sessionId: string): void {
+  sendFrame(sessionId, getStateCommand());
+  sendFrame(sessionId, getSessionStatsCommand());
+  sendFrame(sessionId, getCommandsCommand());
+}
+
+/** Asks what the model picker lists; Pi's answer depends on the current model. */
+export function loadModelChoices(sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, getAvailableModelsCommand());
+  sendFrame(sessionId, getAvailableThinkingLevelsCommand());
+}
+
+/**
+ * Switches the model, then re-reads the facts Pi adjusts alongside it: the
+ * thinking level gets clamped to what the new model accepts, and the level
+ * list changes with it.
+ */
+export function selectModel(provider: string, modelId: string, sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, setModelCommand(provider, modelId));
+  sendFrame(sessionId, getStateCommand());
+  sendFrame(sessionId, getAvailableThinkingLevelsCommand());
+}
+
+/** The set reply carries nothing back, so get_state is what updates the chip. */
+export function selectThinkingLevel(level: string, sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, setThinkingLevelCommand(level));
+  sendFrame(sessionId, getStateCommand());
+}
+
+/**
+ * Sends a prompt, or steers the run when one is already in flight.
+ *
+ * Pi rejects a prompt while the agent is working, so the composer picks the
+ * verb from the run state rather than making the reader remember which is
+ * legal. Every action defaults to the focused session and is a no-op when
+ * nothing is focused.
+ */
+export function submitMessage(text: string, sessionId: string | null = activeSessionId()): void {
+  const trimmed = text.trim();
+  if (!trimmed || sessionId === null) return;
+  const store = sessionStoreFor(sessionId);
+  const streaming = store.state.streaming;
+  store.setState((state) => appendUserPrompt(state, trimmed));
+  sendFrame(sessionId, streaming ? steerCommand(trimmed) : promptCommand(trimmed));
+}
+
+export function queueFollowUp(text: string, sessionId: string | null = activeSessionId()): void {
+  const trimmed = text.trim();
+  if (!trimmed || sessionId === null) return;
+  sessionStoreFor(sessionId).setState((state) => appendQueued(state, trimmed));
+  sendFrame(sessionId, followUpCommand(trimmed));
+}
+
+/**
+ * Renames the session where the name actually lives: in the agent. Pi keeps
+ * it in the session file and reports it back through get_state, which is
+ * what the hub folds into every page's rail card.
+ */
+export function renameSession(name: string, sessionId: string | null = activeSessionId()): void {
+  const trimmed = name.trim();
+  if (!trimmed || sessionId === null) return;
+  sendFrame(sessionId, setSessionNameCommand(trimmed));
+  sendFrame(sessionId, getStateCommand());
+}
+
+export function abortRun(sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, abortCommand());
+}
+
+export function runCommand(name: string, sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  const slashed = name.startsWith('/') ? name : `/${name}`;
+  sessionStoreFor(sessionId).setState((state) => appendUserPrompt(state, slashed));
+  sendFrame(sessionId, promptCommand(slashed));
+}
+
+export function answerDialogValue(id: string, value: string, sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, dialogValue(id, value));
+  sessionStoreFor(sessionId).setState(clearDialog);
+}
+
+export function answerDialogConfirm(
+  id: string,
+  confirmed: boolean,
+  sessionId: string | null = activeSessionId(),
+): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, dialogConfirmed(id, confirmed));
+  sessionStoreFor(sessionId).setState(clearDialog);
+}
+
+export function cancelDialog(id: string, sessionId: string | null = activeSessionId()): void {
+  if (sessionId === null) return;
+  sendFrame(sessionId, dialogCancelled(id));
+  sessionStoreFor(sessionId).setState(clearDialog);
+}

package/src/web/stores/sessionsStore.ts

@@ -0,0 +1,155 @@
+import { useStore } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
+import type { SessionSummary } from '../../types/hub.ts';
+import type { AttachPhase } from '../lib/sessionSummary.ts';
+
+/** One rail entry: the hub's summary plus this page's view of its connection. */
+export interface SessionMeta {
+  summary: SessionSummary;
+  /** summary.attach adjusted for sticky refusals and a lost page socket. */
+  attach: AttachPhase;
+  reason: string;
+  /** Frames replayed into this page's timeline on the last subscribe. */
+  replayed: number;
+  /** Frames the hub's bounded ring lost before this page subscribed. */
+  dropped: number;
+}
+
+export interface SessionsState {
+  /** Session ids sorted by creation, the rail's order and the ordinal shortcuts. */
+  order: string[];
+  byId: Record<string, SessionMeta>;
+  activeId: string | null;
+  /** False until the first snapshot; routing waits for it before redirecting. */
+  hydrated: boolean;
+}
+
+const initialState: SessionsState = { order: [], byId: {}, activeId: null, hydrated: false };
+
+export const sessionsStore = new Store<SessionsState>(initialState);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function asSummary(value: unknown): SessionSummary | undefined {
+  if (!isRecord(value) || typeof value.id !== 'string' || value.id === '') return undefined;
+  return value as unknown as SessionSummary;
+}
+
+function sortedOrder(byId: Record<string, SessionMeta>): string[] {
+  return Object.keys(byId).sort((left, right) => {
+    const a = byId[left].summary;
+    const b = byId[right].summary;
+    return a.createdAt.localeCompare(b.createdAt) || a.id.localeCompare(b.id);
+  });
+}
+
+function mergeSummary(previous: SessionMeta | undefined, summary: SessionSummary): SessionMeta {
+  // A refusal is sticky: the hub keeps retrying underneath, and reporting each
+  // attempt would flicker the card between "refused" and "connecting" while
+  // nothing has actually changed. Only a successful attach clears it.
+  const sticky = previous?.attach === 'refused' && summary.attach === 'connecting';
+  return {
+    summary,
+    attach: sticky ? 'refused' : summary.attach,
+    reason: sticky ? previous.reason : (summary.attachReason ?? ''),
+    replayed: previous?.replayed ?? 0,
+    dropped: previous?.dropped ?? 0,
+  };
+}
+
+export function applySessionsSnapshot(frame: Record<string, unknown>): void {
+  if (!Array.isArray(frame.sessions)) return;
+  const summaries = frame.sessions.map(asSummary).filter((summary): summary is SessionSummary => Boolean(summary));
+  sessionsStore.setState((state) => {
+    const byId: Record<string, SessionMeta> = {};
+    for (const summary of summaries) byId[summary.id] = mergeSummary(state.byId[summary.id], summary);
+    return { ...state, byId, order: sortedOrder(byId), hydrated: true };
+  });
+}
+
+export function applySessionUpsert(frame: Record<string, unknown>): void {
+  const summary = asSummary(frame.session);
+  if (!summary) return;
+  sessionsStore.setState((state) => {
+    const byId = { ...state.byId, [summary.id]: mergeSummary(state.byId[summary.id], summary) };
+    return { ...state, byId, order: sortedOrder(byId) };
+  });
+}
+
+export function applySessionRemoved(frame: Record<string, unknown>): void {
+  const sessionId = frame.sessionId;
+  if (typeof sessionId !== 'string') return;
+  sessionsStore.setState((state) => {
+    if (!(sessionId in state.byId)) return state;
+    const byId = { ...state.byId };
+    delete byId[sessionId];
+    return { ...state, byId, order: sortedOrder(byId) };
+  });
+}
+
+/** Records what the hub replayed into this page when a subscription started. */
+export function applySessionBacklog(sessionId: string, replayed: number, dropped: number): void {
+  sessionsStore.setState((state) => {
+    const meta = state.byId[sessionId];
+    if (!meta) return state;
+    return { ...state, byId: { ...state.byId, [sessionId]: { ...meta, replayed, dropped } } };
+  });
+}
+
+/**
+ * The page socket died; every session is unreachable until it comes back.
+ * Self-healing: the snapshot on reconnect restores the real states.
+ */
+export function markSocketClosed(): void {
+  sessionsStore.setState((state) => {
+    const byId: Record<string, SessionMeta> = {};
+    for (const [id, meta] of Object.entries(state.byId)) {
+      byId[id] = { ...meta, attach: 'offline', reason: 'The cockpit lost its bridge.' };
+    }
+    return { ...state, byId };
+  });
+}
+
+const APPEAR_TIMEOUT_MS = 15_000;
+
+/**
+ * Resolves once the session shows up in the rail, or false on timeout.
+ *
+ * A freshly created session exists on disk before its upsert reaches this
+ * page; navigating to it too early trips the unknown-session fallback and
+ * bounces the user back. Waiting here is what makes "create, then land on it"
+ * one motion.
+ */
+export function waitForSession(sessionId: string, timeoutMs = APPEAR_TIMEOUT_MS): Promise<boolean> {
+  if (sessionId in sessionsStore.state.byId) return Promise.resolve(true);
+  return new Promise((resolve) => {
+    const finish = (found: boolean): void => {
+      clearTimeout(timer);
+      subscription.unsubscribe();
+      resolve(found);
+    };
+    const subscription = sessionsStore.subscribe(() => {
+      if (sessionId in sessionsStore.state.byId) finish(true);
+    });
+    const timer = setTimeout(() => finish(false), timeoutMs);
+  });
+}
+
+/** Reads the focused session's rail entry, or null while nothing is focused. */
+export function useActiveSessionMeta(): SessionMeta | null {
+  return useStore(sessionsStore, (state) => (state.activeId !== null ? (state.byId[state.activeId] ?? null) : null));
+}
+
+export function setActiveSession(sessionId: string | null): void {
+  sessionsStore.setState((state) => (state.activeId === sessionId ? state : { ...state, activeId: sessionId }));
+}
+
+export function activeSessionId(): string | null {
+  return sessionsStore.state.activeId;
+}
+
+export function resetSessions(): void {
+  sessionsStore.setState(() => initialState);
+}

package/src/web/stores/themeStore.ts

@@ -0,0 +1,52 @@
+import {
+  applyTheme,
+  BUILTIN_THEMES,
+  builtinTheme,
+  DEFAULT_THEME,
+  readThemePreference,
+  type ThemeConfig,
+  writeThemePreference,
+} from '@agimon-ai/doompi-web-components/theme';
+import { Store } from '@tanstack/store';
+
+export interface ThemeState {
+  /** The name of the theme on the page. */
+  name: string;
+}
+
+export const themeStore = new Store<ThemeState>({ name: DEFAULT_THEME.name });
+
+/** The themes the appearance page offers. */
+export function availableThemes(): readonly ThemeConfig[] {
+  return BUILTIN_THEMES;
+}
+
+function storage(): Storage | undefined {
+  try {
+    return window.localStorage;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Puts the remembered theme on the page. Called before the first render so
+ * the cockpit never flashes the default; a stored name nothing ships under
+ * falls back to the default and is forgotten.
+ */
+export function applyStoredTheme(): void {
+  const stored = readThemePreference(storage());
+  const theme = (stored === null ? undefined : builtinTheme(stored)) ?? DEFAULT_THEME;
+  if (stored !== null && theme.name !== stored) writeThemePreference(storage(), null);
+  applyTheme(theme, document.documentElement);
+  themeStore.setState(() => ({ name: theme.name }));
+}
+
+/** Switches the page to a shipped theme and remembers it. */
+export function selectTheme(name: string): void {
+  const theme = builtinTheme(name);
+  if (theme === undefined) return;
+  applyTheme(theme, document.documentElement);
+  writeThemePreference(storage(), name);
+  themeStore.setState(() => ({ name }));
+}

package/src/web/stores/threadStore.ts

@@ -0,0 +1,68 @@
+import { subscribeThreadFrame, unsubscribeThreadFrame } from '../../types/hub.ts';
+import { sendHubFrame } from '../lib/transport.ts';
+import { dropSessionStore } from './sessionStore.ts';
+
+/** A session id is a registry id and never starts with this, so a thread's fold cannot shadow a session's. */
+const THREAD_KEY_PREFIX = 'thread:';
+
+interface ThreadHold {
+  sessionId: string;
+  threadId: string;
+  refs: number;
+}
+
+/**
+ * The page's holds on threads, counted per thread so two views of one thread
+ * share a subscription. The hub-side subscription dies with the socket, so
+ * this is also what a reconnect replays.
+ */
+const holds = new Map<string, ThreadHold>();
+
+/** Where a thread's fold lives in the session store map. */
+export function threadStoreKey(sessionId: string, threadId: string): string {
+  return `${THREAD_KEY_PREFIX}${sessionId}:${threadId}`;
+}
+
+export function subscribeThread(sessionId: string, threadId: string): void {
+  const key = threadStoreKey(sessionId, threadId);
+  const held = holds.get(key);
+  if (held !== undefined) {
+    held.refs += 1;
+    return;
+  }
+  holds.set(key, { sessionId, threadId, refs: 1 });
+  sendHubFrame(subscribeThreadFrame(sessionId, threadId));
+}
+
+export function unsubscribeThread(sessionId: string, threadId: string): void {
+  const key = threadStoreKey(sessionId, threadId);
+  const held = holds.get(key);
+  if (held === undefined) return;
+  held.refs -= 1;
+  if (held.refs > 0) return;
+  holds.delete(key);
+  sendHubFrame(unsubscribeThreadFrame(sessionId, threadId));
+}
+
+/** A fresh socket knows nothing; every held thread is asked for again. */
+export function resubscribeThreads(): void {
+  for (const held of holds.values()) sendHubFrame(subscribeThreadFrame(held.sessionId, held.threadId));
+}
+
+/** A session that left takes its threads' folds and holds with it. */
+export function dropThreads(sessionId: string): void {
+  for (const [key, held] of holds) {
+    if (held.sessionId !== sessionId) continue;
+    holds.delete(key);
+    dropSessionStore(key);
+  }
+}
+
+/** The threads currently held, for tests and diagnostics. */
+export function heldThreads(): Array<{ sessionId: string; threadId: string; refs: number }> {
+  return [...holds.values()].map((held) => ({ ...held }));
+}
+
+export function resetThreads(): void {
+  holds.clear();
+}

package/src/web/stores/transientTabsStore.ts

@@ -0,0 +1,63 @@
+import type { TransientTab } from '@agimon-ai/doompi-web-contracts';
+import { useStore } from '@tanstack/react-store';
+import { Store } from '@tanstack/store';
+
+type TransientTabsState = Partial<Record<string, TransientTab[]>>;
+
+/** One stable empty list, so a selector for a session with no tabs never re-renders its reader. */
+const NO_TABS: readonly TransientTab[] = [];
+
+/**
+ * The tabs plugins opened at runtime, per session. A tab keeps the panel it
+ * was opened with: opening the same id again focuses it rather than swapping
+ * the component out from under React. Nothing here survives a reload, which
+ * is what makes the tabs temporary.
+ */
+export const transientTabsStore = new Store<TransientTabsState>({});
+
+export function transientTabsOf(state: TransientTabsState, sessionId: string | null): readonly TransientTab[] {
+  return (sessionId === null ? undefined : state[sessionId]) ?? NO_TABS;
+}
+
+export function findTransientTab(
+  state: TransientTabsState,
+  sessionId: string | undefined,
+  tabId: string | undefined,
+): TransientTab | undefined {
+  if (sessionId === undefined || tabId === undefined) return undefined;
+  return transientTabsOf(state, sessionId).find((tab) => tab.id === tabId);
+}
+
+export function openTransientTab(sessionId: string, tab: TransientTab): void {
+  transientTabsStore.setState((state) => {
+    const current = state[sessionId] ?? [];
+    if (current.some((existing) => existing.id === tab.id)) return state;
+    return { ...state, [sessionId]: [...current, tab] };
+  });
+}
+
+export function closeTransientTab(sessionId: string, tabId: string): void {
+  transientTabsStore.setState((state) => {
+    const current = state[sessionId];
+    if (current === undefined || !current.some((tab) => tab.id === tabId)) return state;
+    return { ...state, [sessionId]: current.filter((tab) => tab.id !== tabId) };
+  });
+}
+
+/** A session that left takes its tabs with it. */
+export function dropTransientTabs(sessionId: string): void {
+  transientTabsStore.setState((state) => {
+    if (!(sessionId in state)) return state;
+    const next = { ...state };
+    delete next[sessionId];
+    return next;
+  });
+}
+
+export function resetTransientTabs(): void {
+  transientTabsStore.setState(() => ({}));
+}
+
+export function useTransientTabs(sessionId: string | null): readonly TransientTab[] {
+  return useStore(transientTabsStore, (state) => transientTabsOf(state, sessionId));
+}

package/src/web/stores/uiStore.ts

@@ -0,0 +1,28 @@
+import { Store } from '@tanstack/store';
+
+/** Where the page remembers its chrome layout; one key per machine. */
+const DOCK_STORAGE_KEY = 'doompi.web.dock';
+
+export interface UiState {
+  /** Whether the activity dock is shown; survives route changes and reloads. */
+  dockOpen: boolean;
+}
+
+function readDock(): boolean {
+  try {
+    return window.localStorage.getItem(DOCK_STORAGE_KEY) !== 'closed';
+  } catch {
+    return true;
+  }
+}
+
+export const uiStore = new Store<UiState>({ dockOpen: readDock() });
+
+export function setDockOpen(open: boolean): void {
+  uiStore.setState((state) => (state.dockOpen === open ? state : { ...state, dockOpen: open }));
+  try {
+    window.localStorage.setItem(DOCK_STORAGE_KEY, open ? 'open' : 'closed');
+  } catch {
+    // A layout preference is a convenience; losing it costs one click.
+  }
+}