@alumbwe/anvil 1.0.0

package/src/components/segmented-control.tsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react'
+import stringWidth from 'string-width'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+
+import type { ChatTheme } from '../types/theme-system'
+
+export interface Segment {
+  id: string
+  label: string
+  isBold?: boolean
+  isSelected?: boolean
+  defaultHighlighted?: boolean // Highlighted when nothing else is hovered
+  disabled?: boolean // Gray out and de-emphasize disabled items
+}
+
+/**
+ * SegmentedControlProps
+ *
+ * Renders a bordered segmented toggle. Pure UI; all behavior is driven by
+ * the parent via callbacks.
+ */
+interface SegmentedControlProps {
+  segments: Segment[]
+  onSegmentClick?: (id: string) => void
+  onMouseOver?: () => void
+  onMouseOut?: () => void
+}
+
+export const SegmentedControl = ({
+  segments,
+  onSegmentClick,
+  onMouseOver,
+  onMouseOut,
+}: SegmentedControlProps) => {
+  const theme = useTheme()
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+  const [hasHoveredSinceOpen, setHasHoveredSinceOpen] = useState(false)
+
+  const processedSegments = processSegments(
+    segments,
+    hoveredId,
+    hasHoveredSinceOpen,
+    theme,
+  )
+  const hoveredIndex = hoveredId
+    ? processedSegments.findIndex((s) => s.id === hoveredId)
+    : processedSegments.length - 1
+
+  return (
+    <box
+      style={{
+        flexDirection: 'row',
+        gap: 0,
+        backgroundColor: 'transparent',
+      }}
+      onMouseOver={onMouseOver}
+      onMouseOut={() => {
+        setHoveredId(null)
+        onMouseOut && onMouseOut()
+      }}
+    >
+      {/* Segments rendered with dynamic left/right edges based on hover */}
+      {processedSegments.map((seg, idx) => {
+        const leftOfHovered = idx <= hoveredIndex
+        const rightOfHovered = idx >= hoveredIndex
+
+        return (
+          <React.Fragment key={seg.id}>
+            {leftOfHovered ? (
+              <box style={{ flexDirection: 'column', gap: 0 }}>
+                <text fg={seg.frameColor} selectable={false}>╭</text>
+                <text fg={seg.frameColor} selectable={false}>│</text>
+                <text fg={seg.frameColor} selectable={false}>╰</text>
+              </box>
+            ) : null}
+
+            <Button
+              onClick={() => onSegmentClick && onSegmentClick(seg.id)}
+              onMouseOver={() => {
+                setHoveredId(seg.id)
+                setHasHoveredSinceOpen(true)
+              }}
+              style={{
+                flexDirection: 'column',
+                gap: 0,
+                width: seg.width,
+                minWidth: seg.width,
+              }}
+            >
+              <text fg={seg.frameColor}>{seg.topBorder}</text>
+              <text fg={seg.textColor}>
+                {seg.isItalic ? (
+                  <i>{seg.content}</i>
+                ) : seg.isBold ? (
+                  <b>{seg.content}</b>
+                ) : (
+                  seg.content
+                )}
+              </text>
+              <text fg={seg.frameColor}>{seg.bottomBorder}</text>
+            </Button>
+
+            {rightOfHovered ? (
+              <box style={{ flexDirection: 'column', gap: 0 }}>
+                <text fg={seg.frameColor} selectable={false}>╮</text>
+                <text fg={seg.frameColor} selectable={false}>│</text>
+                <text fg={seg.frameColor} selectable={false}>╯</text>
+              </box>
+            ) : null}
+          </React.Fragment>
+        )
+      })}
+    </box>
+  )
+}
+
+export type ProcessedSegment = {
+  id: string
+  topBorder: string
+  content: string
+  bottomBorder: string
+  frameColor: string
+  leftBorderColor: string
+  textColor: string
+  isHovered: boolean
+  isBold: boolean
+  isItalic: boolean
+  label: string
+  width: number
+}
+
+/**
+ * Pure function that maps input segments + UI state to render-ready
+ * segment descriptors. This is exported for unit testing.
+ */
+export const processSegments = (
+  segments: Segment[],
+  hoveredId: string | null,
+  hasHoveredSinceOpen: boolean,
+  theme: ChatTheme,
+): ProcessedSegment[] => {
+  return segments.map((seg) => {
+    // Normalized flags
+    const isDisabled = !!seg.disabled
+    const isSelected = !!seg.isSelected
+    const defaultHL = !!seg.defaultHighlighted
+
+    // Hover and highlight state
+    const canHover = !isSelected || defaultHL
+    const isHovered = hoveredId === seg.id && canHover
+    const isDefaultHighlighted = defaultHL && !hasHoveredSinceOpen
+    const isHighlighted = isHovered || isDefaultHighlighted
+
+    // Emphasis
+    const isBold = !!(seg.isBold || isHovered || (isSelected && isHighlighted))
+
+    // Colors
+    const frameColor = isHighlighted ? theme.foreground : theme.border
+    const textMuted = isDisabled || (isSelected && !isHighlighted)
+    const textColor = textMuted ? theme.muted : theme.foreground
+
+    // Content + metrics
+    const content = ` ${seg.label} `
+    const width = stringWidth(content)
+    const horizontal = '─'.repeat(width)
+
+    // Return render-ready descriptor
+    // - Computed (complex conditions): frameColor, textColor, isBold
+    // - Inlined (simple): isItalic (disabled), leftBorderColor (= frameColor)
+    return {
+      id: seg.id,
+      topBorder: horizontal,
+      content,
+      bottomBorder: horizontal,
+      frameColor,
+      leftBorderColor: frameColor,
+      textColor,
+      isHovered,
+      isBold,
+      isItalic: isDisabled,
+      label: seg.label,
+      width,
+    }
+  })
+}

