@k1e1n04/mav 0.1.18 → 0.1.20

package/dist/src/ui/overview.js

@@ -1,216 +1,167 @@
-import blessed from 'neo-blessed';
 import { getAgentDefaults, resolveSessionArgs } from '../agent-launch.js';
 import { completePath } from './path-completion.js';
 export class OverviewUI {
+    static HORIZONTAL_MARGIN = 1;
+    static ANSI = {
+        reset: '\x1b[0m',
+        bold: '\x1b[1m',
+        dim: '\x1b[2m',
+        fgSlate: '\x1b[38;5;245m',
+        fgGreen: '\x1b[38;5;42m',
+        fgAmber: '\x1b[38;5;221m',
+        fgCyan: '\x1b[38;5;81m',
+        fgRed: '\x1b[38;5;203m',
+    };
     static STATUS_GROUPS = [
         { status: 'running', label: 'Working' },
         { status: 'idle', label: 'Waiting' },
         { status: 'done', label: 'Complete' },
         { status: 'error', label: 'Failed' },
     ];
-    static STATUS_COLORS = {
-        running: 'cyan',
-        idle: 'yellow',
-        done: 'green',
-        error: 'red',
-    };
-    screen;
+    static AGENT_TYPES = ['claude-code', 'codex', 'gemini-cli', 'copilot'];
+    terminal;
     manager;
     onSessionCreated;
-    listBox;
-    promptOpen = false;
-    constructor(screen, manager, onSessionCreated) {
-        this.screen = screen;
+    promptState = null;
+    displaySessionIds = [];
+    visible = false;
+    constructor(terminal, manager, onSessionCreated) {
+        this.terminal = terminal;
         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 を設定すると blessed 組み込みの up()/down() もカスタムハンドラーと
-            // 同時に実行され、selected がヘッダー行（cwd名やステータスグループ名）に一時的に
-            // 移動してしまう競合が起きる。矢印キーはカスタムハンドラーのみで処理する。
-            mouse: true,
-        });
-        this.bindKeys();
         this.syncList();
         manager.on('data', (sessionId) => {
             if (sessionId !== this.manager.selectedSession?.id) {
                 return;
             }
             this.syncList();
-            screen.render();
+            this.render();
         });
         manager.on('exit', () => {
             this.syncList();
-            screen.render();
+            this.render();
         });
         manager.on('status', () => {
             this.syncList();
-            screen.render();
+            this.render();
         });
         manager.on('name', () => {
             this.syncList();
-            screen.render();
+            this.render();
         });
-        // removeSession() は emitSelection() を呼ぶが、OverviewUI は 'selection' を
-        // listen していないため、index.ts の exit ハンドラ経由で自動削除された場合に
-        // UI が再描画されない。'selection' を listen して確実に同期する。
         manager.on('selection', () => {
             this.syncList();
-            screen.render();
+            this.render();
         });
     }
