@alumbwe/anvil 1.0.0

package/src/components/thinking.tsx

@@ -0,0 +1,109 @@
+import { TextAttributes } from '@opentui/core'
+import React, { memo, type ReactNode } from 'react'
+
+import { Button } from './button'
+import { TerminalThinkingOrb } from './terminal-thinking-orb'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+import { getLastNVisualLines } from '../utils/text-layout'
+
+import type { ThinkingCollapseState } from '../types/chat'
+
+const PREVIEW_LINE_COUNT = 5
+
+interface ThinkingProps {
+  content: string
+  thinkingCollapseState: ThinkingCollapseState
+  /** Whether the thinking has completed (streaming finished) */
+  isThinkingComplete: boolean
+  onToggle: () => void
+  availableWidth?: number
+}
+
+export const Thinking = memo(
+  ({
+    content,
+    thinkingCollapseState,
+    isThinkingComplete,
+    onToggle,
+    availableWidth,
+  }: ThinkingProps): ReactNode => {
+    const theme = useTheme()
+    const { contentMaxWidth } = useTerminalDimensions()
+
+    // Special case: single **bold** string under 100 chars gets compact rendering
+    const singleBoldMatch = content.length < 100 ? content.trim().match(/^\*\*([^*]+)\*\*$/) : null
+    if (singleBoldMatch) {
+      return (
+        null
+      )
+    }
+
+    const width = Math.max(10, availableWidth ?? contentMaxWidth)
+    // Normalize content to single line for consistent preview (but preserve in expanded mode)
+    const normalizedContent = content.replace(/\n+/g, ' ').trim()
+    // Account for "..." prefix (3 chars) when calculating line widths
+    const effectiveWidth = width - 3
+    const { lines, hasMore } = getLastNVisualLines(
+      normalizedContent,
+      effectiveWidth,
+      PREVIEW_LINE_COUNT,
+    )
+    // In expanded mode, preserve original line breaks for proper markdown rendering
+    const expandedContent = content.replace(/\n\n+/g, '\n\n').trim()
+
+    const showFull = thinkingCollapseState === 'expanded'
+    const showPreview = thinkingCollapseState === 'preview' && lines.length > 0
+
+    const toggleIndicator =
+      !isThinkingComplete ? '• '
+        : showFull ? '▾ '
+          : showPreview ? '• '
+            : '▸ '
+
+    return (
+      <Button
+        style={{
+          flexDirection: 'column',
+          gap: 0,
+        }}
+        onClick={onToggle}
+      >
+        <text style={{ fg: theme.foreground }}>
+          {!isThinkingComplete ? (
+            <TerminalThinkingOrb state="waiting" variant="spark" />
+          ) : (
+            <span>{toggleIndicator}</span>
+          )}
+          <span attributes={TextAttributes.BOLD}>Reasoning</span>
+        </text>
+        {showPreview && (
+          <box style={{ paddingLeft: 2 }}>
+            <text
+              style={{
+                wrapMode: 'none',
+                fg: theme.muted,
+              }}
+              attributes={TextAttributes.ITALIC}
+            >
+              {hasMore ? '...' + lines.join('\n') : lines.join('\n')}
+            </text>
+          </box>
+        )}
+        {showFull && (
+          <box style={{ paddingLeft: 2 }}>
+            <text
+              style={{
+                wrapMode: 'word',
+                fg: theme.muted,
+              }}
+              attributes={TextAttributes.ITALIC}
+            >
+              {expandedContent}
+            </text>
+          </box>
+        )}
+      </Button>
+    )
+  },
+)

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

