@k1e1n04/mav 0.1.0

package/src/ui/app.ts

@@ -0,0 +1,121 @@
+import blessed from 'neo-blessed'
+import type { Widgets } from 'neo-blessed'
+import type { AgentSession } from '../agent.js'
+import type { SessionManager } from '../session-manager.js'
+import { saveState } from '../state.js'
+import { OverviewUI } from './overview.js'
+import { DetailUI } from './detail.js'
+
+type Mode = 'overview' | 'detail'
+
+export class App {
+  private screen: Widgets.Screen
+  private manager: SessionManager
+  private statePath: string
+  private overviewUI: OverviewUI
+  private detailUI: DetailUI
+  private mode: Mode = 'overview'
+
+  constructor(manager: SessionManager, statePath: string) {
+    this.manager = manager
+    this.statePath = statePath
+
+    this.screen = blessed.screen({
+      smartCSR: true,
+      title: 'mav',
+      fullUnicode: true,
+    })
+
+    this.overviewUI = new OverviewUI(this.screen, manager, (session) => {
+      if (session) {
+        this.switchToDetail(session)
+      }
+    })
+    this.detailUI = new DetailUI(this.screen, () => {
+      if (this.mode === 'detail') {
+        this.switchToOverview()
+      }
+    })
+
+    const proto = Object.getPrototypeOf(this.screen) as { render?: () => void }
+    const baseRender = proto.render ?? this.screen.render
+    const protoRender = baseRender.bind(this.screen)
+    ;(this.screen as unknown as { render: () => void }).render = () => {
+      if (this.mode === 'detail') return
+      protoRender()
+    }
+
+    this.bindGlobalKeys()
+
+    this.screen.on('resize', () => {
+      const cols = this.screen.width as number
+      const rows = this.screen.height as number
+      if (this.mode === 'detail') {
+        this.detailUI.resize(cols, rows)
+        return
+      }
+
+      this.overviewUI.resizeSelectedSession()
+    })
+  }
+
+  private bindGlobalKeys(): void {
+    this.screen.key('q', () => {
+      if (this.mode === 'detail') return
+      this.shutdown()
+    })
+
+    this.screen.key('C-c', () => {
+      if (this.mode === 'overview') {
+        this.shutdown()
+      }
+    })
+
+    this.screen.key(['right', 'enter'], () => {
+      if (this.mode !== 'overview') return
+      if (this.overviewUI.isPromptOpen()) return
+      const session = this.manager.selectedSession
+      if (!session) return
+      this.switchToDetail()
+    })
+  }
+
+  private switchToDetail(session: AgentSession | null = this.manager.selectedSession): void {
+    if (!session) return
+    this.mode = 'detail'
+    this.overviewUI.hide()
+    this.screen.program.normalBuffer()
+    this.screen.program.disableMouse()
+    this.screen.realloc()
+    this.detailUI.attach(session)
+    this.detailUI.resize(this.screen.width as number, this.screen.height as number)
+    this.detailUI.show()
+  }
+
+  private switchToOverview(): void {
+    this.mode = 'overview'
+    this.detailUI.detach()
+    this.detailUI.hide()
+    this.screen.program.alternateBuffer()
+    this.screen.program.enableMouse()
+    this.screen.realloc()
+    this.overviewUI.show()
+  }
+
+  private shutdown(): void {
+    try {
+      saveState(this.statePath, this.manager)
+    } catch {
+      // 終了シーケンスは継続する
+    }
+    this.manager.killAll()
+    this.screen.destroy()
+    process.exit(0)
+  }
+
+  start(): void {
+    this.overviewUI.show()
+    this.overviewUI.resizeSelectedSession()
+    this.screen.render()
+  }
+}

package/src/ui/detail.ts

