magi-ai 0.1.0

package/dist/src/tui/panel.d.ts

@@ -0,0 +1,45 @@
+/**
+ * MAGI unit panel renderer.
+ * Draws bordered panels with unit name, status, and content.
+ */
+import type { ScreenBuffer } from './screen-buffer.js';
+import type { Rect, Connector } from './layout.js';
+import { type RGBColor } from './colors.js';
+export type PanelState = 'idle' | 'thinking' | 'complete' | 'error' | 'berserk' | 'offline';
+export interface PanelContent {
+    unit: string;
+    displayName: string;
+    state: PanelState;
+    vote?: string;
+    confidence?: number;
+    durationMs?: number;
+    activeDurationMs?: number;
+    reasoning?: string;
+    breathPhase?: number;
+}
+export interface MagiNodeContent {
+    phaseCode?: string;
+    roundLabel?: string;
+    modeLabel?: string;
+}
+export declare function getDisplayName(unit: string): string;
+export declare class PanelRenderer {
+    /** Draw a bordered panel with content. */
+    drawPanel(buf: ScreenBuffer, rect: Rect, content: PanelContent): void;
+    /** Draw panel border with box-drawing characters. */
+    drawBorder(buf: ScreenBuffer, rect: Rect, color: RGBColor, breathPhase?: number): void;
+    /** Draw panel inner content based on state. */
+    drawContent(buf: ScreenBuffer, rect: Rect, content: PanelContent): void;
+    /** Draw Y-shape connector lines. */
+    drawConnectors(buf: ScreenBuffer, connectors: Connector[], pulseIndex?: number): void;
+    /** Draw the central MAGI junction node. */
+    drawMagiNode(buf: ScreenBuffer, rect: Rect, content?: MagiNodeContent): void;
+    /** Fill the panel background with the unit's color when voting is complete. */
+    fillPanelBg(buf: ScreenBuffer, rect: Rect, bgColor: RGBColor): void;
+    private panelColor;
+    private basePanelFill;
+    drawUnitDetailOverlay(buf: ScreenBuffer, rect: Rect, content: PanelContent): void;
+    private writeCentered;
+}
+/** Strip common markdown formatting for TUI plain-text display. */
+export declare function stripMarkdown(text: string): string;

package/dist/src/tui/panel.js

