@alumbwe/anvil 1.0.0

package/src/components/tools/apply-patch.tsx

@@ -0,0 +1,95 @@
+import { TextAttributes } from '@opentui/core'
+
+import { DiffViewer } from './diff-viewer'
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+
+import type { ToolRenderConfig } from './types'
+
+type PatchOperation =
+  | { type: 'create_file'; path: string; diff: string }
+  | { type: 'update_file'; path: string; diff: string }
+  | { type: 'delete_file'; path: string }
+
+function parseOperation(input: unknown): PatchOperation | null {
+  if (!input || typeof input !== 'object') return null
+  const op = (input as { operation?: unknown }).operation
+  if (!op || typeof op !== 'object') return null
+  const { type, path, diff } = op as Record<string, unknown>
+  if (typeof type !== 'string' || typeof path !== 'string') return null
+  if (type === 'create_file' && typeof diff === 'string') {
+    return { type: 'create_file', path, diff }
+  }
+  if (type === 'update_file' && typeof diff === 'string') {
+    return { type: 'update_file', path, diff }
+  }
+  if (type === 'delete_file') {
+    return { type: 'delete_file', path }
+  }
+  return null
+}
+
+interface EditHeaderProps {
+  name: string
+  filePath: string
+}
+
+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>
+        <span fg={theme.foreground}>{` ${filePath}`}</span>
+      </text>
+    </box>
+  )
+}
+
+interface PatchOperationItemProps {
+  operation: PatchOperation
+}
+
+const PatchOperationItem = ({ operation }: PatchOperationItemProps) => {
+  if (operation.type === 'create_file') {
+    return <EditHeader name="Create" filePath={operation.path} />
+  }
+
+  if (operation.type === 'delete_file') {
+    return <EditHeader name="Delete" filePath={operation.path} />
+  }
+
+  return (
+    <box style={{ flexDirection: 'column', width: '100%' }}>
+      <EditHeader name="Edit" filePath={operation.path} />
+      <box style={{ paddingLeft: 2, width: '100%' }}>
+        <DiffViewer diffText={operation.diff} />
+      </box>
+    </box>
+  )
+}
+
+export const ApplyPatchComponent = defineToolComponent({
+  toolName: 'apply_patch',
+
+  render(toolBlock): ToolRenderConfig {
+    const operation = parseOperation(toolBlock.input)
+
+    if (!operation) {
+      return { content: null }
+    }
+
+    return {
+      content: (
+        <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+          <PatchOperationItem operation={operation} />
+        </box>
+      ),
+    }
+  },
+})

package/src/components/tools/code-search.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+import { countCodeSearchResults } from '../../utils/code-search-summary'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for code_search tool.
+ * Displays a single line showing the search pattern, flags, and number of results.
+ * Does not support expand/collapse - always shows as a single line.
+ */
+export const CodeSearchComponent = defineToolComponent({
+  toolName: 'code_search',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+    const pattern = input?.pattern ?? ''
+    const cwd = input?.cwd ?? ''
+
+    const totalResults = countCodeSearchResults(toolBlock.output)
+
+    // Build single-line summary
+    let summary = ''
+
+    summary += `${pattern}`
+
+    if (cwd) {
+      summary += ` in ${cwd}`
+    }
+
+    // Disable showing flags since they are noisy.
+    // if (flags) {
+    //   summary += ` ${flags}`
+    // }
+
+    summary += ` (${totalResults} result${totalResults === 1 ? '' : 's'})`
+
+    // Return as content using SimpleToolCallItem
+    return {
+      content: <SimpleToolCallItem name="Search" description={summary} />,
+    }
+  },
+})

package/src/components/tools/composio.tsx

