Tool Invocation UI

1/**
2 * ToolInvocation Primitive
3 * 
4 * Displays a single tool invocation with collapsible details, widget support,
5 * and task output for app tools.
6 */
7 
8import React, { memo, useState, useMemo, useCallback } from 'react';
9import { cn } from '@/lib/utils';
10import { MessageCircleCode, CheckCircle2, XCircle, Clock, AlertCircle, CheckCircle, CircleDashed } from 'lucide-react';
11import { Spinner } from '@/components/ui/spinner';
12import { Button } from '@/components/ui/button';
13import { CollapsibleSection } from '@/components/ui/collapsible-section';
14import {
15  ToolInvocationStatusPending,
16  ToolInvocationStatusInProgress,
17  ToolInvocationStatusAwaitingInput,
18  ToolInvocationStatusAwaitingApproval,
19  ToolInvocationStatusCompleted,
20  ToolInvocationStatusFailed,
21  ToolInvocationStatusCancelled,
22  ToolTypeApp,
23  ToolInvocationDTO,
24  FileRef
25} from '@inferencesh/sdk';
26import { useAgentActions, useAgentClient } from '@inferencesh/sdk/agent';
27import { WidgetRenderer } from '@/components/infsh/agent/widget-renderer';
28import { parseWidget, type WidgetAction, type WidgetFormData } from '@/components/infsh/agent/widget-types';
29import { TaskOutputWrapper } from '@/components/infsh/task/task-output-wrapper';
30import { IntegrationRequirementCard } from '@/components/infsh/agent/integration-requirement-card';
31import { Markdown } from '@/lib/pretext-md/react';
32 
33// Tool finish constants
34const ToolFinishStatusSucceeded = 'succeeded';
35const ToolFinishStatusFailed = 'failed';
36const ToolFinishStatusCancelled = 'cancelled';
37 
38// Types
39interface ToolFinish {
40  status: string;
41  result?: unknown;
42  error?: string;
43}
44 
45interface ToolInvocationProps {
46  invocation: ToolInvocationDTO;
47  className?: string;
48  defaultOpen?: boolean;
49}
50 
51// ============================================================================
52// Finish Block - Special display for finish tool marking end of chat
53// ============================================================================
54 
55const FinishBlock = memo(function FinishBlock({
56  finish,
57  isActive = false,
58}: {
59  finish?: ToolFinish | null
60  isActive?: boolean
61}) {
62  const getStatusIcon = () => {
63    if (isActive) {
64      return <Spinner className="size-3.5" />
65    }
66    switch (finish?.status) {
67      case ToolFinishStatusSucceeded:
68        return <CheckCircle className="h-3.5 w-3.5 text-emerald-400" />
69      case ToolFinishStatusFailed:
70        return <XCircle className="h-3.5 w-3.5 text-red-400" />
71      case ToolFinishStatusCancelled:
72// … truncated