lonny-agent 0.2.6 → 0.2.7

package/src/tui/commands.ts

@@ -0,0 +1,135 @@
+import type { CommandUI } from '../agent/commands.js'
+import { dispatchCommand } from '../agent/commands.js'
+import { fmtErr } from '../tools/errors.js'
+import { colors } from './components/index.js'
+import type { TuiContext } from './overlays.js'
+import {
+  refreshBalance,
+  refreshPlans,
+  showHelpOverlay,
+  showPlansOverlay,
+  updateFooter,
+} from './overlays.js'
+
+export function handleConfirmInput(ctx: TuiContext, data: string): boolean {
+  if (!ctx.pendingConfirmResolve) return false
+  const key = data.trim().toLowerCase()
+  if (key === 'y' || key === 'yes') {
+    ctx.pendingConfirmResolve(true)
+    ctx.pendingConfirmResolve = null
+    ctx.chatContent += 'y\n'
+    ctx.chatMarkdown.setText(ctx.chatContent)
+    ctx.tui.requestRender(true)
+    return true
+  } else if (key === 'n' || key === 'no' || key === '\r' || key === '') {
+    ctx.pendingConfirmResolve(false)
+    ctx.pendingConfirmResolve = null
+    ctx.chatContent += 'N\n'
+    ctx.chatMarkdown.setText(ctx.chatContent)
+    ctx.tui.requestRender(true)
+    return true
+  }
+  return false
+}
+
+function makeCommandUI(ctx: TuiContext): CommandUI {
+  return {
+    write: (text: string) => {
+      ctx.chatContent += '\n' + text + '\n'
+      ctx.chatMarkdown.setText(ctx.chatContent)
+    },
+    replaceContent: (text: string) => {
+      ctx.chatContent = text
+      ctx.chatMarkdown.setText(text)
+    },
+    onStateChange: () => {
+      updateFooter(ctx)
+    },
+    onNewSession: (session: any) => {
+      ctx.session = session
+      ctx.session.onPlanWritten = ctx.planCb
+      ctx.plansList.clearFilter()
+      ;(ctx.editor as any).undoStack.clear()
+      ;(ctx.editor as any).history = []
+      ;(ctx.editor as any).killRing.ring = []
+    },
+  }
+}
+
+export async function sendMessage(ctx: TuiContext, text: string): Promise<void> {
+  const trimmed = text.trim()
+  if (!trimmed) return
+  ctx.editor.setText('')
+  ctx.editor.addToHistory(trimmed)
+
+  if (trimmed.startsWith('/')) {
+    const parts = trimmed.slice(1).split(/\s+/)
+    const cmd = parts[0]
+    const arg = parts.slice(1).join(' ')
+
+    // TUI-specific commands
+    if (cmd === 'exit' || cmd === 'quit') {
+      ctx.chatContent += `\n${colors.dim('Goodbye!')}\n`
+      ctx.chatMarkdown.setText(ctx.chatContent)
+      ctx.tui.stop()
+      process.exit(0)
+      return
+    }
+    if (cmd === 'plans') {
+      showPlansOverlay(ctx)
+      return
+    }
+    if (cmd === 'filter') {
+      ctx.plansList.setFilter(arg)
+      ctx.tui.requestRender(true)
+      return
+    }
+    if (cmd === 'help' || cmd === '?') {
+      showHelpOverlay(ctx)
+      return
+    }
+
+    // Shared commands
+    const ui = makeCommandUI(ctx)
+    const handled = await dispatchCommand(
+      { session: ctx.session, config: ctx.config, ui, isRunning: ctx.isRunning },
+      cmd,
+      arg,
+    )
+    if (handled) {
+      ctx.tui.requestRender(true)
+      return
+    }
+
+    ctx.chatContent += `\n${colors.error('\u2716')} Unknown command: /${cmd}. ${colors.dim('Type /help for available commands.')}\n`
+    ctx.chatMarkdown.setText(ctx.chatContent)
+    return
+  }
+
+  if (ctx.isRunning) return
+
+  ctx.isRunning = true
+  ctx.loader.setMessage('thinking...')
+  ctx.tui.setShowHardwareCursor(false)
+  updateFooter(ctx)
+
+  ctx.session
+    .chat(trimmed)
+    .then(() => {
+      ctx.isRunning = false
+      ctx.loader.setMessage('')
+      refreshPlans(ctx)
+      ctx.tui.setShowHardwareCursor(true)
+      updateFooter(ctx)
+      refreshBalance(ctx)
+    })
+    .catch((err: unknown) => {
+      ctx.isRunning = false
+      ctx.loader.setMessage('')
+      const errMsg = fmtErr(err)
+      ctx.chatContent += `\n${colors.error('\u2716 Error:')} ${errMsg}\n`
+      ctx.chatMarkdown.setText(ctx.chatContent)
+      ctx.tui.setShowHardwareCursor(true)
+      updateFooter(ctx)
+    })
+}

