@kabmo-labs/kabmo 0.4.0 → 0.5.1

package/src/client/components/mobile/mobile-session-sidebar/Dock.tsx

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's LEFT dock: the chip strip and the body of a placed panel.
+ *
+ * The desktop's left column is a dock — the session list plus whatever plugin
+ * the user placed beside it, switched by a vertical rail. A phone has no room
+ * for a rail, so the rail is the same horizontal chip strip the right drawer
+ * uses (`panel-chips.tsx`), and the body is the same `panel.render`.
+ *
+ * The session list is NOT rendered here: the phone's list is its own component
+ * (`MobileSessionList`), unlike the desktop's `SessionsView`, so the caller
+ * keeps drawing it and only hands over the OTHER views. That is also why the
+ * strip is drawn only while it has something else to switch to.
+ */
+
+import { Suspense } from 'preact/compat';
+import { PanelHostProvider } from '@kabmo-labs/kabmo-ui';
+import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
+import { PluginPanelBody } from '@/client/components/workspace/plugin-panel/resolve';
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
+import { PanelChips } from '@/client/components/mobile/panel-chips';
+
+/** The strip row, drawn under the drawer's title. */
+export function MobileDockStrip({
+  panels,
+  activeId,
+  onSelect,
+}: {
+  panels: readonly ResolvedPanel[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="px-3 py-1.5 border-b border-ink/10 bg-canvas flex-shrink-0">
+      <PanelChips panels={panels} activeId={activeId} onSelect={onSelect} />
+    </div>
+  );
+}
+
+/**
+ * The body of one placed panel.
+ *
+ * A selection naming a panel that is switched off, uninstalled or still loading
+ * has no entry — `PluginPanelBody` says which, rather than leaving the drawer
+ * blank. That is the same notice the desktop dock draws.
+ */
+export function MobileDockBody({
+  panelKey,
+  panel,
+  body,
+}: {
+  panelKey: string;
+  panel?: ResolvedPanel;
+  body: PanelBodyProps;
+}) {
+  if (!panel) {
+    return (
+      <div className="flex-1 min-h-0">
+        <PluginPanelBody panelKey={panelKey} />
+      </div>
+    );
+  }
+  return (
+    <div className="flex-1 min-h-0 overflow-hidden relative">
+      <Suspense
+        fallback={
+          <div className="h-full flex items-center justify-center text-ink/40">
+            <span className="text-xs font-mono">Loading…</span>
+          </div>
+        }
+      >
+        <PanelHostProvider value={body}>{panel.render(body)}</PanelHostProvider>
+      </Suspense>
+    </div>
+  );
+}

package/src/client/components/mobile/mobile-session-sidebar/Header.tsx

@@ -1,7 +1,8 @@
 import { X } from 'lucide-preact';
 import { BrandWordmark } from '@/client/components/common/brand-wordmark';
+import { titlebarPaddingLeft, titlebarPaddingRight } from '@/shared/lib/ui/titlebar';
 
-export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
+export function MobileSessionHeader({ onClose, viewLabel = 'Sessions' }: { onClose: () => void; viewLabel?: string }) {
   return (
     <div 
       className="border-b border-ink/10 flex items-center justify-between px-3 flex-shrink-0 bg-canvas titlebar-drag-region select-none"
@@ -10,8 +11,10 @@ export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
         // `px-3`, the toolbar's own inset: the wordmark above and the New
         // Session button below share one left edge, which the header's old
         // 14px did not.
-        paddingLeft: 'max(0.75rem, env(safe-area-inset-left, 0px), env(titlebar-area-x, 0px))',
-        paddingRight: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+        paddingLeft: titlebarPaddingLeft('0.75rem', true),
+        // The drawer is the full window width, so on a desktop showing the
+        // mobile layout its close button sits under the window controls too.
+        paddingRight: titlebarPaddingRight('0.75rem', true),
         paddingTop: 'env(safe-area-inset-top, 0px)',
       }}
     >
@@ -20,7 +23,7 @@ export function MobileSessionHeader({ onClose }: { onClose: () => void }) {
           <BrandWordmark className="text-[16px]" />
         </span>
         <span className="text-ink/25 text-xs select-none">/</span>
-        <span className="text-[11px] font-semibold text-ink/60 uppercase tracking-wider font-mono">Sessions</span>
+        <span className="text-[11px] font-semibold text-ink/60 uppercase tracking-wider font-mono">{viewLabel}</span>
       </div>
 
       <button

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -157,7 +157,12 @@ export function MobileSessionRow({
                   <Hourglass size={13} className="text-ink/60 animate-pulse" />
                 </span>
               ) : status === 'stream' ? (
-                <Loader2 size={13} className="text-ink/50 animate-spin" />
+                // Same label the desktop row carries, for the same reason: the
+                // phone draws the identical cue, and an unlabelled spinner is
+                // both unreachable to a screen reader and unassertable.
+                <span role="status" aria-label="Running">
+                  <Loader2 size={13} className="text-ink/50 animate-spin" />
+                </span>
               ) : status ? (
                 <Check size={13} className="text-ink/50" />
               ) : null}

package/src/client/components/mobile/mobile-session-sidebar/use-dock.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone drawer's LEFT dock state.
+ *
+ * The desktop's left column is a dock — the session list plus whatever plugin
+ * panel the user placed beside it, switched by a vertical rail. A phone has no
+ * room for a rail, so the same catalog is switched by the chip strip the right
+ * drawer uses, and everything that decides WHICH view is on screen lives here:
+ *
+ * - the catalog is `usePanelCatalog('left')`, the dock's own list (`sessions`
+ *   first, then the placed plugins in placement order), so this drawer and the
+ *   desktop column cannot disagree about what lives here;
+ * - the selection is PERSISTED per session, like the right drawer's tab, because
+ *   the drawer unmounts when it closes;
+ * - a stored id naming a panel that has moved back to the right resolves to the
+ *   session list, while one naming nothing at all is returned as-is so the body
+ *   can say WHY rather than showing a blank column.
+ */
+
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
+import { usePanelCatalog, useLeftDockView } from '@/client/components/workspace/plugin-panel/catalog';
+import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
+import { useLeftDock } from '@/client/hooks/workspace/left-dock';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { SESSIONS_VIEW_ID } from '@/shared/lib/workspace/left-dock';
+
+export interface MobileDockState {
+  /** The strip's chips: `sessions` and every placed panel. */
+  catalog: ResolvedPanel[];
+  /** The placed panels only — what makes the strip worth drawing. */
+  placed: ResolvedPanel[];
+  activeView: string;
+  setActiveView: (id: string) => void;
+  /** True while the session list is the view on screen. */
+  showingSessions: boolean;
+  activePanel: ResolvedPanel | undefined;
+  /** Whether the rail is on at all. */
+  enabled: boolean;
+}
+
+export function useMobileDock(): MobileDockState {
+  const dock = useLeftDock();
+  const catalog = usePanelCatalog('left');
+  const [stored, setStored] = useSessionState<string>('layout.mobileLeftPanel', SESSIONS_VIEW_ID);
+  const activeView = useLeftDockView(stored, dock.enabled);
+  const placed = catalog.filter((panel) => panel.id !== SESSIONS_VIEW_ID);
+
+  return {
+    catalog,
+    placed,
+    activeView,
+    setActiveView: setStored,
+    showingSessions: activeView === SESSIONS_VIEW_ID,
+    activePanel: catalog.find((panel) => panel.id === activeView),
+    enabled: dock.enabled,
+  };
+}
+
+/**
+ * The props a placed panel's body receives.
+ *
+ * The drawer draws its own title row, so `showHeader` is false — a view's own
+ * header would be a second one, the same rule the right drawer follows.
+ */
+export function dockBodyProps(input: {
+  sessionId: number | string | null;
+  refreshKey: number;
+  rootPath?: string;
+  onRefresh?: () => void;
+  onOpenFile?: (file: unknown) => void;
+  onClose: () => void;
+}): PanelBodyProps {
+  return {
+    className: 'w-full h-full',
+    sessionId: input.sessionId === null ? null : String(input.sessionId),
+    enabled: true,
+    active: true,
+    refreshKey: input.refreshKey,
+    ...(input.rootPath ? { rootPath: input.rootPath } : {}),
+    ...(input.onRefresh ? { onRefresh: input.onRefresh } : {}),
+    ...(input.onOpenFile ? { onOpenFile: input.onOpenFile } : {}),
+    onClose: input.onClose,
+    showHeader: false,
+  };
+}

package/src/client/components/mobile/panel-chips.test.tsx

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's panel strip and dock body — the LEFT drawer's half of the panel
+ * system, which did not exist before.
+ *
+ * Three properties, and each was the reported symptom:
+ *
+ * - A placed plugin panel gets a CHIP in the left drawer. Before this the
+ *   placement was stored, the desktop drew a button for it, and a phone had no
+ *   surface at all — the panel was reachable only through the right drawer.
+ * - The chip that is ON is the one marked pressed, so the drawer says which
+ *   panel it is showing.
+ * - A stored view naming a panel that no longer resolves draws the NOTICE, not
+ *   a blank column, and keeps the strip so the session list is reachable.
+ *
+ * Rendered with `h()` against happy-dom, with the kit's services installed so a
+ * plugin row resolves its identity the way the real host resolves it.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { configureUiKit } from '@kabmo-labs/kabmo-ui';
+import { makeUiKitServices } from '@kabmo-labs/kabmo-sdk/testing';
+import { PanelChips } from '@/client/components/mobile/panel-chips';
+import { MobileDockBody } from '@/client/components/mobile/mobile-session-sidebar/Dock';
+import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
+import type { PanelBodyProps } from '@/client/components/workspace/panels/builtin';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'MouseEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  configureUiKit(makeUiKitServices());
+});
+
+beforeEach(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in nativeGlobals)) nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  // The dock's body renders panels, and a real panel reads a realtime topic on
+  // mount. This window's origin is `localhost`, where nothing listens, so a real
+  // dial fails asynchronously — after this suite has restored the globals, which
+  // reports as an unhandled error in the NEXT file.
+  silenceRealtime();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  restoreRealtime();
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (key in nativeGlobals) target[key] = nativeGlobals[key];
+    else delete target[key];
+  }
+});
+
+/** A catalog entry with only what the strip and the body read. */
+function panel(id: string, overrides: Partial<ResolvedPanel> = {}): ResolvedPanel {
+  return {
+    id,
+    side: id === 'sessions' ? 'left' : 'left',
+    title: `${id} title`,
+    label: id,
+    name: '',
+    builtin: true,
+    requiresWorkspace: false,
+    liveWhileHidden: false,
+    minWidth: 200,
+    defaultWidth: 280,
+    defaultFraction: 0.25,
+    render: () => h('div', { 'data-rendered': id }, `body of ${id}`),
+    ...overrides,
+  };
+}
+
+const body: PanelBodyProps = { enabled: true, active: true, refreshKey: 0 };
+
+async function mountStrip(panels: ResolvedPanel[], activeId: string, onSelect = (_id: string) => {}) {
+  await act(async () => {
+    render(h(PanelChips, { panels, activeId, onSelect }), container);
+  });
+}
+
+describe('PanelChips', () => {
+  test('draws one chip per panel, in the order it is given', async () => {
+    await mountStrip([panel('sessions'), panel('plugin:demo:rightPanel', { builtin: false, name: 'demo', title: 'Demo — demo' })], 'sessions');
+    const labels = [...container.querySelectorAll('button')].map((el) => el.getAttribute('title'));
+    expect(labels).toEqual(['sessions title', 'Demo — demo']);
+  });
+
+  test('the active chip is the pressed one, and only it', async () => {
+    await mountStrip([panel('sessions'), panel('plugin:demo:rightPanel', { builtin: false, name: 'demo' })], 'plugin:demo:rightPanel');
+    const pressed = [...container.querySelectorAll('button')].map((el) => el.getAttribute('aria-pressed'));
+    expect(pressed).toEqual(['false', 'true']);
+  });
+
+  test('a click hands back the panel id, which is what the drawer stores', async () => {
+    const picked: string[] = [];
+    await mountStrip([panel('sessions'), panel('plugin:demo:rightPanel', { builtin: false, name: 'demo' })], 'sessions', (id) => picked.push(id));
+    const chip = [...container.querySelectorAll('button')].at(-1) as HTMLButtonElement;
+    await act(async () => chip.click());
+    expect(picked).toEqual(['plugin:demo:rightPanel']);
+  });
+
+  test('the Source Control dot is drawn only where it is asked for', async () => {
+    // The left catalog never holds a built-in view, so the left drawer passes
+    // nothing and must not grow a dot it can never mean.
+    await mountStrip([panel('git', { title: 'Source Control', label: 'GIT' })], 'git');
+    expect(container.querySelector('[title="Uncommitted changes"]')).toBeNull();
+    render(null, container);
+    await act(async () => {
+      render(h(PanelChips, { panels: [panel('git', { title: 'Source Control', label: 'GIT' })], activeId: 'git', onSelect: () => {}, hasGitChanges: true }), container);
+    });
+    expect(container.querySelector('[title="Uncommitted changes"]')).not.toBeNull();
+  });
+});
+
+describe('MobileDockBody', () => {
+  test('renders the panel it is handed', async () => {
+    await act(async () => {
+      render(h(MobileDockBody, { panelKey: 'plugin:demo:rightPanel', panel: panel('plugin:demo:rightPanel', { builtin: false, name: 'demo' }), body }), container);
+    });
+    expect(container.querySelector('[data-rendered="plugin:demo:rightPanel"]')).not.toBeNull();
+  });
+
+  test('a panel that does not resolve says WHY instead of drawing a blank column', async () => {
+    // No provider is installed for this key, so the notice reports "no plugin
+    // with this id is installed" — the same component the desktop dock uses.
+    await act(async () => {
+      render(h(MobileDockBody, { panelKey: 'plugin:gone:rightPanel', panel: undefined, body }), container);
+    });
+    expect(container.textContent).toContain('Plugin unavailable');
+    // The notice names the PLUGIN, not the instance key, and gives the reason.
+    expect(container.textContent).toContain('gone');
+    expect(container.textContent).toContain('no plugin with this id is installed');
+  });
+});

