@alumbwe/anvil 1.0.0

package/src/components/tools/read-subtree.tsx

@@ -0,0 +1,44 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for read_subtree tool.
+ * Render a single-line summary like other simple tools
+ * (e.g., Read, List) without an extra collapsible header.
+ */
+export const ReadSubtreeComponent = defineToolComponent({
+  toolName: 'read_subtree',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+    const paths: string[] = Array.isArray(input?.paths)
+      ? input.paths.filter((p: any) => typeof p === 'string' && p.trim().length)
+      : []
+
+    const displayPath: string =
+      typeof input?.path === 'string' && input.path.trim().length > 0
+        ? input.path.trim()
+        : paths[0] || ''
+
+    const finalPath = displayPath || '.'
+
+    // Use a wrapper component to access theme
+    const ReadSubtreeContent = () => {
+      const theme = useTheme()
+      return (
+        <SimpleToolCallItem
+          name="List deeply"
+          description={finalPath}
+          descriptionColor={theme.directory}
+        />
+      )
+    }
+
+    return {
+      content: <ReadSubtreeContent />,
+    }
+  },
+})

package/src/components/tools/read-url.tsx

@@ -0,0 +1,33 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ChatTheme } from '../../types/theme-system'
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for read_url tool.
+ * Displays the URL being read in a compact format.
+ */
+export const ReadURLComponent = defineToolComponent({
+  toolName: 'read_url',
+
+  render(toolBlock, theme): ToolRenderConfig {
+    const input = toolBlock.input as { url?: string } | undefined
+
+    const url = typeof input?.url === 'string' ? input.url.trim() : ''
+
+    if (!url) {
+      return { content: null }
+    }
+
+    return {
+      content: (
+        <SimpleToolCallItem
+          name="Read URL"
+          description={url}
+          descriptionColor={theme.muted}
+        />
+      ),
+    }
+  },
+})

package/src/components/tools/registry.ts

