@alumbwe/anvil 1.0.0

package/src/components/suggestion-menu.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react'
+
+import { Button } from './button'
+import { HighlightedSubsequenceText } from './highlighted-text'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+
+export interface SuggestionItem {
+  id: string
+  label: string
+  labelHighlightIndices?: number[] | null
+  description: string
+  descriptionHighlightIndices?: number[] | null
+}
+
+interface SuggestionMenuProps {
+  items: SuggestionItem[]
+  selectedIndex: number
+  maxVisible: number
+  prefix?: string
+  onItemClick?: (index: number) => void
+  /** Muted hint line rendered below the suggestions */
+  footer?: string
+}
+
+export const SuggestionMenu = ({
+  items,
+  selectedIndex,
+  maxVisible,
+  prefix = '/',
+  onItemClick,
+  footer,
+}: SuggestionMenuProps) => {
+  const theme = useTheme()
+  const { terminalWidth } = useTerminalDimensions()
+  const screenPadding = 4
+  const menuWidth = Math.max(10, terminalWidth - screenPadding * 2)
+
+  // Hover state: only highlight on hover after user has moved mouse
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [hasHoveredSinceOpen, setHasHoveredSinceOpen] = useState(false)
+
+  // Reset hover state when items change (new menu session)
+  useEffect(() => {
+    setHasHoveredSinceOpen(false)
+    setHoveredIndex(null)
+  }, [items])
+
+  if (items.length === 0) {
+    return null
+  }
+
+  const effectivePrefix = prefix ?? ''
+
+  const clampedSelected = Math.min(
+    Math.max(selectedIndex, 0),
+    Math.max(items.length - 1, 0),
+  )
+  const visibleCount = Math.min(Math.max(maxVisible, 1), items.length)
+
+  const maxStart = Math.max(items.length - visibleCount, 0)
+  const idealStart = clampedSelected - Math.floor((visibleCount - 1) / 2)
+  const start = Math.max(0, Math.min(idealStart, maxStart))
+  const visibleItems = items.slice(start, start + visibleCount)
+
+  // Calculate max label length for alignment
+  const maxLabelLength = Math.max(
+    ...visibleItems.map(
+      (item) => effectivePrefix.length + item.label.length,
+    ),
+  )
+
+  // Find the longest description to determine if we can use same-line layout
+  const maxDescriptionLength = Math.max(
+    ...visibleItems.map((item) => item.description.length),
+  )
+
+  // Check if all items can fit on same line with aligned descriptions
+  const minWidthForSameLine = maxLabelLength + 2 + maxDescriptionLength
+  const useSameLine = menuWidth >= minWidthForSameLine
+
+  const renderSuggestionItem = (item: SuggestionItem, idx: number) => {
+    const absoluteIndex = start + idx
+    const isSelected = absoluteIndex === clampedSelected
+    const isHovered = hasHoveredSinceOpen && absoluteIndex === hoveredIndex
+    const isHighlighted = isSelected || isHovered
+    const labelLength = effectivePrefix.length + item.label.length
+    const textColor = isHighlighted ? theme.foreground : theme.inputFg
+    const descriptionColor = isHighlighted ? theme.foreground : theme.muted
+    const highlightColor = theme.primary
+
+    const handleClick = onItemClick ? () => onItemClick(absoluteIndex) : undefined
+    const handleMouseOver = () => {
+      setHoveredIndex(absoluteIndex)
+      setHasHoveredSinceOpen(true)
+    }
+
+    if (useSameLine) {
+      // Calculate padding to align descriptions
+      const paddingLength = maxLabelLength - labelLength
+      const padding = ' '.repeat(paddingLength)
+      // Wide terminal: description on same line with 2-space gap
+      return (
+        <Button
+          key={item.id}
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
+          style={{
+            flexDirection: 'column',
+            gap: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            backgroundColor: isHighlighted ? theme.surfaceHover : theme.background,
+            width: '100%',
+          }}
+        >
+          <text
+            style={{
+              fg: textColor,
+              marginBottom: 0,
+            }}
+          >
+            <span fg={theme.primary}>{effectivePrefix}</span>
+            <HighlightedSubsequenceText
+              text={item.label}
+              indices={item.labelHighlightIndices}
+              color={textColor}
+              highlightColor={highlightColor}
+            />
+            <span>{padding}  </span>
+            <HighlightedSubsequenceText
+              text={item.description}
+              indices={item.descriptionHighlightIndices}
+              color={descriptionColor}
+              highlightColor={highlightColor}
+            />
+          </text>
+        </Button>
+      )
+    } else {
+      // Narrow terminal: description on next line
+      return (
+        <Button
+          key={item.id}
+          onClick={handleClick}
+          onMouseOver={handleMouseOver}
+          style={{
+            flexDirection: 'column',
+            gap: 0,
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            backgroundColor: isHighlighted ? theme.surfaceHover : theme.background,
+            width: '100%',
+          }}
+        >
+          <text
+            style={{
+              fg: textColor,
+              marginBottom: 0,
+            }}
+          >
+            <span fg={theme.primary}>{effectivePrefix}</span>
+            <HighlightedSubsequenceText
+              text={item.label}
+              indices={item.labelHighlightIndices}
+              color={textColor}
+              highlightColor={highlightColor}
+            />
+          </text>
+          <text
+            style={{
+              fg: descriptionColor,
+              marginBottom: 0,
+              marginLeft: 2,
+            }}
+          >
+            <HighlightedSubsequenceText
+              text={item.description}
+              indices={item.descriptionHighlightIndices}
+              color={descriptionColor}
+              highlightColor={highlightColor}
+            />
+          </text>
+        </Button>
+      )
+    }
+  }
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        backgroundColor: theme.surface,
+        width: '100%',
+      }}
+      onMouseOut={() => setHoveredIndex(null)}
+    >
+      {visibleItems.map(renderSuggestionItem)}
+      {footer ? (
+        <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+          <text style={{ fg: theme.muted, wrapMode: 'word' }}>{footer}</text>
+        </box>
+      ) : null}
+    </box>
+  )
+}