package/src/tui/components/colors.ts

@@ -0,0 +1,52 @@
+import * as fs from 'node:fs'
+
+function safeBg(text: string, bg: string): string {
+  return `\x1b[${bg}m${text.replace(/\x1b\[0m/g, `\x1b[0m\x1b[${bg}m`)}\x1b[0m`
+}
+
+export { safeBg }
+
+export const colors = {
+  bgDark: (text: string) => safeBg(text, '48;2;30;30;30'),
+  bgDim: (text: string) => safeBg(text, '48;2;25;25;25'),
+  headerBg: (text: string) => safeBg(text, '48;2;170;170;170'),
+  separator: (text: string) => `\x1b[38;2;60;60;60m${text}\x1b[0m`,
+  statusBg: (text: string) => safeBg(text, '48;2;25;25;35'),
+  running: (text: string) => `\x1b[38;2;0;255;100m${text}\x1b[0m`,
+  idle: (text: string) => `\x1b[38;2;150;150;150m${text}\x1b[0m`,
+  doneTodo: (text: string) => `\x1b[38;2;100;200;100m${text}\x1b[0m`,
+  todo: (text: string) => `\x1b[38;2;150;150;150m${text}\x1b[0m`,
+  accent: (text: string) => `\x1b[38;2;0;170;255m${text}\x1b[0m`,
+  dim: (text: string) => `\x1b[38;2;90;90;90m${text}\x1b[0m`,
+  userLabel: (text: string) => `\x1b[38;2;255;200;50m${text}\x1b[0m`,
+  assistantLabel: (text: string) => `\x1b[38;2;0;255;150m${text}\x1b[0m`,
+  error: (text: string) => `\x1b[38;2;255;80;80m${text}\x1b[0m`,
+  success: (text: string) => `\x1b[38;2;0;200;100m${text}\x1b[0m`,
+  inputPrompt: (text: string) => `\x1b[38;2;0;170;255m${text}\x1b[0m`,
+  warn: (text: string) => `\x1b[38;2;255;200;50m${text}\x1b[0m`,
+}
+
+const APP_VERSION: string = (() => {
+  try {
+    const pkgPath = new URL('../../package.json', import.meta.url)
+    const raw = fs.readFileSync(pkgPath, 'utf-8')
+    return JSON.parse(raw).version || '0.1.0'
+  } catch {
+    return '0.1.0'
+  }
+})()
+
+export { APP_VERSION }
+
+export const landingColors = {
+  inputBg: '\x1b[48;2;35;35;35m',
+  inputBorder: '\x1b[38;2;60;60;60m',
+  cyanBar: '\x1b[38;2;0;200;255m',
+  placeholderDim: '\x1b[38;2;130;130;130m',
+  placeholderQuote: '\x1b[38;2;160;160;160m',
+  inputText: '\x1b[38;2;220;220;220m',
+  statusBg: '\x1b[48;2;18;18;18m',
+  statusText: '\x1b[38;2;110;110;110m',
+  statusAccent: '\x1b[38;2;0;170;255m',
+  reset: '\x1b[0m',
+}

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]
+  }
+}