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

16
apps/web/src/api/client.ts
View File

@@ -25,6 +25,17 @@ import type {
WorkspaceState,
} from './types';
// v2.6 Phase 1-UX §9b: chat-scoped agent-session rows. Returned by
// GET /api/coder/sessions/:id/agent-sessions; drives the AgentComposerBar
// resumed/new-session chip via useAgentSessions. `has_session` is true when a
// resumable backend session id exists for that agent in the chat.
export interface AgentSessionInfo {
agent: string;
status: string;
has_session: boolean;
last_active_at: string | null;
}
export class ApiError extends Error {
constructor(
public status: number,
@@ -363,6 +374,11 @@ export const api = {
request<CoderMessageWire[]>(
`/api/coder/sessions/${sessionId}/messages${chatId ? `?chat_id=${encodeURIComponent(chatId)}` : ''}`,
),
// v2.6 Phase 1-UX §9b: per-(chat,agent) backend-session state for the
// resumed/new-session chip. Chat-scoped (NOT foldable into the project-level
// provider snapshot). Proxied to boocoder at /api/sessions/:id/agent-sessions.
agentSessions: (sessionId: string) =>
request<AgentSessionInfo[]>(`/api/coder/sessions/${sessionId}/agent-sessions`),
skillInvoke: (
sessionId: string,
paneId: string,

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

88
apps/web/src/hooks/useAgentSessions.ts Normal file
View File

@@ -0,0 +1,88 @@
// v2.6 Phase 1-UX §9b — chat-scoped agent-session state.
//
// Reads GET /api/coder/sessions/:id/agent-sessions (the per-(chat,agent)
// backend-session rows) and drives the AgentComposerBar resumed/new-session
// chip. Module-singleton external store keyed by sessionId — same shape as
// useProviderSnapshot — so the two consumers (CoderPane, which owns the
// message_complete WS signal, and AgentComposerBar, which renders the chip)
// share one cache and one fetch per chat. CoderPane calls
// refreshAgentSessions(sessionId) on each message_complete (the same trigger
// usePendingChanges already keys off); the chip then reflects the freshly
// resumed/created session.
import { useEffect, useSyncExternalStore } from 'react';
import { api, type AgentSessionInfo } from '@/api/client';
type Entry = {
data: AgentSessionInfo[];
inflight: Promise<AgentSessionInfo[]> | null;
};
const store = new Map<string, Entry>();
const listeners = new Set<() => void>();
const EMPTY: AgentSessionInfo[] = [];
function notify(): void {
for (const fn of listeners) fn();
}
function subscribe(fn: () => void): () => void {
listeners.add(fn);
return () => listeners.delete(fn);
}
function getEntry(sessionId: string): Entry {
let entry = store.get(sessionId);
if (!entry) {
entry = { data: EMPTY, inflight: null };
store.set(sessionId, entry);
}
return entry;
}
async function doFetch(sessionId: string): Promise<AgentSessionInfo[]> {
const data = await api.coder.agentSessions(sessionId);
const entry = getEntry(sessionId);
entry.data = data;
entry.inflight = null;
notify();
return data;
}
function ensureLoaded(sessionId: string): void {
const entry = getEntry(sessionId);
if (entry.data !== EMPTY || entry.inflight) return;
entry.inflight = doFetch(sessionId).catch(() => {
// boocoder may be down or the chat has no agent-session rows yet; treat as
// empty (the chip falls back to "new session" / hides).
const e = getEntry(sessionId);
e.inflight = null;
return EMPTY;
});
}
/** Force a refetch for one chat. Wired to message_complete by CoderPane. */
export function refreshAgentSessions(sessionId: string): Promise<AgentSessionInfo[]> {
const entry = getEntry(sessionId);
entry.inflight = null;
return doFetch(sessionId);
}
/**
* Chat-scoped agent-session rows. Pass `undefined` to opt out (no fetch, empty
* result) — AgentComposerBar does this for BooChat callers and fresh chats so
* the chip stays hidden. Fetches on mount (and on sessionId change); refetch on
* message_complete is driven externally via refreshAgentSessions.
*/
export function useAgentSessions(sessionId: string | undefined): {
sessions: AgentSessionInfo[];
} {
const sessions = useSyncExternalStore(
subscribe,
() => (sessionId ? getEntry(sessionId).data : EMPTY),
);
useEffect(() => {
if (sessionId) ensureLoaded(sessionId);
}, [sessionId]);
return { sessions: sessionId ? sessions : EMPTY };
}