package/src/components/terminal-command-display.tsx

@@ -0,0 +1,151 @@
+import { TextAttributes } from '@opentui/core'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { useTerminalDimensions } from '../hooks/use-terminal-dimensions'
+import { useTheme } from '../hooks/use-theme'
+import { formatTimeout } from '../utils/format-timeout'
+import { getLastNVisualLines } from '../utils/text-layout'
+
+interface TerminalCommandDisplayProps {
+  command: string
+  output: string | null
+  /** Whether to show an expandable "Show more" button for long output */
+  expandable?: boolean
+  /** Max lines to show before truncation (default 5 for expandable, 10 for non-expandable) */
+  maxVisibleLines?: number
+  /** Whether command is still running */
+  isRunning?: boolean
+  /** Working directory where the command was run */
+  cwd?: string
+  /** Timeout in seconds for the command */
+  timeoutSeconds?: number
+  /** Optional width override for wrapping calculations */
+  availableWidth?: number
+}
+
+/**
+ * Shared component for displaying terminal command with output.
+ * Used in both the ghost message (pending bash) and message history.
+ */
+export const TerminalCommandDisplay = ({
+  command,
+  output,
+  expandable = true,
+  maxVisibleLines,
+  isRunning = false,
+  timeoutSeconds,
+  availableWidth,
+}: TerminalCommandDisplayProps) => {
+  const theme = useTheme()
+  const { separatorWidth } = useTerminalDimensions()
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // Default max lines depends on whether expandable
+  const defaultMaxLines = expandable ? 5 : 10
+  const maxLines = maxVisibleLines ?? defaultMaxLines
+
+  // Format timeout display - show when provided and not the default (30s)
+  const DEFAULT_TIMEOUT_SECONDS = 30
+  const timeoutLabel =
+    timeoutSeconds !== undefined && timeoutSeconds !== DEFAULT_TIMEOUT_SECONDS
+      ? formatTimeout(timeoutSeconds)
+      : null
+
+  // Command header - shared between output and no-output cases
+  const commandHeader = (
+    <text style={{ wrapMode: 'word' }}>
+      <span fg={theme.success}>$ </span>
+      <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+        {command}
+      </span>
+      {timeoutLabel && (
+        <span fg={theme.muted} attributes={TextAttributes.DIM}>
+          {' '}({timeoutLabel})
+        </span>
+      )}
+    </text>
+  )
+
+  // No output case
+  if (!output) {
+    return (
+      <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+        {commandHeader}
+        {/* Running indicator */}
+        {isRunning && <text fg={theme.muted}>...</text>}
+      </box>
+    )
+  }
+
+  // With output - calculate visual lines
+  const width = Math.max(10, availableWidth ?? separatorWidth)
+  const allLines = output.split('\n')
+
+  // Calculate total visual lines across all output lines
+  let totalVisualLines = 0
+  const visualLinesByOriginalLine: string[][] = []
+
+  for (const line of allLines) {
+    const { lines: wrappedLines } = getLastNVisualLines(line, width, Infinity)
+    visualLinesByOriginalLine.push(wrappedLines)
+    totalVisualLines += wrappedLines.length
+  }
+
+  const hasMoreLines = totalVisualLines > maxLines
+  const hiddenLinesCount = totalVisualLines - maxLines
+
+  // Build display output
+  let displayOutput: string
+  if (isExpanded || !hasMoreLines) {
+    displayOutput = output
+  } else {
+    // Take first N visual lines
+    const displayLines: string[] = []
+    let count = 0
+
+    for (const wrappedLines of visualLinesByOriginalLine) {
+      for (const line of wrappedLines) {
+        if (count >= maxLines) break
+        displayLines.push(line)
+        count++
+      }
+      if (count >= maxLines) break
+    }
+
+    displayOutput = displayLines.join('\n')
+  }
+
+  return (
+    <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+      {commandHeader}
+      {/* Output */}
+      <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+        {hasMoreLines && !expandable && (
+          <text fg={theme.muted} attributes={TextAttributes.DIM}>
+            ... ({hiddenLinesCount} more lines above)
+          </text>
+        )}
+        <text fg={theme.muted} style={{ wrapMode: 'word' }}>
+          {displayOutput}
+        </text>
+        {hasMoreLines && expandable && (
+          <Button
+            style={{ marginTop: 0 }}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            <text
+              fg={theme.secondary}
+              style={{ wrapMode: 'word' }}
+              attributes={TextAttributes.UNDERLINE}
+            >
+              {isExpanded
+                ? 'Show less'
+                : `Show ${hiddenLinesCount} more ${hiddenLinesCount === 1 ? 'line' : 'lines'}`}
+            </text>
+          </Button>
+        )}
+      </box>
+    </box>
+  )
+}

