@kabmo-labs/kabmo 0.1.0 → 0.3.0

package/src/client/components/mobile/mobile-session-sidebar/Toolbar.test.ts

@@ -133,3 +133,107 @@ describe('mobile toolbar archive button', () => {
     expect(sortTrigger?.className).not.toContain('bg-ink/10');
   });
 });
+
+/**
+ * The row's overflow rule, which is what the reported missing `+` came down to.
+ *
+ * happy-dom reports `clientWidth` as 0, so the toolbar renders the unmeasured
+ * state — every control on the row — and these cases pin the two halves that
+ * are decidable without layout: the primary pill's icon and label are BOTH in
+ * the markup at every width, and the `⋯` menu exists as the destination the
+ * measured rule moves a control into.
+ */
+describe('mobile toolbar overflow', () => {
+  test('the primary pill always draws its icon and its label', async () => {
+    const { el } = await mount();
+    const pill = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'New Session');
+    expect(pill).not.toBeUndefined();
+    const icon = pill?.querySelector('svg');
+    expect(icon?.getAttribute('class')).toContain('lucide-plus');
+    // `shrink-0` is the fix: without it the icon is the flex item that gives up
+    // width, and the label's `whitespace-nowrap` min-content refuses to.
+    expect(icon?.getAttribute('class')).toContain('shrink-0');
+    const label = pill?.querySelector('span');
+    expect(label?.textContent).toBe('New Session');
+    // Not hidden at any width — the budget drops a CONTROL instead.
+    expect(label?.className).not.toContain('hidden');
+  });
+
+  test('every control is on the row until a width says otherwise', async () => {
+    // An unmeasured row reports 0, and `mobileToolbarCapacity(0)` keeps the
+    // full set: the menu must not appear before anything has been measured.
+    const { el } = await mount();
+    for (const name of [
+      'New Workspace',
+      'Scheduled tasks',
+      'Show archived sessions',
+      'Select workspaces',
+      'Refresh sessions',
+      'Sort workspaces',
+    ]) {
+      const button = Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === name);
+      expect(button).not.toBeUndefined();
+    }
+    expect(el.querySelector('button[aria-label="More sidebar actions"]')).toBeNull();
+  });
+
+  test('the overflow menu opens and carries the controls it took', async () => {
+    // The row is stubbed to a phone's 366px (a 390px drawer minus its `p-3`),
+    // which is the width the reported bug was seen at. happy-dom computes no
+    // layout, so the measurement the hook reads is supplied here — the rule
+    // itself is pinned by `sidebar-toolbar.test.ts`.
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth');
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return (this as HTMLElement).className === 'flex items-center space-x-2' ? 366 : 0;
+      },
+    });
+    try {
+      const { el } = await mount();
+      const onRow = (name: string) =>
+        Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === name);
+      // The tail moves out — scheduler and selection — while the head stays,
+      // including the two view controls a phone actually uses.
+      expect(onRow('Scheduled tasks')).toBeUndefined();
+      expect(onRow('Select workspaces')).toBeUndefined();
+      expect(onRow('New Workspace')).not.toBeUndefined();
+      expect(onRow('Sort workspaces')).not.toBeUndefined();
+
+      const trigger = el.querySelector('button[aria-label="More sidebar actions"]') as HTMLButtonElement;
+      expect(trigger).not.toBeNull();
+      await act(async () => { trigger.click(); });
+
+      // Named in words, not as glyphs — and each one still runs.
+      const menuItems = Array.from(el.querySelectorAll('[role="menuitem"]')).map((b) => b.textContent ?? '');
+      expect(menuItems).toContain('Scheduled tasks');
+      expect(menuItems).toContain('Select workspaces');
+      // The sort did NOT overflow here, so its options are not duplicated in
+      // the menu — the sort list arrives only when the sort control itself is
+      // one of the ones that left the row.
+      expect(el.textContent).not.toContain('Sort Workspaces');
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLElement.prototype, 'clientWidth', descriptor);
+      else delete (HTMLElement.prototype as unknown as Record<string, unknown>).clientWidth;
+    }
+  });
+
+  test('a wide drawer keeps every control on the row', async () => {
+    const descriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'clientWidth');
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return (this as HTMLElement).className === 'flex items-center space-x-2' ? 600 : 0;
+      },
+    });
+    try {
+      const { el } = await mount();
+      expect(el.querySelector('button[aria-label="More sidebar actions"]')).toBeNull();
+      expect(Array.from(el.querySelectorAll('button')).find((b) => b.getAttribute('aria-label') === 'Sort workspaces'))
+        .not.toBeUndefined();
+    } finally {
+      if (descriptor) Object.defineProperty(HTMLElement.prototype, 'clientWidth', descriptor);
+      else delete (HTMLElement.prototype as unknown as Record<string, unknown>).clientWidth;
+    }
+  });
+});

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

@@ -2,6 +2,13 @@ import type { RefObject } from 'preact/compat';
 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;
@@ -30,6 +37,12 @@ export interface MobileSessionToolbarProps {
   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,
@@ -52,21 +65,59 @@ export function MobileSessionToolbar({
   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}
@@ -74,119 +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. */}
-        <button
-          type="button"
-          onClick={onSelectWorkspaces}
-          aria-pressed={selecting}
-          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 ${
-            selecting
-              ? 'bg-ink/10 text-ink border-ink/30'
-              : 'border-ink/15 bg-paper hover:bg-ink/5 text-ink/80 hover:text-ink'
-          }`}
-          title={selecting ? 'Cancel selection' : 'Select workspaces'}
-          aria-label={selecting ? 'Cancel selection' : 'Select workspaces'}
-        >
-          <ListChecks size={16} strokeWidth={1.8} />
-        </button>
+        {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 */}
@@ -217,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"
               >
@@ -231,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>