lonny-agent 0.2.4 → 0.2.7

package/src/tui/components/header-bar.ts

@@ -0,0 +1,88 @@
+import type { Component } from '../../pi-tui/index.js'
+import { colors } from './colors.js'
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+  return String(n)
+}
+
+export { formatTokens }
+
+export class HeaderBar implements Component {
+  private mode: string
+  private model: string
+  private provider: string
+  private agentStatus: 'running' | 'idle'
+  private planCount: number
+  private planName: string
+  private totalInputTokens: number = 0
+  private totalOutputTokens: number = 0
+  private totalApiCalls: number = 0
+  private projectName: string = ''
+
+  constructor(model: string, provider: string) {
+    this.model = model
+    this.provider = provider
+    this.mode = 'code'
+    this.agentStatus = 'idle'
+    this.planCount = 0
+    this.planName = ''
+  }
+
+  setMode(m: string): void {
+    this.mode = m
+  }
+  setAgentStatus(s: 'running' | 'idle'): void {
+    this.agentStatus = s
+  }
+  setPlanCount(n: number): void {
+    this.planCount = n
+  }
+  setPlanName(n: string): void {
+    this.planName = n
+  }
+  setTokenUsage(inputTokens: number, outputTokens: number, apiCalls: number): void {
+    this.totalInputTokens = inputTokens
+    this.totalOutputTokens = outputTokens
+    this.totalApiCalls = apiCalls
+  }
+  setProjectName(name: string): void {
+    this.projectName = name
+  }
+  invalidate(): void {}
+  handleInput?(_data: string): void {}
+
+  render(width: number): string[] {
+    const appName = colors.accent('\u2588 lonny')
+    const statusDot =
+      this.agentStatus === 'running' ? colors.running('\u25CF') : colors.dim('\u25CB')
+    const statusLabel =
+      this.agentStatus === 'running' ? colors.running('running') : colors.dim('idle')
+    const modeLabel =
+      this.mode === 'ask'
+        ? colors.success(this.mode)
+        : this.mode === 'loop'
+          ? colors.accent(this.mode)
+          : colors.warn(this.mode)
+    const modelInfo = colors.dim(`${this.provider}/${this.model}`)
+
+    let rightPart = `${statusDot} ${statusLabel}  ${modeLabel}  ${modelInfo}`
+
+    const totalTokens = this.totalInputTokens + this.totalOutputTokens
+    if (totalTokens > 0) {
+      const tokenStr = `\u25B4${this.totalInputTokens} \u25BE${this.totalOutputTokens}  ${totalTokens}`
+      const callsStr = `${this.totalApiCalls} calls`
+      const projectTag = this.projectName ? `${this.projectName} ` : ''
+      rightPart += `  ${colors.dim('|')}  ${colors.dim(`${projectTag}${tokenStr}  ${callsStr}`)}`
+    }
+
+    if (this.planCount > 0) {
+      rightPart += `  ${colors.dim('|')}  ${colors.accent(`${this.planCount} plan${this.planCount > 1 ? 's' : ''}`)}`
+      if (this.planName) rightPart += ` ${colors.dim(this.planName)}`
+    }
+
+    const line = ` ${appName}  ${colors.dim('·')}  ${rightPart}`
+    return [colors.headerBg(line), colors.dim('\u2500'.repeat(width))]
+  }
+}

package/src/tui/components/index.ts

@@ -0,0 +1,8 @@
+export { APP_VERSION, colors, landingColors, safeBg } from './colors.js'
+export { formatTokens, HeaderBar } from './header-bar.js'
+export { LandingScreen } from './landing-screen.js'
+export { PIXEL_LOGO_WIDTH, renderPixelLogo } from './pixel-logo.js'
+export { listPlans, loadTodos, PlanEntry, plansToItems } from './plan-utils.js'
+export { PlansList } from './plans-list.js'
+export { RichFooter } from './rich-footer.js'
+export { TodoPanel } from './todo-panel.js'

package/src/tui/components/landing-screen.ts

