lonny-agent 0.2.6 → 0.2.7

package/src/tui/overlays.ts

@@ -0,0 +1,203 @@
+import { loadTokenUsage } from '../config/tokens.js'
+import { Box, Container, Text } from '../pi-tui/index.js'
+import { fetchDeepSeekBalance, isDeepSeekOfficial } from './balance.js'
+import { colors, listPlans, loadTodos, plansToItems } from './components/index.js'
+
+export interface TuiContext {
+  tui: any
+  editor: any
+  loader: any
+  footer: any
+  chatMarkdown: any
+  plansList: any
+  todoPanel: any
+  session: any
+  config: any
+  output: any
+
+  chatContent: string
+  isRunning: boolean
+  pendingConfirmResolve: ((approved: boolean) => void) | null
+
+  plansOverlayHandle: any
+  helpOverlayHandle: any
+  todoPanelHandle: any
+
+  plansDetailMode: boolean
+
+  planCb: () => void
+}
+
+export function showTodoPanel(ctx: TuiContext): void {
+  ctx.todoPanel.refresh()
+  const box = new Box(0, 0, colors.bgDark)
+  box.addChild(ctx.todoPanel)
+  ctx.todoPanelHandle = ctx.tui.showOverlay(box, {
+    anchor: 'top-right',
+    offsetY: 2,
+    width: 36,
+    maxHeight: '70%',
+    offsetX: -1,
+    nonCapturing: true,
+    visible: (w: number) => w >= 110,
+  })
+}
+
+export function showPlansOverlay(ctx: TuiContext): void {
+  if (ctx.plansOverlayHandle?.isHidden() === false) {
+    ctx.plansOverlayHandle.hide()
+    ctx.plansOverlayHandle = null
+    ctx.plansDetailMode = false
+    return
+  }
+  ctx.plansDetailMode = false
+  const plans = listPlans(ctx.config.cwd)
+  ctx.plansList.refresh(plansToItems(plans))
+
+  const headerText = new Text(
+    ` ${colors.accent('\u25B6')} Plans (${plans.length})  ${colors.dim('Enter=view')}`,
+    1,
+    0,
+    colors.headerBg,
+  )
+  const container = new Container()
+  container.addChild(headerText)
+  if (plans.length > 0) {
+    container.addChild(ctx.plansList)
+  } else {
+    container.addChild(new Text('  (no plans yet)', 1, 0, colors.dim))
+  }
+
+  const box = new Box(1, 1, colors.bgDark)
+  box.addChild(container)
+
+  ctx.plansOverlayHandle = ctx.tui.showOverlay(box, {
+    anchor: 'right-center',
+    width: 45,
+    maxHeight: '70%',
+    offsetX: -1,
+  })
+}
+
+export function showPlanDetail(ctx: TuiContext): void {
+  if (!ctx.plansOverlayHandle || ctx.plansOverlayHandle.isHidden()) return
+  const sel = ctx.plansList.getSelectedItem()
+  if (!sel) return
+
+  ctx.plansDetailMode = true
+  const plans = listPlans(ctx.config.cwd)
+  const plan = plans.find(p => p.name === sel.value)
+  if (!plan) return
+
+  const todos = loadTodos(plan.fullPath)
+  const headerText = new Text(
+    ` ${colors.accent('\u25B6')} ${colors.warn(plan.name)}  ${colors.dim('Esc=back')}`,
+    1,
+    0,
+    colors.headerBg,
+  )
+  const todosText = new Text(`\n  ${todos}\n`, 1, 0)
+  const container = new Container()
+  container.addChild(headerText)
+  container.addChild(todosText)
+
+  const box = new Box(1, 1, colors.bgDark)
+  box.addChild(container)
+
+  ctx.plansOverlayHandle.hide()
+  ctx.plansOverlayHandle = ctx.tui.showOverlay(box, {
+    anchor: 'right-center',
+    width: 50,
+    maxHeight: '80%',
+    offsetX: -1,
+  })
+}
+
+export function showHelpOverlay(ctx: TuiContext): void {
+  if (ctx.helpOverlayHandle?.isHidden() === false) {
+    ctx.helpOverlayHandle.hide()
+    ctx.helpOverlayHandle = null
+    return
+  }
+  const helpContent =
+    colors.accent('\u2501').repeat(20) +
+    '\n' +
+    ` ${colors.accent('lonny')} ${colors.dim('TUI Help')}\n` +
+    colors.accent('\u2501').repeat(20) +
+    '\n\n' +
+    ` ${colors.dim('Commands:')}\n` +
+    ` ${colors.inputPrompt('/mode')} code|plan|ask|loop  ${colors.dim('Switch mode')}\n` +
+    `   ${colors.inputPrompt('/model')} <name>    ${colors.dim('Switch model')}\n` +
+    `   ${colors.inputPrompt('/plans')}          ${colors.dim('Show plans overlay')}\n` +
+    `   ${colors.inputPrompt('/sessions')}       ${colors.dim('List saved sessions')}\n` +
+    `   ${colors.inputPrompt('/session')} [id]   ${colors.dim('Session info / delete / title')}\n` +
+    `   ${colors.inputPrompt('/fork')}           ${colors.dim('Branch a new session')}\n` +
+    `   ${colors.inputPrompt('/new')}            ${colors.dim('Start a new session')}\n` +
+    `   ${colors.inputPrompt('/prompts')}        ${colors.dim('List prompt templates')}\n` +
+    `   ${colors.inputPrompt('/skills')}         ${colors.dim('List active skills')}\n` +
+    `   ${colors.inputPrompt('/init')}           ${colors.dim('Create .lonny/skills/ & prompts/')}\n` +
+    `   ${colors.inputPrompt('/stop')}           ${colors.dim('Stop the running agent')}\n` +
+    `   ${colors.inputPrompt('/exit')}           ${colors.dim('Exit')}\n` +
+    `   ${colors.inputPrompt('/help')}           ${colors.dim('This help')}\n\n` +
+    ` ${colors.dim('Keyboard:')}\n` +
+    `   ${colors.dim('Enter')}        ${colors.dim('Send message')}\n` +
+    `   ${colors.dim('↑/↓')}          ${colors.dim('Navigate history')}\n` +
+    `   ${colors.dim('Tab')}          ${colors.dim('Autocomplete')}\n` +
+    `   ${colors.dim('?')}            ${colors.dim('Toggle this help')}\n\n` +
+    colors.accent('\u2501').repeat(20)
+  const helpText = new Text(helpContent, 1, 0)
+  const helpBox = new Box(1, 1, colors.bgDark)
+  helpBox.addChild(helpText)
+  ctx.helpOverlayHandle = ctx.tui.showOverlay(helpBox, {
+    anchor: 'center',
+    width: 46,
+    maxHeight: 22,
+  })
+}
+
+export function updateFooter(ctx: TuiContext): void {
+  const plans = listPlans(ctx.config.cwd)
+  ctx.footer.setAgentStatus(ctx.isRunning ? 'running' : 'idle')
+  ctx.footer.setMode(
+    ctx.session?.config.mode === 'plan'
+      ? 'plan'
+      : ctx.session?.config.mode === 'ask'
+        ? 'ask'
+        : ctx.session?.config.mode === 'loop'
+          ? 'loop'
+          : 'code',
+  )
+  ctx.footer.setModel(ctx.config.model, ctx.config.provider)
+  const tokenStats = loadTokenUsage(ctx.config.cwd)
+  ctx.footer.setTokenUsage(
+    tokenStats.totalInputTokens,
+    tokenStats.totalOutputTokens,
+    tokenStats.totalApiCalls,
+  )
+  ctx.tui.requestRender(true)
+}
+
+export function refreshPlans(ctx: TuiContext): void {
+  const plans = listPlans(ctx.config.cwd)
+  ctx.plansList.refresh(plansToItems(plans))
+  ctx.todoPanel.refresh()
+  updateFooter(ctx)
+}
+
+export async function refreshBalance(ctx: TuiContext): Promise<void> {
+  try {
+    if (isDeepSeekOfficial(ctx.config.baseUrl) && ctx.config.apiKey) {
+      const balance = await fetchDeepSeekBalance(ctx.config.apiKey)
+      if (balance.isAvailable && balance.display) {
+        ctx.footer.setBalance(balance.display)
+        ctx.footer.setWebBalance(balance.webDisplay)
+      } else {
+        ctx.footer.setBalance('')
+        ctx.footer.setWebBalance('')
+      }
+      ctx.tui.requestRender(true)
+    }
+  } catch {
+    // Silently ignore
+  }
+}