package/src/components/selectable-list.tsx

@@ -0,0 +1,248 @@
+/**
+ * SelectableList - A reusable list component with keyboard navigation and hover support
+ *
+ * Features:
+ * - Keyboard navigation (controlled by parent via focusedIndex)
+ * - Hover highlighting
+ * - Scrollbox with configurable height
+ * - Theme-aware highlighting (theme.primary background when focused/hovered)
+ */
+
+import { TextAttributes } from '@opentui/core'
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+} from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+export interface SelectableListItem {
+  id: string
+  label: string
+  icon?: string
+  secondary?: string
+  /** If true, the label will be displayed in an accent color */
+  accent?: boolean
+  /** If true, secondary text is hidden (used only for search filtering) */
+  hideSecondary?: boolean
+}
+
+export interface SelectableListProps {
+  items: SelectableListItem[]
+  focusedIndex: number
+  /** Optional max height - if not provided, list fills available space */
+  maxHeight?: number
+  onSelect: (item: SelectableListItem, index: number) => void
+  actionLabel?: string
+  onAction?: (item: SelectableListItem, index: number) => void
+  onFocusChange?: (index: number) => void
+  emptyMessage?: string
+}
+
+export interface SelectableListHandle {
+  scrollToFocused: () => void
+}
+
+export const SelectableList = forwardRef<
+  SelectableListHandle,
+  SelectableListProps
+>(
+  (
+    {
+      items,
+      focusedIndex,
+      maxHeight,
+      onSelect,
+      actionLabel,
+      onAction,
+      onFocusChange,
+      emptyMessage = 'No items',
+    },
+    ref,
+  ) => {
+    const theme = useTheme()
+    const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+
+    const scrollToIndex = useCallback(
+      (index: number) => {
+        const scrollbox = scrollRef.current
+        if (!scrollbox || items.length === 0) return
+
+        const itemHeight = 1
+        const focusedTop = index * itemHeight
+        const focusedBottom = focusedTop + itemHeight
+
+        const viewportHeight = scrollbox.viewport.height
+        const currentScroll = scrollbox.scrollTop
+
+        if (focusedTop < currentScroll) {
+          scrollbox.scrollTop = focusedTop
+        } else if (focusedBottom > currentScroll + viewportHeight) {
+          scrollbox.scrollTop = focusedBottom - viewportHeight
+        }
+      },
+      [items.length],
+    )
+
+    // Expose scroll method to parent
+    useImperativeHandle(
+      ref,
+      () => ({
+        scrollToFocused: () => {
+          scrollToIndex(focusedIndex)
+        },
+      }),
+      [focusedIndex, scrollToIndex],
+    )
+
+    // Auto-scroll when focusedIndex changes and clear hover state
+    useEffect(() => {
+      scrollToIndex(focusedIndex)
+      // Clear hover state when keyboard navigation happens
+      setHoveredIndex(null)
+    }, [focusedIndex, scrollToIndex])
+
+    if (items.length === 0) {
+      return (
+        <box style={{ paddingLeft: 1, paddingTop: 1 }}>
+          <text style={{ fg: theme.muted }}>{emptyMessage}</text>
+        </box>
+      )
+    }
+
+    return (
+      <scrollbox
+        ref={scrollRef}
+        scrollX={false}
+        scrollbarOptions={{ visible: false }}
+        verticalScrollbarOptions={{
+          visible: true,
+          trackOptions: { width: 1 },
+        }}
+        style={{
+          height: maxHeight ?? '100%',
+          flexGrow: maxHeight ? 0 : 1,
+          rootOptions: {
+            flexDirection: 'row',
+            backgroundColor: 'transparent',
+          },
+          wrapperOptions: {
+            border: false,
+            backgroundColor: 'transparent',
+            flexDirection: 'column',
+          },
+          contentOptions: {
+            flexDirection: 'column',
+            gap: 0,
+            backgroundColor: 'transparent',
+          },
+        }}
+      >
+        {items.map((item, idx) => {
+          const isFocused = idx === focusedIndex
+          const isHovered = idx === hoveredIndex
+          const isHighlighted = isFocused || isHovered
+
+          // Use subtle highlight that works in both light and dark themes
+          const backgroundColor = isHighlighted
+            ? theme.surfaceHover
+            : 'transparent'
+          const textColor = isHighlighted ? theme.foreground : theme.muted
+
+          return (
+            <box
+              key={item.id}
+              style={{
+                flexDirection: 'row',
+                width: '100%',
+                backgroundColor,
+                height: 1,
+                overflow: 'hidden',
+              }}
+              onMouseOver={() => {
+                setHoveredIndex(idx)
+                onFocusChange?.(idx)
+              }}
+              onMouseOut={() => {
+                if (hoveredIndex === idx) {
+                  setHoveredIndex(null)
+                }
+              }}
+            >
+              <Button
+                onClick={() => onSelect(item, idx)}
+                style={{
+                  flexDirection: 'row',
+                  gap: 3,
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                  height: 1,
+                  overflow: 'hidden',
+                }}
+              >
+                {item.icon && (
+                  <text
+                    style={{
+                      fg: isHighlighted ? theme.foreground : theme.muted,
+                    }}
+                  >
+                    {item.icon}
+                  </text>
+                )}
+                <text
+                  style={{
+                    fg:
+                      item.accent && !isHighlighted ? theme.primary : textColor,
+                    attributes:
+                      item.accent || isHighlighted
+                        ? TextAttributes.BOLD
+                        : undefined,
+                  }}
+                >
+                  {item.label}
+                </text>
+                {item.secondary && !item.hideSecondary && (
+                  <text style={{ fg: theme.muted }}>{item.secondary}</text>
+                )}
+              </Button>
+              {actionLabel && onAction && (
+                <Button
+                  onClick={() => onAction(item, idx)}
+                  style={{
+                    paddingLeft: 1,
+                    paddingRight: 1,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    height: 1,
+                    flexShrink: 0,
+                    marginRight: 1,
+                  }}
+                >
+                  <text
+                    style={{ fg: isHighlighted ? theme.error : theme.muted }}
+                  >
+                    {actionLabel}
+                  </text>
+                </Button>
+              )}
+            </box>
+          )
+        })}
+      </scrollbox>
+    )
+  },
+)
+
+SelectableList.displayName = 'SelectableList'

