nastech-tui 0.0.1

package/src/components/pluginsHub.tsx

@@ -0,0 +1,238 @@
+import { Box, Text, useInput, useStdout } from '@nastechai/ink'
+import { useEffect, useState } from 'react'
+
+import type { GatewayClient } from '../gatewayClient.js'
+import { rpcErrorMessage } from '../lib/rpc.js'
+import type { Theme } from '../theme.js'
+
+import { OverlayHint, useOverlayKeys, windowItems, windowOffset } from './overlayControls.js'
+
+const VISIBLE = 12
+const MIN_WIDTH = 44
+const MAX_WIDTH = 96
+
+interface PluginRow {
+  description?: string
+  name: string
+  source?: string
+  status?: string
+  version?: string
+}
+
+interface PluginsListResponse {
+  bundled_count?: number
+  plugins?: PluginRow[]
+  user_count?: number
+}
+
+interface PluginsToggleResponse {
+  name?: string
+  ok?: boolean
+  plugin?: PluginRow
+  unchanged?: boolean
+}
+
+type Scope = 'all' | 'user'
+
+const GLYPH: Record<string, string> = {
+  disabled: '✗',
+  enabled: '✓'
+}
+
+export function PluginsHub({ gw, onClose, t }: PluginsHubProps) {
+  const [rows, setRows] = useState<PluginRow[]>([])
+  const [bundledCount, setBundledCount] = useState(0)
+  const [userCount, setUserCount] = useState(0)
+  const [idx, setIdx] = useState(0)
+  const [scope, setScope] = useState<Scope>('user')
+  const [busy, setBusy] = useState(false)
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const { stdout } = useStdout()
+  const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6))
+
+  const load = () => {
+    gw.request<PluginsListResponse>('plugins.manage', { action: 'list' })
+      .then(r => {
+        setRows(r?.plugins ?? [])
+        setUserCount(Number(r?.user_count ?? 0))
+        setBundledCount(Number(r?.bundled_count ?? 0))
+        setErr('')
+        setLoading(false)
+      })
+      .catch((e: unknown) => {
+        setErr(rpcErrorMessage(e))
+        setLoading(false)
+      })
+  }
+
+  useEffect(load, [gw])
+
+  // Default to user plugins; fall back to all when there are none so the
+  // overlay is never empty when bundled plugins exist.
+  const visibleRows = scope === 'user' ? rows.filter(r => r.source !== 'bundled') : rows
+  const effectiveRows = scope === 'user' && !visibleRows.length && rows.length ? rows : visibleRows
+  const effectiveScope: Scope = effectiveRows === visibleRows ? scope : 'all'
+  const clampedIdx = Math.min(idx, Math.max(0, effectiveRows.length - 1))
+
+  useOverlayKeys({ disabled: busy, onClose })
+
+  const toggle = (row: PluginRow) => {
+    if (busy || !row) {
+      return
+    }
+
+    const enable = row.status !== 'enabled'
+    setBusy(true)
+    setErr('')
+
+    gw.request<PluginsToggleResponse>('plugins.manage', { action: 'toggle', enable, name: row.name })
+      .then(r => {
+        if (r?.plugin) {
+          setRows(prev => prev.map(p => (p.name === r.plugin!.name ? r.plugin! : p)))
+        } else {
+          load()
+        }
+      })
+      .catch((e: unknown) => setErr(rpcErrorMessage(e)))
+      .finally(() => setBusy(false))
+  }
+
+  useInput((ch, key) => {
+    if (busy) {
+      return
+    }
+
+    const count = effectiveRows.length
+
+    if (key.upArrow && clampedIdx > 0) {
+      setIdx(clampedIdx - 1)
+
+      return
+    }
+
+    if (key.downArrow && clampedIdx < count - 1) {
+      setIdx(clampedIdx + 1)
+
+      return
+    }
+
+    // Tab toggles user-only vs all (bundled) scope.
+    if (key.tab) {
+      setScope(s => (s === 'user' ? 'all' : 'user'))
+      setIdx(0)
+
+      return
+    }
+
+    if (key.return || ch === ' ') {
+      const row = effectiveRows[clampedIdx]
+
+      if (row) {
+        toggle(row)
+      }
+
+      return
+    }
+
+    const n = ch === '0' ? 10 : parseInt(ch, 10)
+
+    if (!Number.isNaN(n) && n >= 1 && n <= Math.min(10, count)) {
+      const next = windowOffset(count, clampedIdx, VISIBLE) + n - 1
+      const row = effectiveRows[next]
+
+      if (row) {
+        setIdx(next)
+        toggle(row)
+      }
+    }
+  })
+
+  if (loading) {
+    return <Text color={t.color.muted}>loading plugins…</Text>
+  }
+
+  if (err && !rows.length) {
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text color={t.color.label}>error: {err}</Text>
+        <OverlayHint t={t}>Esc/q close</OverlayHint>
+      </Box>
+    )
+  }
+
+  if (!rows.length) {
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text bold color={t.color.accent}>
+          Plugins Hub
+        </Text>
+        <Text color={t.color.muted}>no plugins installed</Text>
+        <Text color={t.color.muted}>install: nastech plugins install owner/repo</Text>
+        <OverlayHint t={t}>Esc/q close</OverlayHint>
+      </Box>
+    )
+  }
+
+  const labels = effectiveRows.map(r => {
+    const status = r.status ?? 'not enabled'
+    const glyph = GLYPH[status] ?? '○'
+    const ver = r.version ? ` v${r.version}` : ''
+    const src = effectiveScope === 'all' && r.source === 'bundled' ? ' [bundled]' : ''
+    const state = status === 'enabled' ? '' : ` (${status})`
+
+    return `${glyph} ${r.name}${ver}${src}${state}`
+  })
+
+  const { items, offset } = windowItems(labels, clampedIdx, VISIBLE)
+
+  const scopeLabel =
+    effectiveScope === 'user'
+      ? `${userCount} user plugin(s)${bundledCount ? ` · +${bundledCount} bundled (Tab)` : ''}`
+      : `all ${rows.length} plugins`
+
+  return (
+    <Box flexDirection="column" width={width}>
+      <Text bold color={t.color.accent}>
+        Plugins Hub
+      </Text>
+
+      <Text color={t.color.muted}>{scopeLabel}</Text>
+      {offset > 0 && <Text color={t.color.muted}> ↑ {offset} more</Text>}
+
+      {items.map((row, i) => {
+        const lineIdx = offset + i
+        const active = clampedIdx === lineIdx
+
+        return (
+          <Text
+            bold={active}
+            color={active ? t.color.accent : t.color.muted}
+            inverse={active}
+            key={effectiveRows[lineIdx]?.name ?? row}
+            wrap="truncate-end"
+          >
+            {active ? '▸ ' : '  '}
+            {i + 1}. {row}
+          </Text>
+        )
+      })}
+
+      {offset + VISIBLE < labels.length && (
+        <Text color={t.color.muted}> ↓ {labels.length - offset - VISIBLE} more</Text>
+      )}
+
+      {err ? <Text color={t.color.label}>error: {err}</Text> : null}
+      {busy ? <Text color={t.color.accent}>updating…</Text> : null}
+
+      <OverlayHint t={t}>↑/↓ select · Enter/Space toggle · Tab user/all · 1-9,0 quick · Esc/q close</OverlayHint>
+    </Box>
+  )
+}
+
+interface PluginsHubProps {
+  gw: GatewayClient
+  onClose: () => void
+  t: Theme
+}

