bash-tool

1import { memo } from "react";
2import { TextShimmer } from "../text-shimmer";
3import type { TimelineStep, StepState } from "../types/timeline";
4import { useToolComplete } from "../hooks/use-tool-complete";
5import {
6  mapToolInvocationToStep,
7  mapToolStateToStepState,
8} from "../utils/tool-adapters";
9import { ToolApprovalFooter, type ToolApproval } from "./tool-approval-footer";
10 
11function extractCommandSummary(cmd: string): string {
12  return cmd
13    .split("|")
14    .map((s) => s.trim().split(/\s+/)[0] ?? "")
15    .filter(Boolean)
16    .slice(0, 4)
17    .join(", ");
18}
19 
20export type BashToolTerminalCardProps = {
21  step: Extract<TimelineStep, { type: "tool-call" }>;
22  state: StepState;
23  onComplete: () => void;
24  approval?: ToolApproval;
25};
26 
27export function BashToolTerminalCard({
28  step,
29  state,
30  onComplete,
31  approval,
32}: BashToolTerminalCardProps) {
33  useToolComplete(state === "animating", step.duration, onComplete);
34  const isPending = state === "animating";
35  const command = step.bashCommand ?? step.toolDetail;
36  const summary = extractCommandSummary(command);
37 
38  return (
39    <div className="rounded-an-tool-border-radius border border-border bg-an-tool-background overflow-hidden">
40      <div className="flex items-center justify-between pl-2.5 pr-2 h-7">
41        <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
42          {isPending ? (
43            <TextShimmer
44              as="span"
45              duration={1.2}
46              className="inline-flex items-center text-xs leading-none h-full m-0 truncate"
47            >
48              Running command: {summary}
49            </TextShimmer>
50          ) : (
51            <span className="text-xs text-muted-foreground truncate">
52              Ran command: {summary}
53            </span>
54          )}
55        </div>
56        {isPending && (
57          <svg
58            className="w-3 h-3 text-muted-foreground animate-spin shrink-0"
59            viewBox="0 0 16 16"
60            fill="none"
61          >
62            <circle
63              cx="8"
64              cy="8"
65              r="6"
66              stroke="currentColor"
67              strokeWidth="1.5"
68              strokeDasharray="28"
69              strokeDashoffset="7"
70              strokeLinecap="round"
71            />
72          </svg>
73        )}
74      </div>
75      <div className="border-t border-border px-2.5 py-1.5 font-mono text-[12px] leading-[16px] overflow-hidden bg-background">
76        <div className="break-all">
77// … truncated