agent-facets 0.3.0 → 0.3.3

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

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

@@ -1,20 +0,0 @@
-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/reconciliation-item.tsx

@@ -1,129 +0,0 @@
-import { Box, Text, useInput } from 'ink'
-import Gradient from 'ink-gradient'
-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 interface ReconciliationOption {
-  label: string
-}
-
-export function ReconciliationItemRow({
-  id,
-  description,
-  detail,
-  options,
-  selectedIndex,
-  onSelect,
-}: {
-  id: string
-  /** Primary text for this item (e.g., file path or asset name) */
-  description: string
-  /** Optional secondary detail line below the description */
-  detail?: string
-  /** The two action options */
-  options: [ReconciliationOption, ReconciliationOption]
-  /** Index of currently selected option, or null if unresolved */
-  selectedIndex: number | null
-  /** Called when the user locks in an option */
-  onSelect: (index: number) => void
-}) {
-  const { focusedId } = useFocusOrder()
-  const isFocused = focusedId === id
-
-  // Which option is highlighted (cursor position)
-  const [highlightedIndex, setHighlightedIndex] = useState(selectedIndex ?? 0)
-  const [offset, setOffset] = useState(0)
-
-  // Animate gradient when focused
-  useEffect(() => {
-    if (!isFocused) return
-    const interval = setInterval(() => {
-      setOffset((prev) => (prev + 1) % GRADIENT_STOPS.length)
-    }, ANIMATION_INTERVAL_MS)
-    return () => clearInterval(interval)
-  }, [isFocused])
-
-  useInput(
-    (_input, key) => {
-      if (key.leftArrow) setHighlightedIndex(0)
-      if (key.rightArrow) setHighlightedIndex(1)
-      if (key.return) onSelect(highlightedIndex)
-    },
-    { isActive: isFocused },
-  )
-
-  const animatedColors = getAnimatedGradient(offset)
-
-  return (
-    <Box flexDirection="column">
-      <Box gap={2}>
-        <Box gap={1}>
-          {isFocused ? (
-            <Text color={THEME.primary} bold>
-              ▸
-            </Text>
-          ) : (
-            <Text> </Text>
-          )}
-          <Text color={isFocused ? THEME.primary : undefined}>{description}</Text>
-        </Box>
-
-        <Box gap={2}>
-          {options.map((opt, i) => {
-            const isSelected = selectedIndex === i
-            const isHighlighted = isFocused && highlightedIndex === i
-            const isOther = selectedIndex !== null && !isSelected
-
-            if (isHighlighted) {
-              return (
-                <Box key={opt.label} gap={1}>
-                  {isSelected && <Text color={THEME.success}>✓</Text>}
-                  <Gradient colors={animatedColors}>
-                    <Text bold>{opt.label}</Text>
-                  </Gradient>
-                </Box>
-              )
-            }
-
-            if (isSelected && !isFocused) {
-              return (
-                <Box key={opt.label} gap={1}>
-                  <Text color={THEME.success}>✓</Text>
-                  <Gradient colors={[...THEME.gradient]}>
-                    <Text bold>{opt.label}</Text>
-                  </Gradient>
-                </Box>
-              )
-            }
-
-            if (isOther) {
-              return (
-                <Text key={opt.label} dimColor>
-                  {opt.label}
-                </Text>
-              )
-            }
-
-            // Unresolved, unfocused
-            return (
-              <Box key={opt.label} gap={1}>
-                {isSelected && <Text color={THEME.success}>✓</Text>}
-                <Text>{opt.label}</Text>
-              </Box>
-            )
-          })}
-        </Box>
-      </Box>
-
-      {detail && (
-        <Box marginLeft={2}>
-          <Text dimColor>{detail}</Text>
-        </Box>
-      )}
-    </Box>
-  )
-}

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

@@ -1,45 +0,0 @@
-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
-  errors?: 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 flexDirection="column">
-      <Box gap={1}>
-        {ICONS[stage.status]}
-        <Text dimColor={stage.status === 'pending'}>{stage.label}</Text>
-        {stage.detail && <Text color={THEME.hint}> — {stage.detail}</Text>}
-      </Box>
-      {stage.errors && stage.errors.length > 0 && (
-        <Box flexDirection="column" marginLeft={3}>
-          {stage.errors.map((e) => (
-            <Text key={e} color={THEME.warning}>
-              {e}
-            </Text>
-          ))}
-        </Box>
-      )}
-    </Box>
-  )
-}

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

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

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

@@ -1,68 +0,0 @@
-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,
-  initialFocusId,
-}: {
-  children: ReactNode
-  initialFocusId?: string | null
-}) {
-  const [focusIds, setFocusIds] = useState<string[]>([])
-  const [focusedId, setFocusedId] = useState<string | null>(initialFocusId ?? 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)
-}