subagent-tool

1import { memo, useEffect, useState } from "react";
2import { toolRegistry } from "./tool-registry";
3import { GenericTool } from "./generic-tool";
4import { getToolStatus } from "../utils/format-tool";
5import { cn } from "../utils/cn";
6import { ToolRowBase } from "./tool-row-base";
7 
8export type SubagentToolProps = {
9  part: any;
10  nestedTools?: any[];
11  chatStatus?: string;
12};
13 
14const MAX_VISIBLE_TOOLS = 5;
15 
16function formatElapsedTime(ms: number): string {
17  if (ms < 1000) return "";
18  const seconds = Math.floor(ms / 1000);
19  if (seconds < 60) return `${seconds}s`;
20  const minutes = Math.floor(seconds / 60);
21  const remainingSeconds = seconds % 60;
22  if (remainingSeconds === 0) return `${minutes}m`;
23  return `${minutes}m ${remainingSeconds}s`;
24}
25 
26export const SubagentTool = memo(function SubagentTool({
27  part,
28  nestedTools = [],
29  chatStatus,
30}: SubagentToolProps) {
31  const { isPending, isInterrupted } = getToolStatus(part, chatStatus);
32  const description = part.input?.description || "";
33  const [elapsedMs, setElapsedMs] = useState(0);
34  const startedAt =
35    (part.callProviderMetadata?.custom?.startedAt as number | undefined) ??
36    (part.startedAt as number | undefined);
37  const hasNestedTools = nestedTools.length > 0;
38  const outputDuration =
39    part.output?.totalDurationMs ||
40    part.output?.duration ||
41    part.output?.duration_ms;
42 
43  useEffect(() => {
44    if (isPending && startedAt) {
45      setElapsedMs(Date.now() - startedAt);
46      const interval = setInterval(() => {
47        setElapsedMs(Date.now() - startedAt);
48      }, 1000);
49      return () => clearInterval(interval);
50    }
51  }, [isPending, startedAt]);
52 
53  const subtitle = (() => {
54    if (isPending && hasNestedTools) {
55      const lastTool = nestedTools[nestedTools.length - 1];
56      const meta = lastTool ? toolRegistry[lastTool.type] : null;
57      if (meta) {
58        const title = meta.title(lastTool);
59        const subtitle = meta.subtitle?.(lastTool);
60        return subtitle ? `${title} ${subtitle}` : title;
61      }
62    }
63 
64    if (!description) return "";
65    return description.length > 60
66      ? `${description.slice(0, 57)}...`
67      : description;
68  })();
69  const elapsedTimeDisplay = formatElapsedTime(
70    !isPending && outputDuration ? outputDuration : elapsedMs,
71  );
72 
73  if (isInterrupted && !part.output) {
74    return (
75      <ToolRowBase completeLabel="Subagent interrupted" isAnimating={false} />
76    );
77  }
78 
79  return (
80    <div className="an-tool-task">
81      <ToolRowBase
82// … truncated