@@ -0,0 +1,152 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolBlock, ToolRenderConfig } from './types'
+
+/**
+ * Formats an array of items as a comma-separated list, truncated to maxItems.
+ */
+function formatList(items: string[], maxItems = 3): string {
+  if (items.length === 0) return ''
+  const shown = items.slice(0, maxItems)
+  const remainder = items.length - shown.length
+  const suffix = remainder > 0 ? ` +${remainder} more` : ''
+  return shown.join(', ') + suffix
+}
+
+/**
+ * UI component for composio_manage_connections tool.
+ * Shows "App Connections" with the toolkit names being connected.
+ */
+export const ManageConnectionsComponent = defineToolComponent({
+  toolName: 'composio_manage_connections',
+
+  render(toolBlock: ToolBlock & { toolName: 'composio_manage_connections' }): ToolRenderConfig {
+    const input = toolBlock.input as {
+      toolkits?: string[]
+      reinitiate_all?: boolean
+    } | undefined
+    const toolkits = input?.toolkits ?? []
+    const description = toolkits.length > 0 ? formatList(toolkits) : ''
+
+    return {
+      content: (
+        <SimpleToolCallItem name="App Connections" description={description} />
+      ),
+      collapsedPreview: description,
+    }
+  },
+})
+
+/**
+ * Stringify a non-string tool value for display, breaking cycles so a raw
+ * composio result can't throw during the TUI render.
+ */
+function stringifyToolValue(value: unknown): string {
+  if (typeof value === 'string') return value
+  try {
+    return JSON.stringify(value)
+  } catch {
+    const ancestors: unknown[] = []
+    return JSON.stringify(value, function (this: unknown, _key, val) {
+      if (ancestors.length > 0) {
+        const thisPos = ancestors.indexOf(this)
+        if (thisPos !== -1) {
+          ancestors.splice(thisPos + 1)
+        } else {
+          ancestors.push(this)
+        }
+        if (
+          typeof val === 'object' &&
+          val !== null &&
+          ancestors.includes(val)
+        ) {
+          return '[Circular]'
+        }
+      } else {
+        ancestors.push(val)
+      }
+      return val
+    })
+  }
+}
+
+/**
+ * UI component for composio_multi_execute_tool tool.
+ * Shows "App Action" with the thought or tool slugs being executed.
+ */
+export const ExecuteToolComponent = defineToolComponent({
+  toolName: 'composio_multi_execute_tool',
+
+  render(toolBlock: ToolBlock & { toolName: 'composio_multi_execute_tool' }): ToolRenderConfig {
+    const input = toolBlock.input as {
+      tools?: Array<Record<string, unknown>>
+      thought?: string
+    } | undefined
+    const tools = input?.tools ?? []
+    const thought = input?.thought
+
+    // Prefer the thought as description, otherwise extract tool slugs
+    const description =
+      thought ??
+      (tools.length > 0
+        ? formatList(tools.map((t) => stringifyToolValue(t.slug)))
+        : '')
+
+    return {
+      content: (
+        <SimpleToolCallItem name="App Action" description={description} />
+      ),
+      collapsedPreview: description,
+    }
+  },
+})
+
+/**
+ * UI component for composio_search_tools tool.
+ * Shows "App Search" with the search queries.
+ */
+export const SearchToolsComponent = defineToolComponent({
+  toolName: 'composio_search_tools',
+
+  render(toolBlock: ToolBlock & { toolName: 'composio_search_tools' }): ToolRenderConfig {
+    const input = toolBlock.input as {
+      queries?: unknown[]
+    } | undefined
+    const queries = input?.queries ?? []
+    const description =
+      queries.length > 0
+        ? formatList(queries.map((q) => stringifyToolValue(q)))
+        : ''
+
+    return {
+      content: (
+        <SimpleToolCallItem name="App Search" description={description} />
+      ),
+      collapsedPreview: description,
+    }
+  },
+})
+
+/**
+ * UI component for composio_get_tool_schemas tool.
+ * Shows "App Schemas" with the tool slugs being queried.
+ */
+export const GetToolSchemasComponent = defineToolComponent({
+  toolName: 'composio_get_tool_schemas',
+
+  render(toolBlock: ToolBlock & { toolName: 'composio_get_tool_schemas' }): ToolRenderConfig {
+    const input = toolBlock.input as {
+      tool_slugs?: string[]
+    } | undefined
+    const toolSlugs = input?.tool_slugs ?? []
+    const description = toolSlugs.length > 0 ? formatList(toolSlugs) : ''
+
+    return {
+      content: (
+        <SimpleToolCallItem name="App Schemas" description={description} />
+      ),
+      collapsedPreview: description,
+    }
+  },
+})