package/src/components/terminal-link.tsx

@@ -0,0 +1,97 @@
+import React, { useCallback, useMemo, useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+
+type FormatLinesFn = (text: string, maxWidth?: number) => string[]
+
+export interface TerminalLinkProps {
+  text: string
+  maxWidth?: number
+  formatLines?: FormatLinesFn
+  color?: string
+  activeColor?: string
+  underlineOnHover?: boolean
+  isActive?: boolean
+  onActivate?: () => void | Promise<any>
+  containerStyle?: Record<string, unknown>
+  lineWrap?: boolean
+  inline?: boolean
+}
+
+const defaultFormatLines: FormatLinesFn = (text) => [text]
+const PREFIXES_TO_STRIP = ['https://', 'http://']
+
+export const TerminalLink: React.FC<TerminalLinkProps> = ({
+  text,
+  maxWidth,
+  formatLines = defaultFormatLines,
+  color,
+  activeColor,
+  underlineOnHover = true,
+  isActive = false,
+  onActivate,
+  containerStyle,
+  lineWrap = false,
+  inline = false,
+}) => {
+  const theme = useTheme()
+
+  // Use theme colors as defaults if not provided
+  const linkColor = color ?? theme.link
+  const linkActiveColor = activeColor ?? theme.success
+  const [isHovered, setIsHovered] = useState(false)
+
+  const displayLines = useMemo(() => {
+    let displayText = text.trim()
+    for (const prefix of PREFIXES_TO_STRIP) {
+      if (displayText.startsWith(prefix)) {
+        displayText = displayText.slice(prefix.length)
+      }
+    }
+
+    const formatted = formatLines(displayText, maxWidth)
+    if (formatted.length <= 1) {
+      return formatted
+    }
+    return formatted.filter((line) => line.trim().length > 0)
+  }, [formatLines, maxWidth, text])
+
+  const displayColor = isActive ? linkActiveColor : linkColor
+  const shouldUnderline = underlineOnHover && isHovered
+
+  const handleActivate = useCallback(() => {
+    if (onActivate) {
+      onActivate()
+    }
+  }, [onActivate])
+
+  // For inline mode, render without hover/click support (spans don't support mouse events)
+  if (inline) {
+    return <span fg={displayColor}>{text}</span>
+  }
+
+  return (
+    <Button
+      style={{
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: '100%',
+        gap: 0,
+        ...containerStyle,
+      }}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseOut={() => setIsHovered(false)}
+      onClick={handleActivate}
+    >
+      {displayLines.map((line: string, index: number) => {
+        const coloredText = <span fg={displayColor}>{line}</span>
+        return (
+          <text key={index} style={{ wrapMode: lineWrap ? 'word' : 'none' }}>
+            {shouldUnderline ? <u>{coloredText}</u> : coloredText}
+          </text>
+        )
+      })}
+    </Button>
+  )
+}

package/src/components/terminal-thinking-orb.tsx

@@ -0,0 +1,95 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useEffect, useState } from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+
+/**
+ * A terminal-native take on the `thinking-orbs` aesthetic: a small dotted
+ * "thought orb" built from Unicode particles, animated in place.
+ *
+ * The real `thinking-orbs` package renders a web `<canvas>` and cannot paint
+ * inside the OpenTUI terminal renderer (no DOM), so this component recreates
+ * the same visual language — sparse orbiting dots on a transparent field —
+ * with text cells. Each frame advances a few dots around a 2×2 mini-orb, and
+ * the dot count/look changes with the state, mirroring the npm package's
+ * nine-verb idea:
+ *
+ *  - waiting:    two dots, slow orbit (the model is thinking)
+ *  - working:    three dots, steady orbit (it is doing the work)
+ *  - searching:  one sweeping dot (scanning)
+ *  - connecting: dots blink in (wiring up)
+ *  - retrying:   a single pulsing dot (hiccup)
+ *
+ * With `variant="spark"` it swaps to a rotating spark glyph — ✻ → ✺ → ✹ → ✸ —
+ * the same "worked for 39s" rotating marker used by Command Code's loading
+ * states, rendered as a single crisp cell.
+ */
+
+type OrbState =
+  | 'waiting'
+  | 'working'
+  | 'searching'
+  | 'connecting'
+  | 'retrying'
+
+const ORB_FRAMES: Record<string, string[]> = {
+  // Braille 2×4 dot cells read as a tiny orbiting particle field.
+  waiting: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧'],
+  working: ['⠁', '⠉', '⠙', '⠸', '⠼', '⠴', '⠦', '⠇'],
+  searching: ['⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'],
+  connecting: ['⡀', '⠄', '⠂', '⠁', '⠉', '⠘', '⠨', '⢀'],
+  retrying: ['⠄', '⡆', '⣶', '⣿', '⣶', '⡆', '⠄', '⠂'],
+}
+
+// Rotating spark glyphs — the Command Code-style rotating marker.
+const SPARK_FRAMES = ['✻', '✺', '✹', '✸', '✹', '✺']
+
+const ORB_INTERVAL_MS: Record<OrbState, number> = {
+  waiting: 140,
+  working: 110,
+  searching: 130,
+  connecting: 150,
+  retrying: 180,
+}
+
+interface TerminalThinkingOrbProps {
+  /** Which animation to show. @default 'working' */
+  state?: OrbState
+  /** Spark (✻ rotation) or dotted braille particle field. @default 'dots' */
+  variant?: 'dots' | 'spark'
+  /** Animation speed multiplier on top of the state's baked speed. @default 1 */
+  speed?: number
+  /** Color override; defaults to theme.primary (violet). */
+  color?: string
+}
+
+export const TerminalThinkingOrb = ({
+  state = 'working',
+  variant = 'dots',
+  speed = 1,
+  color,
+}: TerminalThinkingOrbProps) => {
+  const theme = useTheme()
+  const [frame, setFrame] = useState(0)
+
+  const frames =
+    variant === 'spark' ? SPARK_FRAMES : (ORB_FRAMES[state] ?? ORB_FRAMES.working)
+  const interval = Math.max(
+    40,
+    (variant === 'spark' ? 140 : ORB_INTERVAL_MS[state] ?? 110) / speed,
+  )
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setFrame((prev) => (prev + 1) % frames.length)
+    }, interval)
+    return () => clearInterval(id)
+  }, [interval, frames.length])
+
+  return (
+    <span fg={color ?? theme.primary} attributes={TextAttributes.BOLD}>
+      {frames[frame]}
+    </span>
+  )
+}
+

