infra-kit 0.1.114 → 0.1.115

package/src/tui/boot.tsx

@@ -0,0 +1,45 @@
+import { render } from 'ink'
+import process from 'node:process'
+
+import { CommandPalette } from './screens/command-palette'
+import type { PaletteItem } from './types'
+
+/**
+ * Entry point for the Ink TUI. This module (and everything under `src/tui/`) is
+ * the ONLY place allowed to import `ink`/`react`; it is reached exclusively via a
+ * dynamic `await import('src/tui/boot')` from the TTY branch of entry/cli.ts, so
+ * React never loads on the MCP / `--json` / non-TTY paths. Build splitting keeps
+ * it in a separate lazy chunk (see scripts/build.js).
+ */
+
+/**
+ * Render the command palette and resolve to the chosen command name, or `null`
+ * if the user cancels. Frames are written to stderr so stdout stays clean for
+ * the command that runs afterwards (mirrors the previous Inquirer menu).
+ */
+export const runCommandPalette = async (items: PaletteItem[]): Promise<string | null> => {
+  return new Promise((resolve) => {
+    let selected: string | null = null
+
+    const { waitUntilExit } = render(
+      <CommandPalette
+        items={items}
+        onSelect={(name) => {
+          selected = name
+        }}
+        onCancel={() => {
+          selected = null
+        }}
+      />,
+      { stdout: process.stderr as unknown as NodeJS.WriteStream },
+    )
+
+    waitUntilExit()
+      .then(() => {
+        resolve(selected)
+      })
+      .catch(() => {
+        resolve(null)
+      })
+  })
+}

package/src/tui/screens/__tests__/command-palette.test.tsx

