feat(web): Phase 1-UX frontend — DiffPanel agent badges + resumed/new-session chip

DiffPanel renders a per-row agent badge (icon+label; null -> 'manual') + a 'Changes from X, Y' note when the pending set spans >1 agent. AgentComposerBar gains an optional sessionId prop -> resumed/history/new-session chip beside the Provider picker (gated, so BooChat callers are unchanged), driven by a new useAgentSessions hook (refetch on message-complete). providerIcon extracted to shared components/coder/providerIcons.tsx; api.coder gains agentSessions(sessionId); PendingChange type gains agent. web tsc clean.

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

apps/web/src/components/AgentComposerBar.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Check, ChevronDown, RefreshCw, Loader2, Shield, Brain, Bird, Bot, Dog, Terminal as TermIcon } from 'lucide-react';
-import { ClaudeIcon, OpenCodeIcon } from '@/components/icons/ProviderIcons';
+import { Check, ChevronDown, RefreshCw, Loader2, Shield, Brain, Bot } from 'lucide-react';
 import { api } from '@/api/client';
 import type { AgentSessionConfig, ProviderSnapshotEntry, AgentCommand } from '@/api/types';
 import { useProviderSnapshot, refreshProviderSnapshot } from '@/hooks/useProviderSnapshot';
+import { providerIcon } from '@/components/coder/providerIcons';
+import { useAgentSessions } from '@/hooks/useAgentSessions';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -172,9 +173,36 @@ interface Props {
   onChange: (next: AgentSessionConfig) => void;
   onProviderCommandsChange?: (commands: AgentCommand[]) => void;
   connected?: boolean;
+  // v2.6 Phase 1-UX §9b: chat id for the resumed/new-session chip. Optional so
+  // BooChat and any other AgentComposerBar caller renders no chip and is
+  // otherwise unaffected. When present + connected + the chat has ≥1 prior
+  // turn, a chip right of the Provider picker reports whether switching to the
+  // current provider resumes an agent session, replays history (boocode), or
+  // starts fresh.
+  sessionId?: string;
+  // True once the chat has at least one prior turn — gates the chip so it stays
+  // hidden on a brand-new chat. Defaults to false (no chip).
+  hasPriorTurn?: boolean;
 }
 
-export function AgentComposerBar({ projectPath, value, onChange, onProviderCommandsChange, connected }: Props) {
+// Relative-time formatter for the resumed-chip title (e.g. "3m ago").
+function relativeTime(iso: string | null): string {
+  if (!iso) return 'unknown';
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return 'unknown';
+  const diffMs = Date.now() - then;
+  if (diffMs < 0) return 'just now';
+  const sec = Math.floor(diffMs / 1000);
+  if (sec < 60) return 'just now';
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  return `${day}d ago`;
+}
+
+export function AgentComposerBar({ projectPath, value, onChange, onProviderCommandsChange, connected, sessionId, hasPriorTurn }: Props) {
   const allEntries = useProviderSnapshot(projectPath);
   // 5.5 — the composer picker only offers ENABLED providers that are ready (or
   // still loading). Disabled (enabled:false) and unavailable/error providers are
@@ -186,6 +214,13 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
   );
   const [refreshing, setRefreshing] = useState(false);
 
+  // v2.6 Phase 1-UX §9b: chat-scoped agent-session rows for the resumed/new
+  // chip. Hook is unconditional (hooks rule); it self-no-ops when sessionId is
+  // undefined or the chat has no prior turn, so BooChat callers cost nothing.
+  const { sessions: agentSessions } = useAgentSessions(
+    sessionId && hasPriorTurn ? sessionId : undefined,
+  );
+
   const hydratedRef = useRef(false);
 
   useEffect(() => {
@@ -294,21 +329,30 @@ 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 }));
   const thinkingOpts = thinkingOptions.map((t) => ({ id: t.id, label: t.label }));
 
+  // v2.6 Phase 1-UX §9b: resumed / history / new-session chip. Only meaningful
+  // when this is a real chat (sessionId), the WS is connected, and the chat has
+  // ≥1 prior turn — otherwise render nothing so fresh chats and non-coder
+  // callers stay clean.
+  const sessionRow = agentSessions.find((s) => s.agent === value.provider);
+  const sessionChip: { label: string; title: string } | null =
+    sessionId && hasPriorTurn && connected
+      ? value.provider === 'boocode'
+        ? // Native boocode never holds an agent_sessions row — it reconstructs
+          // the conversation from the chat transcript each turn.
+          { label: 'history', title: 'BooCode replays the chat transcript each turn' }
+        : sessionRow?.has_session
+          ? {
+              label: 'resumed',
+              title: `Resuming ${value.provider} · last active ${relativeTime(sessionRow.last_active_at)}`,
+            }
+          : { label: 'new session', title: `${value.provider} starts a fresh session this turn` }
+      : null;
+
   return (
     <div className="flex flex-wrap items-center gap-1 px-2 py-1 border-b border-border bg-muted/20 shrink-0">
       <CompactPicker
@@ -322,6 +366,14 @@ export function AgentComposerBar({ projectPath, value, onChange, onProviderComma
             : providerIcon(value.provider)
         }
       />
+      {sessionChip && (
+        <span
+          title={sessionChip.title}
+          className="inline-flex items-center rounded-full border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shrink-0"
+        >
+          {sessionChip.label}
+        </span>
+      )}
       <CompactPicker
         label="Mode"
         value={value.modeId ?? ''}