package/src/tui/themes.ts

@@ -0,0 +1,41 @@
+import type { EditorTheme, MarkdownTheme, SelectListTheme } from '../pi-tui/index.js'
+import { colors } from './components/index.js'
+import { highlightLine } from './highlight.js'
+
+export const markdownTheme: MarkdownTheme = {
+  heading: t => `\x1b[38;2;0;170;255m\x1b[1m${t}\x1b[0m`,
+  link: t => `\x1b[38;2;0;170;255m\x1b[4m${t}\x1b[0m`,
+  linkUrl: t => `\x1b[38;2;90;90;90m\x1b[4m${t}\x1b[0m`,
+  code: t => `\x1b[38;2;255;180;50m${t}\x1b[0m`,
+  codeBlock: t => `\x1b[38;2;200;200;200m${t}\x1b[0m`,
+  codeBlockBorder: t => `\x1b[38;2;60;60;60m${t}\x1b[0m`,
+  highlightCode: (code: string, lang?: string) => {
+    if (lang && lang.trim()) {
+      const lines = code.split('\n')
+      return lines.map(line => highlightLine(line, lang))
+    }
+    return code.split('\n')
+  },
+  codeBlockIndent: '  ',
+  quote: t => `\x1b[38;2;130;130;130m${t}\x1b[0m`,
+  quoteBorder: t => `\x1b[38;2;60;60;60m${t}\x1b[0m`,
+  hr: t => `\x1b[38;2;60;60;60m${t}\x1b[0m`,
+  listBullet: t => `\x1b[38;2;130;130;130m${t}\x1b[0m`,
+  bold: t => `\x1b[1m${t}\x1b[0m`,
+  italic: t => `\x1b[3m${t}\x1b[0m`,
+  strikethrough: t => `\x1b[9m${t}\x1b[0m`,
+  underline: t => `\x1b[4m${t}\x1b[0m`,
+}
+
+export const selectTheme: SelectListTheme = {
+  selectedPrefix: t => `\x1b[38;2;255;255;255m\x1b[48;2;0;128;255m ${t}\x1b[0m`,
+  selectedText: t => `\x1b[38;2;255;255;255m\x1b[48;2;0;128;255m${t}\x1b[0m`,
+  description: t => `\x1b[90m${t}\x1b[0m`,
+  scrollInfo: t => `\x1b[90m${t}\x1b[0m`,
+  noMatch: t => `\x1b[38;2;255;100;100m${t}\x1b[0m`,
+}
+
+export const editorTheme: EditorTheme = {
+  borderColor: (str: string) => colors.accent(str),
+  selectList: selectTheme,
+}