package/src/components/tools/diff-viewer.tsx

@@ -0,0 +1,76 @@
+import { TextAttributes } from '@opentui/core'
+
+import { useTheme } from '../../hooks/use-theme'
+
+interface DiffViewerProps {
+  diffText: string
+}
+
+const DIFF_LINE_COLORS = {
+  dark: {
+    added: '#7ACC35',
+    removed: '#BF6C69',
+  },
+  light: {
+    added: '#4A9E1C',
+    removed: '#C53030',
+  },
+}
+
+const lineColor = (
+  line: string,
+  themeName: 'dark' | 'light',
+  mutedColor: string,
+): { fg: string; attrs?: number } => {
+  if (line.startsWith('@@')) {
+    return { fg: 'cyan', attrs: TextAttributes.BOLD }
+  }
+  if (line.startsWith('+++') || line.startsWith('---')) {
+    return { fg: mutedColor, attrs: TextAttributes.BOLD }
+  }
+  if (
+    line.startsWith('diff ') ||
+    line.startsWith('index ') ||
+    line.startsWith('rename ') ||
+    line.startsWith('similarity ')
+  ) {
+    return { fg: mutedColor }
+  }
+  if (line.startsWith('+')) {
+    return { fg: DIFF_LINE_COLORS[themeName].added }
+  }
+  if (line.startsWith('-')) {
+    return { fg: DIFF_LINE_COLORS[themeName].removed }
+  }
+  if (line.startsWith('\\')) {
+    return { fg: mutedColor }
+  }
+  return { fg: '' }
+}
+
+export const DiffViewer = ({ diffText }: DiffViewerProps) => {
+  const theme = useTheme()
+
+  const lines = diffText.trim().split('\n')
+
+  return (
+    <box
+      style={{ flexDirection: 'column', gap: 0, width: '100%', flexGrow: 1 }}
+    >
+      {lines
+        .filter((rawLine) => !rawLine.startsWith('@@'))
+        .map((rawLine, idx) => {
+          const line = rawLine.length === 0 ? ' ' : rawLine
+          const { fg, attrs } = lineColor(line, theme.name, theme.muted)
+          const resolvedFg = fg || theme.foreground
+          return (
+            <text key={`diff-line-${idx}`} style={{ wrapMode: 'none' }}>
+              <span fg={resolvedFg} attributes={attrs}>
+                {line}
+              </span>
+            </text>
+          )
+        })}
+    </box>
+  )
+}

package/src/components/tools/glob.tsx

@@ -0,0 +1,61 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for glob tool.
+ * Displays a single line showing the glob pattern and number of matching files.
+ * Does not support expand/collapse - always shows as a single line.
+ */
+export const GlobComponent = defineToolComponent({
+  toolName: 'glob',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+    const pattern = input?.pattern ?? ''
+    const cwd = input?.cwd ?? ''
+
+    // Parse output to check for errors
+    let hasError = false
+
+    if (toolBlock.output) {
+      const outputArray = Array.isArray(toolBlock.output)
+        ? toolBlock.output
+        : [toolBlock.output]
+
+      for (const item of outputArray) {
+        const output = item as any
+        if (output?.type === 'json' && output?.value) {
+          const value = output.value as any
+          if (value.errorMessage) {
+            hasError = true
+          }
+        }
+      }
+    }
+
+    if (!pattern) {
+      return { content: null }
+    }
+
+    // Build single-line summary
+    let summary = pattern
+
+    if (cwd) {
+      summary += ` in ${cwd}`
+    }
+
+    if (hasError) {
+      summary += ' (error)'
+    }
+    // TODO(James): Reenable when we pass tool results as an object
+    //  else {
+    //   summary += ` (${fileCount} file${fileCount === 1 ? '' : 's'})`
+    // }
+
+    return {
+      content: <SimpleToolCallItem name="Glob" description={summary} />,
+    }
+  },
+})