-    bindKeys() {
-        this.listBox.key(['up', 'k'], () => {
-            if (this.manager.sessions.length === 0)
-                return;
+    handleKeypress(str, key) {
+        if (this.promptState?.mode === 'agent') {
+            this.handleAgentPromptKeypress(key);
+            return;
+        }
+        if (this.promptState?.mode === 'cwd') {
+            this.handleCwdPromptKeypress(key);
+            return;
+        }
+        if (this.promptState?.mode === 'error') {
+            if (key.name === 'enter' || key.name === 'return' || key.name === 'escape' || str === 'q') {
+                this.promptState = null;
+                this.render();
+            }
+            return;
+        }
+        if ((key.name === 'up' || str === 'k') && this.manager.sessions.length > 0) {
             this.moveSelection(-1);
-            // syncList() と screen.render() は moveSelection() → selectSession() →
-            // emitSelection() → 'selection' イベント経由で自動的に呼ばれる
-        });
-        this.listBox.key(['down', 'j'], () => {
-            if (this.manager.sessions.length === 0)
-                return;
+            return;
+        }
+        if ((key.name === 'down' || str === 'j') && this.manager.sessions.length > 0) {
             this.moveSelection(1);
-            // syncList() と screen.render() は moveSelection() → selectSession() →
-            // emitSelection() → 'selection' イベント経由で自動的に呼ばれる
-        });
-        this.listBox.key('n', () => {
+            return;
+        }
+        if (str === 'n') {
             this.showAddPrompt();
-        });
-        this.listBox.key(['d', 'C-x'], () => {
+            return;
+        }
+        if (str === 'd' || (key.ctrl && key.name === 'x')) {
             const session = this.manager.selectedSession;
             if (session) {
                 this.manager.removeSession(session.id);
                 this.syncList();
-                this.screen.render();
+                this.render();
             }
-        });
+        }
+    }
+    handleAgentPromptKeypress(key) {
+        const state = this.promptState;
+        if (!state || state.mode !== 'agent')
+            return;
+        if (key.name === 'escape') {
+            this.promptState = null;
+            this.render();
+            return;
+        }
+        if (key.name === 'up') {
+            state.selectedIndex =
+                (state.selectedIndex - 1 + OverviewUI.AGENT_TYPES.length) % OverviewUI.AGENT_TYPES.length;
+            this.render();
+            return;
+        }
+        if (key.name === 'down') {
+            state.selectedIndex = (state.selectedIndex + 1) % OverviewUI.AGENT_TYPES.length;
+            this.render();
+            return;
+        }
+        if (key.name === 'enter' || key.name === 'return') {
+            const agentType = OverviewUI.AGENT_TYPES[state.selectedIndex];
+            this.promptState = {
+                mode: 'cwd',
+                agentType,
+                value: process.cwd(),
+                candidates: [],
+            };
+            this.render();
+        }
+    }
+    handleCwdPromptKeypress(key) {
+        const state = this.promptState;
+        if (!state || state.mode !== 'cwd')
+            return;
+        if (key.name === 'escape') {
+            this.promptState = null;
+            this.render();
+            return;
+        }
+        if (key.name === 'enter' || key.name === 'return') {
+            const expanded = state.value.trim().replace(/^~/, process.env.HOME ?? '~') || process.cwd();
+            const agentType = state.agentType;
+            this.promptState = null;
+            this.render();
+            this.spawnAgent(agentType, expanded);
+            return;
+        }
+        if (key.name === 'tab') {
+            const { completed, candidates } = completePath(state.value);
+            state.value = completed;
+            state.candidates = candidates;
+            this.render();
+            return;
+        }
+        state.candidates = [];
+        if (key.name === 'backspace') {
+            state.value = state.value.slice(0, -1);
+            this.render();
+            return;
+        }
+        if (!key.ctrl && !key.meta && key.sequence?.length === 1) {
+            state.value += key.sequence;
+            this.render();
+        }
     }
     showAddPrompt() {
-        if (this.promptOpen)
+        if (this.promptState)
             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.selected ?? 0;
-            const selected = agentTypes[selectedIdx];
-            prompt.destroy();
-            this.screen.render();
-            this.showCwdPrompt(selected);
-        });
-        prompt.key('escape', close);
-        prompt.focus();
-        this.screen.render();
-    }
-    showCwdPrompt(agentType) {
-        let value = process.cwd();
-        let candidateList = null;
-        const box = blessed.box({
-            parent: this.screen,
-            top: 'center',
-            left: 'center',
-            width: 60,
-            height: 3,
-            border: { type: 'line' },
-            label: ' cwd  Tab:補完  Enter:確定  Esc:キャンセル ',
-            style: { border: { fg: 'green' } },
-        });
-        const renderInput = () => {
-            box.setContent(value);
-            this.screen.render();
-        };
-        const closeCandidates = () => {
-            if (candidateList) {
-                candidateList.destroy();
-                candidateList = null;
-            }
-        };
-        const cleanup = () => {
-            this.screen.removeListener('keypress', onKeypress);
-            closeCandidates();
-            this.promptOpen = false;
-            box.destroy();
-            this.listBox.focus();
-            this.screen.render();
-        };
-        const onKeypress = (_ch, key) => {
-            if (!key)
-                return;
-            closeCandidates();
-            if (key.name === 'enter' || key.name === 'return') {
-                const expanded = value.trim().replace(/^~/, process.env.HOME ?? '~') || process.cwd();
-                cleanup();
-                this.spawnAgent(agentType, expanded);
-            }
-            else if (key.name === 'escape') {
-                cleanup();
-            }
-            else if (key.name === 'tab') {
-                const { completed, candidates } = completePath(value);
-                value = completed;
-                if (candidates.length > 1) {
-                    const maxVisible = Math.min(candidates.length, 8);
-                    candidateList = blessed.list({
-                        parent: this.screen,
-                        top: '50%',
-                        left: 'center',
-                        width: 60,
-                        height: maxVisible + 2,
-                        border: { type: 'line' },
-                        items: candidates,
-                        keys: false,
-                        style: { border: { fg: 'cyan' } },
-                    });
-                }
-                renderInput();
-            }
-            else if (key.name === 'backspace') {
-                value = value.slice(0, -1);
-                renderInput();
-            }
-            else if (!key.ctrl && !key.meta && key.sequence?.length === 1) {
-                value += key.sequence;
-                renderInput();
-            }
-        };
-        // 現在のキーイベント(enter)がこのリスナーに届かないよう1tick遅らせる
-        setImmediate(() => {
-            this.screen.on('keypress', onKeypress);
-        });
-        box.focus();
-        renderInput();
+        this.promptState = { mode: 'agent', selectedIndex: 0 };
+        this.render();
     }
     spawnAgent(agentType, cwd) {
         const defaults = getAgentDefaults(agentType);
@@ -236,60 +187,12 @@ export class OverviewUI {
         this.onSessionCreated?.(session);
     }
     showError(message) {
-        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();
+        this.promptState = { mode: 'error', message };
+        this.render();
     }
     syncList() {
         const orderedSessions = this.getOrderedSessions();
-        const items = [];
-        const selectedId = this.manager.selectedSession?.id;
-        let selectedDisplayIndex = -1;
-        const cwdGroups = this.groupByCwd(orderedSessions);
-        for (const [cwd, sessions] of cwdGroups) {
-            items.push(` {bold}${this.shortenPath(cwd)}{/bold}`);
-            for (const group of OverviewUI.STATUS_GROUPS) {
-                const groupSessions = sessions.filter((s) => s.status === group.status);
-                if (groupSessions.length === 0)
-                    continue;
-                items.push(`  ${group.label}`);
-                for (const session of groupSessions) {
-                    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);
-        }
+        this.displaySessionIds = orderedSessions.map((session) => session.id);
     }
     groupByCwd(sessions) {
         const map = new Map();
@@ -322,18 +225,17 @@ export class OverviewUI {
         });
     }
     moveSelection(direction) {
-        const orderedSessions = this.getOrderedSessions();
         const selectedId = this.manager.selectedSession?.id;
-        const currentIndex = selectedId
-            ? orderedSessions.findIndex((session) => session.id === selectedId)
-            : -1;
+        if (this.displaySessionIds.length === 0)
+            return;
+        const currentIndex = selectedId ? this.displaySessionIds.indexOf(selectedId) : -1;
         const nextIndex = currentIndex === -1
             ? 0
-            : Math.max(0, Math.min(orderedSessions.length - 1, currentIndex + direction));
-        const nextSession = orderedSessions[nextIndex];
-        if (!nextSession)
+            : (currentIndex + direction + this.displaySessionIds.length) % this.displaySessionIds.length;
+        const nextSessionId = this.displaySessionIds[nextIndex];
+        if (!nextSessionId)
             return;
-        const managerIndex = this.manager.sessions.findIndex((session) => session.id === nextSession.id);
+        const managerIndex = this.manager.sessions.findIndex((session) => session.id === nextSessionId);
         if (managerIndex >= 0) {
             this.manager.selectSession(managerIndex);
         }
@@ -366,20 +268,237 @@ export class OverviewUI {
                 return 99;
         }
     }
+    countByStatus(status) {
+        return this.manager.sessions.filter((session) => session.status === status).length;
+    }
+    stripAnsi(value) {
+        return value.replace(/\x1b\[[0-9;]*m/g, '');
+    }
+    visibleLength(value) {
+        return this.stripAnsi(value).length;
+    }
+    getRenderWidth() {
+        return Math.max(20, this.terminal.cols || 80);
+    }
+    getContentWidth() {
+        return Math.max(10, this.getRenderWidth() - (OverviewUI.HORIZONTAL_MARGIN * 2));
+    }
+    insetLine(line) {
+        if (line.length === 0)
+            return '';
+        return `${' '.repeat(OverviewUI.HORIZONTAL_MARGIN)}${line}`;
+    }
+    finalizeLines(lines) {
+        const maxWidth = this.getRenderWidth();
+        return lines.map((line) => {
+            const inset = this.insetLine(line);
+            return this.fitVisible(inset, maxWidth);
+        });
+    }
+    padRight(value, width) {
+        const visibleLength = this.visibleLength(value);
+        if (visibleLength >= width) {
+            return value;
+        }
+        return value + ' '.repeat(width - visibleLength);
+    }
+    fitPlain(value, width) {
+        if (width <= 0)
+            return '';
+        if (value.length <= width)
+            return value;
+        if (width === 1)
+            return '…';
+        return `${value.slice(0, width - 1)}…`;
+    }
+    fitVisible(value, width) {
+        const plain = this.stripAnsi(value);
+        return plain.length <= width ? value : this.fitPlain(plain, width);
+    }
+    color(text, ...codes) {
+        return `${codes.join('')}${text}${OverviewUI.ANSI.reset}`;
+    }
+    getStatusColor(status) {
+        switch (status) {
+            case 'running':
+                return OverviewUI.ANSI.fgGreen;
+            case 'idle':
+                return OverviewUI.ANSI.fgAmber;
+            case 'done':
+                return OverviewUI.ANSI.fgCyan;
+            case 'error':
+                return OverviewUI.ANSI.fgRed;
+            default:
+                return OverviewUI.ANSI.fgSlate;
+        }
+    }
+    makeRule(label, width = this.getRenderWidth()) {
+        const text = ` ${label} `;
+        if (text.length >= width) {
+            return this.fitPlain(text, width);
+        }
+        const fill = '─'.repeat(width - text.length);
+        return text + fill;
+    }
+    wrapPlainText(text, width) {
+        if (width <= 0)
+            return [''];
+        const words = text.split(/\s+/).filter(Boolean);
+        if (words.length === 0)
+            return [''];
+        const lines = [];
+        let current = '';
+        for (const word of words) {
+            const next = current ? `${current} ${word}` : word;
+            if (next.length <= width) {
+                current = next;
+                continue;
+            }
+            if (current) {
+                lines.push(current);
+                current = '';
+            }
+            if (word.length <= width) {
+                current = word;
+            }
+            else {
+                lines.push(this.fitPlain(word, width));
+            }
+        }
+        if (current) {
+            lines.push(current);
+        }
+        return lines;
+    }
+    wrapVisibleParts(parts, width) {
+        if (width <= 0)
+            return [''];
+        const lines = [];
+        let current = '';
+        for (const part of parts) {
+            const next = current ? `${current}  ·  ${part}` : part;
+            if (this.visibleLength(next) <= width) {
+                current = next;
+                continue;
+            }
+            if (current) {
+                lines.push(current);
+            }
+            current = this.visibleLength(part) <= width ? part : this.fitVisible(part, width);
+        }
+        if (current) {
+            lines.push(current);
+        }
+        return lines;
+    }
+    formatSummaryLines(width) {
+        const parts = OverviewUI.STATUS_GROUPS.map((group) => {
+            const count = this.countByStatus(group.status);
+            return this.color(`${group.label} ${count}`, OverviewUI.ANSI.bold, this.getStatusColor(group.status));
+        });
+        return this.wrapVisibleParts(parts, width);
+    }
+    buildMainLines() {
+        const orderedSessions = this.getOrderedSessions();
+        const selectedId = this.manager.selectedSession?.id;
+        const width = this.getContentWidth();
+        const lines = [
+            this.color(this.makeRule('mav overview', width), OverviewUI.ANSI.dim),
+            'AGENTS',
+            ...this.formatSummaryLines(width),
+            '',
+        ];
+        const cwdGroups = this.groupByCwd(orderedSessions);
+        for (const [cwd, sessions] of cwdGroups) {
+            lines.push(this.color(this.makeRule(this.shortenPath(cwd)), OverviewUI.ANSI.dim));
+            for (const group of OverviewUI.STATUS_GROUPS) {
+                const groupSessions = sessions.filter((s) => s.status === group.status);
+                if (groupSessions.length === 0)
+                    continue;
+                lines.push(this.color(`  ${group.label} (${groupSessions.length})`, OverviewUI.ANSI.bold, this.getStatusColor(group.status)));
+                for (const session of groupSessions) {
+                    const color = this.getStatusColor(session.status);
+                    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 prefix = session.id === selectedId ? '> ' : '  ';
+                    const sessionLine = this.fitPlain(`${prefix}${statusIcon} ${sessionLabel}  ${this.getStatusLabel(session.status)}`, width);
+                    lines.push(session.id === selectedId
+                        ? this.color(sessionLine, OverviewUI.ANSI.bold, color)
+                        : this.color(sessionLine, color));
+                }
+                lines.push('');
+            }
+        }
+        if (orderedSessions.length === 0) {
+            lines.push(this.color(this.makeRule('empty', width), OverviewUI.ANSI.dim));
+            lines.push(this.fitPlain('  No sessions. Press n to add one.', width));
+            lines.push('');
+        }
+        lines.push(this.color(this.makeRule('controls', width), OverviewUI.ANSI.dim));
+        lines.push(...this.wrapPlainText('↑/↓ or j/k move   Enter detail   Ctrl+] back   n new   d delete   q quit', width));
+        return this.finalizeLines(lines);
+    }
+    buildPromptLines() {
+        const state = this.promptState;
+        if (!state)
+            return [];
+        const width = this.getContentWidth();
+        const lines = ['', this.color(this.makeRule('prompt', width), OverviewUI.ANSI.dim)];
+        if (state.mode === 'agent') {
+            lines.push(this.fitPlain('Select agent type', width));
+            lines.push('');
+            for (const [index, agentType] of OverviewUI.AGENT_TYPES.entries()) {
+                lines.push(this.fitPlain(`${index === state.selectedIndex ? '> ' : '  '}${agentType}`, width));
+            }
+            lines.push('');
+            lines.push(...this.wrapPlainText('Enter: select  Esc: cancel', width));
+            return this.finalizeLines(lines);
+        }
+        if (state.mode === 'cwd') {
+            lines.push(this.fitPlain(`cwd for ${state.agentType}`, width));
+            lines.push(this.fitPlain(state.value, width));
+            if (state.candidates.length > 1) {
+                lines.push('');
+                lines.push(this.fitPlain('Candidates:', width));
+                for (const candidate of state.candidates.slice(0, 8)) {
+                    lines.push(this.fitPlain(`  ${candidate}`, width));
+                }
+            }
+            lines.push('');
+            lines.push(...this.wrapPlainText('Tab: complete  Enter: confirm  Esc: cancel', width));
+            return this.finalizeLines(lines);
+        }
+        lines.push(this.fitPlain('Error', width));
+        for (const line of state.message.split('\n')) {
+            lines.push(this.fitPlain(line, width));
+        }
+        lines.push('');
+        lines.push(...this.wrapPlainText('Enter/Esc/q: close', width));
+        return this.finalizeLines(lines);
+    }
+    render() {
+        if (!this.visible)
+            return;
+        this.terminal.render([...this.buildMainLines(), ...this.buildPromptLines()].join('\n'));
+    }
     show() {
-        this.listBox.show();
-        this.listBox.focus();
+        this.visible = true;
         this.syncList();
-        this.screen.render();
+        this.render();
     }
     isPromptOpen() {
-        return this.promptOpen;
+        return this.promptState != null;
     }
     resizeSelectedSession() {
         this.syncList();
+        this.render();
     }
     hide() {
-        this.listBox.hide();
+        this.visible = false;
     }
 }
 //# sourceMappingURL=overview.js.map