@kabmo-labs/kabmo 0.0.1 → 0.2.0

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

@@ -1,7 +1,14 @@
 import type { RefObject } from 'preact/compat';
-import { Archive, ArrowUpDown, Calendar, FolderPlus, Plus, RefreshCw, Search, X } from 'lucide-preact';
+import { Archive, ArrowUpDown, Calendar, FolderPlus, ListChecks, Plus, RefreshCw, Search, X } from 'lucide-preact';
 import type { SessionSortOption } from '@/shared/types';
 import { SortMenu } from '@/client/components/common/sort-menu';
+import { ToolbarOverflowMenu } from '@/client/components/layout/session-sidebar/OverflowMenu';
+import type { OverflowAction } from '@/client/components/layout/session-sidebar/OverflowMenu';
+import { useToolbarRowWidth } from '@/client/hooks/workspace/toolbar-row-width';
+import {
+  MOBILE_TOOLBAR_PRIORITY,
+  mobileToolbarCapacity,
+} from '@/shared/lib/workspace/sidebar-toolbar';
 
 export interface MobileSessionToolbarProps {
   searchQuery: string;
@@ -24,8 +31,18 @@ export interface MobileSessionToolbarProps {
   onHideArchived: () => void;
   onSearchChange: (value: string) => void;
   onClearSearch: () => void;
+  /** Enter the workspace batch-selection mode (checkbox on each workspace). */
+  onSelectWorkspaces: () => void;
+  /** True while a batch selection is active — the control reads pressed. */
+  selecting: boolean;
 }
 
+/** One phone control's box — `w-9.5 h-9.5` with the toolbar's own border/shadow. */
+const CONTROL_CLASS =
+  'w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs';
+const CONTROL_IDLE = 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink';
+const CONTROL_ACTIVE = 'bg-ink/10 text-ink border-ink/30';
+
 export function MobileSessionToolbar({
   searchQuery,
   sortOption,
@@ -45,22 +62,62 @@ export function MobileSessionToolbar({
   onHideArchived,
   onSearchChange,
   onClearSearch,
+  onSelectWorkspaces,
+  selecting,
 }: MobileSessionToolbarProps) {
+  // The row is measured, not breakpointed. The drawer is the device's width, and
+  // the primary pill plus six 38px controls need 316px of row — more than a
+  // 390px phone offers once the drawer's 24px of padding is gone. A
+  // `@container` query could not fix that: it would keep hiding controls after
+  // a tablet widened the drawer.
+  const { ref: rowRef, width } = useToolbarRowWidth(0);
+  const capacity = mobileToolbarCapacity(width);
+  const visible: Record<string, true> = {};
+  for (const control of MOBILE_TOOLBAR_PRIORITY.slice(0, capacity)) visible[control] = true;
+  const hidden = MOBILE_TOOLBAR_PRIORITY.slice(capacity);
+
+  const archiveLabel = showArchived ? 'Hide archived sessions' : 'Show archived sessions';
+  const schedulerLabel = scheduledCount > 0 ? `Scheduled tasks (${scheduledCount} armed)` : 'Scheduled tasks';
+
+  /** What the `⋯` menu offers, in priority order. */
+  const overflowActions: OverflowAction[] = [];
+  if (hidden.includes('new-workspace')) {
+    overflowActions.push({ id: 'new-workspace', label: 'New Workspace', icon: FolderPlus, onSelect: onNewWorkspace });
+  }
+  if (hidden.includes('refresh')) {
+    overflowActions.push({ id: 'refresh', label: 'Refresh sessions', icon: RefreshCw, onSelect: onRefresh });
+  }
+  if (hidden.includes('scheduler')) {
+    overflowActions.push({ id: 'scheduler', label: schedulerLabel, icon: Calendar, onSelect: onScheduler });
+  }
+  if (hidden.includes('archive')) {
+    overflowActions.push({ id: 'archive', label: archiveLabel, icon: Archive, onSelect: onToggleArchived, active: showArchived });
+  }
+  if (hidden.includes('select')) {
+    overflowActions.push({
+      id: 'select',
+      label: selecting ? 'Cancel selection' : 'Select workspaces',
+      icon: ListChecks,
+      onSelect: onSelectWorkspaces,
+      active: selecting,
+    });
+  }
+
   return (
-    <div className="@container p-3 border-b border-ink/10 flex flex-col space-y-2.5 flex-shrink-0 bg-canvas">
+    <div className="p-3 border-b border-ink/10 flex flex-col space-y-2.5 flex-shrink-0 bg-canvas">
       {/* Row 1: Primary + New Session Button & Quick Utility Buttons */}
-      <div className="flex items-center space-x-2">
-        {/* Large Ergonomic New Session Button. Its label drops below a narrow
-            drawer (@container, not the viewport) so the five fixed-size utility
-            buttons beside it can never squeeze it past the row's own width.
-            Measured: the row needs 356px of CONTAINER for the label to fit
-            (190px of buttons + 40px of gaps + 51px of icon/padding + the 75px
-            label), and the container is the viewport minus the toolbar's 12px
-            of padding each side — so 360px of container (a 384px viewport)
-            is the point the label stops fitting. The `aria-label` is not
-            optional: hiding the visible text would otherwise leave the button
-            with no accessible name at all, which is what a phone-width
-            screen reader reads first. */}
+      <div ref={rowRef} className="flex items-center space-x-2">
+        {/* Large Ergonomic New Session Button. Its label is budgeted for in
+            FULL by `mobileToolbarCapacity` (126px, the desktop row's rule), so
+            it never ellipsises and never leaves the row: what gives way on a
+            narrow drawer is a utility control, which moves into the `⋯` menu.
+            `shrink-0` on the icon is the belt to that braces — measured with
+            both as ordinary flex items, the label's `whitespace-nowrap`
+            min-content refused to shrink and the `Plus` absorbed the whole
+            shortfall (15px at 430, 1px at 412, 0px at 390/375/360), so the
+            phone's primary action was a blank pill exactly where the drawer
+            first dropped the label. The `aria-label` still carries the name
+            for a screen reader. */}
         <button
           type="button"
           onClick={onNewSession}
@@ -68,100 +125,128 @@ export function MobileSessionToolbar({
           title="New Session"
           className="flex-1 min-w-0 h-9.5 flex items-center justify-center space-x-2 px-3.5 rounded-xl bg-ink text-canvas hover:bg-ink/90 active:scale-[0.98] text-xs font-semibold transition-all shadow-xs"
         >
-          <Plus size={15} strokeWidth={2.4} />
-          <span className="hidden @[360px]:inline whitespace-nowrap">New Session</span>
+          <Plus size={15} strokeWidth={2.4} className="shrink-0" />
+          <span className="min-w-0 truncate">New Session</span>
         </button>
 
-        {/* New Workspace / Folder button */}
-        <button
-          type="button"
-          onClick={onNewWorkspace}
-          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title="New Workspace"
-          aria-label="New Workspace"
-        >
-          <FolderPlus size={16} strokeWidth={1.8} />
-        </button>
+        {visible['new-workspace'] && (
+          <button
+            type="button"
+            onClick={onNewWorkspace}
+            className={`${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title="New Workspace"
+            aria-label="New Workspace"
+          >
+            <FolderPlus size={16} strokeWidth={1.8} />
+          </button>
+        )}
 
         {/* Scheduler button. The badge is the whole point of the count: a
             button that opens a list you cannot see the state of reads as
             decorative, which is exactly what this control used to be. */}
-        <button
-          type="button"
-          onClick={onScheduler}
-          className="relative w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title={scheduledCount > 0 ? `Scheduled tasks (${scheduledCount} armed)` : 'Scheduled tasks'}
-          aria-label={scheduledCount > 0 ? `Scheduled tasks, ${scheduledCount} armed` : 'Scheduled tasks'}
-        >
-          <Calendar size={16} strokeWidth={1.8} />
-          {scheduledCount > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 min-w-[13px] h-[13px] px-[3px] rounded-full bg-ink text-canvas text-[8px] leading-[13px] text-center font-semibold">
-              {scheduledCount > 9 ? '9+' : scheduledCount}
-            </span>
-          )}
-        </button>
+        {visible['scheduler'] && (
+          <button
+            type="button"
+            onClick={onScheduler}
+            className={`relative ${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title={schedulerLabel}
+            aria-label={scheduledCount > 0 ? `Scheduled tasks, ${scheduledCount} armed` : 'Scheduled tasks'}
+          >
+            <Calendar size={16} strokeWidth={1.8} />
+            {scheduledCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 min-w-[13px] h-[13px] px-[3px] rounded-full bg-ink text-canvas text-[8px] leading-[13px] text-center font-semibold">
+                {scheduledCount > 9 ? '9+' : scheduledCount}
+              </span>
+            )}
+          </button>
+        )}
 
         {/* Archive toggle — its own button, the same shape as Scheduler's.
             It used to live inside the sort dropdown under a "Filter" heading,
             which made a view filter look like a sort mode: the control that
             decides whether archived rows are on screen was hidden one tap
-            deeper than the control that reorders them. The pressed state is
-            carried by the button itself (and by the pill in row 3), so the
-            dropdown no longer needs to report it. */}
-        <button
-          type="button"
-          onClick={onToggleArchived}
-          aria-pressed={showArchived}
-          className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs ${
-            showArchived
-              ? 'bg-amber-500/15 border-amber-500/40 text-amber-900'
-              : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-          }`}
-          title={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
-          aria-label={showArchived ? 'Hide archived sessions' : 'Show archived sessions'}
-        >
-          <Archive size={16} strokeWidth={1.8} />
-        </button>
+            deeper than the control that reorders them. */}
+        {visible['archive'] && (
+          <button
+            type="button"
+            onClick={onToggleArchived}
+            aria-pressed={showArchived}
+            className={`${CONTROL_CLASS} ${showArchived ? 'bg-amber-500/15 border-amber-500/40 text-amber-900' : CONTROL_IDLE}`}
+            title={archiveLabel}
+            aria-label={archiveLabel}
+          >
+            <Archive size={16} strokeWidth={1.8} />
+          </button>
+        )}
+
+        {/* Batch selection over the WORKSPACES. A mode, like search, so it
+            sits with the view controls and reports its pressed state — and it
+            is the only way into the workspace batch, because a workspace has
+            no row of its own to long-press. */}
+        {visible['select'] && (
+          <button
+            type="button"
+            onClick={onSelectWorkspaces}
+            aria-pressed={selecting}
+            className={`${CONTROL_CLASS} ${selecting ? CONTROL_ACTIVE : CONTROL_IDLE}`}
+            title={selecting ? 'Cancel selection' : 'Select workspaces'}
+            aria-label={selecting ? 'Cancel selection' : 'Select workspaces'}
+          >
+            <ListChecks size={16} strokeWidth={1.8} />
+          </button>
+        )}
 
         {/* Refresh sessions button — same action the desktop toolbar's
             RefreshCw performs: refetch the session list from the server.
             The icon spins for the duration of that fetch, so the click has a
             visible end; `refreshing` is raised only by this button's own load. */}
-        <button
-          type="button"
-          onClick={onRefresh}
-          className="w-9.5 h-9.5 rounded-xl border border-ink/15 bg-paper hover:bg-ink/5 active:scale-95 text-ink/80 hover:text-ink flex items-center justify-center transition-all flex-shrink-0 cursor-pointer shadow-xs"
-          title="Refresh sessions"
-          aria-label="Refresh sessions"
-          aria-busy={refreshing}
-        >
-          <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
-        </button>
-
-        {/* Sort Dropdown. Archive is NOT in here any more — it has its own
-            button in this row, so this control means one thing (the order of
-            the list) and its pressed state reads the sort alone. */}
-        <div className="relative flex-shrink-0" ref={optionsRef}>
+        {visible['refresh'] && (
           <button
             type="button"
-            onClick={onToggleOptions}
-            className={`w-9.5 h-9.5 rounded-xl border active:scale-95 flex items-center justify-center transition-all cursor-pointer shadow-xs ${
-              optionsOpen || sortOption !== 'A-Z'
-                ? 'bg-ink/10 text-ink border-ink/30' 
-                : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-            }`}
-            title="Sort workspaces"
-            aria-label="Sort workspaces"
+            onClick={onRefresh}
+            className={`${CONTROL_CLASS} ${CONTROL_IDLE}`}
+            title="Refresh sessions"
+            aria-label="Refresh sessions"
+            aria-busy={refreshing}
           >
-            <ArrowUpDown size={15} strokeWidth={1.8} />
+            <RefreshCw size={15} strokeWidth={1.8} className={refreshing ? 'animate-spin' : undefined} />
           </button>
+        )}
 
-          {optionsOpen && (
-            <div className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-xl shadow-xl z-50 p-2 text-xs">
-              <SortMenu variant="mobile" sortOption={sortOption} onSortChange={onSortChange} />
-            </div>
-          )}
-        </div>
+        {/* Sort Dropdown. Archive is NOT in here any more — it has its own
+            button in this row, so this control means one thing (the order of
+            the list) and its pressed state reads the sort alone. */}
+        {visible['sort'] && (
+          <div className="relative flex-shrink-0" ref={optionsRef}>
+            <button
+              type="button"
+              onClick={onToggleOptions}
+              className={`${CONTROL_CLASS} ${optionsOpen || sortOption !== 'A-Z' ? CONTROL_ACTIVE : CONTROL_IDLE}`}
+              title="Sort workspaces"
+              aria-label="Sort workspaces"
+            >
+              <ArrowUpDown size={15} strokeWidth={1.8} />
+            </button>
+
+            {optionsOpen && (
+              <div className="absolute right-0 top-full mt-2 w-52 bg-paper border border-ink/15 rounded-xl shadow-xl z-50 p-2 text-xs">
+                <SortMenu variant="mobile" sortOption={sortOption} onSortChange={onSortChange} />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Whatever the row could not hold. The sort control's own options
+            travel with it, so a narrow drawer can still reorder the list. */}
+        {hidden.length > 0 && (
+          <ToolbarOverflowMenu
+            actions={overflowActions}
+            sortHidden={hidden.includes('sort')}
+            sortOption={sortOption}
+            onSortChange={onSortChange}
+            layout="mobile"
+          />
+        )}
       </div>
 
       {/* Row 2: Search Input Bar */}
@@ -192,9 +277,9 @@ export function MobileSessionToolbar({
           {sortOption !== 'A-Z' && (
             <span className="inline-flex items-center space-x-1 bg-ink/5 border border-ink/10 text-ink/80 rounded-lg px-2 py-0.5 text-[10px] font-mono">
               <span>Sort: {sortOption.replace('_', ' ')}</span>
-              <button 
-                type="button" 
-                onClick={onResetSort} 
+              <button
+                type="button"
+                onClick={onResetSort}
                 className="hover:text-ink ml-0.5"
                 title="Reset sort"
               >
@@ -206,9 +291,9 @@ export function MobileSessionToolbar({
             <span className="inline-flex items-center space-x-1 bg-amber-500/15 border border-amber-500/25 text-amber-900 rounded-lg px-2 py-0.5 text-[10px] font-mono">
               <Archive size={10} />
               <span>Archived</span>
-              <button 
-                type="button" 
-                onClick={onHideArchived} 
+              <button
+                type="button"
+                onClick={onHideArchived}
                 className="hover:text-amber-950 ml-0.5"
                 title="Hide archived"
               >

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

@@ -52,6 +52,13 @@ interface ComposerDockProps {
   sessionModel: { provider: string; modelId: string } | null;
   sessionThinkingLevel?: string | null;
   variant: 'desktop' | 'mobile';
+  /**
+   * The phone reader is scrolled back through the transcript, so the composer
+   * may give its height back (`ChatInput.shrinkWhileReading`). Derived from the
+   * timeline's own scroll geometry — the same signal that draws the
+   * scroll-to-bottom affordance.
+   */
+  shrinkWhileReading?: boolean;
 }
 
 /**
@@ -91,6 +98,7 @@ export function ComposerDock({
   sessionModel,
   sessionThinkingLevel,
   variant,
+  shrinkWhileReading = false,
 }: ComposerDockProps) {
   // Side questions take over the composer entirely: the chat's own input is
   // hidden while the form is open, so a stray Enter cannot send to the wrong
@@ -159,6 +167,7 @@ export function ComposerDock({
             sessionThinkingLevel={sessionThinkingLevel}
             variant={variant}
             expandable
+            shrinkWhileReading={shrinkWhileReading}
           />
         )}
       </div>

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

@@ -4,6 +4,7 @@ import { MessageList } from '@/client/components/workspace/chat-timeline/Message
 import { MinimapShortcuts } from '@/client/components/workspace/chat-timeline/MinimapShortcuts';
 import { MobileTurnJump } from '@/client/components/workspace/chat-timeline/MobileTurnJump';
 import { LoadingOlderIndicator } from '@/client/components/workspace/chat-timeline/SessionSkeleton';
+import { OrphanAsks } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/OrphanAsks';
 import type { Attachment, ChatMessageData, UserTurnRef } from '@/shared/types';
 
 interface TimelineBodyProps {
@@ -115,6 +116,11 @@ export function TimelineBody({
             onNewChat={onNewChat}
             isMobile={isMobile}
           />
+          {/* An ask whose tool card this client cannot see (a subagent's, an
+              extension's own dialog, a call outside the loaded window) still
+              blocks the agent. It renders HERE, as the last row of the
+              conversation, never as a modal over it. */}
+          <OrphanAsks />
         </div>
       </div>
 

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

@@ -38,7 +38,10 @@ export function AttachmentToolbar({ attachments, onFilesSelected, onRemove, mode
 
   return (
     <>
-      <div className="flex items-center flex-wrap gap-1.5 px-3 py-2 border-b border-ink/5 text-ink/60">
+      {/* No separator and no second surface: the card is ONE colour, so the
+          header, the draft and the toolbar read as one panel. A hairline over
+          a tinted strip made the composer look like three stacked bars. */}
+      <div className="flex items-center flex-wrap gap-1.5 px-3 py-2 text-ink/60">
         <button
           onClick={() => fileInputRef.current?.click()}
           className="flex items-center justify-center hover:bg-ink/5 p-1 rounded transition-colors text-ink/60 hover:text-ink shrink-0"

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

@@ -8,7 +8,7 @@ import { UploadCloud } from 'lucide-preact';
 export function DropOverlay({ visible }: { visible: boolean }) {
   if (!visible) return null;
   return (
-    <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-ink/40 bg-canvas/90 text-ink">
+    <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] border-2 border-dashed border-ink/40 bg-canvas/90 text-ink">
       <UploadCloud size={18} className="text-ink/60" />
       <span className="text-[11px] font-semibold">Drop files to attach</span>
       <span className="text-[10px] text-ink/50">Folders are expanded into their files</span>

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

@@ -138,7 +138,12 @@ export function GoalBanner({ record, running, continuation, evaluating, pending,
 
   return (
     <div
-      className="flex items-center gap-2 border-b border-ink/8 bg-canvas/40 px-3 py-1.5 text-[11px]"
+      // The strip sits on the card's own surface — no hairline and no tinted
+      // band, so the goal row, the draft and the toolbar read as ONE panel
+      // rather than three stacked bars. Its state still shows: the icon and
+      // the badge carry the tone (`badge`/`tone`), which is the semantic half;
+      // the background was only ever separation.
+      className="flex items-center gap-2 px-3 py-1.5 text-[11px]"
       data-goal-banner={record.status}
       data-goal-stop={stop ?? undefined}
     >

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

@@ -99,7 +99,10 @@ export function ComposerToolbar({
 
   return (
     <div
-      className={`@container flex items-center justify-between border-t border-ink/5 bg-canvas/50 rounded-b-md ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}
+      // No separator and no tinted strip: the composer is one card, so its
+      // toolbar shares the card's surface. `rounded-b-[inherit]` still follows
+      // the frame (the phone's stretched composer is `rounded-none`).
+      className={`@container flex items-center justify-between rounded-b-[inherit] ${isMobile ? 'px-2 py-2' : 'px-3 py-2'}`}
     >
       <div className={`flex items-center min-w-0 ${isMobile ? 'space-x-1' : 'space-x-2'}`}>
         {showModel && (

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

@@ -19,7 +19,7 @@ export interface VoiceNoticeProps {
 export function VoiceNotice({ status, error }: VoiceNoticeProps) {
   if (status) {
     return (
-      <div className="flex items-center gap-1.5 border-t border-ink/10 bg-canvas/40 px-3 py-1.5 text-[11px] text-ink/60">
+      <div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] text-ink/60">
         <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-ink/50 animate-pulse" />
         <span className="min-w-0 flex-1 break-words">{status}</span>
       </div>
@@ -28,7 +28,7 @@ export function VoiceNotice({ status, error }: VoiceNoticeProps) {
 
   if (error) {
     return (
-      <div className="flex items-start gap-1.5 border-t border-error/20 bg-error/5 px-3 py-1.5 text-[11px] text-error">
+      <div className="flex items-start gap-1.5 bg-error/5 px-3 py-1.5 text-[11px] text-error">
         <AlertTriangle size={11} className="mt-0.5 shrink-0" />
         <span className="min-w-0 flex-1 break-words">{error}</span>
       </div>

package/src/client/components/workspace/chat-timeline/chat-input/expansion.test.ts

@@ -23,7 +23,7 @@ import { describe, expect, test } from 'bun:test';
 
 import { composerExpansion } from '@/client/components/workspace/chat-timeline/chat-input/expansion';
 
-const base = { expanded: false, isDragging: false, keyboardInset: 0 } as const;
+const base = { expanded: false, isDragging: false, keyboardInset: 0, compact: false } as const;
 
 describe('composerExpansion docked', () => {
   test('a phone keeps its touch-sized box and opens the popup upward', () => {
@@ -48,6 +48,77 @@ describe('composerExpansion docked', () => {
   });
 });
 
+/**
+ * The composer is a card in the same transcript as the tool calls, so its frame
+ * is the tool card's own (`ToolCardShell`): `rounded-xl`, `border-ink/10` on
+ * `bg-paper`, darkening to `ink/20` — plus a shadow, which the tool card only
+ * grows when expanded but the composer always has, because it is the input the
+ * user is looking at. A `rounded-md` here made it read as a smaller, different
+ * card sitting under the conversation.
+ */
+describe('composerExpansion frame matches a tool card', () => {
+  test('docked: rounded-xl, ink/10 hairline, a resting shadow', () => {
+    for (const variant of ['desktop', 'mobile'] as const) {
+      const { cardClass } = composerExpansion({ ...base, variant });
+      expect(cardClass).toContain('rounded-xl');
+      expect(cardClass).not.toContain('rounded-md');
+      expect(cardClass).toContain('border-ink/10');
+      expect(cardClass).toContain('bg-paper');
+      expect(cardClass).toContain('shadow-sm');
+    }
+  });
+
+  test('the border darkens on hover and on focus, never at rest', () => {
+    const { cardClass } = composerExpansion({ ...base, variant: 'desktop' });
+    expect(cardClass).toContain('hover:border-ink/20');
+    expect(cardClass).toContain('focus-within:border-ink/30');
+  });
+
+  test('a stretched desktop keeps the radius and lifts the shadow one step', () => {
+    const { cardClass } = composerExpansion({ ...base, expanded: true, variant: 'desktop' });
+    expect(cardClass).toContain('rounded-xl');
+    expect(cardClass).toContain('shadow-md');
+  });
+
+  test('a stretched phone drops the radius so the bars follow it', () => {
+    const { cardClass } = composerExpansion({ ...base, expanded: true, variant: 'mobile' });
+    expect(cardClass).toContain('rounded-none');
+    expect(cardClass).toContain('shadow-none');
+  });
+});
+
+/**
+ * The phone's compact composer: a reader scrolled back through the transcript
+ * gets the height back. The rules that matter are which layout may shrink (only
+ * a docked phone — a desktop sits beside the chat, a stretched one IS the
+ * screen) and that it stays a card and a touch target rather than becoming a
+ * second, differently shaped control.
+ */
+describe('composerExpansion compact', () => {
+  test('a docked phone shrinks to a 44px box, still framed as a card', () => {
+    const layout = composerExpansion({ ...base, variant: 'mobile', compact: true });
+    // A fixed height, not a min-height: a textarea's own `rows` sets its
+    // height, so a minimum alone never shrinks it.
+    expect(layout.textareaClass).toContain('h-11');
+    expect(layout.textareaClass).not.toContain('min-h-[68px]');
+    expect(layout.cardClass).toContain('rounded-xl');
+    expect(layout.cardClass).toContain('shadow-sm');
+    // The frame's own state does not change: compact is a SIZE, not a style.
+    expect(layout.cardClass).toContain('border-ink/10');
+  });
+
+  test('a desktop ignores it: its composer sits beside the chat', () => {
+    const layout = composerExpansion({ ...base, variant: 'desktop', compact: true });
+    expect(layout.textareaClass).toContain('min-h-[80px]');
+  });
+
+  test('a stretched phone is the screen, so there is nothing to give back', () => {
+    const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile', compact: true });
+    expect(layout.cardClass).toContain('rounded-none');
+    expect(layout.textareaClass).toContain('h-full');
+  });
+});
+
 describe('composerExpansion stretched', () => {
   test('a phone takes the viewport, and its popup opens over the draft', () => {
     const layout = composerExpansion({ ...base, expanded: true, variant: 'mobile' });

package/src/client/components/workspace/chat-timeline/chat-input/expansion.ts

@@ -59,6 +59,13 @@ export interface ComposerExpansionInput {
    * `useKeyboardInset`. 0 when there is no keyboard (or no `visualViewport`).
    */
   keyboardInset: number;
+  /**
+   * A phone reader is scrolled back through the transcript and the draft is
+   * empty, so the composer gives the conversation its height back. Only the
+   * docked phone layout has anything to give: a desktop composer sits beside
+   * the chat rather than over it, and a stretched one is the screen.
+   */
+  compact: boolean;
 }
 
 export interface ComposerExpansion {
@@ -88,17 +95,34 @@ export function composerExpansion({
   expanded,
   isDragging,
   keyboardInset,
+  compact,
 }: ComposerExpansionInput): ComposerExpansion {
   const mobile = variant === 'mobile';
-  const border = isDragging ? 'border-ink/40' : 'border-ink/20 focus-within:border-ink';
+  // Same frame as a tool card (`ToolCardShell`): `rounded-xl`, `border-ink/10`
+  // on `bg-paper`, darkening to `ink/20` under the pointer — the composer is a
+  // card in the same transcript, so it must not be a smaller, differently
+  // coloured one. `focus-within` is the composer's own analogue of the card's
+  // hover, since the interactive surface is the textarea inside it.
+  const border = isDragging
+    ? 'border-ink/40'
+    : 'border-ink/10 hover:border-ink/20 focus-within:border-ink/30';
 
   if (!expanded) {
     return {
-      cardClass: `border rounded-md bg-paper shadow-sm ${border}`,
+      cardClass: `border rounded-xl bg-paper shadow-sm ${border}`,
       cardPositionClass: 'relative',
       cardLayoutClass: '',
+      // A compact phone composer gives the transcript its height back. `h-11`
+      // rather than a `min-h`: a textarea's height comes from its `rows`
+      // (two lines by default), so a min-height alone never shrinks it —
+      // measured, `min-h-[44px]` still laid out at 64px. The box is fixed at
+      // 44px, the smallest reliable touch target, and it never needs to grow:
+      // a draft restores the full composer on the same commit the first
+      // character lands in it.
       textareaClass: mobile
-        ? 'px-3 py-3 text-base min-h-[68px] max-h-40'
+        ? compact
+          ? 'px-3 py-2 text-base h-11 max-h-40'
+          : 'px-3 py-3 text-base min-h-[68px] max-h-40'
         : 'px-3 py-3 text-sm min-h-[80px]',
       wrapperClass: '',
       pickerPlacement: 'up',
@@ -128,7 +152,7 @@ export function composerExpansion({
   }
 
   return {
-    cardClass: `border rounded-md bg-paper shadow-lg ${border}`,
+    cardClass: `border rounded-xl bg-paper shadow-md ${border}`,
     cardPositionClass: 'relative',
     cardLayoutClass: '',
     // A share of the viewport, not of the panel: the dock sits at the bottom of