nastech-tui 0.0.1

package/src/components/branding.tsx

@@ -0,0 +1,466 @@
+import { Box, Text, useStdout } from '@nastechai/ink'
+import { useEffect, useState } from 'react'
+import unicodeSpinners from 'unicode-animations'
+
+import { artWidth, caduceus, CADUCEUS_WIDTH, logo, LOGO_WIDTH } from '../banner.js'
+import { flat } from '../lib/text.js'
+import type { Theme } from '../theme.js'
+import type { PanelSection, SessionInfo } from '../types.js'
+
+const LOADER_TICK_MS = 120
+
+function InlineLoader({ label, t }: { label: string; t: Theme }) {
+  const [tick, setTick] = useState(0)
+  const spinner = unicodeSpinners.braille
+  const frame = spinner.frames[tick % spinner.frames.length] ?? '⠋'
+
+  useEffect(() => {
+    const id = setInterval(() => setTick(n => n + 1), Math.max(LOADER_TICK_MS, spinner.interval))
+
+    return () => clearInterval(id)
+  }, [spinner.interval])
+
+  return (
+    <Text color={t.color.muted} wrap="truncate">
+      <Text color={t.color.accent}>{frame}</Text> {label}
+    </Text>
+  )
+}
+
+export function ArtLines({ lines }: { lines: [string, string][] }) {
+  return (
+    <Box flexDirection="column" height={lines.length} opaque width={artWidth(lines)}>
+      {lines.map(([c, text], i) => (
+        <Text color={c} key={i} wrap="truncate-end">
+          {text}
+        </Text>
+      ))}
+    </Box>
+  )
+}
+
+// Responsive Banner: full art → compact rule → text → hidden.
+//
+// Terminals can't scale glyphs, so "responsive" means picking a layout that
+// fits the available columns. Thresholds are picked so each tier reads
+// comfortably without forcing wrap or truncation drift on box-drawing edges.
+const TAG_FULL = 'NasTech · Messenger of the Digital Gods'
+const TAG_MID = 'Messenger of the Digital Gods'
+const TAG_TINY = 'NasTech'
+const HIDE_BELOW = 34
+const COMPACT_FROM = 58
+
+const clip = (s: string, w: number) =>
+  w <= 0 ? '' : s.length > w ? `${s.slice(0, Math.max(0, w - 1))}…` : s
+
+const centerIn = (s: string, w: number) => {
+  const f = clip(s, w)
+  const slack = Math.max(0, w - f.length)
+  const left = slack >> 1
+
+  return `${' '.repeat(left)}${f}${' '.repeat(slack - left)}`
+}
+
+const ruleIn = (label: string, w: number) => {
+  const f = clip(label, Math.max(1, w - 4))
+  const slack = Math.max(0, w - f.length - 2)
+  const left = slack >> 1
+
+  return `${'─'.repeat(left)} ${f} ${'─'.repeat(slack - left)}`
+}
+
+function CompactBanner({ cols, t }: { cols: number; t: Theme }) {
+  // -4 keeps a margin so exact-edge rows don't trip terminal pending-wrap.
+  const w = Math.max(28, cols - 4)
+
+  return (
+    <Box flexDirection="column" height={3} marginBottom={1} opaque width={w}>
+      <Text bold color={t.color.primary}>{ruleIn(t.brand.name, w)}</Text>
+      <Text color={t.color.muted}>{centerIn(TAG_FULL, w)}</Text>
+      <Text color={t.color.primary}>{'─'.repeat(w)}</Text>
+    </Box>
+  )
+}
+
+export function Banner({ maxWidth, t }: { maxWidth?: number; t: Theme }) {
+  const term = useStdout().stdout?.columns ?? 80
+  const cols = Math.max(1, Math.min(term, maxWidth ?? term))
+
+  if (cols < HIDE_BELOW) {
+    return null
+  }
+
+  const logoLines = logo(t.color, t.bannerLogo || undefined)
+  const logoW = t.bannerLogo ? artWidth(logoLines) : LOGO_WIDTH
+
+  if (cols >= logoW + 2) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <ArtLines lines={logoLines} />
+        <Text color={t.color.muted} wrap="truncate-end">
+          {t.brand.icon} {TAG_FULL}
+        </Text>
+      </Box>
+    )
+  }
+
+  if (cols >= COMPACT_FROM) {
+    return <CompactBanner cols={cols} t={t} />
+  }
+
+  const name = cols >= 52 ? t.brand.name : (t.brand.name.split(' ')[0] ?? t.brand.name)
+  const tag = cols >= 64 ? TAG_FULL : cols >= 46 ? TAG_MID : TAG_TINY
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color={t.color.primary} wrap="truncate-end">{t.brand.icon} {name}</Text>
+      <Text color={t.color.muted} wrap="truncate-end">{t.brand.icon} {tag}</Text>
+    </Box>
+  )
+}
+
+// ── Collapsible helpers ──────────────────────────────────────────────
+
+function CollapseToggle({
+  count,
+  open,
+  suffix,
+  t,
+  title,
+  onToggle
+}: {
+  count?: number
+  open: boolean
+  suffix?: string
+  t: Theme
+  title: string
+  onToggle: () => void
+}) {
+  return (
+    <Box onClick={onToggle}>
+      <Text color={t.color.accent}>{open ? '▾ ' : '▸ '}</Text>
+      <Text bold color={t.color.accent}>
+        {title}
+      </Text>
+      {typeof count === 'number' ? (
+        <Text color={t.color.muted}> ({count})</Text>
+      ) : null}
+      {suffix ? (
+        <Text color={t.color.muted}> {suffix}</Text>
+      ) : null}
+    </Box>
+  )
+}
+
+// ── SessionPanel ─────────────────────────────────────────────────────
+
+const SKILLS_MAX = 8
+const TOOLSETS_MAX = 8
+
+export function SessionPanel({ info, maxWidth, sid, t }: SessionPanelProps) {
+  const term = useStdout().stdout?.columns ?? 100
+  const cols = Math.max(20, Math.min(term, maxWidth ?? term))
+  const heroLines = caduceus(t.color, t.bannerHero || undefined)
+  const leftW = Math.min((artWidth(heroLines) || CADUCEUS_WIDTH) + 4, Math.floor(cols * 0.4))
+  const wide = cols >= 90 && leftW + 40 < cols
+  const w = Math.max(20, wide ? cols - leftW - 14 : cols - 12)
+  const lineBudget = Math.max(12, w - 2)
+  const strip = (s: string) => (s.endsWith('_tools') ? s.slice(0, -6) : s)
+
+  // ── Local collapse state for each section ──
+  const [toolsOpen, setToolsOpen] = useState(true)
+  const [skillsOpen, setSkillsOpen] = useState(false)
+  const [systemOpen, setSystemOpen] = useState(false)
+  const [mcpOpen, setMcpOpen] = useState(false)
+
+  const truncLine = (pfx: string, items: string[]) => {
+    let line = ''
+    let shown = 0
+
+    for (const item of [...items].sort()) {
+      const next = line ? `${line}, ${item}` : item
+
+      if (pfx.length + next.length > lineBudget) {
+        return line ? `${line}, …+${items.length - shown}` : `${item}, …`
+      }
+
+      line = next
+      shown++
+    }
+
+    return line
+  }
+
+  // ── Collapsible skills section ──
+  const skillEntries = Object.entries(info.skills).sort()
+  const skillsTotal = flat(info.skills).length
+  const skillsCatCount = skillEntries.length
+
+  const skillsBody = () => {
+    if (info.lazy && skillEntries.length === 0) {
+      return <InlineLoader label="scanning skills" t={t} />
+    }
+
+    const shown = skillEntries.slice(0, SKILLS_MAX)
+    const overflow = skillEntries.length - SKILLS_MAX
+
+    return (
+      <>
+        {shown.map(([k, vs]) => (
+          <Text key={k} wrap="truncate">
+            <Text color={t.color.muted}>{strip(k)}: </Text>
+            <Text color={t.color.text}>{truncLine(strip(k) + ': ', vs)}</Text>
+          </Text>
+        ))}
+        {overflow > 0 && (
+          <Text color={t.color.muted}>(and {overflow} more categories…)</Text>
+        )}
+      </>
+    )
+  }
+
+  // ── Collapsible tools section ──
+  const toolEntries = Object.entries(info.tools).sort()
+  const toolsTotal = flat(info.tools).length
+
+  const toolsBody = () => {
+    const shown = toolEntries.slice(0, TOOLSETS_MAX)
+    const overflow = toolEntries.length - TOOLSETS_MAX
+
+    return (
+      <>
+        {shown.map(([k, vs]) => (
+          <Text key={k} wrap="truncate">
+            <Text color={t.color.muted}>{strip(k)}: </Text>
+            <Text color={t.color.text}>{truncLine(strip(k) + ': ', vs)}</Text>
+          </Text>
+        ))}
+        {overflow > 0 && (
+          <Text color={t.color.muted}>(and {overflow} more toolsets…)</Text>
+        )}
+      </>
+    )
+  }
+
+  // ── Collapsible MCP section ──
+  const mcpBody = () => (
+    <>
+      {(info.mcp_servers ?? []).map(s => (
+        <Text key={s.name} wrap="truncate">
+          <Text color={t.color.muted}>{`  ${s.name} `}</Text>
+          <Text color={t.color.muted}>{`[${s.transport}]`}</Text>
+          <Text color={t.color.muted}>: </Text>
+          {s.connected ? (
+            <Text color={t.color.text}>
+              {s.tools} tool{s.tools === 1 ? '' : 's'}
+            </Text>
+          ) : (
+            <Text color={t.color.error}>failed</Text>
+          )}
+        </Text>
+      ))}
+    </>
+  )
+
+  // ── System prompt body ──
+  const sysPromptLen = (info.system_prompt ?? '').length
+
+  const systemBody = () => {
+    if (sysPromptLen === 0) {
+      return <Text color={t.color.muted}>No system prompt loaded.</Text>
+    }
+
+    return (
+      <Text color={t.color.muted}>
+        {info.system_prompt}
+      </Text>
+    )
+  }
+
+  return (
+    <Box borderColor={t.color.border} borderStyle="round" marginBottom={1} paddingX={2} paddingY={1}>
+      {wide && (
+        <Box flexDirection="column" marginRight={2} width={leftW}>
+          <ArtLines lines={heroLines} />
+          <Text />
+
+          <Text color={t.color.accent}>
+            {info.model.split('/').pop()}
+            <Text color={t.color.muted}> · NasTech</Text>
+          </Text>
+
+          <Text color={t.color.muted} wrap="truncate-end">
+            {info.cwd || process.cwd()}
+          </Text>
+
+          {sid && (
+            <Text>
+              <Text color={t.color.sessionLabel}>Session: </Text>
+              <Text color={t.color.sessionBorder}>{sid}</Text>
+            </Text>
+          )}
+        </Box>
+      )}
+
+      <Box flexDirection="column" width={w}>
+        {wide ? (
+          <Box justifyContent="center" marginBottom={1}>
+            <Text bold color={t.color.primary}>
+              {t.brand.name}
+              {info.version ? ` v${info.version}` : ''}
+              {info.release_date ? ` (${info.release_date})` : ''}
+            </Text>
+          </Box>
+        ) : (
+          // Narrow layout hides the hero column; surface model/cwd/session
+          // here so they aren't lost.
+          <Box flexDirection="column" marginBottom={1}>
+            <Text color={t.color.accent} wrap="truncate-end">
+              {info.model.split('/').pop()}
+              <Text color={t.color.muted}> · NasTech</Text>
+            </Text>
+            <Text color={t.color.muted} wrap="truncate-end">
+              {info.cwd || process.cwd()}
+            </Text>
+            {sid && (
+              <Text wrap="truncate-end">
+                <Text color={t.color.sessionLabel}>Session: </Text>
+                <Text color={t.color.sessionBorder}>{sid}</Text>
+              </Text>
+            )}
+          </Box>
+        )}
+
+        {/* ── Tools (expanded by default) ── */}
+        <Box flexDirection="column" marginTop={1}>
+          <CollapseToggle
+            onToggle={() => setToolsOpen(v => !v)}
+            open={toolsOpen}
+            t={t}
+            title="Available Tools"
+          />
+          {toolsOpen && toolsBody()}
+        </Box>
+
+        {/* ── Skills (collapsed by default) ── */}
+        <Box flexDirection="column" marginTop={1}>
+          <CollapseToggle
+            count={skillsTotal}
+            onToggle={() => setSkillsOpen(v => !v)}
+            open={skillsOpen}
+            suffix={skillsCatCount > 0 ? `in ${skillsCatCount} categor${skillsCatCount === 1 ? 'y' : 'ies'}` : undefined}
+            t={t}
+            title="Available Skills"
+          />
+          {skillsOpen && skillsBody()}
+        </Box>
+
+        {/* ── System Prompt (collapsed by default) ── */}
+        {sysPromptLen > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <CollapseToggle
+              onToggle={() => setSystemOpen(v => !v)}
+              open={systemOpen}
+              suffix={`— ${sysPromptLen.toLocaleString()} chars`}
+              t={t}
+              title="System Prompt"
+            />
+            {systemOpen && systemBody()}
+          </Box>
+        )}
+
+        {/* ── MCP Servers (collapsed by default) ── */}
+        {info.mcp_servers && info.mcp_servers.length > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <CollapseToggle
+              count={info.mcp_servers.length}
+              onToggle={() => setMcpOpen(v => !v)}
+              open={mcpOpen}
+              suffix="connected"
+              t={t}
+              title="MCP Servers"
+            />
+            {mcpOpen && mcpBody()}
+          </Box>
+        )}
+
+        <Text />
+
+        <Text color={t.color.text}>
+          {toolsTotal} tools{' · '}
+          {skillsTotal} skills
+          {info.mcp_servers?.length ? ` · ${info.mcp_servers.length} MCP` : ''}
+          {' · '}
+          <Text color={t.color.muted}>/help for commands</Text>
+        </Text>
+
+        {typeof info.update_behind === 'number' && info.update_behind > 0 && (
+          <Text bold color={t.color.warn}>
+            ! {info.update_behind} {info.update_behind === 1 ? 'commit' : 'commits'} behind
+            <Text bold={false} color={t.color.warn} dimColor>
+              {' '}
+              - run{' '}
+            </Text>
+            <Text bold color={t.color.warn}>
+              {info.update_command || 'nastech update'}
+            </Text>
+            <Text bold={false} color={t.color.warn} dimColor>
+              {' '}
+              to update
+            </Text>
+          </Text>
+        )}
+      </Box>
+    </Box>
+  )
+}
+
+export function Panel({ sections, t, title }: PanelProps) {
+  return (
+    <Box borderColor={t.color.border} borderStyle="round" flexDirection="column" paddingX={2} paddingY={1}>
+      <Box justifyContent="center" marginBottom={1}>
+        <Text bold color={t.color.primary}>
+          {title}
+        </Text>
+      </Box>
+
+      {sections.map((sec, si) => (
+        <Box flexDirection="column" key={si} marginTop={si > 0 ? 1 : 0}>
+          {sec.title && (
+            <Text bold color={t.color.accent}>
+              {sec.title}
+            </Text>
+          )}
+
+          {sec.rows?.map(([k, v], ri) => (
+            <Text key={ri} wrap="truncate">
+              <Text color={t.color.muted}>{k.padEnd(20)}</Text>
+              <Text color={t.color.text}>{v}</Text>
+            </Text>
+          ))}
+
+          {sec.items?.map((item, ii) => (
+            <Text color={t.color.text} key={ii} wrap="truncate">
+              {item}
+            </Text>
+          ))}
+
+          {sec.text && <Text color={t.color.muted}>{sec.text}</Text>}
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+interface PanelProps {
+  sections: PanelSection[]
+  t: Theme
+  title: string
+}
+
+interface SessionPanelProps {
+  info: SessionInfo
+  maxWidth?: number
+  sid?: string | null
+  t: Theme
+}

package/src/components/fpsOverlay.tsx

@@ -0,0 +1,30 @@
+// FPS counter overlay (NASTECH_TUI_FPS=1). Zero-cost when disabled.
+
+import { Text } from '@nastechai/ink'
+import { useStore } from '@nanostores/react'
+
+import { SHOW_FPS } from '../config/env.js'
+import { $fpsState } from '../lib/fpsStore.js'
+import type { Theme } from '../theme.js'
+
+const fpsColor = (fps: number, t: Theme) =>
+  fps >= 50 ? t.color.statusGood : fps >= 30 ? t.color.statusWarn : t.color.error
+
+export function FpsOverlay({ t }: { t: Theme }) {
+  if (!SHOW_FPS) {
+    return null
+  }
+
+  return <FpsOverlayInner t={t} />
+}
+
+function FpsOverlayInner({ t }: { t: Theme }) {
+  const { fps, lastDurationMs, totalFrames } = useStore($fpsState)
+
+  // Zero-pad widths so digit churn doesn't jitter the corner.
+  return (
+    <Text color={fpsColor(fps, t)}>
+      {fps.toFixed(1).padStart(5)}fps · {lastDurationMs.toFixed(1).padStart(5)}ms · #{totalFrames}
+    </Text>
+  )
+}

package/src/components/helpHint.tsx

@@ -0,0 +1,73 @@
+import { Box, Text } from '@nastechai/ink'
+
+import { HOTKEYS } from '../content/hotkeys.js'
+import type { Theme } from '../theme.js'
+
+const COMMON_COMMANDS: [string, string][] = [
+  ['/help', 'full list of commands + hotkeys'],
+  ['/clear', 'start a new session'],
+  ['/resume', 'resume a prior session'],
+  ['/details', 'control transcript detail level'],
+  ['/copy', 'copy selection or last assistant message'],
+  ['/quit', 'exit nastech']
+]
+
+const HOTKEY_PREVIEW = HOTKEYS.slice(0, 8)
+
+export function HelpHint({ t }: { t: Theme }) {
+  const labelW = Math.max(
+    ...COMMON_COMMANDS.map(([k]) => k.length),
+    ...HOTKEY_PREVIEW.map(([k]) => k.length)
+  )
+
+  const pad = (s: string) => s + ' '.repeat(Math.max(0, labelW - s.length + 2))
+
+  return (
+    <Box alignItems="flex-start" bottom="100%" flexDirection="column" left={0} position="absolute" right={0}>
+      <Box
+        alignSelf="flex-start"
+        borderColor={t.color.primary}
+        borderStyle="round"
+        flexDirection="column"
+        marginBottom={1}
+        opaque
+        paddingX={1}
+      >
+        <Text>
+          <Text bold color={t.color.primary}>
+            ? quick help
+          </Text>
+          <Text color={t.color.muted}>
+            {'  ·  type /help for the full panel  ·  backspace to dismiss'}
+          </Text>
+        </Text>
+
+        <Box marginTop={1}>
+          <Text bold color={t.color.accent}>
+            Common commands
+          </Text>
+        </Box>
+
+        {COMMON_COMMANDS.map(([k, v]) => (
+          <Text key={k}>
+            <Text color={t.color.label}>{pad(k)}</Text>
+            <Text color={t.color.muted}>{v}</Text>
+          </Text>
+        ))}
+
+        <Box marginTop={1}>
+          <Text bold color={t.color.accent}>
+            Hotkeys
+          </Text>
+        </Box>
+
+        {HOTKEY_PREVIEW.map(([k, v]) => (
+          <Text key={k}>
+            <Text color={t.color.label}>{pad(k)}</Text>
+            <Text color={t.color.muted}>{v}</Text>
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  )
+}