@alumbwe/anvil 1.0.18 → 1.0.20

package/src/components/blocks/tool-block-group.tsx

@@ -0,0 +1,57 @@
+import React, { memo, type ReactNode } from 'react'
+
+import { ToolBranch } from './tool-branch'
+
+import type { ContentBlock } from '../../types/chat'
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+interface ToolBlockGroupProps {
+  toolBlocks: Extract<ContentBlock, { type: 'tool' }>[]
+  keyPrefix: string
+  startIndex: number
+  /** @deprecated No longer used for margin calculation */
+  nextIndex: number
+  /** @deprecated No longer used for margin calculation */
+  siblingBlocks: ContentBlock[]
+  availableWidth: number
+  onToggleCollapsed: (id: string) => void
+  markdownPalette: MarkdownPalette
+}
+
+export const ToolBlockGroup = memo(
+  ({
+    toolBlocks,
+    keyPrefix,
+    startIndex,
+    availableWidth,
+    onToggleCollapsed,
+    markdownPalette,
+  }: ToolBlockGroupProps): ReactNode => {
+    const groupNodes = toolBlocks
+      .map((toolBlock) => (
+        <ToolBranch
+          key={`${keyPrefix}-tool-${toolBlock.toolCallId}`}
+          toolBlock={toolBlock}
+          keyPrefix={`${keyPrefix}-tool-${toolBlock.toolCallId}`}
+          availableWidth={availableWidth}
+          onToggleCollapsed={onToggleCollapsed}
+          markdownPalette={markdownPalette}
+        />
+      ))
+      .filter(Boolean)
+
+    if (groupNodes.length === 0) return null
+
+    return (
+      <box
+        key={`${keyPrefix}-tool-group-${startIndex}`}
+        style={{
+          flexDirection: 'column',
+          gap: 0,
+        }}
+      >
+        {groupNodes}
+      </box>
+    )
+  },
+)

package/src/components/blocks/tool-branch.tsx

