@kabmo-labs/kabmo 0.3.1 → 0.5.0

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

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'preact/hooks';
-import { ChevronDown, ChevronRight, ChevronUp, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
+import { ChevronDown, ChevronRight, GitBranch, MessageSquare, MoreHorizontal, Plus } from 'lucide-preact';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
 import { SubagentList } from '@/client/components/common/subagent-list';
@@ -17,6 +17,7 @@ import type { WorkspaceFolderData } from '@/shared/types';
 import type { BatchBinding } from '@/client/components/common/batch-selection/types';
 import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
 import { SelectionCheckbox } from '@/client/components/common/batch-selection/SelectionCheckbox';
+import { SessionRevealRow } from '@/client/components/mobile/mobile-session-sidebar/RevealRow';
 
 interface MobileSessionCategoryProps {
   folder: WorkspaceFolderData;
@@ -32,6 +33,8 @@ interface MobileSessionCategoryProps {
   batch?: BatchBinding;
   /** Start a session selection scoped to this workspace, from its `⋯` menu. */
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop a held prompt from its row's menu. */
+  onCancelWait?: (waitId: string) => void;
 }
 
 export function MobileSessionCategory({
@@ -46,6 +49,7 @@ export function MobileSessionCategory({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: MobileSessionCategoryProps) {
   const { visibleCount, showMore, showLess, canShowLess } = useShowMore();
   const { refresh } = useSidebarData();
@@ -125,7 +129,7 @@ export function MobileSessionCategory({
     <div className="mb-4">
       <div
         onClick={batch ? undefined : onToggleExpand}
-        className="flex items-center justify-between pl-4 pr-3 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
+        className="flex items-center justify-between gap-2 py-2 cursor-pointer hover:bg-ink/5 rounded-lg select-none transition-colors"
       >
         <div className="flex items-center space-x-2 min-w-0">
           {folderCheckbox && folderSummary ? (
@@ -138,11 +142,11 @@ export function MobileSessionCategory({
             />
           ) : (
           <>
-          {/* The folder glyph occupies the same 16px left slot the session rows
-              give their roster toggle, so the two columns line up down the
-              drawer — the icon, the chevron and every row's status glyph share
-              one x. Desktop gets this from one shared slot; the drawer's
-              padding is what differs, hence the matching `pl-4`. */}
+          {/* The folder glyph occupies the same 16px slot the session rows give
+              their status/roster glyph, and the row carries NO leading inset of
+              its own: the drawer list's `p-3` is the gutter, so this glyph starts
+              at the same x as the New Session button above it (12px) and as the
+              search field's frame. One left edge down the whole drawer. */}
           <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
             {folder.customIconUrl ? (
               <img
@@ -227,14 +231,23 @@ export function MobileSessionCategory({
             )}
           </div>
 
-          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          {/* The disclosure glyph's BOX ends on the list's content edge — the
+              same x the toolbar row's last control ends on above it — and its
+              ink sits 4px inside it (`pr-1`), which is the inset a session
+              row's `⋯` / roster chevron uses. So the drawer's right column is
+              one line of INK, not just one line of boxes: measured before, the
+              folder chevron's ink ran 6px further right than every row glyph
+              beneath it. */}
+          <span className="flex items-center justify-center pr-1">
+            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </span>
           </>
           )}
         </div>
       </div>
 
       {listOpen && (
-        <div className="mt-0.5 space-y-0.5 pl-2">
+        <div className="mt-0.5 space-y-0.5">
           {visibleSessions.map((session) => {
             const sessionKey = String(session.id);
             const isSessionActive = String(activeSessionId) === sessionKey;
@@ -272,6 +285,12 @@ export function MobileSessionCategory({
                   onRenameWithAi={
                     sessionKey.startsWith('new-') ? undefined : () => void handleRenameWithAi(session)
                   }
+                  waitingFor={session.waitingFor ? { title: session.waitingFor.title } : undefined}
+                  onCancelWait={
+                    session.waitingFor
+                      ? () => onCancelWait?.(session.waitingFor!.waitId)
+                      : undefined
+                  }
                   selectable={sessionCheckboxes}
                   selected={Boolean(batch?.selected.includes(sessionKey))}
                   onToggleSelect={batch ? () => batch.toggle(sessionKey) : undefined}
@@ -283,42 +302,13 @@ export function MobileSessionCategory({
             );
           })}
 
-          {/* Reveal / collapse controls, one row — parity with the desktop
-              category. Same window, so the phone cannot offer a different
-              boundary than the sidebar. */}
-          {(hiddenCount > 0 || canShowLess) && !sessionCheckboxes && (
-            <div className="flex items-center gap-1">
-              {hiddenCount > 0 && (
-                <button
-                  type="button"
-                  onClick={showMore}
-                  className="flex items-center min-w-0 text-left pl-2 pr-3 py-2 text-xs text-ink/60 hover:text-ink"
-                >
-                  {/* `pl-2` inside the `pl-2` list is what lands this chevron's
-                      centre on the folder header's icon column (16px + 8px), and
-                      the label then starts at 40px — the x a row's title occupies
-                      (16px slot + 8px gap). The `space-x-1.5` this replaced put
-                      both 4px left of the list they belong to. */}
-                  <span className="w-4 h-4 flex-shrink-0 flex items-center justify-center">
-                    <ChevronDown size={12} />
-                  </span>
-                  <span className="w-2 shrink-0" />
-                  <span className="truncate">Show more sessions ({hiddenCount})</span>
-                </button>
-              )}
+          <SessionRevealRow
+            hiddenCount={sessionCheckboxes ? 0 : hiddenCount}
+            canShowLess={!sessionCheckboxes && canShowLess}
+            onShowMore={showMore}
+            onShowLess={showLess}
+          />
 
-              {canShowLess && (
-                <button
-                  type="button"
-                  onClick={showLess}
-                  className="ml-auto shrink-0 flex items-center gap-1 text-xs text-ink/60 hover:text-ink px-3 py-2"
-                >
-                  <ChevronUp size={12} />
-                  <span className="truncate">Show less</span>
-                </button>
-              )}
-            </div>
-          )}
         </div>
       )}
 

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

@@ -16,6 +16,8 @@ interface MobileSessionListProps {
   /** Present only while a batch selection is active. */
   batch?: BatchBinding;
   onStartSessionSelection?: (folderId: number) => void;
+  /** Drop a held prompt from its row's menu. */
+  onCancelWait?: (waitId: string) => void;
 }
 
 export function MobileSessionList({
@@ -30,12 +32,17 @@ export function MobileSessionList({
   onToast,
   batch,
   onStartSessionSelection,
+  onCancelWait,
 }: MobileSessionListProps) {
   // No fade wiring here: the app-wide scrollbar rule reveals this list's bar
   // from the document's own capture-phase listener (`lib/scrollbar-activity`),
   // so the list does not need a ref, a handler, or a re-render per scroll.
+  // `pl-3 pr-2`, not an even `p-3`: this container scrolls, so its scrollbar is
+  // taken out of the box and the same 12px on both sides LOOKS wider on the
+  // right. One step less on the right evens the optical margin back up, and it
+  // is why the rows below are aligned to 12 and not to 12 + the bar.
   return (
-    <div className="flex-1 scrollbar-overlay-container p-3">
+    <div className="flex-1 scrollbar-overlay-container pl-3 pr-2 py-3">
       {folders.length === 0 ? (
         <div className="text-center py-12 text-xs text-ink/50 italic">
           No matching sessions found
@@ -55,6 +62,7 @@ export function MobileSessionList({
             onToast={onToast}
             batch={batch}
             onStartSessionSelection={onStartSessionSelection}
+            onCancelWait={onCancelWait}
           />
         ))
       )}

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The drawer's reveal / collapse row, below a workspace's sessions.
+ *
+ * Split out of `Item.tsx` (which is the folder row AND its list) so that file
+ * stays under the repo's per-file ceiling. Parity with the desktop category is
+ * the whole point: the same window, so the phone cannot offer a different
+ * boundary than the sidebar.
+ *
+ * The chevron starts at the list's own gutter — the same x as a session row's
+ * status slot and the folder header's icon — because the list carries no
+ * `pl-2` of its own any more. The label then lands on the title column
+ * (16px slot + 8px gap).
+ */
+
+import { ChevronDown, ChevronUp } from 'lucide-preact';
+
+interface Props {
+  hiddenCount: number;
+  canShowLess: boolean;
+  onShowMore: () => void;
+  onShowLess: () => void;
+}
+
+export function SessionRevealRow({ hiddenCount, canShowLess, onShowMore, onShowLess }: Props) {
+  if (hiddenCount <= 0 && !canShowLess) return null;
+
+  return (
+    <div className="flex items-center gap-1">
+      {hiddenCount > 0 && (
+        <button
+          type="button"
+          onClick={onShowMore}
+          className="flex items-center min-w-0 text-left py-2 pr-3 text-xs text-ink/60 hover:text-ink"
+        >
+          <span className="w-4 h-4 flex-shrink-0 flex items-center justify-center">
+            <ChevronDown size={12} />
+          </span>
+          <span className="w-2 shrink-0" />
+          <span className="truncate">Show more sessions ({hiddenCount})</span>
+        </button>
+      )}
+
+      {canShowLess && (
+        <button
+          type="button"
+          onClick={onShowLess}
+          className="ml-auto shrink-0 flex items-center gap-1 text-xs text-ink/60 hover:text-ink pl-3 py-2"
+        >
+          <ChevronUp size={12} />
+          <span className="truncate">Show less</span>
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Hourglass, Loader2, MoreHorizontal } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 import { useSessionRenaming } from '@/client/hooks/workspace/renaming-sessions';
@@ -28,6 +28,11 @@ export interface MobileSessionRowProps {
   onRenameWithAi?: () => void;
   /** Draw a checkbox and let the row's tap toggle the selection instead of
    *  opening the session (batch mode). */
+  /** The row's prompt is held until another session finishes (see the desktop
+   *  row's `waitingFor`: a pending chat has nothing else to show). */
+  waitingFor?: { title: string | null };
+  /** Drop this row's held prompt, from the row's own menu. */
+  onCancelWait?: () => void;
   selectable?: boolean;
   selected?: boolean;
   onToggleSelect?: () => void;
@@ -47,6 +52,8 @@ export function MobileSessionRow({
   onDelete,
   onRename,
   onRenameWithAi,
+  waitingFor,
+  onCancelWait,
   selectable = false,
   selected = false,
   onToggleSelect,
@@ -65,7 +72,8 @@ export function MobileSessionRow({
   const renaming = useSessionRenaming(session.id);
   // One trigger for every row action; also reachable by long-press contextmenu.
   const menu = useRowMenu();
-  const hasActions = Boolean(onRename || onArchive || onDelete);
+  const hasActions = Boolean(onRename || onArchive || onDelete || onCancelWait);
+  const waiting = Boolean(waitingFor);
 
   // The roster toggle is the row's LAST element, so its glyph lands in the same
   // column as the folder header's expand chevron — one vertical line of
@@ -101,6 +109,15 @@ export function MobileSessionRow({
         data-testid="session-item"
         data-session-id={String(session.id)}
         onContextMenu={hasActions && !selectable ? menu.openAtCursor : undefined}
+        // The tint covers the WHOLE row — the `⋯` included. It is the row that
+        // is active, not the part of it left over after the triggers, and a
+        // block that stopped short of the trigger read as a half-painted
+        // selection.
+        //
+        // The gap between the trigger's ink and the block's rounded corner is
+        // `pr-1.5` INSIDE the trigger (see below), never padding on this row:
+        // a row inset would shrink the tint and pull every trailing glyph 6px
+        // left of the folder header's chevron.
         className={`w-full rounded-lg flex items-center transition-colors ${
           selectable && selected
             ? 'bg-ink/10 ring-1 ring-inset ring-ink/20 text-ink'
@@ -110,7 +127,7 @@ export function MobileSessionRow({
         <button
           type="button"
           onClick={selectable ? onToggleSelect : onSelect}
-          className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
+          className="flex-1 text-left py-2 flex items-center justify-between min-w-0"
         >
           <div className="flex items-center min-w-0 pr-2">
             {/* Status slot, 16px at the same x as the folder header's icon slot,
@@ -135,14 +152,30 @@ export function MobileSessionRow({
                 </span>
               ) : awaitingInput ? (
                 <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+              ) : waiting ? (
+                <span role="status" aria-label={`Waiting for ${waitingFor?.title ?? 'another session'}`}>
+                  <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}
             </span>
             )}
-            <span className="text-xs truncate leading-snug ml-2">{title}</span>
+            <span className="flex flex-col min-w-0 ml-2 leading-snug">
+              <span className="text-xs truncate">{title}</span>
+              {waiting && (
+                <span className="text-[10px] text-ink/40 truncate">
+                  waiting for {waitingFor?.title ?? 'another session'}
+                </span>
+              )}
+            </span>
           </div>
 
           <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
@@ -151,10 +184,10 @@ export function MobileSessionRow({
         {/* One trigger for rename / archive / delete, always visible: a touch
             surface has no hover, and the always-on action buttons this replaced
             consumed a third of a phone's row width.
-            `mr-1` only when the row has NO roster toggle — it reserves that
-            column so the trailing glyph's centre stays 19px from the row's right
-            edge whether the last element is this trigger or the chevron. Without
-            it the glyphs step in and out from row to row. */}
+            `pl-1.5 pr-1`: the BOX still ends on the row's trailing edge (so its
+            right edge matches the folder header's chevron and the toolbar's
+            last control), while the glyph's ink sits 4px inside it — clear of
+            the tinted block's rounded corner without shrinking that block. */}
         {hasActions && !selectable && (
           <button
             type="button"
@@ -163,15 +196,14 @@ export function MobileSessionRow({
             aria-label="Session actions"
             aria-haspopup="menu"
             aria-expanded={menu.anchor !== null}
-            className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
+            className="flex-shrink-0 py-1.5 pl-1.5 pr-1 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
           >
             <MoreHorizontal size={16} />
           </button>
         )}
 
-        {/* Last element, so its glyph sits in the folder header's chevron column.
-            `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
-            touch-sized tap target. */}
+        {/* Last element, so its glyph shares the trigger's column — the same
+            inset pair and the same 4px ink margin. */}
         {showChevron && !selectable && (
           <button
             type="button"
@@ -179,7 +211,7 @@ export function MobileSessionRow({
             title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
             aria-expanded={isExpanded}
             aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-            className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+            className="flex-shrink-0 py-1.5 pl-1.5 pr-1 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
           >
             {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
           </button>
@@ -194,6 +226,7 @@ export function MobileSessionRow({
           onRenameWithAi={onRenameWithAi}
           onArchive={onArchive}
           onDelete={onDelete}
+          onCancelWait={onCancelWait}
           onClose={menu.close}
         />
       )}

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

@@ -16,12 +16,12 @@ export function MobileSessionListSkeleton() {
     <div className="flex-1 p-3 space-y-4" aria-hidden="true">
       {PLACEHOLDER_FOLDERS.map((rows, folderIndex) => (
         <div key={folderIndex} className="space-y-2">
-          <div className="flex items-center gap-2 px-1 py-2">
+          <div className="flex items-center gap-2 py-2">
             <span className="w-4 h-4 rounded-sm animate-pulse bg-ink/10" />
             <span className="h-3 w-24 rounded animate-pulse bg-ink/10" />
           </div>
           {Array.from({ length: rows }, (_, rowIndex) => (
-            <div key={rowIndex} className="flex items-center gap-2 rounded px-2 py-2">
+            <div key={rowIndex} className="flex items-center gap-2 rounded py-2">
               <span className="w-4 h-4 rounded-full animate-pulse bg-ink/10" />
               <span
                 className="h-3 rounded animate-pulse bg-ink/10"

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');
+  });
+});