@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/suggestion-menu.tsx

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

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

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

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

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