@kabmo-labs/kabmo 0.0.1 → 0.2.0

package/src/client/hooks/ui/updates/android-download.ts

@@ -0,0 +1,106 @@
+/**
+ * Whether the sidebar should offer an APK download.
+ *
+ * Two independent facts, and the button needs both:
+ *
+ * - **Running inside the Android app** (`shellVersion`, read from the bootstrap).
+ *   In a browser there is no app to update, and a "Download APK" button there
+ *   would be a second, unrelated offer sitting next to the app's own update
+ *   badge.
+ * - **A newer APK than the one running it** (`latest` > `shellVersion`). The
+ *   published asset is attached to the app's release, so it moves on its own
+ *   schedule; an up-to-date app must show nothing at all rather than a button
+ *   that downloads the build already installed.
+ *
+ * The probe is lazy: it is fetched once when a shell is detected, never in a
+ * browser, so a desktop console makes no request it cannot use.
+ */
+
+import { useEffect, useState } from 'preact/hooks';
+import { isNewer } from '@/shared/lib/updates/semver';
+
+export interface AndroidDownload {
+  /** The asset to download, or null when there is nothing to offer. */
+  url: string;
+  /** The version that asset ships. */
+  latest: string;
+  /** The release page, for a "what changed" link. */
+  releaseUrl: string | null;
+}
+
+interface ReleasePayload {
+  url?: unknown;
+  latest?: unknown;
+  releaseUrl?: unknown;
+}
+
+/**
+ * Read the release payload defensively.
+ *
+ * The route answers `{url: null, latest: null, releaseUrl: null}` on a failed
+ * probe, so a shape check that only looks at the version would offer a button
+ * with no link.
+ */
+export function parseAndroidRelease(payload: unknown): AndroidDownload | null {
+  if (typeof payload !== 'object' || payload === null) return null;
+  const body = payload as ReleasePayload;
+  if (typeof body.url !== 'string' || !body.url) return null;
+  if (typeof body.latest !== 'string' || !body.latest) return null;
+  return {
+    url: body.url,
+    latest: body.latest,
+    releaseUrl: typeof body.releaseUrl === 'string' ? body.releaseUrl : null,
+  };
+}
+
+/**
+ * The download to offer, or null.
+ *
+ * `shellVersion` is null in a browser — that is the whole gate, and it is why
+ * this takes the bootstrap value rather than sniffing the UA again on the
+ * client: the server already parsed it for the very request that served the
+ * page.
+ */
+export function shouldOfferAndroidDownload(
+  shellVersion: string | null | undefined,
+  release: AndroidDownload | null,
+): AndroidDownload | null {
+  if (!shellVersion || !release) return null;
+  return isNewer(release.latest, shellVersion) ? release : null;
+}
+
+/**
+ * Fetch the published APK and compare it with the running shell.
+ *
+ * `fetchImpl` is a seam for the tests: the cases that matter (no release, a
+ * failed probe, a version equal to the installed one) cannot be produced by a
+ * live GitHub call.
+ */
+export function useAndroidDownload(
+  shellVersion: string | null | undefined,
+  fetchImpl: typeof fetch = fetch,
+): AndroidDownload | null {
+  const [release, setRelease] = useState<AndroidDownload | null>(null);
+
+  useEffect(() => {
+    if (!shellVersion) return;
+
+    let cancelled = false;
+    void (async () => {
+      try {
+        const response = await fetchImpl('/api/updates/android');
+        if (!response.ok) return;
+        const payload: unknown = await response.json();
+        if (!cancelled) setRelease(parseAndroidRelease(payload));
+      } catch {
+        // A probe that cannot answer is a button that must not appear.
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [shellVersion, fetchImpl]);
+
+  return shouldOfferAndroidDownload(shellVersion, release);
+}

package/src/client/hooks/workspace/batch-delete-run.ts

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The state machine behind a batch delete, shared by both sidebars.
+ *
+ * It exists so the two layouts cannot drift on the three follow-ups that are
+ * load-bearing, and which are easy to get subtly wrong once per sidebar:
+ *
+ *   - a removed session's client cache is forgotten (`forgetSession`), or every
+ *     panel keyed to that id keeps serving the state of a chat that is gone;
+ *   - when the removed set includes the session in the URL, `?sessionId=` (and
+ *     `?subagent=`, which belongs to it) is dropped — otherwise the chat renders
+ *     its "not found" state over a row the user just deleted;
+ *   - the sidebar is refreshed ONCE per batch, from the server's own republish.
+ *
+ * A refusal does not abort the batch: the server already deleted everything it
+ * could, and the dialog lists what survived with its reason.
+ */
+
+import { useCallback, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { forgetSession } from '@/shared/lib/workspace/session-state/store';
+import {
+  deleteSessionsBatch,
+  deleteWorkspacesBatch,
+  type BatchDeleteOutcome,
+} from '@/client/hooks/workspace/batch-delete';
+import type { BatchMode } from '@/shared/lib/workspace/batch-select';
+
+export interface BatchDeleteRun {
+  /** The ids awaiting confirmation; empty when the dialog is closed. */
+  pending: string[];
+  isDeleting: boolean;
+  /** The settled result, or null while the request runs. */
+  outcome: BatchDeleteOutcome | null;
+  /** Open the confirmation for these ids. */
+  request: (ids: readonly string[]) => void;
+  /** Close it without deleting. */
+  cancel: () => void;
+  /** Issue the delete. Resolves with the settled outcome (null when nothing ran). */
+  confirm: (mode: BatchMode) => Promise<BatchDeleteOutcome | null>;
+}
+
+export function useBatchDeleteRun(refresh: () => void): BatchDeleteRun {
+  const [pending, setPending] = useState<string[]>([]);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [outcome, setOutcome] = useState<BatchDeleteOutcome | null>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const request = useCallback((ids: readonly string[]) => {
+    setOutcome(null);
+    setPending([...ids]);
+  }, []);
+
+  const cancel = useCallback(() => {
+    setOutcome(null);
+    setPending([]);
+  }, []);
+
+  const confirm = useCallback(async (mode: BatchMode): Promise<BatchDeleteOutcome | null> => {
+    if (pending.length === 0 || isDeleting) return null;
+    setIsDeleting(true);
+    setOutcome(null);
+    const ids = pending;
+    const result = mode === 'workspace'
+      ? await deleteWorkspacesBatch(ids)
+      : await deleteSessionsBatch(ids);
+
+    if (mode === 'session' && result.removed.length > 0) {
+      for (const id of result.removed) forgetSession(id);
+      const openSession = searchParams.get('sessionId');
+      if (openSession && result.removed.includes(openSession)) {
+        setSearchParams((prev) => {
+          const next = new URLSearchParams(prev);
+          next.delete('sessionId');
+          next.delete('subagent');
+          return next;
+        }, { replace: true });
+      }
+    }
+
+    if (result.removed.length > 0) refresh();
+    setOutcome(result);
+    setIsDeleting(false);
+    // The dialog STAYS open on a refusal so the reason can be read; a fully
+    // successful run closes itself, because the rows it named are gone.
+    if (result.removed.length === ids.length) setPending([]);
+    return result;
+  }, [pending, isDeleting, searchParams, setSearchParams, refresh]);
+
+  return { pending, isDeleting, outcome, request, cancel, confirm };
+}

package/src/client/hooks/workspace/batch-delete.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The batch verbs, one call per noun.
+ *
+ * Both are server routes rather than a client loop: a loop of N single deletes
+ * would pay N round trips for one user action, and each of them republishes the
+ * sidebar on its own. The server answers ONE summary — what was removed, and
+ * per-id refusals with their own reason — which is what the confirmation dialog
+ * reports after it closes.
+ */
+
+export interface BatchDeleteRefusal {
+  id: string;
+  error: string;
+  code?: string;
+}
+
+export interface BatchDeleteOutcome {
+  removed: string[];
+  refused: BatchDeleteRefusal[];
+  /** Set only when the request itself failed (network, 4xx, 5xx). */
+  error?: string;
+}
+
+const EMPTY: BatchDeleteOutcome = { removed: [], refused: [] };
+
+async function postBatch(url: string, ids: readonly string[]): Promise<BatchDeleteOutcome> {
+  try {
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ ids }),
+    });
+    const body = (await res.json().catch(() => null)) as Partial<BatchDeleteOutcome> | null;
+    if (!res.ok) {
+      return { ...EMPTY, error: body?.error || `Could not delete (HTTP ${res.status}).` };
+    }
+    return {
+      removed: Array.isArray(body?.removed) ? body.removed : [],
+      refused: Array.isArray(body?.refused) ? body.refused : [],
+    };
+  } catch (error) {
+    return { ...EMPTY, error: error instanceof Error ? error.message : 'Could not reach the server.' };
+  }
+}
+
+/** Remove sessions, transcripts included. Pending `new-…` ids are refused by the server. */
+export function deleteSessionsBatch(ids: readonly string[]): Promise<BatchDeleteOutcome> {
+  return postBatch('/api/sessions/batch-delete', ids);
+}
+
+/**
+ * Unregister workspaces. Same semantics as the single "Delete Workspace"
+ * action — the transcript files on disk are NOT touched, only the sidebar
+ * registration (and the tombstone that stops the sync re-adding it).
+ */
+export function deleteWorkspacesBatch(ids: readonly string[]): Promise<BatchDeleteOutcome> {
+  return postBatch('/api/folders/batch-delete', ids);
+}

package/src/client/hooks/workspace/batch-selection.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One batch selection, for both sidebars and both nouns.
+ *
+ * The mode is the state that makes the checkboxes exist at all: `null` means
+ * the sidebar is behaving normally, and entering a mode is the user's explicit
+ * act (a workspace's `⋯` menu, or the toolbar's Select control). Leaving it —
+ * by Cancel, by Escape, or by finishing a delete — clears the selection, so a
+ * mode never comes back pre-filled with rows the user no longer remembers
+ * picking.
+ *
+ * The selection is pruned against what the sidebar can currently offer, but
+ * pruning is deliberately NOT done in an effect: a row that disappears for one
+ * render (a folder collapsing under a filter, a push mid-refresh) must not
+ * silently drop a choice. Callers pass the ids they are about to delete, and
+ * the delete path resolves them against the live list.
+ */
+
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import {
+  selectionSummary,
+  toggleSelection,
+  type BatchMode,
+  type SelectionSummary,
+} from '@/shared/lib/workspace/batch-select';
+
+export interface BatchSelectionHandle {
+  /** The active mode, or null when the sidebar is not selecting. */
+  mode: BatchMode | null;
+  /**
+   * The workspace a SESSION selection is scoped to. A session batch is started
+   * from one workspace's `⋯` menu, so the checkboxes belong to that workspace's
+   * rows only — the other folders stay ordinary lists, which is also what makes
+   * "select all" unambiguous. Null in workspace mode.
+   */
+  scopeFolderId: number | null;
+  /** The ids selected in the active mode, in click order. */
+  selected: string[];
+  /** Enter a mode, replacing any previous selection. */
+  begin: (mode: BatchMode, scopeFolderId?: number) => void;
+  /** Leave the mode and forget the selection. */
+  end: () => void;
+  /** Add or remove one id. */
+  toggle: (id: string) => void;
+  /** Add every id in `ids` that is not already selected. */
+  selectAllOf: (ids: readonly string[]) => void;
+  /** Drop every id in `ids` from the selection. */
+  unselectAllOf: (ids: readonly string[]) => void;
+  /** Tri-state summary of the selection against a set of available ids. */
+  summaryOf: (available: readonly string[]) => SelectionSummary;
+}
+
+export function useBatchSelection(): BatchSelectionHandle {
+  const [mode, setMode] = useState<BatchMode | null>(null);
+  const [scopeFolderId, setScopeFolderId] = useState<number | null>(null);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const begin = useCallback((next: BatchMode, folderId?: number) => {
+    setMode(next);
+    setScopeFolderId(next === 'session' ? folderId ?? null : null);
+    setSelected([]);
+  }, []);
+
+  const end = useCallback(() => {
+    setMode(null);
+    setScopeFolderId(null);
+    setSelected([]);
+  }, []);
+
+  const toggle = useCallback((id: string) => {
+    setSelected((prev) => toggleSelection(prev, id));
+  }, []);
+
+  const selectAllOf = useCallback((ids: readonly string[]) => {
+    setSelected((prev) => [...new Set([...prev, ...ids])]);
+  }, []);
+
+  const unselectAllOf = useCallback((ids: readonly string[]) => {
+    setSelected((prev) => {
+      const drop = new Set(ids);
+      return prev.filter((id) => !drop.has(id));
+    });
+  }, []);
+
+  const summaryOf = useCallback(
+    (available: readonly string[]) => selectionSummary(selected, available),
+    [selected],
+  );
+
+  return useMemo(
+    () => ({ mode, scopeFolderId, selected, begin, end, toggle, selectAllOf, unselectAllOf, summaryOf }),
+    [mode, scopeFolderId, selected, begin, end, toggle, selectAllOf, unselectAllOf, summaryOf],
+  );
+}

package/src/client/hooks/workspace/file-tabs.test.ts

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useFileTabs` — how an "open this file" request resolves to a TAB.
+ *
+ * The bug this pins: the same path can reach the editor under two different
+ * ids, because the explorer passes a row's own `id` (its relative path) while a
+ * search row or a chat link computes `fileTabId(path)`. `handleOpenFile` used
+ * to activate the id it had COMPUTED even when the updater had just matched an
+ * existing tab under another id, so the editor found no active file and drew
+ * "Select a tab to view content" over the file that was already open — while
+ * the tab strip still showed it selected-by-nothing.
+ *
+ * Mounted through the REAL session-state provider, because the store is what
+ * the request is resolved against; a local stub would not exercise the
+ * read-back the fix depends on.
+ *
+ * The Preact modules are imported DYNAMICALLY after the happy-dom globals are
+ * installed: Preact binds its environment at evaluation time, so a static import
+ * would capture Node's globals and render nothing.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { useFileTabs as UseFileTabsHook } from '@/client/hooks/workspace/file-tabs';
+import type { OpenFileInput } from '@/client/hooks/workspace/file-tabs';
+import type { OpenedFile } from '@/shared/types/fs';
+import { fileTabId } from '@/shared/lib/workspace/file-tab-id';
+import { forgetSession } from '@/shared/lib/workspace/session-state/store';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let useFileTabs: typeof UseFileTabsHook;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+const ROOT = '/ws';
+const SESSION = 'new-file-tabs';
+const nativeFetch = Bun.fetch;
+
+let container: HTMLElement;
+let handleOpenFile: ((file: OpenFileInput) => void) | null = null;
+let openedFiles: OpenedFile[] = [];
+let activeFileId: number | string | null = null;
+
+async function settle() {
+  for (let i = 0; i < 8; i++) {
+    await act(async () => {
+      for (let turn = 0; turn < 8; turn++) await Promise.resolve();
+    });
+  }
+}
+
+/** Mount the hook inside the provider, with `stored` as the session's blob. */
+async function mount(stored: Record<string, unknown> = {}) {
+  globalThis.fetch = (async () => ({
+    ok: true,
+    json: async () => ({ sessionId: SESSION, state: stored }),
+    text: async () => JSON.stringify({ sessionId: SESSION, state: stored }),
+  })) as unknown as typeof fetch;
+  const { SessionStateProvider } = await import('@/client/components/common/session-state-provider/index');
+  const Probe = () => {
+    const tabs = useFileTabs(ROOT, SESSION);
+    handleOpenFile = tabs.handleOpenFile;
+    openedFiles = tabs.openedFiles;
+    activeFileId = tabs.activeFileId;
+    return null;
+  };
+  await act(async () => {
+    render(h(SessionStateProvider, { sessionId: SESSION, children: h(Probe, {}) }), container);
+  });
+  await settle();
+}
+
+beforeAll(async () => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+  ({ useFileTabs } = await import('@/client/hooks/workspace/file-tabs'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  globalThis.fetch = nativeFetch;
+  restoreDomGlobals();
+});
+
+beforeEach(() => {
+  handleOpenFile = null;
+  openedFiles = [];
+  activeFileId = null;
+  globalThis.fetch = (async () => ({
+    ok: true,
+    json: async () => ({ state: {} }),
+    text: async () => JSON.stringify({ state: {} }),
+  })) as unknown as typeof fetch;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  if (container) render(null, container);
+  container?.remove();
+  forgetSession(SESSION);
+});
+
+/** What the explorer sends: the row's own id, which is its relative path. */
+function explorerPayload(path: string): OpenFileInput {
+  return { id: path, name: path.split('/').pop() ?? path, path, root: ROOT, repo: '.' };
+}
+
+/** What a search row sends: no id, so the hook computes `fileTabId(path)`. */
+function searchPayload(path: string): OpenFileInput {
+  return { name: path.split('/').pop() ?? path, path, root: ROOT, repo: '.' };
+}
+
+describe('useFileTabs open resolution', () => {
+  test('opening a file the explorer already has open keeps ITS id active', async () => {
+    await mount({ 'layout.openedFiles': [explorerPayload('notes.md')], 'layout.activeFileId': 'notes.md' });
+
+    await act(async () => {
+      handleOpenFile?.(searchPayload('notes.md'));
+    });
+    await settle();
+
+    // The id the search row computed names no tab; activating it is what blanked
+    // the editor. The existing tab's own id must stay the active one.
+    expect(activeFileId).toBe('notes.md');
+    expect(activeFileId).not.toBe(fileTabId('notes.md'));
+    expect(openedFiles).toHaveLength(1);
+  });
+
+  test('a file opened from the search panel alone gets the computed id', async () => {
+    await mount();
+
+    await act(async () => {
+      handleOpenFile?.(searchPayload('src/a.ts'));
+    });
+    await settle();
+
+    expect(openedFiles).toHaveLength(1);
+    expect(openedFiles[0]?.id).toBe(fileTabId('src/a.ts'));
+    expect(activeFileId).toBe(fileTabId('src/a.ts'));
+  });
+
+  test('reopening under the computed id activates the tab rather than adding one', async () => {
+    await mount();
+
+    await act(async () => {
+      handleOpenFile?.(searchPayload('src/a.ts'));
+    });
+    await settle();
+    await act(async () => {
+      handleOpenFile?.(explorerPayload('src/a.ts'));
+    });
+    await settle();
+
+    expect(openedFiles).toHaveLength(1);
+    expect(activeFileId).toBe(fileTabId('src/a.ts'));
+  });
+});

package/src/client/hooks/workspace/file-tabs.ts

@@ -79,19 +79,32 @@ export function useFileTabs(
       id: file.id ?? fileTabId(file.path),
       root: file.root ?? activeProjectPath ?? undefined,
     };
-    setOpenedFiles(prev => {
-      const existing = prev.find(
-        f => f.id === fileEntry.id || (!f.isDiff && f.path && fileEntry.path && f.path === fileEntry.path)
-      );
-      if (existing) {
-        setActiveFileId(existing.id);
-        return prev;
-      }
-      return [...prev, fileEntry];
-    });
+    // Resolved against the STORE, outside the updater: a state updater may run
+    // more than once, and activating a tab is not something that may be applied
+    // twice. The store is the authoritative copy (every write goes through
+    // `setSessionKey`), and reading it instead of the hook's own value keeps
+    // this callback's identity stable — a caller that memoizes on it (the
+    // search panel's rows do) would otherwise re-render on every tab change.
+    const current = getSessionValue<OpenedFile[]>(sessionId, 'layout.openedFiles') ?? [];
+    const existing = current.find(
+      f => f.id === fileEntry.id || (!f.isDiff && f.path && fileEntry.path && f.path === fileEntry.path)
+    );
+    if (existing) {
+      // The tab on screen may carry a DIFFERENT id for the same path — the
+      // explorer hands a row's own `id` (its relative path) through, while a
+      // search row or a chat link computes `fileTabId(path)`. Activating the
+      // computed id here is what blanked the editor: the id named no tab, so
+      // `Editor` found no active file and drew "Select a tab to view content"
+      // over the file that was already open. Only a tab that is CREATED can be
+      // activated by the id it was created with.
+      setActiveFileId(existing.id);
+      onOpenTab?.();
+      return;
+    }
+    setOpenedFiles(prev => [...prev, fileEntry]);
     setActiveFileId(fileEntry.id);
     onOpenTab?.();
-  }, [activeProjectPath, onOpenTab, setOpenedFiles, setActiveFileId]);
+  }, [activeProjectPath, onOpenTab, sessionId, setOpenedFiles, setActiveFileId]);
 
   const handleOpenDiff = useCallback((diffInfo: {
     file: string;

package/src/client/hooks/workspace/session-state/index.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { getSessionValue, hydrateSession, setSessionKey } from '@/shared/lib/workspace/session-state/store';
-import { subscribeSessionKey } from '@/shared/lib/workspace/session-state/listeners';
+import { subscribeSessionKey, subscribeSessionReplaced } from '@/shared/lib/workspace/session-state/listeners';
 import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
 
 type LoadedState = Record<string, unknown>;
@@ -13,6 +13,16 @@ type LoadedState = Record<string, unknown>;
  * Returns `[value, setValue, ready]` — `ready` lets panels defer their first
  * fetch/render until restore completed (mirrors the DesktopLayout editor
  * "blip" concern).
+ *
+ * The copy is PRIVATE by design: two callers of the same key never observe
+ * each other's writes (a panel width is owned by one component). It is NOT
+ * private about the store being replaced wholesale — a blob landing, or a
+ * spawn adoption migrating the pending slot onto the real id — because there
+ * the value the copy holds was never written by anyone, it is the fallback
+ * this component read on the commit the session id changed. `ready` does not
+ * move across an adoption (it was already true), so without the second
+ * subscription a pending chat's opened panels and picked view were reset to
+ * their defaults at the exact moment the spawn renamed the session.
  */
 export function useSessionState<T>(key: string, fallback: T): [T, (value: T | ((prev: T) => T)) => void, boolean] {
   const { sessionId, ready } = useSessionStateContext();
@@ -32,6 +42,19 @@ export function useSessionState<T>(key: string, fallback: T): [T, (value: T | ((
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId, ready, key]);
 
+  // The store replaced this session's blob under the copy (a load landing, an
+  // adoption migrate, a delete). `ready` may not move, so re-read on the event.
+  useEffect(
+    () =>
+      subscribeSessionReplaced(sessionId, () => {
+        const next = getSessionValue<T>(sessionId, key);
+        setLocal(next === undefined ? fallback : next);
+      }),
+    // `key` and `fallback` are stable per call site.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sessionId, key],
+  );
+
   const setValue = (value: T | ((prev: T) => T)) => {
     const resolved = typeof value === 'function' ? (value as (prev: T) => T)(getSessionValue<T>(sessionId, key) ?? local) : value;
     setLocal(resolved);

package/src/client/hooks/workspace/toolbar-row-width.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The toolbar row's CONTENT width, kept current as its container is resized.
+ *
+ * Both session-sidebar toolbars decide their visible set from measured width
+ * rather than a media query — the desktop sidebar is dragged, and the phone's
+ * drawer is whatever the device gives it — so both need the same measurement.
+ * A `@container` breakpoint cannot answer this: it would keep hiding controls
+ * after the user widened the panel.
+ *
+ * The width is a LAYOUT effect, so the first measure lands BEFORE paint: with a
+ * passive effect the row drew every control and then dropped the ones that did
+ * not fit on the next frame.
+ */
+
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+/**
+ * @param paddingPx Padding the row's `clientWidth` includes but the capacity
+ *   budget must not (the desktop row's own `px-1`). Pass `0` for a row that is
+ *   padded by its container instead, which is what the phone's drawer does.
+ */
+export function useToolbarRowWidth(paddingPx: number) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(0);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => setWidth(Math.max(0, element.clientWidth - paddingPx));
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [paddingPx]);
+
+  return { ref, width };
+}