@@ -0,0 +1,67 @@
+import type { Component } from '../../pi-tui/index.js'
+import { visibleLen } from '../utils.js'
+import { APP_VERSION, colors } from './colors.js'
+import { PIXEL_LOGO_WIDTH, renderPixelLogo } from './pixel-logo.js'
+
+export class LandingScreen implements Component {
+  onSubmit?: (value: string) => void
+  private model: string
+  private provider: string
+
+  constructor(model: string, provider: string) {
+    this.model = model
+    this.provider = provider
+  }
+
+  invalidate(): void {}
+
+  handleInput(data: string): void {
+    if (data && this.onSubmit) {
+      this.onSubmit(data)
+    }
+  }
+
+  private visibleLen(s: string): number {
+    return visibleLen(s)
+  }
+
+  render(width: number): string[] {
+    const lines: string[] = []
+    const center = (text: string, totalWidth: number): string => {
+      const textWidth = this.visibleLen(text)
+      const pad = Math.max(0, Math.floor((totalWidth - textWidth) / 2))
+      return ' '.repeat(pad) + text
+    }
+
+    const logoLines = renderPixelLogo()
+    const logoPad = Math.max(0, Math.floor((width - PIXEL_LOGO_WIDTH) / 2))
+    const padStr = ' '.repeat(logoPad)
+
+    for (const line of logoLines) {
+      lines.push(padStr + line)
+    }
+
+    const divider = colors.dim('\u2500'.repeat(Math.min(36, width - 4)))
+    lines.push(center(divider, width))
+
+    lines.push('')
+    const prompt =
+      colors.dim('Type a message and press ') + colors.accent('Enter') + colors.dim(' to start')
+    lines.push(center(prompt, width))
+    lines.push('')
+
+    const cmds = [
+      colors.inputPrompt('/mode'),
+      colors.inputPrompt('/model'),
+      colors.inputPrompt('/plans'),
+      colors.inputPrompt('/help'),
+    ].join(colors.dim('  \u00B7  '))
+    lines.push(center(colors.dim('Commands: ') + cmds, width))
+
+    const modelInfo = colors.dim(`${this.provider}/${this.model}`)
+    const versionInfo = colors.dim(`v${APP_VERSION}`)
+    lines.push(center(modelInfo + colors.separator('  \u2502  ') + versionInfo, width))
+
+    return lines
+  }
+}

package/src/tui/components/pixel-logo.ts

@@ -0,0 +1,33 @@
+import { colors } from './colors.js'
+
+const PIXEL_FONT: Record<string, string[]> = {
+  L: ['█    ', '█    ', '█    ', '█    ', '█████'],
+  O: [' ███ ', '█   █', '█   █', '█   █', ' ███ '],
+  N: ['█   █', '██  █', '█ █ █', '█  ██', '█   █'],
+  Y: ['█   █', ' █ █ ', '  █  ', '  █  ', '  █  '],
+  C: [' ███ ', '█    ', '█    ', '█    ', ' ███ '],
+  D: ['███  ', '█  █ ', '█   █', '█  █ ', '███  '],
+  E: ['█████', '█    ', '███  ', '█    ', '█████'],
+}
+
+const LONNY_CHARS = ['L', 'O', 'N', 'N', 'Y']
+const CODE_CHARS = ['C', 'O', 'D', 'E']
+
+const PIXEL_LOGO_WIDTH = 54
+
+export { PIXEL_LOGO_WIDTH }
+
+function renderPixelLogo(): string[] {
+  const midGray = '\x1b[38;2;160;160;160m'
+  const brightWhite = '\x1b[38;2;255;255;255m'
+  const reset = '\x1b[0m'
+  const lines: string[] = []
+  for (let row = 0; row < 5; row++) {
+    const lonnyPart = LONNY_CHARS.map(ch => PIXEL_FONT[ch][row]).join(' ')
+    const codePart = CODE_CHARS.map(ch => PIXEL_FONT[ch][row]).join(' ')
+    lines.push(`${midGray + lonnyPart}  ${brightWhite}${codePart}${reset}`)
+  }
+  return lines
+}
+
+export { renderPixelLogo }

package/src/tui/components/plan-utils.ts

