agent-facets 0.2.2 → 0.3.3

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

package/src/tui/context/form-state-context.ts

@@ -1,260 +0,0 @@
-import type { ReactNode } from 'react'
-import { createContext, createElement, useCallback, useContext, useMemo, useState } from 'react'
-import type { CreateOptions } from '../../commands/create-scaffold.ts'
-import { isValidKebabCase } from '../../commands/create-scaffold.ts'
-
-// --- Types ---
-
-export type FieldStatus = 'empty' | 'editing' | 'confirmed'
-export type RequiredFieldKey = 'name' | 'description' | 'version'
-export type AssetSectionKey = 'skill' | 'command' | 'agent'
-
-export interface FieldState {
-  value: string
-  status: FieldStatus
-}
-
-export interface AssetSectionState {
-  items: string[]
-  descriptions: Record<string, string>
-  editing?: string
-  adding: boolean
-}
-
-export interface FormState {
-  fields: {
-    name: FieldState
-    description: FieldState
-    version: FieldState
-  }
-  assets: {
-    skill: AssetSectionState
-    command: AssetSectionState
-    agent: AssetSectionState
-  }
-}
-
-// --- Context value ---
-
-interface FormStateContextValue {
-  form: FormState
-
-  // Field operations
-  setFieldValue: (field: RequiredFieldKey, value: string) => void
-  setFieldStatus: (field: RequiredFieldKey, status: FieldStatus) => void
-
-  // Asset operations
-  addAsset: (section: AssetSectionKey, name: string) => void
-  removeAsset: (section: AssetSectionKey, name: string) => void
-  renameAsset: (section: AssetSectionKey, oldName: string, newName: string) => void
-  setAssetDescription: (section: AssetSectionKey, name: string, description: string) => void
-  setAssetAdding: (section: AssetSectionKey, adding: boolean) => void
-  setAssetEditing: (section: AssetSectionKey, name?: string) => void
-
-  // Build CreateOptions for scaffold
-  toCreateOptions: () => CreateOptions
-}
-
-// --- Defaults ---
-
-const defaultAssetSection: AssetSectionState = {
-  items: [],
-  descriptions: {},
-  editing: undefined,
-  adding: false,
-}
-
-const defaultForm: FormState = {
-  fields: {
-    name: { value: '', status: 'empty' },
-    description: { value: '', status: 'empty' },
-    version: { value: '', status: 'empty' },
-  },
-  assets: {
-    skill: { ...defaultAssetSection },
-    command: { ...defaultAssetSection },
-    agent: { ...defaultAssetSection },
-  },
-}
-
-const FormStateContext = createContext<FormStateContextValue>({
-  form: defaultForm,
-  setFieldValue: () => {},
-  setFieldStatus: () => {},
-  addAsset: () => {},
-  removeAsset: () => {},
-  renameAsset: () => {},
-  setAssetDescription: () => {},
-  setAssetAdding: () => {},
-  setAssetEditing: () => {},
-  toCreateOptions: () => ({ name: '', version: '', description: '', skills: [], commands: [], agents: [] }),
-})
-
-// --- Provider ---
-
-export function FormStateProvider({ children, initialState }: { children: ReactNode; initialState?: FormState }) {
-  const [form, setForm] = useState<FormState>(initialState ?? defaultForm)
-
-  const setFieldValue = useCallback((field: RequiredFieldKey, value: string) => {
-    setForm((prev) => ({
-      ...prev,
-      fields: {
-        ...prev.fields,
-        [field]: { ...prev.fields[field], value },
-      },
-    }))
-  }, [])
-
-  const setFieldStatus = useCallback((field: RequiredFieldKey, status: FieldStatus) => {
-    setForm((prev) => ({
-      ...prev,
-      fields: {
-        ...prev.fields,
-        [field]: { ...prev.fields[field], status },
-      },
-    }))
-  }, [])
-
-  const addAsset = useCallback((section: AssetSectionKey, name: string) => {
-    if (!isValidKebabCase(name)) return
-    setForm((prev) => {
-      const current = prev.assets[section]
-      if (current.items.includes(name)) return prev
-      const defaultDesc = `The ${name} ${section} description`
-      return {
-        ...prev,
-        assets: {
-          ...prev.assets,
-          [section]: {
-            ...current,
-            items: [...current.items, name],
-            descriptions: { ...current.descriptions, [name]: defaultDesc },
-          },
-        },
-      }
-    })
-  }, [])
-
-  const removeAsset = useCallback((section: AssetSectionKey, name: string) => {
-    setForm((prev) => {
-      const current = prev.assets[section]
-      const { [name]: _, ...remainingDescs } = current.descriptions
-      return {
-        ...prev,
-        assets: {
-          ...prev.assets,
-          [section]: {
-            ...current,
-            items: current.items.filter((item) => item !== name),
-            descriptions: remainingDescs,
-            editing: current.editing === name ? undefined : current.editing,
-          },
-        },
-      }
-    })
-  }, [])
-
-  const renameAsset = useCallback((section: AssetSectionKey, oldName: string, newName: string) => {
-    if (!isValidKebabCase(newName)) return
-    setForm((prev) => {
-      const current = prev.assets[section]
-      if (current.items.includes(newName)) return prev
-      const { [oldName]: desc, ...restDescs } = current.descriptions
-      return {
-        ...prev,
-        assets: {
-          ...prev.assets,
-          [section]: {
-            ...current,
-            items: current.items.map((item) => (item === oldName ? newName : item)),
-            descriptions: { ...restDescs, [newName]: desc ?? `A ${newName} ${section}` },
-            editing: current.editing === oldName ? newName : current.editing,
-          },
-        },
-      }
-    })
-  }, [])
-
-  const setAssetDescription = useCallback((section: AssetSectionKey, name: string, description: string) => {
-    setForm((prev) => {
-      const current = prev.assets[section]
-      return {
-        ...prev,
-        assets: {
-          ...prev.assets,
-          [section]: {
-            ...current,
-            descriptions: { ...current.descriptions, [name]: description },
-          },
-        },
-      }
-    })
-  }, [])
-
-  const setAssetAdding = useCallback((section: AssetSectionKey, adding: boolean) => {
-    setForm((prev) => ({
-      ...prev,
-      assets: {
-        ...prev.assets,
-        [section]: { ...prev.assets[section], adding },
-      },
-    }))
-  }, [])
-
-  const setAssetEditing = useCallback((section: AssetSectionKey, name?: string) => {
-    setForm((prev) => ({
-      ...prev,
-      assets: {
-        ...prev.assets,
-        [section]: { ...prev.assets[section], editing: name },
-      },
-    }))
-  }, [])
-
-  const toCreateOptions = useCallback(
-    (): CreateOptions => ({
-      name: form.fields.name.value,
-      version: form.fields.version.value,
-      description: form.fields.description.value,
-      skills: form.assets.skill.items,
-      commands: form.assets.command.items,
-      agents: form.assets.agent.items,
-    }),
-    [form],
-  )
-
-  const value = useMemo<FormStateContextValue>(
-    () => ({
-      form,
-      setFieldValue,
-      setFieldStatus,
-      addAsset,
-      removeAsset,
-      renameAsset,
-      setAssetDescription,
-      setAssetAdding,
-      setAssetEditing,
-      toCreateOptions,
-    }),
-    [
-      form,
-      setFieldValue,
-      setFieldStatus,
-      addAsset,
-      removeAsset,
-      renameAsset,
-      setAssetDescription,
-      setAssetAdding,
-      setAssetEditing,
-      toCreateOptions,
-    ],
-  )
-
-  return createElement(FormStateContext.Provider, { value }, children)
-}
-
-// --- Hook ---
-
-export function useFormState() {
-  return useContext(FormStateContext)
-}

