Function ToolInvocation

src/components/tool-invocation.tsx:324–616

({ invocation }: { invocation: BaseToolInvocation })

// Main component
export function ToolInvocation({ invocation }: { invocation: BaseToolInvocation }) {
  const [isOpen, setIsOpen] = useState(true);
  const [progressMessages, setProgressMessages] = useState<ProgressMessage[]>([]);
  const progressEndRef = useRef<HTMLDivElement>(null);
  const seenProgressMessagesRef = useRef<Set<string>>(new Set());

  // Memoize input hash to prevent reconnecting SSE on every render
  const inputHash = useMemo(() => {
    return JSON.stringify(invocation.input);
  }, [invocation.input]);

  const isComplete = invocation.state === "output-available";

  // Extract tool name from type (e.g., "tool-projectRetrieval" -> "projectRetrieval")
  // or use toolName if available
  const toolName = invocation.toolName ||
    (typeof invocation.type === "string" && invocation.type.startsWith("tool-")
      ? invocation.type.substring(5)
      : "unknown");

  // Format tool name for display
  const displayName = toolName
    .replace(/([A-Z])/g, " $1")
    .replace(/^./, (str) => str.toUpperCase())
    .trim();

  // Connect to SSE for progress updates (experimentCodeUpdate only)
  useEffect(() => {
    if (toolName !== "experimentCodeUpdate" || isComplete) {
      return;
    }

    let eventSource: EventSource | null = null;

    const setupSSE = async () => {
      try {
        // Calculate input hash (using memoized inputHash to avoid recalculating)
        const encoder = new TextEncoder();
        const data = encoder.encode(inputHash);
        const hashBuffer = await crypto.subtle.digest("SHA-256", data);
        const hashArray = Array.from(new Uint8Array(hashBuffer));
        const sha256Hash = hashArray.map(b => b.toString(16).padStart(2, "0")).join("");

        // Poll for execution ID
        const pollForExecutionId = async (): Promise<string | null> => {
          const maxAttempts = 10;
          let attempts = 0;

          while (attempts < maxAttempts) {
            try {
              const response = await fetch("/api/experiment-progress", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ inputHash: sha256Hash }),
              });

              if (response.ok) {
                const data = await response.json();