miii-cli 0.1.0

package/src/tui/components/InputArea.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useMemo } from 'react'
+import { Box, Text, useInput } from 'ink'
+import type { Key } from 'ink'
+import type { Status } from '../../types.js'
+import type { Skill } from '../../skills/loader.js'
+import type { FileEntry } from '../../files/ops.js'
+import { listFiles } from '../../files/ops.js'
+import { CommandPalette } from './CommandPalette.js'
+import { AtPicker } from './AtPicker.js'
+
+const BUILTIN_COMMANDS: Skill[] = [
+  { ns: 'builtin', name: 'new',      description: 'start a fresh session (auto-named)' },
+  { ns: 'builtin', name: 'models',   description: 'switch or pull Ollama models' },
+  { ns: 'builtin', name: 'clear',    description: 'clear chat history for current session' },
+  { ns: 'builtin', name: 'sessions', description: 'list all saved sessions' },
+  { ns: 'builtin', name: 'session',  description: 'switch session  /session <name>' },
+  { ns: 'builtin', name: 'exit',     description: 'exit miii' },
+  { ns: 'builtin', name: 'list',     description: 'list all loaded skills' },
+]
+
+type Overlay = 'none' | 'command' | 'at'
+
+interface Props {
+  status: Status
+  skills: Skill[]
+  cwd: string
+  onSubmit: (text: string) => void
+  onAbort: () => void
+}
+
+export function InputArea({ status, skills, cwd, onSubmit, onAbort }: Props) {
+  const [lines, setLines] = useState<string[]>([''])
+  const [cursor, setCursor] = useState({ row: 0, col: 0 })
+  const [overlay, setOverlay] = useState<Overlay>('none')
+  const [overlayIdx, setOverlayIdx] = useState(0)
+
+  const [files] = useState<FileEntry[]>(() => {
+    try { return listFiles(cwd, true) } catch { return [] }
+  })
+
+  // built-ins first, then loaded skills (deduplicated by name)
+  const allCommands = useMemo(() => {
+    const builtinNames = new Set(BUILTIN_COMMANDS.map(b => b.name))
+    const userSkills = skills.filter(s => !builtinNames.has(s.name))
+    return [...BUILTIN_COMMANDS, ...userSkills]
+  }, [skills])
+
+  const isActive = status === 'idle'
+  const fullInput = lines.join('\n')
+
+  const commandQuery = useMemo(() =>
+    fullInput.startsWith('/') ? fullInput.slice(1) : '',
+    [fullInput]
+  )
+
+  const atQuery = useMemo(() => {
+    const line = lines[cursor.row] ?? ''
+    const before = line.slice(0, cursor.col)
+    const atIdx = before.lastIndexOf('@')
+    if (atIdx === -1) return ''
+    const after = before.slice(atIdx + 1)
+    if (after.includes(' ')) return '' // space breaks @ ref
+    return after
+  }, [lines, cursor])
+
+  const filteredCommands = useMemo(() => {
+    const q = commandQuery.toLowerCase()
+    if (!q) return allCommands.slice(0, 10)
+    return allCommands.filter(s =>
+      s.name.includes(q) ||
+      `${s.ns}:${s.name}`.includes(q) ||
+      s.description.toLowerCase().includes(q)
+    ).slice(0, 10)
+  }, [commandQuery, allCommands])
+
+  const filteredFiles = useMemo(() => {
+    if (!atQuery) return files.slice(0, 8)
+    return files.filter(f => f.rel.toLowerCase().includes(atQuery.toLowerCase())).slice(0, 8)
+  }, [atQuery, files])
+
+  const overlayCount = overlay === 'command' ? filteredCommands.length : filteredFiles.length
+
+  function clearInput() {
+    setLines([''])
+    setCursor({ row: 0, col: 0 })
+    setOverlay('none')
+    setOverlayIdx(0)
+  }
+
+  function appendChar(ch: string) {
+    setLines(prev => {
+      const next = [...prev]
+      const r = cursor.row
+      next[r] = next[r].slice(0, cursor.col) + ch + next[r].slice(cursor.col)
+      return next
+    })
+    setCursor(c => ({ ...c, col: c.col + ch.length }))
+  }
+
+  function deleteChar() {
+    const { row, col } = cursor
+    setLines(prev => {
+      const next = [...prev]
+      if (col > 0) {
+        next[row] = next[row].slice(0, col - 1) + next[row].slice(col)
+      } else if (row > 0) {
+        const prevLen = next[row - 1].length
+        next.splice(row - 1, 2, next[row - 1] + next[row])
+        setCursor({ row: row - 1, col: prevLen })
+        return next
+      }
+      return next
+    })
+    if (col > 0) setCursor(c => ({ ...c, col: c.col - 1 }))
+  }
+
+  function selectCommand(skill: Skill) {
+    const name = (skill.ns === 'default' || skill.ns === 'builtin')
+      ? `/${skill.name}`
+      : `/${skill.ns}:${skill.name}`
+    clearInput()
+    onSubmit(name)
+  }
+
+  function selectFile(file: FileEntry) {
+    setLines(prev => {
+      const next = [...prev]
+      const r = cursor.row
+      const line = next[r]
+      const before = line.slice(0, cursor.col)
+      const atIdx = before.lastIndexOf('@')
+      if (atIdx === -1) return prev
+      const newLine = line.slice(0, atIdx) + '@' + file.rel + ' ' + line.slice(cursor.col)
+      next[r] = newLine
+      setCursor({ row: r, col: atIdx + 1 + file.rel.length + 1 })
+      return next
+    })
+    setOverlay('none')
+    setOverlayIdx(0)
+  }
+
+  useInput((input: string, key: Key) => {
+    // ESC: close overlay, abort stream, or clear input
+    if (key.escape) {
+      if (overlay !== 'none') { setOverlay('none'); setOverlayIdx(0); return }
+      if (status !== 'idle') { onAbort(); return }
+      clearInput(); return
+    }
+
+    // Ctrl+C
+    if (key.ctrl && input === 'c') {
+      if (status !== 'idle') { onAbort() } else { process.exit(0) }
+      return
+    }
+
+    if (!isActive) return
+
+    // Overlay navigation
+    if (overlay !== 'none') {
+      if (key.upArrow) { setOverlayIdx(i => Math.max(0, i - 1)); return }
+      if (key.downArrow) { setOverlayIdx(i => Math.min(overlayCount - 1, i + 1)); return }
+      if (key.return) {
+        if (overlay === 'command') {
+          if (commandQuery.includes(' ')) {
+            // has args — submit full text, don't pick from palette
+            const text = fullInput.trim()
+            if (text) { clearInput(); onSubmit(text) }
+          } else if (filteredCommands[overlayIdx]) {
+            selectCommand(filteredCommands[overlayIdx])
+          }
+        } else if (overlay === 'at' && filteredFiles[overlayIdx]) {
+          selectFile(filteredFiles[overlayIdx])
+        }
+        return
+      }
+      // backspace/typing falls through to normal handling below
+    }
+
+    if (key.return) {
+      const text = fullInput.trim()
+      if (text) { clearInput(); onSubmit(text) }
+      return
+    }
+
+    if (key.backspace || key.delete) {
+      deleteChar()
+      // Recompute overlay trigger for updated input
+      const r = cursor.row
+      const col = cursor.col
+      const prospectiveLine = col > 0
+        ? lines[r].slice(0, col - 1) + lines[r].slice(col)
+        : lines[r]
+      const prospectiveLines = [...lines]
+      prospectiveLines[r] = prospectiveLine
+      const prospective = prospectiveLines.join('\n')
+
+      if (overlay === 'command' && !prospective.startsWith('/')) setOverlay('none')
+      if (overlay === 'at') {
+        const before = prospectiveLine.slice(0, Math.max(0, col - 1))
+        const atIdx = before.lastIndexOf('@')
+        if (atIdx === -1) setOverlay('none')
+      }
+      return
+    }
+
+    if (key.upArrow && overlay === 'none') { setCursor(c => ({ row: Math.max(0, c.row - 1), col: 0 })); return }
+    if (key.downArrow && overlay === 'none') { setCursor(c => ({ row: Math.min(lines.length - 1, c.row + 1), col: 0 })); return }
+    if (key.leftArrow) { setCursor(c => ({ ...c, col: Math.max(0, c.col - 1) })); return }
+    if (key.rightArrow) { setCursor(c => ({ ...c, col: Math.min(lines[c.row]?.length ?? 0, c.col + 1) })); return }
+
+    if (input && !key.ctrl && !key.meta) {
+      // Compute prospective new input to decide overlay
+      const r = cursor.row
+      const col = cursor.col
+      const prospectiveLine = lines[r].slice(0, col) + input + lines[r].slice(col)
+      const prospectiveLines = [...lines]
+      prospectiveLines[r] = prospectiveLine
+      const prospective = prospectiveLines.join('\n')
+
+      appendChar(input)
+
+      // Open/update overlays
+      if (prospective.startsWith('/')) {
+        const q = prospective.slice(1)
+        if (q.includes(' ')) {
+          setOverlay('none')  // typing args — close palette, let user type freely
+        } else {
+          setOverlay('command')
+          setOverlayIdx(0)
+        }
+      } else if (input === '@' || (overlay === 'at' && atQuery !== undefined)) {
+        setOverlay('at')
+        setOverlayIdx(0)
+      } else if (overlay === 'command') {
+        setOverlay('none')
+      }
+    }
+  })
+
+  const isProcessing = status !== 'idle'
+  const borderColor = isProcessing ? 'yellow' : 'cyan'
+  const hint = isProcessing
+    ? 'esc to abort'
+    : overlay === 'command' && !commandQuery.includes(' ')
+    ? '↑↓ navigate  enter select  esc close'
+    : overlay === 'at'
+    ? '↑↓ navigate  enter select  esc close'
+    : '@ file  / command  enter send  ctrl+c exit'
+
+  return (
+    <Box flexDirection="column">
+      {overlay === 'command' && (
+        <CommandPalette skills={allCommands} query={commandQuery} idx={overlayIdx} />
+      )}
+      {overlay === 'at' && (
+        <AtPicker files={filteredFiles} query={atQuery} idx={overlayIdx} />
+      )}
+      <Box borderStyle="round" borderColor={borderColor} paddingX={1} flexDirection="column">
+        <Box>
+          <Text color={borderColor} bold>{'❯ '}</Text>
+          <Box flexDirection="column" flexGrow={1}>
+            {lines.length === 1 && !lines[0] ? (
+              <Text color={isActive ? 'white' : 'gray'} dimColor={isProcessing}>
+                {isActive ? '█' : 'processing...'}
+              </Text>
+            ) : (
+              lines.map((line, i) => (
+                <Text key={i} wrap="wrap">
+                  {i === cursor.row
+                    ? renderLineWithCursor(line, cursor.col, isActive)
+                    : line}
+                </Text>
+              ))
+            )}
+          </Box>
+        </Box>
+        <Text color="gray" dimColor>{hint}</Text>
+      </Box>
+    </Box>
+  )
+}
+
+function renderLineWithCursor(line: string, col: number, showCursor: boolean): string {
+  return line.slice(0, col) + (showCursor ? '█' : '') + line.slice(col)
+}