package/src/tui/editor.ts

@@ -1,40 +0,0 @@
-import { spawnSync } from 'node:child_process'
-import { readFileSync, unlinkSync, writeFileSync } from 'node:fs'
-import { tmpdir } from 'node:os'
-import { join } from 'node:path'
-
-/**
- * Opens the user's preferred terminal editor with the given content.
- * Returns the edited content after the editor closes.
- *
- * This is synchronous — it blocks the event loop while the editor is open.
- * Callers must ensure the TUI is in a safe state before calling.
- *
- * Uses $VISUAL, $EDITOR, or falls back to 'vi'.
- */
-export function openInEditorSync(content: string, filename = 'description.md'): string | null {
-  const editor = process.env.VISUAL || process.env.EDITOR || 'vi'
-  const tmpFile = join(tmpdir(), `facet-${Date.now()}-${filename}`)
-
-  writeFileSync(tmpFile, content, 'utf-8')
-
-  // Split editor command to support args (e.g., "code --wait")
-  const [cmd, ...args] = editor.split(' ')
-  if (!cmd) return null
-
-  const result = spawnSync(cmd, [...args, tmpFile], {
-    stdio: 'inherit',
-  })
-
-  if (result.status !== 0) return null
-
-  const edited = readFileSync(tmpFile, 'utf-8')
-
-  try {
-    unlinkSync(tmpFile)
-  } catch {
-    // Ignore cleanup failures
-  }
-
-  return edited
-}

package/src/tui/gradient.ts

@@ -1 +0,0 @@
-export { GRADIENT_STOPS, getAnimatedGradient } from '@agent-facets/brand'

package/src/tui/hooks/use-exit-keys.ts