package/src/components/text-attachment-card.tsx

@@ -0,0 +1,77 @@
+import { AttachmentCard } from './attachment-card'
+import { useTheme } from '../hooks/use-theme'
+
+import type { PendingTextAttachment } from '../types/store'
+
+const TEXT_CARD_WIDTH = 24
+const MAX_PREVIEW_LINES = 2
+// Available width for text: card width - 2 (border) - 2 (padding) = 20 chars per line
+const TEXT_CONTENT_WIDTH = TEXT_CARD_WIDTH - 4
+
+interface TextAttachmentCardProps {
+  attachment: PendingTextAttachment | { preview: string; charCount: number }
+  onRemove?: () => void
+  showRemoveButton?: boolean
+}
+
+export const TextAttachmentCard = ({
+  attachment,
+  onRemove,
+  showRemoveButton = true,
+}: TextAttachmentCardProps) => {
+  const theme = useTheme()
+
+  // Preview is already processed (newlines replaced with spaces)
+  // Show as much as fits in the available space (width × lines)
+  const maxPreviewChars = TEXT_CONTENT_WIDTH * MAX_PREVIEW_LINES
+  const displayPreview =
+    attachment.preview.slice(0, maxPreviewChars) +
+    (attachment.preview.length > maxPreviewChars ? '…' : '')
+
+  return (
+    <AttachmentCard
+      width={TEXT_CARD_WIDTH}
+      onRemove={onRemove}
+      showRemoveButton={showRemoveButton}
+    >
+      {/* Preview area */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          height: 3,
+          justifyContent: 'center',
+        }}
+      >
+        <text
+          style={{
+            fg: theme.foreground,
+            wrapMode: 'word',
+          }}
+        >
+          {displayPreview || '(empty)'}
+        </text>
+      </box>
+
+      {/* Footer with icon and char count */}
+      <box
+        style={{
+          paddingLeft: 1,
+          paddingRight: 1,
+          flexDirection: 'row',
+          gap: 1,
+        }}
+      >
+        <text style={{ fg: theme.info }}>📄</text>
+        <text
+          style={{
+            fg: theme.muted,
+            wrapMode: 'none',
+          }}
+        >
+          {attachment.charCount.toLocaleString()} chars
+        </text>
+      </box>
+    </AttachmentCard>
+  )
+}