miii-cli 0.2.0 → 0.2.2

package/src/tui/components/InputArea.tsx

@@ -1,297 +0,0 @@
-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' },
-  { ns: 'builtin', name: 'plan',     description: 'start planning mode  /plan [topic]' },
-]
-
-const PLANNING_COMMANDS: Skill[] = [
-  { ns: 'plan', name: 'next',      description: 'suggest next concrete steps' },
-  { ns: 'plan', name: 'breakdown', description: 'break current topic into subtasks' },
-  { ns: 'plan', name: 'review',    description: 'review and critique the plan so far' },
-  { ns: 'plan', name: 'done',      description: 'exit planning mode' },
-]
-
-type Overlay = 'none' | 'command' | 'at'
-
-interface Props {
-  status: Status
-  skills: Skill[]
-  cwd: string
-  planningMode?: boolean
-  onSubmit: (text: string) => void
-  onAbort: () => void
-}
-
-export function InputArea({ status, skills, cwd, planningMode, 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))
-    const base = [...BUILTIN_COMMANDS, ...userSkills]
-    return planningMode ? [...PLANNING_COMMANDS, ...base] : base
-  }, [skills, planningMode])
-
-  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'
-    : planningMode
-    ? '📋 planning mode  / suggestions  enter send  /plan:done to exit'
-    : '@ 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

@@ -1,219 +0,0 @@
-import { 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
-  thinkingTick?: number
-}
-
-// ─── 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>
-  )
-}
-
-const THINKING_PHRASES = [
-  'oh wow, a question. let me pretend to care…',
-  'consulting the void…',
-  'making something up, just a sec…',
-  'definitely not hallucinating right now…',
-  'running 47 mental tabs…',
-  'staring into the abyss (it blinked)…',
-  'calculating your fate, no pressure…',
-  'doing the thinking you pay me for…',
-  'processing your questionable life choices…',
-  'summoning coherent thoughts, rarely works…',
-]
-const SPARKLE = ['✦', '✧', '✶', '✷', '✸', '✹']
-
-function AssistantMsg({ msg, thinkingTick }: { msg: Message; thinkingTick?: number }) {
-  if (!msg.content && thinkingTick !== undefined) {
-    const phrase = THINKING_PHRASES[Math.floor(thinkingTick / 62) % THINKING_PHRASES.length]
-    const icon = SPARKLE[thinkingTick % SPARKLE.length]
-    return (
-      <Box flexDirection="column" marginBottom={1}>
-        <Text bold color="green">miii</Text>
-        <Box paddingLeft={2}>
-          <Text color="yellow">{icon} </Text><Text color="gray" dimColor italic>{phrase}</Text>
-        </Box>
-      </Box>
-    )
-  }
-  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, thinkingTick }: { msg: Message; thinkingTick?: number }) {
-  switch (msg.role) {
-    case 'user':      return <UserMsg msg={msg} />
-    case 'assistant': return <AssistantMsg msg={msg} thinkingTick={thinkingTick} />
-    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, thinkingTick }: 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} thinkingTick={thinkingTick} />)}
-
-      {streaming && scrollOffset === 0 && (
-        <Box paddingLeft={2}><Text color="gray" dimColor>▋</Text></Box>
-      )}
-    </Box>
-  )
-}

package/src/tui/components/ModelPicker.tsx

@@ -1,134 +0,0 @@
-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" flexGrow={1} 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

@@ -1,36 +0,0 @@
-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 === 'thinking' ? <Text color="yellow">{spinner} <Text color="gray">thinking</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>
-}