@@ -0,0 +1,206 @@
+import { memo, useCallback } from 'react'
+
+import { ContentWithMarkdown } from './content-with-markdown'
+import { useTheme } from '../../hooks/use-theme'
+import { useChatStore } from '../../state/chat-store'
+import { getToolDisplayInfo } from '../../utils/anvil-client'
+import { shouldCollapseToolByDefault } from '../../utils/constants'
+import { renderToolComponent } from '../tools/registry'
+import { ToolCallItem } from '../tools/tool-call-item'
+
+import type { ContentBlock } from '../../types/chat'
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+interface ToolBranchProps {
+  toolBlock: Extract<ContentBlock, { type: 'tool' }>
+  keyPrefix: string
+  availableWidth: number
+  onToggleCollapsed: (id: string) => void
+  markdownPalette: MarkdownPalette
+}
+
+/**
+ * Render tool input for display. Tool input is user/agent-supplied and can
+ * carry cyclic references (a custom tool's raw return value); break cycles so
+ * a single bad input can't take down the TUI render.
+ */
+function renderToolInput(input: unknown): string {
+  if (input === undefined) return ''
+  try {
+    return JSON.stringify(input, null, 2)
+  } catch {
+    const ancestors: unknown[] = []
+    return JSON.stringify(input, function (this: unknown, _key, value) {
+      if (ancestors.length > 0) {
+        const thisPos = ancestors.indexOf(this)
+        if (thisPos !== -1) {
+          ancestors.splice(thisPos + 1)
+        } else {
+          ancestors.push(this)
+        }
+        if (
+          typeof value === 'object' &&
+          value !== null &&
+          ancestors.includes(value)
+        ) {
+          return '[Circular]'
+        }
+      } else {
+        ancestors.push(value)
+      }
+      return value
+    }, 2)
+  }
+}
+
+export const ToolBranch = memo(
+  ({
+    toolBlock,
+    keyPrefix,
+    availableWidth,
+    onToggleCollapsed,
+    markdownPalette,
+  }: ToolBranchProps) => {
+    const theme = useTheme()
+    // Derive streaming boolean for this specific tool to avoid re-renders when other tools/agents change
+    const isStreaming = useChatStore((state) => state.streamingAgents.has(toolBlock.toolCallId))
+
+    const sanitizePreview = (value: string): string =>
+      value.replace(/[#*_`~\[\]()]/g, '').trim()
+
+    if (toolBlock.toolName === 'end_turn') {
+      return null
+    }
+    if (toolBlock.toolName === 'ask_user') {
+      return null
+    }
+    if ('includeToolCall' in toolBlock && toolBlock.includeToolCall === false) {
+      return null
+    }
+
+    const displayInfo = getToolDisplayInfo(toolBlock.toolName)
+    
+    // Check if there's a registered custom component for this tool
+    const toolRenderConfig = renderToolComponent(toolBlock, theme, {
+      availableWidth,
+      indentationOffset: 0,
+      previewPrefix: '',
+      labelWidth: 0,
+    })
+    
+    // Tools without a registered component (fallback rendering) should be collapsed by default
+    const hasRegisteredComponent = toolRenderConfig !== undefined
+    const isCollapsed = toolBlock.isCollapsed ?? 
+      (hasRegisteredComponent ? shouldCollapseToolByDefault(toolBlock.toolName) : true)
+
+    const inputContent = `\`\`\`json\n${renderToolInput(toolBlock.input)}\n\`\`\``
+    const codeBlockLang =
+      toolBlock.toolName === 'run_terminal_command' ? '' : 'yaml'
+    const resultContent = toolBlock.output
+      ? `\n\n**Result:**\n\`\`\`${codeBlockLang}\n${toolBlock.output}\n\`\`\``
+      : ''
+    const fullContent = inputContent + resultContent
+
+    const lines = fullContent.split('\n').filter((line) => line.trim())
+    const firstLine = lines[0] || ''
+    const lastLine = lines[lines.length - 1] || firstLine
+    const commandPreview =
+      toolBlock.toolName === 'run_terminal_command' &&
+      toolBlock.input &&
+      typeof toolBlock.input === 'object' &&
+      'command' in toolBlock.input &&
+      typeof toolBlock.input.command === 'string'
+        ? `$ ${toolBlock.input.command.trim()}`
+        : null
+
+    const streamingPreview = isStreaming
+      ? commandPreview ?? `${sanitizePreview(firstLine)}...`
+      : ''
+
+    const getToolFinishedPreview = useCallback(
+      (commandPrev: string | null, lastLn: string): string => {
+        if (commandPrev) {
+          return commandPrev
+        }
+
+        if (toolBlock.toolName === 'run_terminal_command' && toolBlock.output) {
+          const outputLines = toolBlock.output
+            .split('\n')
+            .filter((line) => line.trim())
+          const lastThreeLines = outputLines.slice(-3)
+          const hasMoreLines = outputLines.length > 3
+          const preview = lastThreeLines.join('\n')
+          return hasMoreLines ? `...\n${preview}` : preview
+        }
+
+        return sanitizePreview(lastLn)
+      },
+      [toolBlock],
+    )
+
+    const finishedPreview = !isStreaming
+      ? toolRenderConfig?.collapsedPreview ??
+        getToolFinishedPreview(commandPreview, lastLine)
+      : ''
+
+    const agentMarkdownOptions = {
+      codeBlockWidth: Math.max(10, availableWidth - 12),
+      palette: {
+        ...markdownPalette,
+        codeTextFg: theme.foreground,
+      },
+    }
+
+    const displayContent = (
+      <ContentWithMarkdown
+        content={fullContent}
+        isStreaming={false}
+        codeBlockWidth={agentMarkdownOptions.codeBlockWidth}
+        palette={agentMarkdownOptions.palette}
+      />
+    )
+
+    const renderableDisplayContent =
+      displayContent === null ||
+      displayContent === undefined ||
+      displayContent === false ||
+      displayContent === '' ? null : (
+        <text
+          fg={theme.foreground}
+          style={{ wrapMode: 'word' }}
+          attributes={
+            theme.messageTextAttributes && theme.messageTextAttributes !== 0
+              ? theme.messageTextAttributes
+              : undefined
+          }
+        >
+          {displayContent}
+        </text>
+      )
+
+    const headerName = displayInfo.name
+
+    const handleToggle = useCallback(() => {
+      onToggleCollapsed(toolBlock.toolCallId)
+    }, [onToggleCollapsed, toolBlock.toolCallId])
+
+    return (
+      <box key={keyPrefix}>
+        {toolRenderConfig ? (
+          toolRenderConfig.content
+        ) : (
+          <ToolCallItem
+            name={headerName}
+            content={renderableDisplayContent}
+            isCollapsed={isCollapsed}
+            isStreaming={isStreaming}
+            streamingPreview={streamingPreview}
+            finishedPreview={finishedPreview}
+            onToggle={handleToggle}
+            titleSuffix={undefined}
+          />
+        )}
+      </box>
+    )
+  },
+)

package/src/components/blocks/user-content-copy.tsx

@@ -0,0 +1,157 @@
+import { TextAttributes } from '@opentui/core'
+import React, { memo } from 'react'
+
+import { CopyButton } from '../copy-button'
+import { trimNewlines } from './block-helpers'
+import { ContentWithMarkdown } from './content-with-markdown'
+
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+interface UserContentWithCopyButtonProps {
+  content: string
+  messageId: string
+  isLoading: boolean
+  isComplete?: boolean
+  isUser: boolean
+  textColor: string
+  codeBlockWidth: number
+  palette: MarkdownPalette
+  showCopyButton: boolean
+}
+
+export const UserContentWithCopyButton = memo(
+  ({
+    content,
+    messageId,
+    isLoading,
+    isComplete,
+    isUser,
+    textColor,
+    codeBlockWidth,
+    palette,
+    showCopyButton,
+  }: UserContentWithCopyButtonProps) => {
+    const isStreamingMessage = isLoading || !isComplete
+    const normalizedContent = isStreamingMessage
+      ? trimNewlines(content)
+      : content.trim()
+
+    const hasContent = normalizedContent.length > 0
+
+    if (!hasContent) {
+      return null
+    }
+
+    if (!showCopyButton) {
+      return (
+        <text
+          key={`message-content-${messageId}`}
+          style={{ wrapMode: 'word', fg: textColor }}
+          attributes={isUser ? TextAttributes.ITALIC : undefined}
+        >
+          <ContentWithMarkdown
+            content={normalizedContent}
+            isStreaming={isStreamingMessage}
+            codeBlockWidth={codeBlockWidth}
+            palette={palette}
+          />
+        </text>
+      )
+    }
+
+    return (
+      <UserTextWithInlineCopy
+        messageId={messageId}
+        content={content}
+        normalizedContent={normalizedContent}
+        isStreamingMessage={isStreamingMessage}
+        textColor={textColor}
+        codeBlockWidth={codeBlockWidth}
+        palette={palette}
+      />
+    )
+  },
+)
+
+interface UserTextWithInlineCopyProps {
+  messageId: string
+  content: string
+  normalizedContent: string
+  isStreamingMessage: boolean
+  textColor: string
+  codeBlockWidth: number
+  palette: MarkdownPalette
+}
+
+const UserTextWithInlineCopy = memo(
+  ({
+    messageId,
+    content,
+    normalizedContent,
+    isStreamingMessage,
+    textColor,
+    codeBlockWidth,
+    palette,
+  }: UserTextWithInlineCopyProps) => {
+    return (
+      <CopyButton
+        textToCopy={content}
+        style={{ wrapMode: 'word', fg: textColor }}
+      >
+        <span attributes={TextAttributes.ITALIC}>
+          <ContentWithMarkdown
+            content={normalizedContent}
+            isStreaming={isStreamingMessage}
+            codeBlockWidth={codeBlockWidth}
+            palette={palette}
+          />
+        </span>
+      </CopyButton>
+    )
+  },
+)
+
+interface UserBlockTextWithInlineCopyProps {
+  content: string
+  contentToCopy: string
+  isStreaming: boolean
+  textColor: string
+  codeBlockWidth: number
+  palette: MarkdownPalette
+  marginTop: number
+  marginBottom: number
+}
+
+export const UserBlockTextWithInlineCopy = memo(
+  ({
+    content,
+    contentToCopy,
+    isStreaming,
+    textColor,
+    codeBlockWidth,
+    palette,
+    marginTop,
+    marginBottom,
+  }: UserBlockTextWithInlineCopyProps) => {
+    return (
+      <CopyButton
+        textToCopy={contentToCopy}
+        style={{
+          wrapMode: 'word',
+          fg: textColor,
+          marginTop,
+          marginBottom,
+        }}
+      >
+        <span attributes={TextAttributes.ITALIC}>
+          <ContentWithMarkdown
+            content={content}
+            isStreaming={isStreaming}
+            codeBlockWidth={codeBlockWidth}
+            palette={palette}
+          />
+        </span>
+      </CopyButton>
+    )
+  },
+)

package/src/components/bottom-banner.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+
+import { Button } from './button'
+import { useTerminalLayout } from '../hooks/use-terminal-layout'
+import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+import type { ChatTheme } from '../types/theme-system'
+
+/**
+ * Theme color keys that can be used for banner colors.
+ * Add new color keys here as needed.
+ */
+export type BannerColorKey = keyof ChatTheme
+
+/**
+ * Configuration interface for bottom banners.
+ * Use this to define new banner types with consistent styling.
+ */
+export interface BottomBannerConfig {
+  /** Theme color key for the border */
+  borderColorKey: BannerColorKey
+  /** Override border color directly (takes precedence over borderColorKey) */
+  borderColor?: string
+  /** Theme color key for text, defaults to borderColorKey */
+  textColorKey?: BannerColorKey
+  /** Override text color directly */
+  textColor?: string
+  /** Simple text content */
+  text?: string
+  /** Custom children content (used instead of text) */
+  children?: React.ReactNode
+  /** Called when close button is clicked. If not provided, no close button is shown. */
+  onClose?: () => void
+  /** Which border sides to render. Defaults to ['bottom', 'left', 'right']. */
+  border?: ('top' | 'bottom' | 'left' | 'right')[]
+}
+
+export type BottomBannerProps = BottomBannerConfig
+
+/**
+ * Unified bottom banner component.
+ *
+ * Provides consistent styling and behavior for all banners that appear below the input.
+ *
+ * @example Simple text banner with close button:
+ * ```tsx
+ * <BottomBanner
+ *   borderColorKey="warning"
+ *   text="This is a warning message"
+ *   onClose={() => setInputMode('default')}
+ * />
+ * ```
+ *
+ * @example Custom content banner:
+ * ```tsx
+ * <BottomBanner borderColorKey="imageCardBorder">
+ *   <text>Custom content here</text>
+ *   <box><ImageCard ... /></box>
+ * </BottomBanner>
+ * ```
+ */
+export const BottomBanner: React.FC<BottomBannerProps> = ({
+  borderColorKey,
+  borderColor: borderColorOverride,
+  textColorKey,
+  textColor: textColorOverride,
+  text,
+  children,
+  onClose,
+  border,
+}) => {
+  const { width, terminalWidth } = useTerminalLayout()
+  const theme = useTheme()
+  const [isCloseHovered, setIsCloseHovered] = useState(false)
+
+  // Resolve colors from theme or use overrides
+  const themeRecord = theme as unknown as Record<string, string>
+  const borderColor = borderColorOverride ?? themeRecord[borderColorKey]
+  const textColor =
+    textColorOverride ??
+    (textColorKey ? themeRecord[textColorKey] : borderColor)
+
+  const hasCloseButton = onClose !== undefined
+  const hasTextContent = text !== undefined && children === undefined
+
+  return (
+    <box
+      key={terminalWidth}
+      style={{
+        marginLeft: width.is('sm') ? 0 : 1,
+        marginRight: width.is('sm') ? 0 : 1,
+        borderStyle: 'single',
+        borderColor: borderColor,
+        flexDirection: hasCloseButton ? 'row' : 'column',
+        justifyContent: hasCloseButton ? 'space-between' : undefined,
+        paddingLeft: 1,
+        paddingRight: 1,
+        marginTop: 0,
+        marginBottom: 0,
+      }}
+      border={border ?? ['bottom', 'left', 'right']}
+      customBorderChars={BORDER_CHARS}
+    >
+      {hasTextContent ? (
+        // Simple text content with optional close button
+        <>
+          <text
+            style={{
+              fg: textColor,
+              wrapMode: 'word',
+              flexShrink: 1,
+              marginRight: hasCloseButton ? 3 : 0,
+            }}
+          >
+            {text}
+          </text>
+        </>
+      ) : (
+        // Custom children content
+        children
+      )}
+      {hasCloseButton && (
+        <Button
+          onClick={onClose}
+          onMouseOver={() => setIsCloseHovered(true)}
+          onMouseOut={() => setIsCloseHovered(false)}
+        >
+          <text style={{ fg: isCloseHovered ? theme.error : theme.muted }}>
+            x
+          </text>
+        </Button>
+      )}
+    </box>
+  )
+}

package/src/components/build-mode-buttons.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react'
+
+import { Button } from './button'
+import { IS_ANVIL } from '../utils/constants'
+import { useTerminalLayout } from '../hooks/use-terminal-layout'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+import type { ChatTheme } from '../types/theme-system'
+
+export const BuildModeButtons = ({
+  theme,
+  onBuildFast,
+  onBuildMax,
+  onBuildLite,
+}: {
+  theme: ChatTheme
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+}) => {
+  if (IS_ANVIL) return null
+
+  const [hoveredButton, setHoveredButton] = useState<'fast' | 'max' | 'lite' | null>(
+    null,
+  )
+  const { width } = useTerminalLayout()
+  const isNarrow = width.is('xs')
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 1,
+      }}
+    >
+      {isNarrow ? null : (
+        <text style={{ wrapMode: 'none' }} selectable={false}>
+          <span fg={theme.secondary}>Choose an option to build this plan:</span>
+        </text>
+      )}
+      <box
+        style={{
+          flexDirection: 'row',
+          gap: 1,
+        }}
+      >
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: 2,
+            paddingRight: 2,
+            borderStyle: 'single',
+            borderColor:
+              hoveredButton === 'fast' ? theme.foreground : theme.secondary,
+            customBorderChars: BORDER_CHARS,
+          }}
+          onClick={onBuildFast}
+          onMouseOver={() => setHoveredButton('fast')}
+          onMouseOut={() => setHoveredButton(null)}
+        >
+          <text wrapMode="none">
+            <span fg={theme.foreground}>Build DEFAULT</span>
+          </text>
+        </Button>
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: 2,
+            paddingRight: 2,
+            borderStyle: 'single',
+            borderColor:
+              hoveredButton === 'max' ? theme.foreground : theme.secondary,
+            customBorderChars: BORDER_CHARS,
+          }}
+          onClick={onBuildMax}
+          onMouseOver={() => setHoveredButton('max')}
+          onMouseOut={() => setHoveredButton(null)}
+        >
+          <text wrapMode="none">
+            <span fg={theme.foreground}>Build MAX</span>
+          </text>
+        </Button>
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: 2,
+            paddingRight: 2,
+            borderStyle: 'single',
+            borderColor:
+              hoveredButton === 'lite' ? theme.foreground : theme.secondary,
+            customBorderChars: BORDER_CHARS,
+          }}
+          onClick={onBuildLite}
+          onMouseOver={() => setHoveredButton('lite')}
+          onMouseOut={() => setHoveredButton(null)}
+        >
+          <text wrapMode="none">
+            <span fg={theme.foreground}>Build LITE</span>
+          </text>
+        </Button>
+      </box>
+    </box>
+  )
+}