@@ -0,0 +1,126 @@
+import { ApplyPatchComponent } from './apply-patch'
+import { CodeSearchComponent } from './code-search'
+import {
+  ManageConnectionsComponent,
+  ExecuteToolComponent,
+  SearchToolsComponent,
+  GetToolSchemasComponent,
+} from './composio'
+import { GlobComponent } from './glob'
+import { GravityIndexComponent } from './gravity-index'
+import { ListDirectoryComponent } from './list-directory'
+import { ReadDocsComponent } from './read-docs'
+import { ReadFilesComponent } from './read-files'
+import { ReadSubtreeComponent } from './read-subtree'
+import { ReadURLComponent } from './read-url'
+import { RenderUIComponent } from './render-ui'
+import { WebSearchComponent } from './web-search'
+import { RunTerminalCommandComponent } from './run-terminal-command'
+import { SkillComponent } from './skill'
+import { StrReplaceComponent } from './str-replace'
+import { SuggestFollowupsComponent } from './suggest-followups'
+import { TaskCompleteComponent } from './task-completed'
+import { WriteFileComponent } from './write-file'
+import { WriteTodosComponent } from './write-todos'
+
+import type {
+  ToolComponent,
+  ToolRenderConfig,
+  ToolRenderOptions,
+  ToolBlock,
+} from './types'
+import type { ChatTheme } from '../../types/theme-system'
+import type { ToolName } from '@anvil/sdk'
+
+/**
+ * Registry of all tool-specific UI components.
+ * Add new tool components here to make them available in the CLI.
+ */
+const toolComponentRegistry = new Map<ToolName, ToolComponent>([
+  [ApplyPatchComponent.toolName, ApplyPatchComponent],
+  [CodeSearchComponent.toolName, CodeSearchComponent],
+  [ManageConnectionsComponent.toolName, ManageConnectionsComponent],
+  [ExecuteToolComponent.toolName, ExecuteToolComponent],
+  [SearchToolsComponent.toolName, SearchToolsComponent],
+  [GetToolSchemasComponent.toolName, GetToolSchemasComponent],
+  [GlobComponent.toolName, GlobComponent],
+  [GravityIndexComponent.toolName, GravityIndexComponent],
+  [ListDirectoryComponent.toolName, ListDirectoryComponent],
+  [RunTerminalCommandComponent.toolName, RunTerminalCommandComponent],
+  [ReadDocsComponent.toolName, ReadDocsComponent],
+  [ReadFilesComponent.toolName, ReadFilesComponent],
+  [ReadSubtreeComponent.toolName, ReadSubtreeComponent],
+  [ReadURLComponent.toolName, ReadURLComponent],
+  [RenderUIComponent.toolName, RenderUIComponent],
+  [WebSearchComponent.toolName, WebSearchComponent],
+  [WriteTodosComponent.toolName, WriteTodosComponent],
+  [StrReplaceComponent.toolName, StrReplaceComponent],
+  [SuggestFollowupsComponent.toolName, SuggestFollowupsComponent],
+  [WriteFileComponent.toolName, WriteFileComponent],
+  [TaskCompleteComponent.toolName, TaskCompleteComponent],
+  // Propose tools reuse the same rendering as their base counterparts
+  ['propose_str_replace', StrReplaceComponent],
+  ['propose_write_file', WriteFileComponent],
+  [SkillComponent.toolName, SkillComponent],
+])
+
+/**
+ * Register a new tool component.
+ * This allows plugins or extensions to add custom tool renderers.
+ *
+ * @param component - The tool component to register
+ */
+export function registerToolComponent(component: ToolComponent): void {
+  toolComponentRegistry.set(component.toolName, component)
+}
+
+/**
+ * Get the registered component for a specific tool name.
+ *
+ * @param toolName - The name of the tool
+ * @returns The tool component, or undefined if not registered
+ */
+export function getToolComponent(
+  toolName: ToolName,
+): ToolComponent | undefined {
+  return toolComponentRegistry.get(toolName)
+}
+
+/**
+ * Render a tool using its registered component, or return null for default rendering.
+ * This is the main entry point for the tool rendering system.
+ *
+ * @param toolBlock - The tool block to render
+ * @param theme - The current chat theme
+ * @param options - Rendering options
+ * @returns Render configuration, or null to use default rendering
+ */
+export function renderToolComponent(
+  toolBlock: ToolBlock,
+  theme: ChatTheme,
+  options: ToolRenderOptions,
+): ToolRenderConfig | undefined {
+  const component = getToolComponent(toolBlock.toolName)
+
+  if (component === undefined) {
+    return undefined
+  }
+
+  try {
+    return component.render(toolBlock as any, theme, options)
+  } catch (error) {
+    console.error(
+      `Error rendering tool component for ${toolBlock.toolName}:`,
+      error,
+    )
+    return undefined
+  }
+}
+
+/**
+ * Get all registered tool names.
+ * Useful for debugging or listing available tool renderers.
+ */
+export function getRegisteredToolNames(): ToolName[] {
+  return Array.from(toolComponentRegistry.keys())
+}

package/src/components/tools/render-ui.tsx

