From 332fb07f45888acbd6c68c3fe12d0cc8868f5b94 Mon Sep 17 00:00:00 2001
From: ioplex <ioplex@minime.lab>
Date: Wed, 21 Oct 2026 00:50:21 -0400
Subject: [PATCH 1/6] feat(frontend): move session activity scanner under the
 composer

- Keep the model picker visible while a session is active
- Render a full-width segmented scanner below the composer via shared ScannerBars
- Reduce SessionStatusIndicator to the list-row spinner
---
 .../src/components/activity/ActivityList.tsx  |   2 +-
 .../message/ComposerActivityBar.test.tsx      | 228 ++++++++++++++++++
 .../message/ComposerActivityBar.tsx           |  62 +++++
 .../message/PromptInput.command.test.tsx      |  21 +-
 .../message/PromptInput.goal.test.tsx         |   4 -
 .../message/PromptInput.mention.test.tsx      |   4 -
 .../message/PromptInput.stt.test.tsx          |   4 -
 .../src/components/message/PromptInput.tsx    |  17 +-
 .../components/navigation/RepoSessionNav.tsx  |   2 +-
 frontend/src/components/repo/MultiRunCard.tsx |   4 +-
 .../src/components/session/SessionCard.tsx    |   4 +-
 .../session/SessionPickerDialog.tsx           |   2 +-
 frontend/src/components/ui/scanner-bars.tsx   | 205 ++++++++++++++++
 .../ui/session-status-indicator.test.tsx      |   6 +-
 .../ui/session-status-indicator.tsx           | 174 +++----------
 15 files changed, 554 insertions(+), 185 deletions(-)
 create mode 100644 frontend/src/components/message/ComposerActivityBar.test.tsx
 create mode 100644 frontend/src/components/message/ComposerActivityBar.tsx
 create mode 100644 frontend/src/components/ui/scanner-bars.tsx

diff --git a/frontend/src/components/activity/ActivityList.tsx b/frontend/src/components/activity/ActivityList.tsx
index 55cb5f85e..127d3d55b 100644
--- a/frontend/src/components/activity/ActivityList.tsx
+++ b/frontend/src/components/activity/ActivityList.tsx
@@ -64,7 +64,7 @@ function ActivityStateIcon({ item, iconClassName }: { item: ActiveWorkItem; icon
     return <CircleAlert className={cn(iconClassName, 'text-warning')} aria-hidden="true" />
   }
   if (item.state === 'running') {
-    return <SessionStatusIndicator sessionID={item.session.id} size="sm" />
+    return <SessionStatusIndicator sessionID={item.session.id} />
   }
   if (item.outcome === 'failed') {
     return <CircleX className={cn(iconClassName, 'text-destructive')} aria-hidden="true" />
diff --git a/frontend/src/components/message/ComposerActivityBar.test.tsx b/frontend/src/components/message/ComposerActivityBar.test.tsx
new file mode 100644
index 000000000..fa907fb05
--- /dev/null
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -0,0 +1,228 @@
+import { act, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ComposerActivityBar } from './ComposerActivityBar'
+import { useSessionStatus } from '@/stores/sessionStatusStore'
+import { stubMatchMedia } from '@/test/test-utils'
+
+const originalMatchMedia = window.matchMedia
+const originalResizeObserver = global.ResizeObserver
+
+class MockResizeObserver {
+  static instances: MockResizeObserver[] = []
+
+  readonly callback: ResizeObserverCallback
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+    MockResizeObserver.instances.push(this)
+  }
+
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+
+  trigger(width: number) {
+    this.callback(
+      [{ contentRect: { width } } as ResizeObserverEntry],
+      this as unknown as ResizeObserver,
+    )
+  }
+}
+
+const resetStore = () => {
+  useSessionStatus.setState({
+    statuses: new Map(),
+    statusCache: new Map(),
+    statusRevisions: new Map(),
+    knownSessions: new Set(),
+    outcomes: new Map(),
+    parents: new Map(),
+    directories: new Map(),
+    runningShells: new Map(),
+    revision: 0,
+  })
+}
+
+const segmentsOf = (bar: HTMLElement) =>
+  Array.from(bar.firstElementChild?.children ?? []) as HTMLElement[]
+
+const measureWidth = (width: number) => {
+  act(() => {
+    MockResizeObserver.instances.forEach((instance) => instance.trigger(width))
+  })
+}
+
+describe('ComposerActivityBar', () => {
+  beforeEach(() => {
+    resetStore()
+    MockResizeObserver.instances = []
+    global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    global.ResizeObserver = originalResizeObserver
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: originalMatchMedia,
+    })
+  })
+
+  it('renders nothing when the session is idle without background activity', () => {
+    const { container } = render(<ComposerActivityBar sessionID="session-a" />)
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('anchors a pointer-transparent progressbar in the gap below the composer', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const bar = screen.getByRole('progressbar', { name: 'Session working' })
+    expect(bar).toHaveClass('pointer-events-none')
+    expect(bar).toHaveClass('absolute')
+    expect(bar).toHaveClass('inset-x-3')
+    expect(bar).toHaveClass('-bottom-[13px]')
+    expect(bar).toHaveClass('md:-bottom-[11px]')
+    expect(bar).toHaveClass('flex')
+  })
+
+  it('fills the measured width with 4x8 segments', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const bar = screen.getByRole('progressbar', { name: 'Session working' })
+    expect(bar.firstElementChild).toHaveClass('gap-0.5')
+
+    measureWidth(602)
+
+    const segments = segmentsOf(bar)
+    expect(segments).toHaveLength(100)
+    expect(segments[0]).toHaveClass('w-1')
+    expect(segments[0]).toHaveClass('h-2')
+    expect(segments[0]).toHaveClass('rounded-[1px]')
+    expect(segments[0]).toHaveClass('transition-colors')
+    expect(segments[0]).toHaveClass('duration-75')
+    expect(segments[0]).not.toHaveClass('flex-1')
+  })
+
+  it('keeps the minimum segment count for narrow containers', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const bar = screen.getByRole('progressbar', { name: 'Session working' })
+    measureWidth(20)
+
+    expect(segmentsOf(bar)).toHaveLength(12)
+  })
+
+  it('lights the info tiers around the scanner window', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    measureWidth(602)
+
+    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(segments[3]).toHaveClass('bg-info')
+    expect(segments[4]).toHaveClass('bg-info/70')
+    expect(segments[6]).toHaveClass('bg-info/40')
+    expect(segments[7]).toHaveClass('bg-info/20')
+    expect(segments[8]).toHaveClass('bg-muted/20')
+    expect(segments[99]).toHaveClass('bg-muted/20')
+  })
+
+  it('renders the compacting state with primary colors', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'compact' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    measureWidth(602)
+
+    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Compacting' }))
+    expect(segments[3]).toHaveClass('bg-primary')
+    expect(segments[4]).toHaveClass('bg-primary/70')
+    expect(segments[6]).toHaveClass('bg-primary/40')
+    expect(segments[7]).toHaveClass('bg-primary/20')
+    expect(segments[8]).toHaveClass('bg-muted/20')
+  })
+
+  it('reports the retry attempt in the label with warning colors', () => {
+    useSessionStatus.getState().setStatus('session-a', {
+      type: 'retry',
+      attempt: 2,
+      message: 'rate limited',
+      next: Date.now() + 5_000,
+    })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    measureWidth(602)
+
+    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Retrying (Retry #2)' }))
+    expect(segments[3]).toHaveClass('bg-warning')
+    expect(segments[4]).toHaveClass('bg-warning/70')
+    expect(segments[6]).toHaveClass('bg-warning/40')
+    expect(segments[7]).toHaveClass('bg-warning/20')
+    expect(segments[8]).toHaveClass('bg-muted/20')
+  })
+
+  it('renders the muted background activity state when idle with a running shell', () => {
+    useSessionStatus.getState().setShellRunning('shell-1', 'session-a', '/repo')
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    measureWidth(602)
+
+    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Background tasks running' }))
+    expect(segments[3]).toHaveClass('bg-muted-foreground')
+    expect(segments[4]).toHaveClass('bg-muted-foreground/70')
+    expect(segments[6]).toHaveClass('bg-muted-foreground/40')
+    expect(segments[7]).toHaveClass('bg-muted-foreground/20')
+    expect(segments[8]).toHaveClass('bg-muted/20')
+  })
+
+  it('sweeps the lit window on the step interval', () => {
+    vi.useFakeTimers()
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const bar = screen.getByRole('progressbar', { name: 'Session working' })
+    measureWidth(602)
+    expect(segmentsOf(bar)[3]).toHaveClass('bg-info')
+
+    act(() => {
+      vi.advanceTimersByTime(120)
+    })
+
+    const segments = segmentsOf(bar)
+    expect(segments[7]).toHaveClass('bg-info')
+    expect(segments[4]).toHaveClass('bg-info/40')
+  })
+
+  it('renders every segment statically when reduced motion is requested', () => {
+    vi.useFakeTimers()
+    stubMatchMedia(true)
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const bar = screen.getByRole('progressbar', { name: 'Session working' })
+    measureWidth(602)
+    act(() => {
+      vi.advanceTimersByTime(600)
+    })
+
+    const segments = segmentsOf(bar)
+    expect(segments).toHaveLength(100)
+    expect(segments.every((segment) => segment.classList.contains('bg-info/60'))).toBe(true)
+    expect(segments.some((segment) => segment.classList.contains('bg-muted/20'))).toBe(false)
+  })
+})
diff --git a/frontend/src/components/message/ComposerActivityBar.tsx b/frontend/src/components/message/ComposerActivityBar.tsx
new file mode 100644
index 000000000..7b7b05a94
--- /dev/null
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -0,0 +1,62 @@
+import { ScannerBars, type ScannerTone } from '@/components/ui/scanner-bars'
+import { useHasBackgroundActivity, useSessionStatusForSession } from '@/stores/sessionStatusStore'
+
+interface ComposerActivityBarProps {
+  sessionID: string
+}
+
+const LIT_WIDTH = 6
+const STEP_INTERVAL_MS = 30
+
+const ACTIVITY_PRESENTATION = {
+  background: {
+    label: 'Background tasks running',
+    tone: 'muted-foreground',
+  },
+  busy: {
+    label: 'Session working',
+    tone: 'info',
+  },
+  compact: {
+    label: 'Compacting',
+    tone: 'primary',
+  },
+  retry: {
+    label: 'Retrying',
+    tone: 'warning',
+  },
+} as const satisfies Record<string, { label: string; tone: ScannerTone }>
+
+/**
+ * Session activity scanner anchored in the gap below the composer frame. The strip uses the same
+ * 4x8px segments as the session status scanner and fills the composer width with as many segments
+ * as fit. Renders nothing while the session is idle and has no background activity; otherwise
+ * announces the current activity through an indeterminate progressbar.
+ */
+export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
+  const status = useSessionStatusForSession(sessionID)
+  const hasBackgroundActivity = useHasBackgroundActivity(sessionID)
+
+  if (status.type === 'idle' && !hasBackgroundActivity) {
+    return null
+  }
+
+  const activity = status.type === 'idle'
+    ? ACTIVITY_PRESENTATION.background
+    : ACTIVITY_PRESENTATION[status.type]
+  const label = status.type === 'retry'
+    ? `${ACTIVITY_PRESENTATION.retry.label} (Retry #${status.attempt})`
+    : activity.label
+
+  return (
+    <div
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="pointer-events-none absolute inset-x-3 -bottom-[13px] md:-bottom-[11px] flex"
+    >
+      <ScannerBars tone={activity.tone} litWidth={LIT_WIDTH} intervalMs={STEP_INTERVAL_MS} />
+    </div>
+  )
+}
diff --git a/frontend/src/components/message/PromptInput.command.test.tsx b/frontend/src/components/message/PromptInput.command.test.tsx
index 9115fe171..83f6380dd 100644
--- a/frontend/src/components/message/PromptInput.command.test.tsx
+++ b/frontend/src/components/message/PromptInput.command.test.tsx
@@ -103,10 +103,6 @@ vi.mock('@/hooks/useSessionPermissionMode', () => ({
   useSessionPermissionMode: () => ({ data: undefined }),
 }))
 
-vi.mock('@/components/ui/session-status-indicator', () => ({
-  SessionStatusIndicator: () => <div>SessionStatus</div>,
-}))
-
 vi.mock('./ComposerToolsMenu', () => ({
   ComposerToolsMenu: () => null,
 }))
@@ -274,6 +270,23 @@ describe('PromptInput command submission', () => {
     expect(screen.getByRole('status')).toHaveTextContent('Background tasks running')
   })
 
