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>
This commit is contained in:
@@ -16,6 +16,8 @@ import { toast } from 'sonner';
|
||||
import { isSlashCommandToken, mergeCommandsByName, parseSlashInput, slashQuery } from '@/lib/slash-command';
|
||||
import { mergeWireToolCall } from '@/lib/coder-tools';
|
||||
import { CoderMessageList, type CoderTimelineWire } from '@/components/panes/CoderMessageList';
|
||||
import { providerIcon, providerLabel } from '@/components/coder/providerIcons';
|
||||
import { refreshAgentSessions } from '@/hooks/useAgentSessions';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -56,6 +58,10 @@ interface PendingChange {
|
||||
diff?: string;
|
||||
new_content?: string;
|
||||
status: 'pending' | 'approved' | 'rejected';
|
||||
// v2.6 Phase 1-UX §9a: which agent staged this change. 'boocode' for native
|
||||
// write tools, the dispatched agent for worktree edits, null for a manual
|
||||
// RightRail-staged create (renders as a neutral "manual" badge).
|
||||
agent: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@@ -394,6 +400,15 @@ function DiffPanel({
|
||||
}) {
|
||||
const pending = changes.filter((c) => c.status === 'pending');
|
||||
|
||||
// v2.6 Phase 1-UX §9a: when pending changes span >1 distinct agent, surface a
|
||||
// one-line "Changes from <a>, <b>" note so mixed provenance is obvious. Null
|
||||
// (manual) counts as its own bucket and renders as "manual".
|
||||
const distinctAgents = Array.from(new Set(pending.map((c) => c.agent)));
|
||||
const mixedNote =
|
||||
distinctAgents.length > 1
|
||||
? `Changes from ${distinctAgents.map((a) => providerLabel(a)).join(', ')}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full border-t border-border">
|
||||
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-muted/30">
|
||||
@@ -410,6 +425,11 @@ function DiffPanel({
|
||||
<RefreshCw size={12} className={loading ? 'animate-spin' : ''} />
|
||||
</button>
|
||||
</div>
|
||||
{mixedNote && (
|
||||
<div className="px-3 py-1 border-b border-border bg-muted/10 text-[11px] text-muted-foreground truncate">
|
||||
{mixedNote}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{pending.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-full text-sm text-muted-foreground">
|
||||
@@ -420,14 +440,25 @@ function DiffPanel({
|
||||
{pending.map((change) => (
|
||||
<div key={change.id} className="px-3 py-2">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-mono text-foreground truncate flex-1 mr-2">
|
||||
<span className="text-xs font-mono text-foreground truncate flex-1 mr-2 inline-flex items-center min-w-0">
|
||||
<span
|
||||
className="inline-flex items-center gap-1 rounded border border-border bg-muted/40 px-1 py-px mr-1.5 text-[10px] font-medium text-muted-foreground shrink-0"
|
||||
title={
|
||||
change.agent === null
|
||||
? 'Manually staged (no dispatching agent)'
|
||||
: `Staged by ${providerLabel(change.agent)}`
|
||||
}
|
||||
>
|
||||
{providerIcon(change.agent, 11)}
|
||||
<span>{providerLabel(change.agent)}</span>
|
||||
</span>
|
||||
<span className={cn(
|
||||
'inline-block w-1.5 h-1.5 rounded-full mr-1.5',
|
||||
'inline-block w-1.5 h-1.5 rounded-full mr-1.5 shrink-0',
|
||||
change.operation === 'create' && 'bg-green-500',
|
||||
change.operation === 'modify' && 'bg-yellow-500',
|
||||
change.operation === 'delete' && 'bg-red-500',
|
||||
)} />
|
||||
{change.file_path}
|
||||
<span className="truncate">{change.file_path}</span>
|
||||
</span>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<button
|
||||
@@ -586,15 +617,24 @@ export function CoderPane({
|
||||
// dispatch returns — so queueing/stop must key on this combined signal.
|
||||
const generating = sending || activeTaskId !== null;
|
||||
|
||||
// Refresh pending changes when a message_complete arrives
|
||||
// Refresh pending changes (and agent-session state for the §9b chip) when a
|
||||
// message_complete arrives — same trigger usePendingChanges already uses.
|
||||
useEffect(() => {
|
||||
const lastAssistant = [...messages].reverse().find(
|
||||
(m): m is CoderMessage => m.role === 'assistant',
|
||||
);
|
||||
if (lastAssistant?.status === 'complete') {
|
||||
refresh();
|
||||
void refreshAgentSessions(sessionId);
|
||||
}
|
||||
}, [messages, refresh]);
|
||||
}, [messages, refresh, sessionId]);
|
||||
|
||||
// The §9b chip only shows once the chat has ≥1 prior turn (a completed
|
||||
// assistant message). Hidden on a brand-new chat.
|
||||
const hasPriorTurn = useMemo(
|
||||
() => messages.some((m) => m.role === 'assistant' && (m as CoderMessage).status === 'complete'),
|
||||
[messages],
|
||||
);
|
||||
|
||||
// Poll fallbacks when WS is disconnected (reconnect uses WS as source of truth)
|
||||
useEffect(() => {
|
||||
@@ -834,6 +874,8 @@ export function CoderPane({
|
||||
onChange={setAgentConfig}
|
||||
onProviderCommandsChange={handleProviderCommandsChange}
|
||||
connected={connected}
|
||||
sessionId={sessionId}
|
||||
hasPriorTurn={hasPriorTurn}
|
||||
/>
|
||||
{/* Chat area — BooChat-style timeline (text + tool runs as siblings) */}
|
||||
<div className="flex-1 min-h-0 flex flex-col">
|
||||
|
||||
Reference in New Issue
Block a user