nastech-tui 0.0.1

package/src/components/sessionPicker.tsx

@@ -0,0 +1,227 @@
+import { Box, Text, useInput, useStdout } from '@nastechai/ink'
+import { useEffect, useState } from 'react'
+
+import type { GatewayClient } from '../gatewayClient.js'
+import type { SessionDeleteResponse, SessionListItem, SessionListResponse } from '../gatewayTypes.js'
+import { asRpcResult, rpcErrorMessage } from '../lib/rpc.js'
+import type { Theme } from '../theme.js'
+
+import { OverlayHint, useOverlayKeys, windowOffset } from './overlayControls.js'
+
+const VISIBLE = 15
+const MIN_WIDTH = 60
+const MAX_WIDTH = 120
+
+const age = (ts: number) => {
+  const d = (Date.now() / 1000 - ts) / 86400
+
+  if (d < 1) {
+    return 'today'
+  }
+
+  if (d < 2) {
+    return 'yesterday'
+  }
+
+  return `${Math.floor(d)}d ago`
+}
+
+export function SessionPicker({ gw, onCancel, onSelect, t }: SessionPickerProps) {
+  const [items, setItems] = useState<SessionListItem[]>([])
+  const [err, setErr] = useState('')
+  const [sel, setSel] = useState(0)
+  const [loading, setLoading] = useState(true)
+  // When non-null, the user pressed `d` on this index and we're waiting for
+  // a second `d`/`D` to confirm deletion.  Any other key cancels the prompt.
+  const [confirmDelete, setConfirmDelete] = useState<null | number>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const { stdout } = useStdout()
+  const width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, (stdout?.columns ?? 80) - 6))
+
+  useOverlayKeys({ onClose: onCancel })
+
+  useEffect(() => {
+    gw.request<SessionListResponse>('session.list', { limit: 200 })
+      .then(raw => {
+        const r = asRpcResult<SessionListResponse>(raw)
+
+        if (!r) {
+          setErr('invalid response: session.list')
+          setLoading(false)
+
+          return
+        }
+
+        setItems(r.sessions ?? [])
+        setErr('')
+        setLoading(false)
+      })
+      .catch((e: unknown) => {
+        setErr(rpcErrorMessage(e))
+        setLoading(false)
+      })
+  }, [gw])
+
+  const performDelete = (index: number) => {
+    const target = items[index]
+
+    if (!target || deleting) {
+      return
+    }
+
+    setDeleting(true)
+    gw.request<SessionDeleteResponse>('session.delete', { session_id: target.id })
+      .then(raw => {
+        const r = asRpcResult<SessionDeleteResponse>(raw)
+
+        if (!r || r.deleted !== target.id) {
+          setErr('invalid response: session.delete')
+          setDeleting(false)
+
+          return
+        }
+
+        setItems(prev => {
+          const next = prev.filter((_, i) => i !== index)
+          setSel(s => Math.max(0, Math.min(s, next.length - 1)))
+
+          return next
+        })
+        setErr('')
+        setDeleting(false)
+      })
+      .catch((e: unknown) => {
+        setErr(rpcErrorMessage(e))
+        setDeleting(false)
+      })
+  }
+
+  useInput((ch, key) => {
+    if (deleting) {
+      return
+    }
+
+    if (confirmDelete !== null) {
+      if (ch?.toLowerCase() === 'd') {
+        const idx = confirmDelete
+        setConfirmDelete(null)
+        performDelete(idx)
+      } else {
+        setConfirmDelete(null)
+      }
+
+      return
+    }
+
+    if (key.upArrow && sel > 0) {
+      setSel(s => s - 1)
+    }
+
+    if (key.downArrow && sel < items.length - 1) {
+      setSel(s => s + 1)
+    }
+
+    if (key.return && items[sel]) {
+      onSelect(items[sel]!.id)
+
+      return
+    }
+
+    if (ch?.toLowerCase() === 'd' && items[sel]) {
+      setConfirmDelete(sel)
+
+      return
+    }
+
+    const n = parseInt(ch)
+
+    if (n >= 1 && n <= Math.min(9, items.length)) {
+      onSelect(items[n - 1]!.id)
+    }
+  })
+
+  if (loading) {
+    return <Text color={t.color.muted}>loading sessions…</Text>
+  }
+
+  if (err && !items.length) {
+    return (
+      <Box flexDirection="column">
+        <Text color={t.color.label}>error: {err}</Text>
+        <OverlayHint t={t}>Esc/q cancel</OverlayHint>
+      </Box>
+    )
+  }
+
+  if (!items.length) {
+    return (
+      <Box flexDirection="column">
+        <Text color={t.color.muted}>no previous sessions</Text>
+        <OverlayHint t={t}>Esc/q cancel</OverlayHint>
+      </Box>
+    )
+  }
+
+  const offset = windowOffset(items.length, sel, VISIBLE)
+
+  return (
+    <Box flexDirection="column" width={width}>
+      <Text bold color={t.color.accent}>
+        Resume Session
+      </Text>
+
+      {offset > 0 && <Text color={t.color.muted}>  ↑ {offset} more</Text>}
+
+      {items.slice(offset, offset + VISIBLE).map((s, vi) => {
+        const i = offset + vi
+        const selected = sel === i
+        const pendingDelete = confirmDelete === i
+
+        return (
+          <Box key={s.id}>
+            <Text bold={selected} color={selected ? t.color.accent : t.color.muted} inverse={selected}>
+              {selected ? '▸ ' : '  '}
+            </Text>
+
+            <Box width={30}>
+              <Text bold={selected} color={selected ? t.color.accent : t.color.muted} inverse={selected}>
+                {String(i + 1).padStart(2)}. [{s.id}]
+              </Text>
+            </Box>
+
+            <Box width={30}>
+              <Text bold={selected} color={selected ? t.color.accent : t.color.muted} inverse={selected}>
+                ({s.message_count} msgs, {age(s.started_at)}, {s.source || 'tui'})
+              </Text>
+            </Box>
+
+            <Text
+              bold={selected}
+              color={pendingDelete ? t.color.label : selected ? t.color.accent : t.color.muted}
+              inverse={selected}
+              wrap="truncate-end"
+            >
+              {pendingDelete ? 'press d again to delete' : s.title || s.preview || '(untitled)'}
+            </Text>
+          </Box>
+        )
+      })}
+
+      {offset + VISIBLE < items.length && <Text color={t.color.muted}>  ↓ {items.length - offset - VISIBLE} more</Text>}
+      {err && <Text color={t.color.label}>error: {err}</Text>}
+      {deleting ? (
+        <OverlayHint t={t}>deleting…</OverlayHint>
+      ) : (
+        <OverlayHint t={t}>↑/↓ select · Enter resume · 1-9 quick · d delete · Esc/q cancel</OverlayHint>
+      )}
+    </Box>
+  )
+}
+
+interface SessionPickerProps {
+  gw: GatewayClient
+  onCancel: () => void
+  onSelect: (id: string) => void
+  t: Theme
+}

