@andypai/orb 0.1.1

package/src/ui/App.tsx

@@ -0,0 +1,142 @@
+import { useMemo, useState } from 'react'
+import { basename } from 'node:path'
+import { Box } from 'ink'
+
+import { type AppConfig, type AppState, type DetailMode, type SavedSession } from '../types'
+import type { AnimationMode } from './components/AsciiOrb'
+import { ConversationRail } from './components/ConversationRail'
+import { Footer } from './components/Footer'
+import { TTSErrorBanner } from './components/TTSErrorBanner'
+import { WelcomeSplash } from './components/WelcomeSplash'
+import { useConversation } from './hooks/useConversation'
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
+import { usePipeline } from './hooks/usePipeline'
+import { useTerminalSize } from './hooks/useTerminalSize'
+import { formatModelLabel } from './utils/model-label'
+
+interface AppProps {
+  config: AppConfig
+  initialSession?: SavedSession | null
+}
+
+function mapStateToAnimationMode(state: AppState): AnimationMode {
+  switch (state) {
+    case 'speaking':
+    case 'processing_speaking':
+      return 'speaking'
+    case 'processing':
+      return 'processing'
+    case 'idle':
+      return 'idle'
+  }
+}
+
+const FIXED_UI_OVERHEAD = 8
+
+export function isInputDisabled(state: AppState): boolean {
+  return state !== 'idle'
+}
+
+export function App({ config, initialSession }: AppProps) {
+  const [detailMode, setDetailMode] = useState<DetailMode>('compact')
+  const [state, setState] = useState<AppState>('idle')
+  const [splashDismissed, setSplashDismissed] = useState(false)
+
+  const conversation = useConversation({
+    config,
+    initialSession,
+    taskState: state,
+  })
+
+  const { cancel, submit } = usePipeline({
+    config,
+    activeModel: conversation.activeModel,
+    initialModel: conversation.initialModel,
+    initialSession: conversation.initialAgentSession,
+    onFrame: conversation.handleFrame,
+    onRunComplete: conversation.handleRunComplete,
+    onStateChange: setState,
+    startEntry: conversation.startEntry,
+  })
+
+  // ── Layout ──
+
+  const { rows: terminalRows } = useTerminalSize()
+
+  const liveToolCount = conversation.liveTurn?.toolCalls.length ?? 0
+  const maxAnswerLines = useMemo(
+    () => Math.max(5, terminalRows - FIXED_UI_OVERHEAD - liveToolCount),
+    [terminalRows, liveToolCount],
+  )
+
+  const canCycleModel = state === 'idle' && config.llmProvider === 'anthropic'
+
+  useKeyboardShortcuts({
+    canCycleModel,
+    onCancel: cancel,
+    onCycleModel: conversation.cycleModel,
+    onToggleDetailMode: () => setDetailMode((m) => (m === 'compact' ? 'expanded' : 'compact')),
+    state,
+  })
+
+  // ── Derived state ──
+
+  const animationMode = useMemo(() => mapStateToAnimationMode(state), [state])
+  const assistantLabel = config.llmProvider === 'anthropic' ? 'claude' : 'openai'
+  const inputDisabled = isInputDisabled(state)
+  const projectName = useMemo(
+    () => basename(config.projectPath) || config.projectPath,
+    [config.projectPath],
+  )
+  const modelLabel = useMemo(
+    () => formatModelLabel(config.llmProvider, conversation.activeModel),
+    [config.llmProvider, conversation.activeModel],
+  )
+
+  const showWelcome =
+    conversation.completedTurns.length === 0 &&
+    !conversation.liveTurn &&
+    !config.skipIntro &&
+    !initialSession?.history?.length &&
+    !splashDismissed
+
+  // ── Rendering ──
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {conversation.ttsError && (
+        <TTSErrorBanner type={conversation.ttsError.type} message={conversation.ttsError.message} />
+      )}
+      {showWelcome ? (
+        <WelcomeSplash
+          animationMode={animationMode}
+          assistantLabel={assistantLabel}
+          projectName={projectName}
+          modelLabel={modelLabel}
+          ttsVoice={config.ttsVoice}
+          ttsSpeed={config.ttsSpeed}
+          ttsEnabled={config.ttsEnabled}
+          onDismiss={() => setSplashDismissed(true)}
+        />
+      ) : (
+        <ConversationRail
+          completedTurns={conversation.completedTurns}
+          liveTurn={conversation.liveTurn}
+          detailMode={detailMode}
+          maxAnswerLines={maxAnswerLines}
+          assistantLabel={assistantLabel}
+        />
+      )}
+      {!showWelcome && (
+        <Footer
+          state={state}
+          onSubmit={submit}
+          inputDisabled={inputDisabled}
+          model={conversation.activeModel}
+          provider={config.llmProvider}
+          canCycleModel={canCycleModel}
+        />
+      )}
+    </Box>
+  )
+}

