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/agent/AgentQuickSelect.tsx b/frontend/src/components/agent/AgentQuickSelect.tsx
index 73a9a8aac..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-[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-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
new file mode 100644
index 000000000..d14687420
--- /dev/null
+++ b/frontend/src/components/message/ComposerActivityBar.test.tsx
@@ -0,0 +1,118 @@
+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 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 trackOf = (bar: HTMLElement) => bar.firstElementChild as HTMLElement
+
+describe('ComposerActivityBar', () => {
+  beforeEach(() => {
+    resetStore()
+  })
+
+  afterEach(() => {
+    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('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-4', 'md:-bottom-[11px]')
+    expect(bar).not.toHaveClass('fixed')
+  })
+
+  it('renders a masked segment track with only the sweeping window', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(track).toHaveClass('scanner-track', 'relative', 'h-2', 'w-full')
+
+    const children = Array.from(track.children) as HTMLElement[]
+    expect(children).toHaveLength(1)
+    expect(children[0]).toHaveClass('scanner-sweep')
+  })
+
+  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" />)
+
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Session working' }))
+    expect(track).toHaveClass('text-info')
+  })
+
+  it('tints the track with the primary tone while compacting', () => {
+    useSessionStatus.getState().setStatus('session-a', { type: 'compact' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Compacting' }))
+    expect(track).toHaveClass('text-primary')
+  })
+
+  it('reports the retry attempt in the label with the warning tone', () => {
+    useSessionStatus.getState().setStatus('session-a', {
+      type: 'retry',
+      attempt: 2,
+      message: 'rate limited',
+      next: Date.now() + 5_000,
+    })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Retrying (Retry #2)' }))
+    expect(track).toHaveClass('text-warning')
+  })
+
+  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" />)
+
+    const track = trackOf(screen.getByRole('progressbar', { name: 'Background tasks running' }))
+    expect(track).toHaveClass('text-muted-foreground')
+  })
+
+  it('keeps sweeping when reduced motion is requested', () => {
+    stubMatchMedia(true)
+    useSessionStatus.getState().setStatus('session-a', { type: 'busy' })
+
+    render(<ComposerActivityBar sessionID="session-a" />)
+
+    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
new file mode 100644
index 000000000..05e9bbe13
--- /dev/null
+++ b/frontend/src/components/message/ComposerActivityBar.tsx
@@ -0,0 +1,60 @@
+import { ScannerBars, type ScannerTone } from '@/components/ui/scanner-bars'
+import { useHasBackgroundActivity, useSessionStatusForSession } from '@/stores/sessionStatusStore'
+
+interface ComposerActivityBarProps {
+  sessionID: string
+}
+
+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 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.
+ */
+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-4 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 fb9517f74..c9cfc6de1 100644
--- a/frontend/src/components/message/ComposerToolsMenu.test.tsx
+++ b/frontend/src/components/message/ComposerToolsMenu.test.tsx
@@ -249,27 +249,13 @@ 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 40px 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()
-  })
-
-  it('starts dictation when onDictate is provided', async () => {
-    const user = userEvent.setup()
-    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' }))
-
-    expect(onDictate).toHaveBeenCalledTimes(1)
+    const trigger = screen.getByRole('button', { name: 'Composer options' })
+    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 27094ade4..a8609e233 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,
@@ -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,9 +26,14 @@ interface ComposerToolsMenuProps {
   goalLabel: string
   onToggleGoal: () => void
   onAttachFile: () => void
-  onDictate?: () => void
 }
 
+/**
+ * Renders the mobile composer tools trigger: a dropdown for permission mode,
+ * sandboxing, goal mode, and file attachment.
+ *
+ * @param props Session context, goal state, and the attach handler.
+ */
 export function ComposerToolsMenu({
   sessionID,
   directory,
@@ -36,7 +42,6 @@ export function ComposerToolsMenu({
   goalLabel,
   onToggleGoal,
   onAttachFile,
-  onDictate,
 }: ComposerToolsMenuProps) {
   const isLocalServer = isLocalOpenCodeServer(useOpenCodeServerId())
   const permission = usePermissionModeToggle(sessionID, directory)
@@ -51,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 min-h-[44px] min-w-[44px]`}
+            className={cn(getIconToggleButtonClassName(permission.isAuto || sandbox.isSandboxed || goalArmed), 'flex items-center justify-center size-10 p-0')}
           >
             <Plus className="w-5 h-5" />
           </button>
@@ -82,11 +87,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 9115fe171..dfc560861 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,
@@ -568,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..0817021f5
--- /dev/null
+++ b/frontend/src/components/message/PromptInput.composer.test.tsx
@@ -0,0 +1,399 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+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'
+
+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: () => <div data-testid="composer-tools-menu" />,
+}))
+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('swaps the composer tools button for a scroll-to-bottom arrow while scrolled up', () => {
+      renderComponent({ showScrollButton: true })
+
+      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())
+
+      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-10', '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', () => {
+      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('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)
+    })
+
+    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('control sizing', () => {
+    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-10', 'min-w-10')
+      expect(micBeforeFocus).not.toHaveClass('min-h-[44px]')
+
+      fireEvent.focus(promptInput())
+
+      const micAfterFocus = mobileVoiceButton() as HTMLElement
+      expect(micAfterFocus).toHaveClass('min-h-10', 'min-w-10')
+      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()
+
+      fireEvent.focus(promptInput())
+
+      const commandKey = screen.getByRole('button', { name: 'cmd /' })
+      expect(commandKey).toHaveClass('min-h-9')
+      expect(commandKey).not.toHaveClass('min-h-[44px]')
+    })
+
+    it('sizes the submit button at 36px on mobile', () => {
+      mocks.useMobile.mockReturnValue(true)
+      renderComponent()
+
+      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.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..ce6fbcd4d 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,
 }))
@@ -545,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(
@@ -554,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()
     })
   })
 
@@ -575,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 fff193da3..df0be4e56 100644
--- a/frontend/src/components/message/PromptInput.tsx
+++ b/frontend/src/components/message/PromptInput.tsx
@@ -22,10 +22,10 @@ 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 { 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'
@@ -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'
@@ -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,7 @@ 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 showMobileKeys = isMobile && isPromptFocused && !hasPendingPermissionForSession
   const voiceFeedbackLabel = voiceFeedbackState === 'starting'
     ? 'Starting microphone...'
     : voiceFeedbackState === 'sending'
@@ -1414,13 +1413,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 ${
+      : `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'
       }`
 
-    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 +1453,39 @@ 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 min-h-9 px-2 ${
+              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>
+  )
+
   
 
   
@@ -1488,10 +1520,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-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>
+      <ComposerActivityBar sessionID={sessionID} />
       {composerModeStyle && (
         <span
           data-testid="composer-mode-badge"
@@ -1500,30 +1533,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 mb-1.5 md:mb-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 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'
+            }`}
+            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">
@@ -1545,33 +1595,9 @@ 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 ? (
-            <>
-              <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"
-                title="Scroll to bottom"
-                aria-label="Scroll to bottom"
-              >
-                <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}
-                onOpenChange={setIsModelPickerOpen}
-                session={modelSelectionSession}
-              />
-            </>
-          ) : (
+          {showMobileKeys ? renderMobileKeys() : (
             <>
               <AgentQuickSelect
                 directory={directory}
@@ -1593,36 +1619,29 @@ 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 && (
-                  <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-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 && (
+                    <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}
-                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" />
@@ -1652,10 +1671,21 @@ return (
           >
             <Upload className="w-5 h-5" />
           </button>
-          {showMobileVoiceButton && (
+          {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-10 p-0')}
+            >
+              <ArrowDown className="w-5 h-5" />
+            </button>
+          ) : isMobile && directory && (
             <ComposerToolsMenu
               sessionID={sessionID}
               directory={directory}
@@ -1664,63 +1694,14 @@ return (
               goalLabel={goalButtonLabel}
               onToggleGoal={toggleGoalArmed}
               onAttachFile={openFilePicker}
-              onDictate={canUseMobileVoice && hasPromptContent && !showVoiceFeedback ? () => void startVoiceRecording() : undefined}
             />
           )}
           {!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}
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..c297df342
--- /dev/null
+++ b/frontend/src/components/ui/scanner-bars.tsx
@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils'
+
+export type ScannerTone = 'info' | 'primary' | 'warning' | 'muted-foreground'
+
+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
+  className?: string
+}
+
+/**
+ * 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, className }: ScannerBarsProps) {
+  return (
+    <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/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>
   )
 })
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..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,20 +955,22 @@ 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}
                   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 () => {