Miguel PalhasandClaude Opus 4.6
2724447a51
The collapsed tool group now reads "N tool calls · Label 'arg'" so the operator sees the current command at a glance. While a turn is active, the most recent agent text stays outside the group as visible narration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
// A turn's collapsed activity block: two or more tool rows after the same
|
||
// `User` row, plus the narration absorbed between them. The header counts tool
|
||
// rows only (docs/STRUCTURED-VIEW.md) and shows the last/current tool label so
|
||
// the operator sees activity at a glance without expanding. Opening it reveals
|
||
// tools and text in chronological order.
|
||
|
||
import type { ReactNode } from "react";
|
||
|
||
export interface ToolGroupProps {
|
||
id: string;
|
||
toolCount: number;
|
||
/** Label of the last (or running) tool, e.g. "Execute". */
|
||
lastToolLabel: string;
|
||
/** Argument of the last tool, e.g. "`git status`". */
|
||
lastToolArg: string;
|
||
expanded: boolean;
|
||
onExpandedChange(expanded: boolean): void;
|
||
children: ReactNode;
|
||
}
|
||
|
||
export function ToolGroup({ id, toolCount, lastToolLabel, lastToolArg, expanded, onExpandedChange, children }: ToolGroupProps) {
|
||
const summary = lastToolArg
|
||
? `${toolCount} tool calls · ${lastToolLabel} \u2018${lastToolArg}\u2019`
|
||
: `${toolCount} tool calls`;
|
||
return (
|
||
<div className="st-tool-group" data-tool-group-id={id}>
|
||
<button
|
||
type="button"
|
||
className="st-tool-group-head"
|
||
aria-expanded={expanded}
|
||
onClick={() => onExpandedChange(!expanded)}
|
||
>
|
||
<span className="st-tool-group-glyph" aria-hidden="true">
|
||
›
|
||
</span>
|
||
<span className="st-tool-group-title">{summary}</span>
|
||
</button>
|
||
<div
|
||
className={
|
||
expanded ? "st-tool-group-body st-disclosure is-expanded" : "st-tool-group-body st-disclosure"
|
||
}
|
||
aria-hidden={!expanded}
|
||
inert={!expanded}
|
||
>
|
||
<div className="st-disclosure-clip">
|
||
<div className="st-disclosure-inner">{children}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|