@kabmo-labs/kabmo 0.3.1 → 0.5.0

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/settings/categories/panel-plugins/InstalledList.tsx

@@ -6,7 +6,7 @@ import { PluginMark } from '@/client/components/settings/categories/panel-plugin
 import { PluginReadmeModal } from '@/client/components/settings/categories/panel-plugins/ReadmeModal';
 import { GitFreshness } from '@/client/components/settings/categories/panel-plugins/GitFreshness';
 import type { PluginSlots, SlotName } from '@/client/lib/plugins/slots';
-import { pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { pluginEnablementKey } from '@/shared/lib/workspace/panel-ids';
 
 /** The four slots a plugin may fill, in the order a card lists them. */
 const SLOT_ORDER: readonly SlotName[] = ['rightPanel', 'panel', 'headerPanel', 'settingsSection'];
@@ -74,7 +74,7 @@ export function InstalledList({
           // The ENABLEMENT key is the panel key, not the plugin id: it is the
           // id the client filters its panel catalog by, so a switch that wrote
           // the bare id would report success while the panel stayed hidden.
-          const panelKey = pluginPanelKey(plugin.pluginId);
+          const panelKey = pluginEnablementKey(plugin.pluginId);
           const toggling = busy === `enable:${panelKey}` || busy === `disable:${panelKey}`;
           const contributed = entry ? SLOT_ORDER.filter((slot) => entry.components[slot]) : [];
 

package/src/client/components/settings/categories/panel-plugins/LeftDockSettings.tsx

@@ -0,0 +1,268 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Panel placement: which destination each contributed panel is drawn on.
+ *
+ * The section was "Left dock", and its one question was "is this plugin's panel
+ * on the left or the right?" — which could not be answered for a plugin that
+ * contributes TWO panels. `marketplace/plugins/session-info` ships a `rightPanel`
+ * and a `panel`, and with one row per plugin, moving its right panel onto the
+ * left dock would have had no way to say what happened to the other one.
+ *
+ * So the row is per PANEL INSTANCE, and the row's destinations come from the
+ * SLOT rather than from the plugin:
+ *
+ * - a `rightPanel` is a view — it rides the left dock or the right column;
+ * - a `panel` is a takeover — it rides the editor column, and only that, because
+ *   a takeover on a rail would be a button that opens a column it is not on.
+ *
+ * The dock's switch stays here as well, because a placement on the left is
+ * invisible without the rail: placing a panel turns it on (`setPanelSide`), and
+ * the pane says so rather than leaving the user to discover it.
+ */
+
+import { ArrowLeft, ArrowRight, Columns2, Loader2, PanelLeft, PanelRight } from 'lucide-preact';
+import type { PanelPluginStatus } from '@/shared/types';
+import { pluginPanelKey } from '@/shared/lib/workspace/panel-ids';
+import { SESSIONS_VIEW_ID, panelSideOf, ridesSides, type PanelSide } from '@/shared/lib/workspace/left-dock';
+import type { PluginSlots } from '@/client/lib/plugins/slots';
+import type { LeftDockHandle } from '@/client/hooks/workspace/left-dock';
+
+interface LeftDockSettingsProps {
+  dock: LeftDockHandle;
+  plugins: PanelPluginStatus[];
+  slots: Map<string, PluginSlots>;
+}
+
+/** One contributed panel, with the row's own facts resolved. */
+interface PlaceablePanel {
+  plugin: PanelPluginStatus;
+  key: string;
+  /** The slot it was registered for, which decides where it may go. */
+  slot: 'rightPanel' | 'panel';
+  /** The destination it is on right now. */
+  side: PanelSide;
+  title: string;
+}
+
+/** The status line's wording, which is a sentence rather than a button label. */
+const SIDE_STATUS: Record<PanelSide, string> = {
+  left: 'Left dock',
+  right: 'Right column',
+  editor: 'Editor column',
+};
+
+/** What each destination is called, in a button and in a row's status line. */
+const SIDE_LABEL: Record<PanelSide, string> = {
+  left: 'left dock',
+  right: 'right column',
+  editor: 'editor column',
+};
+
+const SIDE_GLYPH: Record<PanelSide, typeof PanelLeft> = {
+  left: PanelLeft,
+  right: PanelRight,
+  editor: Columns2,
+};
+
+/**
+ * The destinations one panel may be moved to.
+ *
+ * ONE button per destination rather than a toggle: there are up to three, so a
+ * toggle cannot express the choice, and a button carrying the CURRENT position
+ * would read as a state ("Left") on a control that is about to move it. Each
+ * button therefore names its destination, and the one the panel is already on is
+ * disabled — a control that can only go where it already is does nothing.
+ */
+function DestinationGroup({
+  name,
+  destinations,
+  current,
+  onMove,
+}: {
+  name: string;
+  destinations: readonly PanelSide[];
+  current: PanelSide;
+  onMove: (side: PanelSide) => void;
+}) {
+  if (destinations.length < 2) return null;
+  return (
+    <span className="flex items-center gap-1 flex-shrink-0">
+      {destinations.map((side) => {
+        const Glyph = SIDE_GLYPH[side];
+        const here = side === current;
+        return (
+          <button
+            key={side}
+            type="button"
+            disabled={here}
+            onClick={() => onMove(side)}
+            title={here ? `${name} is on the ${SIDE_LABEL[side]}` : `Move ${name} to the ${SIDE_LABEL[side]}`}
+            aria-label={here ? `${name} is on the ${SIDE_LABEL[side]}` : `Move ${name} to the ${SIDE_LABEL[side]}`}
+            aria-pressed={here}
+            className={`flex items-center gap-1 px-1.5 py-0.5 text-[10px] rounded border flex-shrink-0 transition-colors ${
+              here
+                ? 'border-ink/30 bg-ink/10 text-ink/50 cursor-default'
+                : 'border-ink/25 text-ink/80 hover:bg-ink/5 cursor-pointer'
+            }`}
+          >
+            <Glyph size={11} />
+            {side === 'left' ? 'Left' : side === 'right' ? 'Right' : 'Editor'}
+          </button>
+        );
+      })}
+    </span>
+  );
+}
+
+export function LeftDockSettings({ dock, plugins, slots }: LeftDockSettingsProps) {
+  // ONE row per contributed panel, not per plugin: a plugin may register both a
+  // view and a takeover, and they are placed independently.
+  const placeable: PlaceablePanel[] = [];
+  for (const plugin of plugins) {
+    const entry = slots.get(plugin.pluginId);
+    if (!plugin.enabled || !entry) continue;
+    for (const slot of ['rightPanel', 'panel'] as const) {
+      if (!entry.components[slot]) continue;
+      const key = pluginPanelKey(plugin.pluginId, slot);
+      placeable.push({
+        plugin,
+        key,
+        slot,
+        side: panelSideOf(key, dock),
+        title: entry.titles[slot] ?? plugin.name,
+      });
+    }
+  }
+  const loading = plugins.filter((plugin) => plugin.enabled && !slots.get(plugin.pluginId)).length;
+
+  return (
+    <section>
+      <header className="flex items-center gap-2 mb-2">
+        <h3 className="text-sm font-medium text-ink">Panel placement</h3>
+        <span className="ml-auto text-[11px] text-ink/50">
+          {dock.enabled ? `${dock.panels.length} on the rail` : 'rail off'}
+        </span>
+      </header>
+
+      <p className="text-[11px] text-ink/50 mb-2">
+        The left column always holds the session list. Turn its rail on to add views beside it — a
+        panel placed there gets its own button and its own width, and leaves the right column. Each
+        contributed panel is placed on its own: a plugin that ships two panels gets two rows.
+      </p>
+
+      {!dock.enabled ? (
+        <p className="text-[11px] text-ink/45 mb-2">
+          The rail is off. Placing a panel on the left turns it on, and you can switch it back off
+          here at any time.
+        </p>
+      ) : null}
+
+      <div className="flex items-center gap-2.5 border border-ink/10 rounded-lg px-2.5 py-2 mb-2">
+        <span className="min-w-0 flex-1">
+          <span className="block text-xs text-ink">Show the left activity bar</span>
+          <span className="block text-[10px] text-ink/40">
+            Off by default. With it off the column shows only its active view.
+          </span>
+        </span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={dock.enabled}
+          aria-label={dock.enabled ? 'Hide the left activity bar' : 'Show the left activity bar'}
+          onClick={() => dock.setEnabled(!dock.enabled)}
+          className={`relative w-8 h-4 rounded-full transition-colors flex-shrink-0 ${
+            dock.enabled ? 'bg-ink/70' : 'bg-ink/20'
+          }`}
+        >
+          <span
+            className={`absolute top-0.5 w-3 h-3 rounded-full bg-canvas transition-all ${
+              dock.enabled ? 'left-[18px]' : 'left-0.5'
+            }`}
+          />
+        </button>
+      </div>
+
+      {placeable.length === 0 ? (
+        <p className="text-[11px] text-ink/45">
+          {loading > 0
+            ? `Loading ${loading} plugin ${loading === 1 ? 'bundle' : 'bundles'}…`
+            : 'No installed plugin contributes a panel yet. Install one from the store above and it appears here.'}
+        </p>
+      ) : (
+        <div className="grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]">
+          <div className="flex flex-col gap-1.5 border border-ink/10 rounded-lg px-2.5 py-2 bg-ink/[0.02]">
+            <span className="min-w-0">
+              <span className="block text-xs text-ink">Sessions</span>
+              <span className="block text-[10px] text-ink/40">The dock's own view — always here.</span>
+            </span>
+            <span className="text-[10px] font-mono text-ink/40 self-start">{SESSIONS_VIEW_ID}</span>
+          </div>
+
+          {placeable.map(({ plugin, key, slot, side, title }) => {
+            const destinations = ridesSides(slot);
+            // TWO rows, not one. The identity block and the destination buttons
+            // shared a line, and two buttons with glyphs and labels (`Left`
+            // `Right`) took the width the title needed — so the title was
+            // truncated inside a card that had room for it, at the very column
+            // width this grid produces (240px). Stacked, the title gets the full
+            // card and the buttons get their own row.
+            return (
+              <div key={key} className="flex flex-col gap-1.5 border border-ink/10 rounded-lg px-2.5 py-2">
+                <span className="min-w-0">
+                  <span className="block text-xs text-ink" title={`${title} — ${plugin.name}`}>
+                    {title}
+                    <span className="text-ink/40"> · {plugin.name}</span>
+                  </span>
+                  <span className="block text-[10px] text-ink/40">
+                    {SIDE_STATUS[side]}
+                    {slot === 'panel' ? ' · takeover' : ' · view'}
+                    {side === 'left' && !dock.enabled ? ' · rail off' : ''}
+                  </span>
+                </span>
+                {/* A takeover has one destination, so it gets a STATUS rather
+                    than a control: a button that can only go where it already
+                    is would be a control that does nothing. */}
+                {destinations.length > 1 ? (
+                  <DestinationGroup
+                    name={title}
+                    destinations={destinations}
+                    current={side}
+                    onMove={(next) => dock.setSide(key, next)}
+                  />
+                ) : (
+                  <span
+                    className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] rounded border border-ink/10 text-ink/50 self-start"
+                    title={`${title} draws the editor column — its slot has no other destination`}
+                  >
+                    <ArrowLeft size={11} className="opacity-40" />
+                    Fixed
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {loading > 0 && placeable.length > 0 ? (
+        <p className="mt-2 flex items-center gap-1.5 text-[11px] text-ink/45">
+          <Loader2 size={11} className="animate-spin" />
+          {loading} plugin {loading === 1 ? 'bundle is' : 'bundles are'} still loading.
+        </p>
+      ) : null}
+
+      <p className="mt-2 flex items-start gap-1.5 text-[11px] text-ink/40">
+        <ArrowRight size={11} className="mt-0.5 flex-shrink-0 opacity-60" />
+        <span>
+          A takeover draws the editor column whole, so its switch is the editor panel's own rail
+          (Files · your panels). A view rides a rail and gets one button on the column it is placed
+          on.
+        </span>
+      </p>
+    </section>
+  );
+}

package/src/client/components/settings/categories/panel-plugins/Section.tsx

@@ -10,6 +10,8 @@ import { InstallForm } from '@/client/components/settings/categories/panel-plugi
 import { AvailableList } from '@/client/components/settings/categories/panel-plugins/AvailableList';
 import { InstalledList } from '@/client/components/settings/categories/panel-plugins/InstalledList';
 import { BuiltinList } from '@/client/components/settings/categories/panel-plugins/BuiltinList';
+import { LeftDockSettings } from '@/client/components/settings/categories/panel-plugins/LeftDockSettings';
+import { useLeftDock } from '@/client/hooks/workspace/left-dock';
 import { PluginToolbar } from '@/client/components/settings/categories/panel-plugins/Toolbar';
 import { SyncBlockedNotice } from '@/client/components/settings/categories/panel-plugins/SyncBlockedNotice';
 
@@ -85,6 +87,7 @@ export function PanelPluginsSection() {
     usePanelRegistry();
   const { slots, failures } = usePanelSlots();
   const actions = usePanelPluginActions();
+  const dock = useLeftDock();
 
   const refresh = () => void refreshPanelRegistry();
 
@@ -137,6 +140,11 @@ export function PanelPluginsSection() {
           they are listed whether or not the registry read settled. */}
       <BuiltinList disabled={disabledPanels} busy={actions.busy} onSetEnabled={actions.setEnabled} />
 
+      {/* After the built-ins, because it places the panels those rows switch on:
+          a placement for a panel that is switched off would be a row for
+          nothing. */}
+      <LeftDockSettings dock={dock} plugins={plugins} slots={slots} />
+
       {ready && available.length === 0 && plugins.length === 0 && errors.length === 0 ? (
         <div className="text-xs text-ink/60 space-y-1.5">
           <p>No panel plugins installed.</p>

package/src/client/components/workspace/chat-timeline/EmptyWorkspacePrompt.tsx

@@ -10,6 +10,12 @@ import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter
 import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
 import { resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import {
+  WaitingDependencyPicker,
+  waitingCandidates,
+  type WaitingCandidate,
+} from '@/client/components/workspace/chat-timeline/chat-input/WaitingDependencyPicker';
+import { Hourglass } from 'lucide-preact';
 
 interface EmptyWorkspacePromptProps {
   className?: string;
@@ -55,6 +61,17 @@ interface EmptyWorkspacePromptProps {
   onUndo?: (id: string, content?: string) => void;
   onRetry?: (id: string) => void;
   onNewChat?: (content: string, attachments?: Attachment[]) => void;
+  /** Server-tracked `stream` ids: the only sessions the wait may name. */
+  streamStatusMap?: Record<string, string | undefined>;
+  /** A name for a streaming session the sidebar has not scanned yet. */
+  titleForSession?: (id: string) => string | undefined;
+  /** The "wait for session" pick, persisted per chat. */
+  waitingFor?: WaitingCandidate | null;
+  onWaitingForChange?: (candidate: WaitingCandidate | null) => void;
+  /** A held prompt for THIS chat: the composer is disabled until it is released
+   *  or cancelled, because there is no session to send a second prompt to. */
+  heldWait?: { title: string | null } | null;
+  onCancelWait?: () => void;
 }
 
 export function EmptyWorkspacePrompt({
@@ -89,6 +106,12 @@ export function EmptyWorkspacePrompt({
   onUndo,
   onRetry,
   onNewChat,
+  streamStatusMap = {},
+  titleForSession,
+  waitingFor = null,
+  onWaitingForChange,
+  heldWait = null,
+  onCancelWait,
 }: EmptyWorkspacePromptProps) {
   const [showWorkspace, setShowWorkspace] = useState(false);
   const workspaceRef = useRef<HTMLDivElement>(null);
@@ -99,6 +122,13 @@ export function EmptyWorkspacePrompt({
     return folders?.find(f => f.id === selectedFolderId);
   }, [folders, selectedFolderId]);
 
+  // Sessions the wait may name: the ones with a run in flight, from the same
+  // server-tracked map the sidebar's spinner is drawn from.
+  const candidates = useMemo(
+    () => waitingCandidates(folders, streamStatusMap, null, titleForSession),
+    [folders, streamStatusMap, titleForSession],
+  );
+
   // Run footers are boundary rows: emitted after the run's last row, so a
   // trailing notice never separates the footer from the next user message.
   const { streamingIdx, footers } = useMemo(
@@ -128,6 +158,7 @@ export function EmptyWorkspacePrompt({
             background). Hidden once a chat has been sent — the session now has
             a target workspace, so the composer is the only focus. */}
         {messages.length === 0 && (
+          <div className="flex items-center gap-1 flex-wrap">
           <div className="relative shrink-0" ref={workspaceRef}>
           <button 
             type="button"
@@ -172,6 +203,21 @@ export function EmptyWorkspacePrompt({
               </div>
             </div>
           )}
+        </div>
+          {/* The wait picker sits BESIDE the workspace picker, because both
+              answer the same question about the chat that has not started:
+              where it runs, and what it waits for. It only appears while there
+              is something to wait for (or a pick already made). */}
+          {onWaitingForChange && (waitingFor || candidates.length > 0) && (
+            <WaitingDependencyPicker
+              folders={folders}
+              streamStatusMap={streamStatusMap}
+              sessionId={null}
+              titleFor={titleForSession}
+              value={waitingFor}
+              onChange={onWaitingForChange}
+            />
+          )}
         </div>
         )}
 
@@ -197,6 +243,7 @@ export function EmptyWorkspacePrompt({
                       isStreaming={isLoading}
                       onUndo={onUndo}
                       onNewChat={onNewChat}
+                      isMobile={variant === 'mobile'}
                       className={isAiFragment ? 'mt-1' : 'mt-8'}
                     />
                     {footer && (
@@ -232,6 +279,27 @@ export function EmptyWorkspacePrompt({
             providerNames={providerNames}
           />
         )}
+        {/* A held prompt owns this chat until it is released: there is no
+            session to send a second prompt to, and a composer that looked live
+            would accept one that could not be delivered. */}
+        {heldWait && (
+          <div className="flex items-center gap-2 rounded-lg border border-ink/15 bg-ink/[0.03] px-3 py-2 text-xs text-ink/70">
+            <Hourglass size={12} className="shrink-0 animate-pulse text-ink/60" />
+            <span className="min-w-0 flex-1 truncate">
+              Waiting for {heldWait.title ?? 'another session'} to finish before this prompt is sent.
+            </span>
+            {onCancelWait && (
+              <button
+                type="button"
+                data-testid="cancel-held-prompt"
+                onClick={onCancelWait}
+                className="shrink-0 rounded border border-ink/20 px-2 py-0.5 text-[11px] text-ink/70 hover:bg-ink/5 hover:text-ink cursor-pointer"
+              >
+                Cancel
+              </button>
+            )}
+          </div>
+        )}
         <ChatInput
           value={inputValue}
           onChange={setInputValue}
@@ -240,7 +308,7 @@ export function EmptyWorkspacePrompt({
           onAttachmentsChange={setInputAttachments}
           onSend={onSend}
           isGenerating={isGenerating}
-          disabled={!selectedFolderId}
+          disabled={!selectedFolderId || Boolean(heldWait)}
           className="w-full shrink-0"
           appSettings={appSettings}
           onThinkingLevelChange={onThinkingLevelChange}

package/src/client/components/workspace/chat-timeline/MessageItem.gutter.test.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Where a framed transcript block's edge lands, per layout.
+ *
+ * The phone's gutter is the timeline container's own `px-3` — the same 12px
+ * the composer dock uses — so a block that adds `mx-3` on top of it sits 12px
+ * inside the composer's card. That is what this pins: the same tree, mounted
+ * twice, and the only difference is `isMobile`.
+ *
+ * Asserted through the rendered DOM rather than the helper, because the bug
+ * was a call site that never passed the flag: `transcriptGutter` can be
+ * perfect and a `ChatMessageItem` that drops `isMobile` still renders `mx-3`.
+ */
+
+import { afterAll, 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 { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { SessionStateProvider } from '@/client/components/common/session-state-provider';
+import type { ChatMessageData } from '@/shared/types';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+beforeAll(() => {
+  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];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+let container: HTMLElement | null = null;
+
+beforeEach(() => {
+  container?.remove();
+  container = null;
+});
+
+/** A user row, and an AI row carrying one tool call — the two framed blocks. */
+const userRow: ChatMessageData = { id: 'u1', role: 'user', content: 'hello' };
+const toolRow: ChatMessageData = {
+  id: 'a1',
+  role: 'ai',
+  content: 'done',
+  toolCalls: [{
+    id: 't1',
+    type: 'bash',
+    title: 'Bash',
+    command: 'echo hi',
+    output: 'hi',
+    status: 'success',
+  }],
+};
+
+async function mount(msg: ChatMessageData, isMobile: boolean): Promise<HTMLElement> {
+  const host = document.createElement('div');
+  document.body.appendChild(host);
+  await act(async () => {
+    render(
+      h(SessionStateProvider, {
+        sessionId: 'gutter-test',
+        children: h(ChatMessageItem, { msg, isMobile }),
+      }),
+      host,
+    );
+  });
+  container = host;
+  return host;
+}
+
+/** The user bubble: the framed block a user row draws. */
+function bubble(host: HTMLElement): HTMLElement {
+  return host.querySelector('div.bg-paper.rounded-xl') as HTMLElement;
+}
+
+describe('transcript block gutter', () => {
+  test('a phone draws the user bubble at the container gutter, with no extra inset', async () => {
+    const host = await mount(userRow, true);
+    const box = bubble(host);
+    expect(box.className).not.toContain('mx-3');
+    // And its padding is the one that lands text on the 24px column.
+    expect(box.className).toContain('p-3');
+    expect(box.className).not.toContain('p-3.5');
+  });
+
+  test('desktop keeps the inset frame and the roomier padding', async () => {
+    const host = await mount(userRow, false);
+    const box = bubble(host);
+    expect(box.className).toContain('mx-3');
+    expect(box.className).toContain('p-3.5');
+  });
+
+  test('the tool section follows the same rule — and is reachable by its own marker', async () => {
+    const phone = await mount(toolRow, true);
+    const phoneSection = phone.querySelector('[data-tool-section]') as HTMLElement;
+    expect(phoneSection).not.toBeNull();
+    expect(phoneSection.className).not.toContain('mx-3');
+
+    const desktop = await mount(toolRow, false);
+    const desktopSection = desktop.querySelector('[data-tool-section]') as HTMLElement;
+    expect(desktopSection.className).toContain('mx-3');
+  });
+});