agent-facets 0.2.2 → 0.3.3

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

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

@@ -1,158 +0,0 @@
-import { Box, Text } from 'ink'
-import { useCallback, useEffect } from 'react'
-import { ASSET_LABELS, ASSET_TYPES } from '../../../commands/create/types.ts'
-import { DEFAULT_VERSION, isValidKebabCase } from '../../../commands/create-scaffold.ts'
-import { AssetSection } from '../../components/asset-section.tsx'
-import { Button } from '../../components/button.tsx'
-import { EditableField } from '../../components/editable-field.tsx'
-import { useFocusOrder } from '../../context/focus-order-context.ts'
-import { useFormState } from '../../context/form-state-context.ts'
-import { WizardLayout } from '../../layouts/wizard-layout.tsx'
-
-function computeFocusIds(form: ReturnType<typeof useFormState>['form']): string[] {
-  const ids: string[] = ['field-name', 'field-description', 'field-version']
-
-  for (const type of ASSET_TYPES) {
-    const section = form.assets[type]
-
-    for (let i = 0; i < section.items.length; i++) {
-      ids.push(`item-${type}-${i}`)
-    }
-
-    ids.push(`add-${type}`)
-  }
-
-  ids.push('create-btn')
-
-  return ids
-}
-
-export function CreateView({
-  onSubmit,
-  onEditDescription,
-}: {
-  onSubmit: () => void
-  onEditDescription?: (section: import('../../context/form-state-context.ts').AssetSectionKey, name: string) => void
-}) {
-  const { form } = useFormState()
-  const { setFocusIds, focus, focusedId } = useFocusOrder()
-
-  const validateKebab = useCallback((v: string) => {
-    if (!v) return undefined
-    if (!isValidKebabCase(v)) return 'Must be kebab-case (e.g., my-facet)'
-    return undefined
-  }, [])
-
-  // Derived state from context
-  const nameConfirmed = form.fields.name.status === 'confirmed'
-  const descriptionConfirmed = form.fields.description.status === 'confirmed'
-  const versionConfirmed = form.fields.version.status === 'confirmed'
-
-  // Settled = confirmed or has a value (being revised). Used for dimming.
-  const nameSettled = nameConfirmed || !!form.fields.name.value
-  const descriptionSettled = descriptionConfirmed || !!form.fields.description.value
-  const versionSettled = versionConfirmed || !!form.fields.version.value
-
-  const descriptionReady = nameSettled
-  const versionReady = nameSettled && descriptionSettled
-  const assetsReady = nameSettled && descriptionSettled && versionSettled
-
-  const totalAssets = form.assets.skill.items.length + form.assets.command.items.length + form.assets.agent.items.length
-  const canCreate = assetsReady && totalAssets > 0
-
-  // Recompute focus order
-  useEffect(() => {
-    const ids = computeFocusIds(form)
-    setFocusIds(ids)
-
-    if (focusedId && !ids.includes(focusedId)) {
-      focus(ids[0] ?? '')
-    }
-  }, [form, setFocusIds, focus, focusedId])
-
-  // Auto-focus name field on mount
-  useEffect(() => {
-    if (!focusedId) {
-      focus('field-name')
-    }
-  }, [focusedId, focus])
-
-  return (
-    <WizardLayout>
-      <EditableField
-        field="name"
-        label="Name"
-        placeholder="my-facet"
-        hint="kebab-case"
-        validate={validateKebab}
-        onConfirm={() => focus('field-description')}
-      />
-
-      <EditableField
-        field="description"
-        label="Description"
-        placeholder="A brief description of what this facet does"
-        dimmed={!descriptionReady}
-        onConfirm={() => focus('field-version')}
-      />
-
-      <EditableField
-        field="version"
-        label="Version"
-        hint="SemVer N.N.N"
-        defaultValue={DEFAULT_VERSION}
-        dimmed={!versionReady}
-        validate={(v) => (/^\d+\.\d+\.\d+$/.test(v) ? undefined : `Must be SemVer (e.g., ${DEFAULT_VERSION})`)}
-        onConfirm={() => focus(`add-${ASSET_TYPES[0]}`)}
-      />
-
-      {ASSET_TYPES.map((type) => (
-        <Box key={type} marginTop={0}>
-          <AssetSection
-            section={type}
-            label={ASSET_LABELS[type]}
-            defaultName={form.assets[type].items.length === 0 ? form.fields.name.value : undefined}
-            dimmed={!assetsReady}
-            onEditDescription={onEditDescription}
-            validate={(v) => {
-              if (!isValidKebabCase(v)) return 'Must be kebab-case'
-              const editing = form.assets[type].editing
-              if (form.assets[type].items.some((item) => item === v && item !== editing)) return `"${v}" already exists`
-              return undefined
-            }}
-          />
-        </Box>
-      ))}
-
-      <Box marginTop={1}>
-        <Button
-          id="create-btn"
-          label="[ Create facet ]"
-          color="green"
-          disabled={!canCreate}
-          gradient={canCreate}
-          animateGradient={canCreate && focusedId === 'create-btn'}
-          onPress={onSubmit}
-        />
-      </Box>
-
-      {!canCreate && (
-        <Box marginLeft={2}>
-          <Text dimColor>
-            {!nameConfirmed
-              ? 'Enter a name to continue'
-              : !descriptionConfirmed
-                ? 'Enter a description to continue'
-                : !versionConfirmed
-                  ? 'Enter a version to continue'
-                  : 'Add at least one skill, agent, or command'}
-          </Text>
-        </Box>
-      )}
-
-      <Box marginTop={1}>
-        <Text dimColor>↑ ↓ to navigate, Enter to select/edit, Esc Esc to exit</Text>
-      </Box>
-    </WizardLayout>
-  )
-}

