fix(ui-tui): harden TUI error handling, model validation, command UX parity, and gateway lifecycle

ui-tui/src/components/modelPicker.tsx

@@ -0,0 +1,241 @@
+import { Box, Text, useInput } from '@hermes/ink'
+import { useEffect, useState } from 'react'
+
+import type { GatewayClient } from '../gatewayClient.js'
+import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js'
+import type { Theme } from '../theme.js'
+
+interface ProviderItem {
+  is_current?: boolean
+  models?: string[]
+  name: string
+  slug: string
+  total_models?: number
+  warning?: string
+}
+
+const VISIBLE = 12
+
+const pageOffset = (count: number, sel: number) => Math.max(0, Math.min(sel - Math.floor(VISIBLE / 2), count - VISIBLE))
+
+export function ModelPicker({
+  gw,
+  onCancel,
+  onSelect,
+  sessionId,
+  t
+}: {
+  gw: GatewayClient
+  onCancel: () => void
+  onSelect: (value: string) => void
+  sessionId: string | null
+  t: Theme
+}) {
+  const [providers, setProviders] = useState<ProviderItem[]>([])
+  const [currentModel, setCurrentModel] = useState('')
+  const [err, setErr] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [persistGlobal, setPersistGlobal] = useState(false)
+  const [providerIdx, setProviderIdx] = useState(0)
+  const [modelIdx, setModelIdx] = useState(0)
+  const [stage, setStage] = useState<'model' | 'provider'>('provider')
+
+  useEffect(() => {
+    gw.request('model.options', sessionId ? { session_id: sessionId } : {})
+      .then((raw: any) => {
+        const r = asRpcResult(raw)
+
+        if (!r) {
+          setErr('invalid response: model.options')
+          setLoading(false)
+
+          return
+        }
+
+        const next = (r.providers ?? []) as ProviderItem[]
+        setProviders(next)
+        setCurrentModel(String(r.model ?? ''))
+        setProviderIdx(
+          Math.max(
+            0,
+            next.findIndex(p => p.is_current)
+          )
+        )
+        setModelIdx(0)
+        setErr('')
+        setLoading(false)
+      })
+      .catch((e: unknown) => {
+        setErr(rpcErrorMessage(e))
+        setLoading(false)
+      })
+  }, [gw, sessionId])
+
+  const provider = providers[providerIdx]
+  const models = provider?.models ?? []
+
+  const visibleItems = (items: string[], sel: number) => {
+    const off = pageOffset(items.length, sel)
+
+    return { items: items.slice(off, off + VISIBLE), off }
+  }
+
+  useInput((ch, key) => {
+    if (key.escape) {
+      if (stage === 'model') {
+        setStage('provider')
+        setModelIdx(0)
+
+        return
+      }
+
+      onCancel()
+
+      return
+    }
+
+    const count = stage === 'provider' ? providers.length : models.length
+    const sel = stage === 'provider' ? providerIdx : modelIdx
+    const setSel = stage === 'provider' ? setProviderIdx : setModelIdx
+
+    if (key.upArrow && sel > 0) {
+      setSel(v => v - 1)
+
+      return
+    }
+
+    if (key.downArrow && sel < count - 1) {
+      setSel(v => v + 1)
+
+      return
+    }
+
+    if (key.return) {
+      if (stage === 'provider') {
+        if (!provider) {
+          return
+        }
+
+        setStage('model')
+        setModelIdx(0)
+
+        return
+      }
+
+      const model = models[modelIdx]
+
+      if (provider && model) {
+        onSelect(`${model} --provider ${provider.slug}${persistGlobal ? ' --global' : ''}`)
+      } else {
+        setStage('provider')
+      }
+
+      return
+    }
+
+    if (ch.toLowerCase() === 'g') {
+      setPersistGlobal(v => !v)
+
+      return
+    }
+
+    const n = ch === '0' ? 10 : parseInt(ch, 10)
+
+    if (!Number.isNaN(n) && n >= 1 && n <= Math.min(10, count)) {
+      const off = pageOffset(count, sel)
+
+      if (stage === 'provider') {
+        const next = off + n - 1
+
+        if (providers[next]) {
+          setProviderIdx(next)
+        }
+      } else if (provider && models[off + n - 1]) {
+        onSelect(`${models[off + n - 1]} --provider ${provider.slug}${persistGlobal ? ' --global' : ''}`)
+      }
+    }
+  })
+
+  if (loading) {
+    return <Text color={t.color.dim}>loading models…</Text>
+  }
+
+  if (err) {
+    return (
+      <Box flexDirection="column">
+        <Text color={t.color.label}>error: {err}</Text>
+        <Text color={t.color.dim}>Esc to cancel</Text>
+      </Box>
+    )
+  }
+
+  if (!providers.length) {
+    return (
+      <Box flexDirection="column">
+        <Text color={t.color.dim}>no authenticated providers</Text>
+        <Text color={t.color.dim}>Esc to cancel</Text>
+      </Box>
+    )
+  }
+
+  if (stage === 'provider') {
+    const rows = providers.map(
+      p => `${p.is_current ? '*' : ' '} ${p.name} · ${p.total_models ?? p.models?.length ?? 0} models`
+    )
+
+    const { items, off } = visibleItems(rows, providerIdx)
+
+    return (
+      <Box flexDirection="column">
+        <Text bold color={t.color.amber}>
+          Select Provider
+        </Text>
+        <Text color={t.color.dim}>Current model: {currentModel || '(unknown)'}</Text>
+        {provider?.warning ? <Text color={t.color.label}>warning: {provider.warning}</Text> : null}
+        {off > 0 && <Text color={t.color.dim}> ↑ {off} more</Text>}
+        {items.map((row, i) => {
+          const idx = off + i
+
+          return (
+            <Text color={providerIdx === idx ? t.color.cornsilk : t.color.dim} key={row}>
+              {providerIdx === idx ? '▸ ' : '  '}
+              {i + 1}. {row}
+            </Text>
+          )
+        })}
+        {off + VISIBLE < rows.length && <Text color={t.color.dim}> ↓ {rows.length - off - VISIBLE} more</Text>}
+        <Text color={t.color.dim}>persist: {persistGlobal ? 'global' : 'session'} · g toggle</Text>
+        <Text color={t.color.dim}>↑/↓ select · Enter choose · 1-9,0 quick · Esc cancel</Text>
+      </Box>
+    )
+  }
+
+  const { items, off } = visibleItems(models, modelIdx)
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color={t.color.amber}>
+        Select Model
+      </Text>
+      <Text color={t.color.dim}>{provider?.name || '(unknown provider)'}</Text>
+      {!models.length ? <Text color={t.color.dim}>no models listed for this provider</Text> : null}
+      {provider?.warning ? <Text color={t.color.label}>warning: {provider.warning}</Text> : null}
+      {off > 0 && <Text color={t.color.dim}> ↑ {off} more</Text>}
+      {items.map((row, i) => {
+        const idx = off + i
+
+        return (
+          <Text color={modelIdx === idx ? t.color.cornsilk : t.color.dim} key={row}>
+            {modelIdx === idx ? '▸ ' : '  '}
+            {i + 1}. {row}
+          </Text>
+        )
+      })}
+      {off + VISIBLE < models.length && <Text color={t.color.dim}> ↓ {models.length - off - VISIBLE} more</Text>}
+      <Text color={t.color.dim}>persist: {persistGlobal ? 'global' : 'session'} · g toggle</Text>
+      <Text color={t.color.dim}>
+        {models.length ? '↑/↓ select · Enter switch · 1-9,0 quick · Esc back' : 'Enter/Esc back'}
+      </Text>
+    </Box>
+  )
+}

