ethagent 0.2.0 → 1.0.0

package/src/ui/BrandSplash.tsx

@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react'
+import { Text, Box } from 'ink'
+import { eyeGradientColor, theme } from './theme.js'
+
+const glyphs = {
+  ethagent: {
+    eth: `░░░░░░░╗░░░░░░░░╗░░╗  ░░╗
+░░╔════╝╚══░░╔══╝░░║  ░░║
+░░░░░╗     ░░║   ░░░░░░░║
+░░╔══╝     ░░║   ░░╔══░░║
+░░░░░░░╗   ░░║   ░░║  ░░║
+╚══════╝   ╚═╝   ╚═╝  ╚═╝`,
+    a: [
+      ` █████╗ `,
+      `██╔══██╗`,
+      `███████║`,
+      `██╔══██║`,
+      `██║  ██║`,
+      `╚═╝  ╚═╝`,
+    ].join('\n'),
+    g: [
+      ` ██████╗ `,
+      `██╔════╝ `,
+      `██║  ███╗`,
+      `██║   ██║`,
+      `╚██████╔╝`,
+      ` ╚═════╝ `,
+    ].join('\n'),
+    e: [
+      `███████╗`,
+      `██╔════╝`,
+      `█████╗  `,
+      `██╔══╝  `,
+      `███████╗`,
+      `╚══════╝`,
+    ].join('\n'),
+    n: [
+      `███╗   ██╗`,
+      `████╗  ██║`,
+      `██╔██╗ ██║`,
+      `██║╚██╗██║`,
+      `██║ ╚████║`,
+      `╚═╝  ╚═══╝`,
+    ].join('\n'),
+    t: [
+      `████████╗`,
+      `╚══██╔══╝`,
+      `   ██║   `,
+      `   ██║   `,
+      `   ██║   `,
+      `   ╚═╝   `,
+    ].join('\n'),
+  },
+  eyes: `
+                                         -+:
+                   :=-                    -%@@@%.
+             *@@@@@#-                           *@@-
+          +@@.                                     +@
+        @@=                               -#=-+++=+:
+      #%        .:===-:                   -@* +@@@@%
+           *@-+@@@@@:                    %@@+  @@@=#@
+          *@=   @@@@@@@-                .@.@@@@@@@ :
+        @@+=@@@@@@@@@@@@:               .% *@@@@@*-=
+       #:-@ -@@@@@@@@@-+%                @  -@@@- #
+       :  #+  @@@@@@@- -%                 =#     =
+           -@:        *@                      .+%%
+              :%#: --
+              .-:
+                                                           `,
+  tagline: ' privacy-first AI agent with a portable Ethereum identity ',
+  ellipsis: '…',
+  frame: {
+    topLeft: '╔═',
+    topRight: '╗',
+    side: '║',
+    bottomLeft: '╚═',
+    bottomRight: '╝',
+    horizontal: '═',
+  },
+} as const
+
+const ethagentGlyphOrder = ['eth', 'a', 'g', 'e', 'n', 't'] as const
+
+const Eyes = () => {
+  const lines = glyphs.eyes.split('\n')
+  return (
+    <Box flexDirection="column">
+      {lines.map((line, li) => {
+        const glyphPositions = [...line]
+          .map((char, index) => ({ char, index }))
+          .filter(entry => entry.char.trim().length > 0)
+          .map(entry => entry.index)
+        const firstGlyph = glyphPositions[0] ?? 0
+        const lastGlyph = glyphPositions[glyphPositions.length - 1] ?? firstGlyph
+        const span = Math.max(lastGlyph - firstGlyph, 1)
+
+        return (
+          <Text key={li}>
+            {[...line].map((char, ci) => {
+              if (!char.trim()) {
+                return <Text key={ci}>{char}</Text>
+              }
+              const t = (ci - firstGlyph) / span
+              return <Text key={ci} color={eyeGradientColor(t)}>{char}</Text>
+            })}
+          </Text>
+        )
+      })}
+    </Box>
+  )
+}
+
+type SplashProps = {
+  contextLine?: string
+  tipLine?: string
+  compact?: boolean
+}
+
+export const BrandSplash: React.FC<SplashProps> = ({ contextLine, tipLine, compact }) => {
+  const [width, setWidth] = useState<number>(() => process.stdout.columns ?? 80)
+
+  useEffect(() => {
+    const stdout = process.stdout
+    const handleResize = () => setWidth(stdout.columns ?? 80)
+    stdout.on('resize', handleResize)
+    return () => {
+      stdout.off('resize', handleResize)
+    }
+  }, [])
+
+  const renderCompact = compact ?? width < 72
+
+  if (renderCompact) {
+    return (
+      <Box flexDirection="column" alignSelf="flex-start" padding={1}>
+        <Eyes />
+        <Text bold color={theme.accentPrimary}>ethagent</Text>
+        <Text color={theme.dim}>{glyphs.tagline.trim()}</Text>
+        {contextLine ? <Text color={theme.dim}>{contextLine}</Text> : null}
+        {tipLine ? <Text color={theme.dim}>{tipLine}</Text> : null}
+      </Box>
+    )
+  }
+
+  const logoLines = ethagentGlyphOrder.map(key => glyphs.ethagent[key].split('\n'))
+  const rowCount = Math.max(...logoLines.map(lines => lines.length))
+
+  const w = 69
+  const topPad = Math.max(0, w - glyphs.tagline.length - 1)
+
+  const bottomInline = contextLine ? ` ${truncateToFit(contextLine, w - 4)} ` : ''
+  const bottomPad = Math.max(0, w - bottomInline.length - 1)
+
+  return (
+    <Box flexDirection="column" alignSelf="flex-start" padding={1}>
+      <Eyes />
+      <Text>
+        <Text color={theme.border}>{glyphs.frame.topLeft}</Text>
+        <Text color={theme.dim}>{glyphs.tagline}</Text>
+        <Text color={theme.border}>{glyphs.frame.horizontal.repeat(topPad)}{glyphs.frame.topRight}</Text>
+      </Text>
+      {Array.from({ length: rowCount }, (_, i) => (
+        <Box key={i}>
+          <Text color={theme.border}>{glyphs.frame.side}</Text>
+          {logoLines.map((lines, index) => (
+            <Text key={ethagentGlyphOrder[index]} color={theme.border}>{lines[i] ?? ''}</Text>
+          ))}
+          <Text color={theme.border}>{glyphs.frame.side}</Text>
+        </Box>
+      ))}
+      {bottomInline ? (
+        <Text>
+          <Text color={theme.border}>{glyphs.frame.bottomLeft}</Text>
+          <Text color={theme.accentMint}>{bottomInline}</Text>
+          <Text color={theme.border}>{glyphs.frame.horizontal.repeat(bottomPad)}{glyphs.frame.bottomRight}</Text>
+        </Text>
+      ) : (
+        <Text color={theme.border}>{glyphs.frame.bottomLeft.slice(0, 1) + glyphs.frame.horizontal.repeat(w) + glyphs.frame.bottomRight}</Text>
+      )}
+      {tipLine ? (
+        <Box marginTop={1}>
+          <Text color={theme.dim}>{tipLine}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  )
+}
+
+function truncateToFit(text: string, max: number): string {
+  if (text.length <= max) return text
+  if (max <= 1) return text.slice(0, Math.max(0, max))
+  return text.slice(0, max - 1) + glyphs.ellipsis
+}

package/src/ui/ProgressBar.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { theme, gradientColor, eyeGradientColor } from './theme.js'
+
+type ProgressBarProps = {
+  progress: number
+  width?: number
+  label?: string
+  suffix?: string
+  variant?: 'default' | 'rainbow'
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ progress, width = 40, label, suffix, variant = 'default' }) => {
+  const p = Math.max(0, Math.min(1, progress))
+  const filled = Math.round(p * width)
+  const empty = Math.max(0, width - filled)
+  const colorFor = variant === 'rainbow' ? eyeGradientColor : gradientColor
+  const cells: React.ReactElement[] = []
+  for (let i = 0; i < filled; i++) {
+    cells.push(
+      <Text key={`f-${i}`} color={colorFor(i / Math.max(width - 1, 1))}>█</Text>,
+    )
+  }
+  for (let i = 0; i < empty; i++) {
+    cells.push(<Text key={`e-${i}`} color={theme.border}>░</Text>)
+  }
+  return (
+    <Box>
+      {label ? <Text color={theme.dim}>{label} </Text> : null}
+      <Text>{cells}</Text>
+      <Text color={theme.dim}> {Math.round(p * 100)}%{suffix ? ` · ${suffix}` : ''}</Text>
+    </Box>
+  )
+}

package/src/ui/Select.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+import { Box, Text } from 'ink'
+import { theme } from './theme.js'
+import { useAppInput } from '../app/input/AppInputProvider.js'
+
+export type SelectOption<T> = {
+  value: T
+  label: string
+  subtext?: string
+  hint?: string
+  disabled?: boolean
+  role?: 'section' | 'group' | 'notice' | 'option' | 'utility'
+  prefix?: string
+  labelColor?: string
+  subtextColor?: string
+  hintColor?: string
+  bold?: boolean
+  indent?: number
+}
+
+type SelectProps<T> = {
+  label?: string
+  options: Array<SelectOption<T>>
+  initialIndex?: number
+  maxVisible?: number
+  hintLayout?: 'below' | 'inline'
+  onSubmit: (value: T) => void
+  onCancel?: () => void
+  onHighlight?: (value: T) => void
+}
+
+export function Select<T>({
+  label,
+  options,
+  initialIndex = 0,
+  maxVisible,
+  hintLayout = 'below',
+  onSubmit,
+  onCancel,
+  onHighlight,
+}: SelectProps<T>) {
+  const firstEnabled = Math.max(0, options.findIndex(isSelectableOption))
+  const start = isSelectableOption(options[initialIndex]) ? initialIndex : firstEnabled
+  const [index, setIndex] = useState(start === -1 ? 0 : start)
+  const visibleCount = Math.max(1, maxVisible ?? options.length)
+  const windowStart = Math.max(0, Math.min(
+    index - Math.floor(visibleCount / 2),
+    Math.max(0, options.length - visibleCount),
+  ))
+  const windowEnd = Math.min(options.length, windowStart + visibleCount)
+  const visibleOptions = options.slice(windowStart, windowEnd)
+  const hasAbove = windowStart > 0
+  const hasBelow = windowEnd < options.length
+  const usesInlineSections = hintLayout === 'inline' && options.some(option => option.role === 'section' || option.role === 'group')
+
+  const moveBy = (delta: number) => {
+    if (options.length === 0) return
+    let next = index
+    for (let i = 0; i < options.length; i += 1) {
+      next = (next + delta + options.length) % options.length
+      const candidate = options[next]
+      if (isSelectableOption(candidate)) {
+        setIndex(next)
+        onHighlight?.(candidate.value)
+        return
+      }
+    }
+  }
+
+  useAppInput((input, key) => {
+    if (key.upArrow || input === 'k') moveBy(-1)
+    else if (key.downArrow || input === 'j') moveBy(1)
+    else if (key.return) {
+      const selected = options[index]
+      if (isSelectableOption(selected)) onSubmit(selected.value)
+    } else if (key.escape) {
+      onCancel?.()
+    }
+  })
+
+  return (
+    <Box flexDirection="column">
+      {label ? <Text color={theme.dim}>{label}</Text> : null}
+      {hasAbove ? (
+        <Text color={theme.dim}>{`^ ${windowStart} earlier item${windowStart === 1 ? '' : 's'}`}</Text>
+      ) : null}
+      {visibleOptions.map((option, visibleIndex) => {
+        const absoluteIndex = windowStart + visibleIndex
+        const isActive = absoluteIndex === index
+        const selectable = isSelectableOption(option)
+        const cursor = !selectable ? ' ' : isActive ? '>' : ' '
+        const isSection = option.role === 'section' || option.role === 'group'
+        const prefix = option.prefix && !isSection ? `${option.prefix} ` : ''
+        const rowIndent = option.indent ?? (usesInlineSections ? isSection ? 1 : 3 : 0)
+        const prefixColor = option.disabled
+          ? option.labelColor ?? theme.border
+          : isActive && selectable
+            ? theme.accentPrimary
+            : option.labelColor ?? theme.dim
+        const labelColor = isSection
+          ? option.labelColor ?? theme.dim
+          : isActive && selectable
+            ? theme.accentPrimary
+            : option.labelColor ?? (option.disabled ? theme.dim : theme.text)
+        const hintColor = isActive && selectable
+          ? theme.textSubtle
+          : option.hintColor ?? theme.dim
+        const subtextColor = option.subtextColor ?? theme.dim
+        const bold = option.bold ?? (isSection || (isActive && selectable))
+        const inlineHint = Boolean(option.hint && hintLayout === 'inline' && !isSection)
+        const belowHint = Boolean(option.hint && (!inlineHint || isSection))
+        return (
+          <Box key={absoluteIndex} flexDirection="column">
+            <Box flexDirection="row" marginLeft={rowIndent}>
+              <Text color={prefixColor}>{cursor} </Text>
+              {prefix ? <Text color={prefixColor}>{prefix}</Text> : null}
+              <Text color={labelColor} bold={bold}>{option.label}</Text>
+              {inlineHint ? <Text color={hintColor}>  {option.hint}</Text> : null}
+            </Box>
+            {option.subtext ? (
+              <Box marginLeft={2 + rowIndent}>
+                <Text color={subtextColor}>{option.subtext}</Text>
+              </Box>
+            ) : null}
+            {belowHint ? (
+              <Box marginLeft={2 + rowIndent}>
+                <Text color={hintColor}>{option.hint}</Text>
+              </Box>
+            ) : null}
+          </Box>
+        )
+      })}
+      {hasBelow ? (
+        <Text color={theme.dim}>{`v ${options.length - windowEnd} more item${options.length - windowEnd === 1 ? '' : 's'}`}</Text>
+      ) : null}
+    </Box>
+  )
+}
+
+function isSelectableOption<T>(option: SelectOption<T> | undefined): option is SelectOption<T> & { value: T } {
+  if (!option || option.disabled) return false
+  return option.role !== 'section' && option.role !== 'group' && option.role !== 'notice'
+}

package/src/ui/Spinner.tsx

@@ -0,0 +1,269 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Text } from 'ink'
+import { theme } from './theme.js'
+
+export const SPINNER_VERBS: string[] = [
+  'accomplishing',
+  'actioning',
+  'actualizing',
+  'architecting',
+  'baking',
+  'beaming',
+  "beboppin'",
+  'befuddling',
+  'billowing',
+  'blanching',
+  'bloviating',
+  'boogieing',
+  'boondoggling',
+  'booping',
+  'bootstrapping',
+  'brewing',
+  'bunning',
+  'burrowing',
+  'calculating',
+  'canoodling',
+  'caramelizing',
+  'cascading',
+  'catapulting',
+  'cerebrating',
+  'channeling',
+  'choreographing',
+  'churning',
+  'coalescing',
+  'cogitating',
+  'combobulating',
+  'composing',
+  'computing',
+  'concocting',
+  'considering',
+  'contemplating',
+  'cooking',
+  'crafting',
+  'creating',
+  'crunching',
+  'crystallizing',
+  'cultivating',
+  'deciphering',
+  'deliberating',
+  'determining',
+  'dilly-dallying',
+  'discombobulating',
+  'doing',
+  'doodling',
+  'drizzling',
+  'ebbing',
+  'effecting',
+  'elucidating',
+  'embellishing',
+  'enchanting',
+  'envisioning',
+  'evaporating',
+  'fermenting',
+  'fiddle-faddling',
+  'finagling',
+  'flambéing',
+  'flibbertigibbeting',
+  'flowing',
+  'flummoxing',
+  'fluttering',
+  'forging',
+  'forming',
+  'frolicking',
+  'frosting',
+  'gallivanting',
+  'galloping',
+  'garnishing',
+  'generating',
+  'gesticulating',
+  'germinating',
+  'grooving',
+  'gusting',
+  'harmonizing',
+  'hashing',
+  'hatching',
+  'herding',
+  'honking',
+  'hullaballooing',
+  'hyperspacing',
+  'ideating',
+  'imagining',
+  'improvising',
+  'incubating',
+  'inferring',
+  'infusing',
+  'ionizing',
+  'jitterbugging',
+  'julienning',
+  'kneading',
+  'leavening',
+  'levitating',
+  'lollygagging',
+  'manifesting',
+  'marinating',
+  'meandering',
+  'metamorphosing',
+  'misting',
+  'moonwalking',
+  'moseying',
+  'mulling',
+  'mustering',
+  'musing',
+  'nebulizing',
+  'nesting',
+  'noodling',
+  'nucleating',
+  'orbiting',
+  'orchestrating',
+  'osmosing',
+  'perambulating',
+  'percolating',
+  'perusing',
+  'philosophising',
+  'photosynthesizing',
+  'pollinating',
+  'pondering',
+  'pontificating',
+  'pouncing',
+  'precipitating',
+  'prestidigitating',
+  'processing',
+  'proofing',
+  'propagating',
+  'puttering',
+  'puzzling',
+  'quantumizing',
+  'razzle-dazzling',
+  'razzmatazzing',
+  'recombobulating',
+  'reticulating',
+  'roosting',
+  'ruminating',
+  'sautéing',
+  'scampering',
+  'schlepping',
+  'scurrying',
+  'seasoning',
+  'shenaniganing',
+  'shimmying',
+  'simmering',
+  'skedaddling',
+  'sketching',
+  'slithering',
+  'smooshing',
+  'sock-hopping',
+  'spelunking',
+  'spinning',
+  'sprouting',
+  'stewing',
+  'sublimating',
+  'swirling',
+  'swooping',
+  'symbioting',
+  'synthesizing',
+  'tempering',
+  'thinking',
+  'thundering',
+  'tinkering',
+  'tomfoolering',
+  'topsy-turvying',
+  'transfiguring',
+  'transmuting',
+  'twisting',
+  'undulating',
+  'unfurling',
+  'unravelling',
+  'vibing',
+  'waddling',
+  'wandering',
+  'warping',
+  'whatchamacalliting',
+  'whirlpooling',
+  'whirring',
+  'whisking',
+  'wibbling',
+  'working',
+  'wrangling',
+  'zesting',
+  'zigzagging',
+]
+
+export function pickVerb(): string {
+  const idx = Math.floor(Math.random() * SPINNER_VERBS.length)
+  return SPINNER_VERBS[idx] ?? 'thinking'
+}
+
+type SpinnerProps = {
+  active?: boolean
+  hint?: string
+  label?: string
+  verb?: string
+  color?: string
+  startedAt?: number
+  showElapsed?: boolean
+}
+
+const FRAMES = ['.', 'o', 'O', 'o']
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  active = true,
+  hint: rawHint,
+  label,
+  verb,
+  color = theme.accentSecondary,
+  startedAt,
+  showElapsed = true,
+}) => {
+  const stickyVerbRef = useRef<string | null>(null)
+  const internalStartedAtRef = useRef<number>(Date.now())
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    if (!active) {
+      stickyVerbRef.current = null
+      internalStartedAtRef.current = Date.now()
+      return
+    }
+
+    if (label === undefined && stickyVerbRef.current === null) {
+      stickyVerbRef.current = verb ?? pickVerb()
+    }
+  }, [active, verb, label])
+
+  useEffect(() => {
+    if (!active) return
+    internalStartedAtRef.current = startedAt ?? Date.now()
+  }, [active, startedAt, label, verb])
+
+  useEffect(() => {
+    if (!active) return
+    const timer = setInterval(() => {
+      setFrame(prev => (prev + 1) % FRAMES.length)
+    }, 120)
+    return () => clearInterval(timer)
+  }, [active])
+
+  if (!active) return null
+
+  const autoLabel = stickyVerbRef.current ?? verb ?? 'thinking'
+  const text = label ?? `${autoLabel}…`
+  const glyph = FRAMES[frame] ?? 'o'
+  const elapsed = showElapsed ? formatElapsedSeconds(Date.now() - (startedAt ?? internalStartedAtRef.current)) : null
+  const renderedHint = [rawHint, elapsed].filter(Boolean).join(' · ')
+  const hint = renderedHint
+
+  return (
+    <Text>
+      <Text color={color}>{glyph}</Text>
+      <Text color={theme.dim}> {text}</Text>
+      {hint ? <Text color={theme.dim}> · {hint}</Text> : null}
+    </Text>
+  )
+}
+
+function formatElapsedSeconds(milliseconds: number): string {
+  const seconds = Math.max(0, Math.floor(milliseconds / 1000))
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  return `${minutes}:${(seconds % 60).toString().padStart(2, '0')}`
+}

package/src/ui/Surface.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { theme } from './theme.js'
+
+type SurfaceTone = 'primary' | 'muted' | 'error'
+
+type SurfaceProps = {
+  title: string
+  subtitle?: React.ReactNode
+  footer?: React.ReactNode
+  tone?: SurfaceTone
+  children?: React.ReactNode
+}
+
+const toneColor: Record<SurfaceTone, string> = {
+  primary: theme.accentPrimary,
+  muted: theme.border,
+  error: '#e87070',
+}
+
+export const Surface: React.FC<SurfaceProps> = ({
+  title,
+  subtitle,
+  footer,
+  tone = 'primary',
+  children,
+}) => {
+  const borderColor = toneColor[tone]
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor={borderColor} paddingX={2} paddingY={0}>
+      <Box flexDirection="column">
+        <Text color={borderColor} bold>{title}</Text>
+        {subtitle ? (
+          typeof subtitle === 'string'
+            ? <Text color={theme.dim}>{subtitle}</Text>
+            : subtitle
+        ) : null}
+      </Box>
+      {children ? <Box flexDirection="column" marginTop={1}>{children}</Box> : null}
+      {footer ? (
+        <Box marginTop={1} borderTop={false}>
+          <Text color={theme.dim}>{footer}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  )
+}