package/src/components/selected-chips.tsx

@@ -0,0 +1,80 @@
+import { TextAttributes } from '@opentui/core'
+import React, { useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { BORDER_CHARS } from '../utils/ui-constants'
+
+interface SelectedChipsProps {
+  selectedAgents: Array<{ id: string; displayName: string }>
+  onRemove: (agentId: string) => void
+}
+
+export const SelectedChips: React.FC<SelectedChipsProps> = ({
+  selectedAgents,
+  onRemove,
+}) => {
+  const theme = useTheme()
+  const [hoveredChipId, setHoveredChipId] = useState<string | null>(null)
+
+  if (selectedAgents.length === 0) {
+    return null
+  }
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 1, paddingRight: 1, flexWrap: 'wrap' }}>
+      {selectedAgents.map((agent) => {
+        const isHovered = hoveredChipId === agent.id
+        const displayText = agent.displayName !== agent.id
+          ? agent.displayName
+          : agent.id
+
+        return (
+          <Button
+            key={agent.id}
+            onClick={() => onRemove(agent.id)}
+            onMouseOver={() => setHoveredChipId(agent.id)}
+            onMouseOut={() => setHoveredChipId(null)}
+            style={{
+              backgroundColor: 'transparent',
+              paddingLeft: 0,
+              paddingRight: 0,
+              paddingTop: 0,
+              paddingBottom: 0,
+            }}
+          >
+            <box
+              border
+              borderStyle="single"
+              borderColor={isHovered ? theme.error : theme.success}
+              customBorderChars={BORDER_CHARS}
+              style={{
+                flexDirection: 'row',
+                gap: 1,
+                paddingLeft: 1,
+                paddingRight: 1,
+              }}
+            >
+              <text
+                style={{
+                  fg: isHovered ? theme.error : theme.success,
+                  attributes: TextAttributes.BOLD,
+                }}
+              >
+                {displayText}
+              </text>
+              <text
+                style={{
+                  fg: isHovered ? theme.error : theme.muted,
+                }}
+              >
+                ✕
+              </text>
+            </box>
+          </Button>
+        )
+      })}
+
+    </box>
+  )
+}

package/src/components/separator.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+
+interface SeparatorProps {
+  width: number
+  /**
+   * How much to reduce the width by to account for padding/borders
+   * @default 0
+   */
+  widthOffset?: number
+  /**
+   * Character to use for the separator line
+   * @default '─'
+   */
+  char?: string
+  /**
+   * Color of the separator (uses theme.border by default)
+   */
+  color?: string
+}
+
+export const Separator: React.FC<SeparatorProps> = ({
+  width,
+  widthOffset = 0,
+  char = '─',
+  color,
+}) => {
+  const theme = useTheme()
+  const separatorWidth = Math.max(1, width - widthOffset)
+  const fgColor = color || theme.border
+
+  return (
+    <box style={{ height: 1, flexShrink: 0 }}>
+      <text style={{ wrapMode: 'none' }}>
+        <span fg={fgColor}>{char.repeat(separatorWidth)}</span>
+      </text>
+    </box>
+  )
+}