@tangle-network/ui 1.0.0

package/src/run/inline-tool-item.stories.tsx

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InlineToolItem } from './inline-tool-item'
+import type { ToolPart } from '../types/parts'
+
+const NOW = Date.now()
+
+// -- Fixtures --
+
+const bashComplete: ToolPart = {
+  type: 'tool',
+  id: 'tool-bash-1',
+  tool: 'bash',
+  state: {
+    status: 'completed',
+    input: { command: 'pnpm test --run --reporter=verbose' },
+    output: `> test\n\n ✓ src/utils/format.test.ts (4)\n ✓ src/utils/tool-display.test.ts (11)\n\nTest Files  2 passed (2)\n     Tests  15 passed (15)\n  Duration  1.42s`,
+    time: { start: NOW - 3800, end: NOW - 2380 },
+  },
+}
+
+const bashRunning: ToolPart = {
+  type: 'tool',
+  id: 'tool-bash-running',
+  tool: 'bash',
+  state: {
+    status: 'running',
+    input: { command: 'pnpm build' },
+    time: { start: NOW - 4200 },
+  },
+}
+
+const bashError: ToolPart = {
+  type: 'tool',
+  id: 'tool-bash-error',
+  tool: 'bash',
+  state: {
+    status: 'error',
+    input: { command: 'pnpm test --run' },
+    error: 'Process exited with code 1\nTypeError: Cannot read properties of undefined (reading \'map\')\n  at render (src/components/List.tsx:42:18)',
+    time: { start: NOW - 2100, end: NOW - 1600 },
+  },
+}
+
+const readFile: ToolPart = {
+  type: 'tool',
+  id: 'tool-read-1',
+  tool: 'read',
+  state: {
+    status: 'completed',
+    input: { file_path: '/home/user/project/src/components/Button.tsx' },
+    output: `import { cn } from '../lib/utils'\n\nexport function Button({ children, variant = 'default', ...props }) {\n  return (\n    <button className={cn('px-4 py-2 rounded', variant)} {...props}>\n      {children}\n    </button>\n  )\n}`,
+    time: { start: NOW - 1200, end: NOW - 1140 },
+  },
+}
+
+const writeFile: ToolPart = {
+  type: 'tool',
+  id: 'tool-write-1',
+  tool: 'write',
+  state: {
+    status: 'completed',
+    input: {
+      file_path: '/home/user/project/src/utils/format.ts',
+      content: 'export function formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`\n  return `${(ms / 1000).toFixed(1)}s`\n}',
+    },
+    output: 'File written successfully.',
+    time: { start: NOW - 900, end: NOW - 855 },
+  },
+}
+
+const webSearch: ToolPart = {
+  type: 'tool',
+  id: 'tool-web-1',
+  tool: 'web_search',
+  state: {
+    status: 'completed',
+    input: { query: 'vitest mock module typescript best practices 2024' },
+    output: JSON.stringify([
+      { title: 'Vitest Mocking Guide', url: 'https://vitest.dev/guide/mocking', snippet: 'Learn how to mock modules in Vitest...' },
+      { title: 'Testing Library Best Practices', url: 'https://testing-library.com/docs/', snippet: 'Avoid implementation details...' },
+    ]),
+    time: { start: NOW - 2800, end: NOW - 1900 },
+  },
+}
+
+const grepSearch: ToolPart = {
+  type: 'tool',
+  id: 'tool-grep-1',
+  tool: 'grep',
+  state: {
+    status: 'completed',
+    input: { pattern: 'useCallback', path: 'src/' },
+    output: 'src/hooks/useSession.ts:14:  const handleMessage = useCallback((msg) => {\nsrc/hooks/useStream.ts:22:  const send = useCallback(async (text) => {\nsrc/components/Chat.tsx:88:  const onSubmit = useCallback(() => {',
+    time: { start: NOW - 600, end: NOW - 560 },
+  },
+}
+
+const editFile: ToolPart = {
+  type: 'tool',
+  id: 'tool-edit-1',
+  tool: 'edit',
+  state: {
+    status: 'completed',
+    input: {
+      file_path: '/home/user/project/src/utils/format.ts',
+      old_string: 'return `${(ms / 1000).toFixed(1)}s`',
+      new_string: 'if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`\n  return `${Math.floor(ms / 60_000)}m ${Math.floor((ms % 60_000) / 1000)}s`',
+    },
+    output: 'Edit applied.',
+    time: { start: NOW - 450, end: NOW - 420 },
+  },
+}
+
+// --
+
+const meta: Meta<typeof InlineToolItem> = {
+  title: 'Run/InlineToolItem',
+  component: InlineToolItem,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InlineToolItem>
+
+export const BashComplete: Story = {
+  args: { part: bashComplete, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const BashRunning: Story = {
+  args: { part: bashRunning, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const BashError: Story = {
+  args: { part: bashError, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const ReadFile: Story = {
+  args: { part: readFile, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const WriteFile: Story = {
+  args: { part: writeFile, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const WebSearch: Story = {
+  args: { part: webSearch, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const GrepSearch: Story = {
+  args: { part: grepSearch, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+export const EditFile: Story = {
+  args: { part: editFile, groupPosition: 'single' },
+  render: (args) => (
+    <div className="p-6 max-w-2xl">
+      <InlineToolItem {...args} />
+    </div>
+  ),
+}
+
+/** Three consecutive tool calls showing group position rounding. */
+export const GroupedSequence: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl space-y-0.5">
+      <InlineToolItem part={readFile} groupPosition="first" />
+      <InlineToolItem part={grepSearch} groupPosition="middle" />
+      <InlineToolItem part={editFile} groupPosition="last" />
+    </div>
+  ),
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="p-6 max-w-2xl space-y-3">
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1">Completed</p>
+      <InlineToolItem part={bashComplete} groupPosition="single" />
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Running</p>
+      <InlineToolItem part={bashRunning} groupPosition="single" />
+      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pt-2">Error</p>
+      <InlineToolItem part={bashError} groupPosition="single" />
+    </div>
+  ),
+}

package/src/run/inline-tool-item.tsx

@@ -0,0 +1,190 @@
+import { memo, useState, type ComponentType, type ReactNode } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import {
+  Loader2,
+  CheckCircle2,
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  Terminal,
+  FileEdit,
+  FileSearch,
+  Search,
+  PencilLine,
+  Bot,
+  Globe,
+  ClipboardList,
+  Settings,
+  type LucideProps,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import {
+  getToolDisplayMetadata,
+  getToolErrorText,
+  getToolCategory,
+} from "../utils/tool-display";
+import { formatDuration } from "../utils/format";
+import type { ToolPart } from "../types/parts";
+import type { ToolCategory } from "../types/run";
+import type { CustomToolRenderer } from "../types/tool-display";
+import { ExpandedToolDetail } from "./expanded-tool-detail";
+import { LiveDuration } from "./run-item-primitives";
+
+/** Map tool category to a lucide-react icon component. */
+const TOOL_CATEGORY_ICON_MAP: Record<
+  ToolCategory,
+  ComponentType<LucideProps>
+> = {
+  command: Terminal,
+  write: FileEdit,
+  read: FileSearch,
+  search: Search,
+  edit: PencilLine,
+  task: Bot,
+  web: Globe,
+  todo: ClipboardList,
+  other: Settings,
+};
+
+export interface InlineToolItemProps {
+  part: ToolPart;
+  renderToolDetail?: CustomToolRenderer;
+  groupPosition?: "single" | "first" | "middle" | "last";
+  className?: string;
+  contentClassName?: string;
+  actions?: ReactNode;
+}
+
+/**
+ * Compact single-line tool call display (32px height).
+ * Shows icon, title, description, duration, and status indicator.
+ * Expands on click to show ExpandedToolDetail.
+ */
+export const InlineToolItem = memo(
+  ({
+    part,
+    renderToolDetail,
+    groupPosition = "single",
+    className,
+    contentClassName,
+    actions,
+  }: InlineToolItemProps) => {
+    const [open, setOpen] = useState(false);
+    const meta = getToolDisplayMetadata(part);
+    const { status } = part.state;
+    const errorText = getToolErrorText(part);
+
+    const isRunning = status === "pending" || status === "running";
+    const isError = status === "error";
+    const isComplete = status === "completed";
+
+    // Duration
+    const startTime = part.state.time?.start;
+    const endTime = part.state.time?.end;
+    const durationMs =
+      startTime && endTime ? endTime - startTime : undefined;
+
+    // Determine the default icon based on tool category
+    const category = getToolCategory(part.tool);
+    const DefaultIcon = TOOL_CATEGORY_ICON_MAP[category] ?? Settings;
+    const shapeClass = {
+      single: "rounded-[var(--radius-lg)]",
+      first: "rounded-t-[var(--radius-lg)] rounded-b-[var(--radius-sm)]",
+      middle: "rounded-[var(--radius-sm)]",
+      last: "rounded-t-[var(--radius-sm)] rounded-b-[var(--radius-lg)]",
+    }[groupPosition];
+
+    return (
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
+        <div className="flex items-start gap-2">
+          <Collapsible.Trigger asChild>
+            <button
+              className={cn(
+                "w-full border text-left transition-colors",
+                "border-border bg-card hover:border-[var(--border-accent-hover)] hover:bg-accent/35",
+                open && "border-border bg-accent/30",
+                shapeClass,
+                className,
+              )}
+            >
+              <div className="flex items-center gap-2 px-2.5 py-1.5">
+                <div className={cn(
+                  "shrink-0",
+                  isRunning && "text-primary",
+                  isComplete && "text-[var(--surface-success-text)]",
+                  isError && "text-[var(--surface-danger-text)]",
+                  !isRunning && !isComplete && !isError && "text-muted-foreground",
+                )}>
+                  {isRunning ? (
+                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  ) : isComplete ? (
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                  ) : isError ? (
+                    <AlertCircle className="h-3.5 w-3.5" />
+                  ) : (
+                    <DefaultIcon className="h-3.5 w-3.5" />
+                  )}
+                </div>
+
+                <span className="truncate text-xs font-medium text-foreground">
+                  {meta.title}
+                </span>
+                {meta.description ? (
+                  <span className="hidden truncate text-xs font-mono text-muted-foreground sm:inline">
+                    {meta.description}
+                  </span>
+                ) : null}
+
+                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {isRunning && startTime ? <LiveDuration startTime={startTime} /> : null}
+                  {!isRunning && durationMs != null ? (
+                    <span className="text-[10px] font-mono tabular-nums text-muted-foreground">
+                      {formatDuration(durationMs)}
+                    </span>
+                  ) : null}
+                  {isError ? (
+                    <span className="rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]">
+                      Failed
+                    </span>
+                  ) : null}
+                  {isRunning ? (
+                    <span className="rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary">
+                      Running
+                    </span>
+                  ) : null}
+                  {open ? (
+                    <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+
+              {errorText && !open ? (
+                <div className="border-t border-border px-3 py-2 text-xs text-red-200">
+                  {errorText}
+                </div>
+              ) : null}
+            </button>
+          </Collapsible.Trigger>
+
+          {actions ? (
+            <div
+              className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1"
+              onClick={(event) => event.stopPropagation()}
+            >
+              {actions}
+            </div>
+          ) : null}
+        </div>
+
+        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+          <div className={cn("mt-2 pl-4", contentClassName)}>
+            {renderToolDetail?.(part) ?? <ExpandedToolDetail part={part} />}
+          </div>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    );
+  },
+);
+InlineToolItem.displayName = "InlineToolItem";