@alumbwe/anvil 1.0.0 → 1.0.2

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

@@ -1,44 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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}
-        />
-      ),
-    }
-  },
-})