wuxu/codeg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add dedicated Agent subagent rendering with nested tool call display

Browse Source 
Render Agent/Explore/Plan tool calls in a visually distinct collapsible
container with colored left border, replacing the generic tool card. Parse
subagent JSONL transcripts from {sessionId}/subagents/ to extract and
display the actual tool calls (Bash, Read, Grep, etc.) the subagent
executed, reusing the existing ToolCallPart for consistent appearance.

- Add AgentToolCallPart component with collapsible body, prompt section,
  execution stats, and nested tool call list via render prop injection
- Add AgentExecutionStats and AgentToolCall types (Rust + TypeScript)
- Parse toolUseResult.agentId to locate and read subagent JSONL files
- Validate agentId against path traversal before filesystem access
- Pass agentStats through adapter for both ID-matched and positional
  tool result pairing
- Strip agentStats in nested render to prevent recursive Agent expansion
- Add i18n keys for agent UI labels across all 10 languages
This commit is contained in:
xintaofei
2026-04-16 21:32:25 +08:00
parent ffdc0019fc
commit 9f82fdf350
22 changed files with 634 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/components/message/agent-tool-call.tsx Normal file
View File

@@ -0,0 +1,269 @@
import { memo, useMemo, useState, type ReactNode } from "react"
import type { AdaptedContentPart } from "@/lib/adapters/ai-elements-adapter"
import type { AgentToolCall } from "@/lib/types"
import { tryParseJson, extractJsonField } from "./content-parts-renderer"
import { MessageResponse } from "@/components/ai-elements/message"
import { Shimmer } from "@/components/ai-elements/shimmer"
import { getStatusBadge } from "@/components/ai-elements/tool"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { cn } from "@/lib/utils"
import {
ChevronDownIcon,
ChevronRightIcon,
CompassIcon,
MapIcon,
TerminalIcon,
WrenchIcon,
} from "lucide-react"
import { useTranslations } from "next-intl"
// ── helpers ────────────────────────────────────────────────────────────
const ICON_CLASS = "size-4 text-muted-foreground"
function getAgentIcon(subagentType: string | null) {
const t = subagentType?.toLowerCase() ?? ""
if (t.includes("explore")) return <CompassIcon className={ICON_CLASS} />
if (t.includes("plan")) return <MapIcon className={ICON_CLASS} />
if (t.includes("bash")) return <TerminalIcon className={ICON_CLASS} />
return <WrenchIcon className={ICON_CLASS} />
}
function getAccentColor(subagentType: string | null): string {
const t = subagentType?.toLowerCase() ?? ""
if (t.includes("explore"))
return "border-l-blue-500/50 dark:border-l-blue-400/40"
if (t.includes("plan"))
return "border-l-amber-500/50 dark:border-l-amber-400/40"
if (t.includes("bash"))
return "border-l-green-500/50 dark:border-l-green-400/40"
return "border-l-purple-500/50 dark:border-l-purple-400/40"
}
function formatDuration(ms: number): string {
if (ms < 1000) return `${ms}ms`
const sec = ms / 1000
if (sec < 60) return `${sec.toFixed(1)}s`
return `${(sec / 60).toFixed(1)}m`
}
/** Convert AgentToolCall[] to AdaptedContentPart[] for reuse with ToolCallPart */
function adaptToolCalls(
calls: AgentToolCall[],
parentId: string
): AdaptedContentPart[] {
return calls.map(
(call, i): Extract<AdaptedContentPart, { type: "tool-call" }> => ({
type: "tool-call",
toolCallId: `${parentId}-sub-${i}`,
toolName: call.tool_name,
input: call.input_preview ?? null,
state: call.is_error ? "output-error" : "output-available",
output: call.output_preview ?? null,
errorText: call.is_error ? (call.output_preview ?? undefined) : undefined,
})
)
}
// ── main component ────────────────────────────────────────────────────
export const AgentToolCallPart = memo(function AgentToolCallPart({
part,
renderToolCall,
}: {
part: Extract<AdaptedContentPart, { type: "tool-call" }>
/** Render a single tool-call part — injected by the parent to avoid
* circular imports (content-parts-renderer → agent-tool-call → renderer). */
renderToolCall: (
part: Extract<AdaptedContentPart, { type: "tool-call" }>,
key: string
) => ReactNode
}) {
const t = useTranslations("Folder.chat.contentParts")
const tTool = useTranslations("Folder.chat.tool")
const isRunning =
part.state === "input-available" || part.state === "input-streaming"
const isError = part.state === "output-error"
const [bodyOpen, setBodyOpen] = useState(isRunning || isError)
const [promptOpen, setPromptOpen] = useState(false)
const parsed = useMemo(
() => (part.input ? tryParseJson(part.input) : null),
[part.input]
)
const subagentType = useMemo(
() =>
(parsed?.subagent_type as string | undefined) ??
(part.input ? extractJsonField(part.input, "subagent_type") : null),
[parsed, part.input]
)
const description = useMemo(
() =>
(parsed?.description as string | undefined) ??
(part.input ? extractJsonField(part.input, "description") : null),
[parsed, part.input]
)
const prompt = useMemo(
() =>
(parsed?.prompt as string | undefined) ??
(part.input ? extractJsonField(part.input, "prompt") : null),
[parsed, part.input]
)
const model = useMemo(
() =>
(parsed?.model as string | undefined) ??
(part.input ? extractJsonField(part.input, "model") : null),
[parsed, part.input]
)
const icon = useMemo(() => getAgentIcon(subagentType), [subagentType])
const accentColor = useMemo(
() => getAccentColor(subagentType),
[subagentType]
)
const title = useMemo(() => {
const prefix = subagentType ?? "Agent"
return description ? `${prefix}: ${description}` : prefix
}, [subagentType, description])
const statusLabel =
part.state === "input-available"
? tTool("status.inputAvailable")
: part.state === "input-streaming"
? tTool("status.inputStreaming")
: part.state === "output-available"
? tTool("status.outputAvailable")
: tTool("status.outputError")
const agentStats = part.agentStats ?? null
const adaptedToolCalls = useMemo(
() => adaptToolCalls(agentStats?.tool_calls ?? [], part.toolCallId),
[agentStats?.tool_calls, part.toolCallId]
)
const durationSuffix = useMemo(() => {
if (!agentStats?.total_duration_ms) return null
return formatDuration(agentStats.total_duration_ms)
}, [agentStats])
return (
<Collapsible open={bodyOpen} onOpenChange={setBodyOpen}>
<div
className={cn(
"rounded-md border border-border/60 bg-muted/20 overflow-hidden",
"border-l-[3px]",
accentColor
)}
>
{/* Header — clickable to toggle body */}
<CollapsibleTrigger className="flex w-full min-w-0 items-center justify-between gap-3 px-4 py-3">
<div className="flex min-w-0 items-center gap-2">
<span className="shrink-0">{icon}</span>
<span className="min-w-0 flex-1 truncate whitespace-nowrap text-sm font-medium text-left">
{title}
</span>
{!bodyOpen && durationSuffix && (
<span className="shrink-0 text-xs text-muted-foreground/60">
{durationSuffix}
</span>
)}
</div>
<div className="flex shrink-0 items-center gap-2">
{getStatusBadge(part.state, statusLabel)}
<ChevronDownIcon
className={cn(
"size-4 text-muted-foreground transition-transform",
!bodyOpen && "-rotate-90"
)}
/>
</div>
</CollapsibleTrigger>
{/* Collapsible body */}
<CollapsibleContent>
<div className="space-y-3 px-4 pb-4">
{/* Model + duration summary */}
{(model || durationSuffix) && (
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
{model && (
<span>
{t("agentModelLabel")}:{" "}
<span className="font-mono">{model}</span>
</span>
)}
{durationSuffix && <span>{durationSuffix}</span>}
</div>
)}
{/* Collapsible prompt */}
{prompt && (
<Collapsible open={promptOpen} onOpenChange={setPromptOpen}>
<CollapsibleTrigger className="flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors">
<ChevronRightIcon
className={cn(
"size-3.5 transition-transform",
promptOpen && "rotate-90"
)}
/>
{t("agentPromptLabel")}
</CollapsibleTrigger>
<CollapsibleContent>
<pre className="mt-2 max-h-64 overflow-y-auto whitespace-pre-wrap break-words rounded-md bg-muted/50 p-3 text-xs text-muted-foreground">
{prompt}
</pre>
</CollapsibleContent>
</Collapsible>
)}
{/* Subagent tool calls — rendered with the same ToolCallPart
as the outer conversation for consistent appearance */}
{adaptedToolCalls.length > 0 && (
<div className="space-y-2">
{adaptedToolCalls.map((tc, i) =>
renderToolCall(
tc as Extract<AdaptedContentPart, { type: "tool-call" }>,
`subagent-tc-${i}`
)
)}
</div>
)}
{/* Running indicator */}
{isRunning && !part.output && (
<Shimmer className="text-sm" duration={2}>
Running...
</Shimmer>
)}
{/* Error output */}
{isError && part.errorText && (
<div className="rounded-md bg-destructive/10 p-3">
<pre className="whitespace-pre-wrap break-words text-xs text-destructive">
{part.errorText}
</pre>
</div>
)}
{/* Final output */}
{part.output && (
<div className="text-sm prose prose-sm dark:prose-invert max-w-none [&_ul]:list-inside [&_ol]:list-inside">
<MessageResponse>{part.output}</MessageResponse>
</div>
)}
</div>
</CollapsibleContent>
</div>
</Collapsible>
)
})