package/src/components/tools/gravity-index.tsx

@@ -0,0 +1,77 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+const asTrimmedString = (value: unknown): string =>
+  typeof value === 'string' ? value.trim() : ''
+
+const DEFAULT_NAME = 'Services'
+
+export interface GravityIndexParts {
+  /** Bold label naming the action in plain verb-first language. */
+  name: string
+  /** Non-bold target the action operates on (query, slug, category). May be empty. */
+  description: string
+}
+
+/**
+ * Splits a gravity_index tool call into a bold verb-first label (e.g.
+ * "Search services") and the plain target it acts on, so the action reads as
+ * a single natural phrase instead of a "Brand · Verb" subcommand.
+ */
+export const getGravityIndexParts = (input: unknown): GravityIndexParts => {
+  if (!input || typeof input !== 'object') {
+    return { name: DEFAULT_NAME, description: '' }
+  }
+
+  const params = input as Record<string, unknown>
+  const action = asTrimmedString(params.action)
+
+  switch (action) {
+    case 'search':
+      return {
+        name: 'Search services',
+        description: asTrimmedString(params.query),
+      }
+    case 'browse': {
+      const category = asTrimmedString(params.category)
+      const keyword = asTrimmedString(params.q)
+      return {
+        name: 'Browse services',
+        description: [category, keyword].filter(Boolean).join(' · '),
+      }
+    }
+    case 'list_categories':
+      return { name: 'List service categories', description: '' }
+    case 'get_service':
+      return {
+        name: 'Fetch service',
+        description: asTrimmedString(params.slug),
+      }
+    case 'report_integration': {
+      const slug = asTrimmedString(params.integrated_slug)
+      return {
+        name: 'Report integration',
+        description: slug ? `${slug} integration` : 'integration',
+      }
+    }
+    default:
+      return { name: DEFAULT_NAME, description: '' }
+  }
+}
+
+/**
+ * UI component for gravity_index.
+ * Displays a one-line summary of what Gravity Index is searching or doing.
+ */
+export const GravityIndexComponent = defineToolComponent({
+  toolName: 'gravity_index',
+
+  render(toolBlock): ToolRenderConfig {
+    const { name, description } = getGravityIndexParts(toolBlock.input)
+    return {
+      content: <SimpleToolCallItem name={name} description={description} />,
+    }
+  },
+})

package/src/components/tools/list-directory.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for list_directory tool.
+ * Displays a single line showing the directories being listed.
+ * Does not support expand/collapse - always shows as a single line.
+ */
+export const ListDirectoryComponent = defineToolComponent({
+  toolName: 'list_directory',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+
+    // Extract directories from input
+    let directories: string[] = []
+
+    if (Array.isArray(input?.directories)) {
+      directories = input.directories
+        .map((dir: any) =>
+          typeof dir === 'object' && dir.path ? dir.path : dir,
+        )
+        .filter(
+          (path: any) => typeof path === 'string' && path.trim().length > 0,
+        )
+    } else if (
+      typeof input?.path === 'string' &&
+      input.path.trim().length > 0
+    ) {
+      directories = [input.path.trim()]
+    }
+
+    if (directories.length === 0) {
+      return { content: null }
+    }
+
+    // Format directory list
+    const description = directories.join(', ')
+
+    // Use a wrapper component to access theme
+    const ListDirectoryContent = () => {
+      const theme = useTheme()
+      return (
+        <SimpleToolCallItem
+          name="List"
+          description={description}
+          descriptionColor={theme.directory}
+        />
+      )
+    }
+
+    return {
+      content: <ListDirectoryContent />,
+    }
+  },
+})

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