@@ -1,75 +0,0 @@
-import { useInput } from 'ink'
-import { useCallback, useEffect, useRef } from 'react'
-import { useFocusMode } from '../context/focus-mode-context.ts'
-
-const EXIT_WINDOW_MS = 3000
-
-/**
- * Handles exit via double-tap Escape with a visible countdown toast.
- *
- * First Escape (when not editing): sets mode to 'exit-modal', starts countdown.
- * Second Escape (while in exit-modal): exits.
- * After 3 seconds: returns to 'form-navigation'.
- * Any other key while in exit-modal: returns to previous mode.
- */
-export function useExitKeys(onExit: () => void) {
-  const { mode, setMode, setExitSecondsLeft } = useFocusMode()
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  const previousModeRef = useRef(mode)
-
-  const clearTimers = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current)
-      timerRef.current = null
-    }
-    if (countdownRef.current) {
-      clearInterval(countdownRef.current)
-      countdownRef.current = null
-    }
-  }, [])
-
-  const dismiss = useCallback(() => {
-    setExitSecondsLeft(0)
-    clearTimers()
-    setMode(previousModeRef.current === 'exit-modal' ? 'form-navigation' : previousModeRef.current)
-  }, [clearTimers, setMode, setExitSecondsLeft])
-
-  const startExitWindow = useCallback(() => {
-    previousModeRef.current = mode
-    setMode('exit-modal')
-    setExitSecondsLeft(3)
-
-    clearTimers()
-
-    countdownRef.current = setInterval(() => {
-      setExitSecondsLeft((prev: number) => {
-        if (prev <= 1) return 0
-        return prev - 1
-      })
-    }, 1000)
-
-    timerRef.current = setTimeout(() => {
-      dismiss()
-    }, EXIT_WINDOW_MS)
-  }, [clearTimers, dismiss, mode, setMode, setExitSecondsLeft])
-
-  useEffect(() => clearTimers, [clearTimers])
-
-  useInput((_input, key) => {
-    if (key.escape) {
-      if (mode === 'exit-modal') {
-        clearTimers()
-        onExit()
-      } else if (mode !== 'field-revision') {
-        startExitWindow()
-      }
-      return
-    }
-
-    // Any other key while in exit-modal dismisses it
-    if (mode === 'exit-modal') {
-      dismiss()
-    }
-  })
-}

package/src/tui/hooks/use-navigation-keys.ts

@@ -1,34 +0,0 @@
-import { useInput } from 'ink'
-import { useFocusMode } from '../context/focus-mode-context.ts'
-import { useFocusOrder } from '../context/focus-order-context.ts'
-
-export function useNavigationKeys() {
-  const { mode } = useFocusMode()
-  const { focusNext, focusPrevious } = useFocusOrder()
-
-  const isActive = mode === 'form-navigation' || mode === 'form-confirmation'
-
-  useInput(
-    (_input, key) => {
-      if (key.downArrow || key.tab) {
-        focusNext()
-        return
-      }
-      if (key.upArrow || (key.shift && key.tab)) {
-        focusPrevious()
-        return
-      }
-      if (mode === 'form-confirmation') {
-        if (key.rightArrow) {
-          focusNext()
-          return
-        }
-        if (key.leftArrow) {
-          focusPrevious()
-          return
-        }
-      }
-    },
-    { isActive },
-  )
-}

package/src/tui/layouts/wizard-layout.tsx

@@ -1,41 +0,0 @@
-import { Box, Text } from 'ink'
-import Gradient from 'ink-gradient'
-import type { ReactNode } from 'react'
-import { useEffect, useState } from 'react'
-import { ExitFooter } from '../components/exit-toast.tsx'
-import { GRADIENT_STOPS, getAnimatedGradient } from '../gradient.ts'
-import { THEME } from '../theme.ts'
-
-const ANIMATION_INTERVAL_MS = 75
-
-function AnimatedGradientText({ text }: { text: string }) {
-  const [offset, setOffset] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setOffset((prev) => (prev + 1) % GRADIENT_STOPS.length)
-    }, ANIMATION_INTERVAL_MS)
-    return () => clearInterval(interval)
-  }, [])
-
-  return (
-    <Gradient colors={getAnimatedGradient(offset)}>
-      <Text bold>{text}</Text>
-    </Gradient>
-  )
-}
-
-export function WizardLayout({ children }: { children: ReactNode }) {
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Box borderStyle="round" borderColor={THEME.brand} paddingX={2} gap={1}>
-        <Text bold color={THEME.brand}>
-          Create a new
-        </Text>
-        <AnimatedGradientText text="FACET" />
-      </Box>
-      {children}
-      <ExitFooter />
-    </Box>
-  )
-}

package/src/tui/theme.ts

@@ -1 +0,0 @@
-export { THEME } from '@agent-facets/brand'