package/src/web/index.ts

@@ -3,15 +3,13 @@ import * as http from 'node:http'
 import * as path from 'node:path'
 import * as url from 'node:url'
 import { type WebSocket, WebSocketServer } from 'ws'
+import { type CommandUI, dispatchCommand } from '../agent/commands.js'
 import { resetGlobalEventBus } from '../agent/event-bus.js'
-import { ensurePromptsDir, loadPromptTemplates } from '../agent/prompt-templates.js'
 import { Session, type SessionOutput } from '../agent/session.js'
-import { ensureSkillsDir, loadSkills } from '../agent/skills.js'
 import type { Config } from '../config/index.js'
-import { resetTokenUsage } from '../config/tokens.js'
 import { fmtErr } from '../tools/errors.js'
 import { fetchDeepSeekBalance, isDeepSeekOfficial } from '../tui/balance.js'
-import { listPlans, type PlanEntry } from '../tui/components.js'
+import { listPlans, type PlanEntry } from '../tui/components/index.js'
 import { startSessionBridge, type WsMessage } from './session-bridge.js'
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
@@ -95,8 +93,8 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
     // Reset event bus for new session
     resetGlobalEventBus()
 
-    const session = (await Session.load(config)) || new Session(config)
     let bridge: ReturnType<typeof startSessionBridge> | null = null