package/src/components/skillsHub.tsx

@@ -0,0 +1,308 @@
+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 = 40
+const MAX_WIDTH = 90
+
+export function SkillsHub({ gw, onClose, t }: SkillsHubProps) {
+  const [skillsByCat, setSkillsByCat] = useState<Record<string, string[]>>({})
+  const [selectedCat, setSelectedCat] = useState('')
+  const [catIdx, setCatIdx] = useState(0)
+  const [skillIdx, setSkillIdx] = useState(0)
+  const [stage, setStage] = useState<'actions' | 'category' | 'skill'>('category')
+  const [info, setInfo] = useState<null | SkillInfo>(null)
+  const [installing, setInstalling] = 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))
+
+  useEffect(() => {
+    gw.request<{ skills?: Record<string, string[]> }>('skills.manage', { action: 'list' })
+      .then(r => {
+        setSkillsByCat(r?.skills ?? {})
+        setErr('')
+        setLoading(false)
+      })
+      .catch((e: unknown) => {
+        setErr(rpcErrorMessage(e))
+        setLoading(false)
+      })
+  }, [gw])
+
+  const cats = Object.keys(skillsByCat).sort()
+  const skills = selectedCat ? (skillsByCat[selectedCat] ?? []) : []
+  const skillName = skills[skillIdx] ?? ''
+
+  const back = () => {
+    if (stage === 'actions') {
+      setStage('skill')
+      setInfo(null)
+      setErr('')
+
+      return
+    }
+
+    if (stage === 'skill') {
+      setStage('category')
+      setSkillIdx(0)
+
+      return
+    }
+
+    onClose()
+  }
+
+  useOverlayKeys({ disabled: installing, onBack: back, onClose })
+
+  const inspect = (name: string) => {
+    setInfo(null)
+    setErr('')
+
+    gw.request<{ info?: SkillInfo }>('skills.manage', { action: 'inspect', query: name })
+      .then(r => setInfo(r?.info ?? { name }))
+      .catch((e: unknown) => setErr(rpcErrorMessage(e)))
+  }
+
+  const install = (name: string) => {
+    setInstalling(true)
+    setErr('')
+
+    gw.request<{ installed?: boolean; name?: string }>('skills.manage', { action: 'install', query: name })
+      .then(() => onClose())
+      .catch((e: unknown) => setErr(rpcErrorMessage(e)))
+      .finally(() => setInstalling(false))
+  }
+
+  useInput((ch, key) => {
+    if (installing) {
+      return
+    }
+
+    if (stage === 'actions') {
+      if (key.return) {
+        setStage('skill')
+        setInfo(null)
+        setErr('')
+
+        return
+      }
+
+      if (ch.toLowerCase() === 'x' && skillName) {
+        install(skillName)
+
+        return
+      }
+
+      if (ch.toLowerCase() === 'i' && skillName) {
+        inspect(skillName)
+      }
+
+      return
+    }
+
+    const count = stage === 'category' ? cats.length : skills.length
+    const sel = stage === 'category' ? catIdx : skillIdx
+    const setSel = stage === 'category' ? setCatIdx : setSkillIdx
+
+    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 === 'category') {
+        const cat = cats[catIdx]
+
+        if (!cat) {
+          return
+        }
+
+        setSelectedCat(cat)
+        setSkillIdx(0)
+        setStage('skill')
+
+        return
+      }
+
+      const name = skills[skillIdx]
+
+      if (name) {
+        setStage('actions')
+        inspect(name)
+      }
+
+      return
+    }
+
+    const n = ch === '0' ? 10 : parseInt(ch, 10)
+
+    if (!Number.isNaN(n) && n >= 1 && n <= Math.min(10, count)) {
+      const next = windowOffset(count, sel, VISIBLE) + n - 1
+
+      if (stage === 'category') {
+        const cat = cats[next]
+
+        if (cat) {
+          setSelectedCat(cat)
+          setCatIdx(next)
+          setSkillIdx(0)
+          setStage('skill')
+        }
+
+        return
+      }
+
+      const name = skills[next]
+
+      if (name) {
+        setSkillIdx(next)
+        setStage('actions')
+        inspect(name)
+      }
+    }
+  })
+
+  if (loading) {
+    return <Text color={t.color.muted}>loading skills…</Text>
+  }
+
+  if (err && stage === 'category') {
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text color={t.color.label}>error: {err}</Text>
+        <OverlayHint t={t}>Esc/q cancel</OverlayHint>
+      </Box>
+    )
+  }
+
+  if (!cats.length) {
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text color={t.color.muted}>no skills available</Text>
+        <OverlayHint t={t}>Esc/q cancel</OverlayHint>
+      </Box>
+    )
+  }
+
+  if (stage === 'category') {
+    const rows = cats.map(c => `${c} · ${skillsByCat[c]?.length ?? 0} skills`)
+    const { items, offset } = windowItems(rows, catIdx, VISIBLE)
+
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text bold color={t.color.accent}>
+          Skills Hub
+        </Text>
+
+        <Text color={t.color.muted}>select a category</Text>
+        {offset > 0 && <Text color={t.color.muted}> ↑ {offset} more</Text>}
+
+        {items.map((row, i) => {
+          const idx = offset + i
+
+          return (
+            <Text
+              bold={catIdx === idx}
+              color={catIdx === idx ? t.color.accent : t.color.muted}
+              inverse={catIdx === idx}
+              key={row}
+              wrap="truncate-end"
+            >
+              {catIdx === idx ? '▸ ' : '  '}
+              {i + 1}. {row}
+            </Text>
+          )
+        })}
+
+        {offset + VISIBLE < rows.length && <Text color={t.color.muted}> ↓ {rows.length - offset - VISIBLE} more</Text>}
+        <OverlayHint t={t}>↑/↓ select · Enter open · 1-9,0 quick · Esc/q cancel</OverlayHint>
+      </Box>
+    )
+  }
+
+  if (stage === 'skill') {
+    const { items, offset } = windowItems(skills, skillIdx, VISIBLE)
+
+    return (
+      <Box flexDirection="column" width={width}>
+        <Text bold color={t.color.accent}>
+          {selectedCat}
+        </Text>
+
+        <Text color={t.color.muted}>{skills.length} skill(s)</Text>
+        {!skills.length ? <Text color={t.color.muted}>no skills in this category</Text> : null}
+        {offset > 0 && <Text color={t.color.muted}> ↑ {offset} more</Text>}
+
+        {items.map((row, i) => {
+          const idx = offset + i
+
+          return (
+            <Text
+              bold={skillIdx === idx}
+              color={skillIdx === idx ? t.color.accent : t.color.muted}
+              inverse={skillIdx === idx}
+              key={row}
+              wrap="truncate-end"
+            >
+              {skillIdx === idx ? '▸ ' : '  '}
+              {i + 1}. {row}
+            </Text>
+          )
+        })}
+
+        {offset + VISIBLE < skills.length && (
+          <Text color={t.color.muted}> ↓ {skills.length - offset - VISIBLE} more</Text>
+        )}
+        <OverlayHint t={t}>
+          {skills.length ? '↑/↓ select · Enter open · 1-9,0 quick · Esc back · q close' : 'Esc back · q close'}
+        </OverlayHint>
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" width={width}>
+      <Text bold color={t.color.accent}>
+        {info?.name ?? skillName}
+      </Text>
+
+      <Text color={t.color.muted}>{info?.category ?? selectedCat}</Text>
+      {info?.description ? <Text color={t.color.text}>{info.description}</Text> : null}
+      {info?.path ? <Text color={t.color.muted}>path: {info.path}</Text> : null}
+      {!info && !err ? <Text color={t.color.muted}>loading…</Text> : null}
+      {err ? <Text color={t.color.label}>error: {err}</Text> : null}
+      {installing ? <Text color={t.color.accent}>installing…</Text> : null}
+
+      <OverlayHint t={t}>i reinspect · x reinstall · Enter/Esc back · q close</OverlayHint>
+    </Box>
+  )
+}
+
+interface SkillInfo {
+  category?: string
+  description?: string
+  name?: string
+  path?: string
+}
+
+interface SkillsHubProps {
+  gw: GatewayClient
+  onClose: () => void
+  t: Theme
+}