@@ -0,0 +1,84 @@
+import { describe, expect, test } from 'bun:test'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { initializeThemeStore } from '../../../hooks/use-theme'
+import { chatThemes } from '../../../utils/theme-system'
+import { getToolComponent, renderToolComponent } from '../registry'
+
+import type { ToolBlock } from '../types'
+
+initializeThemeStore()
+
+const createToolBlock = (
+  operation: Record<string, unknown>,
+): ToolBlock & { toolName: 'apply_patch' } => ({
+  type: 'tool',
+  toolName: 'apply_patch',
+  toolCallId: 'apply-patch-test-id',
+  input: { operation },
+})
+
+const renderOptions = {
+  availableWidth: 80,
+  indentationOffset: 0,
+  labelWidth: 0,
+}
+
+describe('ApplyPatchComponent', () => {
+  test('is registered for apply_patch tool calls', () => {
+    expect(getToolComponent('apply_patch')).toBeDefined()
+  })
+
+  test('renders create_file operation', () => {
+    const toolBlock = createToolBlock({
+      type: 'create_file',
+      path: 'src/new-file.ts',
+      diff: '@@\n+export const value = 1\n',
+    })
+
+    const result = renderToolComponent(toolBlock, chatThemes.dark, renderOptions)
+
+    expect(result).toBeDefined()
+    expect(result?.content).toBeDefined()
+
+    const markup = renderToStaticMarkup(result?.content as React.ReactElement)
+    expect(markup).toContain('Create')
+    expect(markup).toContain('src/new-file.ts')
+  })
+
+  test('renders update_file operation with diff content', () => {
+    const toolBlock = createToolBlock({
+      type: 'update_file',
+      path: 'src/existing.ts',
+      diff: '@@\n-oldLine\n+newLine\n',
+    })
+
+    const result = renderToolComponent(toolBlock, chatThemes.dark, renderOptions)
+
+    expect(result).toBeDefined()
+    expect(result?.content).toBeDefined()
+
+    const markup = renderToStaticMarkup(result?.content as React.ReactElement)
+    expect(markup).toContain('Edit')
+    expect(markup).toContain('src/existing.ts')
+    expect(markup).toContain('-oldLine')
+    expect(markup).toContain('+newLine')
+  })
+
+  test('renders delete_file operation', () => {
+    const toolBlock = createToolBlock({
+      type: 'delete_file',
+      path: 'src/remove-me.ts',
+    })
+
+    const result = renderToolComponent(toolBlock, chatThemes.dark, renderOptions)
+
+    expect(result).toBeDefined()
+    expect(result?.content).toBeDefined()
+
+    const markup = renderToStaticMarkup(result?.content as React.ReactElement)
+    expect(markup).toContain('Delete')
+    expect(markup).toContain('src/remove-me.ts')
+  })
+})

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

@@ -0,0 +1,45 @@
+import { describe, expect, test } from 'bun:test'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { initializeThemeStore } from '../../../hooks/use-theme'
+import { CodeSearchComponent } from '../code-search'
+
+import type { ChatTheme } from '../../../types/theme-system'
+import type { ToolBlock } from '../types'
+
+initializeThemeStore()
+
+const createToolBlock = (
+  output?: string,
+): ToolBlock & { toolName: 'code_search' } => ({
+  type: 'tool',
+  toolName: 'code_search',
+  toolCallId: 'code-search-test',
+  input: {
+    pattern: 'getAgentBaseName',
+    cwd: 'cli/src/utils',
+  },
+  output,
+})
+
+describe('CodeSearchComponent', () => {
+  test('uses formatted match count from current code search output', () => {
+    const result = CodeSearchComponent.render(
+      createToolBlock(`Found 2 matches
+./message-block-helpers.ts:
+Line 13: export const getAgentBaseName = (type: string): string => {
+Line 196: getAgentBaseName(options.agentType ?? '') === 'code-searcher'`),
+      {} as ChatTheme,
+      {
+        availableWidth: 80,
+        indentationOffset: 0,
+        labelWidth: 10,
+      },
+    )
+
+    const markup = renderToStaticMarkup(<>{result.content}</>)
+
+    expect(markup).toContain('getAgentBaseName in cli/src/utils (2 results)')
+  })
+})

