agent-facets 0.3.0 → 0.3.3

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 }

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

@@ -1,140 +0,0 @@
-import { Box, Text } from 'ink'
-import { useCallback, useEffect } from 'react'
-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 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',
-}
-
-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('edit-confirm-btn')
-  return ids
-}
-
-export function EditView({
-  onSubmit,
-  onEditDescription,
-}: {
-  onSubmit: () => void
-  onEditDescription?: (section: 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
-  }, [])
-
-  useEffect(() => {
-    const ids = computeFocusIds(form)
-    setFocusIds(ids)
-
-    if (focusedId && !ids.includes(focusedId)) {
-      focus(ids[0] ?? '')
-    }
-  }, [form, setFocusIds, focus, focusedId])
-
-  const totalAssets = form.assets.skill.items.length + form.assets.agent.items.length + form.assets.command.items.length
-  const canConfirm = totalAssets > 0
-
-  useEffect(() => {
-    if (!focusedId) {
-      focus('field-name')
-    }
-  }, [focusedId, focus])
-
-  return (
-    <Box flexDirection="column" padding={1} gap={1}>
-      <Text bold color={THEME.brand}>
-        Edit facet
-      </Text>
-
-      <Box flexDirection="column">
-        <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"
-          onConfirm={() => focus('field-version')}
-        />
-
-        <EditableField
-          field="version"
-          label="Version"
-          hint="SemVer N.N.N"
-          validate={(v) => (/^\d+\.\d+\.\d+$/.test(v) ? undefined : `Must be SemVer (e.g., ${DEFAULT_VERSION})`)}
-          onConfirm={() => focus(`add-${ASSET_TYPES[0]}`)}
-        />
-      </Box>
-
-      {ASSET_TYPES.map((type) => (
-        <Box key={type} marginTop={0}>
-          <AssetSection
-            section={type}
-            label={ASSET_LABELS[type]}
-            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="edit-confirm-btn"
-          label="[ Review & Confirm ]"
-          disabled={!canConfirm}
-          gradient={canConfirm}
-          animateGradient={canConfirm && focusedId === 'edit-confirm-btn'}
-          onPress={onSubmit}
-        />
-      </Box>
-
-      {!canConfirm && (
-        <Box marginLeft={2}>
-          <Text dimColor>Add at least one skill, agent, or command</Text>
-        </Box>
-      )}
-
-      <Box>
-        <Text dimColor>↑ ↓ navigate · Enter edit · Esc Esc exit (no changes)</Text>
-      </Box>
-    </Box>
-  )
-}

package/src/tui/views/edit/manifest-to-form.ts

@@ -1,38 +0,0 @@
-import type { FacetManifest } from '@agent-facets/core'
-import type { AssetSectionKey, FormState } from '../../context/form-state-context.ts'
-
-/** Maps manifest asset keys to form section keys. */
-const MANIFEST_TO_FORM: Record<string, AssetSectionKey> = {
-  skills: 'skill',
-  agents: 'agent',
-  commands: 'command',
-}
-
-/** Builds initial form state from an existing manifest. */
-export function manifestToFormState(manifest: FacetManifest): FormState {
-  const assets: FormState['assets'] = {
-    skill: { items: [], descriptions: {}, editing: undefined, adding: false },
-    agent: { items: [], descriptions: {}, editing: undefined, adding: false },
-    command: { items: [], descriptions: {}, editing: undefined, adding: false },
-  }
-
-  for (const [manifestKey, formKey] of Object.entries(MANIFEST_TO_FORM)) {
-    const section = manifest[manifestKey as keyof FacetManifest]
-    if (section && typeof section === 'object' && !Array.isArray(section)) {
-      const entries = section as Record<string, { description?: string }>
-      for (const [name, descriptor] of Object.entries(entries)) {
-        assets[formKey].items.push(name)
-        assets[formKey].descriptions[name] = descriptor.description ?? `A ${name} ${formKey}`
-      }
-    }
-  }
-
-  return {
-    fields: {
-      name: { value: manifest.name, status: 'confirmed' },
-      description: { value: manifest.description ?? '', status: 'confirmed' },
-      version: { value: manifest.version, status: 'confirmed' },
-    },
-    assets,
-  }
-}