ui-tui/src/components/textInput.tsx

@@ -30,10 +30,68 @@ const dim = (s: string) => DIM + s + DIM_OFF
 let _seg: Intl.Segmenter | null = null
 const seg = () => (_seg ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' }))
 
+function graphemeStops(s: string) {
+  const stops = [0]
+
+  for (const { index } of seg().segment(s)) {
+    if (index > 0) {
+      stops.push(index)
+    }
+  }
+
+  if (stops.at(-1) !== s.length) {
+    stops.push(s.length)
+  }
+
+  return stops
+}
+
+function snapPos(s: string, p: number) {
+  const pos = Math.max(0, Math.min(p, s.length))
+  let last = 0
+
+  for (const stop of graphemeStops(s)) {
+    if (stop > pos) {
+      break
+    }
+
+    last = stop
+  }
+
+  return last
+}
+
+function prevPos(s: string, p: number) {
+  const pos = snapPos(s, p)
+  let prev = 0
+
+  for (const stop of graphemeStops(s)) {
+    if (stop >= pos) {
+      return prev
+    }
+
+    prev = stop
+  }
+
+  return prev
+}
+
+function nextPos(s: string, p: number) {
+  const pos = snapPos(s, p)
+
+  for (const stop of graphemeStops(s)) {
+    if (stop > pos) {
+      return stop
+    }
+  }
+
+  return s.length
+}
+
 // ── Word movement ────────────────────────────────────────────────────
 
 function wordLeft(s: string, p: number) {
-  let i = p - 1
+  let i = snapPos(s, p) - 1
 
   while (i > 0 && /\s/.test(s[i]!)) {
     i--
@@ -47,7 +105,7 @@ function wordLeft(s: string, p: number) {
 }
 
 function wordRight(s: string, p: number) {
-  let i = p
+  let i = snapPos(s, p)
 
   while (i < s.length && !/\s/.test(s[i]!)) {
     i++
@@ -252,7 +310,7 @@ export function TextInput({
 
   const commit = (next: string, nextCur: number, track = true) => {
     const prev = vRef.current
-    const c = Math.max(0, Math.min(nextCur, next.length))
+    const c = snapPos(next, nextCur)
 
     if (track && next !== prev) {
       undo.current.push({ cursor: curRef.current, value: prev })
@@ -316,11 +374,10 @@ export function TextInput({
 
   useInput(
     (inp: string, k: Key, event: InputEvent) => {
-      // Some terminals normalize Ctrl+V to "v"; others deliver raw ^V (\x16).
-      const ctrlPaste = k.ctrl && (inp.toLowerCase() === 'v' || event.keypress.raw === '\x16')
-      const metaPaste = k.meta && inp.toLowerCase() === 'v'
+      const raw = event.keypress.raw
+      const metaPaste = raw === '\x1bv' || raw === '\x1bV'
 
-      if (ctrlPaste || metaPaste) {
+      if (metaPaste) {
         return void emitPaste({ cursor: curRef.current, hotkey: true, text: '', value: vRef.current })
       }
 
@@ -366,9 +423,9 @@ export function TextInput({
       } else if (k.end || (k.ctrl && inp === 'e')) {
         c = v.length
       } else if (k.leftArrow) {
-        c = mod ? wordLeft(v, c) : Math.max(0, c - 1)
+        c = mod ? wordLeft(v, c) : prevPos(v, c)
       } else if (k.rightArrow) {
-        c = mod ? wordRight(v, c) : Math.min(v.length, c + 1)
+        c = mod ? wordRight(v, c) : nextPos(v, c)
       } else if (k.meta && inp === 'b') {
         c = wordLeft(v, c)
       } else if (k.meta && inp === 'f') {
@@ -382,15 +439,16 @@ export function TextInput({
           v = v.slice(0, t) + v.slice(c)
           c = t
         } else {
-          v = v.slice(0, c - 1) + v.slice(c)
-          c--
+          const t = prevPos(v, c)
+          v = v.slice(0, t) + v.slice(c)
+          c = t
         }
       } else if (k.delete && fwdDel.current && c < v.length) {
         if (mod) {
           const t = wordRight(v, c)
           v = v.slice(0, c) + v.slice(t)
         } else {
-          v = v.slice(0, c) + v.slice(c + 1)
+          v = v.slice(0, c) + v.slice(nextPos(v, c))
         }
       } else if (k.ctrl && inp === 'w' && c > 0) {
         const t = wordLeft(v, c)