agent-facets 0.2.2 → 0.3.3

package/src/tui/components/asset-section.tsx

@@ -1,191 +0,0 @@
-import { Box, Text } from 'ink'
-import { useState } from 'react'
-import { useFocusMode } from '../context/focus-mode-context.ts'
-import { useFocusOrder } from '../context/focus-order-context.ts'
-import type { AssetSectionKey } from '../context/form-state-context.ts'
-import { useFormState } from '../context/form-state-context.ts'
-import { AssetDescription, truncateDescription } from './asset-description.tsx'
-import type { AssetField } from './asset-field-picker.tsx'
-import { AssetFieldPicker } from './asset-field-picker.tsx'
-import { AssetInlineInput } from './asset-inline-input.tsx'
-import { AssetItem } from './asset-item.tsx'
-import { Button } from './button.tsx'
-
-export function AssetSection({
-  section,
-  label,
-  defaultName,
-  dimmed,
-  validate,
-  onEditDescription,
-}: {
-  section: AssetSectionKey
-  label: string
-  defaultName?: string
-  dimmed?: boolean
-  validate?: (value: string) => string | undefined
-  onEditDescription?: (section: AssetSectionKey, name: string) => void
-}) {
-  const { form, addAsset, removeAsset, renameAsset, setAssetAdding, setAssetEditing } = useFormState()
-  const { items, descriptions, editing, adding } = form.assets[section]
-  const { setMode } = useFocusMode()
-  const { focusedId, focus } = useFocusOrder()
-  const [inputValue, setInputValue] = useState('')
-  const [error, setError] = useState('')
-  const [selectedItem, setSelectedItem] = useState<string | null>(null)
-
-  const startAdding = () => {
-    setAssetAdding(section, true)
-    setInputValue('')
-    setError('')
-    setMode('field-revision')
-  }
-
-  const startEditing = (name: string) => {
-    setAssetEditing(section, name)
-    setInputValue(name)
-    setError('')
-    setMode('field-revision')
-  }
-
-  const closeInput = (focusTarget?: string | false) => {
-    setAssetAdding(section, false)
-    setAssetEditing(section, undefined)
-    setInputValue('')
-    setError('')
-    if (focusTarget !== false) {
-      setMode('form-navigation')
-      focus(focusTarget ?? `add-${section}`)
-    }
-  }
-
-  const handleFieldChoice = (name: string, field: AssetField) => {
-    setSelectedItem(null)
-    if (field === 'name') {
-      startEditing(name)
-    } else {
-      onEditDescription?.(section, name)
-    }
-  }
-
-  const handleRemove = (name: string) => {
-    const index = items.indexOf(name)
-    removeAsset(section, name)
-
-    if (index < items.length - 1) {
-      focus(`item-${section}-${index}`)
-    } else if (index > 0) {
-      focus(`item-${section}-${index - 1}`)
-    } else {
-      focus(`add-${section}`)
-    }
-  }
-
-  return (
-    <Box flexDirection="column" gap={0}>
-      <Box gap={1}>
-        <Text bold dimColor={dimmed}>
-          {label}
-        </Text>
-        {items.length === 0 && !adding && <Text dimColor>(none)</Text>}
-      </Box>
-
-      {items.map((item, i) => {
-        const itemId = `item-${section}-${i}`
-        const isFocusedItem = focusedId === itemId
-        const description = descriptions[item] ?? `A ${item} ${section}`
-
-        // Field picker (entered via ↓ during name editing)
-        if (selectedItem === item) {
-          return (
-            <AssetFieldPicker
-              key={itemId}
-              name={item}
-              description={truncateDescription(description)}
-              initialField="description"
-              onChoose={(field) => handleFieldChoice(item, field)}
-              onCancel={() => {
-                setSelectedItem(null)
-                setMode('form-navigation')
-                focus(itemId)
-              }}
-            />
-          )
-        }
-
-        // Inline name editing
-        if (editing === item) {
-          return (
-            <Box key={itemId} flexDirection="column">
-              <AssetInlineInput
-                id={itemId}
-                value={inputValue}
-                placeholder={item}
-                error={error}
-                isFocused={isFocusedItem}
-                onChange={setInputValue}
-                validate={validate}
-                onError={setError}
-                onSubmit={(newName) => {
-                  renameAsset(section, item, newName)
-                  closeInput(itemId)
-                }}
-                onCancel={() => closeInput(itemId)}
-                onDownArrow={() => {
-                  closeInput(false)
-                  setSelectedItem(item)
-                }}
-              />
-              <AssetDescription description={description} />
-            </Box>
-          )
-        }
-
-        // Normal display (level 1)
-        return (
-          <Box key={itemId} flexDirection="column">
-            <AssetItem
-              id={itemId}
-              name={item}
-              isFocused={isFocusedItem}
-              onEdit={() => startEditing(item)}
-              onRemove={() => handleRemove(item)}
-            />
-            <AssetDescription description={description} />
-          </Box>
-        )
-      })}
-
-      {adding ? (
-        <AssetInlineInput
-          id={`add-${section}`}
-          value={inputValue}
-          placeholder={defaultName}
-          error={error}
-          isFocused={focusedId === `add-${section}`}
-          onChange={setInputValue}
-          validate={validate}
-          onError={setError}
-          onSubmit={(name) => {
-            addAsset(section, name)
-            closeInput()
-          }}
-          onCancel={closeInput}
-        />
-      ) : (
-        <Box marginLeft={2}>
-          <Button
-            id={`add-${section}`}
-            label="+ Add"
-            hint={
-              <Text dimColor>
-                <Text>Enter</Text> to add
-              </Text>
-            }
-            onPress={startAdding}
-          />
-        </Box>
-      )}
-    </Box>
-  )
-}

package/src/tui/components/button.tsx

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

@@ -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>
-  )
-}