agent-facets 0.1.1

package/src/tui/components/button.tsx

@@ -0,0 +1,92 @@
+import { Box, Text, useInput } from 'ink'
+import Gradient from 'ink-gradient'
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { useFocusOrder } from '../context/focus-order-context.ts'
+import { GRADIENT_STOPS, getAnimatedGradient } from '../gradient.ts'
+import { THEME } from '../theme.ts'
+
+const ANIMATION_INTERVAL_MS = 75
+
+export function Button({
+  id,
+  label,
+  hint,
+  onPress,
+  disabled,
+  color,
+  gradient: showGradient,
+  animateGradient,
+}: {
+  id: string
+  label: string
+  hint?: ReactNode
+  onPress: () => void
+  disabled?: boolean
+  color?: string
+  autoFocus?: boolean
+  gradient?: boolean
+  animateGradient?: boolean
+}) {
+  const { focusedId } = useFocusOrder()
+  const isFocused = focusedId === id && !disabled
+  const [offset, setOffset] = useState(0)
+
+  useEffect(() => {
+    if (!animateGradient) return
+    const interval = setInterval(() => {
+      setOffset((prev) => (prev + 1) % GRADIENT_STOPS.length)
+    }, ANIMATION_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [animateGradient])
+
+  useInput(
+    (_input, key) => {
+      if (key.return) {
+        onPress()
+      }
+    },
+    { isActive: isFocused },
+  )
+
+  const prefix = isFocused ? '▸ ' : '  '
+
+  const focusHint = isFocused && hint ? <Text> {hint}</Text> : null
+
+  if (disabled) {
+    return (
+      <Box gap={0}>
+        <Text color="gray" dimColor>
+          {prefix}
+          {label}
+        </Text>
+      </Box>
+    )
+  }
+
+  if (showGradient) {
+    const colors = animateGradient ? getAnimatedGradient(offset) : [...THEME.gradient]
+
+    return (
+      <Box gap={0}>
+        <Gradient colors={colors}>
+          <Text bold>
+            {prefix}
+            {label}
+          </Text>
+        </Gradient>
+        {focusHint}
+      </Box>
+    )
+  }
+
+  return (
+    <Box gap={0}>
+      <Text color={isFocused ? (color ?? THEME.primary) : undefined} bold={isFocused}>
+        {prefix}
+        {label}
+      </Text>
+      {focusHint}
+    </Box>
+  )
+}

package/src/tui/components/editable-field.tsx

@@ -0,0 +1,172 @@
+import { Box, Text, useInput } from 'ink'
+import TextInput from 'ink-text-input'
+import { useCallback, useEffect, useState } from 'react'
+import { useFocusMode } from '../context/focus-mode-context.ts'
+import { useFocusOrder } from '../context/focus-order-context.ts'
+import type { RequiredFieldKey } from '../context/form-state-context.ts'
+import { useFormState } from '../context/form-state-context.ts'
+import { THEME } from '../theme.ts'
+
+export function EditableField({
+  field,
+  label,
+  placeholder,
+  hint,
+  defaultValue,
+  dimmed,
+  validate,
+  onConfirm,
+}: {
+  field: RequiredFieldKey
+  label: string
+  placeholder?: string
+  hint?: string
+  defaultValue?: string
+  dimmed?: boolean
+  validate?: (value: string) => string | undefined
+  onConfirm?: () => void
+}) {
+  const id = `field-${field}`
+  const { focusedId } = useFocusOrder()
+  const { mode, setMode } = useFocusMode()
+  const { form, setFieldValue, setFieldStatus } = useFormState()
+  const { value, status } = form.fields[field]
+  const isFocused = focusedId === id
+  const editing = status === 'editing'
+  const [error, setError] = useState('')
+  const [didAutofill, setDidAutofill] = useState(false)
+  const [previousValue, setPreviousValue] = useState<string | undefined>(undefined)
+
+  const startEditing = useCallback(() => {
+    setPreviousValue(value || undefined)
+    setFieldStatus(field, 'editing')
+    // Revising an existing value: Escape reverts without triggering exit modal
+    // Initial entry: Escape passes through to the exit hook
+    setMode(value ? 'field-revision' : 'field-initial-entry')
+  }, [field, value, setFieldStatus, setMode])
+
+  const stopEditing = useCallback(() => {
+    setPreviousValue(undefined)
+    setFieldStatus(field, value ? 'confirmed' : 'empty')
+    setMode('form-navigation')
+  }, [field, value, setFieldStatus, setMode])
+
+  const cancelEditing = useCallback(() => {
+    if (previousValue) {
+      setFieldValue(field, previousValue)
+      setPreviousValue(undefined)
+      setFieldStatus(field, 'confirmed')
+      setMode('form-navigation')
+      setError('')
+    }
+  }, [previousValue, field, setFieldValue, setFieldStatus, setMode])
+
+  // Handle Enter to edit, or 'c' to clear and edit
+  useInput(
+    (input, key) => {
+      if (!editing) {
+        if (key.return) {
+          startEditing()
+        }
+        if (input === 'c' && value) {
+          setFieldValue(field, '')
+          startEditing()
+        }
+      }
+    },
+    { isActive: isFocused && !editing && mode === 'form-navigation' },
+  )
+
+  // Handle Enter to confirm / Escape to revert (if previously had value)
+  useInput(
+    (_input, key) => {
+      if (key.return) {
+        if (validate) {
+          const err = validate(value)
+          if (err) {
+            setError(err)
+            return
+          }
+        }
+        if (!value) {
+          setError(`${label} is required`)
+          return
+        }
+        setError('')
+        stopEditing()
+        onConfirm?.()
+      }
+      if (key.escape && previousValue) {
+        cancelEditing()
+      }
+    },
+    { isActive: isFocused && editing },
+  )
+
+  // Auto-start editing when focused on an empty required field
+  useEffect(() => {
+    if (isFocused && !value && !editing && mode === 'form-navigation') {
+      startEditing()
+    }
+  }, [isFocused, value, editing, mode, startEditing])
+
+  // Autofill defaultValue when editing starts on an empty field
+  useEffect(() => {
+    if (editing && !value && defaultValue && !didAutofill) {
+      setFieldValue(field, defaultValue)
+      setDidAutofill(true)
+    }
+  }, [editing, value, defaultValue, didAutofill, field, setFieldValue])
+
+  const isEditing = editing && isFocused
+
+  return (
+    <Box flexDirection="column" gap={0}>
+      <Box gap={1}>
+        <Text color={isFocused ? THEME.primary : undefined} bold={isFocused} dimColor={dimmed && !isFocused}>
+          {label}:
+        </Text>
+        {isEditing && error ? (
+          <Text color={THEME.warning}>{error}</Text>
+        ) : isEditing ? (
+          <>
+            {hint && <Text color={THEME.hint}>({hint})</Text>}
+            {previousValue && (
+              <Text color={THEME.hint}>
+                <Text color={THEME.keyword}>Escape</Text> to revert to{' '}
+                <Text color={THEME.keyword}>"{previousValue}"</Text>
+              </Text>
+            )}
+          </>
+        ) : !isEditing && value ? (
+          <Text color={dimmed && !isFocused ? undefined : THEME.success} dimColor={dimmed && !isFocused}>
+            ✓
+          </Text>
+        ) : !isEditing ? (
+          <Text dimColor>(not set)</Text>
+        ) : null}
+      </Box>
+      <Box marginLeft={2}>
+        {isEditing ? (
+          <Box gap={1}>
+            <Text color={THEME.tertiary}>{'> '}</Text>
+            <TextInput value={value} onChange={(v) => setFieldValue(field, v)} placeholder={placeholder} focus />
+            <Text color={THEME.hint}>
+              · <Text color={THEME.keyword}>Enter</Text> to save
+            </Text>
+          </Box>
+        ) : (
+          <Box gap={1}>
+            <Text dimColor={dimmed && !isFocused}>{value || ' '}</Text>
+            {isFocused && value && (
+              <Text color={THEME.hint}>
+                · <Text color={THEME.keyword}>Enter</Text> to edit · <Text color={THEME.keyword}>c</Text> to clear and
+                edit
+              </Text>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/tui/components/exit-toast.tsx

@@ -0,0 +1,20 @@
+import { Box, Text } from 'ink'
+import { useFocusMode } from '../context/focus-mode-context.ts'
+import { THEME } from '../theme.ts'
+
+export function ExitFooter() {
+  const { mode, exitSecondsLeft } = useFocusMode()
+  const visible = mode === 'exit-modal' && exitSecondsLeft > 0
+
+  return (
+    <Box marginTop={1}>
+      {visible ? (
+        <Text color={THEME.warning} bold>
+          Press Escape again to exit ({exitSecondsLeft}s) — any other key to cancel
+        </Text>
+      ) : (
+        <Text> </Text>
+      )}
+    </Box>
+  )
+}

package/src/tui/components/stage-row.tsx

@@ -0,0 +1,33 @@
+import { Box, Text } from 'ink'
+import Spinner from 'ink-spinner'
+import type { ReactNode } from 'react'
+import { THEME } from '../theme.ts'
+
+export type StageStatus = 'pending' | 'running' | 'done' | 'failed'
+
+export interface Stage {
+  label: string
+  status: StageStatus
+  detail?: string
+}
+
+const ICONS: Record<StageStatus, ReactNode> = {
+  pending: <Text color={THEME.hint}>○</Text>,
+  running: (
+    <Text color={THEME.secondary}>
+      <Spinner type="dots" />
+    </Text>
+  ),
+  done: <Text color={THEME.success}>●</Text>,
+  failed: <Text color={THEME.warning}>✕</Text>,
+}
+
+export function StageRow({ stage }: { stage: Stage }) {
+  return (
+    <Box gap={1}>
+      {ICONS[stage.status]}
+      <Text dimColor={stage.status === 'pending'}>{stage.label}</Text>
+      {stage.detail && <Text color={THEME.hint}> — {stage.detail}</Text>}
+    </Box>
+  )
+}

package/src/tui/components/version-selector.tsx

@@ -0,0 +1,79 @@
+import { Box, Text, useInput } from 'ink'
+import { useState } from 'react'
+
+export function VersionSelector({
+  value,
+  onChange,
+  onSubmit,
+  active,
+}: {
+  value: string
+  onChange: (v: string) => void
+  onSubmit: () => void
+  active: boolean
+}) {
+  const parts = value.split('.').map(Number)
+  const [cursor, setCursor] = useState(0) // 0=major, 1=minor, 2=patch
+
+  useInput(
+    (input, key) => {
+      if (!active) return
+
+      if (key.return) {
+        onSubmit()
+        return
+      }
+      // Tab and left/right all move between segments
+      if (key.leftArrow || (key.shift && key.tab)) {
+        setCursor((c) => Math.max(0, c - 1))
+        return
+      }
+      if (key.rightArrow || key.tab) {
+        setCursor((c) => Math.min(2, c + 1))
+        return
+      }
+      if (key.upArrow) {
+        const next = [...parts]
+        next[cursor] = (next[cursor] ?? 0) + 1
+        onChange(next.join('.'))
+        return
+      }
+      if (key.downArrow) {
+        const next = [...parts]
+        next[cursor] = Math.max(0, (next[cursor] ?? 0) - 1)
+        onChange(next.join('.'))
+        return
+      }
+      // Allow typing a full version directly
+      if (key.backspace) {
+        onChange(value.slice(0, -1))
+        return
+      }
+      if (/[0-9.]/.test(input)) {
+        onChange(value + input)
+        return
+      }
+    },
+    { isActive: active },
+  )
+
+  const segments = value.split('.')
+  return (
+    <Box gap={0}>
+      {segments.map((seg, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: version segments are always positional (major.minor.patch)
+        <Box key={i}>
+          {i > 0 && <Text dimColor>.</Text>}
+          <Text
+            bold={active && cursor === i}
+            color={active && cursor === i ? 'cyan' : undefined}
+            inverse={active && cursor === i}
+          >
+            {seg}
+          </Text>
+        </Box>
+      ))}
+      {active && <Text dimColor>← → to select, ↑ ↓ to change, Enter to confirm</Text>}
+    </Box>
+  )
+}

package/src/tui/context/focus-mode-context.ts

@@ -0,0 +1,36 @@
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
+import { createContext, createElement, useContext, useMemo, useState } from 'react'
+
+export type FocusMode =
+  | 'form-navigation'
+  | 'field-initial-entry'
+  | 'field-revision'
+  | 'exit-modal'
+  | 'form-confirmation'
+
+interface FocusModeState {
+  mode: FocusMode
+  setMode: (mode: FocusMode) => void
+  exitSecondsLeft: number
+  setExitSecondsLeft: Dispatch<SetStateAction<number>>
+}
+
+const FocusModeContext = createContext<FocusModeState>({
+  mode: 'form-navigation',
+  setMode: () => {},
+  exitSecondsLeft: 0,
+  setExitSecondsLeft: () => {},
+})
+
+export function FocusModeProvider({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState<FocusMode>('form-navigation')
+  const [exitSecondsLeft, setExitSecondsLeft] = useState(0)
+
+  const value = useMemo(() => ({ mode, setMode, exitSecondsLeft, setExitSecondsLeft }), [mode, exitSecondsLeft])
+
+  return createElement(FocusModeContext.Provider, { value }, children)
+}
+
+export function useFocusMode() {
+  return useContext(FocusModeContext)
+}

package/src/tui/context/focus-order-context.ts

@@ -0,0 +1,62 @@
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
+import { createContext, createElement, useCallback, useContext, useMemo, useState } from 'react'
+
+interface FocusOrderState {
+  focusedId: string | null
+  focusIds: string[]
+  setFocusIds: (ids: string[]) => void
+  setFocusedId: Dispatch<SetStateAction<string | null>>
+  focusNext: () => void
+  focusPrevious: () => void
+  focus: (id: string) => void
+}
+
+const FocusOrderContext = createContext<FocusOrderState>({
+  focusedId: null,
+  focusIds: [],
+  setFocusIds: () => {},
+  setFocusedId: () => {},
+  focusNext: () => {},
+  focusPrevious: () => {},
+  focus: () => {},
+})
+
+export function FocusOrderProvider({ children }: { children: ReactNode }) {
+  const [focusIds, setFocusIds] = useState<string[]>([])
+  const [focusedId, setFocusedId] = useState<string | null>(null)
+
+  const focusNext = useCallback(() => {
+    setFocusedId((current) => {
+      if (!current || focusIds.length === 0) return focusIds[0] ?? null
+      const idx = focusIds.indexOf(current)
+      if (idx === -1) return focusIds[0] ?? null
+      if (idx === focusIds.length - 1) return current
+      return focusIds[idx + 1] ?? null
+    })
+  }, [focusIds])
+
+  const focusPrevious = useCallback(() => {
+    setFocusedId((current) => {
+      if (!current || focusIds.length === 0) return focusIds[0] ?? null
+      const idx = focusIds.indexOf(current)
+      if (idx === -1) return focusIds[0] ?? null
+      if (idx === 0) return current
+      return focusIds[idx - 1] ?? null
+    })
+  }, [focusIds])
+
+  const focus = useCallback((id: string) => {
+    setFocusedId(id)
+  }, [])
+
+  const value = useMemo(
+    () => ({ focusedId, focusIds, setFocusIds, setFocusedId, focusNext, focusPrevious, focus }),
+    [focusedId, focusIds, focusNext, focusPrevious, focus],
+  )
+
+  return createElement(FocusOrderContext.Provider, { value }, children)
+}
+
+export function useFocusOrder() {
+  return useContext(FocusOrderContext)
+}