package/src/tui/components/MessageList.tsx

@@ -0,0 +1,192 @@
+import React, { useMemo } from 'react'
+import { Box, Text } from 'ink'
+import type { Message } from '../../types.js'
+
+interface Props {
+  messages: Message[]
+  rows: number
+  cols: number
+  scrollOffset: number  // 0 = pinned at bottom; N = N msgs hidden from bottom
+  streaming?: boolean
+}
+
+// ─── height estimation ───────────────────────────────────────────────────────
+
+function msgHeight(msg: Message, cols: number): number {
+  const usable = Math.max(cols - 8, 20)
+  if (msg.role === 'system') return 2
+  if (msg.role === 'tool') return 3
+  let h = 2 // label + blank
+  for (const line of msg.content.split('\n')) {
+    h += Math.max(1, Math.ceil((line.length || 1) / usable))
+  }
+  return Math.min(h, 40)
+}
+
+interface Slice {
+  visible: Message[]
+  hiddenAbove: number
+  hiddenBelow: number
+}
+
+function computeSlice(messages: Message[], availRows: number, offset: number, cols: number): Slice {
+  const clampedOffset = Math.max(0, Math.min(offset, Math.max(0, messages.length - 1)))
+  const endIdx = messages.length - clampedOffset
+
+  let startIdx = endIdx
+  let usedRows = 0
+  while (startIdx > 0) {
+    const h = msgHeight(messages[startIdx - 1], cols)
+    if (usedRows + h > availRows) break
+    startIdx--
+    usedRows += h
+  }
+
+  return {
+    visible: messages.slice(startIdx, endIdx),
+    hiddenAbove: startIdx,
+    hiddenBelow: clampedOffset,
+  }
+}
+
+// ─── segments ────────────────────────────────────────────────────────────────
+
+interface Segment { text: string; code: boolean; fence: boolean }
+
+function parseSegments(content: string): Segment[] {
+  const segs: Segment[] = []
+  let inCode = false
+  for (const line of content.split('\n')) {
+    if (line.startsWith('```')) {
+      segs.push({ text: line, code: false, fence: true })
+      inCode = !inCode
+    } else {
+      segs.push({ text: line, code: inCode, fence: false })
+    }
+  }
+  return segs
+}
+
+function ContentBlock({ content }: { content: string }) {
+  const segs = useMemo(() => parseSegments(content), [content])
+  return (
+    <Box flexDirection="column" paddingLeft={2}>
+      {segs.map((seg, i) =>
+        seg.fence ? (
+          <Text key={i} color="gray" dimColor>{seg.text}</Text>
+        ) : seg.code ? (
+          <Text key={i} color="yellow">{seg.text || ' '}</Text>
+        ) : (
+          <Text key={i} wrap="wrap">{seg.text || ' '}</Text>
+        )
+      )}
+    </Box>
+  )
+}
+
+// ─── message renderers ───────────────────────────────────────────────────────
+
+function UserMsg({ msg }: { msg: Message }) {
+  const parts = msg.content.split(/(@[\w./\-]+)/g)
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="blue">You</Text>
+      <Box paddingLeft={2}>
+        <Text wrap="wrap">
+          {parts.map((p, i) =>
+            p.startsWith('@')
+              ? <Text key={i} color="cyan">{p}</Text>
+              : <Text key={i}>{p}</Text>
+          )}
+        </Text>
+      </Box>
+    </Box>
+  )
+}
+
+function AssistantMsg({ msg }: { msg: Message }) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="green">miii</Text>
+      <ContentBlock content={msg.content} />
+    </Box>
+  )
+}
+
+function ToolMsg({ msg }: { msg: Message }) {
+  const lines = msg.content.split('\n')
+  const name = (lines[0] ?? '').replace(/^\[/, '').replace(/\]$/, '')
+  const body = lines.slice(1).join('\n').trim()
+  return (
+    <Box flexDirection="column" marginBottom={1} paddingLeft={2}>
+      <Text color="green">✓ <Text color="cyan">{name}</Text></Text>
+      {body && (
+        <Box paddingLeft={2}>
+          <Text color="gray" dimColor wrap="wrap">
+            {body.length > 300 ? body.slice(0, 300) + '…' : body}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+function SystemMsg({ msg }: { msg: Message }) {
+  return (
+    <Box marginBottom={1} paddingLeft={1}>
+      <Text color="gray" dimColor>─ {msg.content}</Text>
+    </Box>
+  )
+}
+
+function MsgItem({ msg }: { msg: Message }) {
+  switch (msg.role) {
+    case 'user':      return <UserMsg msg={msg} />
+    case 'assistant': return <AssistantMsg msg={msg} />
+    case 'tool':      return <ToolMsg msg={msg} />
+    case 'system':    return <SystemMsg msg={msg} />
+    default:          return null
+  }
+}
+
+// ─── scroll hint bar ─────────────────────────────────────────────────────────
+
+function ScrollHint({ hiddenAbove, hiddenBelow }: { hiddenAbove: number; hiddenBelow: number }) {
+  if (hiddenAbove === 0 && hiddenBelow === 0) return null
+  const parts: string[] = []
+  if (hiddenAbove > 0) parts.push(`↑ ${hiddenAbove} above`)
+  if (hiddenBelow > 0) parts.push(`↓ ${hiddenBelow} below`)
+  return (
+    <Box justifyContent="center">
+      <Text color="gray" dimColor>{parts.join('  ')}  · PgUp/PgDn</Text>
+    </Box>
+  )
+}
+
+// ─── main export ─────────────────────────────────────────────────────────────
+
+export function MessageList({ messages, rows, cols, scrollOffset, streaming }: Props) {
+  const availRows = Math.max(rows - 2, 4)
+  const { visible, hiddenAbove, hiddenBelow } = useMemo(
+    () => computeSlice(messages, availRows, scrollOffset, cols),
+    [messages, availRows, scrollOffset, cols]
+  )
+
+  return (
+    <Box flexDirection="column" flexGrow={1} overflow="hidden" paddingX={1}>
+      <ScrollHint hiddenAbove={hiddenAbove} hiddenBelow={hiddenBelow} />
+
+      {visible.length === 0 && hiddenAbove === 0 && (
+        <Box paddingTop={1}>
+          <Text color="gray" dimColor>start typing below — @ for files, / for commands</Text>
+        </Box>
+      )}
+
+      {visible.map(msg => <MsgItem key={msg.id} msg={msg} />)}
+
+      {streaming && scrollOffset === 0 && (
+        <Box paddingLeft={2}><Text color="gray" dimColor>▋</Text></Box>
+      )}
+    </Box>
+  )
+}

package/src/tui/components/ModelPicker.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { Box, Text, useInput } from 'ink'
+import type { OllamaModel } from '../../llm/ollama.js'
+import { fmtSize } from '../../llm/ollama.js'
+
+type Mode = 'list' | 'pull-input' | 'pulling'
+
+interface PullState {
+  name: string
+  status: string
+  pct: number | undefined
+}
+
+interface Props {
+  models: OllamaModel[]
+  current: string
+  loading: boolean
+  error?: string
+  pull?: PullState
+  onSelect: (name: string) => void
+  onPull: (name: string) => void
+  onClose: () => void
+}
+
+const BAR_WIDTH = 20
+
+function progressBar(pct: number): string {
+  const filled = Math.round((pct / 100) * BAR_WIDTH)
+  return '█'.repeat(filled) + '░'.repeat(BAR_WIDTH - filled)
+}
+
+export function ModelPicker({ models, current, loading, error, pull, onSelect, onPull, onClose }: Props) {
+  const [idx, setIdx] = useState(() => {
+    const i = models.findIndex(m => m.name === current)
+    return i >= 0 ? i : 0
+  })
+  const [mode, setMode] = useState<Mode>('list')
+  const [pullInput, setPullInput] = useState('')
+
+  const totalItems = models.length + 1 // +1 for "pull new" row
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (mode === 'pull-input') { setMode('list'); setPullInput(''); return }
+      onClose()
+      return
+    }
+
+    if (mode === 'list') {
+      if (key.upArrow) { setIdx(i => Math.max(0, i - 1)); return }
+      if (key.downArrow) { setIdx(i => Math.min(totalItems - 1, i + 1)); return }
+      if (key.return) {
+        if (idx < models.length) {
+          onSelect(models[idx].name)
+        } else {
+          setMode('pull-input')
+        }
+        return
+      }
+      return
+    }
+
+    if (mode === 'pull-input') {
+      if (key.return) {
+        const name = pullInput.trim()
+        if (name) { setMode('pulling'); onPull(name) }
+        return
+      }
+      if (key.backspace || key.delete) { setPullInput(p => p.slice(0, -1)); return }
+      if (input && !key.ctrl && !key.meta) { setPullInput(p => p + input); return }
+    }
+  })
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan"> models </Text>
+        {loading && <Text color="yellow"> loading...</Text>}
+        {error && <Text color="red"> {error}</Text>}
+      </Box>
+
+      {mode === 'list' && (
+        <>
+          {models.map((m, i) => {
+            const active = i === idx
+            const isCurrent = m.name === current
+            const age = new Date(m.modified_at).toLocaleDateString()
+            return (
+              <Box key={m.name}>
+                <Text color={active ? 'cyan' : 'white'}>
+                  {active ? '▶ ' : '  '}
+                  {m.name.padEnd(28)}
+                </Text>
+                <Text color="gray">{fmtSize(m.size).padEnd(8)}{age}</Text>
+                {isCurrent && <Text color="green" bold>  ✓ active</Text>}
+              </Box>
+            )
+          })}
+          <Box marginTop={1}>
+            <Text color={idx === models.length ? 'cyan' : 'gray'}>
+              {idx === models.length ? '▶ ' : '  '}
+              [pull new model...]
+            </Text>
+          </Box>
+        </>
+      )}
+
+      {mode === 'pull-input' && (
+        <Box flexDirection="column">
+          <Box>
+            <Text color="cyan">model name: </Text>
+            <Text>{pullInput}█</Text>
+          </Box>
+          <Text color="gray" dimColor>enter to pull, esc to cancel</Text>
+        </Box>
+      )}
+
+      {mode === 'pulling' && pull && (
+        <Box flexDirection="column">
+          <Text>pulling <Text color="cyan">{pull.name}</Text></Text>
+          <Box>
+            <Text color="yellow">{progressBar(pull.pct ?? 0)} </Text>
+            <Text>{pull.pct !== undefined ? `${pull.pct}%` : ''}</Text>
+          </Box>
+          <Text color="gray" dimColor>{pull.status}</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1} borderTop borderStyle="single" borderColor="gray">
+        <Text color="gray" dimColor>↑↓ navigate  enter select  esc close</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import type { Status } from '../../types.js'
+
+const DOTS = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+
+interface Props {
+  model: string
+  provider: string
+  status: Status
+  tick: number
+}
+
+export function StatusBar({ model, provider, status, tick }: Props) {
+  const isIdle = status === 'idle'
+  const spinner = DOTS[tick % DOTS.length]
+
+  const statusNode =
+    status === 'idle' ? <Text color="green">● <Text color="gray">ready</Text></Text>
+    : status === 'streaming' ? <Text color="yellow">{spinner} <Text color="gray">streaming</Text></Text>
+    : <Text color="yellow">{spinner} <Text color="gray">tool</Text></Text>
+
+  return (
+    <Box>
+      <Box flexGrow={1} paddingX={1} paddingY={0} justifyContent="space-between">
+        <Text bold color="cyan">MIII</Text>
+        <Text color="gray" dimColor>{provider}/{model}</Text>
+        {statusNode}
+      </Box>
+    </Box>
+  )
+}
+
+export function Divider({ cols }: { cols: number }) {
+  return <Text color="gray" dimColor>{'─'.repeat(Math.max(cols, 10))}</Text>
+}