@kabmo-labs/kabmo 0.1.0 → 0.3.0

package/src/shared/lib/workspace/session-state/replacement.test.ts

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The store's WHOLESALE-REPLACEMENT notifications.
+ *
+ * `useSessionState` hands every caller a private copy that deliberately does
+ * not follow another component's per-slot write (a panel width is owned by one
+ * component). But the store also REPLACES a session's whole state — a blob
+ * landing, a hydrate, a spawn-adoption migrate, a delete — and there the copy's
+ * value was never written by anyone: it is the fallback the component read on
+ * the commit the session id changed. `ready` does not move across an adoption,
+ * so without this event every opened right-panel view collapsed at the first
+ * send of a new chat (measured: `true:git` → `true:files`).
+ *
+ * Split from `store.test.ts` for the per-file size ceiling.
+ */
+
+import { afterEach, describe, expect, test } from 'bun:test';
+
+import { subscribeSessionReplaced } from '@/shared/lib/workspace/session-state/listeners';
+import {
+  clearSessionKey,
+  forgetSession,
+  getSessionValue,
+  hydrateSession,
+  loadSession,
+  migrateSessionState,
+  setSessionKey,
+} from '@/shared/lib/workspace/session-state/store';
+
+const originalWindow = Reflect.get(globalThis, 'window');
+/** The runner's own fetch, reached through `Bun` so a stub leaked onto the global cannot be mistaken for it. */
+const originalFetch = Bun.fetch;
+const touched: string[] = [];
+const unsubs: Array<() => void> = [];
+
+/** Register a session id so `afterEach` forgets it. */
+function use(id: string): string {
+  touched.push(id);
+  return id;
+}
+
+/** Follow wholesale blob replacements for a session, torn down with the rest. */
+function followReplaced(sessionId: string, listener: () => void): () => void {
+  const unsubscribe = subscribeSessionReplaced(sessionId, listener);
+  unsubs.push(unsubscribe);
+  return unsubscribe;
+}
+
+/** Count how many times a notification reaches a listener. */
+function counter(): { calls: number; listener: () => void } {
+  const state = { calls: 0, listener: () => { state.calls += 1; } };
+  return state;
+}
+
+afterEach(() => {
+  for (const unsubscribe of unsubs.splice(0)) unsubscribe();
+  for (const id of touched.splice(0)) forgetSession(id);
+  Reflect.set(globalThis, 'window', originalWindow);
+  Reflect.set(globalThis, 'fetch', originalFetch);
+});
+
+describe('session-state store: wholesale replacement notifications', () => {
+  test('migrateSessionState announces both ids as replaced', () => {
+    const from = use('new-replace');
+    const to = use('real-replace');
+    setSessionKey(from, 'layout.showRightPanel', true);
+    const fromProbe = counter();
+    const toProbe = counter();
+    followReplaced(from, fromProbe.listener);
+    followReplaced(to, toProbe.listener);
+
+    migrateSessionState(from, to);
+
+    expect(fromProbe.calls).toBe(1);
+    expect(toProbe.calls).toBe(1);
+    expect<boolean | undefined>(getSessionValue(to, 'layout.showRightPanel')).toBe(true);
+  });
+
+  test('a per-slot write is NOT a replacement', () => {
+    const id = use('slot-write');
+    const replaced = counter();
+    followReplaced(id, replaced.listener);
+
+    setSessionKey(id, 'layout.activeRightPanel', 'git');
+    clearSessionKey(id, 'layout.activeRightPanel');
+
+    // Only the wholesale paths (load/hydrate/migrate/forget) replace state;
+    // announcing a write here would make every editor and panel copy re-read
+    // on every keystroke elsewhere in the app.
+    expect(replaced.calls).toBe(0);
+  });
+
+  test('a blob landing, a hydrate and a delete all announce a replacement', async () => {
+    const id = use('replace-paths');
+    const probe = counter();
+    followReplaced(id, probe.listener);
+    Reflect.set(globalThis, 'window', {});
+    Reflect.set(globalThis, 'fetch', async () => ({ ok: true, json: async () => ({ state: { a: 1 } }) }));
+
+    await loadSession(id);
+    expect(probe.calls).toBe(1);
+
+    hydrateSession(id, { b: 2 });
+    expect(probe.calls).toBe(2);
+
+    forgetSession(id);
+    expect(probe.calls).toBe(3);
+  });
+
+  test('a subscriber on a null session id is never notified of a replacement', () => {
+    const probe = counter();
+    followReplaced(null as unknown as string, probe.listener);
+    const id = use('replace-null');
+    hydrateSession(id, { a: 1 });
+    expect(probe.calls).toBe(0);
+  });
+});