package/src/components/tools/__tests__/gravity-index.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, test } from 'bun:test'
+
+import { getGravityIndexParts } from '../gravity-index'
+
+describe('getGravityIndexParts', () => {
+  test('describes search queries', () => {
+    expect(
+      getGravityIndexParts({
+        action: 'search',
+        query: 'transactional email for a Next.js app',
+      }),
+    ).toEqual({
+      name: 'Search services',
+      description: 'transactional email for a Next.js app',
+    })
+  })
+
+  test('describes browse category and keyword', () => {
+    expect(
+      getGravityIndexParts({
+        action: 'browse',
+        category: 'Email',
+        q: 'send',
+      }),
+    ).toEqual({
+      name: 'Browse services',
+      description: 'Email · send',
+    })
+  })
+
+  test('describes service detail lookups', () => {
+    expect(
+      getGravityIndexParts({
+        action: 'get_service',
+        slug: 'sendgrid',
+      }),
+    ).toEqual({
+      name: 'Fetch service',
+      description: 'sendgrid',
+    })
+  })
+
+  test('describes completed integration reports', () => {
+    expect(
+      getGravityIndexParts({
+        action: 'report_integration',
+        integrated_slug: 'sendgrid',
+      }),
+    ).toEqual({
+      name: 'Report integration',
+      description: 'sendgrid integration',
+    })
+  })
+
+  test('names the action even when the target is missing', () => {
+    expect(getGravityIndexParts({ action: 'search' })).toEqual({
+      name: 'Search services',
+      description: '',
+    })
+    expect(getGravityIndexParts({ action: 'list_categories' })).toEqual({
+      name: 'List service categories',
+      description: '',
+    })
+  })
+
+  test('falls back to the brand for unknown input', () => {
+    expect(getGravityIndexParts({ action: 'unknown' })).toEqual({
+      name: 'Services',
+      description: '',
+    })
+    expect(getGravityIndexParts(null)).toEqual({
+      name: 'Services',
+      description: '',
+    })
+  })
+})

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

@@ -0,0 +1,92 @@
+import { describe, expect, test } from 'bun:test'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { initializeThemeStore } from '../../../hooks/use-theme'
+import { chatThemes } from '../../../utils/theme-system'
+import { RenderUIComponent } from '../render-ui'
+
+import type { ToolBlock } from '../types'
+
+initializeThemeStore()
+
+const createToolBlock = (
+  input: unknown,
+): ToolBlock & { toolName: 'render_ui' } => ({
+  type: 'tool',
+  toolName: 'render_ui',
+  toolCallId: 'test-render-ui-call-id',
+  input,
+})
+
+describe('RenderUIComponent', () => {
+  test('renders a button widget', () => {
+    const result = RenderUIComponent.render(
+      createToolBlock({
+        widget: {
+          type: 'button',
+          text: 'Open preview',
+          link: 'https://example.com/preview',
+          variant: 'primary',
+        },
+      }),
+      chatThemes.light,
+      {
+        availableWidth: 80,
+        indentationOffset: 0,
+        labelWidth: 10,
+      },
+    )
+
+    expect(result.collapsedPreview).toBe(
+      'Open preview -> https://example.com/preview',
+    )
+    expect(result.content).toBeDefined()
+    expect(renderToStaticMarkup(<>{result.content}</>)).toContain(
+      'Open preview',
+    )
+  })
+
+  test('does not render an unresolved Gravity reference', () => {
+    const result = RenderUIComponent.render(
+      createToolBlock({
+        widget: {
+          type: 'button',
+          text: 'Get your Resend API key',
+          link: {
+            source: 'gravity_index',
+            search_id: 'search-1',
+            service_slug: 'resend',
+          },
+        },
+      }),
+      chatThemes.light,
+      {
+        availableWidth: 80,
+        indentationOffset: 0,
+        labelWidth: 10,
+      },
+    )
+
+    expect(result.content).toBeNull()
+  })
+
+  test('returns no content for unsupported widgets', () => {
+    const result = RenderUIComponent.render(
+      createToolBlock({
+        widget: {
+          type: 'slider',
+          text: 'Volume',
+        },
+      }),
+      chatThemes.light,
+      {
+        availableWidth: 80,
+        indentationOffset: 0,
+        labelWidth: 10,
+      },
+    )
+
+    expect(result.content).toBeNull()
+  })
+})