@@ -0,0 +1,37 @@
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+
+import type { ToolRenderConfig } from './types'
+
+/**
+ * UI component for read_docs tool.
+ * Displays library name and topic in a compact format.
+ * Does not support expand/collapse - always shows as a simple line.
+ */
+export const ReadDocsComponent = defineToolComponent({
+  toolName: 'read_docs',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+
+    // Extract library and topic from input
+    const libraryTitle =
+      typeof input?.libraryTitle === 'string' ? input.libraryTitle.trim() : ''
+    const topic = typeof input?.topic === 'string' ? input.topic.trim() : ''
+
+    if (!libraryTitle && !topic) {
+      return { content: null }
+    }
+
+    const description =
+      libraryTitle && topic
+        ? `${libraryTitle}: ${topic}`
+        : libraryTitle || topic
+
+    return {
+      content: (
+        <SimpleToolCallItem name="Read Docs" description={description} />
+      ),
+    }
+  },
+})

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

@@ -0,0 +1,91 @@
+import { readFilePathsOf } from '@anvil/common/tools/params/tool/read-files'
+import { isEnvTemplateFilePath } from '@anvil/common/util/env-file-path'
+import { TextAttributes } from '@opentui/core'
+
+import { SimpleToolCallItem } from './tool-call-item'
+import { defineToolComponent } from './types'
+import { useTheme } from '../../hooks/use-theme'
+import { isSensitiveFile } from '../../utils/create-run-config'
+
+import type { ToolRenderConfig } from './types'
+
+function FilePathsDescription({ filePaths }: { filePaths: string[] }) {
+  const theme = useTheme()
+
+  return (
+    <>
+      {filePaths.map((fp, idx) => {
+        const isLast = idx === filePaths.length - 1
+        const separator = isLast ? '' : ', '
+
+        if (isSensitiveFile(fp)) {
+          return (
+            <span key={fp}>
+              <span fg={theme.muted} attributes={TextAttributes.STRIKETHROUGH}>
+                {fp}
+              </span>
+              <span fg={theme.muted}> (blocked)</span>
+              <span fg={theme.foreground}>{separator}</span>
+            </span>
+          )
+        }
+
+        if (isEnvTemplateFilePath(fp)) {
+          return (
+            <span key={fp}>
+              <span fg={theme.foreground}>{fp}</span>
+              <span fg={theme.muted}> (allowed - example only)</span>
+              <span fg={theme.foreground}>{separator}</span>
+            </span>
+          )
+        }
+
+        return (
+          <span key={fp} fg={theme.foreground}>
+            {fp}
+            {separator}
+          </span>
+        )
+      })}
+    </>
+  )
+}
+
+/**
+ * UI component for read_files tool.
+ * Displays file paths with labels for blocked/template files.
+ */
+export const ReadFilesComponent = defineToolComponent({
+  toolName: 'read_files',
+
+  render(toolBlock): ToolRenderConfig {
+    const input = toolBlock.input as any
+
+    // Extract file paths from input
+    const filePaths: string[] = readFilePathsOf(input?.paths)
+
+    if (filePaths.length === 0) {
+      return { content: null }
+    }
+
+    // Check if any files need special labels
+    const hasSpecialFiles = filePaths.some(
+      (fp) => isSensitiveFile(fp) || isEnvTemplateFilePath(fp),
+    )
+
+    return {
+      content: (
+        <SimpleToolCallItem
+          name="Read"
+          description={
+            hasSpecialFiles ? (
+              <FilePathsDescription filePaths={filePaths} />
+            ) : (
+              filePaths.join(', ')
+            )
+          }
+        />
+      ),
+    }
+  },
+})