+  it('keeps the model picker visible while the session is active', async () => {
+    const queryClient = createTestQueryClient()
+    queryClient.setQueryData(['opencode', 'session', 'test-session', '/test'], sessionInfo())
+    const buildPrompt = (props: { isSessionActive?: boolean }) => (
+      <QueryClientProvider client={queryClient}>
+        <PromptInput {...defaultProps} {...props} />
+      </QueryClientProvider>
+    )
+
+    const { rerender } = render(buildPrompt({}))
+    await screen.findByPlaceholderText('Send a message...')
+    expect(screen.getByTestId('model-quick-select').querySelector('button')).not.toBeNull()
+
+    rerender(buildPrompt({ isSessionActive: true }))
+    expect(screen.getByTestId('model-quick-select').querySelector('button')).not.toBeNull()
+  })
+
   it('disables submit and does not run a command while the model is not ready', async () => {
     mocks.useModelSelection.mockReturnValue({
       model: null,
diff --git a/frontend/src/components/message/PromptInput.goal.test.tsx b/frontend/src/components/message/PromptInput.goal.test.tsx
index 8b75ade5e..55fdb8e1d 100644
--- a/frontend/src/components/message/PromptInput.goal.test.tsx
+++ b/frontend/src/components/message/PromptInput.goal.test.tsx
@@ -122,10 +122,6 @@ vi.mock('@/components/session/SessionSandboxMenu', () => ({
   SessionSandboxMenu: () => null,
 }))
 
-vi.mock('@/components/ui/session-status-indicator', () => ({
-  SessionStatusIndicator: () => <div>SessionStatus</div>,
-}))
-
 vi.mock('./PromptSuggestions', () => ({
   PromptSuggestions: () => null,
 }))
diff --git a/frontend/src/components/message/PromptInput.mention.test.tsx b/frontend/src/components/message/PromptInput.mention.test.tsx
index 237b44fa5..cfcc9bdd2 100644
--- a/frontend/src/components/message/PromptInput.mention.test.tsx
+++ b/frontend/src/components/message/PromptInput.mention.test.tsx
@@ -89,10 +89,6 @@ vi.mock('@/hooks/useSessionPermissionMode', () => ({
   useSessionPermissionMode: () => ({ data: undefined }),
 }))
 
-vi.mock('@/components/ui/session-status-indicator', () => ({
-  SessionStatusIndicator: () => <div>SessionStatus</div>,
-}))
-
 vi.mock('./PromptSuggestions', () => ({
   PromptSuggestions: (props: { isOpen: boolean; selectedIndex: number }) => {
     if (props.isOpen) {
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
index 7c316f9b3..8dc7c1d9a 100644
--- a/frontend/src/components/message/PromptInput.stt.test.tsx
+++ b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -121,10 +121,6 @@ vi.mock('@/hooks/useSessionPermissionMode', () => ({
   useSessionPermissionMode: () => ({ data: undefined }),
 }))
 
-vi.mock('@/components/ui/session-status-indicator', () => ({
-  SessionStatusIndicator: () => <div>SessionStatus</div>,
-}))
-
 vi.mock('./PromptSuggestions', () => ({
   PromptSuggestions: () => null,
 }))
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index fff193da3..93327a632 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -25,7 +25,7 @@ import { SquareFill } from '@/components/ui/square-fill'
 import { IconToggleButton } from '@/components/ui/icon-toggle-button'
 
 import { PromptSuggestions, type PromptSuggestion } from './PromptSuggestions'
-import { SessionStatusIndicator } from '@/components/ui/session-status-indicator'
+import { ComposerActivityBar } from './ComposerActivityBar'
 import { ModelQuickSelect } from '@/components/model/ModelQuickSelect'
 import { AgentQuickSelect } from '@/components/agent/AgentQuickSelect'
 import { VoiceStatusOverlay, type VoiceStatusOverlayState } from './VoiceStatusOverlay'
@@ -1488,10 +1488,11 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
       : ''
 
 return (
-    <div className={`relative isolate border border-border dark:border-border/30 rounded-xl p-2 md:p-3 mb-4 md:mb-1 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-xl before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
+    <div className={`relative isolate border border-border dark:border-border/30 rounded-xl p-2 md:p-3 mb-4 md:mb-3 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-xl before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
       <div role="status" aria-live="polite" className="sr-only">
         {sessionActivityAnnouncement}
       </div>
+      <ComposerActivityBar sessionID={sessionID} />
       {composerModeStyle && (
         <span
           data-testid="composer-mode-badge"
@@ -1559,11 +1560,6 @@ return (
                 <ArrowDown className="w-4 h-4" />
                 <span>Latest</span>
               </button>
-              {(isSessionActive || hasBackgroundActivity) && (
-                <div className="px-2.5 py-1.5 rounded-lg text-xs font-medium text-muted-foreground max-w-[120px]">
-                  <SessionStatusIndicator sessionID={sessionID} showLabel />
-                </div>
-              )}
               <ModelQuickSelect
                 directory={directory}
                 open={isModelPickerOpen}
@@ -1593,18 +1589,13 @@ return (
                   </IconToggleButton>
                 </>
               ) : null}
-              {(isSessionActive || hasBackgroundActivity) && (
-                <div className="px-2.5 py-1.5 md:px-3 md:py-2 rounded-lg text-xs md:text-sm font-medium text-muted-foreground max-w-[120px] md:max-w-[180px]">
-                  <SessionStatusIndicator sessionID={sessionID} showLabel />
-                </div>
-              )}
               <ModelQuickSelect
                 directory={directory}
                 open={isModelPickerOpen}
                 onOpenChange={setIsModelPickerOpen}
                 session={modelSelectionSession}
               >
-                {!isSessionActive && !hideSecondaryButtons && (
+                {!hideSecondaryButtons && (
                   <button
                     className="px-2.5 py-0.5 md:px-3 min-h-[44px] md:min-h-[36px] min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
                   >
diff --git a/frontend/src/components/navigation/RepoSessionNav.tsx b/frontend/src/components/navigation/RepoSessionNav.tsx
index ff8656b3d..261db78c8 100644
--- a/frontend/src/components/navigation/RepoSessionNav.tsx
+++ b/frontend/src/components/navigation/RepoSessionNav.tsx
@@ -145,7 +145,7 @@ export function SessionNavRow({ item, isCurrent, onSelect, repoLabel }: SessionN
           {item.worktreeBranch}
         </span>
       )}
-      <SessionStatusIndicator sessionID={item.session.id} size="sm" />
+      <SessionStatusIndicator sessionID={item.session.id} />
       {hasPermission(item.session.id) && (
         <Bell className="h-3 w-3 shrink-0 text-highlight" aria-label="Pending permission" />
       )}
diff --git a/frontend/src/components/repo/MultiRunCard.tsx b/frontend/src/components/repo/MultiRunCard.tsx
index 2df5404ce..ebc18bcbd 100644
--- a/frontend/src/components/repo/MultiRunCard.tsx
+++ b/frontend/src/components/repo/MultiRunCard.tsx
@@ -329,7 +329,7 @@ function EntryRow({
           <p className="truncate text-sm font-medium">{entry.model}</p>
           <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
             <StatusPill label={readiness.label} tone={readiness.tone} />
-            {readiness.label === 'Running' && sessionId ? <SessionStatusIndicator sessionID={sessionId} size="sm" /> : null}
+            {readiness.label === 'Running' && sessionId ? <SessionStatusIndicator sessionID={sessionId} /> : null}
             <span className="text-xs text-muted-foreground">{isolationLabel}</span>
           </div>
           {detail ? (
@@ -389,7 +389,7 @@ function FusionRow({ fusion, onOpenSession, onWalkthrough }: FusionRowProps) {
         <p className="truncate text-sm font-medium">{fusion.model}</p>
         <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
           <StatusPill label={status.label} tone={status.tone} />
-          {fusion.status === 'started' && sessionId ? <SessionStatusIndicator sessionID={sessionId} size="sm" /> : null}
+          {fusion.status === 'started' && sessionId ? <SessionStatusIndicator sessionID={sessionId} /> : null}
           <span className="text-xs text-muted-foreground">
             <span>
               from {fusion.sources.length} source{fusion.sources.length === 1 ? '' : 's'}
diff --git a/frontend/src/components/session/SessionCard.tsx b/frontend/src/components/session/SessionCard.tsx
index e8c4ff07d..8ec24f89c 100644
--- a/frontend/src/components/session/SessionCard.tsx
+++ b/frontend/src/components/session/SessionCard.tsx
@@ -95,7 +95,7 @@ export const SessionCard = ({
                       }}
                       className="w-5 h-5 flex-shrink-0"
                     />
-                    <SessionStatusIndicator sessionID={session.id} size="sm" />
+                    <SessionStatusIndicator sessionID={session.id} />
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-1">
@@ -130,7 +130,7 @@ export const SessionCard = ({
                         addSuffix: true,
                       })}
                     </span>
-                    <SessionStatusIndicator sessionID={session.id} size="sm" />
+                    <SessionStatusIndicator sessionID={session.id} />
                   </div>
                 </div>
                 {onTogglePin && (
diff --git a/frontend/src/components/session/SessionPickerDialog.tsx b/frontend/src/components/session/SessionPickerDialog.tsx
index fb4fb849c..9f772d7d0 100644
--- a/frontend/src/components/session/SessionPickerDialog.tsx
+++ b/frontend/src/components/session/SessionPickerDialog.tsx
@@ -181,7 +181,7 @@ function SessionPickerGutter({ sessionID, isActive }: { sessionID: string; isAct
   const status = useSessionStatusForSession(sessionID)
   if (status.type !== 'idle') {
     return (
-      <SessionStatusIndicator sessionID={sessionID} size="sm" />
+      <SessionStatusIndicator sessionID={sessionID} />
     )
   }
   if (isActive) {
diff --git a/frontend/src/components/ui/scanner-bars.tsx b/frontend/src/components/ui/scanner-bars.tsx
new file mode 100644
index 000000000..f15aecc50
--- /dev/null
+++ b/frontend/src/components/ui/scanner-bars.tsx
@@ -0,0 +1,205 @@
+import { useLayoutEffect, useRef, useState, type RefObject } from 'react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
+import { cn } from '@/lib/utils'
+
+export type ScannerTone = 'info' | 'primary' | 'warning' | 'muted-foreground'
+
+export const SCANNER_REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
+
+const SCANNER_SEGMENT_WIDTH = 4
+const SCANNER_SEGMENT_GAP = 2
+const SCANNER_SEGMENT_PITCH = SCANNER_SEGMENT_WIDTH + SCANNER_SEGMENT_GAP
+const SCANNER_MIN_SEGMENTS = 12
+
+const SCANNER_SEGMENT_CLASS = 'w-1 h-2 rounded-[1px] transition-colors duration-75'
+
+const SCANNER_TONE_TIERS: Record<ScannerTone, readonly [string, string, string, string]> = {
+  info: ['bg-info', 'bg-info/70', 'bg-info/40', 'bg-info/20'],
+  primary: ['bg-primary', 'bg-primary/70', 'bg-primary/40', 'bg-primary/20'],
+  warning: ['bg-warning', 'bg-warning/70', 'bg-warning/40', 'bg-warning/20'],
+  'muted-foreground': ['bg-muted-foreground', 'bg-muted-foreground/70', 'bg-muted-foreground/40', 'bg-muted-foreground/20'],
+}
+
+const SCANNER_STATIC_TONE_CLASS: Record<ScannerTone, string> = {
+  info: 'bg-info/60',
+  primary: 'bg-primary/60',
+  warning: 'bg-warning/60',
+  'muted-foreground': 'bg-muted-foreground/60',
+}
+
+const SCANNER_OFF_CLASS = 'bg-muted/20'
+const SCANNER_INTENSITY_THRESHOLDS = [0.8, 0.5, 0.2] as const
+const SCANNER_FAINTEST_TIER = SCANNER_INTENSITY_THRESHOLDS.length
+
+/**
+ * Returns how many fixed-width segments fit into `width`: each segment is 4px wide and the
+ * container adds a 2px gap between neighbors, so `n` segments occupy `6n - 2` pixels. Never
+ * drops below `SCANNER_MIN_SEGMENTS` so an unmeasured container still renders a usable scanner.
+ */
+export function scannerSegmentCountForWidth(width: number): number {
+  return Math.max(SCANNER_MIN_SEGMENTS, Math.floor((width + SCANNER_SEGMENT_GAP) / SCANNER_SEGMENT_PITCH))
+}
+
+/**
+ * Tracks the content width of a container across resizes. Returns 0 until the first measurement.
+ */
+function useContainerWidth(ref: RefObject<HTMLElement | null>): number {
+  const [width, setWidth] = useState(0)
+
+  useLayoutEffect(() => {
+    const element = ref.current
+    if (!element) {
+      return
+    }
+
+    const update = (next: number) => setWidth((previous) => (previous === next ? previous : next))
+    update(element.getBoundingClientRect().width)
+
+    if (typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (entry) {
+        update(entry.contentRect.width)
+      }
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref])
+
+  return width
+}
+
+interface ScannerSegmentClassOptions {
+  index: number
+  position: number
+  litWidth: number
+  tone: ScannerTone
+  static?: boolean
+}
+
+/**
+ * Returns the background class for one scanner segment. Segments within the lit window fade out
+ * with distance from the window center across four intensity tiers; everything outside the window
+ * stays muted. `static` skips the window math and renders the uniform reduced-motion tint.
+ */
+export function scannerSegmentClass({
+  index,
+  position,
+  litWidth,
+  tone,
+  static: isStatic = false,
+}: ScannerSegmentClassOptions): string {
+  if (isStatic) {
+    return SCANNER_STATIC_TONE_CLASS[tone]
+  }
+
+  const halfWidth = litWidth / 2
+  const distance = Math.abs(index - (position + halfWidth))
+
+  if (distance > halfWidth + 1) {
+    return SCANNER_OFF_CLASS
+  }
+
+  const intensity = Math.max(0, 1 - distance / (halfWidth + 2))
+  const tier = SCANNER_INTENSITY_THRESHOLDS.findIndex((threshold) => intensity > threshold)
+
+  return SCANNER_TONE_TIERS[tone][tier === -1 ? SCANNER_FAINTEST_TIER : tier]
+}
+
+interface ScannerPositionOptions {
+  segmentCount: number
+  litWidth: number
+  intervalMs: number
+  paused: boolean
+}
+
+function useScannerPosition({
+  segmentCount,
+  litWidth,
+  intervalMs,
+  paused,
+}: ScannerPositionOptions): number {
+  const [position, setPosition] = useState(0)
+  const direction = useRef(1)
+  const maxPosition = Math.max(0, segmentCount - litWidth)
+
+  useLayoutEffect(() => {
+    setPosition((previous) => Math.min(previous, maxPosition))
+  }, [maxPosition])
+
+  useLayoutEffect(() => {
+    if (paused || maxPosition === 0) {
+      return
+    }
+
+    const interval = setInterval(() => {
+      setPosition((previous) => {
+        const next = previous + direction.current
+        if (next >= maxPosition) {
+          direction.current = -1
+          return maxPosition
+        }
+        if (next <= 0) {
+          direction.current = 1
+          return 0
+        }
+        return next
+      })
+    }, intervalMs)
+
+    return () => clearInterval(interval)
+  }, [paused, maxPosition, intervalMs])
+
+  return position
+}
+
+interface ScannerBarsProps {
+  tone: ScannerTone
+  segmentCount?: number
+  litWidth?: number
+  intervalMs?: number
+  className?: string
+}
+
+/**
+ * Segmented scanner matching the session status scanner: 4x8px segments with a 2px gap and a lit
+ * window of `litWidth` segments that sweeps back and forth. Without an explicit `segmentCount` the
+ * count is measured from the container width so the strip spans the space it is given. Under
+ * `prefers-reduced-motion: reduce` the sweep is not started and every segment renders statically at
+ * 60% opacity.
+ */
+export function ScannerBars({
+  tone,
+  segmentCount,
+  litWidth = 6,
+  intervalMs = 60,
+  className,
+}: ScannerBarsProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const reducedMotion = useMediaQuery(SCANNER_REDUCED_MOTION_QUERY)
+  const measuredWidth = useContainerWidth(containerRef)
+  const resolvedCount = segmentCount ?? scannerSegmentCountForWidth(measuredWidth)
+  const position = useScannerPosition({
+    segmentCount: resolvedCount,
+    litWidth,
+    intervalMs,
+    paused: reducedMotion,
+  })
+
+  return (
+    <div ref={containerRef} className={cn('flex w-full items-center gap-0.5', className)}>
+      {Array.from({ length: resolvedCount }, (_, index) => (
+        <div
+          key={index}
+          className={cn(
+            SCANNER_SEGMENT_CLASS,
+            scannerSegmentClass({ index, position, litWidth, tone, static: reducedMotion }),
+          )}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/components/ui/session-status-indicator.test.tsx b/frontend/src/components/ui/session-status-indicator.test.tsx
index b506b2853..43b79b112 100644
--- a/frontend/src/components/ui/session-status-indicator.test.tsx
+++ b/frontend/src/components/ui/session-status-indicator.test.tsx
@@ -26,13 +26,13 @@ describe('SessionStatusIndicator background activity', () => {
   it('shows the background tasks label when idle with a running shell', () => {
     useSessionStatus.getState().setShellRunning('shell-1', 'session-a', '/repo')
 
-    render(<SessionStatusIndicator sessionID="session-a" showLabel />)
+    render(<SessionStatusIndicator sessionID="session-a" />)
 
     expect(screen.getByLabelText('Background tasks running')).toBeInTheDocument()
   })
 
   it('renders nothing when idle without background activity', () => {
-    const { container } = render(<SessionStatusIndicator sessionID="session-a" showLabel />)
+    const { container } = render(<SessionStatusIndicator sessionID="session-a" />)
 
     expect(container).toBeEmptyDOMElement()
   })
@@ -40,7 +40,7 @@ describe('SessionStatusIndicator background activity', () => {
   it('renders the braille spinner with a running label for a busy session', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
-    const { container } = render(<SessionStatusIndicator sessionID="session-a" size="sm" />)
+    const { container } = render(<SessionStatusIndicator sessionID="session-a" />)
 
     expect(screen.getByLabelText('Running')).toBeInTheDocument()
     const litDots = container.querySelectorAll('svg[aria-hidden="true"] circle[fill-opacity="1"]')
diff --git a/frontend/src/components/ui/session-status-indicator.tsx b/frontend/src/components/ui/session-status-indicator.tsx
index fc6c3960e..4ea40a602 100644
--- a/frontend/src/components/ui/session-status-indicator.tsx
+++ b/frontend/src/components/ui/session-status-indicator.tsx
@@ -1,169 +1,51 @@
-import { memo, useEffect, useState } from 'react'
+import { memo } from 'react'
 import { ActivitySpinner } from '@/components/ui/activity-spinner'
-import { useHasBackgroundActivity, useSessionStatusForSession, type SessionStatusType } from '@/stores/sessionStatusStore'
+import { useHasBackgroundActivity, useSessionStatusForSession } from '@/stores/sessionStatusStore'
 
 interface SessionStatusIndicatorProps {
   sessionID: string
   className?: string
-  size?: 'sm' | 'md'
-  showLabel?: boolean
 }
 
-const SCANNER_WIDTH = 6
-const SCANNER_SEGMENTS = 12
-
 /**
- * Shows a session's activity. `sm` renders the braille spinner sized for list rows;
- * `md` renders the animated scanner used by the session composer.
+ * Shows a session's activity as the braille spinner sized for list rows.
+ * Renders nothing while the session is idle and has no background activity.
  */
-export const SessionStatusIndicator = memo(function SessionStatusIndicator({ 
-  sessionID, 
+export const SessionStatusIndicator = memo(function SessionStatusIndicator({
+  sessionID,
   className = '',
-  size = 'md',
-  showLabel = false
 }: SessionStatusIndicatorProps) {
   const status = useSessionStatusForSession(sessionID)
   const hasBackground = useHasBackgroundActivity(sessionID)
-  const [position, setPosition] = useState(0)
-  const [direction, setDirection] = useState(1)
-  const [retryCountdown, setRetryCountdown] = useState(0)
   const backgroundOnly = status.type === 'idle' && hasBackground
-  
-  useEffect(() => {
-    if (size !== 'md') {
-      return
-    }
-    if (status.type === 'idle' && !hasBackground) {
-      return
-    }
-    
-    const interval = setInterval(() => {
-      setPosition(prev => {
-        const next = prev + direction
-        if (next >= SCANNER_SEGMENTS - SCANNER_WIDTH) {
-          setDirection(-1)
-          return SCANNER_SEGMENTS - SCANNER_WIDTH
-        }
-        if (next <= 0) {
-          setDirection(1)
-          return 0
-        }
-        return next
-      })
-    }, 60)
-    
-    return () => clearInterval(interval)
-  }, [size, status.type, hasBackground, direction])
-  
-  useEffect(() => {
-    if (!showLabel || status.type !== 'retry') {
-      setRetryCountdown(0)
-      return
-    }
-    
-    const remaining = Math.max(0, Math.ceil((status.next - Date.now()) / 1000))
-    setRetryCountdown(remaining)
-    
-    const interval = setInterval(() => {
-      const newRemaining = Math.max(0, Math.ceil((status.next - Date.now()) / 1000))
-      setRetryCountdown(newRemaining)
-    }, 1000)
-    
-    return () => clearInterval(interval)
-  }, [status, showLabel])
-  
+
   if (status.type === 'idle' && !hasBackground) {
     return null
   }
-  
-  if (size === 'sm') {
-    const colorClass = backgroundOnly
-      ? 'text-muted-foreground'
-      : status.type === 'retry'
-        ? 'text-warning'
-        : status.type === 'compact'
-          ? 'text-primary'
-          : 'text-info'
-    const label = backgroundOnly
-      ? 'Background tasks running'
-      : status.type === 'retry'
-        ? 'Retrying'
-        : status.type === 'compact'
-          ? 'Compacting'
-          : 'Running'
 
-    return (
-      <span
-        role="img"
-        aria-label={label}
-        title={backgroundOnly ? label : undefined}
-        className={`inline-flex items-center ${colorClass} ${className}`}
-      >
-        <ActivitySpinner />
-      </span>
-    )
-  }
-  
-  const getSegmentColor = (index: number, statusType: SessionStatusType['type'], background: boolean) => {
-    const distance = Math.abs(index - (position + SCANNER_WIDTH / 2))
-    const maxDistance = SCANNER_WIDTH / 2
-    
-    if (distance > maxDistance + 1) {
-      return 'bg-muted/20'
-    }
-    
-    const intensity = Math.max(0, 1 - distance / (maxDistance + 2))
-    
-    if (background) {
-      if (intensity > 0.8) return 'bg-muted-foreground'
-      if (intensity > 0.5) return 'bg-muted-foreground/70'
-      if (intensity > 0.2) return 'bg-muted-foreground/40'
-      return 'bg-muted-foreground/20'
-    }
+  const colorClass = backgroundOnly
+    ? 'text-muted-foreground'
+    : status.type === 'retry'
+      ? 'text-warning'
+      : status.type === 'compact'
+        ? 'text-primary'
+        : 'text-info'
+  const label = backgroundOnly
+    ? 'Background tasks running'
+    : status.type === 'retry'
+      ? 'Retrying'
+      : status.type === 'compact'
+        ? 'Compacting'
+        : 'Running'
 
-    if (statusType === 'retry') {
-      if (intensity > 0.8) return 'bg-warning'
-      if (intensity > 0.5) return 'bg-warning/70'
-      if (intensity > 0.2) return 'bg-warning/40'
-      return 'bg-warning/20'
-    }
-    
-    if (statusType === 'compact') {
-      if (intensity > 0.8) return 'bg-primary'
-      if (intensity > 0.5) return 'bg-primary/70'
-      if (intensity > 0.2) return 'bg-primary/40'
-      return 'bg-primary/20'
-    }
-    
-    if (intensity > 0.8) return 'bg-info'
-    if (intensity > 0.5) return 'bg-info/70'
-    if (intensity > 0.2) return 'bg-info/40'
-    return 'bg-info/20'
-  }
-  
-  const segmentClass = 'w-1 h-4'
-  const containerGap = showLabel ? 'gap-2' : ''
-  
   return (
-    <div
-      className={`flex items-center ${containerGap} ${className}`}
-      title={backgroundOnly ? 'Background tasks running' : undefined}
-      aria-label={backgroundOnly ? 'Background tasks running' : undefined}
+    <span
+      role="img"
+      aria-label={label}
+      title={backgroundOnly ? label : undefined}
+      className={`inline-flex items-center ${colorClass} ${className}`}
     >
-      <div className="flex gap-0.5">
-        {Array.from({ length: SCANNER_SEGMENTS }).map((_, i) => (
-          <div
-            key={i}
-            className={`${segmentClass} rounded-sm transition-colors duration-75 ${getSegmentColor(i, status.type, backgroundOnly)}`}
-          />
-        ))}
-      </div>
-      {showLabel && status.type === 'retry' && (
-        <span className="text-xs text-muted-foreground">
-          Retry #{status.attempt}
-          {retryCountdown > 0 && <span className="text-warning ml-1">({retryCountdown}s)</span>}
-        </span>
-      )}
-    </div>
+      <ActivitySpinner />
+    </span>
   )
 })

From 76d52b3550f98d804eda38b138b3e42971faa14c Mon Sep 17 00:00:00 2001
From: ioplex <ioplex@minime.lab>
Date: Wed, 21 Oct 2026 00:59:42 -0400
Subject: [PATCH 2/6] feat(frontend): move send to the input and show key bar
 in the controls row

- Place Send/Queue/View at the end of the textarea and hide Send when the draft is empty
- Keep the model picker visible on mobile while a session is active
- Keep the mobile mic in the controls row alongside Send
- Show the /, @, ! keys in place of the agent/model selectors while focused on mobile
- Compact the mobile controls row while the prompt is focused
---
 .../message/ComposerToolsMenu.test.tsx        |  23 +-
 .../components/message/ComposerToolsMenu.tsx  |  21 +-
 .../message/PromptInput.command.test.tsx      |   2 +-
 .../message/PromptInput.composer.test.tsx     | 331 ++++++++++++++++++
 .../message/PromptInput.stt.test.tsx          |   4 +-
 .../src/components/message/PromptInput.tsx    | 186 +++++-----
 6 files changed, 449 insertions(+), 118 deletions(-)
 create mode 100644 frontend/src/components/message/PromptInput.composer.test.tsx

diff --git a/frontend/src/components/message/ComposerToolsMenu.test.tsx b/frontend/src/components/message/ComposerToolsMenu.test.tsx
index fb9517f74..870c2d631 100644
--- a/frontend/src/components/message/ComposerToolsMenu.test.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.test.tsx
@@ -249,27 +249,22 @@ describe('ComposerToolsMenu', () => {
     expect(props.onAttachFile).toHaveBeenCalledTimes(1)
   })
 
-  it('omits the dictate item when onDictate is not provided', async () => {
-    const user = userEvent.setup()
+  it('uses the default control size for the trigger', () => {
     mockPermissionMode()
     renderMenu()
 
-    await user.click(screen.getByRole('button', { name: 'Composer options' }))
-    await screen.findByRole('menuitem', { name: 'Attach image or PDF' })
-
-    expect(screen.queryByRole('menuitem', { name: 'Dictate' })).not.toBeInTheDocument()
+    const trigger = screen.getByRole('button', { name: 'Composer options' })
+    expect(trigger).toHaveClass('min-h-[44px]', 'min-w-[44px]')
+    expect(trigger).not.toHaveClass('min-h-9')
   })
 
-  it('starts dictation when onDictate is provided', async () => {
-    const user = userEvent.setup()
+  it('uses the compact control size for the trigger while the composer is focused', () => {
     mockPermissionMode()
-    const onDictate = vi.fn()
-    renderMenu({ onDictate })
-
-    await user.click(screen.getByRole('button', { name: 'Composer options' }))
-    await user.click(await screen.findByRole('menuitem', { name: 'Dictate' }))
+    renderMenu({ compact: true })
 
-    expect(onDictate).toHaveBeenCalledTimes(1)
+    const trigger = screen.getByRole('button', { name: 'Composer options' })
+    expect(trigger).toHaveClass('min-h-9', 'min-w-9')
+    expect(trigger).not.toHaveClass('min-h-[44px]')
   })
 })
 
diff --git a/frontend/src/components/message/ComposerToolsMenu.tsx b/frontend/src/components/message/ComposerToolsMenu.tsx
index 27094ade4..ccd742b4b 100644
--- a/frontend/src/components/message/ComposerToolsMenu.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Mic, Paperclip, Plus, Shield, ShieldCheck, Target } from 'lucide-react'
+import { Paperclip, Plus, Shield, ShieldCheck, Target } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -25,9 +25,17 @@ interface ComposerToolsMenuProps {
   goalLabel: string
   onToggleGoal: () => void
   onAttachFile: () => void
-  onDictate?: () => void
+  /** Uses the 36px control size for the trigger while the prompt is focused. */
+  compact?: boolean
 }
 
+/**
+ * Renders the mobile composer tools trigger: a dropdown for permission mode,
+ * sandboxing, goal mode, and file attachment.
+ *
+ * @param props Session context, goal state, the attach handler, and whether the
+ * trigger uses the compact 36px control size while the prompt is focused.
+ */
 export function ComposerToolsMenu({
   sessionID,
   directory,
@@ -36,7 +44,7 @@ export function ComposerToolsMenu({
   goalLabel,
   onToggleGoal,
   onAttachFile,
-  onDictate,
+  compact = false,
 }: ComposerToolsMenuProps) {
   const isLocalServer = isLocalOpenCodeServer(useOpenCodeServerId())
   const permission = usePermissionModeToggle(sessionID, directory)
@@ -51,7 +59,7 @@ export function ComposerToolsMenu({
             type="button"
             aria-label="Composer options"
             title="Composer options"
-            className={`${getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed)} flex items-center justify-center min-h-[44px] min-w-[44px]`}
+            className={`${getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed)} flex items-center justify-center ${compact ? 'min-h-9 min-w-9' : 'min-h-[44px] min-w-[44px]'}`}
           >
             <Plus className="w-5 h-5" />
           </button>
@@ -82,11 +90,6 @@ export function ComposerToolsMenu({
           <DropdownMenuItem onSelect={onAttachFile} className="pl-8">
             <ToolMenuItemContent icon={<Paperclip className="h-4 w-4" />} title="Attach image or PDF" />
           </DropdownMenuItem>
-          {onDictate ? (
-            <DropdownMenuItem onSelect={onDictate} className="pl-8">
-              <ToolMenuItemContent icon={<Mic className="h-4 w-4" />} title="Dictate" />
-            </DropdownMenuItem>
-          ) : null}
         </DropdownMenuContent>
       </DropdownMenu>
       {shouldShowSandboxResources(sandbox) ? (
diff --git a/frontend/src/components/message/PromptInput.command.test.tsx b/frontend/src/components/message/PromptInput.command.test.tsx
index 83f6380dd..dfc560861 100644
--- a/frontend/src/components/message/PromptInput.command.test.tsx
+++ b/frontend/src/components/message/PromptInput.command.test.tsx
@@ -581,7 +581,7 @@ describe('PromptInput command submission', () => {
     renderComponent()
 
     const input = await screen.findByPlaceholderText('Send a message...')
-    const frame = input.parentElement as HTMLElement
+    const frame = input.closest('.isolate') as HTMLElement
     const tokens = frame.className.split(/\s+/)
 
     expect(tokens).not.toContain('transition-all')
diff --git a/frontend/src/components/message/PromptInput.composer.test.tsx b/frontend/src/components/message/PromptInput.composer.test.tsx
new file mode 100644
index 000000000..ab5a7a173
--- /dev/null
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -0,0 +1,331 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { PromptInput } from './PromptInput'
+import { createCommandActionsMock } from '@/test/test-utils'
+
+const mocks = vi.hoisted(() => ({
+  useSTT: vi.fn(),
+  useMobile: vi.fn(),
+  useCommands: vi.fn(),
+  useCommandHandler: vi.fn(),
+  useFileSearch: vi.fn(),
+  useModelSelection: vi.fn(),
+  useVariants: vi.fn(),
+  useSessionAgent: vi.fn(),
+  useUserBash: vi.fn(),
+  useSessionAgentStore: vi.fn(),
+  useSendErrorStore: vi.fn(),
+  useHasBackgroundActivity: vi.fn(),
+  useSendPrompt: vi.fn(),
+  hasPendingPermission: vi.fn(() => false),
+  setShowDialog: vi.fn(),
+}))
+
+vi.mock('@/hooks/useSTT', () => ({ useSTT: mocks.useSTT }))
+vi.mock('@/hooks/useMobile', () => ({ useMobile: mocks.useMobile }))
+vi.mock('@/hooks/useCommands', () => ({ useCommands: mocks.useCommands }))
+vi.mock('@/hooks/useCommandHandler', () => ({ useCommandHandler: mocks.useCommandHandler }))
+vi.mock('@/hooks/useFileSearch', () => ({ useFileSearch: mocks.useFileSearch }))
+vi.mock('@/hooks/useModelSelection', () => ({ useModelSelection: mocks.useModelSelection }))
+vi.mock('@/hooks/useVariants', () => ({ useVariants: mocks.useVariants }))
+vi.mock('@/hooks/useSessionAgent', () => ({ useSessionAgent: mocks.useSessionAgent }))
+vi.mock('@/stores/userBashStore', () => ({ useUserBash: mocks.useUserBash }))
+vi.mock('@/stores/sessionAgentStore', () => ({ useSessionAgentStore: mocks.useSessionAgentStore }))
+vi.mock('@/stores/sendErrorStore', () => ({ useSendErrorStore: mocks.useSendErrorStore }))
+vi.mock('@/stores/sessionStatusStore', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/stores/sessionStatusStore')>()
+  return { ...actual, useHasBackgroundActivity: mocks.useHasBackgroundActivity }
+})
+vi.mock('@/lib/toast', () => ({
+  showToast: { success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn(), loading: vi.fn(), promise: vi.fn(), dismiss: vi.fn() },
+}))
+
+vi.mock('@/hooks/useOpenCode', () => ({
+  useSendPrompt: () => ({ mutate: mocks.useSendPrompt, isPending: false }),
+  useInterruptSession: () => ({ mutate: vi.fn() }),
+  useSendShell: () => ({ mutate: vi.fn(), isPending: false }),
+  useAgents: () => ({ data: [] }),
+  useSkills: () => ({ data: [] }),
+}))
+
+vi.mock('@/hooks/useProviders', () => ({ useProviders: () => ({ data: undefined }) }))
+
+vi.mock('@/contexts/EventContext', () => ({
+  usePermissions: () => ({
+    hasForSession: mocks.hasPendingPermission,
+    setShowDialog: mocks.setShowDialog,
+  }),
+}))
+
+vi.mock('@/components/agent/AgentQuickSelect', () => ({
+  AgentQuickSelect: () => <div data-testid="agent-quick-select" />,
+}))
+
+vi.mock('@/components/model/ModelQuickSelect', () => ({
+  ModelQuickSelect: ({ children }: { children?: React.ReactNode }) => (
+    <div data-testid="model-quick-select">{children}</div>
+  ),
+}))
+
+vi.mock('@/components/session/PermissionModeToggle', () => ({ PermissionModeToggle: () => null }))
+vi.mock('@/components/session/SessionSandboxMenu', () => ({ SessionSandboxMenu: () => null }))
+vi.mock('./ComposerToolsMenu', () => ({
+  ComposerToolsMenu: ({ compact }: { compact?: boolean }) => (
+    <div data-testid="composer-tools-menu" data-compact={compact ? 'true' : 'false'} />
+  ),
+}))
+vi.mock('./PromptSuggestions', () => ({ PromptSuggestions: () => null }))
+vi.mock('@/hooks/useSessionGoals', () => ({
+  useSessionGoal: () => ({ data: undefined }),
+  useStartSessionGoal: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}))
+vi.mock('@/hooks/useSessionPermissionMode', () => ({ useSessionPermissionMode: () => ({ data: undefined }) }))
+
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+})
+
+const defaultProps = {
+  directory: '/test',
+  sessionID: 'test-session',
+  showScrollButton: false,
+  isSessionActive: false,
+  isStreamingResponse: false,
+  onScrollToBottom: vi.fn(),
+  commandActions: createCommandActionsMock(),
+  onPromptChange: vi.fn(),
+}
+
+describe('PromptInput composer layout', () => {
+  const renderComponent = (overrides: Partial<typeof defaultProps> = {}) => render(
+    <QueryClientProvider client={createTestQueryClient()}>
+      <PromptInput {...defaultProps} {...overrides} />
+    </QueryClientProvider>,
+  )
+
+  const promptInput = () => screen.getByPlaceholderText('Send a message...')
+  const submitButton = () => document.querySelector('[data-submit-prompt]')
+  const controlsRow = () => screen.getByTestId('composer-controls-row')
+  const mobileVoiceButton = () => document.querySelector('[data-voice-variant="mobile"]')
+  const keyButtons = () => screen.queryAllByRole('toolbar', { name: 'Insert' })
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mocks.hasPendingPermission.mockReturnValue(false)
+    mocks.useMobile.mockReturnValue(false)
+    mocks.useSTT.mockReturnValue({
+      isRecording: false,
+      isProcessing: false,
+      isSupported: true,
+      isEnabled: true,
+      interimTranscript: '',
+      transcript: '',
+      startRecording: vi.fn(),
+      stopRecording: vi.fn(),
+      abortRecording: vi.fn(),
+      reset: vi.fn(),
+      clear: vi.fn(),
+    })
+    mocks.useCommands.mockReturnValue({ searchCommands: () => [], findCommand: vi.fn(), recentNames: [] })
+    mocks.useCommandHandler.mockReturnValue({ executeCommand: vi.fn() })
+    mocks.useFileSearch.mockReturnValue({ files: [] })
+    mocks.useModelSelection.mockReturnValue({
+      model: null,
+      modelString: 'test-model',
+      setModel: vi.fn(),
+      setActiveAgent: vi.fn(),
+      recentModels: [],
+      favoriteModels: [],
+      toggleFavorite: vi.fn(),
+      isModelReady: true,
+    })
+    mocks.useVariants.mockReturnValue({ hasVariants: false, currentVariant: null, cycleVariant: vi.fn() })
+    mocks.useSessionAgent.mockReturnValue({ agent: 'default' })
+    mocks.useUserBash.mockImplementation((selector: (state: unknown) => unknown) => selector({ addUserBashCommand: vi.fn() }))
+    mocks.useSessionAgentStore.mockImplementation((selector: (state: unknown) => unknown) => selector({ setAgent: vi.fn() }))
+    mocks.useSendErrorStore.mockImplementation((selector: (state: unknown) => unknown) => selector({ errors: {} }))
+    mocks.useHasBackgroundActivity.mockReturnValue(false)
+  })
+
+  describe('primary action placement', () => {
+    it('omits the submit button while the prompt is empty', () => {
+      renderComponent()
+
+      expect(promptInput()).toBeInTheDocument()
+      expect(submitButton()).toBeNull()
+    })
+
+    it('renders the submit button after the textarea in the same row', () => {
+      renderComponent()
+
+      fireEvent.change(promptInput(), { target: { value: 'hello' } })
+
+      const textarea = promptInput()
+      const button = submitButton() as HTMLElement
+
+      expect(button).not.toBeNull()
+      expect(button.parentElement).toBe(textarea.parentElement)
+      expect(textarea.nextElementSibling).toBe(button)
+      expect(button.parentElement?.contains(controlsRow())).toBe(false)
+    })
+
+    it('sends the typed prompt from the row button', () => {
+      renderComponent()
+
+      fireEvent.change(promptInput(), { target: { value: 'row send' } })
+      fireEvent.click(screen.getByTitle('Send'))
+
+      const [variables] = mocks.useSendPrompt.mock.calls[0] as [{ text: string }]
+      expect(variables.text).toBe('row send')
+    })
+
+    it('queues from the row button while a response streams', () => {
+      renderComponent({ isStreamingResponse: true })
+
+      fireEvent.change(promptInput(), { target: { value: 'follow-up' } })
+
+      expect(screen.getByTitle('Queue message')).toBeInTheDocument()
+    })
+
+    it('shows View for a pending permission even while the prompt is empty', () => {
+      mocks.hasPendingPermission.mockReturnValue(true)
+      renderComponent()
+
+      const view = screen.getByTitle('View pending permission')
+      expect(view).toHaveTextContent('View')
+      expect(view).toHaveAttribute('data-submit-prompt')
+      expect(view.parentElement).toBe(promptInput().parentElement)
+
+      fireEvent.click(view)
+      expect(mocks.setShowDialog).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('model visibility', () => {
+    it('keeps the model selector visible on mobile while the session is active', () => {
+      mocks.useMobile.mockReturnValue(true)
+      renderComponent({ isSessionActive: true })
+
+      expect(screen.getByTestId('model-quick-select')).toBeInTheDocument()
+      expect(screen.getByText('test-model')).toBeInTheDocument()
+    })
+
+    it('keeps the model selector visible on desktop while the session is active', () => {
+      renderComponent({ isSessionActive: true })
+
+      expect(screen.getByTestId('model-quick-select')).toBeInTheDocument()
+    })
+  })
+
+  describe('mobile key bar', () => {
+    beforeEach(() => {
+      mocks.useMobile.mockReturnValue(true)
+    })
+
+    it('replaces the agent and model selectors with keys in the controls row while focused', () => {
+      renderComponent()
+
+      expect(keyButtons()).toHaveLength(0)
+      expect(screen.getByTestId('agent-quick-select')).toBeInTheDocument()
+      expect(screen.getByTestId('model-quick-select')).toBeInTheDocument()
+
+      fireEvent.focus(promptInput())
+
+      expect(keyButtons()).toHaveLength(1)
+      expect(controlsRow().firstElementChild).toContainElement(keyButtons()[0])
+      expect(screen.getByRole('button', { name: 'cmd /' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'mention @' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'bash !' })).toBeInTheDocument()
+      expect(screen.queryByTestId('agent-quick-select')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('model-quick-select')).not.toBeInTheDocument()
+    })
+
+    it('restores the agent and model selectors after the prompt blurs', async () => {
+      renderComponent()
+
+      fireEvent.focus(promptInput())
+      expect(screen.queryByTestId('model-quick-select')).not.toBeInTheDocument()
+
+      fireEvent.blur(promptInput())
+
+      await waitFor(() => {
+        expect(screen.queryByRole('toolbar', { name: 'Insert' })).not.toBeInTheDocument()
+      })
+      expect(screen.getByTestId('agent-quick-select')).toBeInTheDocument()
+      expect(screen.getByTestId('model-quick-select')).toBeInTheDocument()
+    })
+
+    it('replaces the mobile Latest button with keys while focused', () => {
+      renderComponent({ showScrollButton: true })
+
+      expect(screen.getByText('Latest')).toBeInTheDocument()
+
+      fireEvent.focus(promptInput())
+
+      expect(screen.queryByText('Latest')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'cmd /' })).toBeInTheDocument()
+    })
+
+    it('keeps the voice button and composer tools on the right side of the controls row', () => {
+      renderComponent()
+
+      fireEvent.focus(promptInput())
+
+      const actions = controlsRow().lastElementChild as HTMLElement
+      expect(actions).toContainElement(mobileVoiceButton() as HTMLElement)
+      expect(actions).toContainElement(screen.getByTestId('composer-tools-menu'))
+    })
+  })
+
+  describe('mobile voice button', () => {
+    beforeEach(() => {
+      mocks.useMobile.mockReturnValue(true)
+    })
+
+    it('renders the mobile mic alongside Send when the prompt has content', () => {
+      renderComponent()
+
+      fireEvent.change(promptInput(), { target: { value: 'hello' } })
+
+      expect(submitButton()).not.toBeNull()
+      expect(mobileVoiceButton()).not.toBeNull()
+      expect(controlsRow().lastElementChild).toContainElement(mobileVoiceButton() as HTMLElement)
+    })
+
+    it('hides the mic while a permission is pending', () => {
+      mocks.hasPendingPermission.mockReturnValue(true)
+      renderComponent()
+
+      expect(mobileVoiceButton()).toBeNull()
+      expect(screen.getByTitle('View pending permission')).toBeInTheDocument()
+    })
+  })
+
+  describe('compact controls', () => {
+    it('uses compact sizing for the key buttons and mic while focused on mobile', () => {
+      mocks.useMobile.mockReturnValue(true)
+      renderComponent()
+
+      fireEvent.focus(promptInput())
+
+      const commandKey = screen.getByRole('button', { name: 'cmd /' })
+      expect(commandKey).toHaveClass('min-h-9')
+      expect(commandKey).not.toHaveClass('min-h-[44px]')
+
+      const mic = mobileVoiceButton() as HTMLElement
+      expect(mic).toHaveClass('min-h-9', 'min-w-9')
+      expect(mic).not.toHaveClass('min-h-[44px]')
+      expect(screen.getByTestId('composer-tools-menu')).toHaveAttribute('data-compact', 'true')
+    })
+
+    it('uses the default sizing while the prompt is not focused', () => {
+      mocks.useMobile.mockReturnValue(true)
+      renderComponent()
+
+      const mic = mobileVoiceButton() as HTMLElement
+      expect(mic).toHaveClass('min-h-[44px]', 'min-w-[44px]')
+      expect(screen.getByTestId('composer-tools-menu')).toHaveAttribute('data-compact', 'false')
+    })
+  })
+})
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
index 8dc7c1d9a..20c33ff48 100644
--- a/frontend/src/components/message/PromptInput.stt.test.tsx
+++ b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -571,13 +571,13 @@ describe('PromptInput STT Gesture Tests', () => {
       expect(screen.queryByTitle('Send')).not.toBeInTheDocument()
     })
 
-    it('shows the submit button and hides the mobile mic once the prompt has content', () => {
+    it('shows the submit button and keeps the mobile mic once the prompt has content', () => {
       renderComponent()
 
       fireEvent.change(screen.getByPlaceholderText('Send a message...'), { target: { value: 'hello' } })
 
       expect(screen.getByTitle('Send')).toBeInTheDocument()
-      expect(queryMobileVoiceButton()).toBeNull()
+      expect(queryMobileVoiceButton()).not.toBeNull()
     })
 
     it('keeps the mobile mic visible while recording even with prompt content', () => {
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 93327a632..b8da4c2b9 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -1340,7 +1340,6 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
   const composerModeStyle = composerMode ? COMPOSER_MODE_STYLES[composerMode] : null
   const isTakeoverOpen = isMobile && (isCommandListOpen || isMentionListOpen)
   const showStopButton = isSessionActive
-  const hideSecondaryButtons = isMobile && isSessionActive
   const showMobileScrollButton = isMobile && showScrollButton
   const hasOpenGoal = isOpenSessionGoal(sessionGoal)
   const lockedReason = permissionMode?.lockedReason ?? null
@@ -1371,7 +1370,8 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
   const showVoiceFeedback = voiceFeedbackState !== null
   const hasPromptContent = prompt.trim().length > 0 || imageAttachments.length > 0
   const canUseMobileVoice = isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession
-  const showMobileVoiceButton = canUseMobileVoice && (!hasPromptContent || showVoiceFeedback)
+  const compactControls = isMobile && isPromptFocused
+  const showMobileKeys = isMobile && isPromptFocused && !hasPendingPermissionForSession
   const voiceFeedbackLabel = voiceFeedbackState === 'starting'
     ? 'Starting microphone...'
     : voiceFeedbackState === 'sending'
@@ -1414,13 +1414,13 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
           ? 'bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive/60 animate-pulse'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border'
       }`
-      : `px-4 min-h-[44px] min-w-[56px] rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
+      : `${compactControls ? 'min-h-9 min-w-9 px-0' : 'min-h-[44px] min-w-[44px] px-0'} rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
         isBusy
           ? 'bg-success text-success-foreground border-success/70 shadow-lg shadow-success/40'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border active:bg-muted-foreground/30 active:scale-95'
       }`
 
-    const containerClassName = isDesktop ? 'relative hidden md:block' : 'relative flex w-full justify-end touch-none select-none'
+    const containerClassName = isDesktop ? 'relative hidden md:block' : 'relative flex touch-none select-none'
 
     return (
       <div
@@ -1454,6 +1454,41 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
     )
   }
 
+  const renderMobileKeys = () => (
+    <div role="toolbar" aria-label="Insert" className="flex flex-nowrap items-center gap-1.5 min-w-0">
+      {KEYBAR_KEYS.map((key) => {
+        const isActive = key.id === 'command'
+          ? showSuggestions
+          : key.id === 'mention'
+            ? showMentionSuggestions
+            : isBashMode
+        const isDisabled = key.id === 'bash' ? !isBashKeyEnabled : isBashMode
+        return (
+          <button
+            key={key.id}
+            type="button"
+            aria-pressed={isActive}
+            aria-label={`${key.label} ${key.symbol}`}
+            disabled={isDisabled}
+            onMouseDown={(e) => e.preventDefault()}
+            onTouchStart={keybarTouch.onTouchStart}
+            onTouchMove={keybarTouch.onTouchMove}
+            onTouchEnd={(e) => keybarTouch.onTouchEnd(e, key.id)}
+            onClick={() => keybarTouch.onClick(key.id)}
+            className={`flex items-center gap-1 min-w-0 rounded-lg border font-mono text-base font-bold transition-colors disabled:opacity-30 ${
+              compactControls ? 'min-h-9 px-2' : 'min-h-[44px] px-3'
+            } ${
+              isActive ? COMPOSER_MODE_STYLES[key.id].key : 'bg-muted border-border text-foreground active:bg-muted-foreground/20'
+            }`}
+          >
+            {key.symbol}
+            <span className="truncate font-sans text-[11px] font-medium opacity-80">{key.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+
   
 
   
@@ -1501,30 +1536,47 @@ return (
           {composerModeStyle.label}
         </span>
       )}
-      <textarea
-        ref={textareaRef}
-        data-prompt-input
-        value={prompt}
-        onChange={handleInput}
-        onFocus={handlePromptFocus}
-        onBlur={handlePromptBlur}
-        onKeyDown={handleKeyDown}
-        onPaste={handlePaste}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        placeholder={
-          isBashMode
-            ? "Enter bash command..."
-            : "Send a message..."
-        }
-        className={`w-full bg-muted/50 pl-2 md:pl-3 pr-3 py-2 text-[16px] text-foreground placeholder-muted-foreground focus:outline-none focus:bg-muted/70 resize-none min-h-[40px] max-h-[120px] disabled:opacity-50 disabled:cursor-not-allowed md:text-sm rounded-lg [field-sizing:content] ${
-          isBashMode
-            ? 'border-warning/50 bg-warning/5 focus:bg-warning/10'
-            : isDragging ? 'border-info/50 border-dashed bg-info/5' : ''
-        }`}
-        rows={1}
-      />
+      <div className="flex items-end gap-1.5 md:gap-2">
+        <textarea
+          ref={textareaRef}
+          data-prompt-input
+          value={prompt}
+          onChange={handleInput}
+          onFocus={handlePromptFocus}
+          onBlur={handlePromptBlur}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          placeholder={
+            isBashMode
+              ? "Enter bash command..."
+              : "Send a message..."
+          }
+          className={`flex-1 min-w-0 bg-muted/50 pl-2 md:pl-3 pr-3 py-2 text-[16px] text-foreground placeholder-muted-foreground focus:outline-none focus:bg-muted/70 resize-none min-h-[40px] max-h-[120px] disabled:opacity-50 disabled:cursor-not-allowed md:text-sm rounded-lg [field-sizing:content] ${
+            isBashMode
+              ? 'border-warning/50 bg-warning/5 focus:bg-warning/10'
+              : isDragging ? 'border-info/50 border-dashed bg-info/5' : ''
+          }`}
+          rows={1}
+        />
+        {(hasPendingPermissionForSession || hasPromptContent) && (
+          <button
+            data-submit-prompt
+            onClick={hasPendingPermissionForSession ? () => setShowDialog(true) : handleSubmit}
+            disabled={hasPendingPermissionForSession ? false : (!isModelReady || !hasPromptContent || (isPromptSubmitPending && !isStreamingResponse))}
+            className={`px-4 md:px-5 py-1.5 md:py-2 rounded-lg text-sm font-medium transition-colors dark:border flex-shrink-0 min-w-[52px] flex items-center justify-center min-h-[44px] md:min-h-0 ${
+              hasPendingPermissionForSession
+                ? 'bg-highlight hover:bg-highlight/90 border-highlight text-highlight-foreground ring-highlight/20'
+                : 'bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed text-primary-foreground border-border/30'
+            }`}
+            title={hasPendingPermissionForSession ? 'View pending permission' : (isStreamingResponse ? 'Queue message' : 'Send')}
+          >
+            <span className="whitespace-nowrap">{hasPendingPermissionForSession ? 'View' : (isStreamingResponse ? 'Queue' : 'Send')}</span>
+          </button>
+        )}
+      </div>
 
       {imageAttachments.length > 0 && (
         <div className="flex flex-wrap gap-2 px-2 py-2 mb-2">
@@ -1546,14 +1598,14 @@ return (
         </div>
       )}
 
-      <div className="flex gap-1.5 md:gap-2 items-center justify-between">
+      <div data-testid="composer-controls-row" className="flex gap-1.5 md:gap-2 items-center justify-between">
         <div className="flex flex-1 md:flex-initial gap-1.5 md:gap-2 items-center min-w-0">
-          {showMobileScrollButton ? (
+          {showMobileKeys ? renderMobileKeys() : showMobileScrollButton ? (
             <>
               <button
                 type="button"
                 onClick={onScrollToBottom}
-                className="flex items-center gap-1.5 px-3 min-h-[44px] rounded-lg text-xs font-medium border bg-background/80 hover:bg-accent/90 text-primary hover:text-primary-hover border-primary/20 shadow-md backdrop-blur-md transition-all duration-200 active:scale-95 ring-1 ring-primary/15"
+                className={`flex items-center gap-1.5 px-3 rounded-lg text-xs font-medium border bg-background/80 hover:bg-accent/90 text-primary hover:text-primary-hover border-primary/20 shadow-md backdrop-blur-md transition-all duration-200 active:scale-95 ring-1 ring-primary/15 ${compactControls ? 'min-h-9' : 'min-h-[44px]'}`}
                 title="Scroll to bottom"
                 aria-label="Scroll to bottom"
               >
@@ -1595,21 +1647,19 @@ return (
                 onOpenChange={setIsModelPickerOpen}
                 session={modelSelectionSession}
               >
-                {!hideSecondaryButtons && (
-                  <button
-                    className="px-2.5 py-0.5 md:px-3 min-h-[44px] md:min-h-[36px] min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
-                  >
-                    <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
-                    {hasVariants && currentVariant && (
-                      <span className="text-[10px] text-highlight truncate w-full text-left capitalize">{currentVariant}</span>
-                    )}
-                  </button>
-                )}
+                <button
+                  className="px-2.5 py-0.5 md:px-3 min-h-[44px] md:min-h-[36px] min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
+                >
+                  <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
+                  {hasVariants && currentVariant && (
+                    <span className="text-[10px] text-highlight truncate w-full text-left capitalize">{currentVariant}</span>
+                  )}
+                </button>
               </ModelQuickSelect>
             </>
           )}
         </div>
-<div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
+        <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
             {!isMobile && (
               <button
                 onClick={onScrollToBottom}
@@ -1643,7 +1693,7 @@ return (
           >
             <Upload className="w-5 h-5" />
           </button>
-          {showMobileVoiceButton && (
+          {canUseMobileVoice && (
             renderVoiceButton('mobile')
           )}
           {isMobile && directory && (
@@ -1655,63 +1705,15 @@ return (
               goalLabel={goalButtonLabel}
               onToggleGoal={toggleGoalArmed}
               onAttachFile={openFilePicker}
-              onDictate={canUseMobileVoice && hasPromptContent && !showVoiceFeedback ? () => void startVoiceRecording() : undefined}
+              compact={compactControls}
             />
           )}
           {!isMobile && sttEnabled && sttSupported && (
             renderVoiceButton('desktop')
           )}
-          {!showMobileVoiceButton && (
-            <button
-              data-submit-prompt
-              onClick={hasPendingPermissionForSession ? () => setShowDialog(true) : handleSubmit}
-              disabled={hasPendingPermissionForSession ? false : (!isModelReady || !hasPromptContent || (isPromptSubmitPending && !isStreamingResponse))}
-              className={`px-4 md:px-5 py-1.5 md:py-2 rounded-lg text-sm font-medium transition-colors dark:border flex-shrink-0 min-w-[52px] flex items-center justify-center min-h-[44px] md:min-h-0 ${
-                hasPendingPermissionForSession
-                  ? 'bg-highlight hover:bg-highlight/90 border-highlight text-highlight-foreground ring-highlight/20'
-                  : 'bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed text-primary-foreground border-border/30'
-              }`}
-              title={hasPendingPermissionForSession ? 'View pending permission' : (isStreamingResponse ? 'Queue message' : 'Send')}
-            >
-              <span className="whitespace-nowrap">{hasPendingPermissionForSession ? 'View' : (isStreamingResponse ? 'Queue' : 'Send')}</span>
-            </button>
-          )}
         </div>
       </div>
 
-      {isMobile && isPromptFocused && !hasPendingPermissionForSession && (
-        <div role="toolbar" aria-label="Insert" className="flex items-center gap-1.5 mt-2 pt-2 border-t border-border/50">
-          {KEYBAR_KEYS.map((key) => {
-            const isActive = key.id === 'command'
-              ? showSuggestions
-              : key.id === 'mention'
-                ? showMentionSuggestions
-                : isBashMode
-            const isDisabled = key.id === 'bash' ? !isBashKeyEnabled : isBashMode
-            return (
-              <button
-                key={key.id}
-                type="button"
-                aria-pressed={isActive}
-                aria-label={`${key.label} ${key.symbol}`}
-                disabled={isDisabled}
-                onMouseDown={(e) => e.preventDefault()}
-                onTouchStart={keybarTouch.onTouchStart}
-                onTouchMove={keybarTouch.onTouchMove}
-                onTouchEnd={(e) => keybarTouch.onTouchEnd(e, key.id)}
-                onClick={() => keybarTouch.onClick(key.id)}
-                className={`flex items-center gap-1 min-h-[44px] px-3 rounded-lg border font-mono text-base font-bold transition-colors disabled:opacity-30 ${
-                  isActive ? COMPOSER_MODE_STYLES[key.id].key : 'bg-muted border-border text-foreground active:bg-muted-foreground/20'
-                }`}
-              >
-                {key.symbol}
-                <span className="font-sans text-[11px] font-medium opacity-80">{key.label}</span>
-              </button>
-            )
-          })}
-        </div>
-      )}
-
       <PromptSuggestions
         isOpen={showSuggestions}
         items={commandSuggestions}

From 648713268d30c312fe22b58f49470076b49aca5a Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Wed, 21 Oct 2026 12:40:34 -0400
Subject: [PATCH 3/6] feat(frontend): consolidate composer controls at 36px and
 repaint the activity scanner in CSS

---
 .../src/components/agent/AgentQuickSelect.tsx |   2 +-
 .../message/ComposerActivityBar.test.tsx      | 166 +++-----------
 .../message/ComposerActivityBar.tsx           |  16 +-
 .../message/ComposerToolsMenu.test.tsx        |  15 +-
 .../components/message/ComposerToolsMenu.tsx  |   9 +-
 .../message/PromptInput.composer.test.tsx     | 106 +++++++--
 .../message/PromptInput.stt.test.tsx          |   6 +-
 .../src/components/message/PromptInput.tsx    |  54 ++---
 frontend/src/components/ui/scanner-bars.tsx   | 208 ++----------------
 frontend/src/index.css                        |  34 +++
 frontend/src/pages/SessionDetail.tsx          |   2 +-
 .../SessionDetail.scroll-floating.test.tsx    |   7 +-
 12 files changed, 212 insertions(+), 413 deletions(-)

diff --git a/frontend/src/components/agent/AgentQuickSelect.tsx b/frontend/src/components/agent/AgentQuickSelect.tsx
index 73a9a8aac..f61d27675 100644
--- a/frontend/src/components/agent/AgentQuickSelect.tsx
+++ b/frontend/src/components/agent/AgentQuickSelect.tsx
@@ -55,7 +55,7 @@ export function AgentQuickSelect({
   const buttonContent = (
     <button
       style={styleVars as React.CSSProperties}
-      className="px-2 md:px-3.5 py-1 h-[44px] md:h-[36px] rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
+      className="px-2 md:px-3.5 py-1 h-9 rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
     >
       <span className="truncate">{displayName}</span>
     </button>
diff --git a/frontend/src/components/message/ComposerActivityBar.test.tsx b/frontend/src/components/message/ComposerActivityBar.test.tsx
index fa907fb05..8b43a2eff 100644
--- a/frontend/src/components/message/ComposerActivityBar.test.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -1,35 +1,10 @@
-import { act, render, screen } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { ComposerActivityBar } from './ComposerActivityBar'
 import { useSessionStatus } from '@/stores/sessionStatusStore'
 import { stubMatchMedia } from '@/test/test-utils'
 
 const originalMatchMedia = window.matchMedia
-const originalResizeObserver = global.ResizeObserver
-
-class MockResizeObserver {
-  static instances: MockResizeObserver[] = []
-
-  readonly callback: ResizeObserverCallback
-
-  constructor(callback: ResizeObserverCallback) {
-    this.callback = callback
-    MockResizeObserver.instances.push(this)
-  }
-
-  observe() {}
-
-  unobserve() {}
-
-  disconnect() {}
-
-  trigger(width: number) {
-    this.callback(
-      [{ contentRect: { width } } as ResizeObserverEntry],
-      this as unknown as ResizeObserver,
-    )
-  }
-}
 
 const resetStore = () => {
   useSessionStatus.setState({
@@ -45,25 +20,14 @@ const resetStore = () => {
   })
 }
 
-const segmentsOf = (bar: HTMLElement) =>
-  Array.from(bar.firstElementChild?.children ?? []) as HTMLElement[]
-
-const measureWidth = (width: number) => {
-  act(() => {
-    MockResizeObserver.instances.forEach((instance) => instance.trigger(width))
-  })
-}
+const trackOf = (bar: HTMLElement) => bar.firstElementChild as HTMLElement
 
 describe('ComposerActivityBar', () => {
   beforeEach(() => {
     resetStore()
-    MockResizeObserver.instances = []
-    global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
   })
 
   afterEach(() => {
-    vi.useRealTimers()
-    global.ResizeObserver = originalResizeObserver
     Object.defineProperty(window, 'matchMedia', {
       configurable: true,
       writable: true,
@@ -77,83 +41,49 @@ describe('ComposerActivityBar', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('anchors a pointer-transparent progressbar in the gap below the composer', () => {
-    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
-
-    render(<ComposerActivityBar sessionID="session-a" />)
-
-    const bar = screen.getByRole('progressbar', { name: 'Session working' })
-    expect(bar).toHaveClass('pointer-events-none')
-    expect(bar).toHaveClass('absolute')
-    expect(bar).toHaveClass('inset-x-3')
-    expect(bar).toHaveClass('-bottom-[13px]')
-    expect(bar).toHaveClass('md:-bottom-[11px]')
-    expect(bar).toHaveClass('flex')
-  })
-
-  it('fills the measured width with 4x8 segments', () => {
+  it('pins a pointer-transparent progressbar across the screen bottom on mobile and below the composer on desktop', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
     const bar = screen.getByRole('progressbar', { name: 'Session working' })
-    expect(bar.firstElementChild).toHaveClass('gap-0.5')
-
-    measureWidth(602)
-
-    const segments = segmentsOf(bar)
-    expect(segments).toHaveLength(100)
-    expect(segments[0]).toHaveClass('w-1')
-    expect(segments[0]).toHaveClass('h-2')
-    expect(segments[0]).toHaveClass('rounded-[1px]')
-    expect(segments[0]).toHaveClass('transition-colors')
-    expect(segments[0]).toHaveClass('duration-75')
-    expect(segments[0]).not.toHaveClass('flex-1')
+    expect(bar).toHaveClass('pointer-events-none', 'flex')
+    expect(bar).toHaveClass('fixed', 'inset-x-0', 'bottom-0')
+    expect(bar).toHaveClass('md:absolute', 'md:inset-x-3', 'md:-bottom-[11px]')
   })
 
-  it('keeps the minimum segment count for narrow containers', () => {
+  it('renders a masked segment track with only the sweeping window', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    const bar = screen.getByRole('progressbar', { name: 'Session working' })
-    measureWidth(20)
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(track).toHaveClass('scanner-track', 'relative', 'h-2', 'w-full')
 
-    expect(segmentsOf(bar)).toHaveLength(12)
+    const children = Array.from(track.children) as HTMLElement[]
+    expect(children).toHaveLength(1)
+    expect(children[0]).toHaveClass('scanner-sweep')
   })
 
-  it('lights the info tiers around the scanner window', () => {
+  it('tints the track with the info tone while the session is busy', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    measureWidth(602)
-
-    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Session working' }))
-    expect(segments[3]).toHaveClass('bg-info')
-    expect(segments[4]).toHaveClass('bg-info/70')
-    expect(segments[6]).toHaveClass('bg-info/40')
-    expect(segments[7]).toHaveClass('bg-info/20')
-    expect(segments[8]).toHaveClass('bg-muted/20')
-    expect(segments[99]).toHaveClass('bg-muted/20')
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(track).toHaveClass('text-info')
   })
 
-  it('renders the compacting state with primary colors', () => {
+  it('tints the track with the primary tone while compacting', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'compact' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    measureWidth(602)
-
-    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Compacting' }))
-    expect(segments[3]).toHaveClass('bg-primary')
-    expect(segments[4]).toHaveClass('bg-primary/70')
-    expect(segments[6]).toHaveClass('bg-primary/40')
-    expect(segments[7]).toHaveClass('bg-primary/20')
-    expect(segments[8]).toHaveClass('bg-muted/20')
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Compacting' }))
+    expect(track).toHaveClass('text-primary')
   })
 
-  it('reports the retry attempt in the label with warning colors', () => {
+  it('reports the retry attempt in the label with the warning tone', () => {
     useSessionStatus.getState().setStatus('session-a', {
       type: 'retry',
       attempt: 2,
@@ -163,66 +93,26 @@ describe('ComposerActivityBar', () => {
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    measureWidth(602)
-
-    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Retrying (Retry #2)' }))
-    expect(segments[3]).toHaveClass('bg-warning')
-    expect(segments[4]).toHaveClass('bg-warning/70')
-    expect(segments[6]).toHaveClass('bg-warning/40')
-    expect(segments[7]).toHaveClass('bg-warning/20')
-    expect(segments[8]).toHaveClass('bg-muted/20')
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Retrying (Retry #2)' }))
+    expect(track).toHaveClass('text-warning')
   })
 
-  it('renders the muted background activity state when idle with a running shell', () => {
+  it('tints the track with the muted foreground tone for background activity', () => {
     useSessionStatus.getState().setShellRunning('shell-1', 'session-a', '/repo')
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    measureWidth(602)
-
-    const segments = segmentsOf(screen.getByRole('progressbar', { name: 'Background tasks running' }))
-    expect(segments[3]).toHaveClass('bg-muted-foreground')
-    expect(segments[4]).toHaveClass('bg-muted-foreground/70')
-    expect(segments[6]).toHaveClass('bg-muted-foreground/40')
-    expect(segments[7]).toHaveClass('bg-muted-foreground/20')
-    expect(segments[8]).toHaveClass('bg-muted/20')
-  })
-
-  it('sweeps the lit window on the step interval', () => {
-    vi.useFakeTimers()
-    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
-
-    render(<ComposerActivityBar sessionID="session-a" />)
-
-    const bar = screen.getByRole('progressbar', { name: 'Session working' })
-    measureWidth(602)
-    expect(segmentsOf(bar)[3]).toHaveClass('bg-info')
-
-    act(() => {
-      vi.advanceTimersByTime(120)
-    })
-
-    const segments = segmentsOf(bar)
-    expect(segments[7]).toHaveClass('bg-info')
-    expect(segments[4]).toHaveClass('bg-info/40')
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Background tasks running' }))
+    expect(track).toHaveClass('text-muted-foreground')
   })
 
-  it('renders every segment statically when reduced motion is requested', () => {
-    vi.useFakeTimers()
+  it('keeps sweeping when reduced motion is requested', () => {
     stubMatchMedia(true)
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
-    const bar = screen.getByRole('progressbar', { name: 'Session working' })
-    measureWidth(602)
-    act(() => {
-      vi.advanceTimersByTime(600)
-    })
-
-    const segments = segmentsOf(bar)
-    expect(segments).toHaveLength(100)
-    expect(segments.every((segment) => segment.classList.contains('bg-info/60'))).toBe(true)
-    expect(segments.some((segment) => segment.classList.contains('bg-muted/20'))).toBe(false)
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(track.querySelector('.scanner-sweep')).not.toBeNull()
   })
 })
diff --git a/frontend/src/components/message/ComposerActivityBar.tsx b/frontend/src/components/message/ComposerActivityBar.tsx
index 7b7b05a94..27710fb8b 100644
--- a/frontend/src/components/message/ComposerActivityBar.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -5,9 +5,6 @@ interface ComposerActivityBarProps {
   sessionID: string
 }
 
-const LIT_WIDTH = 6
-const STEP_INTERVAL_MS = 30
-
 const ACTIVITY_PRESENTATION = {
   background: {
     label: 'Background tasks running',
@@ -28,10 +25,11 @@ const ACTIVITY_PRESENTATION = {
 } as const satisfies Record<string, { label: string; tone: ScannerTone }>
 
 /**
- * Session activity scanner anchored in the gap below the composer frame. The strip uses the same
- * 4x8px segments as the session status scanner and fills the composer width with as many segments
- * as fit. Renders nothing while the session is idle and has no background activity; otherwise
- * announces the current activity through an indeterminate progressbar.
+ * Session activity scanner. On mobile it spans the full width of the bottom screen edge; from the
+ * `md` breakpoint it is anchored in the gap below the composer frame. A fading lit window of 4x8px
+ * segments sweeps across the strip. Renders nothing while the
+ * session is idle and has no background activity; otherwise announces the current activity through
+ * an indeterminate progressbar.
  */
 export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
   const status = useSessionStatusForSession(sessionID)
@@ -54,9 +52,9 @@ export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
       aria-label={label}
       aria-valuemin={0}
       aria-valuemax={100}
-      className="pointer-events-none absolute inset-x-3 -bottom-[13px] md:-bottom-[11px] flex"
+      className="pointer-events-none fixed inset-x-0 bottom-0 flex md:absolute md:inset-x-3 md:-bottom-[11px]"
     >
-      <ScannerBars tone={activity.tone} litWidth={LIT_WIDTH} intervalMs={STEP_INTERVAL_MS} />
+      <ScannerBars tone={activity.tone} />
     </div>
   )
 }
diff --git a/frontend/src/components/message/ComposerToolsMenu.test.tsx b/frontend/src/components/message/ComposerToolsMenu.test.tsx
index 870c2d631..af613dc0f 100644
--- a/frontend/src/components/message/ComposerToolsMenu.test.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.test.tsx
@@ -249,22 +249,13 @@ describe('ComposerToolsMenu', () => {
     expect(props.onAttachFile).toHaveBeenCalledTimes(1)
   })
 
-  it('uses the default control size for the trigger', () => {
+  it('uses the 36px control size for the trigger', () => {
     mockPermissionMode()
     renderMenu()
 
     const trigger = screen.getByRole('button', { name: 'Composer options' })
-    expect(trigger).toHaveClass('min-h-[44px]', 'min-w-[44px]')
-    expect(trigger).not.toHaveClass('min-h-9')
-  })
-
-  it('uses the compact control size for the trigger while the composer is focused', () => {
-    mockPermissionMode()
-    renderMenu({ compact: true })
-
-    const trigger = screen.getByRole('button', { name: 'Composer options' })
-    expect(trigger).toHaveClass('min-h-9', 'min-w-9')
-    expect(trigger).not.toHaveClass('min-h-[44px]')
+    expect(trigger).toHaveClass('size-9', 'p-0')
+    expect(trigger).not.toHaveClass('p-2')
   })
 })
 
diff --git a/frontend/src/components/message/ComposerToolsMenu.tsx b/frontend/src/components/message/ComposerToolsMenu.tsx
index ccd742b4b..13702fcc6 100644
--- a/frontend/src/components/message/ComposerToolsMenu.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.tsx
@@ -13,6 +13,7 @@ import { isLocalOpenCodeServer, useOpenCodeServerId } from '@/contexts/OpenCodeS
 import { usePermissionModeToggle } from '@/hooks/usePermissionModeToggle'
 import { useSandboxToggle } from '@/hooks/useSandboxToggle'
 import { shouldShowSandboxResources } from '@/lib/sandboxResources'
+import { cn } from '@/lib/utils'
 import { SandboxMenuItems } from './SandboxMenuItems'
 import { ToolMenuItemContent } from './ToolMenuItemContent'
 import { SessionSandboxResourcesDialog } from './SessionSandboxResourcesDialog'
@@ -25,16 +26,13 @@ interface ComposerToolsMenuProps {
   goalLabel: string
   onToggleGoal: () => void
   onAttachFile: () => void
-  /** Uses the 36px control size for the trigger while the prompt is focused. */
-  compact?: boolean
 }
 
 /**
  * Renders the mobile composer tools trigger: a dropdown for permission mode,
  * sandboxing, goal mode, and file attachment.
  *
- * @param props Session context, goal state, the attach handler, and whether the
- * trigger uses the compact 36px control size while the prompt is focused.
+ * @param props Session context, goal state, and the attach handler.
  */
 export function ComposerToolsMenu({
   sessionID,
@@ -44,7 +42,6 @@ export function ComposerToolsMenu({
   goalLabel,
   onToggleGoal,
   onAttachFile,
-  compact = false,
 }: ComposerToolsMenuProps) {
   const isLocalServer = isLocalOpenCodeServer(useOpenCodeServerId())
   const permission = usePermissionModeToggle(sessionID, directory)
@@ -59,7 +56,7 @@ export function ComposerToolsMenu({
             type="button"
             aria-label="Composer options"
             title="Composer options"
-            className={`${getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed)} flex items-center justify-center ${compact ? 'min-h-9 min-w-9' : 'min-h-[44px] min-w-[44px]'}`}
+            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-9 p-0')}
           >
             <Plus className="w-5 h-5" />
           </button>
diff --git a/frontend/src/components/message/PromptInput.composer.test.tsx b/frontend/src/components/message/PromptInput.composer.test.tsx
index ab5a7a173..de81a0aec 100644
--- a/frontend/src/components/message/PromptInput.composer.test.tsx
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor, within } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { PromptInput } from './PromptInput'
 import { createCommandActionsMock } from '@/test/test-utils'
@@ -71,9 +71,7 @@ vi.mock('@/components/model/ModelQuickSelect', () => ({
 vi.mock('@/components/session/PermissionModeToggle', () => ({ PermissionModeToggle: () => null }))
 vi.mock('@/components/session/SessionSandboxMenu', () => ({ SessionSandboxMenu: () => null }))
 vi.mock('./ComposerToolsMenu', () => ({
-  ComposerToolsMenu: ({ compact }: { compact?: boolean }) => (
-    <div data-testid="composer-tools-menu" data-compact={compact ? 'true' : 'false'} />
-  ),
+  ComposerToolsMenu: () => <div data-testid="composer-tools-menu" />,
 }))
 vi.mock('./PromptSuggestions', () => ({ PromptSuggestions: () => null }))
 vi.mock('@/hooks/useSessionGoals', () => ({
@@ -256,15 +254,55 @@ describe('PromptInput composer layout', () => {
       expect(screen.getByTestId('model-quick-select')).toBeInTheDocument()
     })
 
-    it('replaces the mobile Latest button with keys while focused', () => {
+    it('swaps the composer tools button for a scroll-to-bottom arrow while scrolled up', () => {
       renderComponent({ showScrollButton: true })
 
-      expect(screen.getByText('Latest')).toBeInTheDocument()
+      const actions = controlsRow().lastElementChild as HTMLElement
+      expect(within(actions).getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument()
+      expect(screen.queryByTestId('composer-tools-menu')).not.toBeInTheDocument()
+      expect(within(controlsRow().firstElementChild as HTMLElement).getByTestId('agent-quick-select')).toBeInTheDocument()
+      expect(within(controlsRow().firstElementChild as HTMLElement).getByTestId('model-quick-select')).toBeInTheDocument()
+      expect(screen.queryByText('Latest')).not.toBeInTheDocument()
+    })
+
+    it('keeps the scroll-to-bottom arrow on the right while the prompt is focused', () => {
+      renderComponent({ showScrollButton: true })
 
       fireEvent.focus(promptInput())
 
-      expect(screen.queryByText('Latest')).not.toBeInTheDocument()
-      expect(screen.getByRole('button', { name: 'cmd /' })).toBeInTheDocument()
+      const keys = screen.getByRole('toolbar', { name: 'Insert' })
+      expect(within(keys).getByRole('button', { name: 'bash !' })).toBeInTheDocument()
+
+      const actions = controlsRow().lastElementChild as HTMLElement
+      expect(within(actions).getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument()
+      expect(screen.queryByTestId('composer-tools-menu')).not.toBeInTheDocument()
+    })
+
+    it('keeps the scroll-to-bottom arrow while the prompt has text', () => {
+      renderComponent({ showScrollButton: true })
+
+      fireEvent.change(promptInput(), { target: { value: 'hello' } })
+
+      expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument()
+    })
+
+    it('scrolls to the bottom from the swapped arrow and keeps the composer tools box size', () => {
+      const onScrollToBottom = vi.fn()
+      renderComponent({ showScrollButton: true, onScrollToBottom })
+
+      const arrow = screen.getByRole('button', { name: 'Scroll to bottom' })
+      expect(arrow).toHaveClass('size-9', 'p-0')
+
+      fireEvent.click(arrow)
+
+      expect(onScrollToBottom).toHaveBeenCalledTimes(1)
+    })
+
+    it('keeps the composer tools button while at the bottom of the transcript', () => {
+      renderComponent({ showScrollButton: false })
+
+      expect(screen.getByTestId('composer-tools-menu')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Scroll to bottom' })).not.toBeInTheDocument()
     })
 
     it('keeps the voice button and composer tools on the right side of the controls row', () => {
@@ -278,6 +316,24 @@ describe('PromptInput composer layout', () => {
     })
   })
 
+  describe('desktop scroll button visibility', () => {
+    const desktopScrollButton = () => screen.getByTitle('Scroll to bottom')
+
+    it('hides the desktop scroll arrow once the prompt has text', () => {
+      renderComponent({ showScrollButton: true })
+
+      fireEvent.change(promptInput(), { target: { value: 'hello' } })
+
+      expect(desktopScrollButton()).toHaveClass('invisible')
+    })
+
+    it('shows the desktop scroll arrow while the prompt is empty', () => {
+      renderComponent({ showScrollButton: true })
+
+      expect(desktopScrollButton()).toHaveClass('visible')
+    })
+  })
+
   describe('mobile voice button', () => {
     beforeEach(() => {
       mocks.useMobile.mockReturnValue(true)
@@ -302,8 +358,23 @@ describe('PromptInput composer layout', () => {
     })
   })
 
-  describe('compact controls', () => {
-    it('uses compact sizing for the key buttons and mic while focused on mobile', () => {
+  describe('control sizing', () => {
+    it('keeps the mic at 36px before and after the prompt gains focus on mobile', () => {
+      mocks.useMobile.mockReturnValue(true)
+      renderComponent()
+
+      const micBeforeFocus = mobileVoiceButton() as HTMLElement
+      expect(micBeforeFocus).toHaveClass('min-h-9', 'min-w-9')
+      expect(micBeforeFocus).not.toHaveClass('min-h-[44px]')
+
+      fireEvent.focus(promptInput())
+
+      const micAfterFocus = mobileVoiceButton() as HTMLElement
+      expect(micAfterFocus).toHaveClass('min-h-9', 'min-w-9')
+      expect(micAfterFocus).not.toHaveClass('min-h-[44px]')
+    })
+
+    it('keeps the key buttons at 36px after the prompt gains focus on mobile', () => {
       mocks.useMobile.mockReturnValue(true)
       renderComponent()
 
@@ -312,20 +383,17 @@ describe('PromptInput composer layout', () => {
       const commandKey = screen.getByRole('button', { name: 'cmd /' })
       expect(commandKey).toHaveClass('min-h-9')
       expect(commandKey).not.toHaveClass('min-h-[44px]')
-
-      const mic = mobileVoiceButton() as HTMLElement
-      expect(mic).toHaveClass('min-h-9', 'min-w-9')
-      expect(mic).not.toHaveClass('min-h-[44px]')
-      expect(screen.getByTestId('composer-tools-menu')).toHaveAttribute('data-compact', 'true')
     })
 
-    it('uses the default sizing while the prompt is not focused', () => {
+    it('sizes the submit button at 36px on mobile', () => {
       mocks.useMobile.mockReturnValue(true)
       renderComponent()
 
-      const mic = mobileVoiceButton() as HTMLElement
-      expect(mic).toHaveClass('min-h-[44px]', 'min-w-[44px]')
-      expect(screen.getByTestId('composer-tools-menu')).toHaveAttribute('data-compact', 'false')
+      fireEvent.change(promptInput(), { target: { value: 'hello' } })
+
+      const send = submitButton() as HTMLElement
+      expect(send).toHaveClass('h-9')
+      expect(send).not.toHaveClass('min-h-[44px]')
     })
   })
 })
diff --git a/frontend/src/components/message/PromptInput.stt.test.tsx b/frontend/src/components/message/PromptInput.stt.test.tsx
index 20c33ff48..ce6fbcd4d 100644
--- a/frontend/src/components/message/PromptInput.stt.test.tsx
+++ b/frontend/src/components/message/PromptInput.stt.test.tsx
@@ -541,7 +541,7 @@ describe('PromptInput STT Gesture Tests', () => {
       expect(voiceButtons.length).toBeGreaterThan(0)
     })
 
-    it('renders mobile in-row Latest button when showScrollButton is true', async () => {
+    it('renders the mobile scroll-to-bottom button when showScrollButton is true', async () => {
       mocks.useMobile.mockReturnValue(true)
 
       render(
@@ -550,8 +550,8 @@ describe('PromptInput STT Gesture Tests', () => {
         </QueryClientProvider>
       )
 
-      expect(screen.getByTitle('Scroll to bottom')).toBeInTheDocument()
-      expect(screen.getByText('Latest')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Scroll to bottom' })).toBeInTheDocument()
+      expect(screen.queryByText('Latest')).not.toBeInTheDocument()
     })
   })
 
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index b8da4c2b9..3938f06fa 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -22,7 +22,7 @@ import { isLocalOpenCodeServer, useOpenCodeServerId } from '@/contexts/OpenCodeS
 import { ArrowDown, Upload, X, Mic, MicOff, Target } from 'lucide-react'
 
 import { SquareFill } from '@/components/ui/square-fill'
-import { IconToggleButton } from '@/components/ui/icon-toggle-button'
+import { IconToggleButton, getIconToggleButtonClassName } from '@/components/ui/icon-toggle-button'
 
 import { PromptSuggestions, type PromptSuggestion } from './PromptSuggestions'
 import { ComposerActivityBar } from './ComposerActivityBar'
@@ -38,7 +38,7 @@ import { detectMentionTrigger, parsePromptToInput, getFilename, getDirectory, ty
 import { matchText, rankByMatch, type MatchRange } from '@/lib/fuzzyMatch'
 import { getNextPrimaryAgentId } from '@/lib/primaryAgents'
 import { getNextFavoriteModel } from '@/lib/favoriteModels'
-import { randomId } from '@/lib/utils'
+import { cn, randomId } from '@/lib/utils'
 import { showToast } from '@/lib/toast'
 import { findModelInfo, isSameModelSelection } from '@opencode-manager/shared/opencode'
 import { isOpenSessionGoal } from '@opencode-manager/shared/schemas'
@@ -1370,7 +1370,6 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
   const showVoiceFeedback = voiceFeedbackState !== null
   const hasPromptContent = prompt.trim().length > 0 || imageAttachments.length > 0
   const canUseMobileVoice = isMobile && sttEnabled && sttSupported && !hasPendingPermissionForSession
-  const compactControls = isMobile && isPromptFocused
   const showMobileKeys = isMobile && isPromptFocused && !hasPendingPermissionForSession
   const voiceFeedbackLabel = voiceFeedbackState === 'starting'
     ? 'Starting microphone...'
@@ -1414,7 +1413,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
           ? 'bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive/60 animate-pulse'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border'
       }`
-      : `${compactControls ? 'min-h-9 min-w-9 px-0' : 'min-h-[44px] min-w-[44px] px-0'} rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
+      : `min-h-9 min-w-9 px-0 rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
         isBusy
           ? 'bg-success text-success-foreground border-success/70 shadow-lg shadow-success/40'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border active:bg-muted-foreground/30 active:scale-95'
@@ -1475,9 +1474,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
             onTouchMove={keybarTouch.onTouchMove}
             onTouchEnd={(e) => keybarTouch.onTouchEnd(e, key.id)}
             onClick={() => keybarTouch.onClick(key.id)}
-            className={`flex items-center gap-1 min-w-0 rounded-lg border font-mono text-base font-bold transition-colors disabled:opacity-30 ${
-              compactControls ? 'min-h-9 px-2' : 'min-h-[44px] px-3'
-            } ${
+            className={`flex items-center gap-1 min-w-0 rounded-lg border font-mono text-base font-bold transition-colors disabled:opacity-30 min-h-9 px-2 ${
               isActive ? COMPOSER_MODE_STYLES[key.id].key : 'bg-muted border-border text-foreground active:bg-muted-foreground/20'
             }`}
           >
@@ -1536,7 +1533,7 @@ return (
           {composerModeStyle.label}
         </span>
       )}
-      <div className="flex items-end gap-1.5 md:gap-2">
+      <div className="flex items-end gap-1.5 md:gap-2 mb-1.5 md:mb-2">
         <textarea
           ref={textareaRef}
           data-prompt-input
@@ -1566,7 +1563,7 @@ return (
             data-submit-prompt
             onClick={hasPendingPermissionForSession ? () => setShowDialog(true) : handleSubmit}
             disabled={hasPendingPermissionForSession ? false : (!isModelReady || !hasPromptContent || (isPromptSubmitPending && !isStreamingResponse))}
-            className={`px-4 md:px-5 py-1.5 md:py-2 rounded-lg text-sm font-medium transition-colors dark:border flex-shrink-0 min-w-[52px] flex items-center justify-center min-h-[44px] md:min-h-0 ${
+            className={`px-4 md:px-5 h-9 md:h-auto md:py-2 rounded-lg text-sm font-medium transition-colors dark:border flex-shrink-0 min-w-[52px] flex items-center justify-center ${
               hasPendingPermissionForSession
                 ? 'bg-highlight hover:bg-highlight/90 border-highlight text-highlight-foreground ring-highlight/20'
                 : 'bg-primary hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed text-primary-foreground border-border/30'
@@ -1600,26 +1597,7 @@ return (
 
       <div data-testid="composer-controls-row" className="flex gap-1.5 md:gap-2 items-center justify-between">
         <div className="flex flex-1 md:flex-initial gap-1.5 md:gap-2 items-center min-w-0">
-          {showMobileKeys ? renderMobileKeys() : showMobileScrollButton ? (
-            <>
-              <button
-                type="button"
-                onClick={onScrollToBottom}
-                className={`flex items-center gap-1.5 px-3 rounded-lg text-xs font-medium border bg-background/80 hover:bg-accent/90 text-primary hover:text-primary-hover border-primary/20 shadow-md backdrop-blur-md transition-all duration-200 active:scale-95 ring-1 ring-primary/15 ${compactControls ? 'min-h-9' : 'min-h-[44px]'}`}
-                title="Scroll to bottom"
-                aria-label="Scroll to bottom"
-              >
-                <ArrowDown className="w-4 h-4" />
-                <span>Latest</span>
-              </button>
-              <ModelQuickSelect
-                directory={directory}
-                open={isModelPickerOpen}
-                onOpenChange={setIsModelPickerOpen}
-                session={modelSelectionSession}
-              />
-            </>
-          ) : (
+          {showMobileKeys ? renderMobileKeys() : (
             <>
               <AgentQuickSelect
                 directory={directory}
@@ -1648,7 +1626,7 @@ return (
                 session={modelSelectionSession}
               >
                 <button
-                  className="px-2.5 py-0.5 md:px-3 min-h-[44px] md:min-h-[36px] min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
+                  className="px-2.5 py-0.5 md:px-3 min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
                 >
                   <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
                   {hasVariants && currentVariant && (
@@ -1663,7 +1641,7 @@ return (
             {!isMobile && (
               <button
                 onClick={onScrollToBottom}
-                className={`p-2 rounded-lg bg-background/80 hover:bg-accent/90 text-primary hover:text-primary-hover transition-all duration-200 active:scale-95 hover:scale-105 shadow-md border border-primary/20 backdrop-blur-md ring-1 ring-primary/15 ${showScrollButton ? 'visible' : 'invisible'}`}
+                className={`p-2 rounded-lg bg-background/80 hover:bg-accent/90 text-primary hover:text-primary-hover transition-all duration-200 active:scale-95 hover:scale-105 shadow-md border border-primary/20 backdrop-blur-md ring-1 ring-primary/15 ${showScrollButton && !hasPromptContent ? 'visible' : 'invisible'}`}
                 title="Scroll to bottom"
               >
                 <ArrowDown className="w-6 h-6" />
@@ -1696,7 +1674,18 @@ return (
           {canUseMobileVoice && (
             renderVoiceButton('mobile')
           )}
-          {isMobile && directory && (
+          {showMobileScrollButton ? (
+            <button
+              type="button"
+              aria-label="Scroll to bottom"
+              title="Scroll to bottom"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={onScrollToBottom}
+              className={cn(getIconToggleButtonClassName(false), 'flex items-center justify-center size-9 p-0')}
+            >
+              <ArrowDown className="w-5 h-5" />
+            </button>
+          ) : isMobile && directory && (
             <ComposerToolsMenu
               sessionID={sessionID}
               directory={directory}
@@ -1705,7 +1694,6 @@ return (
               goalLabel={goalButtonLabel}
               onToggleGoal={toggleGoalArmed}
               onAttachFile={openFilePicker}
-              compact={compactControls}
             />
           )}
           {!isMobile && sttEnabled && sttSupported && (
diff --git a/frontend/src/components/ui/scanner-bars.tsx b/frontend/src/components/ui/scanner-bars.tsx
index f15aecc50..c297df342 100644
--- a/frontend/src/components/ui/scanner-bars.tsx
+++ b/frontend/src/components/ui/scanner-bars.tsx
@@ -1,205 +1,37 @@
-import { useLayoutEffect, useRef, useState, type RefObject } from 'react'
-import { useMediaQuery } from '@/hooks/useMediaQuery'
 import { cn } from '@/lib/utils'
 
 export type ScannerTone = 'info' | 'primary' | 'warning' | 'muted-foreground'
 
-export const SCANNER_REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)'
-
-const SCANNER_SEGMENT_WIDTH = 4
-const SCANNER_SEGMENT_GAP = 2
-const SCANNER_SEGMENT_PITCH = SCANNER_SEGMENT_WIDTH + SCANNER_SEGMENT_GAP
-const SCANNER_MIN_SEGMENTS = 12
-
-const SCANNER_SEGMENT_CLASS = 'w-1 h-2 rounded-[1px] transition-colors duration-75'
-
-const SCANNER_TONE_TIERS: Record<ScannerTone, readonly [string, string, string, string]> = {
-  info: ['bg-info', 'bg-info/70', 'bg-info/40', 'bg-info/20'],
-  primary: ['bg-primary', 'bg-primary/70', 'bg-primary/40', 'bg-primary/20'],
-  warning: ['bg-warning', 'bg-warning/70', 'bg-warning/40', 'bg-warning/20'],
-  'muted-foreground': ['bg-muted-foreground', 'bg-muted-foreground/70', 'bg-muted-foreground/40', 'bg-muted-foreground/20'],
-}
-
-const SCANNER_STATIC_TONE_CLASS: Record<ScannerTone, string> = {
-  info: 'bg-info/60',
-  primary: 'bg-primary/60',
-  warning: 'bg-warning/60',
-  'muted-foreground': 'bg-muted-foreground/60',
-}
-
-const SCANNER_OFF_CLASS = 'bg-muted/20'
-const SCANNER_INTENSITY_THRESHOLDS = [0.8, 0.5, 0.2] as const
-const SCANNER_FAINTEST_TIER = SCANNER_INTENSITY_THRESHOLDS.length
-
-/**
- * Returns how many fixed-width segments fit into `width`: each segment is 4px wide and the
- * container adds a 2px gap between neighbors, so `n` segments occupy `6n - 2` pixels. Never
- * drops below `SCANNER_MIN_SEGMENTS` so an unmeasured container still renders a usable scanner.
- */
-export function scannerSegmentCountForWidth(width: number): number {
-  return Math.max(SCANNER_MIN_SEGMENTS, Math.floor((width + SCANNER_SEGMENT_GAP) / SCANNER_SEGMENT_PITCH))
-}
-
-/**
- * Tracks the content width of a container across resizes. Returns 0 until the first measurement.
- */
-function useContainerWidth(ref: RefObject<HTMLElement | null>): number {
-  const [width, setWidth] = useState(0)
-
-  useLayoutEffect(() => {
-    const element = ref.current
-    if (!element) {
-      return
-    }
-
-    const update = (next: number) => setWidth((previous) => (previous === next ? previous : next))
-    update(element.getBoundingClientRect().width)
-
-    if (typeof ResizeObserver === 'undefined') {
-      return
-    }
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0]
-      if (entry) {
-        update(entry.contentRect.width)
-      }
-    })
-    observer.observe(element)
-    return () => observer.disconnect()
-  }, [ref])
-
-  return width
-}
-
-interface ScannerSegmentClassOptions {
-  index: number
-  position: number
-  litWidth: number
-  tone: ScannerTone
-  static?: boolean
-}
-
-/**
- * Returns the background class for one scanner segment. Segments within the lit window fade out
- * with distance from the window center across four intensity tiers; everything outside the window
- * stays muted. `static` skips the window math and renders the uniform reduced-motion tint.
- */
-export function scannerSegmentClass({
-  index,
-  position,
-  litWidth,
-  tone,
-  static: isStatic = false,
-}: ScannerSegmentClassOptions): string {
-  if (isStatic) {
-    return SCANNER_STATIC_TONE_CLASS[tone]
-  }
-
-  const halfWidth = litWidth / 2
-  const distance = Math.abs(index - (position + halfWidth))
-
-  if (distance > halfWidth + 1) {
-    return SCANNER_OFF_CLASS
-  }
-
-  const intensity = Math.max(0, 1 - distance / (halfWidth + 2))
-  const tier = SCANNER_INTENSITY_THRESHOLDS.findIndex((threshold) => intensity > threshold)
-
-  return SCANNER_TONE_TIERS[tone][tier === -1 ? SCANNER_FAINTEST_TIER : tier]
-}
-
-interface ScannerPositionOptions {
-  segmentCount: number
-  litWidth: number
-  intervalMs: number
-  paused: boolean
-}
-
-function useScannerPosition({
-  segmentCount,
-  litWidth,
-  intervalMs,
-  paused,
-}: ScannerPositionOptions): number {
-  const [position, setPosition] = useState(0)
-  const direction = useRef(1)
-  const maxPosition = Math.max(0, segmentCount - litWidth)
-
-  useLayoutEffect(() => {
-    setPosition((previous) => Math.min(previous, maxPosition))
-  }, [maxPosition])
-
-  useLayoutEffect(() => {
-    if (paused || maxPosition === 0) {
-      return
-    }
-
-    const interval = setInterval(() => {
-      setPosition((previous) => {
-        const next = previous + direction.current
-        if (next >= maxPosition) {
-          direction.current = -1
-          return maxPosition
-        }
-        if (next <= 0) {
-          direction.current = 1
-          return 0
-        }
-        return next
-      })
-    }, intervalMs)
-
-    return () => clearInterval(interval)
-  }, [paused, maxPosition, intervalMs])
-
-  return position
+const SCANNER_TONE_CLASS: Record<ScannerTone, string> = {
+  info: 'text-info',
+  primary: 'text-primary',
+  warning: 'text-warning',
+  'muted-foreground': 'text-muted-foreground',
 }
 
 interface ScannerBarsProps {
   tone: ScannerTone
-  segmentCount?: number
-  litWidth?: number
-  intervalMs?: number
   className?: string
 }
 
 /**
- * Segmented scanner matching the session status scanner: 4x8px segments with a 2px gap and a lit
- * window of `litWidth` segments that sweeps back and forth. Without an explicit `segmentCount` the
- * count is measured from the container width so the strip spans the space it is given. Under
- * `prefers-reduced-motion: reduce` the sweep is not started and every segment renders statically at
- * 60% opacity.
+ * Segmented scanner: a masked track of 4x8px cells with a 2px gap where only a lit window is
+ * visible. The window is brightest at its center and fades out cell by cell toward both edges as it
+ * sweeps from edge to edge and back. The mask, gradient and sweep live in `index.css`, so the
+ * animation advances in the browser with no JavaScript and no React render per frame. Like the
+ * braille activity spinner it animates regardless of `prefers-reduced-motion`, because a still
+ * indicator is indistinguishable from a stalled one.
  */
-export function ScannerBars({
-  tone,
-  segmentCount,
-  litWidth = 6,
-  intervalMs = 60,
-  className,
-}: ScannerBarsProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const reducedMotion = useMediaQuery(SCANNER_REDUCED_MOTION_QUERY)
-  const measuredWidth = useContainerWidth(containerRef)
-  const resolvedCount = segmentCount ?? scannerSegmentCountForWidth(measuredWidth)
-  const position = useScannerPosition({
-    segmentCount: resolvedCount,
-    litWidth,
-    intervalMs,
-    paused: reducedMotion,
-  })
-
+export function ScannerBars({ tone, className }: ScannerBarsProps) {
   return (
-    <div ref={containerRef} className={cn('flex w-full items-center gap-0.5', className)}>
-      {Array.from({ length: resolvedCount }, (_, index) => (
-        <div
-          key={index}
-          className={cn(
-            SCANNER_SEGMENT_CLASS,
-            scannerSegmentClass({ index, position, litWidth, tone, static: reducedMotion }),
-          )}
-        />
-      ))}
+    <div
+      className={cn(
+        'scanner-track relative h-2 w-full overflow-hidden',
+        SCANNER_TONE_CLASS[tone],
+        className,
+      )}
+    >
+      <div className="scanner-sweep absolute inset-y-0" />
     </div>
   )
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bd95ed182..28a2b0ec2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -545,6 +545,40 @@ input:-webkit-autofill:active {
   animation: progress 2s ease-in-out infinite;
 }
 
+.scanner-track {
+  mask-image: repeating-linear-gradient(
+    90deg,
+    #000 0 4px,
+    transparent 4px 6px
+  );
+  -webkit-mask-image: repeating-linear-gradient(
+    90deg,
+    #000 0 4px,
+    transparent 4px 6px
+  );
+}
+
+@keyframes scanner-sweep {
+  from { left: -15%; }
+  to { left: 85%; }
+}
+
+.scanner-sweep {
+  left: -15%;
+  width: 30%;
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, currentColor 12%, transparent) 20%,
+    color-mix(in oklab, currentColor 40%, transparent) 35%,
+    currentColor 50%,
+    color-mix(in oklab, currentColor 40%, transparent) 65%,
+    color-mix(in oklab, currentColor 12%, transparent) 80%,
+    transparent
+  );
+  animation: scanner-sweep 2.8s ease-in-out infinite alternate;
+}
+
 :root [data-sonner-toaster][data-sonner-theme] {
   --normal-bg: var(--color-popover);
   --normal-bg-hover: var(--color-accent);
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index 16c8f9b50..3083d2482 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -968,7 +968,7 @@ export function SessionDetail() {
                   ref={promptInputRef}
                   directory={sessionDirectory}
                   sessionID={sessionId}
-                  showScrollButton={showScrollButton && !hasPromptContent}
+                  showScrollButton={showScrollButton}
                   isSessionActive={isSessionActive}
                   isStreamingResponse={isStreamingResponse}
                   onScrollToBottom={scrollToBottom}
diff --git a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
index f270f3283..7efc96365 100644
--- a/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
+++ b/frontend/src/pages/__tests__/SessionDetail.scroll-floating.test.tsx
@@ -379,11 +379,12 @@ describe('SessionDetail scroll floating button', () => {
     })
   })
 
-  it('does NOT pass scroll button state when prompt has content', async () => {
+  it('passes scroll button state even when the prompt has content', async () => {
     renderWith({ mobile: true, showScrollButton: true, promptContent: true })
 
-    await waitFor(() => expect(screen.getByText('MockedPromptInput')).toBeInTheDocument())
-    expect(screen.queryByLabelText('Scroll to bottom')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByLabelText('Scroll to bottom')).toBeInTheDocument()
+    })
   })
 
   it('shows clear button for prompt content only when session is idle', async () => {

From 32102cca3e73b4d2bc6bc7622a400e4f981c6931 Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Wed, 21 Oct 2026 13:01:48 -0400
Subject: [PATCH 4/6] fix(frontend): anchor the mobile activity scanner just
 below the composer controls

---
 .../components/message/ComposerActivityBar.test.tsx   |  6 +++---
 .../src/components/message/ComposerActivityBar.tsx    | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/message/ComposerActivityBar.test.tsx b/frontend/src/components/message/ComposerActivityBar.test.tsx
index 8b43a2eff..4c7600a13 100644
--- a/frontend/src/components/message/ComposerActivityBar.test.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -41,15 +41,15 @@ describe('ComposerActivityBar', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('pins a pointer-transparent progressbar across the screen bottom on mobile and below the composer on desktop', () => {
+  it('anchors a pointer-transparent progressbar in the gap below the composer', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
     const bar = screen.getByRole('progressbar', { name: 'Session working' })
     expect(bar).toHaveClass('pointer-events-none', 'flex')
-    expect(bar).toHaveClass('fixed', 'inset-x-0', 'bottom-0')
-    expect(bar).toHaveClass('md:absolute', 'md:inset-x-3', 'md:-bottom-[11px]')
+    expect(bar).toHaveClass('absolute', 'inset-x-3', '-bottom-[10px]', 'md:-bottom-[11px]')
+    expect(bar).not.toHaveClass('fixed')
   })
 
   it('renders a masked segment track with only the sweeping window', () => {
diff --git a/frontend/src/components/message/ComposerActivityBar.tsx b/frontend/src/components/message/ComposerActivityBar.tsx
index 27710fb8b..6f6e3b514 100644
--- a/frontend/src/components/message/ComposerActivityBar.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -25,11 +25,10 @@ const ACTIVITY_PRESENTATION = {
 } as const satisfies Record<string, { label: string; tone: ScannerTone }>
 
 /**
- * Session activity scanner. On mobile it spans the full width of the bottom screen edge; from the
- * `md` breakpoint it is anchored in the gap below the composer frame. A fading lit window of 4x8px
- * segments sweeps across the strip. Renders nothing while the
- * session is idle and has no background activity; otherwise announces the current activity through
- * an indeterminate progressbar.
+ * Session activity scanner anchored in the gap below the composer frame. A fading lit window of
+ * 4x8px segments sweeps across the strip. Renders nothing while the session is idle and has no
+ * background activity; otherwise announces the current activity through an indeterminate
+ * progressbar.
  */
 export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
   const status = useSessionStatusForSession(sessionID)
@@ -52,7 +51,7 @@ export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
       aria-label={label}
       aria-valuemin={0}
       aria-valuemax={100}
-      className="pointer-events-none fixed inset-x-0 bottom-0 flex md:absolute md:inset-x-3 md:-bottom-[11px]"
+      className="pointer-events-none absolute inset-x-3 -bottom-[10px] flex md:-bottom-[11px]"
     >
       <ScannerBars tone={activity.tone} />
     </div>

From 570e528ba16773c09bcc939a00d2dd563a47457e Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Wed, 21 Oct 2026 13:08:43 -0400
Subject: [PATCH 5/6] feat(frontend): dock the mobile composer as a solid
 full-width strip and enlarge the mic and tools buttons

---
 .../message/ComposerActivityBar.test.tsx      |  4 ++--
 .../message/ComposerActivityBar.tsx           |  7 +++---
 .../message/ComposerToolsMenu.test.tsx        |  4 ++--
 .../components/message/ComposerToolsMenu.tsx  |  2 +-
 .../message/PromptInput.composer.test.tsx     |  8 +++----
 .../src/components/message/PromptInput.tsx    |  6 ++---
 frontend/src/pages/SessionDetail.tsx          | 24 ++++++++++---------
 7 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/message/ComposerActivityBar.test.tsx b/frontend/src/components/message/ComposerActivityBar.test.tsx
index 4c7600a13..ad820eec7 100644
--- a/frontend/src/components/message/ComposerActivityBar.test.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -41,14 +41,14 @@ describe('ComposerActivityBar', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('anchors a pointer-transparent progressbar in the gap below the composer', () => {
+  it('sits inside the docked composer on mobile and below the composer on desktop', () => {
     useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
 
     render(<ComposerActivityBar sessionID="session-a" />)
 
     const bar = screen.getByRole('progressbar', { name: 'Session working' })
     expect(bar).toHaveClass('pointer-events-none', 'flex')
-    expect(bar).toHaveClass('absolute', 'inset-x-3', '-bottom-[10px]', 'md:-bottom-[11px]')
+    expect(bar).toHaveClass('absolute', 'inset-x-3', 'bottom-1', 'md:-bottom-[11px]')
     expect(bar).not.toHaveClass('fixed')
   })
 
diff --git a/frontend/src/components/message/ComposerActivityBar.tsx b/frontend/src/components/message/ComposerActivityBar.tsx
index 6f6e3b514..941060931 100644
--- a/frontend/src/components/message/ComposerActivityBar.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -25,8 +25,9 @@ const ACTIVITY_PRESENTATION = {
 } as const satisfies Record<string, { label: string; tone: ScannerTone }>
 
 /**
- * Session activity scanner anchored in the gap below the composer frame. A fading lit window of
- * 4x8px segments sweeps across the strip. Renders nothing while the session is idle and has no
+ * Session activity scanner shown by the composer. On mobile it sits inside the bottom edge of the
+ * docked composer; from `md` it is anchored in the gap below the composer frame. A fading lit window
+ * of 4x8px segments sweeps across the strip. Renders nothing while the session is idle and has no
  * background activity; otherwise announces the current activity through an indeterminate
  * progressbar.
  */
@@ -51,7 +52,7 @@ export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
       aria-label={label}
       aria-valuemin={0}
       aria-valuemax={100}
-      className="pointer-events-none absolute inset-x-3 -bottom-[10px] flex md:-bottom-[11px]"
+      className="pointer-events-none absolute inset-x-3 bottom-1 flex md:-bottom-[11px]"
     >
       <ScannerBars tone={activity.tone} />
     </div>
diff --git a/frontend/src/components/message/ComposerToolsMenu.test.tsx b/frontend/src/components/message/ComposerToolsMenu.test.tsx
index af613dc0f..c9cfc6de1 100644
--- a/frontend/src/components/message/ComposerToolsMenu.test.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.test.tsx
@@ -249,12 +249,12 @@ describe('ComposerToolsMenu', () => {
     expect(props.onAttachFile).toHaveBeenCalledTimes(1)
   })
 
-  it('uses the 36px control size for the trigger', () => {
+  it('uses the 40px control size for the trigger', () => {
     mockPermissionMode()
     renderMenu()
 
     const trigger = screen.getByRole('button', { name: 'Composer options' })
-    expect(trigger).toHaveClass('size-9', 'p-0')
+    expect(trigger).toHaveClass('size-10', 'p-0')
     expect(trigger).not.toHaveClass('p-2')
   })
 })
diff --git a/frontend/src/components/message/ComposerToolsMenu.tsx b/frontend/src/components/message/ComposerToolsMenu.tsx
index 13702fcc6..a8609e233 100644
--- a/frontend/src/components/message/ComposerToolsMenu.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.tsx
@@ -56,7 +56,7 @@ export function ComposerToolsMenu({
             type="button"
             aria-label="Composer options"
             title="Composer options"
-            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-9 p-0')}
+            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-10 p-0')}
           >
             <Plus className="w-5 h-5" />
           </button>
diff --git a/frontend/src/components/message/PromptInput.composer.test.tsx b/frontend/src/components/message/PromptInput.composer.test.tsx
index de81a0aec..0817021f5 100644
--- a/frontend/src/components/message/PromptInput.composer.test.tsx
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -291,7 +291,7 @@ describe('PromptInput composer layout', () => {
       renderComponent({ showScrollButton: true, onScrollToBottom })
 
       const arrow = screen.getByRole('button', { name: 'Scroll to bottom' })
-      expect(arrow).toHaveClass('size-9', 'p-0')
+      expect(arrow).toHaveClass('size-10', 'p-0')
 
       fireEvent.click(arrow)
 
@@ -359,18 +359,18 @@ describe('PromptInput composer layout', () => {
   })
 
   describe('control sizing', () => {
-    it('keeps the mic at 36px before and after the prompt gains focus on mobile', () => {
+    it('keeps the mic at 40px before and after the prompt gains focus on mobile', () => {
       mocks.useMobile.mockReturnValue(true)
       renderComponent()
 
       const micBeforeFocus = mobileVoiceButton() as HTMLElement
-      expect(micBeforeFocus).toHaveClass('min-h-9', 'min-w-9')
+      expect(micBeforeFocus).toHaveClass('min-h-10', 'min-w-10')
       expect(micBeforeFocus).not.toHaveClass('min-h-[44px]')
 
       fireEvent.focus(promptInput())
 
       const micAfterFocus = mobileVoiceButton() as HTMLElement
-      expect(micAfterFocus).toHaveClass('min-h-9', 'min-w-9')
+      expect(micAfterFocus).toHaveClass('min-h-10', 'min-w-10')
       expect(micAfterFocus).not.toHaveClass('min-h-[44px]')
     })
 
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index 3938f06fa..f16aa94b8 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -1413,7 +1413,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
           ? 'bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive/60 animate-pulse'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border'
       }`
-      : `min-h-9 min-w-9 px-0 rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
+      : `min-h-10 min-w-10 px-0 rounded-lg transition-all duration-150 flex items-center justify-center border touch-none select-none ${
         isBusy
           ? 'bg-success text-success-foreground border-success/70 shadow-lg shadow-success/40'
           : 'bg-muted hover:bg-muted-foreground/20 text-muted-foreground hover:text-foreground border-border active:bg-muted-foreground/30 active:scale-95'
@@ -1520,7 +1520,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
       : ''
 
 return (
-    <div className={`relative isolate border border-border dark:border-border/30 rounded-xl p-2 md:p-3 mb-4 md:mb-3 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-xl before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
+    <div className={`relative isolate border-t md:border border-border dark:border-border/30 rounded-t-xl md:rounded-xl p-2 pb-4 md:p-3 md:mb-3 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-t-xl md:before:rounded-xl before:bg-background md:before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
       <div role="status" aria-live="polite" className="sr-only">
         {sessionActivityAnnouncement}
       </div>
@@ -1681,7 +1681,7 @@ return (
               title="Scroll to bottom"
               onMouseDown={(e) => e.preventDefault()}
               onClick={onScrollToBottom}
-              className={cn(getIconToggleButtonClassName(false), 'flex items-center justify-center size-9 p-0')}
+              className={cn(getIconToggleButtonClassName(false), 'flex items-center justify-center size-10 p-0')}
             >
               <ArrowDown className="w-5 h-5" />
             </button>
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index 3083d2482..7cc5eb483 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -896,11 +896,11 @@ export function SessionDetail() {
                 "relative pointer-events-auto",
                 isFormSheetOpen
                   ? "flex w-full flex-1 min-h-0 flex-col"
-                  : cn("w-[94%] md:max-w-4xl", isFormOpen && "flex max-h-full min-h-0 flex-col"),
+                  : cn("w-full md:w-[94%] md:max-w-4xl", isFormOpen && "flex max-h-full min-h-0 flex-col"),
               )}
             >
               {!isFormSheetOpen && (
-                <div className="absolute bottom-full right-0 mb-2 z-50 flex flex-col items-end gap-2">
+                <div className="absolute bottom-full right-[3%] md:right-0 mb-2 z-50 flex flex-col items-end gap-2">
                   {ttsEnabled && !hasPromptContent && !isSessionActive && latestPlayableAssistant && (
                     <FloatingTTSButton
                       messageId={latestPlayableAssistant.messageId}
@@ -955,15 +955,17 @@ export function SessionDetail() {
                 />
               )}
               <div className={cn(isFormSheetOpen && "shrink-0 bg-background px-[3%]")}>
-                <SessionSendErrorBanner sessionId={sessionId} isConnected={streamConnected} isReconnecting={streamReconnecting} />
-                <SessionGoalBar sessionID={sessionId} />
-                <BackgroundWorkBar
-                  sessionID={sessionId}
-                  directory={sessionDirectory}
-                  messages={messages}
-                  isSessionActive={isSessionActive}
-                  onChildSessionClick={handleChildSessionClick}
-                />
+                <div className={cn(!isFormSheetOpen && "px-[3%] md:px-0")}>
+                  <SessionSendErrorBanner sessionId={sessionId} isConnected={streamConnected} isReconnecting={streamReconnecting} />
+                  <SessionGoalBar sessionID={sessionId} />
+                  <BackgroundWorkBar
+                    sessionID={sessionId}
+                    directory={sessionDirectory}
+                    messages={messages}
+                    isSessionActive={isSessionActive}
+                    onChildSessionClick={handleChildSessionClick}
+                  />
+                </div>
                 <PromptInput
                   ref={promptInputRef}
                   directory={sessionDirectory}

From 160770396f788b947f91e5d138428a718c7edd4f Mon Sep 17 00:00:00 2001
From: Chris Scott <99081550+chriswritescode-dev@users.noreply.github.com>
Date: Wed, 21 Oct 2026 13:26:20 -0400
Subject: [PATCH 6/6] fix(frontend): lift the mobile composer row clear of the
 rounded screen corners and match the agent and model control height

---
 frontend/src/components/agent/AgentQuickSelect.tsx           | 2 +-
 frontend/src/components/message/ComposerActivityBar.test.tsx | 2 +-
 frontend/src/components/message/ComposerActivityBar.tsx      | 2 +-
 frontend/src/components/message/PromptInput.tsx              | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/agent/AgentQuickSelect.tsx b/frontend/src/components/agent/AgentQuickSelect.tsx
index f61d27675..e10f8d635 100644
--- a/frontend/src/components/agent/AgentQuickSelect.tsx
+++ b/frontend/src/components/agent/AgentQuickSelect.tsx
@@ -55,7 +55,7 @@ export function AgentQuickSelect({
   const buttonContent = (
     <button
       style={styleVars as React.CSSProperties}
-      className="px-2 md:px-3.5 py-1 h-9 rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
+      className="px-2 md:px-3.5 py-1 h-10 md:h-9 rounded-lg text-sm font-medium border min-w-[56px] max-w-[80px] md:max-w-[100px] flex-shrink-0 flex items-center justify-center transition-all duration-200 active:scale-95 hover:scale-105 shadow-md text-[var(--agent-color)] bg-[var(--agent-bg)] border-[var(--agent-border)] hover:bg-[var(--agent-bg-hover)] hover:border-[var(--agent-border-hover)] shadow-[var(--agent-shadow)] hover:shadow-[var(--agent-shadow-hover)]"
     >
       <span className="truncate">{displayName}</span>
     </button>
diff --git a/frontend/src/components/message/ComposerActivityBar.test.tsx b/frontend/src/components/message/ComposerActivityBar.test.tsx
index ad820eec7..d14687420 100644
--- a/frontend/src/components/message/ComposerActivityBar.test.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -48,7 +48,7 @@ describe('ComposerActivityBar', () => {
 
     const bar = screen.getByRole('progressbar', { name: 'Session working' })
     expect(bar).toHaveClass('pointer-events-none', 'flex')
-    expect(bar).toHaveClass('absolute', 'inset-x-3', 'bottom-1', 'md:-bottom-[11px]')
+    expect(bar).toHaveClass('absolute', 'inset-x-3', 'bottom-4', 'md:-bottom-[11px]')
     expect(bar).not.toHaveClass('fixed')
   })
 
diff --git a/frontend/src/components/message/ComposerActivityBar.tsx b/frontend/src/components/message/ComposerActivityBar.tsx
index 941060931..05e9bbe13 100644
--- a/frontend/src/components/message/ComposerActivityBar.tsx
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -52,7 +52,7 @@ export function ComposerActivityBar({ sessionID }: ComposerActivityBarProps) {
       aria-label={label}
       aria-valuemin={0}
       aria-valuemax={100}
-      className="pointer-events-none absolute inset-x-3 bottom-1 flex md:-bottom-[11px]"
+      className="pointer-events-none absolute inset-x-3 bottom-4 flex md:-bottom-[11px]"
     >
       <ScannerBars tone={activity.tone} />
     </div>
diff --git a/frontend/src/components/message/PromptInput.tsx b/frontend/src/components/message/PromptInput.tsx
index f16aa94b8..df0be4e56 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -1520,7 +1520,7 @@ if (isIOS && isSecureContext && navigator.clipboard && navigator.clipboard.read)
       : ''
 
 return (
-    <div className={`relative isolate border-t md:border border-border dark:border-border/30 rounded-t-xl md:rounded-xl p-2 pb-4 md:p-3 md:mb-3 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-t-xl md:before:rounded-xl before:bg-background md:before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
+    <div className={`relative isolate border-t md:border border-border dark:border-border/30 rounded-t-xl md:rounded-xl p-2 pb-7 md:p-3 md:mb-3 w-full before:pointer-events-none before:absolute before:-inset-px before:-z-10 before:rounded-t-xl md:before:rounded-xl before:bg-background md:before:bg-background/95 before:backdrop-blur-md before:content-[''] ${hasPendingPermissionForSession ? 'border-highlight/50 ring-1 ring-highlight/30' : composerModeStyle?.frame ?? ''} ${isTakeoverOpen ? 'z-[60]' : ''}`}>
       <div role="status" aria-live="polite" className="sr-only">
         {sessionActivityAnnouncement}
       </div>
@@ -1626,7 +1626,7 @@ return (
                 session={modelSelectionSession}
               >
                 <button
-                  className="px-2.5 py-0.5 md:px-3 min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
+                  className="px-2.5 py-0.5 md:px-3 min-h-10 md:min-h-9 min-w-0 rounded-lg text-xs md:text-sm font-medium border bg-muted border-border text-muted-foreground hover:bg-muted-foreground/10 hover:border-foreground/30 transition-colors cursor-pointer flex-1 md:flex-initial md:w-auto md:max-w-[220px] dark:border-border/30 flex flex-col items-start justify-center overflow-hidden"
                 >
                   <span className="truncate w-full text-left">{displayModelName || 'Select model'}</span>
                   {hasVariants && currentVariant && (