agent-facets 0.1.2 → 0.1.4

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

@@ -0,0 +1,170 @@
+import { Box, Text } from 'ink'
+import { useCallback, useEffect, useMemo } from 'react'
+import { Button } from '../../components/button.tsx'
+import { ReconciliationItemRow } from '../../components/reconciliation-item.tsx'
+import { useFocusOrder } from '../../context/focus-order-context.ts'
+import { THEME } from '../../theme.ts'
+import type { ReconciliationItem, ReconciliationResolution } from './edit-types.ts'
+
+/** Maps a reconciliation item to a unique key. */
+function itemKey(item: ReconciliationItem): string {
+  return `${item.kind}:${item.type}:${item.name}`
+}
+
+/** Returns the two action options for a reconciliation item kind. */
+function optionsForKind(kind: ReconciliationItem['kind']): [{ label: string }, { label: string }] {
+  switch (kind) {
+    case 'addition':
+      return [{ label: 'Add to manifest' }, { label: 'Ignore for now' }]
+    case 'missing':
+      return [{ label: 'Scaffold template' }, { label: 'Remove from manifest' }]
+    case 'front-matter':
+      return [{ label: 'Strip front matter' }, { label: 'Remove from manifest' }]
+  }
+}
+
+/** Converts a selected option index to a resolution for the given item kind. */
+function indexToResolution(kind: ReconciliationItem['kind'], index: number): ReconciliationResolution {
+  switch (kind) {
+    case 'addition':
+      return index === 0 ? { action: 'add-to-manifest' } : { action: 'ignore' }
+    case 'missing':
+      return index === 0 ? { action: 'scaffold-template' } : { action: 'remove-from-manifest' }
+    case 'front-matter':
+      return index === 0 ? { action: 'strip-front-matter' } : { action: 'remove-from-manifest' }
+  }
+}
+
+/** Returns the selected option index for a resolution, or null. */
+function resolutionToIndex(
+  kind: ReconciliationItem['kind'],
+  resolution: ReconciliationResolution | undefined,
+): number | null {
+  if (!resolution) return null
+  switch (kind) {
+    case 'addition':
+      return resolution.action === 'add-to-manifest' ? 0 : resolution.action === 'ignore' ? 1 : null
+    case 'missing':
+      return resolution.action === 'scaffold-template' ? 0 : resolution.action === 'remove-from-manifest' ? 1 : null
+    case 'front-matter':
+      return resolution.action === 'strip-front-matter' ? 0 : resolution.action === 'remove-from-manifest' ? 1 : null
+  }
+}
+
+export function ReconciliationView({
+  items,
+  resolutions,
+  onResolve,
+  onContinue,
+}: {
+  items: ReconciliationItem[]
+  resolutions: Map<string, ReconciliationResolution>
+  onResolve: (key: string, resolution: ReconciliationResolution) => void
+  onContinue: () => void
+}) {
+  const { setFocusIds, focusedId, focus } = useFocusOrder()
+
+  const allResolved = items.every((item) => resolutions.has(itemKey(item)))
+
+  // Group items by kind
+  const additions = items.filter((i) => i.kind === 'addition')
+  const missing = items.filter((i) => i.kind === 'missing')
+  const frontMatter = items.filter((i) => i.kind === 'front-matter')
+
+  // Build focus order: all items then continue button
+  const focusIds = useMemo(() => {
+    const ids = items.map((item) => `recon-${itemKey(item)}`)
+    ids.push('recon-continue')
+    return ids
+  }, [items])
+
+  useEffect(() => {
+    setFocusIds(focusIds)
+    if (!focusedId) {
+      focus(focusIds[0] ?? '')
+    }
+  }, [focusIds, setFocusIds, focusedId, focus])
+
+  const handleSelect = useCallback(
+    (item: ReconciliationItem, optionIndex: number) => {
+      const key = itemKey(item)
+      const resolution = indexToResolution(item.kind, optionIndex)
+      onResolve(key, resolution)
+
+      // Auto-advance to next unresolved item
+      const currentIdx = items.findIndex((i) => itemKey(i) === key)
+      for (let i = currentIdx + 1; i < items.length; i++) {
+        const nextItem = items[i]
+        if (!nextItem) continue
+        const nextKey = itemKey(nextItem)
+        if (!resolutions.has(nextKey)) {
+          focus(`recon-${nextKey}`)
+          return
+        }
+      }
+      // All resolved — focus continue button
+      focus('recon-continue')
+    },
+    [items, resolutions, onResolve, focus],
+  )
+
+  const renderGroup = (label: string, groupItems: ReconciliationItem[]) => {
+    if (groupItems.length === 0) return null
+    return (
+      <Box flexDirection="column" key={label}>
+        <Box marginBottom={0}>
+          <Text bold color={THEME.warning}>
+            {label}
+          </Text>
+        </Box>
+        {groupItems.map((item) => {
+          const key = itemKey(item)
+          const description =
+            item.kind === 'missing'
+              ? `${item.name} (${item.type}) — ${item.expectedPath}`
+              : 'path' in item
+                ? item.path
+                : ''
+
+          return (
+            <ReconciliationItemRow
+              key={key}
+              id={`recon-${key}`}
+              description={description}
+              options={optionsForKind(item.kind)}
+              selectedIndex={resolutionToIndex(item.kind, resolutions.get(key))}
+              onSelect={(index) => handleSelect(item, index)}
+            />
+          )
+        })}
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" padding={1} gap={1}>
+      <Text bold color={THEME.brand}>
+        Reconciliation — {items.length} item{items.length !== 1 ? 's' : ''} to resolve
+      </Text>
+
+      {renderGroup('New files on disk:', additions)}
+      {renderGroup('Missing from disk:', missing)}
+      {renderGroup('Front matter detected:', frontMatter)}
+
+      <Box marginTop={1}>
+        <Button
+          id="recon-continue"
+          label="[ Continue to edit ]"
+          disabled={!allResolved}
+          gradient={allResolved}
+          animateGradient={allResolved && focusedId === 'recon-continue'}
+          onPress={onContinue}
+        />
+      </Box>
+
+      <Box>
+        <Text dimColor>↑ ↓ navigate · ← → switch option · Enter select · Esc Esc exit</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/tui/views/edit/use-edit-session.ts

@@ -0,0 +1,125 @@
+import type { FacetManifest } from '@agent-facets/core'
+import { useCallback, useState } from 'react'
+import type { AssetSectionKey, FormState } from '../../context/form-state-context.ts'
+import type { EditContext, EditOperation, EditResult, ReconciliationResolution } from './edit-types.ts'
+
+/** Maps form section keys to manifest asset keys. */
+const FORM_TO_MANIFEST: Record<AssetSectionKey, 'skills' | 'agents' | 'commands'> = {
+  skill: 'skills',
+  agent: 'agents',
+  command: 'commands',
+}
+
+/** Builds a manifest from form state, preserving non-asset fields from the original. */
+function buildManifest(original: FacetManifest, form: FormState): FacetManifest {
+  const manifest: FacetManifest = {
+    ...original,
+    name: form.fields.name.value,
+    version: form.fields.version.value,
+  }
+
+  if (form.fields.description.value) {
+    manifest.description = form.fields.description.value
+  }
+
+  for (const [formKey, manifestKey] of Object.entries(FORM_TO_MANIFEST) as [
+    AssetSectionKey,
+    'skills' | 'agents' | 'commands',
+  ][]) {
+    const items = form.assets[formKey].items
+    if (items.length > 0) {
+      const section: Record<string, { description: string }> = {}
+      for (const name of items) {
+        section[name] = { description: form.assets[formKey].descriptions[name] ?? '' }
+      }
+      manifest[manifestKey] = section
+    } else {
+      delete manifest[manifestKey]
+    }
+  }
+
+  return manifest
+}
+
+/** Builds the list of file operations from resolutions + form changes. */
+function buildOperations(
+  context: EditContext,
+  form: FormState,
+  resolutions: Map<string, ReconciliationResolution>,
+): EditOperation[] {
+  const operations: EditOperation[] = [{ op: 'write-manifest' }]
+
+  // Operations from reconciliation resolutions
+  for (const [key, resolution] of resolutions) {
+    const parts = key.split(':')
+    const kind = parts[0]
+    const assetType = parts[1] as 'skills' | 'agents' | 'commands'
+    const name = parts[2]
+    if (!kind || !assetType || !name) continue
+
+    if (resolution.action === 'scaffold-template') {
+      operations.push({ op: 'scaffold', type: assetType, name })
+    } else if (resolution.action === 'remove-from-manifest' && kind === 'front-matter') {
+      operations.push({ op: 'delete-file', type: assetType, name })
+    } else if (resolution.action === 'strip-front-matter') {
+      const item = context.reconciliationItems.find(
+        (i) => i.kind === 'front-matter' && i.type === assetType && i.name === name,
+      )
+      if (item && 'path' in item) {
+        operations.push({ op: 'strip-front-matter', type: assetType, name, path: item.path })
+      }
+    }
+  }
+
+  // New assets added during editing (not from reconciliation)
+  for (const [formKey, manifestKey] of Object.entries(FORM_TO_MANIFEST) as [
+    AssetSectionKey,
+    'skills' | 'agents' | 'commands',
+  ][]) {
+    const originalSection = context.manifest[manifestKey]
+    const originalNames =
+      originalSection && typeof originalSection === 'object' && !Array.isArray(originalSection)
+        ? Object.keys(originalSection)
+        : []
+
+    for (const name of form.assets[formKey].items) {
+      const isFromReconciliation = resolutions.has(`addition:${manifestKey}:${name}`)
+      if (!originalNames.includes(name) && !isFromReconciliation) {
+        operations.push({ op: 'scaffold', type: manifestKey, name })
+      }
+    }
+
+    // Removed assets
+    for (const name of originalNames) {
+      if (!form.assets[formKey].items.includes(name)) {
+        operations.push({ op: 'delete-file', type: manifestKey, name })
+      }
+    }
+  }
+
+  return operations
+}
+
+export function useEditSession(context: EditContext) {
+  const [resolutions, setResolutions] = useState<Map<string, ReconciliationResolution>>(new Map())
+
+  const resolve = useCallback((key: string, resolution: ReconciliationResolution) => {
+    setResolutions((prev) => {
+      const next = new Map(prev)
+      next.set(key, resolution)
+      return next
+    })
+  }, [])
+
+  /** Builds the final edit result from current form state and resolutions. */
+  const buildResult = useCallback(
+    (form: FormState): EditResult => {
+      const manifest = buildManifest(context.manifest, form)
+      const operations = buildOperations(context, form, resolutions)
+      return { outcome: 'applied', manifest, operations }
+    },
+    [context, resolutions],
+  )
+
+  return { resolutions, resolve, buildResult }
+}

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

@@ -0,0 +1,129 @@
+import { useApp } from 'ink'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+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 { EditConfirmView } from './edit-confirm-view.tsx'
+import type { EditContext, EditResult, ReconciliationResolution } from './edit-types.ts'
+import { EditView } from './edit-view.tsx'
+import { manifestToFormState } from './manifest-to-form.ts'
+import { ReconciliationView } from './reconciliation-view.tsx'
+import { useEditSession } from './use-edit-session.ts'
+
+type EditPhase = 'reconciliation' | 'editing' | 'confirmation'
+
+export interface EditWizardSnapshot {
+  phase: EditPhase
+  formState?: FormState
+  focusedId?: string | null
+  resolutions: Map<string, ReconciliationResolution>
+  selectedItem?: {
+    section: AssetSectionKey
+    name: string
+    field: 'name' | 'description'
+  }
+}
+
+export interface EditWizardProps {
+  context: EditContext
+  snapshot?: EditWizardSnapshot
+  onComplete: (result: EditResult) => void
+  onSnapshot?: (snapshot: EditWizardSnapshot) => void
+  onRequestEditor?: (section: AssetSectionKey, name: string, description: string) => void
+}
+
+function EditWizardInner({ context, snapshot, onComplete, onSnapshot, onRequestEditor }: EditWizardProps) {
+  const { exit } = useApp()
+  const { setMode } = useFocusMode()
+  const { form } = useFormState()
+  const { focusedId, focus } = useFocusOrder()
+  const hasReconciliation = context.reconciliationItems.length > 0
+
+  const initialPhase = snapshot?.phase ?? (hasReconciliation ? 'reconciliation' : 'editing')
+  const [phase, setPhase] = useState<EditPhase>(initialPhase)
+  const { resolutions, resolve, buildResult } = useEditSession(context)
+
+  // Report snapshot to parent for editor round-trips
+  useEffect(() => {
+    onSnapshot?.({ phase, formState: form, focusedId, resolutions })
+  }, [phase, form, focusedId, resolutions, onSnapshot])
+
+  const cancel = useCallback(() => {
+    onComplete({ outcome: 'cancelled' })
+    exit()
+  }, [onComplete, exit])
+
+  useExitKeys(cancel)
+  useNavigationKeys()
+
+  const handleEditDescription = useCallback(
+    (section: AssetSectionKey, name: string) => {
+      const description = form.assets[section].descriptions[name] ?? ''
+      onRequestEditor?.(section, name, description)
+    },
+    [form, onRequestEditor],
+  )
+
+  const handleConfirm = useCallback(() => {
+    onComplete(buildResult(form))
+    exit()
+  }, [form, buildResult, onComplete, exit])
+
+  if (phase === 'reconciliation') {
+    return (
+      <ReconciliationView
+        items={context.reconciliationItems}
+        resolutions={resolutions}
+        onResolve={resolve}
+        onContinue={() => setPhase('editing')}
+      />
+    )
+  }
+
+  if (phase === 'editing') {
+    return (
+      <EditView
+        onSubmit={() => {
+          setPhase('confirmation')
+          setMode('form-confirmation')
+        }}
+        onEditDescription={handleEditDescription}
+      />
+    )
+  }
+
+  if (phase === 'confirmation') {
+    return (
+      <EditConfirmView
+        onConfirm={handleConfirm}
+        onBack={() => {
+          setPhase('editing')
+          setMode('form-navigation')
+          focus('edit-confirm-btn')
+        }}
+      />
+    )
+  }
+
+  return null
+}
+
+export function EditWizard(props: EditWizardProps) {
+  const initialFormState = useMemo(
+    () => props.snapshot?.formState ?? manifestToFormState(props.context.manifest),
+    [props.snapshot?.formState, props.context.manifest],
+  )
+
+  return (
+    <FocusModeProvider>
+      <FocusOrderProvider initialFocusId={props.snapshot?.focusedId}>
+        <FormStateProvider initialState={initialFormState}>
+          <EditWizardInner {...props} />
+        </FormStateProvider>
+      </FocusOrderProvider>
+    </FocusModeProvider>
+  )
+}