package/src/components/prompts.tsx

@@ -0,0 +1,276 @@
+import { Box, Text, useInput } from '@nastechai/ink'
+import { useState } from 'react'
+
+import { isMac } from '../lib/platform.js'
+import type { Theme } from '../theme.js'
+import type { ApprovalReq, ClarifyReq, ConfirmReq } from '../types.js'
+
+import { TextInput } from './textInput.js'
+
+const OPTS = ['once', 'session', 'always', 'deny'] as const
+const LABELS = { always: 'Always allow', deny: 'Deny', once: 'Allow once', session: 'Allow this session' } as const
+const CMD_PREVIEW_LINES = 10
+
+type ApprovalKey = {
+  downArrow?: boolean
+  escape?: boolean
+  return?: boolean
+  upArrow?: boolean
+}
+
+type ApprovalAction =
+  | { kind: 'choose'; choice: (typeof OPTS)[number] }
+  | { kind: 'move'; delta: -1 | 1 }
+  | { kind: 'noop' }
+
+/**
+ * Pure key-dispatch for the approval prompt — exported so the regression
+ * matrix (Esc, Ctrl+C-equivalent, number keys, Enter, ↑↓) is testable
+ * without mounting React + Ink + a fake stdin.  The component just maps the
+ * action onto its own state setters.
+ *
+ * Esc and number keys both terminate the prompt; Esc maps to deny (parity
+ * with the global Ctrl+C handler that already calls cancelOverlayFromCtrlC
+ * for approvals).  Numbers 1..OPTS.length pick the labelled choice.  Enter
+ * confirms the current selection.  ↑/↓ moves the selection within bounds.
+ */
+export function approvalAction(ch: string, key: ApprovalKey, sel: number): ApprovalAction {
+  if (key.escape) {
+    return { kind: 'choose', choice: 'deny' }
+  }
+
+  const n = parseInt(ch, 10)
+
+  if (n >= 1 && n <= OPTS.length) {
+    return { kind: 'choose', choice: OPTS[n - 1]! }
+  }
+
+  if (key.return) {
+    return { kind: 'choose', choice: OPTS[sel]! }
+  }
+
+  if (key.upArrow && sel > 0) {
+    return { kind: 'move', delta: -1 }
+  }
+
+  if (key.downArrow && sel < OPTS.length - 1) {
+    return { kind: 'move', delta: 1 }
+  }
+
+  return { kind: 'noop' }
+}
+
+export function ApprovalPrompt({ onChoice, req, t }: ApprovalPromptProps) {
+  const [sel, setSel] = useState(0)
+
+  useInput((ch, key) => {
+    const action = approvalAction(ch, key, sel)
+
+    if (action.kind === 'choose') {
+      onChoice(action.choice)
+    } else if (action.kind === 'move') {
+      setSel(s => s + action.delta)
+    }
+  })
+
+  const rawLines = req.command.split('\n')
+  const shown = rawLines.slice(0, CMD_PREVIEW_LINES)
+  const overflow = rawLines.length - shown.length
+
+  return (
+    <Box borderColor={t.color.warn} borderStyle="double" flexDirection="column" paddingX={1}>
+      <Text bold color={t.color.warn}>
+        ⚠ approval required · {req.description}
+      </Text>
+
+      <Box flexDirection="column" paddingLeft={1}>
+        {shown.map((line, i) => (
+          <Text color={t.color.text} key={i} wrap="truncate-end">
+            {line || ' '}
+          </Text>
+        ))}
+
+        {overflow > 0 ? (
+          <Text color={t.color.muted}>
+            … +{overflow} more line{overflow === 1 ? '' : 's'} (full text above)
+          </Text>
+        ) : null}
+      </Box>
+
+      <Text />
+
+      {OPTS.map((o, i) => (
+        <Text key={o}>
+          <Text bold={sel === i} color={sel === i ? t.color.warn : t.color.muted} inverse={sel === i}>
+            {sel === i ? '▸ ' : '  '}
+            {i + 1}. {LABELS[o]}
+          </Text>
+        </Text>
+      ))}
+
+      <Text color={t.color.muted}>↑/↓ select · Enter confirm · 1-4 quick pick · Esc/Ctrl+C deny</Text>
+    </Box>
+  )
+}
+
+export function ClarifyPrompt({ cols = 80, onAnswer, onCancel, req, t }: ClarifyPromptProps) {
+  const [sel, setSel] = useState(0)
+  const [custom, setCustom] = useState('')
+  const [typing, setTyping] = useState(false)
+  const choices = req.choices ?? []
+
+  const heading = (
+    <Text bold>
+      <Text color={t.color.accent}>ask</Text>
+      <Text color={t.color.text}> {req.question}</Text>
+    </Text>
+  )
+
+  useInput((ch, key) => {
+    if (key.escape) {
+      typing && choices.length ? setTyping(false) : onCancel()
+
+      return
+    }
+
+    if (typing || !choices.length) {
+      return
+    }
+
+    if (key.upArrow && sel > 0) {
+      setSel(s => s - 1)
+    }
+
+    if (key.downArrow && sel < choices.length) {
+      setSel(s => s + 1)
+    }
+
+    if (key.return) {
+      sel === choices.length ? setTyping(true) : choices[sel] && onAnswer(choices[sel]!)
+    }
+
+    const n = parseInt(ch)
+
+    if (n >= 1 && n <= choices.length) {
+      onAnswer(choices[n - 1]!)
+    }
+  })
+
+  if (typing || !choices.length) {
+    return (
+      <Box flexDirection="column">
+        {heading}
+
+        <Box>
+          <Text color={t.color.label}>{'> '}</Text>
+          <TextInput columns={Math.max(20, cols - 6)} onChange={setCustom} onSubmit={onAnswer} value={custom} />
+        </Box>
+
+        <Text color={t.color.muted}>
+          Enter send · Esc {choices.length ? 'back' : 'cancel'} ·{' '}
+          {isMac ? 'Cmd+C copy · Cmd+V paste · Ctrl+C cancel' : 'Ctrl+C cancel'}
+        </Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column">
+      {heading}
+
+      {[...choices, 'Other (type your answer)'].map((c, i) => (
+        <Text key={i}>
+          <Text bold={sel === i} color={sel === i ? t.color.label : t.color.muted} inverse={sel === i}>
+            {sel === i ? '▸ ' : '  '}
+            {i + 1}. {c}
+          </Text>
+        </Text>
+      ))}
+
+      <Text color={t.color.muted}>↑/↓ select · Enter confirm · 1-{choices.length} quick pick · Esc/Ctrl+C cancel</Text>
+    </Box>
+  )
+}
+
+export function ConfirmPrompt({ onCancel, onConfirm, req, t }: ConfirmPromptProps) {
+  const [sel, setSel] = useState(0)
+
+  useInput((ch, key) => {
+    const lower = ch.toLowerCase()
+
+    if (key.escape || (key.ctrl && lower === 'c') || lower === 'n') {
+      return onCancel()
+    }
+
+    if (lower === 'y') {
+      return onConfirm()
+    }
+
+    if (key.upArrow) {
+      setSel(0)
+    }
+
+    if (key.downArrow) {
+      setSel(1)
+    }
+
+    if (key.return) {
+      sel === 0 ? onCancel() : onConfirm()
+    }
+  })
+
+  const accent = req.danger ? t.color.error : t.color.warn
+
+  const rows = [
+    { color: t.color.text, label: req.cancelLabel ?? 'No' },
+    { color: req.danger ? t.color.error : t.color.text, label: req.confirmLabel ?? 'Yes' }
+  ]
+
+  return (
+    <Box borderColor={accent} borderStyle="double" flexDirection="column" paddingX={1}>
+      <Text bold color={accent}>
+        {req.danger ? '⚠' : '?'} {req.title}
+      </Text>
+
+      {req.detail ? (
+        <Box paddingLeft={1}>
+          <Text color={t.color.text} wrap="truncate-end">
+            {req.detail}
+          </Text>
+        </Box>
+      ) : null}
+
+      <Text />
+
+      {rows.map((row, i) => (
+        <Text key={row.label}>
+          <Text color={sel === i ? accent : t.color.muted}>{sel === i ? '▸ ' : '  '}</Text>
+          <Text color={sel === i ? row.color : t.color.muted}>{row.label}</Text>
+        </Text>
+      ))}
+
+      <Text color={t.color.muted}>↑/↓ select · Enter confirm · Y/N quick · Esc cancel</Text>
+    </Box>
+  )
+}
+
+interface ApprovalPromptProps {
+  onChoice: (s: string) => void
+  req: ApprovalReq
+  t: Theme
+}
+
+interface ClarifyPromptProps {
+  cols?: number
+  onAnswer: (s: string) => void
+  onCancel: () => void
+  req: ClarifyReq
+  t: Theme
+}
+
+interface ConfirmPromptProps {
+  onCancel: () => void
+  onConfirm: () => void
+  req: ConfirmReq
+  t: Theme
+}

package/src/components/queuedMessages.tsx

@@ -0,0 +1,64 @@
+import { Box, Text } from '@nastechai/ink'
+
+import { compactPreview } from '../lib/text.js'
+import type { Theme } from '../theme.js'
+
+export const QUEUE_WINDOW = 3
+
+export function getQueueWindow(queueLen: number, queueEditIdx: number | null) {
+  const start =
+    queueEditIdx === null ? 0 : Math.max(0, Math.min(queueEditIdx - 1, Math.max(0, queueLen - QUEUE_WINDOW)))
+
+  const end = Math.min(queueLen, start + QUEUE_WINDOW)
+
+  return { end, showLead: start > 0, showTail: end < queueLen, start }
+}
+
+export function QueuedMessages({ cols, queueEditIdx, queued, t }: QueuedMessagesProps) {
+  if (!queued.length) {
+    return null
+  }
+
+  const q = getQueueWindow(queued.length, queueEditIdx)
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text color={t.color.muted} dimColor>
+        {`queued (${queued.length})${
+          queueEditIdx !== null ? ` · editing ${queueEditIdx + 1} · Ctrl+X delete · Esc cancel` : ''
+        }`}
+      </Text>
+
+      {q.showLead && (
+        <Text color={t.color.muted} dimColor>
+          {' '}
+          …
+        </Text>
+      )}
+
+      {queued.slice(q.start, q.end).map((item, i) => {
+        const idx = q.start + i
+        const active = queueEditIdx === idx
+
+        return (
+          <Text color={active ? t.color.accent : t.color.muted} dimColor key={`${idx}-${item.slice(0, 16)}`}>
+            {active ? '▸' : ' '} {idx + 1}. {compactPreview(item, Math.max(16, cols - 10))}
+          </Text>
+        )
+      })}
+
+      {q.showTail && (
+        <Text color={t.color.muted} dimColor>
+          {'  '}…and {queued.length - q.end} more
+        </Text>
+      )}
+    </Box>
+  )
+}
+
+interface QueuedMessagesProps {
+  cols: number
+  queueEditIdx: number | null
+  queued: string[]
+  t: Theme
+}