@alumbwe/anvil 1.0.0 → 1.0.1

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

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

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

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

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

@@ -1,110 +0,0 @@
-import { useState } from 'react'
-
-import { Button } from './button'
-import { IS_FREEBUFF } 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_FREEBUFF) 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>
-  )
-}