indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
indifferentketchup
2026-05-31 22:07:26 +00:00
parent c060778258
commit 5db6551361
5 changed files with 272 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/web/src/components/AgentComposerBar.tsx
View File

@@ -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 ?? ''}

56
apps/web/src/components/coder/providerIcons.tsx Normal file
View File

@@ -0,0 +1,56 @@
// Shared provider icon + label helpers for BooCoder UI.
//
// Single source of truth for the per-provider glyph used in the
// AgentComposerBar picker and the CoderPane DiffPanel agent-attribution
// badges (v2.6 Phase 1-UX §9a/§9b). Extracted from AgentComposerBar's local
// `providerIcon` switch so both call sites stay in sync.
import type { ReactNode } from 'react';
import { Bird, Dog, Terminal as TermIcon } from 'lucide-react';
import { ClaudeIcon, OpenCodeIcon } from '@/components/icons/ProviderIcons';
/**
* Glyph for a provider/agent name. Mirrors AgentComposerBar's original
* `providerIcon` switch verbatim — `boocode` (native) falls through to the
* neutral dog like any unmapped name, preserving the composer's prior look.
* Sized to match the picker (13px) by default; pass a different size for
* inline badges.
*/
export function providerIcon(name: string | null, size = 13): ReactNode {
switch (name) {
case 'claude':
return <ClaudeIcon size={size} className="shrink-0" />;
case 'opencode':
return <OpenCodeIcon size={size} className="shrink-0" />;
case 'goose':
return <Bird size={size} className="shrink-0" />;
case 'qwen':
return <TermIcon size={size} className="shrink-0" />;
default:
return <Dog size={size} className="shrink-0" />;
}
}
/**
* Human label for a provider/agent name. `null` → "manual" (a RightRail-staged
* change with no dispatching agent, per §9a). Unknown names pass through
* verbatim so a future provider still reads sensibly.
*/
export function providerLabel(name: string | null): string {
switch (name) {
case null:
return 'manual';
case 'boocode':
return 'BooCode';
case 'opencode':
return 'opencode';
case 'claude':
return 'Claude';
case 'goose':
return 'goose';
case 'qwen':
return 'Qwen';
default:
return name;
}
}

52
apps/web/src/components/panes/CoderPane.tsx
View File

@@ -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">