package/src/shared/lib/workspace/session-state/store.ts

@@ -68,7 +68,7 @@
  * - chat.draftAttachments     attachment metadata array
  */
 
-import { notifySessionKey } from '@/shared/lib/workspace/session-state/listeners';
+import { notifySessionKey, notifySessionReplaced } from '@/shared/lib/workspace/session-state/listeners';
 
 type SessionState = Record<string, unknown>;
 
@@ -263,8 +263,10 @@ export async function loadSession(sessionId: string): Promise<void> {
   }
   evictIfNeeded(sessionId);
   // The blob replaces every slot at once, so a follower that read the store
-  // before it arrived (no pick yet) has to re-read.
+  // before it arrived (no pick yet) has to re-read — including a private copy
+  // held by `useSessionState`, which does not follow per-slot writes.
   notifySessionKey(sessionId);
+  notifySessionReplaced(sessionId);
 }
 
 /** Seed the cache synchronously (e.g. from SSR-provided data). */
@@ -274,6 +276,7 @@ export function hydrateSession(sessionId: string | null, state: SessionState): v
   touchCacheEntry(sessionId);
   evictIfNeeded(sessionId);
   notifySessionKey(sessionId);
+  notifySessionReplaced(sessionId);
 }
 
 /**
@@ -308,6 +311,7 @@ export function forgetSession(sessionId: string): void {
   dirtySessions.delete(sessionId);
   lastTouched.delete(sessionId);
   notifySessionKey(sessionId);
+  notifySessionReplaced(sessionId);
 }
 
 /**
@@ -327,4 +331,11 @@ export function migrateSessionState(fromId: string, toId: string): void {
   // The adopted slot gained the whole transient state; the transient one lost it.
   notifySessionKey(toId);
   notifySessionKey(fromId);
+  // Both entries were REPLACED, not written slot by slot. `ready` does not
+  // change across an adoption (it was already true for the pending id), so
+  // without this a private copy kept the fallback it read on the commit the
+  // URL moved — the reported "opening panels in a new chat and sending the
+  // first prompt closes them all".
+  notifySessionReplaced(toId);
+  notifySessionReplaced(fromId);
 }

package/src/shared/lib/workspace/sidebar-toolbar.test.ts

@@ -16,12 +16,18 @@
 
 import { describe, expect, test } from 'bun:test';
 import {
+  MOBILE_TOOLBAR_ALWAYS_VISIBLE,
+  MOBILE_TOOLBAR_GAP_PX,
+  MOBILE_TOOLBAR_ITEM_PX,
+  MOBILE_TOOLBAR_PRIORITY,
+  MOBILE_TOOLBAR_PRIMARY_PX,
   SIDEBAR_TOOLBAR_PRIORITY,
   TOOLBAR_ALWAYS_VISIBLE,
   TOOLBAR_CLUSTER_GAP_PX,
   TOOLBAR_GAP_PX,
   TOOLBAR_ITEM_PX,
   TOOLBAR_PRIMARY_PX,
+  mobileToolbarCapacity,
   sidebarToolbarCapacity,
 } from '@/shared/lib/workspace/sidebar-toolbar';
 
@@ -30,6 +36,11 @@ function rowWidthFor(count: number): number {
   return TOOLBAR_PRIMARY_PX + TOOLBAR_CLUSTER_GAP_PX + count * (TOOLBAR_ITEM_PX + TOOLBAR_GAP_PX);
 }
 
+/** The phone's row width at which `count` slots fit beside the labelled pill. */
+function mobileRowWidthFor(count: number): number {
+  return MOBILE_TOOLBAR_PRIMARY_PX + count * (MOBILE_TOOLBAR_ITEM_PX + MOBILE_TOOLBAR_GAP_PX);
+}
+
 describe('sidebar toolbar capacity', () => {
   test('an unmeasured row keeps every control', () => {
     // A collapsed sidebar and the first render both report 0; hiding controls
@@ -75,3 +86,90 @@ describe('sidebar toolbar capacity', () => {
     expect(SIDEBAR_TOOLBAR_PRIORITY as string[]).not.toContain('close');
   });
 });
+
+/**
+ * The phone's drawer row, which is where the reported bug lived.
+ *
+ * A 390px phone leaves 366px of row, and the pill plus six 38px controls need
+ * 402 — so the row has always been over budget. It used to pay for that by
+ * squeezing whichever flex item could shrink, and because the label is
+ * `whitespace-nowrap` (min-content = the whole string) the shortfall landed
+ * entirely on the `Plus`: measured 15px at 430, 1px at 412 and 0px at
+ * 390/375/360. The row now drops a CONTROL into the `⋯` menu instead, and the
+ * label's 126px is budgeted for in full.
+ */
+describe('mobile toolbar capacity', () => {
+  test('an unmeasured row keeps every control', () => {
+    // First render, and a drawer that has not been laid out: hiding controls
+    // there would make the row flicker as it settles.
+    expect(mobileToolbarCapacity(0)).toBe(MOBILE_TOOLBAR_PRIORITY.length);
+  });
+
+  test('the row never budgets less than the labelled pill', () => {
+    // The whole bug: a pill that could not afford its own label. Every legal
+    // phone width must keep the icon AND the text, so the reserve is the
+    // labelled width rather than an icon-only floor.
+    expect(MOBILE_TOOLBAR_PRIMARY_PX).toBeGreaterThanOrEqual(126);
+  });
+
+  test('a phone-width row moves the tail into the menu', () => {
+    // 390px viewport − the drawer's 24px of padding = 366px of row.
+    const capacity = mobileToolbarCapacity(366);
+    expect(capacity).toBeLessThan(MOBILE_TOOLBAR_PRIORITY.length);
+    // New Workspace is the head, so it is on the row; the scheduler is the
+    // tail, so it is what the menu takes first.
+    expect(MOBILE_TOOLBAR_PRIORITY.slice(0, capacity)).toContain('new-workspace');
+    expect(MOBILE_TOOLBAR_PRIORITY.slice(capacity)).toContain('scheduler');
+  });
+
+  test('the view controls survive a Pixel 7 width', () => {
+    // 412px viewport, 388px of row: archive and sort are what the phone's own
+    // spec asserts are on the row, so they must outrank the two MODE controls
+    // — each of which opens something and returns.
+    const capacity = mobileToolbarCapacity(388);
+    const onRow = MOBILE_TOOLBAR_PRIORITY.slice(0, capacity);
+    expect(onRow).toContain('archive');
+    expect(onRow).toContain('sort');
+  });
+
+  test('a wide drawer shows every control', () => {
+    expect(mobileToolbarCapacity(mobileRowWidthFor(MOBILE_TOOLBAR_PRIORITY.length))).toBe(
+      MOBILE_TOOLBAR_PRIORITY.length,
+    );
+    // A tablet's drawer, and the desktop-width case.
+    expect(mobileToolbarCapacity(600)).toBe(MOBILE_TOOLBAR_PRIORITY.length);
+  });
+
+  test('the menu slot is counted, so the row never overflows', () => {
+    // `k` slots fit; one of them is the `⋯` button, so the row draws `k − 1`
+    // controls plus the menu. Without that subtraction the row overflowed by
+    // exactly one control.
+    //
+    // Scoped to a 320px phone — the narrowest width this layout targets — and
+    // up: below that the floor (the primary action is never dropped) is what
+    // decides, and no rule can fit a labelled pill plus a control in it.
+    for (let width = 296; width <= 600; width += 5) {
+      const capacity = mobileToolbarCapacity(width);
+      if (capacity >= MOBILE_TOOLBAR_PRIORITY.length) continue;
+      const drawn = capacity + 1; // the controls plus the menu
+      const needed = MOBILE_TOOLBAR_PRIMARY_PX + drawn * (MOBILE_TOOLBAR_ITEM_PX + MOBILE_TOOLBAR_GAP_PX);
+      expect(needed).toBeLessThanOrEqual(width + MOBILE_TOOLBAR_GAP_PX);
+    }
+  });
+
+  test('at least one control survives every width', () => {
+    for (let width = 0; width <= 600; width += 5) {
+      expect(mobileToolbarCapacity(width)).toBeGreaterThanOrEqual(MOBILE_TOOLBAR_ALWAYS_VISIBLE);
+    }
+  });
+
+  test('capacity grows monotonically with the row', () => {
+    let previous = 0;
+    for (let width = 100; width <= 600; width += 10) {
+      const capacity = mobileToolbarCapacity(width);
+      expect(capacity).toBeGreaterThanOrEqual(previous);
+      previous = capacity;
+    }
+    expect(previous).toBe(MOBILE_TOOLBAR_PRIORITY.length);
+  });
+});

package/src/shared/lib/workspace/sidebar-toolbar.ts

@@ -104,3 +104,81 @@ export function sidebarToolbarCapacity(available: number): number {
   const fits = Math.floor((budget - TOOLBAR_ITEM_PX - TOOLBAR_CLUSTER_GAP_PX) / (TOOLBAR_ITEM_PX + TOOLBAR_GAP_PX));
   return Math.max(TOOLBAR_ALWAYS_VISIBLE, Math.min(count, fits));
 }
+
+/* -------------------------------------------------------------------------
+ * The PHONE's drawer row.
+ *
+ * Same rule, different metrics: one row of `w-9.5` (38px) buttons with
+ * `space-x-2` (8px) gaps, inside a `p-3` drawer — so 46px per control against
+ * the desktop's 34. The phone therefore runs out of room much earlier, and it
+ * used to answer that by squeezing whatever flexbox could shrink — which was
+ * the primary button's own `Plus` icon, measured at 1px at 412 and 0px at
+ * 390/375/360. The row now keeps the head of this list and moves the tail into
+ * the same `⋯` menu the desktop toolbar uses.
+ *
+ * `search` is absent on purpose: the phone's search is a permanent field in the
+ * row below, not a toggle, so it is never a control that can overflow.
+ * ---------------------------------------------------------------------- */
+
+/** One phone toolbar control (`w-9.5`). */
+export const MOBILE_TOOLBAR_ITEM_PX = 38;
+/** `space-x-2` between the primary pill and every control. */
+export const MOBILE_TOOLBAR_GAP_PX = 8;
+/**
+ * The primary pill with its label: `Plus` (15) + the `space-x-2` gap (8) + the
+ * whole "New Session" string (75) + `px-3.5` (28) + the borders, measured at
+ * 126px in the browser.
+ *
+ * This is the desktop row's rule applied to the phone: the label is budgeted
+ * for in FULL, so it never ellipsises in practice and never leaves the row.
+ * Letting it share a flex row with the icons is what produced the reported bug
+ * — the label's `whitespace-nowrap` min-content is the whole string, so it
+ * refused to shrink and the `Plus` beside it absorbed the entire shortfall,
+ * measured 1px at 412 and 0px at 390/375/360.
+ */
+export const MOBILE_TOOLBAR_PRIMARY_PX = 126;
+/** Floors `mobileToolbarCapacity`, so the head of the list always survives. */
+export const MOBILE_TOOLBAR_ALWAYS_VISIBLE = 1;
+
+/**
+ * Most important first — the tail is what the `⋯` menu takes.
+ *
+ * Refresh outranks the modes because it is the one control a stale list is
+ * repaired with (the desktop row floors it for the same reason). The two VIEW
+ * controls follow: archive and sort decide what the list shows, and they are
+ * the pair the phone's own spec asserts are on the row at a Pixel 7 width
+ * (412px, a 388px row, four controls beside the menu). The two MODE controls
+ * are the tail, because each one is entered deliberately and returns: the
+ * scheduler opens a modal, and batch selection is a transient state whose own
+ * action bar takes over the drawer once it is on.
+ */
+export const MOBILE_TOOLBAR_PRIORITY: SidebarToolbarControl[] = [
+  'new-workspace',
+  'refresh',
+  'archive',
+  'sort',
+  'scheduler',
+  'select',
+];
+
+/**
+ * How many of `MOBILE_TOOLBAR_PRIORITY` fit beside the primary pill in a row
+ * `available` px wide.
+ *
+ * `available` is the row's content width (the drawer's `p-3` already removed).
+ * A row that reports `0` keeps the full set: the capacity only ever hides a
+ * control it has measured no room for, so a first render cannot flicker.
+ *
+ * The `⋯` menu, when it is needed, costs one of the counted slots — the same
+ * 38px plus gap as any control it replaces. That is why a row that fits `k`
+ * slots but not all of them shows `k − 1` controls: the last one is the menu.
+ */
+export function mobileToolbarCapacity(available: number): number {
+  const count = MOBILE_TOOLBAR_PRIORITY.length;
+  if (!(available > 0)) return count;
+
+  const step = MOBILE_TOOLBAR_ITEM_PX + MOBILE_TOOLBAR_GAP_PX;
+  const fits = Math.floor((available - MOBILE_TOOLBAR_PRIMARY_PX) / step);
+  if (fits >= count) return count;
+  return Math.max(MOBILE_TOOLBAR_ALWAYS_VISIBLE, Math.min(count, fits - 1));
+}