@@ -0,0 +1,136 @@
+import { render } from 'ink-testing-library'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { PaletteItem } from '../../types'
+import { CommandPalette } from '../command-palette'
+
+const items: PaletteItem[] = [
+  { name: 'release-list', description: 'List all release branches', group: 'Release Management' },
+  { name: 'worktrees-list', description: 'List all git worktrees', group: 'Worktrees' },
+  { name: 'env-status', description: 'Show Doppler authentication status', group: 'Environment' },
+]
+
+const settle = () => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 50)
+  })
+}
+
+describe('commandPalette', () => {
+  it('renders every command under its group header', () => {
+    const { lastFrame } = render(<CommandPalette items={items} onSelect={vi.fn()} onCancel={vi.fn()} />)
+    const frame = lastFrame() ?? ''
+
+    expect(frame).toContain('release-list')
+    expect(frame).toContain('worktrees-list')
+    expect(frame).toContain('env-status')
+    expect(frame).toContain('— Release Management —')
+    expect(frame).toContain('— Worktrees —')
+  })
+
+  it('filters the list as the user types', async () => {
+    const { lastFrame, stdin } = render(<CommandPalette items={items} onSelect={vi.fn()} onCancel={vi.fn()} />)
+
+    stdin.write('env')
+    await settle()
+
+    const frame = lastFrame() ?? ''
+
+    expect(frame).toContain('env-status')
+    expect(frame).not.toContain('release-list')
+  })
+
+  it('shows an empty-state message when nothing matches', async () => {
+    const { lastFrame, stdin } = render(<CommandPalette items={items} onSelect={vi.fn()} onCancel={vi.fn()} />)
+
+    stdin.write('zzzznomatch')
+    await settle()
+
+    expect(lastFrame() ?? '').toContain('No matching commands')
+  })
+
+  it('enter selects the active (first by default) command', async () => {
+    const onSelect = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={vi.fn()} />)
+
+    stdin.write('\r')
+    await settle()
+
+    expect(onSelect).toHaveBeenCalledWith('release-list')
+  })
+
+  it('arrow-down then Enter selects the second command', async () => {
+    const onSelect = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={vi.fn()} />)
+
+    stdin.write('\u001B[B') // arrow down
+    await settle()
+    stdin.write('\r')
+    await settle()
+
+    expect(onSelect).toHaveBeenCalledWith('worktrees-list')
+  })
+
+  it('arrow-up from the first command wraps to the last', async () => {
+    const onSelect = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={vi.fn()} />)
+
+    stdin.write('') // arrow up from first
+    await settle()
+    stdin.write('\r')
+    await settle()
+
+    expect(onSelect).toHaveBeenCalledWith('env-status')
+  })
+
+  it('arrow-down from the last command wraps to the first', async () => {
+    const onSelect = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={vi.fn()} />)
+
+    stdin.write('') // arrow up from first -> wraps to last (env-status)
+    await settle()
+    stdin.write('') // arrow down from last -> wraps to first (release-list)
+    await settle()
+    stdin.write('\r')
+    await settle()
+
+    expect(onSelect).toHaveBeenCalledWith('release-list')
+  })
+
+  it('typing then Enter selects the filtered command', async () => {
+    const onSelect = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={vi.fn()} />)
+
+    stdin.write('env')
+    await settle()
+    stdin.write('\r')
+    await settle()
+
+    expect(onSelect).toHaveBeenCalledWith('env-status')
+  })
+
+  it('clears the rendered list after a command is selected', async () => {
+    const { lastFrame, stdin } = render(<CommandPalette items={items} onSelect={vi.fn()} onCancel={vi.fn()} />)
+
+    expect(lastFrame() ?? '').toContain('release-list')
+
+    stdin.write('\r')
+    await settle()
+
+    // Final frame renders empty so Ink erases the list instead of freezing it
+    // into the scrollback above the command's own output.
+    expect(lastFrame() ?? '').not.toContain('release-list')
+  })
+
+  it('esc cancels without selecting', async () => {
+    const onSelect = vi.fn()
+    const onCancel = vi.fn()
+    const { stdin } = render(<CommandPalette items={items} onSelect={onSelect} onCancel={onCancel} />)
+
+    stdin.write('\u001B') // escape
+    await settle()
+
+    expect(onCancel).toHaveBeenCalled()
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/tui/screens/command-palette.tsx

@@ -0,0 +1,159 @@
+import { Box, Text, useApp, useInput } from 'ink'
+import { useEffect, useMemo, useState } from 'react'
+
+import type { PaletteItem } from '../types'
+
+interface CommandPaletteProps {
+  items: PaletteItem[]
+  /** Called with the chosen command name; the app then exits. */
+  onSelect: (name: string) => void
+  /** Called when the user cancels (Esc / Ctrl-C); the app then exits. */
+  onCancel: () => void
+}
+
+/**
+ * Fuzzy-ish command picker rendered with Ink. Pure presentation: it receives a
+ * flat list of commands (already grouped/ordered by the catalog) and returns the
+ * selected name. It never executes anything — the caller runs the command via
+ * the existing Commander path.
+ */
+export const CommandPalette = (props: CommandPaletteProps) => {
+  const { items, onSelect, onCancel } = props
+
+  const T = {
+    hint: 'Select a command — type to filter, ↑↓ to move, Enter to run, Esc to cancel',
+    prompt: '❯ ',
+    empty: 'No matching commands',
+  }
+  const nameWidth = 24
+
+  const { exit } = useApp()
+  const [query, setQuery] = useState('')
+  const [index, setIndex] = useState(0)
+  // When set, the component renders `null` for one frame so Ink erases the list
+  // before unmount commits its final frame (Ink's `log.done()` would otherwise
+  // freeze the last drawn frame — the command list — into the scrollback).
+  const [submitted, setSubmitted] = useState(false)
+
+  // Exit only after the empty frame has committed, so the list is wiped first.
+  useEffect(() => {
+    if (submitted) {
+      exit()
+    }
+  }, [submitted, exit])
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+
+    if (!q) {
+      return items
+    }
+
+    return items.filter((item) => {
+      return `${item.name} ${item.description}`.toLowerCase().includes(q)
+    })
+  }, [items, query])
+
+  const activeIndex = Math.min(index, Math.max(0, filtered.length - 1))
+
+  useInput((input, key) => {
+    if (submitted) {
+      return
+    }
+
+    if (key.escape || (key.ctrl && input === 'c')) {
+      onCancel()
+      setSubmitted(true)
+
+      return
+    }
+
+    if (key.return) {
+      const selected = filtered[activeIndex]
+
+      if (selected) {
+        onSelect(selected.name)
+        setSubmitted(true)
+      }
+
+      return
+    }
+
+    if (key.upArrow) {
+      const n = filtered.length
+
+      // Wrap to the bottom when stepping up past the first item. The `+ n`
+      // sidesteps JS negative modulo (e.g. -1 % 5 === -1, not 4).
+      if (n > 0) {
+        setIndex((activeIndex - 1 + n) % n)
+      }
+
+      return
+    }
+
+    if (key.downArrow) {
+      const n = filtered.length
+
+      // Wrap to the top when stepping down past the last item.
+      if (n > 0) {
+        setIndex((activeIndex + 1) % n)
+      }
+
+      return
+    }
+
+    if (key.backspace || key.delete) {
+      setQuery(query.slice(0, -1))
+      setIndex(0)
+
+      return
+    }
+
+    // Printable character: append to the filter.
+    if (input && !key.ctrl && !key.meta) {
+      setQuery(query + input)
+      setIndex(0)
+    }
+  })
+
+  // Final frame: render nothing so Ink erases the list on its way out.
+  if (submitted) {
+    return null
+  }
+
+  let lastGroup = ''
+
+  return (
+    <Box flexDirection="column">
+      <Text dimColor>{T.hint}</Text>
+      <Box>
+        <Text color="cyan">{T.prompt}</Text>
+        <Text>{query}</Text>
+      </Box>
+      <Box flexDirection="column" marginTop={1}>
+        {filtered.length === 0 ? (
+          <Text dimColor>{T.empty}</Text>
+        ) : (
+          filtered.map((item, position) => {
+            const isActive = position === activeIndex
+            const showGroup = item.group !== lastGroup
+
+            lastGroup = item.group
+
+            return (
+              <Box flexDirection="column" key={item.name}>
+                {/* Blank line between groups (not before the very first group). */}
+                {showGroup && position > 0 ? <Text> </Text> : null}
+                {showGroup ? <Text color="yellow">{`— ${item.group} —`}</Text> : null}
+                <Text color={isActive ? 'green' : undefined}>
+                  {isActive ? '› ' : '  '}
+                  {item.name.padEnd(nameWidth)} <Text dimColor>{item.description}</Text>
+                </Text>
+              </Box>
+            )
+          })
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/tui/types.ts

@@ -0,0 +1,8 @@
+export interface PaletteItem {
+  /** Command name (the token passed to the CLI, e.g. `release-list`). */
+  name: string
+  /** One-line description (sourced from Commander). */
+  description: string
+  /** Display group header (e.g. "Release Management"). */
+  group: string
+}

package/tsconfig.json

@@ -8,6 +8,7 @@
     "lib": ["ESNext"],
     "module": "ESNext",
     "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "paths": {
       "src/*": ["./src/*"]
     },