23
src/components/message/content-parts-renderer.tsx
View File

@@ -23,6 +23,7 @@ import {
ReasoningTrigger,
ReasoningContent,
} from "@/components/ai-elements/reasoning"
import { AgentToolCallPart } from "./agent-tool-call"
import {
FileTextIcon,
FilePenLineIcon,
@@ -45,7 +46,7 @@ import {
// ── helpers ────────────────────────────────────────────────────────────
/** Try JSON.parse; return null on failure. */
function tryParseJson(s: string): Record<string, unknown> | null {
export function tryParseJson(s: string): Record<string, unknown> | null {
try {
const v = JSON.parse(s)
return typeof v === "object" && v !== null && !Array.isArray(v) ? v : null
@@ -55,7 +56,7 @@ function tryParseJson(s: string): Record<string, unknown> | null {
}
/** Regex-extract a JSON string value for a given key (works on truncated JSON). */
function extractJsonField(input: string, key: string): string | null {
export function extractJsonField(input: string, key: string): string | null {
const re = new RegExp(`"${key}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)"`)
const m = input.match(re)
return m?.[1]?.replace(/\\"/g, '"').replace(/\\\\/g, "\\") ?? null
@@ -191,7 +192,7 @@ function shortPath(p: string): string {
}
/** Truncate text to maxLen, appending "…" if truncated. */
function ellipsis(s: string, maxLen: number): string {
export function ellipsis(s: string, maxLen: number): string {
return s.length > maxLen ? s.slice(0, maxLen - 1) + "…" : s
}
@@ -2240,6 +2241,19 @@ const ToolCallPart = memo(function ToolCallPart({
toolNameLower === "exitplanmode" ||
isFileTool) &&
!part.errorText
// Agent/subagent tools get a dedicated container rendering
if (toolNameLower === "agent") {
return (
<AgentToolCallPart
part={part}
renderToolCall={(p, key) => (
// Strip agentStats to prevent recursive Agent nesting
<ToolCallPart key={key} part={{ ...p, agentStats: undefined }} />
)}
/>
)
}
// Cline: attempt_completion — render as an expanded card with result + progress
if (toolNameLower === "attempt_completion") {
const parsedCompletion = tryParseJson(part.input ?? "")
@@ -2297,8 +2311,7 @@ const ToolCallPart = memo(function ToolCallPart({
output={part.output}
/>
)}
{(toolNameLower === "task" || toolNameLower === "agent") &&
part.output ? (
{toolNameLower === "task" && part.output ? (
<div className="text-sm prose prose-sm dark:prose-invert max-w-none [&_ul]:list-inside [&_ol]:list-inside">
<MessageResponse>{part.output}</MessageResponse>
</div>

7
src/i18n/messages/ar.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "الموضوع",
"taskLabel": "المهمة",
"nameLabel": "الاسم:",
"agentPromptLabel": "المطالبة",
"agentModelLabel": "النموذج",
"agentStatsBash": "الأوامر",
"agentStatsRead": "الملفات المقروءة",
"agentStatsSearch": "عمليات البحث",
"agentStatsEdit": "التعديلات",
"agentStatsOther": "أخرى",
"field": {
"file": "ملف",
"notebook": "دفتر",

7
src/i18n/messages/de.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "Betreff",
"taskLabel": "Aufgabe",
"nameLabel": "Bezeichnung:",
"agentPromptLabel": "Eingabe",
"agentModelLabel": "Modell",
"agentStatsBash": "Befehle",
"agentStatsRead": "Dateien gelesen",
"agentStatsSearch": "Suchen",
"agentStatsEdit": "Bearbeitungen",
"agentStatsOther": "Sonstige",
"field": {
"file": "Datei",
"notebook": "Notizbuch",

7
src/i18n/messages/en.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "Subject",
"taskLabel": "Task",
"nameLabel": "Name:",
"agentPromptLabel": "Prompt",
"agentModelLabel": "Model",
"agentStatsBash": "Commands",
"agentStatsRead": "Files read",
"agentStatsSearch": "Searches",
"agentStatsEdit": "Edits",
"agentStatsOther": "Other",
"field": {
"file": "File",
"notebook": "Notebook",

7
src/i18n/messages/es.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "Asunto",
"taskLabel": "Tarea",
"nameLabel": "Nombre:",
"agentPromptLabel": "Instrucción",
"agentModelLabel": "Modelo",
"agentStatsBash": "Comandos",
"agentStatsRead": "Archivos leídos",
"agentStatsSearch": "Búsquedas",
"agentStatsEdit": "Ediciones",
"agentStatsOther": "Otros",
"field": {
"file": "Archivo",
"notebook": "Cuaderno",

7
src/i18n/messages/fr.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "Sujet",
"taskLabel": "Tâche",
"nameLabel": "Nom :",
"agentPromptLabel": "Instruction",
"agentModelLabel": "Modèle",
"agentStatsBash": "Commandes",
"agentStatsRead": "Fichiers lus",
"agentStatsSearch": "Recherches",
"agentStatsEdit": "Modifications",
"agentStatsOther": "Autres",
"field": {
"file": "Fichier",
"notebook": "Carnet",

7
src/i18n/messages/ja.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "件名",
"taskLabel": "タスク",
"nameLabel": "名前:",
"agentPromptLabel": "プロンプト",
"agentModelLabel": "モデル",
"agentStatsBash": "コマンド",
"agentStatsRead": "ファイル読取",
"agentStatsSearch": "検索",
"agentStatsEdit": "編集",
"agentStatsOther": "その他",
"field": {
"file": "ファイル",
"notebook": "ノートブック",

7
src/i18n/messages/ko.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "제목",
"taskLabel": "작업",
"nameLabel": "이름:",
"agentPromptLabel": "프롬프트",
"agentModelLabel": "모델",
"agentStatsBash": "명령",
"agentStatsRead": "파일 읽기",
"agentStatsSearch": "검색",
"agentStatsEdit": "편집",
"agentStatsOther": "기타",
"field": {
"file": "파일",
"notebook": "노트북",

7
src/i18n/messages/pt.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "Assunto",
"taskLabel": "Tarefa",
"nameLabel": "Nome:",
"agentPromptLabel": "Instrução",
"agentModelLabel": "Modelo",
"agentStatsBash": "Comandos",
"agentStatsRead": "Arquivos lidos",
"agentStatsSearch": "Pesquisas",
"agentStatsEdit": "Edições",
"agentStatsOther": "Outros",
"field": {
"file": "Arquivo",
"notebook": "Caderno",

7
src/i18n/messages/zh-CN.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "主题",
"taskLabel": "任务",
"nameLabel": "名称：",
"agentPromptLabel": "提示词",
"agentModelLabel": "模型",
"agentStatsBash": "命令",
"agentStatsRead": "读取文件",
"agentStatsSearch": "搜索",
"agentStatsEdit": "编辑",
"agentStatsOther": "其他",
"field": {
"file": "文件",
"notebook": "笔记本",

7
src/i18n/messages/zh-TW.json
View File

@@ -1703,6 +1703,13 @@
"subjectLabel": "主題",
"taskLabel": "任務",
"nameLabel": "名稱：",
"agentPromptLabel": "提示詞",
"agentModelLabel": "模型",
"agentStatsBash": "命令",
"agentStatsRead": "讀取檔案",
"agentStatsSearch": "搜尋",
"agentStatsEdit": "編輯",
"agentStatsOther": "其他",
"field": {
"file": "檔案",
"notebook": "筆記本",

4
src/lib/adapters/ai-elements-adapter.ts
View File

@@ -3,6 +3,7 @@ import type {
ContentBlock,
MessageRole,
TurnUsage,
AgentExecutionStats,
} from "@/lib/types"
/**
@@ -25,6 +26,7 @@ export type AdaptedContentPart =
state: ToolCallState
output?: string | null
errorText?: string
agentStats?: AgentExecutionStats | null
}
| {
type: "tool-result"
@@ -662,6 +664,7 @@ export function adaptMessageTurn(
errorText: matchedResult.is_error
? matchedResult.output_preview || undefined
: undefined,
agentStats: matchedResult.agent_stats ?? undefined,
})
} else {
// Position-based matching: if this tool_use has no ID, check next block
@@ -687,6 +690,7 @@ export function adaptMessageTurn(
errorText: positionalResult.is_error
? positionalResult.output_preview || undefined
: undefined,
agentStats: positionalResult.agent_stats ?? undefined,
})
} else {
// For live streaming, unmatched tools are still running.

24
src/lib/types.ts
View File

@@ -44,6 +44,29 @@ export interface ConversationSummary {
export type MessageRole = "user" | "assistant" | "system" | "tool"
export interface AgentToolCall {
tool_name: string
input_preview?: string | null
output_preview?: string | null
is_error: boolean
}
export interface AgentExecutionStats {
agent_type?: string | null
status?: string | null
total_duration_ms?: number | null
total_tokens?: number | null
total_tool_use_count?: number | null
read_count?: number | null
search_count?: number | null
bash_count?: number | null
edit_file_count?: number | null
lines_added?: number | null
lines_removed?: number | null
other_tool_count?: number | null
tool_calls?: AgentToolCall[]
}
export type ContentBlock =
| { type: "text"; text: string }
| {
@@ -63,6 +86,7 @@ export type ContentBlock =
tool_use_id: string | null
output_preview: string | null
is_error: boolean
agent_stats?: AgentExecutionStats | null
}
| { type: "thinking"; text: string }