@@ -0,0 +1,164 @@
+import { appendFileSync } from 'node:fs'
+import type { Widgets } from 'neo-blessed'
+import type { AgentSession } from '../agent.js'
+
+export class DetailUI {
+  private static readonly KEYBOARD_FLAGS_RESPONSE_PATTERN = /\x1b\[\?(\d+)u/g
+  private static readonly PENDING_INPUT_FLUSH_DELAY_MS = 25
+
+  private static readonly EXIT_SEQUENCES = [
+    '\x1d',
+    '\x1b[93;5u',
+    '\x1b[27;5;93~',
+  ] as const
+  private static readonly EXIT_SEQUENCE_PATTERNS = [
+    /^\x1b\[93(?:::\d+)?;5(?::\d+)?u$/,
+    /^\x1b\[99;5u$/,
+  ] as const
+
+  private screen: Widgets.Screen
+  private onExitDetail: () => void
+  private currentSession: AgentSession | null = null
+  private dataListener: ((data: string) => void) | null = null
+  private rawInputListener: ((chunk: unknown) => void) | null = null
+  private pendingInput = ''
+  private pendingInputTimer: ReturnType<typeof setTimeout> | null = null
+  private keyboardEnhancementFlags: string | null = null
+
+  constructor(screen: Widgets.Screen, onExitDetail: () => void) {
+    this.screen = screen
+    this.onExitDetail = onExitDetail
+  }
+
+  private isExitShortcut(input: string): boolean {
+    return (
+      DetailUI.EXIT_SEQUENCES.includes(
+      input as (typeof DetailUI.EXIT_SEQUENCES)[number]
+      ) ||
+      DetailUI.EXIT_SEQUENCE_PATTERNS.some((pattern) => pattern.test(input))
+    )
+  }
+
+  private isExitShortcutPrefix(input: string): boolean {
+    return (
+      DetailUI.EXIT_SEQUENCES.some((sequence) => sequence.startsWith(input)) ||
+      '\x1b[93::92;5u'.startsWith(input) ||
+      '\x1b[93::92;5:3u'.startsWith(input) ||
+      '\x1b[99;5u'.startsWith(input)
+    )
+  }
+
+  private debugLogInput(str: string): void {
+    const path = process.env.MAV_DEBUG_KEYS_PATH
+    if (!path) return
+
+    const hex = Buffer.from(str, 'utf8').toString('hex')
+    appendFileSync(path, `raw=${JSON.stringify(str)} hex=${hex}\n`)
+  }
+
+  private rememberKeyboardEnhancementFlags(str: string): void {
+    for (const match of str.matchAll(DetailUI.KEYBOARD_FLAGS_RESPONSE_PATTERN)) {
+      this.keyboardEnhancementFlags = match[1] ?? null
+    }
+  }
+
+  private clearPendingInputTimer(): void {
+    if (!this.pendingInputTimer) {
+      return
+    }
+    clearTimeout(this.pendingInputTimer)
+    this.pendingInputTimer = null
+  }
+
+  private flushPendingInput(): void {
+    if (!this.pendingInput) {
+      return
+    }
+    this.currentSession?.write(this.pendingInput)
+    this.pendingInput = ''
+    this.clearPendingInputTimer()
+  }
+
+  attach(session: AgentSession): void {
+    this.detach()
+    this.currentSession = session
+    this.pendingInput = ''
+
+    const { input, output } = this.screen.program
+
+    const safeLog = session.logBuffer
+      .join('')
+      .replace(/\x1b\[\?104[79][hl]|\x1b\[\?47[hl]/g, '')
+      .replace(/\x1b\[(?:>?\d*c|\?u|>q|\?\d+\$p)/g, '')
+    if (this.keyboardEnhancementFlags) {
+      output.write(`\x1b[=${this.keyboardEnhancementFlags}u`)
+    }
+    output.write('\x1b[?1l')
+    output.write('\x1b[H\x1b[2J')
+    output.write(safeLog)
+
+    this.dataListener = (data: string) => {
+      output.write(data)
+    }
+    session.on('data', this.dataListener)
+
+    this.rawInputListener = (chunk: unknown) => {
+      const str = Buffer.isBuffer(chunk)
+        ? chunk.toString('utf8')
+        : typeof chunk === 'string'
+          ? chunk
+          : ''
+      if (!str) return
+      this.debugLogInput(str)
+      this.rememberKeyboardEnhancementFlags(str)
+      if (this.isExitShortcut(str)) {
+        this.onExitDetail()
+        return
+      }
+      this.pendingInput += str
+
+      if (this.isExitShortcut(this.pendingInput)) {
+        this.clearPendingInputTimer()
+        this.pendingInput = ''
+        this.onExitDetail()
+        return
+      }
+
+      if (this.isExitShortcutPrefix(this.pendingInput)) {
+        this.clearPendingInputTimer()
+        this.pendingInputTimer = setTimeout(() => {
+          this.pendingInputTimer = null
+          this.flushPendingInput()
+        }, DetailUI.PENDING_INPUT_FLUSH_DELAY_MS)
+        return
+      }
+
+      this.flushPendingInput()
+    }
+    input.on('data', this.rawInputListener)
+  }
+
+  detach(): void {
+    if (this.currentSession && this.dataListener) {
+      this.currentSession.off('data', this.dataListener)
+      this.dataListener = null
+    }
+    if (this.rawInputListener) {
+      this.screen.program.input.removeListener('data', this.rawInputListener)
+      this.rawInputListener = null
+    }
+    if (this.keyboardEnhancementFlags) {
+      this.screen.program.output.write('\x1b[=0u')
+    }
+    this.clearPendingInputTimer()
+    this.pendingInput = ''
+    this.currentSession = null
+  }
+
+  show(): void {}
+  hide(): void {}
+
+  resize(cols: number, rows: number): void {
+    this.currentSession?.resize(cols, rows)
+  }
+}

package/src/ui/overview.ts

@@ -0,0 +1,306 @@
+import blessed from 'neo-blessed'
+import type { Widgets } from 'neo-blessed'
+import type { SessionManager } from '../session-manager.js'
+import type { AgentSession } from '../agent.js'
+import { getAgentDefaults, resolveSessionArgs } from '../agent-launch.js'
+
+export class OverviewUI {
+  private static readonly STATUS_GROUPS = [
+    { status: 'running', label: 'Working' },
+    { status: 'idle', label: 'Waiting' },
+    { status: 'done', label: 'Complete' },
+    { status: 'error', label: 'Failed' },
+  ] as const
+  private static readonly STATUS_COLORS = {
+    running: 'cyan',
+    idle: 'yellow',
+    done: 'green',
+    error: 'red',
+  } as const
+
+  private screen: Widgets.Screen
+  private manager: SessionManager
+  private onSessionCreated?: (session: SessionManager['selectedSession']) => void
+  private listBox: Widgets.ListElement
+  private promptOpen = false
+
+  constructor(
+    screen: Widgets.Screen,
+    manager: SessionManager,
+    onSessionCreated?: (session: SessionManager['selectedSession']) => void
+  ) {
+    this.screen = screen
+    this.manager = manager
+    this.onSessionCreated = onSessionCreated
+
+    this.listBox = blessed.list({
+      parent: screen,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      border: { type: 'line' },
+      label: ' AGENTS ',
+      tags: true,
+      style: {
+        selected: { bg: 'blue', fg: 'white' },
+        border: { fg: 'cyan' },
+      },
+      keys: true,
+      mouse: true,
+    })
+
+    this.bindKeys()
+    this.syncList()
+
+    manager.on('data', (sessionId: string) => {
+      if (sessionId !== this.manager.selectedSession?.id) {
+        return
+      }
+      this.syncList()
+      screen.render()
+    })
+
+    manager.on('exit', () => {
+      this.syncList()
+      screen.render()
+    })
+
+    manager.on('status', () => {
+      this.syncList()
+      screen.render()
+    })
+
+    manager.on('name', () => {
+      this.syncList()
+      screen.render()
+    })
+  }
+
+  private bindKeys(): void {
+    this.listBox.key(['up', 'k'], () => {
+      if (this.manager.sessions.length === 0) return
+      this.moveSelection(-1)
+      this.syncList()
+      this.screen.render()
+    })
+
+    this.listBox.key(['down', 'j'], () => {
+      if (this.manager.sessions.length === 0) return
+      this.moveSelection(1)
+      this.syncList()
+      this.screen.render()
+    })
+
+    this.listBox.key('n', () => {
+      this.showAddPrompt()
+    })
+
+    this.listBox.key(['d', 'C-x'], () => {
+      const session = this.manager.selectedSession
+      if (session) {
+        this.manager.removeSession(session.id)
+        this.syncList()
+        this.screen.render()
+      }
+    })
+  }
+
+  private showAddPrompt(): void {
+    if (this.promptOpen) return
+    this.promptOpen = true
+
+    const agentTypes = ['claude-code', 'codex', 'gemini-cli', 'copilot']
+
+    const prompt = blessed.list({
+      parent: this.screen,
+      top: 'center',
+      left: 'center',
+      width: 40,
+      height: agentTypes.length + 4,
+      border: { type: 'line' },
+      label: ' Select agent type ',
+      items: agentTypes,
+      keys: true,
+      style: {
+        selected: { bg: 'blue', fg: 'white' },
+        border: { fg: 'green' },
+      },
+    })
+
+    const close = () => {
+      this.promptOpen = false
+      prompt.destroy()
+      this.listBox.focus()
+      this.screen.render()
+    }
+
+    prompt.key('enter', () => {
+      const selectedIdx = (prompt as unknown as { selected: number }).selected ?? 0
+      const selected = agentTypes[selectedIdx]!
+      close()
+
+      const defaults = getAgentDefaults(selected)
+      const { args, newSessionId } = resolveSessionArgs(selected, defaults.args, undefined, false)
+      const session = this.manager.addSession({
+        type: selected,
+        cmd: defaults.cmd,
+        args,
+        cwd: process.cwd(),
+      }) as AgentSession & { sessionId?: string }
+      session.baseArgs = defaults.args
+      if (newSessionId != null) {
+        session.sessionId = newSessionId
+      }
+
+      if (session.status === 'error') {
+        this.manager.removeSession(session.id)
+        this.showError(`'${defaults.cmd}' command not found.\nIs ${selected} installed?`)
+        this.syncList()
+        return
+      }
+
+      this.manager.selectSession(this.manager.sessions.length - 1)
+      this.syncList()
+      this.onSessionCreated?.(session)
+    })
+
+    prompt.key('escape', close)
+
+    prompt.focus()
+    this.screen.render()
+  }
+
+  private showError(message: string): void {
+    const overlay = blessed.box({
+      parent: this.screen,
+      top: 'center',
+      left: 'center',
+      width: 50,
+      height: message.split('\n').length + 4,
+      border: { type: 'line' },
+      label: ' Error ',
+      content: `\n ${message.split('\n').join('\n ')}`,
+      style: { border: { fg: 'red' }, label: { fg: 'red' } },
+      keys: true,
+      mouse: true,
+    })
+    overlay.key(['enter', 'escape', 'q'], () => {
+      overlay.destroy()
+      this.listBox.focus()
+      this.screen.render()
+    })
+    overlay.focus()
+    this.screen.render()
+  }
+
+  private syncList(): void {
+    const orderedSessions = this.getOrderedSessions()
+
+    const items: string[] = []
+    const selectedId = this.manager.selectedSession?.id
+    let selectedDisplayIndex = -1
+
+    for (const group of OverviewUI.STATUS_GROUPS) {
+      const sessions = orderedSessions.filter((session) => session.status === group.status)
+      if (sessions.length === 0) continue
+
+      items.push(` ${group.label}`)
+      for (const session of sessions) {
+        const statusIcon =
+          session.status === 'running' ? '⣾'
+          : session.status === 'idle'    ? '○'
+          : session.status === 'done'    ? '✓'
+          : '✗'
+        const sessionTitle = session.displayName ?? session.id
+        const sessionLabel = session.type ? `${sessionTitle} (${session.type})` : sessionTitle
+        const content = `${statusIcon} ${sessionLabel}  ${this.getStatusLabel(session.status)}`
+        const color = OverviewUI.STATUS_COLORS[session.status]
+        items.push(` {${color}-fg}${content}{/${color}-fg}`)
+        if (session.id === selectedId) {
+          selectedDisplayIndex = items.length - 1
+        }
+      }
+    }
+
+    this.listBox.setItems(items)
+    if (selectedDisplayIndex >= 0) {
+      this.listBox.select(selectedDisplayIndex)
+    }
+  }
+
+  private getOrderedSessions(): SessionManager['sessions'] {
+    return [...this.manager.sessions].sort((a, b) => {
+      const rankDiff = this.getStatusRank(a.status) - this.getStatusRank(b.status)
+      if (rankDiff !== 0) return rankDiff
+      return a.id.localeCompare(b.id)
+    })
+  }
+
+  private moveSelection(direction: -1 | 1): void {
+    const orderedSessions = this.getOrderedSessions()
+    const selectedId = this.manager.selectedSession?.id
+    const currentIndex = selectedId
+      ? orderedSessions.findIndex((session) => session.id === selectedId)
+      : -1
+    const nextIndex = currentIndex === -1
+      ? 0
+      : Math.max(0, Math.min(orderedSessions.length - 1, currentIndex + direction))
+    const nextSession = orderedSessions[nextIndex]
+    if (!nextSession) return
+
+    const managerIndex = this.manager.sessions.findIndex((session) => session.id === nextSession.id)
+    if (managerIndex >= 0) {
+      this.manager.selectSession(managerIndex)
+    }
+  }
+
+  private getStatusLabel(status: string): string {
+    switch (status) {
+      case 'running':
+        return 'working'
+      case 'idle':
+        return 'waiting'
+      case 'done':
+        return 'complete'
+      case 'error':
+        return 'failed'
+      default:
+        return status
+    }
+  }
+
+  private getStatusRank(status: string): number {
+    switch (status) {
+      case 'running':
+        return 0
+      case 'idle':
+        return 1
+      case 'done':
+        return 2
+      case 'error':
+        return 3
+      default:
+        return 99
+    }
+  }
+
+  show(): void {
+    this.listBox.show()
+    this.listBox.focus()
+    this.syncList()
+    this.screen.render()
+  }
+
+  isPromptOpen(): boolean {
+    return this.promptOpen
+  }
+
+  resizeSelectedSession(): void {
+    this.syncList()
+  }
+
+  hide(): void {
+    this.listBox.hide()
+  }
+}