agent-facets 0.3.0 → 0.3.3

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'

package/src/tui/views/build/build-view.tsx

@@ -1,152 +0,0 @@
-import {
-  BUILD_STAGES,
-  type BuildProgress,
-  type BuildStage,
-  runBuildPipeline,
-  writeBuildOutput,
-} from '@agent-facets/core'
-import { Box, Text, useApp } from 'ink'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { Stage } from '../../components/stage-row.tsx'
-import { StageRow } from '../../components/stage-row.tsx'
-import { THEME } from '../../theme.ts'
-
-interface BuildViewResult {
-  name: string
-  version: string
-  files: string[]
-  archiveFilename: string
-  integrity: string
-  warnings: string[]
-}
-
-export function BuildView({
-  rootDir,
-  onSuccess,
-  onFailure,
-}: {
-  rootDir: string
-  onSuccess?: (name: string, version: string, fileCount: number, integrity: string) => void
-  onFailure?: (errorCount: number) => void
-}) {
-  const { exit } = useApp()
-  const [stages, setStages] = useState<Stage[]>(BUILD_STAGES.map((label) => ({ label, status: 'pending' as const })))
-  const [result, setResult] = useState<BuildViewResult | null>(null)
-  const [warnings, setWarnings] = useState<string[]>([])
-
-  // Deferred exit: set this to an Error to exit after the next render cycle,
-  // ensuring error/stage state updates are painted before Ink unmounts.
-  const [pendingExit, setPendingExit] = useState<Error | null>(null)
-
-  useEffect(() => {
-    if (pendingExit) {
-      exit(pendingExit)
-    }
-  }, [pendingExit, exit])
-
-  // Build a stable lookup from stage label to index
-  const stageIndexMap = useMemo(() => Object.fromEntries(BUILD_STAGES.map((label, i) => [label, i])), [])
-
-  const updateStage = useCallback(
-    (label: BuildStage, update: Partial<Stage>) => {
-      const index = stageIndexMap[label]
-      if (index !== undefined) {
-        setStages((prev) => prev.map((s, i) => (i === index ? { ...s, ...update } : s)))
-      }
-    },
-    [stageIndexMap],
-  )
-
-  useEffect(() => {
-    async function run() {
-      const pipelineResult = await runBuildPipeline(rootDir, (progress: BuildProgress) => {
-        updateStage(progress.stage, {
-          status: progress.status === 'running' ? 'running' : progress.status === 'done' ? 'done' : 'failed',
-        })
-      })
-
-      setWarnings(pipelineResult.warnings)
-
-      if (!pipelineResult.ok) {
-        const formatted = pipelineResult.errors.map((e) => e.message)
-        // Find the stage that failed and attach errors to it
-        setStages((prev) => prev.map((s) => (s.status === 'failed' ? { ...s, errors: formatted } : s)))
-        onFailure?.(pipelineResult.errors.length)
-        // Defer exit so React renders the errors and failed stage status first
-        setPendingExit(new Error('Build failed'))
-        return
-      }
-
-      // Writing output stage — handled here, not by the pipeline
-      updateStage('Writing output', { status: 'running' })
-      try {
-        await writeBuildOutput(pipelineResult, rootDir)
-
-        const files = Object.keys(pipelineResult.assetHashes).sort()
-
-        updateStage('Writing output', { status: 'done' })
-        setResult({
-          name: pipelineResult.data.name,
-          version: pipelineResult.data.version,
-          files,
-          archiveFilename: pipelineResult.archiveFilename,
-          integrity: pipelineResult.integrity,
-          warnings: pipelineResult.warnings,
-        })
-        onSuccess?.(pipelineResult.data.name, pipelineResult.data.version, files.length, pipelineResult.integrity)
-        exit()
-      } catch (err) {
-        updateStage('Writing output', { status: 'failed', detail: String(err) })
-        setPendingExit(err instanceof Error ? err : new Error(String(err)))
-      }
-    }
-
-    run()
-  }, [rootDir, exit, onSuccess, onFailure, updateStage])
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Text bold color={THEME.brand}>
-        Building facet...
-      </Text>
-
-      <Box flexDirection="column">
-        {stages.map((s) => (
-          <StageRow key={s.label} stage={s} />
-        ))}
-      </Box>
-
-      {warnings.length > 0 && (
-        <Box flexDirection="column">
-          {warnings.map((w) => (
-            <Text key={w} color={THEME.warning}>
-              {' '}
-              ⚠ {w}
-            </Text>
-          ))}
-        </Box>
-      )}
-
-      {result && (
-        <Box flexDirection="column">
-          <Text color={THEME.success} bold>
-            Built successfully → dist/
-          </Text>
-          <Text> {result.archiveFilename}</Text>
-          <Text color={THEME.hint}> Archive contents:</Text>
-          {result.files.map((f) => (
-            <Text key={f}> {f}</Text>
-          ))}
-          <Box marginTop={1}>
-            <Text color={THEME.hint}>
-              {result.files.length} asset{result.files.length !== 1 ? 's' : ''} · {result.integrity}
-            </Text>
-          </Box>
-          <Box marginTop={1}>
-            <Text color={THEME.hint}>Next: facet publish (coming soon)</Text>
-          </Box>
-        </Box>
-      )}
-    </Box>
-  )
-}