@@ -0,0 +1,292 @@
+/**
+ * MAGI unit panel renderer.
+ * Draws bordered panels with unit name, status, and content.
+ */
+import { BOX, BOX_DOUBLE } from './layout.js';
+import { EVA_PALETTE, unitColor, voteColor, adjustBrightness, mixColors } from './colors.js';
+import { ATTR_NONE, ATTR_BOLD, ATTR_DIM, stringDisplayWidth, charDisplayWidth, truncateToDisplayWidth } from './screen-buffer.js';
+import { formatElapsedMmSs } from './tui-helpers.js';
+// ── Unit display names ──────────────────────────────────────
+const UNIT_DISPLAY = {
+    MELCHIOR: 'MELCHIOR ・ 1',
+    BALTHASAR: 'BALTHASAR ・ 2',
+    CASPER: 'CASPER ・ 3',
+};
+export function getDisplayName(unit) {
+    return UNIT_DISPLAY[unit] ?? unit;
+}
+// ── Panel Renderer ──────────────────────────────────────────
+export class PanelRenderer {
+    /** Draw a bordered panel with content. */
+    drawPanel(buf, rect, content) {
+        const color = this.panelColor(content);
+        this.fillPanelBg(buf, rect, this.basePanelFill(content));
+        this.drawBorder(buf, rect, color, content.state === 'thinking' ? content.breathPhase : undefined);
+        if (content.state === 'complete' && content.vote) {
+            this.fillPanelBg(buf, rect, mixColors(EVA_PALETTE.background, voteColor(content.vote), 0.16));
+        }
+        this.drawContent(buf, rect, content);
+    }
+    /** Draw panel border with box-drawing characters. */
+    drawBorder(buf, rect, color, breathPhase) {
+        const c = breathPhase !== undefined
+            ? adjustBrightness(color, 0.85 + 0.15 * Math.sin(breathPhase * Math.PI * 2))
+            : color;
+        const { row, col, width, height } = rect;
+        // Top border
+        buf.writeAt(row, col, BOX.tl, c.r, c.g, c.b);
+        buf.writeAt(row, col + width - 1, BOX.tr, c.r, c.g, c.b);
+        for (let x = col + 1; x < col + width - 1; x++) {
+            buf.writeAt(row, x, BOX.h, c.r, c.g, c.b);
+        }
+        // Bottom border
+        buf.writeAt(row + height - 1, col, BOX.bl, c.r, c.g, c.b);
+        buf.writeAt(row + height - 1, col + width - 1, BOX.br, c.r, c.g, c.b);
+        for (let x = col + 1; x < col + width - 1; x++) {
+            buf.writeAt(row + height - 1, x, BOX.h, c.r, c.g, c.b);
+        }
+        // Side borders
+        for (let y = row + 1; y < row + height - 1; y++) {
+            buf.writeAt(y, col, BOX.v, c.r, c.g, c.b);
+            buf.writeAt(y, col + width - 1, BOX.v, c.r, c.g, c.b);
+        }
+    }
+    /** Draw panel inner content based on state. */
+    drawContent(buf, rect, content) {
+        const innerCol = rect.col + 2;
+        const innerWidth = rect.width - 4;
+        const innerRow = rect.row + 1;
+        const tc = EVA_PALETTE.textPrimary;
+        const tw = EVA_PALETTE.textSecondary;
+        // Title line (unit name)
+        const title = ` ${content.displayName} `;
+        const titleBg = mixColors(EVA_PALETTE.background, colorFromState(content), 0.24);
+        buf.writeAt(rect.row, rect.col + 2, title, tc.r, tc.g, tc.b, titleBg.r, titleBg.g, titleBg.b, ATTR_BOLD);
+        // Content area (clear first)
+        for (let y = innerRow; y < rect.row + rect.height - 1; y++) {
+            for (let x = rect.col + 1; x < rect.col + rect.width - 1; x++) {
+                buf.writeAt(y, x, ' ');
+            }
+        }
+        switch (content.state) {
+            case 'idle':
+                this.writeCentered(buf, innerRow + 1, rect, '待　機', tc, ATTR_DIM);
+                this.writeCentered(buf, innerRow + 2, rect, 'STANDBY', tw, ATTR_DIM);
+                break;
+            case 'thinking': {
+                this.writeCentered(buf, innerRow + 1, rect, '審　議　中', tc, ATTR_BOLD);
+                this.writeCentered(buf, innerRow + 2, rect, 'DELIBERATING', tw, ATTR_DIM);
+                if (content.activeDurationMs !== undefined) {
+                    this.writeCentered(buf, innerRow + 3, rect, `ACTIVE ${formatElapsedMmSs(content.activeDurationMs)}`, tw, ATTR_DIM);
+                }
+                break;
+            }
+            case 'complete': {
+                const vc = voteColor(content.vote ?? 'ABSTAIN');
+                const voteLabel = content.vote === 'APPROVE' ? '承　認' : content.vote === 'REJECT' ? '否　定' : '保　留';
+                const confStr = content.confidence !== undefined ? `${Math.round(content.confidence * 100)}%` : '--';
+                const durStr = content.durationMs !== undefined ? `${(content.durationMs / 1000).toFixed(1)}s` : '--';
+                this.writeCentered(buf, innerRow, rect, bracketedVote(content.vote ?? 'ABSTAIN'), vc, ATTR_BOLD);
+                this.writeCentered(buf, innerRow + 1, rect, voteLabel, vc, ATTR_BOLD);
+                this.writeCentered(buf, innerRow + 2, rect, `SYNC ${confStr}  TIME ${durStr}`, tw, ATTR_DIM);
+                // Reasoning excerpt — start immediately after vote line
+                if (content.reasoning) {
+                    const maxReasonLines = Math.min(3, Math.max(0, rect.height - 6));
+                    if (maxReasonLines > 0) {
+                        const stripped = stripMarkdown(content.reasoning);
+                        const lines = wrapText(stripped, innerWidth);
+                        const hasOverflow = lines.length > maxReasonLines;
+                        const visibleCount = Math.min(lines.length, maxReasonLines);
+                        for (let i = 0; i < visibleCount; i++) {
+                            let line = lines[i];
+                            if (hasOverflow && i === visibleCount - 1) {
+                                // Force overflow indicator; avoid double-ellipsis if truncate already added one
+                                const truncated = truncateToDisplayWidth(line, innerWidth - 1);
+                                line = truncated.endsWith('\u2026') ? truncated : truncated + '\u2026';
+                            }
+                            buf.writeAt(innerRow + 4 + i, innerCol, line, tw.r, tw.g, tw.b);
+                        }
+                    }
+                }
+                break;
+            }
+            case 'error': {
+                const wc = EVA_PALETTE.warning;
+                this.writeCentered(buf, innerRow + 1, rect, '侵　食', wc, ATTR_BOLD);
+                this.writeCentered(buf, innerRow + 2, rect, 'INTRUSION', wc, ATTR_DIM);
+                break;
+            }
+            case 'berserk': {
+                const wc = EVA_PALETTE.warning;
+                this.writeCentered(buf, innerRow + 1, rect, '暴　走', wc, ATTR_BOLD);
+                this.writeCentered(buf, innerRow + 2, rect, 'B E R S E R K', wc, ATTR_BOLD);
+                break;
+            }
+            case 'offline': {
+                const gc = EVA_PALETTE.abstain;
+                this.writeCentered(buf, innerRow + 1, rect, '切　断', gc, ATTR_DIM);
+                this.writeCentered(buf, innerRow + 2, rect, 'DISCONNECTED', gc, ATTR_DIM);
+                break;
+            }
+        }
+    }
+    /** Draw Y-shape connector lines. */
+    drawConnectors(buf, connectors, pulseIndex = -1) {
+        const c = EVA_PALETTE.frame;
+        const pulseColor = EVA_PALETTE.approve;
+        for (let i = 0; i < connectors.length; i++) {
+            const conn = connectors[i];
+            const color = i <= pulseIndex ? pulseColor : c;
+            buf.writeAt(conn.row, conn.col, conn.char, color.r, color.g, color.b);
+        }
+    }
+    /** Draw the central MAGI junction node. */
+    drawMagiNode(buf, rect, content) {
+        const accent = content?.modeLabel === 'BERSERK'
+            ? EVA_PALETTE.warning
+            : EVA_PALETTE.magi;
+        const c = accent;
+        const { row, col, width } = rect;
+        // Border
+        buf.writeAt(row, col, BOX.tl, c.r, c.g, c.b);
+        buf.writeAt(row, col + width - 1, BOX.tr, c.r, c.g, c.b);
+        for (let x = col + 1; x < col + width - 1; x++) {
+            buf.writeAt(row, x, BOX.h, c.r, c.g, c.b);
+        }
+        buf.writeAt(row + 2, col, BOX.bl, c.r, c.g, c.b);
+        buf.writeAt(row + 2, col + width - 1, BOX.br, c.r, c.g, c.b);
+        for (let x = col + 1; x < col + width - 1; x++) {
+            buf.writeAt(row + 2, x, BOX.h, c.r, c.g, c.b);
+        }
+        buf.writeAt(row + 1, col, BOX.v, c.r, c.g, c.b);
+        buf.writeAt(row + 1, col + width - 1, BOX.v, c.r, c.g, c.b);
+        // "MAGI" text
+        const nodeLabel = content?.phaseCode
+            ? truncateToDisplayWidth(`${content.phaseCode} ${content.roundLabel ?? ''}`.trim(), width - 2)
+            : 'MAGI';
+        const innerCol = col + Math.max(1, Math.floor((width - stringDisplayWidth(nodeLabel)) / 2));
+        buf.writeAt(row + 1, innerCol, nodeLabel, c.r, c.g, c.b, 0, 0, 0, ATTR_BOLD);
+    }
+    /** Fill the panel background with the unit's color when voting is complete. */
+    fillPanelBg(buf, rect, bgColor) {
+        for (let y = rect.row + 1; y < rect.row + rect.height - 1; y++) {
+            for (let x = rect.col + 1; x < rect.col + rect.width - 1; x++) {
+                const cell = ' ';
+                buf.writeAt(y, x, cell, 255, 255, 255, bgColor.r, bgColor.g, bgColor.b);
+            }
+        }
+    }
+    panelColor(content) {
+        switch (content.state) {
+            case 'error': return EVA_PALETTE.warning;
+            case 'berserk': return EVA_PALETTE.warning;
+            case 'offline': return EVA_PALETTE.abstain;
+            default: return unitColor(content.unit);
+        }
+    }
+    basePanelFill(content) {
+        const accent = colorFromState(content);
+        return mixColors(EVA_PALETTE.background, accent, content.state === 'thinking' ? 0.12 : 0.08);
+    }
+    drawUnitDetailOverlay(buf, rect, content) {
+        const c = unitColor(content.unit);
+        const title = `${content.displayName} DETAIL`;
+        const text = content.reasoning ? stripMarkdown(content.reasoning) : 'No detail available.';
+        for (let y = rect.row; y < rect.row + rect.height; y++) {
+            for (let x = rect.col; x < rect.col + rect.width; x++) {
+                buf.writeAt(y, x, ' ', EVA_PALETTE.textSecondary.r, EVA_PALETTE.textSecondary.g, EVA_PALETTE.textSecondary.b, 0, 0, 0);
+            }
+        }
+        for (let x = rect.col; x < rect.col + rect.width; x++) {
+            buf.writeAt(rect.row, x, BOX_DOUBLE.h, c.r, c.g, c.b);
+            buf.writeAt(rect.row + rect.height - 1, x, BOX_DOUBLE.h, c.r, c.g, c.b);
+        }
+        for (let y = rect.row + 1; y < rect.row + rect.height - 1; y++) {
+            buf.writeAt(y, rect.col, BOX_DOUBLE.v, c.r, c.g, c.b);
+            buf.writeAt(y, rect.col + rect.width - 1, BOX_DOUBLE.v, c.r, c.g, c.b);
+        }
+        buf.writeAt(rect.row, rect.col, BOX_DOUBLE.tl, c.r, c.g, c.b);
+        buf.writeAt(rect.row, rect.col + rect.width - 1, BOX_DOUBLE.tr, c.r, c.g, c.b);
+        buf.writeAt(rect.row + rect.height - 1, rect.col, BOX_DOUBLE.bl, c.r, c.g, c.b);
+        buf.writeAt(rect.row + rect.height - 1, rect.col + rect.width - 1, BOX_DOUBLE.br, c.r, c.g, c.b);
+        buf.writeAt(rect.row, rect.col + 2, ` ${truncateToDisplayWidth(title, rect.width - 8)} `, c.r, c.g, c.b, 0, 0, 0, ATTR_BOLD);
+        const meta = truncateToDisplayWidth(`${content.vote ?? 'UNKNOWN'}  CONF:${content.confidence !== undefined ? Math.round(content.confidence * 100) : '--'}%  TIME:${content.durationMs !== undefined ? `${(content.durationMs / 1000).toFixed(1)}s` : '--'}`, rect.width - 4);
+        buf.writeAt(rect.row + 2, rect.col + 2, meta, EVA_PALETTE.frame.r, EVA_PALETTE.frame.g, EVA_PALETTE.frame.b);
+        const lines = wrapText(text, rect.width - 4);
+        const maxLines = rect.height - 6;
+        for (let i = 0; i < Math.min(lines.length, maxLines); i++) {
+            let line = lines[i];
+            if (lines.length > maxLines && i === maxLines - 1) {
+                const truncated = truncateToDisplayWidth(line, rect.width - 5);
+                line = truncated.endsWith('\u2026') ? truncated : truncated + '\u2026';
+            }
+            buf.writeAt(rect.row + 4 + i, rect.col + 2, line, EVA_PALETTE.textSecondary.r, EVA_PALETTE.textSecondary.g, EVA_PALETTE.textSecondary.b);
+        }
+        buf.writeAt(rect.row + rect.height - 2, rect.col + 2, 'ESC / q : close    1 / 2 / 3 : switch unit', c.r, c.g, c.b);
+    }
+    writeCentered(buf, row, rect, text, color, attrs = ATTR_NONE) {
+        const x = rect.col + Math.max(1, Math.floor((rect.width - stringDisplayWidth(text)) / 2));
+        buf.writeAt(row, x, text, color.r, color.g, color.b, 0, 0, 0, attrs);
+    }
+}
+function colorFromState(content) {
+    if (content.state === 'complete' && content.vote)
+        return voteColor(content.vote);
+    if (content.state === 'error' || content.state === 'berserk')
+        return EVA_PALETTE.warning;
+    if (content.state === 'offline')
+        return EVA_PALETTE.abstain;
+    return unitColor(content.unit);
+}
+function bracketedVote(vote) {
+    return vote === 'APPROVE'
+        ? '<< APPROVE >>'
+        : vote === 'REJECT'
+            ? '<< REJECT >>'
+            : '<< ABSTAIN >>';
+}
+// ── Markdown stripping ──────────────────────────────────────
+/** Strip common markdown formatting for TUI plain-text display. */
+export function stripMarkdown(text) {
+    return text
+        .replace(/^```[^\n]*\n?/gm, '') // fenced code block delimiters only (keep content)
+        .replace(/^#{1,6}\s+/gm, '') // heading markers (line-anchored)
+        .replace(/\*\*(.+?)\*\*/g, '$1') // bold **text**
+        .replace(/__(.+?)__/g, '$1') // bold __text__
+        .replace(/(?<=^|\s)\*([^\s*].*?[^\s*])\*(?=\s|$)/gm, '$1') // italic *text*
+        .replace(/`([^`]+)`/g, '$1') // inline code `text`
+        .replace(/^[-*+]\s/gm, '・ ') // bullet lists → ・ (with space)
+        .replace(/\n{3,}/g, '\n\n') // collapse excessive blank lines
+        .trim();
+}
+// ── Text wrapping ────────────────────────────────────────────
+/** Wrap a text string into lines that fit within maxWidth display columns (CJK-aware). */
+function wrapText(text, maxWidth) {
+    if (maxWidth <= 0)
+        return [];
+    const result = [];
+    // First split on explicit newlines, then wrap each segment
+    for (const segment of text.split('\n')) {
+        if (segment.length === 0) {
+            result.push('');
+            continue;
+        }
+        let line = '';
+        let lineWidth = 0;
+        for (const ch of segment) {
+            const cw = charDisplayWidth(ch.codePointAt(0) ?? 0);
+            if (lineWidth + cw > maxWidth) {
+                result.push(line);
+                line = ch;
+                lineWidth = cw;
+            }
+            else {
+                line += ch;
+                lineWidth += cw;
+            }
+        }
+        if (line)
+            result.push(line);
+    }
+    return result;
+}

package/dist/src/tui/screen-buffer.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Double-buffered virtual screen with diff-based rendering.
+ * Only changed cells are written to the terminal.
+ */
+export declare const ATTR_NONE = 0;
+export declare const ATTR_BOLD = 1;
+export declare const ATTR_DIM = 2;
+export interface Cell {
+    char: string;
+    fgR: number;
+    fgG: number;
+    fgB: number;
+    bgR: number;
+    bgG: number;
+    bgB: number;
+    attrs: number;
+}
+export declare function charDisplayWidth(code: number): 0 | 1 | 2;
+export declare function stringDisplayWidth(str: string): number;
+/** Truncate text to fit within maxWidth display columns (CJK-aware). */
+export declare function truncateToDisplayWidth(text: string, maxWidth: number): string;
+export declare class ScreenBuffer {
+    private front;
+    private back;
+    cols: number;
+    rows: number;
+    constructor(cols: number, rows: number);
+    private createGrid;
+    /**
+     * Write text at (row, col) with optional colors and attributes.
+     * Row/col are 0-based. Out-of-bounds writes are clipped.
+     */
+    writeAt(row: number, col: number, text: string, fgR?: number, fgG?: number, fgB?: number, bgR?: number, bgG?: number, bgB?: number, attrs?: number): void;
+    /**
+     * Write a raw ANSI-colored string at (row, col).
+     * ANSI codes are stripped for cell placement; only the visible text occupies cells.
+     * Note: this is a convenience for simple colored text. For full control, use writeAt.
+     */
+    writeRaw(row: number, col: number, text: string): void;
+    /** Clear a rectangular region in the back buffer. */
+    clearRect(row: number, col: number, width: number, height: number): void;
+    /** Clear the entire back buffer. */
+    clear(): void;
+    /**
+     * Compute diff between front and back, return ANSI string.
+     * Does NOT call stdout.write — caller decides when to flush.
+     * After flush, back becomes the new front.
+     */
+    flush(): string;
+    /** Resize both buffers (contents are lost). */
+    resize(cols: number, rows: number): void;
+    /** Force full redraw on next flush by clearing front buffer. */
+    invalidate(): void;
+}

package/dist/src/tui/screen-buffer.js

@@ -0,0 +1,262 @@
+/**
+ * Double-buffered virtual screen with diff-based rendering.
+ * Only changed cells are written to the terminal.
+ */
+import { moveTo, fg, bg, RESET, BOLD, DIM, SYNC_BEGIN, SYNC_END } from './ansi.js';
+// ── Attribute bitmask ───────────────────────────────────────
+export const ATTR_NONE = 0;
+export const ATTR_BOLD = 1;
+export const ATTR_DIM = 2;
+function emptyCell() {
+    return { char: ' ', fgR: 255, fgG: 255, fgB: 255, bgR: 0, bgG: 0, bgB: 0, attrs: ATTR_NONE };
+}
+function cellsEqual(a, b) {
+    return a.char === b.char
+        && a.fgR === b.fgR && a.fgG === b.fgG && a.fgB === b.fgB
+        && a.bgR === b.bgR && a.bgG === b.bgG && a.bgB === b.bgB
+        && a.attrs === b.attrs;
+}
+// ── CJK width detection (simplified) ────────────────────────
+export function charDisplayWidth(code) {
+    // Control characters
+    if (code <= 0x1F || (code >= 0x7F && code <= 0x9F))
+        return 0;
+    // Combining diacritical marks
+    if ((code >= 0x0300 && code <= 0x036F) ||
+        (code >= 0x1AB0 && code <= 0x1AFF) ||
+        (code >= 0x1DC0 && code <= 0x1DFF) ||
+        (code >= 0x20D0 && code <= 0x20FF) ||
+        (code >= 0xFE20 && code <= 0xFE2F))
+        return 0;
+    // Zero-width characters (ZWSP, ZWNJ, ZWJ, BOM) and Variation Selectors
+    if (code === 0x200B || code === 0x200C || code === 0x200D || code === 0xFEFF)
+        return 0;
+    if (code >= 0xFE00 && code <= 0xFE0F)
+        return 0; // Variation Selectors
+    // CJK and fullwidth ranges (width 2)
+    if ((code >= 0x1100 && code <= 0x115F) || // Hangul Jamo
+        (code >= 0x2E80 && code <= 0x303E) || // CJK Radicals, Kangxi, Symbols
+        (code >= 0x3041 && code <= 0x33BF) || // Hiragana, Katakana, CJK compatibility
+        (code >= 0x3400 && code <= 0x4DBF) || // CJK Extension A
+        (code >= 0x4E00 && code <= 0x9FFF) || // CJK Unified Ideographs
+        (code >= 0xA000 && code <= 0xA4CF) || // Yi
+        (code >= 0xAC00 && code <= 0xD7AF) || // Hangul Syllables
+        (code >= 0xF900 && code <= 0xFAFF) || // CJK Compatibility Ideographs
+        (code >= 0xFE30 && code <= 0xFE4F) || // CJK Compatibility Forms
+        (code >= 0xFF01 && code <= 0xFF60) || // Fullwidth Forms
+        (code >= 0xFFE0 && code <= 0xFFE6) || // Fullwidth Signs
+        (code >= 0x20000 && code <= 0x2FA1F) // CJK Extension B-F
+    )
+        return 2;
+    // Emoji ranges (width 2) — supplementary plane emoji that reliably render double-width
+    if ((code >= 0x1F300 && code <= 0x1F9FF) || // Misc Symbols & Pictographs, Emoticons, Supp Symbols
+        (code >= 0x1FA00 && code <= 0x1FA6F) || // Chess Symbols, Extended-A
+        (code >= 0x1FA70 && code <= 0x1FAFF)) // Symbols and Pictographs Extended-A
+        return 2;
+    return 1;
+}
+export function stringDisplayWidth(str) {
+    let width = 0;
+    for (const ch of str) {
+        width += charDisplayWidth(ch.codePointAt(0) ?? 0);
+    }
+    return width;
+}
+/** Truncate text to fit within maxWidth display columns (CJK-aware). */
+export function truncateToDisplayWidth(text, maxWidth) {
+    let width = 0;
+    let result = '';
+    for (const ch of text) {
+        const cw = charDisplayWidth(ch.codePointAt(0) ?? 0);
+        if (width + cw > maxWidth) {
+            if (width + 1 <= maxWidth)
+                result += '…';
+            break;
+        }
+        result += ch;
+        width += cw;
+    }
+    return result;
+}
+// ── ScreenBuffer ────────────────────────────────────────────
+export class ScreenBuffer {
+    front;
+    back;
+    cols;
+    rows;
+    constructor(cols, rows) {
+        this.cols = cols;
+        this.rows = rows;
+        this.front = this.createGrid();
+        this.back = this.createGrid();
+    }
+    createGrid() {
+        return Array.from({ length: this.rows }, () => Array.from({ length: this.cols }, emptyCell));
+    }
+    /**
+     * Write text at (row, col) with optional colors and attributes.
+     * Row/col are 0-based. Out-of-bounds writes are clipped.
+     */
+    writeAt(row, col, text, fgR = 255, fgG = 255, fgB = 255, bgR = 0, bgG = 0, bgB = 0, attrs = ATTR_NONE) {
+        if (row < 0 || row >= this.rows)
+            return;
+        let c = col;
+        for (const ch of text) {
+            if (c >= this.cols)
+                break;
+            if (c < 0) {
+                c += charDisplayWidth(ch.codePointAt(0) ?? 0);
+                continue;
+            }
+            const w = charDisplayWidth(ch.codePointAt(0) ?? 0);
+            // Zero-width characters (combining marks, ZWJ, etc.) — skip without advancing
+            if (w === 0)
+                continue;
+            const backRow = this.back[row];
+            const existing = backRow[c];
+            // HIGH-11: Wide char would overflow rightmost column — replace with space
+            if (w === 2 && c + 1 >= this.cols) {
+                backRow[c] = { char: ' ', fgR, fgG, fgB, bgR, bgG, bgB, attrs };
+                c += 1;
+                continue;
+            }
+            // Clean up orphaned cells when overwriting wide characters.
+            // Placeholder cells (char='') are only created by wide char writes (w===2),
+            // so checking backRow[c+1].char==='' reliably identifies wide char continuation.
+            // Case 1: overwriting first cell of existing wide char with narrow char → clear placeholder
+            if (w === 1 && c + 1 < this.cols && backRow[c + 1].char === '' && existing.char !== '') {
+                backRow[c + 1] = emptyCell();
+            }
+            // Case 2: overwriting placeholder (second half of wide char) → clear first half
+            if (c > 0 && existing.char === '') {
+                backRow[c - 1] = emptyCell();
+            }
+            backRow[c] = { char: ch, fgR, fgG, fgB, bgR, bgG, bgB, attrs };
+            // For wide chars, fill the next cell with a placeholder
+            if (w === 2 && c + 1 < this.cols) {
+                backRow[c + 1] = { char: '', fgR, fgG, fgB, bgR, bgG, bgB, attrs };
+            }
+            c += w;
+        }
+    }
+    /**
+     * Write a raw ANSI-colored string at (row, col).
+     * ANSI codes are stripped for cell placement; only the visible text occupies cells.
+     * Note: this is a convenience for simple colored text. For full control, use writeAt.
+     */
+    writeRaw(row, col, text) {
+        if (row < 0 || row >= this.rows)
+            return;
+        // Strip ANSI for display width calculation is not needed here —
+        // callers should use writeAt with explicit colors instead.
+        this.writeAt(row, col, text);
+    }
+    /** Clear a rectangular region in the back buffer. */
+    clearRect(row, col, width, height) {
+        for (let r = row; r < row + height && r < this.rows; r++) {
+            if (r < 0)
+                continue;
+            for (let c = col; c < col + width && c < this.cols; c++) {
+                if (c < 0)
+                    continue;
+                this.back[r][c] = emptyCell();
+            }
+        }
+    }
+    /** Clear the entire back buffer. */
+    clear() {
+        this.clearRect(0, 0, this.cols, this.rows);
+    }
+    /**
+     * Compute diff between front and back, return ANSI string.
+     * Does NOT call stdout.write — caller decides when to flush.
+     * After flush, back becomes the new front.
+     */
+    flush() {
+        let out = SYNC_BEGIN;
+        let lastRow = -1;
+        let lastCol = -1;
+        // HIGH-13: Track current styling state to avoid redundant escape sequences
+        let curFgR = -1, curFgG = -1, curFgB = -1;
+        let curBgR = -1, curBgG = -1, curBgB = -1;
+        let curAttrs = -1;
+        let styled = false; // whether any style has been emitted (needs final RESET)
+        for (let r = 0; r < this.rows; r++) {
+            const backRow = this.back[r];
+            const frontRow = this.front[r];
+            for (let c = 0; c < this.cols; c++) {
+                const backCell = backRow[c];
+                const frontCell = frontRow[c];
+                if (cellsEqual(backCell, frontCell))
+                    continue;
+                // Skip wide-char placeholder cells — the terminal already advanced
+                // the cursor past this position when the wide char was printed.
+                // Emitting a space here would fragment CJK text (e.g. "補 完" instead of "補完").
+                if (backCell.char === '') {
+                    frontRow[c] = { ...backCell };
+                    continue;
+                }
+                // Position cursor if not contiguous
+                if (r !== lastRow || c !== lastCol) {
+                    out += moveTo(r + 1, c + 1); // moveTo is 1-based
+                }
+                // Build cell output — only emit escape codes when they differ from current state
+                const needsAttrChange = backCell.attrs !== curAttrs;
+                if (needsAttrChange) {
+                    // Attrs changed — must reset first to clear bold/dim, then re-apply
+                    if (styled)
+                        out += RESET;
+                    curFgR = -1;
+                    curFgG = -1;
+                    curFgB = -1; // force re-emit after reset
+                    curBgR = -1;
+                    curBgG = -1;
+                    curBgB = -1;
+                    if (backCell.attrs & ATTR_BOLD)
+                        out += BOLD;
+                    if (backCell.attrs & ATTR_DIM)
+                        out += DIM;
+                    curAttrs = backCell.attrs;
+                }
+                if (backCell.fgR !== curFgR || backCell.fgG !== curFgG || backCell.fgB !== curFgB) {
+                    out += fg(backCell.fgR, backCell.fgG, backCell.fgB);
+                    curFgR = backCell.fgR;
+                    curFgG = backCell.fgG;
+                    curFgB = backCell.fgB;
+                }
+                if (backCell.bgR !== curBgR || backCell.bgG !== curBgG || backCell.bgB !== curBgB) {
+                    out += bg(backCell.bgR, backCell.bgG, backCell.bgB);
+                    curBgR = backCell.bgR;
+                    curBgG = backCell.bgG;
+                    curBgB = backCell.bgB;
+                }
+                out += backCell.char;
+                styled = true;
+                // Copy to front
+                frontRow[c] = { ...backCell };
+                lastRow = r;
+                lastCol = c + charDisplayWidth(backCell.char.codePointAt(0) ?? 0);
+            }
+        }
+        // Emit a final RESET to leave terminal in clean state
+        if (styled)
+            out += RESET;
+        out += SYNC_END;
+        return out;
+    }
+    /** Resize both buffers (contents are lost). */
+    resize(cols, rows) {
+        this.cols = cols;
+        this.rows = rows;
+        this.front = this.createGrid();
+        this.back = this.createGrid();
+    }
+    /** Force full redraw on next flush by clearing front buffer. */
+    invalidate() {
+        for (let r = 0; r < this.rows; r++) {
+            for (let c = 0; c < this.cols; c++) {
+                this.front[r][c] = { ...emptyCell(), char: '\x00' }; // sentinel
+            }
+        }
+    }
+}

package/dist/src/tui/status-bar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Bottom status bar renderer.
+ * Shows phase, round, elapsed time, and system indicators.
+ */
+import type { ScreenBuffer } from './screen-buffer.js';
+import type { Rect } from './layout.js';
+import type { ConsensusDecision } from '../types/consensus.js';
+export interface StatusData {
+    phase: string;
+    roundNumber: number;
+    maxRounds: number;
+    elapsedMs: number;
+    decision?: ConsensusDecision;
+    fromCache?: boolean;
+    atFieldLevel?: number | 'MAX';
+    warning?: string;
+    showPrompt?: boolean;
+    modeLabel?: string;
+    alertCode?: string;
+    umbilicalStatus?: string;
+    syncSummary?: string;
+}
+export declare class StatusBarRenderer {
+    drawStatusBar(buf: ScreenBuffer, rect: Rect, data: StatusData): void;
+}