agent-facets 0.1.1

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

@@ -0,0 +1,229 @@
+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[]
+  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
+  setAssetAdding: (section: AssetSectionKey, adding: boolean) => void
+  setAssetEditing: (section: AssetSectionKey, name?: string) => void
+
+  // Build CreateOptions for scaffold
+  toCreateOptions: () => CreateOptions
+}
+
+// --- Defaults ---
+
+const defaultAssetSection: AssetSectionState = {
+  items: [],
+  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: () => {},
+  setAssetAdding: () => {},
+  setAssetEditing: () => {},
+  toCreateOptions: () => ({ name: '', version: '', description: '', skills: [], commands: [], agents: [] }),
+})
+
+// --- Provider ---
+
+export function FormStateProvider({ children }: { children: ReactNode }) {
+  const [form, setForm] = useState<FormState>(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
+      return {
+        ...prev,
+        assets: {
+          ...prev.assets,
+          [section]: { ...current, items: [...current.items, name] },
+        },
+      }
+    })
+  }, [])
+
+  const removeAsset = useCallback((section: AssetSectionKey, name: string) => {
+    setForm((prev) => {
+      const current = prev.assets[section]
+      return {
+        ...prev,
+        assets: {
+          ...prev.assets,
+          [section]: {
+            ...current,
+            items: current.items.filter((item) => item !== name),
+            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
+      return {
+        ...prev,
+        assets: {
+          ...prev.assets,
+          [section]: {
+            ...current,
+            items: current.items.map((item) => (item === oldName ? newName : item)),
+            editing: current.editing === oldName ? newName : current.editing,
+          },
+        },
+      }
+    })
+  }, [])
+
+  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,
+      setAssetAdding,
+      setAssetEditing,
+      toCreateOptions,
+    }),
+    [
+      form,
+      setFieldValue,
+      setFieldStatus,
+      addAsset,
+      removeAsset,
+      renameAsset,
+      setAssetAdding,
+      setAssetEditing,
+      toCreateOptions,
+    ],
+  )
+
+  return createElement(FormStateContext.Provider, { value }, children)
+}
+
+// --- Hook ---
+
+export function useFormState() {
+  return useContext(FormStateContext)
+}

package/src/tui/gradient.ts

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

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

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

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

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

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

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

@@ -0,0 +1,153 @@
+import { type BuildProgress, runBuildPipeline, writeBuildOutput } from '@agent-facets/core'
+import { Box, Text, useApp } from 'ink'
+import { useCallback, useEffect, 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[]>([
+    { label: 'Validating manifest', status: 'pending' },
+    { label: 'Assembling archive', status: 'pending' },
+    { label: 'Writing output', status: 'pending' },
+  ])
+  const [result, setResult] = useState<BuildViewResult | null>(null)
+  const [errors, setErrors] = useState<string[]>([])
+  const [warnings, setWarnings] = useState<string[]>([])
+
+  const updateStage = useCallback((index: number, update: Partial<Stage>) => {
+    setStages((prev) => prev.map((s, i) => (i === index ? { ...s, ...update } : s)))
+  }, [])
+
+  useEffect(() => {
+    async function run() {
+      // Stages 1 & 2: Validate and assemble archive (pipeline handles both, emits progress)
+      const stageIndexMap: Record<string, number> = {
+        'Validating manifest': 0,
+        'Assembling archive': 1,
+      }
+
+      const pipelineResult = await runBuildPipeline(rootDir, (progress: BuildProgress) => {
+        const index = stageIndexMap[progress.stage]
+        if (index !== undefined) {
+          updateStage(index, {
+            status: progress.status === 'running' ? 'running' : progress.status === 'done' ? 'done' : 'failed',
+          })
+        }
+      })
+
+      setWarnings(pipelineResult.warnings)
+
+      if (!pipelineResult.ok) {
+        setErrors(pipelineResult.errors.map((e) => `${e.path ? `${e.path}: ` : ''}${e.message}`))
+        onFailure?.(pipelineResult.errors.length)
+        exit(new Error('Build failed'))
+        return
+      }
+
+      // Stage 3: Write output
+      updateStage(2, { status: 'running' })
+      try {
+        await writeBuildOutput(pipelineResult, rootDir)
+
+        // Derive file list from asset hashes (these are the files inside the archive)
+        const files = Object.keys(pipelineResult.assetHashes).sort()
+
+        updateStage(2, { 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(2, { status: 'failed', detail: String(err) })
+        exit(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>
+      )}
+
+      {errors.length > 0 && (
+        <Box flexDirection="column">
+          <Text bold color={THEME.warning}>
+            Errors:
+          </Text>
+          {errors.map((e) => (
+            <Text key={e} color={THEME.warning}>
+              {' '}
+              {e}
+            </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

@@ -0,0 +1,74 @@
+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>
+  )
+}