package/src/ui/components/ActivityTimeline.tsx

@@ -0,0 +1,60 @@
+import { memo } from 'react'
+import { Box, Text } from 'ink'
+
+import type { DetailMode, ToolCall } from '../../types'
+import { formatToolInput, truncate, STATUS_CONFIG } from '../utils/tool-format'
+import { useTerminalSize } from '../hooks/useTerminalSize'
+
+interface ActivityTimelineProps {
+  toolCalls: ToolCall[]
+  detailMode: DetailMode
+  isLive?: boolean
+}
+
+function getMaxArgLen(columns: number): number {
+  if (columns < 60) return 20
+  if (columns < 80) return 30
+  return 40
+}
+
+export const ActivityTimeline = memo(function ActivityTimeline({
+  toolCalls,
+  detailMode,
+  isLive = false,
+}: ActivityTimelineProps) {
+  const { columns } = useTerminalSize()
+  const maxArgLen = getMaxArgLen(columns)
+  const showDetails = detailMode === 'expanded' && isLive
+
+  if (toolCalls.length === 0) return null
+
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      {toolCalls.map((call) => {
+        const { icon, color: iconColor } = STATUS_CONFIG[call.status]
+        const inputStr = formatToolInput(call.name, call.input)
+        const truncatedInput = inputStr ? truncate(inputStr, maxArgLen) : ''
+        const detailText =
+          showDetails && call.result && call.status !== 'running'
+            ? truncate(call.result, 120)
+            : null
+
+        return (
+          <Box key={call.id} flexDirection="column">
+            <Text>
+              <Text color={iconColor}>{icon}</Text>
+              <Text> </Text>
+              <Text color="cyan">{call.name}</Text>
+              {truncatedInput && <Text color="gray"> {truncatedInput}</Text>}
+            </Text>
+            {detailText && (
+              <Text color={call.status === 'error' ? 'red' : 'gray'} dimColor>
+                {'  '}↳ {detailText}
+              </Text>
+            )}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+})

package/src/ui/components/AsciiOrb.tsx

@@ -0,0 +1,92 @@
+import { memo, useMemo } from 'react'
+import { Box, Text } from 'ink'
+
+import { useAnimationFrame } from '../hooks/useAnimationFrame'
+
+export type AnimationMode = 'idle' | 'processing' | 'speaking'
+
+interface AsciiOrbProps {
+  mode?: AnimationMode
+  width?: number
+  height?: number
+}
+
+// Amp-style dense character set (sparse to dense)
+const CHARS = ' .:=-+*#@'
+
+// Mode-specific animation parameters
+const MODE_CONFIG = {
+  idle: { fps: 10, amplitude: 0.1, speed: 0.05, color: 'cyan' },
+  processing: { fps: 15, amplitude: 0.2, speed: 0.15, color: 'yellow' },
+  speaking: { fps: 20, amplitude: 0.25, speed: 0.3, color: 'magenta' },
+} as const
+
+/**
+ * Renders an animated ASCII orb with radial distance-based character density.
+ * The orb appears 3D through careful character selection based on distance from center.
+ */
+function AsciiOrbComponent({ mode = 'idle', width = 30, height = 11 }: AsciiOrbProps) {
+  const config = MODE_CONFIG[mode]
+  const frame = useAnimationFrame({ fps: config.fps, active: true })
+
+  const lines = useMemo(() => {
+    const result: string[] = []
+    const centerX = width / 2
+    const centerY = height / 2
+
+    // Terminal characters are ~2x taller than wide
+    // To make circle appear round, scale down vertical distance contribution
+    const aspectRatio = 2.0
+
+    for (let y = 0; y < height; y++) {
+      let line = ''
+
+      for (let x = 0; x < width; x++) {
+        // Normalized coordinates (-1 to 1)
+        const nx = (x - centerX) / centerX
+        const ny = (y - centerY) / centerY / aspectRatio
+
+        // Distance from center (0 at center, 1 at edge)
+        const dist = Math.sqrt(nx * nx + ny * ny)
+
+        // Animation: apply mode-specific oscillation
+        let animatedDist: number
+
+        if (mode === 'speaking') {
+          // Bouncy, energetic oscillation with compound sine waves
+          const bounce = Math.sin(frame * config.speed) * Math.sin(frame * config.speed * 0.33)
+          animatedDist = dist + bounce * config.amplitude
+        } else {
+          // Simple breathing/pulse
+          animatedDist = dist + Math.sin(frame * config.speed) * config.amplitude
+        }
+
+        // Map distance to character (closer = denser)
+        if (animatedDist > 1) {
+          line += ' '
+        } else {
+          // Invert so center is dense, edges are sparse
+          const normalized = 1 - animatedDist
+          const charIndex = Math.floor(normalized * (CHARS.length - 1))
+          line += CHARS[Math.min(charIndex, CHARS.length - 1)]
+        }
+      }
+
+      result.push(line)
+    }
+
+    return result
+  }, [frame, mode, width, height, config])
+
+  return (
+    <Box flexDirection="column" alignItems="center">
+      {lines.map((line, i) => (
+        <Text key={`orb-line-${i}`} color={config.color}>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  )
+}
+
+export const AsciiOrb = memo(AsciiOrbComponent)

package/src/ui/components/ConversationRail.tsx

@@ -0,0 +1,44 @@
+import { memo } from 'react'
+import { Box, Static } from 'ink'
+
+import type { DetailMode, HistoryEntry } from '../../types'
+import { TurnRow } from './TurnRow'
+
+interface ConversationRailProps {
+  completedTurns: HistoryEntry[]
+  liveTurn: HistoryEntry | null
+  detailMode: DetailMode
+  maxAnswerLines?: number
+  assistantLabel: string
+}
+
+export const ConversationRail = memo(function ConversationRail({
+  completedTurns,
+  liveTurn,
+  detailMode,
+  maxAnswerLines,
+  assistantLabel,
+}: ConversationRailProps) {
+  return (
+    <Box flexDirection="column">
+      <Static items={completedTurns}>
+        {(turn) => (
+          <Box key={turn.id} marginBottom={1}>
+            <TurnRow turn={turn} detailMode="compact" assistantLabel={assistantLabel} />
+          </Box>
+        )}
+      </Static>
+      {liveTurn && (
+        <Box marginBottom={1}>
+          <TurnRow
+            turn={liveTurn}
+            detailMode={detailMode}
+            isLive
+            maxAnswerLines={maxAnswerLines}
+            assistantLabel={assistantLabel}
+          />
+        </Box>
+      )}
+    </Box>
+  )
+})

package/src/ui/components/Footer.tsx

@@ -0,0 +1,61 @@
+import { memo } from 'react'
+import { Box, Text } from 'ink'
+
+import type { AppState, LlmModelId, LlmProvider } from '../../types'
+import { useTerminalSize } from '../hooks/useTerminalSize'
+import { formatModelLabel } from '../utils/model-label'
+import { InputPrompt } from './InputPrompt'
+import { MicroOrb } from './MicroOrb'
+
+interface FooterProps {
+  state: AppState
+  onSubmit: (value: string) => void
+  inputDisabled: boolean
+  model: LlmModelId
+  provider: LlmProvider
+  canCycleModel: boolean
+}
+
+export const Footer = memo(function Footer({
+  state,
+  onSubmit,
+  inputDisabled,
+  model,
+  provider,
+  canCycleModel,
+}: FooterProps) {
+  const { columns } = useTerminalSize()
+  const modelLabel = formatModelLabel(provider, model)
+
+  const showModel = columns >= 60
+  const showAllHints = columns >= 80
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box gap={1}>
+        <MicroOrb state={state} />
+        <InputPrompt onSubmit={onSubmit} disabled={inputDisabled} inline />
+      </Box>
+      <Box gap={2}>
+        {showModel && (
+          <Text color="gray" dimColor>
+            [{modelLabel}]
+          </Text>
+        )}
+        {showAllHints && canCycleModel && (
+          <Text color="gray" dimColor>
+            ⇧Tab model
+          </Text>
+        )}
+        {showAllHints && (
+          <Text color="gray" dimColor>
+            ^O detail
+          </Text>
+        )}
+        <Text color="gray" dimColor>
+          ^C
+        </Text>
+      </Box>
+    </Box>
+  )
+})

package/src/ui/components/InputPrompt.tsx

@@ -0,0 +1,88 @@
+import React, { memo, useState, useEffect } from 'react'
+import { Box, Text, useInput } from 'ink'
+
+interface InputPromptProps {
+  onSubmit: (value: string) => void
+  disabled: boolean
+  inline?: boolean
+}
+
+function Cursor({ visible }: { visible: boolean }): React.ReactNode {
+  if (!visible) return null
+  return <Text backgroundColor="white"> </Text>
+}
+
+export const InputPrompt = memo(function InputPrompt({
+  onSubmit,
+  disabled,
+  inline = false,
+}: InputPromptProps): React.ReactNode {
+  const [value, setValue] = useState('')
+  const [cursorVisible, setCursorVisible] = useState(true)
+
+  useEffect(() => {
+    if (disabled) return
+    const interval = setInterval(() => setCursorVisible((v) => !v), 530)
+    return () => clearInterval(interval)
+  }, [disabled])
+
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        const trimmed = value.trim()
+        if (trimmed) {
+          onSubmit(trimmed)
+          setValue('')
+        }
+        return
+      }
+
+      if (key.tab || input === '\u001b[Z') {
+        return
+      }
+
+      if (key.backspace || key.delete) {
+        setValue((v) => v.slice(0, -1))
+        return
+      }
+
+      // Ctrl+W - delete previous word
+      if (key.ctrl && input === 'w') {
+        setValue((v) => v.replace(/\S+\s*$/, ''))
+        return
+      }
+
+      // Ctrl+U - delete entire line
+      if (key.ctrl && input === 'u') {
+        setValue('')
+        return
+      }
+
+      if (input && !key.ctrl && !key.meta) {
+        setValue((v) => v + input)
+      }
+    },
+    { isActive: !disabled },
+  )
+
+  const promptColor = disabled ? 'gray' : 'cyan'
+
+  const content = disabled ? (
+    <>
+      <Text color={promptColor}>❯ </Text>
+      <Text color="gray">{value || '...'}</Text>
+    </>
+  ) : (
+    <>
+      <Text color={promptColor}>❯ </Text>
+      <Text>
+        {value}
+        <Cursor visible={cursorVisible} />
+      </Text>
+    </>
+  )
+
+  if (inline) return <Box>{content}</Box>
+
+  return <Box marginTop={1}>{content}</Box>
+})

package/src/ui/components/MicroOrb.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import { Text } from 'ink'
+
+import type { AppState } from '../../types'
+import { useAnimationFrame } from '../hooks/useAnimationFrame'
+
+const BRAILLE_FRAMES = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷'] as const
+
+interface MicroOrbProps {
+  state: AppState
+}
+
+export const MicroOrb = memo(function MicroOrb({ state }: MicroOrbProps) {
+  const isAnimating = state !== 'idle'
+  const frame = useAnimationFrame({ fps: 8, active: isAnimating })
+
+  if (!isAnimating) {
+    return <Text color="green">●</Text>
+  }
+
+  const color = state === 'speaking' || state === 'processing_speaking' ? 'magenta' : 'yellow'
+  const char = BRAILLE_FRAMES[frame % BRAILLE_FRAMES.length]
+
+  return <Text color={color}>{char}</Text>
+})

package/src/ui/components/TTSErrorBanner.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import type { TTSErrorType } from '../../types'
+
+interface TTSErrorBannerProps {
+  type: TTSErrorType
+  message: string
+}
+
+interface ErrorConfig {
+  icon: string
+  hint: string
+}
+
+const ERROR_CONFIG: Record<TTSErrorType, ErrorConfig> = {
+  command_not_found: {
+    icon: '⚠',
+    hint: 'Voice output is unavailable',
+  },
+  audio_playback: { icon: '🔇', hint: 'Audio playback failed' },
+  generation_failed: { icon: '🔇', hint: 'Voice synthesis failed' },
+}
+
+export function TTSErrorBanner({ type, message }: TTSErrorBannerProps): React.ReactNode {
+  const { icon, hint } = ERROR_CONFIG[type]
+  const showMessage = Boolean(message)
+
+  return (
+    <Box marginBottom={1}>
+      <Text color="yellow">
+        {icon} {hint}
+        {showMessage && <Text color="gray"> ({message})</Text>}
+      </Text>
+    </Box>
+  )
+}

package/src/ui/components/TurnRow.tsx

@@ -0,0 +1,71 @@
+import { memo, useMemo } from 'react'
+import { Box, Text } from 'ink'
+
+import type { DetailMode, HistoryEntry } from '../../types'
+import { stripMarkdown } from '../utils/markdown'
+import { truncateLines } from '../utils/text'
+import { ActivityTimeline } from './ActivityTimeline'
+
+interface TurnRowProps {
+  turn: HistoryEntry
+  detailMode: DetailMode
+  isLive?: boolean
+  maxAnswerLines?: number
+  assistantLabel: string
+}
+
+export const TurnRow = memo(function TurnRow({
+  turn,
+  detailMode,
+  isLive = false,
+  maxAnswerLines,
+  assistantLabel,
+}: TurnRowProps) {
+  const hasAnswer = Boolean(turn.answer || turn.error)
+
+  const { displayContent, truncatedCount } = useMemo(() => {
+    if (!turn.answer && !turn.error) return { displayContent: '', truncatedCount: 0 }
+
+    const rawContent = turn.answer ? stripMarkdown(turn.answer) : `Error: ${turn.error}`
+    if (!maxAnswerLines || !turn.answer) {
+      return { displayContent: rawContent, truncatedCount: 0 }
+    }
+    const result = truncateLines(rawContent, maxAnswerLines)
+    return { displayContent: result.text, truncatedCount: result.truncatedCount }
+  }, [turn.answer, turn.error, maxAnswerLines])
+
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text color="cyan" bold>
+          you:{' '}
+        </Text>
+        <Text wrap="wrap">{turn.question}</Text>
+      </Text>
+
+      {turn.toolCalls.length > 0 && (
+        <ActivityTimeline toolCalls={turn.toolCalls} detailMode={detailMode} isLive={isLive} />
+      )}
+
+      {truncatedCount > 0 && <Text dimColor>{`⋮ (${truncatedCount} lines above)`}</Text>}
+
+      {isLive && !hasAnswer ? (
+        <Text>
+          <Text color="green" bold>
+            {assistantLabel}:{' '}
+          </Text>
+          <Text dimColor>…</Text>
+        </Text>
+      ) : hasAnswer ? (
+        <Text>
+          <Text color="green" bold>
+            {assistantLabel}:{' '}
+          </Text>
+          <Text wrap="wrap" color={turn.error ? 'red' : undefined}>
+            {displayContent}
+          </Text>
+        </Text>
+      ) : null}
+    </Box>
+  )
+})

package/src/ui/components/WelcomeSplash.tsx

@@ -0,0 +1,78 @@
+import { Box, Text, useInput } from 'ink'
+
+import { AsciiOrb, type AnimationMode } from './AsciiOrb'
+
+interface WelcomeSplashProps {
+  animationMode?: AnimationMode
+  assistantLabel?: string
+  projectName?: string
+  modelLabel?: string
+  ttsVoice?: string
+  ttsSpeed?: number
+  ttsEnabled?: boolean
+  onDismiss?: () => void
+}
+
+function formatConfigSummary(
+  modelLabel?: string,
+  ttsVoice?: string,
+  ttsSpeed?: number,
+  ttsEnabled?: boolean,
+): string | null {
+  const parts: string[] = []
+  if (modelLabel) parts.push(modelLabel.toLowerCase())
+  if (ttsEnabled && ttsVoice) {
+    parts.push(ttsVoice)
+    if (ttsSpeed != null) parts.push(`x${ttsSpeed}`)
+  }
+  return parts.length > 0 ? parts.join(' · ') : null
+}
+
+function spaceLetters(name: string): string {
+  return name.split('').join(' ')
+}
+
+export function WelcomeSplash({
+  animationMode = 'idle',
+  assistantLabel = 'claude',
+  projectName,
+  modelLabel,
+  ttsVoice,
+  ttsSpeed,
+  ttsEnabled,
+  onDismiss,
+}: WelcomeSplashProps) {
+  const configSummary = formatConfigSummary(modelLabel, ttsVoice, ttsSpeed, ttsEnabled)
+
+  useInput((_input, key) => {
+    if (key.return) onDismiss?.()
+  })
+
+  return (
+    <Box flexDirection="column" alignItems="center">
+      {projectName && (
+        <>
+          <Text color="gray" dimColor>
+            {spaceLetters(projectName)}
+          </Text>
+          <Text> </Text>
+        </>
+      )}
+      <AsciiOrb mode={animationMode} />
+      <Text> </Text>
+      <Text color="gray">talk to {assistantLabel}</Text>
+      <Text> </Text>
+      <Text color="gray" dimColor>
+        press enter to continue
+      </Text>
+      {configSummary && (
+        <>
+          <Text> </Text>
+          <Text color="gray" dimColor>
+            {configSummary}
+          </Text>
+        </>
+      )}
+    </Box>
+  )
+}