package/src/tui/views/create/wizard.tsx

@@ -1,97 +0,0 @@
-import { useApp } from 'ink'
-import { useCallback, useEffect, useState } from 'react'
-import type { CreateOptions } from '../../../commands/create-scaffold.ts'
-import { FocusModeProvider, useFocusMode } from '../../context/focus-mode-context.ts'
-import { FocusOrderProvider, useFocusOrder } from '../../context/focus-order-context.ts'
-import type { AssetSectionKey, FormState } from '../../context/form-state-context.ts'
-import { FormStateProvider, useFormState } from '../../context/form-state-context.ts'
-import { useExitKeys } from '../../hooks/use-exit-keys.ts'
-import { useNavigationKeys } from '../../hooks/use-navigation-keys.ts'
-import { ConfirmView } from './confirm-view.tsx'
-import { CreateView } from './create-view.tsx'
-
-export interface WizardSnapshot {
-  form: FormState
-  focusedId: string | null
-  selectedItem?: {
-    section: AssetSectionKey
-    name: string
-    field: 'name' | 'description'
-  }
-}
-
-export interface CreateWizardProps {
-  onComplete: (opts: CreateOptions) => void
-  onCancel: () => void
-  snapshot?: WizardSnapshot
-  onSnapshot?: (snapshot: WizardSnapshot) => void
-  onRequestEditor?: (section: AssetSectionKey, name: string, description: string) => void
-}
-
-function CreateWizardInner({ onComplete, onCancel, snapshot, onSnapshot, onRequestEditor }: CreateWizardProps) {
-  const { exit } = useApp()
-  const { setMode } = useFocusMode()
-  const { form, toCreateOptions } = useFormState()
-  const { focusedId } = useFocusOrder()
-
-  const [confirming, setConfirming] = useState(false)
-
-  // Keep the parent informed of current state for snapshot
-  useEffect(() => {
-    onSnapshot?.({ form, focusedId, selectedItem: snapshot?.selectedItem })
-  }, [form, focusedId, onSnapshot, snapshot?.selectedItem])
-
-  const cancel = useCallback(() => {
-    onCancel()
-    exit()
-  }, [onCancel, exit])
-
-  useExitKeys(cancel)
-  useNavigationKeys()
-
-  const handleEditDescription = useCallback(
-    (section: AssetSectionKey, name: string) => {
-      const description = form.assets[section].descriptions[name] ?? ''
-      onRequestEditor?.(section, name, description)
-    },
-    [form, onRequestEditor],
-  )
-
-  if (confirming) {
-    return (
-      <ConfirmView
-        opts={toCreateOptions()}
-        onConfirm={() => {
-          onComplete(toCreateOptions())
-          exit()
-        }}
-        onBack={() => {
-          setConfirming(false)
-          setMode('form-navigation')
-        }}
-      />
-    )
-  }
-
-  return (
-    <CreateView
-      onSubmit={() => {
-        setConfirming(true)
-        setMode('form-confirmation')
-      }}
-      onEditDescription={handleEditDescription}
-    />
-  )
-}
-
-export function CreateWizard(props: CreateWizardProps) {
-  return (
-    <FocusModeProvider>
-      <FocusOrderProvider initialFocusId={props.snapshot?.focusedId}>
-        <FormStateProvider initialState={props.snapshot?.form}>
-          <CreateWizardInner {...props} />
-        </FormStateProvider>
-      </FocusOrderProvider>
-    </FocusModeProvider>
-  )
-}

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