@@ -0,0 +1,122 @@
+import { TextAttributes } from '@opentui/core'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  parseRenderUIButtonWidget,
+  type RenderUIButtonWidget,
+} from '@anvil/common/tools/params/tool/render-ui'
+
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+import { safeOpen } from '../../utils/open-url'
+import { Button } from '../button'
+
+import type { ToolRenderConfig } from './types'
+
+type RenderUIButtonVariant = NonNullable<RenderUIButtonWidget['variant']>
+
+/**
+ * The button is an accent-colored outline with a matching label. It stays
+ * unfilled in every state — a fill would bleed past the rounded corners — so
+ * hover is signalled by underlining the label rather than inverting the fill.
+ */
+const getButtonColors = (
+  theme: ReturnType<typeof useTheme>,
+  variant: RenderUIButtonVariant,
+) => {
+  const accent = variant === 'secondary' ? theme.secondary : theme.primary
+  return {
+    // Unfilled: the interior shows the terminal background in every state.
+    backgroundColor: undefined,
+    foregroundColor: accent,
+    borderColor: accent,
+  }
+}
+
+const CLICK_FLASH_DURATION_MS = 150
+
+const RenderUIButton = ({ widget }: { widget: RenderUIButtonWidget }) => {
+  const theme = useTheme()
+  const [isHovered, setIsHovered] = useState(false)
+  const [isClicked, setIsClicked] = useState(false)
+  const clickTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const variant = widget.variant ?? 'primary'
+  const { backgroundColor, foregroundColor, borderColor } = getButtonColors(
+    theme,
+    variant,
+  )
+
+  useEffect(() => {
+    return () => {
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const handleClick = useCallback(() => {
+    if (clickTimeoutRef.current) {
+      clearTimeout(clickTimeoutRef.current)
+    }
+    setIsClicked(true)
+    safeOpen(widget.link)
+    clickTimeoutRef.current = setTimeout(
+      () => setIsClicked(false),
+      CLICK_FLASH_DURATION_MS,
+    )
+  }, [widget.link])
+
+  // Bold reads as a button label; underline on hover signals it's clickable;
+  // dim briefly on click to acknowledge the press.
+  const textAttributes = isClicked
+    ? TextAttributes.DIM
+    : isHovered
+      ? TextAttributes.BOLD | TextAttributes.UNDERLINE
+      : TextAttributes.BOLD
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      <Button
+        onClick={handleClick}
+        onMouseOver={() => setIsHovered(true)}
+        onMouseOut={() => setIsHovered(false)}
+        style={{
+          backgroundColor,
+          borderStyle: 'rounded',
+          borderColor,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+      >
+        <text>
+          <span fg={foregroundColor} attributes={textAttributes}>
+            {widget.text}
+          </span>
+          {/* Trailing arrow signals the button opens an external link. */}
+          <span fg={foregroundColor} attributes={textAttributes}>{' ↗'}</span>
+        </text>
+      </Button>
+    </box>
+  )
+}
+
+export const RenderUIComponent = defineToolComponent({
+  toolName: 'render_ui',
+
+  render(toolBlock): ToolRenderConfig {
+    const widget = parseRenderUIButtonWidget(toolBlock.input?.widget)
+
+    if (!widget) {
+      return { content: null }
+    }
+
+    return {
+      content: <RenderUIButton widget={widget} />,
+      collapsedPreview: `${widget.text} -> ${widget.link}`,
+    }
+  },
+})

package/src/components/tools/run-terminal-command.tsx

@@ -0,0 +1,79 @@
+import { defineToolComponent } from './types'
+import { TerminalCommandDisplay } from '../terminal-command-display'
+
+import type { ToolRenderConfig } from './types'
+
+export interface ParsedTerminalOutput {
+  output: string | null
+  startingCwd?: string
+}
+
+/**
+ * Parse terminal command output from JSON or raw string format.
+ * Exported for testing.
+ */
+export const parseTerminalOutput = (rawOutput: string | undefined): ParsedTerminalOutput => {
+  if (!rawOutput) {
+    return { output: null }
+  }
+
+  try {
+    const parsed = JSON.parse(rawOutput)
+    // Handle array format [{ type: 'json', value: {...} }]
+    const value = Array.isArray(parsed) ? parsed[0]?.value : parsed
+    if (value) {
+      const startingCwd = value.startingCwd
+      // Handle error case
+      if (value.errorMessage) {
+        return { output: `Error: ${value.errorMessage}`, startingCwd }
+      }
+      // Combine stdout and stderr for display
+      // Use trimEnd() to preserve leading spaces (used for UI elements like trees/tables)
+      const stdout = value.stdout || ''
+      const stderr = value.stderr || ''
+      const output = (stdout + stderr).trimEnd() || null
+      return { output, startingCwd }
+    }
+    return { output: null }
+  } catch {
+    // If not JSON, use raw output (preserve leading spaces)
+    return { output: rawOutput.trimEnd() || null }
+  }
+}
+
+/**
+ * UI component for run_terminal_command tool.
+ * Displays the command in bold next to the bullet point,
+ * with the output indented below.
+ */
+export const RunTerminalCommandComponent = defineToolComponent({
+  toolName: 'run_terminal_command',
+
+  render(toolBlock, _theme, options): ToolRenderConfig {
+    // Extract command and timeout from input
+    const input = toolBlock.input as { command?: string; timeout_seconds?: number } | undefined
+    const command = typeof input?.command === 'string' ? input.command.trim() : ''
+    const timeoutSeconds = typeof input?.timeout_seconds === 'number' ? input.timeout_seconds : undefined
+
+    // Extract output and startingCwd from tool result
+    const { output, startingCwd } = parseTerminalOutput(toolBlock.output)
+
+    // Custom content component using shared TerminalCommandDisplay
+    const content = (
+      <TerminalCommandDisplay
+        command={command}
+        output={output}
+        expandable={true}
+        maxVisibleLines={5}
+        cwd={startingCwd}
+        timeoutSeconds={timeoutSeconds}
+        availableWidth={options.availableWidth}
+      />
+    )
+
+    return {
+      content,
+      collapsedPreview: `$ ${command}`,
+    }
+  },
+})

package/src/components/tools/skill.tsx

@@ -0,0 +1,29 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for skill tool.
+ * Displays the skill name being loaded in a compact format.
+ */
+export const SkillComponent = defineToolComponent({
+  toolName: 'skill',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+
+    const skillName =
+      typeof input?.name === 'string' ? input.name.trim() : ''
+
+    if (!skillName) {
+      return { content: null }
+    }
+
+    return {
+      content: (
+        <SimpleToolCallItem name="Load Skill" description={skillName} />
+      ),
+    }
+  },
+})

package/src/components/tools/str-replace.tsx

@@ -0,0 +1,77 @@
+import { TextAttributes } from '@opentui/core'
+
+import { DiffViewer } from './diff-viewer'
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+import {
+  extractDiff,
+  extractFilePath,
+  isCreateFile,
+  shouldShowEditDiff,
+} from '../../utils/implementor-helpers'
+
+import type { ToolRenderConfig } from './types'
+
+interface EditHeaderProps {
+  name: string
+  filePath: string | null
+}
+
+const EditHeader = ({ name, filePath }: EditHeaderProps) => {
+  const theme = useTheme()
+  const bulletChar = '• '
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'center', width: '100%' }}>
+      <text style={{ wrapMode: 'word' }}>
+        <span fg={theme.foreground}>{bulletChar}</span>
+        <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+          {name}
+        </span>
+        {filePath ? <span fg={theme.foreground}>{` ${filePath}`}</span> : null}
+      </text>
+    </box>
+  )
+}
+
+interface EditBodyProps {
+  name: string
+  filePath: string | null
+  diffText: string
+  isCreate: boolean
+}
+
+const EditBody = ({ name, filePath, diffText, isCreate }: EditBodyProps) => {
+  return (
+    <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+      <EditHeader name={name} filePath={filePath} />
+      {!isCreate && diffText.length > 0 && (
+        <box style={{ paddingLeft: 2, width: '100%' }}>
+          <DiffViewer diffText={diffText} />
+        </box>
+      )}
+    </box>
+  )
+}
+
+export const StrReplaceComponent = defineToolComponent({
+  toolName: 'str_replace',
+
+  render(toolBlock): ToolRenderConfig {
+    const diff = extractDiff(toolBlock)
+    const filePath = extractFilePath(toolBlock)
+    const isCreate = isCreateFile(toolBlock)
+    const showDiff = shouldShowEditDiff(toolBlock)
+
+    return {
+      content: (
+        <EditBody
+          name={isCreate ? 'Create' : 'Edit'}
+          filePath={filePath}
+          diffText={showDiff ? (diff ?? '') : ''}
+          isCreate={isCreate}
+        />
+      ),
+    }
+  },
+})