package/src/tui/views/create/confirm-view.tsx

@@ -1,74 +0,0 @@
-import { Box, Text } from 'ink'
-import { useEffect } from 'react'
-import type { CreateOptions } from '../../../commands/create-scaffold.ts'
-import { previewFiles } from '../../../commands/create-scaffold.ts'
-import { Button } from '../../components/button.tsx'
-import { useFocusOrder } from '../../context/focus-order-context.ts'
-import { WizardLayout } from '../../layouts/wizard-layout.tsx'
-import { THEME } from '../../theme.ts'
-
-function SummaryField({ label, value }: { label: string; value: string }) {
-  return (
-    <Box gap={1}>
-      <Text color={THEME.success}>✓</Text>
-      <Text bold>{label}:</Text>
-      <Text>{value}</Text>
-    </Box>
-  )
-}
-
-export function ConfirmView({
-  opts,
-  onConfirm,
-  onBack,
-}: {
-  opts: CreateOptions
-  onConfirm: () => void
-  onBack: () => void
-}) {
-  const files = previewFiles(opts)
-  const { setFocusIds, focus, focusedId } = useFocusOrder()
-
-  useEffect(() => {
-    setFocusIds(['confirm-yes', 'confirm-no'])
-    focus('confirm-yes')
-  }, [setFocusIds, focus])
-
-  return (
-    <WizardLayout>
-      <Box flexDirection="column" marginLeft={2}>
-        <SummaryField label="Name" value={opts.name} />
-        <SummaryField label="Description" value={opts.description} />
-        <SummaryField label="Version" value={opts.version} />
-        {opts.skills.length > 0 && <SummaryField label="Skills" value={opts.skills.join(', ')} />}
-        {opts.agents.length > 0 && <SummaryField label="Agents" value={opts.agents.join(', ')} />}
-        {opts.commands.length > 0 && <SummaryField label="Commands" value={opts.commands.join(', ')} />}
-      </Box>
-
-      <Box flexDirection="column" borderStyle="round" borderColor={THEME.success} paddingX={2} paddingY={1} gap={0}>
-        <Text bold color={THEME.success}>
-          Files to create:
-        </Text>
-        {files.map((f) => (
-          <Text key={f}> {f}</Text>
-        ))}
-      </Box>
-
-      <Box gap={2} marginTop={1}>
-        <Button
-          id="confirm-yes"
-          label="[ Yes, create ]"
-          color={THEME.success}
-          gradient={focusedId === 'confirm-yes'}
-          animateGradient={focusedId === 'confirm-yes'}
-          onPress={onConfirm}
-        />
-        <Button id="confirm-no" label="[ No, go back ]" color={THEME.warning} onPress={onBack} />
-      </Box>
-
-      <Box marginTop={1}>
-        <Text dimColor>← → to switch, Enter to confirm</Text>
-      </Box>
-    </WizardLayout>
-  )
-}