web(coder UI): ChatInput migration + Thinking render + DiffPanel route fix

Bundles in-progress working-tree UI work not authored this session (CoderPane ChatInput migration, AgentComposerBar/CoderMessageList/tab-bar/sidebar/pane refinements, provider icons) with this session's changes to the same files: MessageBubble renders a collapsible 'Thinking' block from reasoning_text/reasoning_parts (surfacing ACP agent_thought_chunk + native reasoning), and the DiffPanel approve/reject calls are repointed to the real /api/coder/pending/:id/apply and /reject routes (the old /sessions/:id/pending/:id/approve|reject paths did not exist).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/web/src/components/AgentComposerBar.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Check, ChevronDown, RefreshCw, Shield, Cpu, Brain } from 'lucide-react';
+import { Check, ChevronDown, RefreshCw, Shield, Brain, Bird, Bot, Dog, Terminal as TermIcon } from 'lucide-react';
+import { ClaudeIcon, OpenCodeIcon } from '@/components/icons/ProviderIcons';
 import { api } from '@/api/client';
 import type { AgentSessionConfig, ProviderSnapshotEntry, AgentCommand } from '@/api/types';
 import { useProviderSnapshot, refreshProviderSnapshot } from '@/hooks/useProviderSnapshot';
@@ -125,9 +126,11 @@ function CompactPicker({ label, value, disabled, options, onPick, icon }: Picker
           disabled={disabled}
           onClick={() => setOpen(true)}
           aria-label={`${label}: ${currentLabel}`}
-          className="inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded text-muted-foreground hover:text-foreground disabled:opacity-40"
+          className="inline-flex items-center gap-1 min-h-[44px] px-1.5 rounded text-xs text-muted-foreground hover:text-foreground disabled:opacity-40"
         >
-          {icon ?? <Cpu className="size-4" />}
+          {icon}
+          <span className="truncate max-w-[120px]">{currentLabel}</span>
+          <ChevronDown className="size-3 opacity-70 shrink-0" />
         </button>
         <BottomSheet open={open} onClose={() => setOpen(false)} title={label}>
           <div className="px-2">{list}</div>
@@ -142,16 +145,16 @@ function CompactPicker({ label, value, disabled, options, onPick, icon }: Picker
         <button
           type="button"
           disabled={disabled}
-          className="text-xs font-mono text-muted-foreground hover:text-foreground flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted/60 disabled:opacity-40 max-w-[140px]"
+          className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 px-1.5 py-0.5 rounded hover:bg-muted/60 disabled:opacity-40"
         >
           {icon}
-          <span className="truncate">{currentLabel}</span>
+          <span className="truncate max-w-[180px]">{currentLabel}</span>
           <ChevronDown className="size-3 opacity-70 shrink-0" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="max-h-64 overflow-y-auto min-w-[160px]">
         {options.map((o) => (
-          <DropdownMenuItem key={o.id} onSelect={() => onPick(o.id)} className="font-mono text-xs">
+          <DropdownMenuItem key={o.id} onSelect={() => onPick(o.id)} className="text-xs">
             <Check className={cn('size-3 shrink-0', o.id === value ? 'opacity-100' : 'opacity-0')} />
             {o.label}
           </DropdownMenuItem>
@@ -166,9 +169,10 @@ interface Props {
   value: AgentSessionConfig;
   onChange: (next: AgentSessionConfig) => void;
   onProviderCommandsChange?: (commands: AgentCommand[]) => void;
+  connected?: boolean;
 }
 
-export function AgentComposerBar({ projectPath, value, onChange, onProviderCommandsChange }: Props) {
+export function AgentComposerBar({ projectPath, value, onChange, onProviderCommandsChange, connected }: Props) {
   const allEntries = useProviderSnapshot(projectPath);
   const entries = useMemo(
     () => allEntries?.filter((e) => e.installed && e.status !== 'error') ?? null,
@@ -255,6 +259,16 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
     );
   }
 
+  const providerIcon = (name: string) => {
+    switch (name) {
+      case 'claude': return <ClaudeIcon size={13} className="shrink-0" />;
+      case 'opencode': return <OpenCodeIcon size={13} className="shrink-0" />;
+      case 'goose': return <Bird size={13} className="shrink-0" />;
+      case 'qwen': return <TermIcon size={13} className="shrink-0" />;
+      default: return <Dog size={13} className="shrink-0" />;
+    }
+  };
+
   const providerOptions = entries.map((e) => ({ id: e.name, label: e.label }));
   const modeOptions = (currentEntry?.modes ?? []).map((m) => ({ id: m.id, label: m.label }));
   const modelOptions = (currentEntry?.models ?? []).map((m) => ({ id: m.id, label: m.label }));
@@ -267,7 +281,7 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
         value={value.provider}
         options={providerOptions}
         onPick={pickProvider}
-        icon={<Cpu className="size-3 shrink-0" />}
+        icon={providerIcon(value.provider)}
       />
       <CompactPicker
         label="Mode"
@@ -283,6 +297,7 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
         disabled={modelOptions.length === 0}
         options={modelOptions}
         onPick={pickModel}
+        icon={<Bot size={13} className="shrink-0" />}
       />
       {thinkingOpts.length > 0 && (
         <CompactPicker
@@ -293,11 +308,17 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
           icon={<Brain className="size-3 shrink-0" />}
         />
       )}
+      {connected !== undefined && (
+        <span
+          className={cn('inline-block w-1.5 h-1.5 rounded-full shrink-0 ml-auto', connected ? 'bg-green-500' : 'bg-red-500')}
+          title={connected ? 'Connected' : 'Disconnected'}
+        />
+      )}
       <button
         type="button"
         onClick={() => void handleRefresh()}
         disabled={refreshing}
-        className="ml-auto inline-flex items-center justify-center size-7 max-md:min-h-[44px] max-md:min-w-[44px] rounded text-muted-foreground hover:text-foreground disabled:opacity-40"
+        className={cn('inline-flex items-center justify-center size-7 max-md:min-h-[44px] max-md:min-w-[44px] rounded text-muted-foreground hover:text-foreground disabled:opacity-40', connected === undefined && 'ml-auto')}
         aria-label="Refresh provider list"
         title="Refresh providers"
       >