package/src/components/streamingAssistant.tsx

@@ -0,0 +1,110 @@
+import { useStore } from '@nanostores/react'
+import { memo } from 'react'
+
+import type { AppLayoutProgressProps } from '../app/interfaces.js'
+import { toggleTodoCollapsed, useTurnSelector } from '../app/turnStore.js'
+import { $uiState } from '../app/uiStore.js'
+import { appendToolShelfMessage } from '../lib/liveProgress.js'
+import type { DetailsMode, Msg, SectionVisibility } from '../types.js'
+
+import { MessageLine } from './messageLine.js'
+import { TodoPanel } from './todoPanel.js'
+
+const groupedSegments = (segments: Msg[]): Msg[] =>
+  segments.reduce<Msg[]>((acc, msg) => appendToolShelfMessage(acc, msg), [])
+
+export const StreamingAssistant = memo(function StreamingAssistant({
+  cols,
+  compact,
+  detailsMode,
+  detailsModeCommandOverride,
+  progress,
+  sections
+}: StreamingAssistantProps) {
+  const ui = useStore($uiState)
+  const streamSegments = useTurnSelector(state => state.streamSegments)
+  const streamPendingTools = useTurnSelector(state => state.streamPendingTools)
+  const streaming = useTurnSelector(state => state.streaming)
+  const activeTools = useTurnSelector(state => state.tools)
+  const showStreamingArea = Boolean(streaming)
+
+  if (!progress.showProgressArea && !showStreamingArea && !activeTools.length) {
+    return null
+  }
+
+  return (
+    <>
+      {groupedSegments(streamSegments).map((msg, i) => (
+        <MessageLine
+          cols={cols}
+          compact={compact}
+          detailsMode={detailsMode}
+          detailsModeCommandOverride={detailsModeCommandOverride}
+          key={`seg:${i}`}
+          msg={msg}
+          sections={sections}
+          t={ui.theme}
+        />
+      ))}
+
+      {!!activeTools.length && (
+        <MessageLine
+          cols={cols}
+          compact={compact}
+          detailsMode={detailsMode}
+          detailsModeCommandOverride={detailsModeCommandOverride}
+          msg={{ kind: 'trail', role: 'system', text: '' }}
+          sections={sections}
+          t={ui.theme}
+          tools={activeTools}
+        />
+      )}
+
+      {showStreamingArea && (
+        <MessageLine
+          cols={cols}
+          compact={compact}
+          detailsMode={detailsMode}
+          detailsModeCommandOverride={detailsModeCommandOverride}
+          isStreaming
+          msg={{
+            role: 'assistant',
+            text: streaming,
+            ...(streamPendingTools.length && { tools: streamPendingTools })
+          }}
+          sections={sections}
+          t={ui.theme}
+        />
+      )}
+
+      {!showStreamingArea && !!streamPendingTools.length && (
+        <MessageLine
+          cols={cols}
+          compact={compact}
+          detailsMode={detailsMode}
+          detailsModeCommandOverride={detailsModeCommandOverride}
+          msg={{ kind: 'trail', role: 'system', text: '', tools: streamPendingTools }}
+          sections={sections}
+          t={ui.theme}
+        />
+      )}
+    </>
+  )
+})
+
+export const LiveTodoPanel = memo(function LiveTodoPanel() {
+  const ui = useStore($uiState)
+  const todos = useTurnSelector(state => state.todos)
+  const collapsed = useTurnSelector(state => state.todoCollapsed)
+
+  return <TodoPanel collapsed={collapsed} onToggle={toggleTodoCollapsed} t={ui.theme} todos={todos} />
+})
+
+interface StreamingAssistantProps {
+  cols: number
+  compact?: boolean
+  detailsMode: DetailsMode
+  detailsModeCommandOverride: boolean
+  progress: AppLayoutProgressProps
+  sections?: SectionVisibility
+}