package/src/components/tools/__tests__/run-terminal-command.test.ts

@@ -0,0 +1,233 @@
+import { describe, expect, test } from 'bun:test'
+
+import { parseTerminalOutput, RunTerminalCommandComponent } from '../run-terminal-command'
+
+import type { ChatTheme } from '../../../types/theme-system'
+import type { ToolBlock } from '../types'
+import type { ReactElement } from 'react'
+
+// Use ChatTheme import for proper typing
+
+// Type for the render result content element
+interface RenderContentElement extends ReactElement {
+  props: {
+    timeoutSeconds?: number
+  }
+}
+
+// Helper to create a mock tool block
+const createToolBlock = (
+  command: string,
+  output?: string,
+  timeoutSeconds?: number,
+): ToolBlock & { toolName: 'run_terminal_command' } => ({
+  type: 'tool',
+  toolName: 'run_terminal_command',
+  toolCallId: 'test-tool-call-id',
+  input: { command, ...(timeoutSeconds !== undefined && { timeout_seconds: timeoutSeconds }) },
+  output,
+})
+
+// Helper to create JSON output in the format the component expects
+const createJsonOutput = (stdout: string, stderr = ''): string => {
+  return JSON.stringify([
+    {
+      type: 'json',
+      value: {
+        command: 'test',
+        stdout,
+        stderr,
+        exitCode: 0,
+      },
+    },
+  ])
+}
+
+describe('RunTerminalCommandComponent', () => {
+  describe('render', () => {
+    test('returns content and collapsedPreview', () => {
+      const toolBlock = createToolBlock('ls -la', createJsonOutput('file1\nfile2'))
+      const mockTheme = {} as ChatTheme
+      const mockOptions = {
+        availableWidth: 80,
+        indentationOffset: 0,
+        labelWidth: 10,
+      }
+
+      const result = RunTerminalCommandComponent.render(toolBlock, mockTheme, mockOptions)
+
+      expect(result).toBeDefined()
+      expect(result.content).toBeDefined()
+      expect(result.collapsedPreview).toBe('$ ls -la')
+    })
+
+    test('preserves leading whitespace in stdout (tree output)', () => {
+      // Simulate tree command output with leading spaces for indentation
+      const treeOutput = `├── src
+│   ├── index.ts
+│   └── utils
+│       └── helper.ts
+└── package.json`
+
+      const { output } = parseTerminalOutput(createJsonOutput(treeOutput))
+
+      expect(output).toBe(treeOutput)
+      // Verify leading characters are preserved (├ has no leading space, but indented lines do)
+      expect(output?.startsWith('├')).toBe(true)
+      expect(output).toContain('│   ├')
+      expect(output).toContain('│       └')
+    })
+
+    test('preserves leading spaces in table-like output', () => {
+      // Simulate output with leading spaces for alignment
+      const tableOutput = `  Name        Size     Modified
+  file1.txt   1.2KB    2024-01-15
+  file2.txt   3.4MB    2024-01-16`
+
+      const { output } = parseTerminalOutput(createJsonOutput(tableOutput))
+
+      expect(output).toBe(tableOutput)
+      // Verify leading spaces are preserved
+      expect(output?.startsWith('  ')).toBe(true)
+    })
+
+    test('preserves leading spaces in indented code output', () => {
+      // Simulate indented output like grep with context
+      const indentedOutput = `    function hello() {
+        console.log("world")
+    }`
+
+      const { output } = parseTerminalOutput(createJsonOutput(indentedOutput))
+
+      expect(output).toBe(indentedOutput)
+      expect(output?.startsWith('    ')).toBe(true)
+    })
+
+    test('removes trailing whitespace while preserving leading whitespace', () => {
+      const outputWithTrailing = '  leading preserved\ntrailing removed   \n\n'
+      const expectedOutput = '  leading preserved\ntrailing removed'
+
+      const { output } = parseTerminalOutput(createJsonOutput(outputWithTrailing))
+
+      expect(output).toBe(expectedOutput)
+      // Leading spaces preserved
+      expect(output?.startsWith('  ')).toBe(true)
+      // Trailing whitespace removed
+      expect(output?.endsWith('removed')).toBe(true)
+    })
+
+    test('handles raw string output (non-JSON) and preserves leading whitespace', () => {
+      const rawOutput = '    indented raw output'
+      const { output } = parseTerminalOutput(rawOutput)
+
+      expect(output).toBe(rawOutput)
+      expect(output?.startsWith('    ')).toBe(true)
+    })
+
+    test('handles combined stdout and stderr with leading whitespace', () => {
+      const stdout = '  stdout with leading space\n'
+      const stderr = '  stderr with leading space'
+
+      const { output } = parseTerminalOutput(
+        JSON.stringify([
+          {
+            type: 'json',
+            value: { stdout, stderr, exitCode: 0 },
+          },
+        ]),
+      )
+
+      expect(output).toContain('  stdout with leading space')
+      expect(output).toContain('  stderr with leading space')
+    })
+
+    test('handles output that is only whitespace', () => {
+      const whitespaceOnly = '   '
+      const { output } = parseTerminalOutput(createJsonOutput(whitespaceOnly))
+
+      // trimEnd() on whitespace-only string returns empty string, which becomes null
+      expect(output).toBe(null)
+    })
+
+    test('handles empty output', () => {
+      const { output } = parseTerminalOutput(createJsonOutput(''))
+
+      expect(output).toBe(null)
+    })
+  })
+
+  describe('timeout extraction', () => {
+    const mockTheme = {} as ChatTheme
+    const mockOptions = {
+      availableWidth: 80,
+      indentationOffset: 0,
+      labelWidth: 10,
+    }
+
+    test('passes undefined timeoutSeconds when timeout_seconds not provided', () => {
+      const toolBlock = createToolBlock('ls -la', createJsonOutput('output'))
+
+      const result = RunTerminalCommandComponent.render(toolBlock, mockTheme, mockOptions)
+
+      expect((result.content as RenderContentElement).props.timeoutSeconds).toBeUndefined()
+    })
+
+    test('passes timeoutSeconds for positive timeout', () => {
+      const toolBlock = createToolBlock('npm test', createJsonOutput('tests passed'), 60)
+
+      const result = RunTerminalCommandComponent.render(toolBlock, mockTheme, mockOptions)
+
+      expect((result.content as RenderContentElement).props.timeoutSeconds).toBe(60)
+    })
+
+    test('passes timeoutSeconds for no timeout (-1)', () => {
+      const toolBlock = createToolBlock('long-running-task', createJsonOutput('done'), -1)
+
+      const result = RunTerminalCommandComponent.render(toolBlock, mockTheme, mockOptions)
+
+      expect((result.content as RenderContentElement).props.timeoutSeconds).toBe(-1)
+    })
+  })
+
+  describe('parseTerminalOutput', () => {
+    test('handles error messages', () => {
+      const errorPayload = JSON.stringify([
+        {
+          type: 'json',
+          value: {
+            command: 'test',
+            errorMessage: 'Something went wrong',
+            stdout: '',
+            stderr: '',
+            exitCode: 1,
+          },
+        },
+      ])
+
+      const { output, startingCwd } = parseTerminalOutput(errorPayload)
+
+      expect(output).toBe('Error: Something went wrong')
+      expect(startingCwd).toBeUndefined()
+    })
+
+    test('extracts startingCwd when present', () => {
+      const payloadWithCwd = JSON.stringify([
+        {
+          type: 'json',
+          value: {
+            command: 'pwd',
+            stdout: '/project\n',
+            stderr: '',
+            exitCode: 0,
+            startingCwd: '/project',
+          },
+        },
+      ])
+
+      const { output, startingCwd } = parseTerminalOutput(payloadWithCwd)
+
+      expect(output).toBe('/project')
+      expect(startingCwd).toBe('/project')
+    })
+  })
+})