@@ -1,93 +0,0 @@
-import { Box, Text } from 'ink'
-import { useEffect } from 'react'
-import { truncateDescription } from '../../components/asset-description.tsx'
-import { Button } from '../../components/button.tsx'
-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 { THEME } from '../../theme.ts'
-
-const ASSET_TYPES: AssetSectionKey[] = ['skill', 'command', 'agent']
-const ASSET_LABELS: Record<AssetSectionKey, string> = {
-  skill: 'Skills',
-  command: 'Commands',
-  agent: 'Agents',
-}
-
-export function EditConfirmView({ onConfirm, onBack }: { onConfirm: () => void; onBack: () => void }) {
-  const { form } = useFormState()
-  const { setFocusIds, focus, focusedId } = useFocusOrder()
-
-  useEffect(() => {
-    setFocusIds(['edit-apply-btn', 'edit-back-btn'])
-    focus('edit-apply-btn')
-  }, [setFocusIds, focus])
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Text bold color={THEME.brand}>
-        Review changes
-      </Text>
-
-      <Box flexDirection="column">
-        <Box gap={1}>
-          <Text bold>Name:</Text>
-          <Text>{form.fields.name.value || '(none)'}</Text>
-        </Box>
-        <Box gap={1}>
-          <Text bold>Description:</Text>
-          <Text>{truncateDescription(form.fields.description.value || '(none)')}</Text>
-        </Box>
-        <Box gap={1}>
-          <Text bold>Version:</Text>
-          <Text>{form.fields.version.value || '(none)'}</Text>
-        </Box>
-      </Box>
-
-      {ASSET_TYPES.map((type) => {
-        const section = form.assets[type]
-        return (
-          <Box key={type} flexDirection="column">
-            <Text bold>{ASSET_LABELS[type]}:</Text>
-            {section.items.length === 0 ? (
-              <Box marginLeft={2}>
-                <Text dimColor>(none)</Text>
-              </Box>
-            ) : (
-              section.items.map((item) => {
-                const desc = section.descriptions[item] ?? `A ${item} ${type}`
-                return (
-                  <Box key={item} flexDirection="column" marginLeft={2}>
-                    <Box gap={1}>
-                      <Text color={THEME.success}>●</Text>
-                      <Text>{item}</Text>
-                    </Box>
-                    <Box marginLeft={3}>
-                      <Text dimColor>{truncateDescription(desc)}</Text>
-                    </Box>
-                  </Box>
-                )
-              })
-            )}
-          </Box>
-        )
-      })}
-
-      <Box marginTop={1} gap={2}>
-        <Button
-          id="edit-apply-btn"
-          label="[ Yes, apply ]"
-          color={THEME.success}
-          gradient={focusedId === 'edit-apply-btn'}
-          animateGradient={focusedId === 'edit-apply-btn'}
-          onPress={onConfirm}
-        />
-        <Button id="edit-back-btn" label="[ No, go back ]" color={THEME.warning} onPress={onBack} />
-      </Box>
-
-      <Box>
-        <Text dimColor>← → switch · Enter confirm</Text>
-      </Box>
-    </Box>
-  )
-}

package/src/tui/views/edit/edit-types.ts

@@ -1,34 +0,0 @@
-import type { AssetType, FacetManifest } from '@agent-facets/core'
-
-/** A reconciliation item that needs a resolution before editing can proceed. */
-export type ReconciliationItem =
-  | { kind: 'addition'; type: AssetType; name: string; path: string }
-  | { kind: 'missing'; type: AssetType; name: string; expectedPath: string }
-  | { kind: 'front-matter'; type: AssetType; name: string; path: string }
-
-/** The resolution chosen for a reconciliation item. */
-export type ReconciliationResolution =
-  | { action: 'add-to-manifest' }
-  | { action: 'ignore' }
-  | { action: 'scaffold-template' }
-  | { action: 'remove-from-manifest' }
-  | { action: 'strip-front-matter' }
-
-/** All data needed to run the edit TUI. */
-export interface EditContext {
-  rootDir: string
-  manifest: FacetManifest
-  reconciliationItems: ReconciliationItem[]
-}
-
-/** The result of the edit wizard — either applied changes or cancelled. */
-export type EditResult =
-  | { outcome: 'applied'; manifest: FacetManifest; operations: EditOperation[] }
-  | { outcome: 'cancelled' }
-
-/** A file operation to perform on confirmation. */
-export type EditOperation =
-  | { op: 'write-manifest' }
-  | { op: 'scaffold'; type: AssetType; name: string }
-  | { op: 'delete-file'; type: AssetType; name: string }
-  | { op: 'strip-front-matter'; type: AssetType; name: string; path: string }