@@ -0,0 +1,69 @@
+import * as fs from 'node:fs'
+import * as path from 'node:path'
+import type { SelectItem } from '../../pi-tui/index.js'
+import { PLAN_DIR } from '../../tools/edit/write_plan.js'
+import { colors } from './colors.js'
+
+export interface PlanEntry {
+  name: string
+  description: string
+  fullPath: string
+  mtime: number
+}
+
+export function listPlans(cwd: string): PlanEntry[] {
+  const planDir = path.resolve(cwd, PLAN_DIR)
+  try {
+    const files = fs.readdirSync(planDir)
+    return files
+      .filter(f => f.endsWith('.md'))
+      .map(f => {
+        const fullPath = path.join(planDir, f)
+        let mtime = 0
+        try {
+          mtime = fs.statSync(fullPath).mtimeMs
+        } catch {
+          /* ignore */
+        }
+        return {
+          name: f.replace(/\.md$/, ''),
+          description: f,
+          fullPath,
+          mtime,
+        }
+      })
+      .sort((a, b) => b.mtime - a.mtime)
+  } catch {
+    return []
+  }
+}
+
+export function loadTodos(filePath: string): string {
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8')
+    const lines = content.split('\n')
+    const todos: string[] = []
+    for (const raw of lines) {
+      const line = raw.trim()
+      const m = line.match(/^- \[([ x])\]\s+(.+)/)
+      if (m) {
+        const done = m[1] === 'x'
+        const check = done ? '\u2705' : '\u2B1C'
+        todos.push(`${check} ${done ? colors.doneTodo(m[2]) : colors.todo(m[2])}`)
+      }
+    }
+    return todos.length > 0 ? todos.join('\n') : '(no todo items)'
+  } catch {
+    return '(no plan selected)'
+  }
+}
+
+export function plansToItems(plans: PlanEntry[]): SelectItem[] {
+  return plans.map(p => ({
+    value: p.name,
+    label: p.name,
+    description: p.mtime
+      ? `${new Date(p.mtime).toLocaleDateString()} ${new Date(p.mtime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
+      : '',
+  }))
+}

package/src/tui/components/plans-list.ts

@@ -0,0 +1,55 @@
+import type { Component, SelectItem, SelectListTheme } from '../../pi-tui/index.js'
+import { SelectList } from '../../pi-tui/index.js'
+
+export class PlansList implements Component {
+  private selectList: SelectList
+  private allItems: SelectItem[]
+  private maxVisible: number
+  private theme: SelectListTheme
+  onSelectionChange?: (item: SelectItem) => void
+
+  constructor(items: SelectItem[], maxVisible: number, theme: SelectListTheme) {
+    this.allItems = items
+    this.selectList = new SelectList(items, maxVisible, theme)
+    this.maxVisible = maxVisible
+    this.theme = theme
+    this.selectList.onSelectionChange = item => {
+      if (this.onSelectionChange) this.onSelectionChange(item)
+    }
+  }
+
+  setFilter(filter: string): void {
+    this.selectList.setFilter(filter)
+  }
+
+  clearFilter(): void {
+    this.selectList.setFilter('')
+  }
+
+  refresh(items: SelectItem[]): void {
+    this.allItems = items
+    const cb = this.onSelectionChange
+    this.selectList = new SelectList(items, this.maxVisible, this.theme)
+    this.selectList.onSelectionChange = cb
+  }
+
+  getSelectedItem(): SelectItem | null {
+    return this.selectList.getSelectedItem()
+  }
+
+  setSelectedIndex(index: number): void {
+    this.selectList.setSelectedIndex(index)
+  }
+
+  invalidate(): void {
+    this.selectList.invalidate()
+  }
+
+  render(width: number): string[] {
+    return this.selectList.render(width)
+  }
+
+  handleInput(data: string): void {
+    this.selectList.handleInput(data)
+  }
+}

package/src/tui/components/rich-footer.ts

@@ -0,0 +1,146 @@
+import type { Component } from '../../pi-tui/index.js'
+import { visibleLen } from '../utils.js'
+import { APP_VERSION, colors, landingColors } from './colors.js'
+import { formatTokens } from './header-bar.js'
+
+export class RichFooter implements Component {
+  private cwd: string
+  private mode: string = 'code'
+  private model: string = ''
+  private provider: string = ''
+  private totalInputTokens: number = 0
+  private totalOutputTokens: number = 0
+  private totalApiCalls: number = 0
+  private balance: string = ''
+  private webBalance: string = ''
+  private visible = true
+  private phase: 'landing' | 'chat' = 'landing'
+  private agentStatus: 'running' | 'idle' = 'idle'
+
+  constructor(cwd: string, model: string, provider: string) {
+    this.cwd = cwd
+    this.model = model
+    this.provider = provider
+  }
+
+  setMode(m: string): void {
+    this.mode = m
+  }
+  setModel(model: string, provider: string): void {
+    this.model = model
+    this.provider = provider
+  }
+  setTokenUsage(inputTokens: number, outputTokens: number, apiCalls: number): void {
+    this.totalInputTokens = inputTokens
+    this.totalOutputTokens = outputTokens
+    this.totalApiCalls = apiCalls
+  }
+  setVisible(v: boolean): void {
+    this.visible = v
+  }
+  setPhase(p: 'landing' | 'chat'): void {
+    this.phase = p
+  }
+  setBalance(b: string): void {
+    this.balance = b
+  }
+  setWebBalance(wb: string): void {
+    this.webBalance = wb
+  }
+  setAgentStatus(s: 'running' | 'idle'): void {
+    this.agentStatus = s
+  }
+
+  invalidate(): void {}
+  handleInput?(_data: string): void {}
+
+  private visibleLen(s: string): number {
+    return visibleLen(s)
+  }
+
+  render(width: number): string[] {
+    if (!this.visible || width < 40) return []
+
+    const { statusBg, statusText, statusAccent, reset } = landingColors
+
+    const dir = this.cwd.length > 30 ? `...${this.cwd.slice(-27)}` : this.cwd
+    const leftPart = `${statusAccent}\u25A0${reset}${statusBg}${statusText} ${dir}${reset}`
+
+    if (this.phase === 'landing') {
+      const centerPart = `${statusBg + statusText}  ready  ${reset}`
+      const rightPart = `${statusBg + statusText}v${APP_VERSION} ${reset}`
+      const line = leftPart + centerPart + rightPart
+      const visLen = this.visibleLen(line)
+      const padded = visLen < width ? line + statusBg + ' '.repeat(width - visLen) + reset : line
+      return [padded]
+    }
+
+    const segments: string[] = []
+
+    const statusDot =
+      this.agentStatus === 'running'
+        ? `\x1b[38;2;0;255;100m\u25CF\x1b[0m`
+        : `\x1b[38;2;150;150;150m\u25CB\x1b[0m`
+    const statusLabel =
+      this.agentStatus === 'running'
+        ? `\x1b[38;2;0;255;100mrunning\x1b[0m`
+        : `\x1b[38;2;150;150;150midle\x1b[0m`
+    segments.push(`${statusDot} ${statusLabel}`)
+
+    const modeTag =
+      this.mode === 'plan'
+        ? `\x1b[38;2;255;200;50m${this.mode}\x1b[0m`
+        : this.mode === 'ask'
+          ? `\x1b[38;2;0;200;100m${this.mode}\x1b[0m`
+          : this.mode === 'loop'
+            ? `\x1b[38;2;200;100;255m${this.mode}\x1b[0m`
+            : `\x1b[38;2;0;200;255m${this.mode}\x1b[0m`
+    segments.push(modeTag)
+
+    if (this.model) {
+      segments.push(`\x1b[38;2;110;110;110m${this.provider}/${this.model}\x1b[0m`)
+    }
+
+    const totalTokens = this.totalInputTokens + this.totalOutputTokens
+    if (totalTokens > 0) {
+      const tokenStr = `\u25B4${formatTokens(this.totalInputTokens)} \u25BE${formatTokens(this.totalOutputTokens)}  ${formatTokens(totalTokens)}`
+      segments.push(`\x1b[38;2;110;110;110m${tokenStr}\x1b[0m`)
+      segments.push(`\x1b[38;2;110;110;110m${this.totalApiCalls}c\x1b[0m`)
+    }
+
+    if (this.webBalance) {
+      segments.push(`\x1b[38;2;255;200;50m\u4F59\u989D\x1b[0m\uFF1A${this.webBalance}`)
+    } else if (this.balance) {
+      segments.push(`\x1b[38;2;255;200;50m\u4F59\u989D\x1b[0m\uFF1A${this.balance}`)
+    }
+
+    const separator = `${statusBg} \x1b[38;2;60;60;60m\u2502\x1b[0m ${reset}`
+    const centerContent = `${statusBg + statusText}  ${segments.join(separator)}  ${reset}`
+
+    const rightPart = `${statusBg + statusText}v${APP_VERSION} ${reset}`
+
+    const line = leftPart + centerContent + rightPart
+
+    const lineLen = line.length - 2 * statusBg.length - reset.length
+    let result = line
+    if (lineLen < width - 40) {
+      const hints = [
+        '\x1b[38;2;110;110;110m/mode\x1b[0m',
+        '\x1b[38;2;110;110;110m/plans\x1b[0m',
+        '\x1b[38;2;110;110;110m/help\x1b[0m',
+        '\x1b[38;2;110;110;110m?\x1b[0m',
+      ].join(' \x1b[38;2;60;60;60m\u00b7\x1b[0m ')
+      const hintStr = `${statusBg + statusText}  ${hints}  ${reset}`
+      const fullLine = line + hintStr
+      const approxLen = fullLine.replace(/\x1b\[[0-9;]*m/g, '').length
+      if (approxLen <= width) {
+        result = fullLine
+      }
+    }
+
+    const visLen = this.visibleLen(result)
+    const padded = visLen < width ? result + statusBg + ' '.repeat(width - visLen) + reset : result
+
+    return [padded]
+  }
+}

package/src/tui/components/todo-panel.ts

@@ -0,0 +1,95 @@
+import * as fs from 'node:fs'
+import type { Component } from '../../pi-tui/index.js'
+import { visibleLen } from '../utils.js'
+import { colors } from './colors.js'
+import { listPlans, type PlanEntry } from './plan-utils.js'
+
+export class TodoPanel implements Component {
+  private cwd: string
+  private todos: { text: string; done: boolean }[] = []
+  private planName: string = ''
+  private dirty: boolean = true
+
+  constructor(cwd: string) {
+    this.cwd = cwd
+  }
+
+  refresh(): void {
+    this.dirty = true
+  }
+
+  invalidate(): void {
+    this.dirty = true
+  }
+
+  private load(): void {
+    this.dirty = false
+    const plans = listPlans(this.cwd)
+    if (plans.length === 0) {
+      this.todos = []
+      this.planName = ''
+      return
+    }
+    const plan = plans[0]
+    this.planName = plan.name
+    this.todos = []
+    try {
+      const content = fs.readFileSync(plan.fullPath, 'utf-8')
+      const lines = content.split('\n')
+      for (const line of lines) {
+        const m = line.trim().match(/^- \[([ x])\]\s+(.+)/)
+        if (m) {
+          this.todos.push({ text: m[2], done: m[1] === 'x' })
+        }
+      }
+    } catch {
+      // ignore file read errors
+    }
+  }
+
+  private visibleLen(s: string): number {
+    return visibleLen(s)
+  }
+
+  render(width: number): string[] {
+    if (this.dirty) this.load()
+
+    const lines: string[] = []
+
+    const headerText = ` ${colors.accent('\u25B6')} TODO`
+    const headerPadding = Math.max(0, width - this.visibleLen(headerText))
+    lines.push(colors.bgDark(headerText + ' '.repeat(headerPadding)))
+
+    lines.push(colors.separator('\u2500'.repeat(width)))
+
+    if (!this.planName) {
+      lines.push(colors.dim('  (no plan)'))
+      return lines
+    }
+
+    if (this.todos.length === 0) {
+      lines.push(colors.dim('  (no todos)'))
+      return lines
+    }
+
+    const contentWidth = width - 3
+    for (const todo of this.todos) {
+      const icon = todo.done ? '\u2705' : '\u2B1C'
+      const textStyle = todo.done ? colors.doneTodo : colors.todo
+      const text = todo.text
+      const maxTextLen = contentWidth - 1
+      let truncated = text
+      let textVisLen = this.visibleLen(textStyle(text))
+      if (textVisLen > maxTextLen) {
+        truncated = `${text.slice(0, maxTextLen - 1)}\u2026`
+        textVisLen = maxTextLen
+      }
+      const line = ` ${icon} ${textStyle(truncated)}`
+      const visLen = this.visibleLen(line)
+      const padding = Math.max(0, width - visLen)
+      lines.push(line + ' '.repeat(padding))
+    }
+
+    return lines
+  }
+}