package/src/client/components/mobile/panel-chips.tsx

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's panel tab strip — ONE component, drawn by both drawers.
+ *
+ * A phone has no rail: the desktop's vertical activity bar is a horizontal
+ * strip of chips here. The right drawer had this from the start and the left
+ * drawer (the session list) did not, so a plugin panel placed on the left was
+ * reachable only through the RIGHT drawer's `all` catalog — the placement
+ * existed and nothing on the left ever showed it.
+ *
+ * Both drawers render this, so the two cannot drift in label, active state or
+ * the Source Control dot. The strip is scrollable rather than wrapping: a phone
+ * drawer is one row tall, and a wrapped strip would eat the list's height.
+ */
+
+import type { ResolvedPanel } from '@/client/components/workspace/plugin-panel/catalog';
+import { PluginMark } from '@/client/components/settings/categories/panel-plugins/PluginMark';
+import { PANEL_MARK_SIZE } from '@/shared/lib/workspace/right-panels';
+
+interface PanelChipsProps {
+  panels: readonly ResolvedPanel[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  /**
+   * Draw the Source Control dot on the `git` chip. The left catalog never holds
+   * a built-in view, so only the right drawer passes this.
+   */
+  hasGitChanges?: boolean;
+}
+
+export function PanelChips({ panels, activeId, onSelect, hasGitChanges = false }: PanelChipsProps) {
+  return (
+    <div className="flex items-center space-x-1.5 overflow-x-auto no-scrollbar py-1">
+      {panels.map((panel) => {
+        const active = panel.id === activeId;
+        return (
+          <button
+            key={panel.id}
+            type="button"
+            onClick={() => onSelect(panel.id)}
+            aria-pressed={active}
+            // The name is the panel's TITLE, never its visible label. The label
+            // only renders while the chip is active, so without this the same
+            // button is called "Resources — stats" before a click and
+            // "Resources" after it — a control that renames itself when used is
+            // unusable to a screen reader and unfindable to a spec.
+            aria-label={panel.title}
+            className={`relative flex items-center transition-all cursor-pointer ${
+              active
+                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+            }`}
+            title={panel.title}
+          >
+            {panel.builtin ? panel.icon : <PluginMark name={panel.name} iconUrl={panel.iconUrl} size={PANEL_MARK_SIZE} />}
+            {active && (
+              <span className={panel.id === 'git' ? 'tracking-wide' : undefined}>{panel.label}</span>
+            )}
+            {panel.id === 'git' && hasGitChanges && (
+              <span
+                className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-info"
+                title="Uncommitted changes"
+              />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/chat-input/Toolbar.tsx

@@ -115,7 +115,7 @@ export function ComposerToolbar({
             selectedModel={selectedModel ?? undefined}
             onSelectModel={onSelectModel}
             onThinkingLevelChange={onThinkingLevelChange}
-            className={isMobile ? 'min-w-0 max-w-[58%]' : undefined}
+            className="min-w-0"
           />
         )}
 

package/src/client/components/workspace/chat-timeline/chat-input/compact.test.tsx

@@ -18,12 +18,12 @@
  * (or a focused composer) never enters compact at all.
  */
 
-import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
 import { Window } from 'happy-dom';
 import { h, render } from 'preact';
 import { act } from 'preact/test-utils';
 import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input';
-import { resetRealtimeClient } from '@/shared/lib/realtime/client';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
 
 const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'HTMLTextAreaElement', 'Event', 'MouseEvent', 'KeyboardEvent', 'FocusEvent'] as const;
 const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
@@ -47,14 +47,22 @@ afterAll(() => {
 
 let container: HTMLElement | null = null;
 
+beforeEach(() => {
+  // Per case, because `restoreRealtime` clears the constructor: the composer's
+  // model picker subscribes on every mount, and this origin has no listener to
+  // reach, so a real dial would fail after the globals are restored.
+  silenceRealtime();
+});
+
 afterEach(() => {
   container?.remove();
   container = null;
   // The composer's model picker subscribes to the realtime topic, and its
   // reconnect timer outlives this file's DOM — it then fires into a torn-down
   // `window` and surfaces as an unhandled error in whichever test runs next.
-  // Resetting the client is what the app's own suites do for the same reason.
-  resetRealtimeClient();
+  // `restoreRealtime` resets the client AND puts the real constructor back, so
+  // the silence does not follow this file into the next one.
+  restoreRealtime();
 });
 
 interface MountOptions {

package/src/client/components/workspace/model-dropdown/index.tsx

@@ -239,10 +239,10 @@ export function ModelDropdown({
                 />
               )}
             </span>
-            <span className="flex items-center space-x-1 min-w-0 max-w-[280px]">
-              <span className="text-ink/50 font-normal truncate">{selectedModel.provider}</span>
+            <span className="flex items-center space-x-1 min-w-0">
+              <span className="shrink-0 text-ink/50 font-normal">{selectedModel.provider}</span>
               <span className="text-ink/30 flex-shrink-0">•</span>
-              <span className="truncate">{selectedModel.name}</span>
+              <span className="min-w-0 flex-1 truncate">{selectedModel.name}</span>
             </span>
           </>
         ) : (

package/src/client/components/workspace/model-dropdown/trigger.test.ts

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The composer trigger's provider/model label.
+ *
+ * The trigger showed `kenari • Deepseek-V4-1-Flash` as `kena… • Deepse…` on a
+ * 412px phone with 64px of unused room beside it. Two hardcoded caps were the
+ * cause, and neither could see the space it was sitting in:
+ *
+ * - the WRAPPER carried `max-w-[58%]` on the phone, a share of the toolbar
+ *   that ignores the four controls to its right;
+ * - the LABEL carried `max-w-[280px]`, a fixed budget that has nothing to do
+ *   with the panel width (the chat column is 320px wide on a 1440px screen).
+ *
+ * Measured before/after at a 412px viewport: the label went 117px → 210px
+ * available and the model name 80px → 110px, with the toolbar reporting no
+ * overflow and the action strip still ending 12px inside its own edge.
+ *
+ * The rule this file pins is the one that has to hold at EVERY width: the
+ * model name is the only thing that gives up width. The provider is an
+ * identity ("kenari" and "kenari-jatis" are different accounts), so shrinking
+ * it first made two accounts render as the same `kena…`.
+ */
+
+import { afterAll, afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { ModelDropdown } from '@/client/components/workspace/model-dropdown/index';
+import type { AIModelOption } from '@/shared/types';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
+
+const MODEL: AIModelOption = {
+  id: 'deepseek-v4-1-flash',
+  name: 'Deepseek-V4-1-Flash',
+  provider: 'kenari',
+};
+
+let container: HTMLElement;
+
+beforeEach(() => {
+  installDomGlobals(new Window());
+  // The picker reads the `models` topic on mount, and this window has no origin
+  // (`about:blank`), so a real dial would target `ws:///api/realtime/ws` and
+  // fail asynchronously — after this suite has restored the globals, which
+  // reports as an unhandled error in the NEXT file. The channel is not what this
+  // file measures.
+  silenceRealtime();
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+  restoreRealtime();
+  restoreDomGlobals();
+});
+
+afterAll(() => restoreDomGlobals());
+
+function mount(className: string, model: AIModelOption = MODEL): HTMLElement {
+  act(() => {
+    render(h(ModelDropdown, { selectedModel: model, className }), container);
+  });
+  return container;
+}
+
+/** The trigger button is the only one carrying the provider • model title. */
+function trigger(el: HTMLElement): HTMLButtonElement {
+  const button = el.querySelector('button[title]') as HTMLButtonElement | null;
+  if (!button) throw new Error('model trigger button not found');
+  return button;
+}
+
+function labelParts(el: HTMLElement): { provider: HTMLElement; separator: HTMLElement; model: HTMLElement } {
+  const provider = el.querySelector('button[title] > span > span') as HTMLElement | null;
+  const separator = provider?.nextElementSibling as HTMLElement | null;
+  const model = separator?.nextElementSibling as HTMLElement | null;
+  if (!provider || !separator || !model) throw new Error('label parts not found');
+  return { provider, separator, model };
+}
+
+describe('composer model trigger label', () => {
+  test('grows to its content instead of a fixed px budget', () => {
+    // `max-w-[280px]` is what truncated a 216px model name inside a 968px
+    // toolbar; the cap has to come from the flex parent, not from a constant.
+    const { provider, model } = labelParts(mount('min-w-0'));
+    const label = provider.parentElement!;
+
+    expect(label.className).not.toContain('max-w-');
+    expect(provider.className).not.toContain('truncate');
+    expect(model.className).toContain('truncate');
+  });
+
+  test('keeps the provider at its natural width and lets the model shrink', () => {
+    // Two accounts (`kenari` / `kenari-jatis`) render identically once the
+    // provider truncates, which is why it must not be a shrink target.
+    const { provider, separator, model } = labelParts(mount('min-w-0'));
+
+    expect(provider.className).toContain('shrink-0');
+    expect(separator.className).toContain('shrink-0');
+    expect(model.className).toContain('flex-1');
+    expect(model.className).toContain('min-w-0');
+  });
+
+  test('the trigger itself may shrink on every layout', () => {
+    // The phone-only `max-w-[58%]` made the trigger a property of the layout
+    // rather than of the room beside it: a 479px viewport left 64px unused.
+    const button = trigger(mount('min-w-0'));
+    expect(button.className).toContain('min-w-0');
+    expect(button.className).not.toContain('max-w-[58%]');
+  });
+
+  test('names both halves in the title, so an ellipsis never hides the identity', () => {
+    const button = trigger(mount('min-w-0'));
+    expect(button.title).toBe('kenari • Deepseek-V4-1-Flash');
+  });
+});

package/src/client/hooks/chat/timeline/queue-rewind.test.ts

@@ -28,6 +28,7 @@ import type { QueuedMessage } from '@/shared/types';
 import { SessionStateContext } from '@/client/hooks/workspace/session-state/context';
 import { useChatTimelineQueue, type ChatTimelineQueueResult } from '@/client/hooks/chat/timeline/queue';
 import { requestRewind } from '@/client/hooks/chat/timeline/rewind';
+import { restoreRealtime, silenceRealtime } from '@/test-support/silent-socket';
 
 const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'CustomEvent'] as const;
 /** The runner's own globals, restored on teardown so later files still have them. */
@@ -80,12 +81,17 @@ afterAll(() => {
   }
 });
 beforeEach(() => {
+  // The queue hook subscribes to its session topic on mount, and this origin has
+  // no listener: a real dial would fail asynchronously, after the globals are
+  // restored. Per case, because `restoreRealtime` clears the constructor.
+  silenceRealtime();
   calls.length = 0;
   canonical = [];
   gate = null;
   stubFetch();
 });
 afterEach(() => {
+  restoreRealtime();
   if (container) render(null, container);
   container?.remove();
   latest = null;