+    let sessionWithOutput!: Session
 
     // Track output to forward to WebSocket
     // Strip ANSI codes since they are meaningless in the browser
@@ -149,12 +147,8 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
       },
     }
 
-    // Re-create session with output
-    let sessionWithOutput = (await Session.load(config, output)) || new Session(config, output)
-    sessionWithOutput.messages = session.messages
-    sessionWithOutput.totalInputTokens = session.totalInputTokens
-    sessionWithOutput.totalOutputTokens = session.totalOutputTokens
-    sessionWithOutput.totalApiCalls = session.totalApiCalls
+    // Load or create session with output for WebSocket forwarding
+    sessionWithOutput = (await Session.load(config, output)) || new Session(config, output)
 
     // Helper: read todos from a specific plan file (or first plan if no name given)
     function loadPlanTodos(
@@ -171,18 +165,11 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
       try {
         const content = fs.readFileSync(plan.fullPath, 'utf-8')
         const lines = content.split('\n')
-        let inTodo = false
-        for (const line of lines) {
-          if (line.startsWith('## Todo List')) {
-            inTodo = true
-            continue
-          }
-          if (inTodo && line.startsWith('## ')) break
-          if (inTodo) {
-            const m = line.trim().match(/^- \[([ x])\]\s+(.+)/)
-            if (m) {
-              todos.push({ text: m[2], done: m[1] === 'x' })
-            }
+        for (const raw of lines) {
+          const line = raw.trim()
+          const m = line.match(/^- \[([ x])\]\s+(.+)/)
+          if (m) {
+            todos.push({ text: m[2], done: m[1] === 'x' })
           }
         }
       } catch {
@@ -238,47 +225,32 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
             const cmd = parts[0]
             const arg = parts.slice(1).join(' ')
 
-            if (cmd === 'mode' && (arg === 'code' || arg === 'plan' || arg === 'ask')) {
-              await sessionWithOutput.setMode(arg as 'code' | 'plan' | 'ask')
-              ws.send(JSON.stringify({ type: 'mode_changed', mode: arg }))
-              return
-            }
-
-            if (cmd === 'model' && arg) {
-              sessionWithOutput.config.model = arg
-              await sessionWithOutput.setMode(sessionWithOutput.config.mode)
-              ws.send(JSON.stringify({ type: 'model_changed', model: arg }))
+            // Web-specific commands
+            if (cmd === 'help') {
+              ws.send(
+                JSON.stringify({
+                  type: 'help',
+                  commands: [
+                    '/mode <code|plan|ask|loop> - Switch mode',
+                    '/model <name> - Switch model',
+                    '/new - Start a new session',
+                    '/stop - Stop the running agent',
+                    '/skills - List active skills',
+                    '/prompts - List prompt templates',
+                    '/init - Create .lonny/skills/ & prompts/',
+                    '/help - Show this help',
+                  ],
+                }),
+              )
               return
             }
 
-            if (cmd === 'new') {
-              // Stop any running agent first
-              sessionWithOutput.stop()
-              // Close old bridge
-              if (bridge) bridge.close()
-              // Clear persisted state
-              Session.clearSavedSession(config.cwd)
-              resetTokenUsage(config.cwd)
-              resetGlobalEventBus()
-              // Create fresh session with empty context
-              sessionWithOutput = new Session(config, output)
-              sessionWithOutput.onPlanWritten = (display: string) => {
-                ws.send(JSON.stringify({ type: 'plan_written', display }))
-                sendPlanData()
-              }
-              // Create new bridge for the fresh session
-              bridge = startSessionBridge(sessionWithOutput, config, (msg: WsMessage) => {
-                if (ws.readyState === ws.OPEN) {
-                  ws.send(JSON.stringify(msg))
-                }
-              })
-              // Reset pending confirmation state
-              pendingConfirm = null
-              ws.send(JSON.stringify({ type: 'session_cleared' }))
-              ws.send(JSON.stringify({ type: 'done', reason: 'stop' }))
+            if (cmd === 'exit' || cmd === 'quit') {
+              ws.close()
               return
             }
 
+            // Web-specific stop (always works, no isRunning check)
             if (cmd === 'stop') {
               sessionWithOutput.stop()
               ws.send(JSON.stringify({ type: 'chunk', text: '\nStopped.\n' }))
@@ -286,82 +258,46 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
               return
             }
 
-            if (cmd === 'skills') {
-              const skills = loadSkills(config.cwd)
-              if (skills.length === 0) {
-                ws.send(
-                  JSON.stringify({
-                    type: 'chunk',
-                    text: 'No skills loaded. Create .md files in .lonny/skills/ or run install_superpowers.',
-                  }),
-                )
-              } else {
-                let msg = `Active Skills (${skills.length}):\n`
-                for (const s of skills) {
-                  msg += `  \u2022 ${s.name}`
-                  if (s.description) msg += ` - ${s.description}`
-                  msg += '\n'
+            // Shared commands via CommandUI
+            const ui: CommandUI = {
+              write: (text: string) => {
+                ws.send(JSON.stringify({ type: 'chunk', text: stripAnsi(text) }))
+              },
+              replaceContent: () => {
+                ws.send(JSON.stringify({ type: 'session_cleared' }))
+              },
+              onStateChange: () => {},
+              onNewSession: (session: Session) => {
+                sessionWithOutput = session
+                sessionWithOutput.onPlanWritten = (display: string) => {
+                  ws.send(JSON.stringify({ type: 'plan_written', display }))
+                  sendPlanData()
                 }
-                ws.send(JSON.stringify({ type: 'chunk', text: msg }))
-              }
-              ws.send(JSON.stringify({ type: 'done', reason: 'stop' }))
-              return
+                if (bridge) bridge.close()
+                bridge = startSessionBridge(sessionWithOutput, config, (bridgeMsg: WsMessage) => {
+                  if (ws.readyState === ws.OPEN) {
+                    ws.send(JSON.stringify(bridgeMsg))
+                  }
+                })
+                pendingConfirm = null
+              },
             }
-
-            if (cmd === 'prompts') {
-              const templates = loadPromptTemplates(config.cwd)
-              if (templates.length === 0) {
-                ws.send(
-                  JSON.stringify({
-                    type: 'chunk',
-                    text: 'No prompt templates found. Create .md files in .lonny/prompts/.',
-                  }),
-                )
-              } else {
-                let msg = `Prompt Templates (${templates.length}):\n`
-                for (const t of templates) {
-                  msg += `  \u2022 ${t.name}`
-                  if (t.description) msg += ` - ${t.description}`
-                  msg += '\n'
-                }
-                ws.send(JSON.stringify({ type: 'chunk', text: msg }))
+            const handled = await dispatchCommand(
+              { session: sessionWithOutput, config, ui, isRunning: false },
+              cmd,
+              arg,
+            )
+
+            if (handled) {
+              if (cmd === 'mode') {
+                ws.send(JSON.stringify({ type: 'mode_changed', mode: arg }))
+              } else if (cmd === 'model') {
+                ws.send(JSON.stringify({ type: 'model_changed', model: arg }))
               }
               ws.send(JSON.stringify({ type: 'done', reason: 'stop' }))
               return
             }
 
-            if (cmd === 'init') {
-              ensureSkillsDir(config.cwd)
-              ensurePromptsDir(config.cwd)
-              ws.send(
-                JSON.stringify({
-                  type: 'chunk',
-                  text: 'Initialized .lonny/skills/ and .lonny/prompts/.',
-                }),
-              )
-              ws.send(JSON.stringify({ type: 'done', reason: 'stop' }))
-              return
-            }
-
-            if (cmd === 'help') {
-              ws.send(
-                JSON.stringify({
-                  type: 'help',
-                  commands: [
-                    '/mode code|plan|ask - Switch mode',
-                    '/model <name> - Switch model',
-                    '/new - Start a new session',
-                    '/stop - Stop the running agent',
-                    '/skills - List active skills',
-                    '/prompts - List prompt templates',
-                    '/init - Create .lonny/skills/ & prompts/',
-                    '/help - Show this help',
-                  ],
-                }),
-              )
-              return
-            }
-
             ws.send(JSON.stringify({ type: 'error', message: `Unknown command: ${cmd}` }))
             return
           }
@@ -459,6 +395,7 @@ export async function startWebUi(config: Config, port: number): Promise<void> {
         }
         return m
       })
+    console.log(`[Web UI] Sending session_history: ${historyMessages.length} messages `)
     if (historyMessages.length > 0) {
       ws.send(
         JSON.stringify({

package/src/web/public/index.html

@@ -51,7 +51,7 @@
           <div class="input-container">
             <div id="slash-hint" class="slash-hint hidden">
               <div class="slash-hint-header">Commands</div>
-              <div class="slash-hint-item" data-cmd="mode code|plan|ask">/mode <span class="hint-arg">code|plan|ask</span> <span class="hint-desc">Switch mode</span></div>
+              <div class="slash-hint-item" data-cmd="mode code|plan|ask|loop">/mode <span class="hint-arg">code|plan|ask|loop</span> <span class="hint-desc">Switch mode</span></div>
               <div class="slash-hint-item" data-cmd="model ">/model <span class="hint-arg">&lt;name&gt;</span> <span class="hint-desc">Switch model</span></div>
               <div class="slash-hint-item" data-cmd="new">/new <span class="hint-desc">Start a new session</span></div>
               <div class="slash-hint-item" data-cmd="stop">/stop <span class="hint-desc">Stop the running agent</span></div>

package/src/web/public/messages.js

@@ -318,36 +318,52 @@ export function hideThinking() {
 
 export function renderSessionHistory(messages) {
   if (!Array.isArray(messages)) return
+  let rendered = 0
+  let errors = 0
   for (const msg of messages) {
-    if (msg.role === 'user') {
-      addUserMessage(msg.content || '')
-    } else if (msg.role === 'assistant') {
-      startAssistantMessage()
-      if (msg.reasoning_content) {
-        showThinking(msg.reasoning_content)
-        hideThinking()
-      }
-      if (msg.content) {
-        state.streamingText = msg.content
-        const body = state.streamingMsgEl.querySelector('.message-body')
-        body.innerHTML = renderMarkdown(msg.content)
-      }
-      if (msg.tool_calls && msg.tool_calls.length > 0) {
-        for (const tc of msg.tool_calls) {
-          addToolCall(tc.name, tc.input)
+    try {
+      if (msg.role === 'user') {
+        addUserMessage(msg.content || '')
+      } else if (msg.role === 'assistant') {
+        startAssistantMessage()
+        if (msg.reasoning_content) {
+          showThinking(msg.reasoning_content)
+          hideThinking()
+        }
+        if (msg.content) {
+          state.streamingText = msg.content
+          const body = state.streamingMsgEl.querySelector('.message-body')
+          body.innerHTML = renderMarkdown(msg.content)
+        }
+        if (msg.tool_calls && msg.tool_calls.length > 0) {
+          for (const tc of msg.tool_calls) {
+            addToolCall(tc.name, tc.input)
+          }
+        }
+        finalizeAssistantMessage()
+      } else if (msg.role === 'tool') {
+        const content = msg.content || ''
+        const isError = content.startsWith('ERROR: ')
+        if (isError) {
+          addToolResult(msg.name || '', false, content.replace(/^ERROR:\s*/, ''))
+        } else {
+          addToolResult(msg.name || '', true, content)
         }
       }
-      finalizeAssistantMessage()
-    } else if (msg.role === 'tool') {
-      const content = msg.content || ''
-      const isError = content.startsWith('ERROR: ')
-      if (isError) {
-        addToolResult(msg.name || '', false, content.replace(/^ERROR:\s*/, ''))
-      } else {
-        addToolResult(msg.name || '', true, content)
-      }
+      rendered++
+    } catch (err) {
+      errors++
+      console.error(
+        '[renderSessionHistory] Error rendering message #' + rendered + ' role=' + msg.role + ':',
+        err,
+      )
     }
   }
+  if (errors > 0) {
+    console.warn(
+      '[renderSessionHistory] Rendered ' + rendered + ' messages with ' + errors + ' errors',
+    )
+  }
 }
 
 export function addTokenStats(