pirl-framework-cli 0.0.0-stage → 1.0.1

package/dist/ui/browse.js

@@ -0,0 +1,144 @@
+import { readFileSync } from 'node:fs';
+import { basename } from 'node:path';
+import { LAYER_LABELS } from '../engine/types.js';
+import { blank, hanging } from './lines.js';
+import { markdownLines, STATUS_LABELS } from './runView.js';
+/** The entries of /plans, /records and /resume, and what each one shows when opened (src/ui/listOverlay.ts). */
+/** The pointer and the row's own lines: the chosen row is marked and drawn in the accent color. */
+function row(active, theme, columns, head, text, rest = []) {
+    const pointer = { text: active ? `${theme.glyphs.pointer} ` : '  ', color: 'accent' };
+    const first = hanging([pointer, ...head], text, columns, active ? { color: 'accent', bold: true } : {});
+    return [...first, ...rest.map(line => [{ text: '  ' }, ...line])];
+}
+/** A Plan or report file: its frontmatter as "field: value" lines, then the Markdown body. */
+export function documentLines(path, columns) {
+    let text;
+    try {
+        text = readFileSync(path, 'utf8');
+    }
+    catch (error) {
+        return hanging([], `Không đọc được ${path}: ${error instanceof Error ? error.message : String(error)}`, columns, { color: 'danger' });
+    }
+    const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text);
+    const lines = [];
+    if (match) {
+        for (const field of match[1].split(/\r?\n/)) {
+            const pair = /^([\w-]+):\s*(.*)$/.exec(field);
+            if (pair)
+                lines.push(...hanging([{ text: `${pair[1]}: `, dim: true }], pair[2].replace(/^"(.*)"$/, '$1'), columns));
+        }
+        lines.push(blank);
+    }
+    lines.push(...markdownLines(match ? text.slice(match[0].length) : text, columns));
+    lines.push(blank, ...hanging([{ text: 'File: ', dim: true }], path, columns, { dim: true }));
+    return lines;
+}
+export function planEntries(packages, theme) {
+    const entries = [];
+    for (const item of packages) {
+        entries.push({ render: () => [blank, [{ text: item.planSet, bold: true, color: 'accent' }]] });
+        for (const task of item.tasks) {
+            const tone = task.status === 'implemented' ? 'success' : task.status === 'failed' || task.status === 'blocked' ? 'danger' : 'warning';
+            entries.push({
+                render: (active, columns) => row(active, theme, columns, [{ text: `${task.taskId} `, bold: true }, { text: `[${task.status}] `, color: tone }], task.title),
+                open: () => ({ title: `${task.taskId} ${task.title}`, lines: columns => documentLines(task.file, columns) }),
+            });
+            for (const report of item.reports.filter(report => report.taskId === task.taskId)) {
+                const verdictTone = report.verdict === 'PASS' ? 'success' : report.verdict === 'FAIL' ? 'danger' : 'warning';
+                entries.push({
+                    render: (active, columns) => row(active, theme, columns, [{ text: '  Review vòng ' }, { text: `${report.round}: ` }, { text: report.verdict, color: verdictTone }, { text: '  ' }], basename(report.file)),
+                    open: () => ({ title: `${task.taskId} · Review vòng ${report.round}: ${report.verdict}`, lines: columns => documentLines(report.file, columns) }),
+                });
+            }
+        }
+    }
+    return entries;
+}
+const text = (value) => (value === null || value === undefined ? '' : typeof value === 'string' ? value : JSON.stringify(value));
+const list = (value) => (Array.isArray(value) ? value : []);
+/** A record laid out by section: what the run did, its roles, the issues found and the improvements made. */
+export function recordLines(data, columns, theme) {
+    const g = theme.glyphs;
+    const field = (label, value) => (text(value) ? hanging([{ text: `${label}: `, dim: true }], text(value), columns) : []);
+    const section = (title) => [blank, [{ text: title, bold: true, color: 'accent' }]];
+    const outcome = (data['outcome'] ?? {});
+    const task = (data['task'] ?? {});
+    const audit = (data['audit'] ?? {});
+    const lines = [
+        ...field('Layer', data['layer']),
+        ...field('Thời điểm', data['recorded_at']),
+        ...field('Plan', task['plan_set']),
+        ...field('Task', list(task['task_ids']).length ? task['task_ids'].join(', ') : task['task_ids']),
+        ...field('Report', task['report_file']),
+        ...field('Repo', data['target_repo']),
+        ...field('Kết quả', [outcome['status'], outcome['verdict']].filter(Boolean).join(' · ')),
+        ...field('Tóm tắt', outcome['summary']),
+    ];
+    lines.push(...section('Role'));
+    for (const role of list(data['roles'])) {
+        const tone = role['result'] === 'PASS' ? 'success' : role['result'] === 'FAIL' ? 'danger' : 'warning';
+        lines.push([{ text: `${text(role['role'])} `, bold: true }, { text: `${text(role['mode'])} `, dim: true }, { text: text(role['result']), color: tone }]);
+        if (text(role['assignment']))
+            lines.push(...hanging([{ text: '  ' }], text(role['assignment']), columns, { dim: true }));
+    }
+    lines.push(...field('Tự đánh giá', `process-auditor · ${text(audit['mode'])} · ${text(audit['result'])}`));
+    const issues = list(data['issues']);
+    lines.push(...section(`Vấn đề (${issues.length})`));
+    if (issues.length === 0)
+        lines.push([{ text: 'Không có.', dim: true }]);
+    for (const issue of issues) {
+        lines.push(...hanging([{ text: `${g.warn} `, color: 'warning' }, { text: `${text(issue['id'])} `, bold: true }], `${text(issue['issue_key'])} · ${text(issue['role'])} · nguyên nhân ${text(issue['cause'])}`, columns));
+        for (const [label, key] of [['Quyết định sai', 'decision'], ['Quy tắc', 'rule'], ['Bằng chứng', 'evidence'], ['Sửa trước đó', 'prior_fix']]) {
+            if (text(issue[key]))
+                lines.push(...hanging([{ text: '  ' }, { text: `${label}: `, dim: true }], text(issue[key]), columns));
+        }
+    }
+    const fixes = list(data['fixes']);
+    lines.push(...section(`Cải tiến (${fixes.length})`));
+    if (fixes.length === 0)
+        lines.push([{ text: 'Không có.', dim: true }]);
+    for (const fix of fixes) {
+        const applied = fix['status'] === 'applied';
+        lines.push(...hanging([{ text: `${applied ? g.ok : g.pending} `, color: applied ? 'success' : 'warning' }, { text: `${text(fix['id'])} `, bold: true }], `${applied ? 'đã áp dụng' : `chờ duyệt (${text(fix['reason'])})`} · cho ${list(fix['issues']).length ? fix['issues'].join(', ') : text(fix['issues'])}`, columns));
+        for (const file of list(fix['files']))
+            lines.push(...hanging([{ text: '  ' }], `${text(file['path'])} · ${text(file['section'])}`, columns, { dim: true }));
+        if (text(fix['summary']))
+            lines.push(...hanging([{ text: '  ' }], text(fix['summary']), columns));
+        for (const check of list(fix['checks']))
+            lines.push(...hanging([{ text: '  $ ', dim: true }], text(check), columns, { dim: true }));
+    }
+    if (data['supersedes'] || data['evaluates'])
+        lines.push(blank, ...field('Sửa record', data['supersedes']), ...field('Đánh giá record', data['evaluates']));
+    return lines;
+}
+export function recordEntries(records, theme) {
+    const g = theme.glyphs;
+    return records.map(record => ({
+        render: (active, columns) => {
+            const fixes = record.fixes > 0 || record.pending > 0 ? ` ${g.sep} ${record.fixes} cải tiến đã áp dụng${record.pending ? `, ${record.pending} chờ duyệt` : ''}` : '';
+            return [blank, ...row(active, theme, columns, [], `${record.recordId}  ${record.layer} ${g.sep} ${record.status}${fixes}`, hanging([{ text: '  ' }], record.summary, columns - 2, { dim: true }))];
+        },
+        open: () => ({ title: record.recordId, lines: columns => recordLines(record.data, columns, theme) }),
+    }));
+}
+/** When a run was saved, as "24/10 14:05". */
+const when = (iso) => {
+    const date = iso ? new Date(iso) : null;
+    if (!date || Number.isNaN(date.getTime()))
+        return '';
+    const two = (value) => String(value).padStart(2, '0');
+    return `${two(date.getDate())}/${two(date.getMonth() + 1)} ${two(date.getHours())}:${two(date.getMinutes())}`;
+};
+export function resumeEntries(runs, theme, pick) {
+    const g = theme.glyphs;
+    return runs.map(run => ({
+        render: (active, columns) => {
+            const waiting = run.status === 'waiting' && run.questions.length ? ` ${g.sep} ${run.questions.length} câu hỏi chờ trả lời` : '';
+            return [
+                blank,
+                ...row(active, theme, columns, [{ text: `${LAYER_LABELS[run.kind]} `, bold: true }, { text: `${STATUS_LABELS[run.status]}${waiting} `, color: 'warning' }, { text: when(run.savedAt), dim: true }], '', hanging([{ text: '  ' }], run.request.split('\n')[0], columns - 2, { dim: true })),
+            ];
+        },
+        act: () => pick(run),
+    }));
+}

package/dist/ui/components/Header.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { lineWidth } from '../lines.js';
+import { truncateEnd, truncateMiddle } from '../text.js';
+import { Lines } from './Lines.js';
+/**
+ * One header row. When it does not fit, the update notice goes first, then the framework version;
+ * then the repository name is shortened in the middle; the provider goes only when even that is not enough.
+ */
+export function headerLine(info, provider, mode, columns, theme) {
+    const g = theme.glyphs;
+    const sep = { text: ` ${g.sep} `, color: 'border' };
+    const target = info.target;
+    const repoName = target.kind === 'git' ? target.name : 'không có git repo';
+    const branch = target.kind === 'git' && target.branch && mode === 'full' ? ` (${target.branch})` : '';
+    const repoStyle = { bold: true, color: target.kind === 'git' ? undefined : 'warning' };
+    const repo = (name, withBranch) => [{ text: name, ...repoStyle }, ...(withBranch && branch ? [{ text: branch, dim: true }] : [])];
+    const glyph = { ok: g.ok, warn: g.warn, fail: g.fail, checking: g.pending }[provider.state];
+    const tone = { ok: 'success', warn: 'warning', fail: 'danger', checking: 'muted' };
+    const providerSpans = [{ text: `${glyph} `, color: tone[provider.state] }, { text: provider.label }];
+    const improvements = info.hub && info.hub.localImprovements > 0 ? ` (+${info.hub.localImprovements} cải tiến)` : '';
+    const framework = mode === 'full' && info.hub ? [{ text: `${info.hub.upstreamTag ?? 'framework'}${improvements}`, dim: true }] : null;
+    const update = info.hub?.updateAvailable ? [{ text: `${g.warn} Có framework mới`, color: 'warning' }] : null;
+    const brand = [{ text: 'PIRL', color: 'accent', bold: true }];
+    const join = (...parts) => parts.filter((part) => part !== null).flatMap((part, index) => (index === 0 ? part : [sep, ...part]));
+    const withRight = (left, right) => {
+        const gap = columns - lineWidth(left) - lineWidth(right);
+        return gap >= 2 ? [...left, { text: ' '.repeat(gap) }, ...right] : [];
+    };
+    const MIN_REPO = 8;
+    const candidates = [
+        () => (update ? withRight(join(brand, repo(repoName, true), providerSpans, framework), update) : []),
+        () => join(brand, repo(repoName, true), providerSpans, framework),
+        () => join(brand, repo(repoName, true), providerSpans),
+        () => join(brand, repo(repoName, false), providerSpans),
+        () => {
+            const room = columns - lineWidth(join(brand, [{ text: '' }], providerSpans));
+            return room >= MIN_REPO ? join(brand, repo(truncateMiddle(repoName, room, g.ellipsis), false), providerSpans) : [];
+        },
+        () => {
+            const room = columns - lineWidth(join(brand, [{ text: '' }]));
+            return join(brand, repo(truncateMiddle(repoName, Math.max(1, room), g.ellipsis), false));
+        },
+    ];
+    for (const candidate of candidates) {
+        const line = candidate();
+        if (line.length > 0 && lineWidth(line) <= columns)
+            return line;
+    }
+    return [{ text: truncateEnd('PIRL', columns, g.ellipsis), color: 'accent', bold: true }];
+}
+export function Header(props) {
+    return props.columns > 0 ? _jsx(Lines, { lines: [headerLine(props.info, props.provider, props.mode, props.columns, props.theme)], theme: props.theme }) : _jsx(Text, {});
+}

package/dist/ui/components/Input.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { commandUsage } from '../../commands/registry.js';
+import { layoutEditor } from '../inputEditor.js';
+import { graphemes, padEnd, truncateEnd, width } from '../text.js';
+import { Lines } from './Lines.js';
+export const PLACEHOLDER = 'Gõ / để xem lệnh, @ để đính kèm file, hoặc nhập yêu cầu';
+/** Lines inside the input box: the prompt, the wrapped text and the cursor as an inverse cell. */
+export function inputLines(editor, columns, maxLines, theme, focused, placeholder = PLACEHOLDER) {
+    const prompt = `${theme.glyphs.prompt} `;
+    const room = Math.max(1, columns - width(prompt));
+    if (editor.value === '') {
+        return [
+            [
+                { text: prompt, color: 'accent', bold: true },
+                ...(focused ? [{ text: ' ', inverse: true }] : []),
+                { text: truncateEnd(placeholder, room - 1, theme.glyphs.ellipsis), dim: true },
+            ],
+        ];
+    }
+    const layout = layoutEditor(editor, room);
+    // Keep the cursor's line in view when the text is taller than the box.
+    const first = Math.max(0, Math.min(layout.cursorLine - maxLines + 1, layout.lines.length - maxLines));
+    const shown = layout.lines.slice(first, first + maxLines);
+    return shown.map((text, index) => {
+        const lineIndex = first + index;
+        const lead = { text: lineIndex === 0 ? prompt : ' '.repeat(width(prompt)), color: 'accent', bold: true };
+        if (!focused || lineIndex !== layout.cursorLine)
+            return [lead, { text }];
+        const parts = graphemes(text);
+        let column = 0;
+        let split = parts.length;
+        for (let i = 0; i < parts.length; i++) {
+            if (column >= layout.cursorColumn) {
+                split = i;
+                break;
+            }
+            column += width(parts[i]);
+        }
+        const before = parts.slice(0, split).join('');
+        const at = parts[split] ?? ' ';
+        const after = parts.slice(split + 1).join('');
+        return [lead, { text: before }, { text: at, inverse: true }, { text: after }];
+    });
+}
+export function inputHeight(editor, columns, maxLines, theme) {
+    if (editor.value === '')
+        return 1;
+    const room = Math.max(1, columns - width(`${theme.glyphs.prompt} `));
+    return Math.min(maxLines, layoutEditor(editor, room).lines.length);
+}
+export function InputBox(props) {
+    const inner = props.columns - 4;
+    return (_jsx(Box, { borderStyle: props.theme.border, borderColor: props.theme.fg(props.focused ? 'accent' : 'border'), paddingX: 1, width: props.columns, flexDirection: "column", children: _jsx(Lines, { lines: inputLines(props.editor, inner, props.maxLines, props.theme, props.focused, props.placeholder), theme: props.theme }) }));
+}
+export const commandItem = (spec) => ({ label: commandUsage(spec), summary: spec.summary });
+/** Suggestions under the input box while a command name or an `@` mention is being typed. */
+export function paletteLines(items, selected, max, columns, theme) {
+    const start = Math.min(Math.max(0, selected - max + 1), Math.max(0, items.length - max));
+    const shown = items.slice(start, start + max);
+    // A long path keeps its room; the summary shows only where at least 16 columns are left for it.
+    const nameWidth = Math.min(Math.max(...items.map(item => width(item.label))) + 2, Math.max(8, columns - 4 - 16));
+    const showSummary = items.some(item => item.summary) && columns - 4 - nameWidth >= 16;
+    return shown.map((item, index) => {
+        const active = start + index === selected;
+        const pointer = { text: active ? `${theme.glyphs.pointer} ` : '  ', color: 'accent' };
+        if (!showSummary)
+            return [{ text: ' ' }, pointer, { text: truncateEnd(item.label, columns - 4, theme.glyphs.ellipsis), color: active ? 'accent' : undefined, bold: active }];
+        return [
+            { text: ' ' },
+            pointer,
+            { text: padEnd(truncateEnd(item.label, nameWidth - 2, theme.glyphs.ellipsis), nameWidth), color: active ? 'accent' : undefined, bold: active },
+            { text: truncateEnd(item.summary, columns - 3 - nameWidth - 1, theme.glyphs.ellipsis), dim: !active },
+        ];
+    });
+}

package/dist/ui/components/Lines.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { formatElapsed } from '../../engine/run.js';
+import { SPINNER_MS, useNow } from '../ticker.js';
+export function SpanText({ span, theme }) {
+    if (span.live)
+        return _jsx(LiveText, { span: span, live: span.live, theme: theme });
+    const color = span.role ? theme.role(span.role) : span.color ? theme.fg(span.color) : undefined;
+    return (_jsx(Text, { color: color, bold: span.bold, dimColor: span.dim, inverse: span.inverse, children: span.text }));
+}
+/** Redrawn on every tick by itself; the rest of the screen is left alone. */
+function LiveText({ span, live, theme }) {
+    const now = useNow();
+    const text = live.kind === 'spinner' ? live.frames[Math.floor(now / SPINNER_MS) % live.frames.length] : formatElapsed(now - live.since);
+    return _jsx(SpanText, { span: { ...span, live: undefined, text }, theme: theme });
+}
+/** Draws lines that were already laid out for this width; each line is exactly one terminal row. */
+export function Lines({ lines, theme }) {
+    return (_jsx(Box, { flexDirection: "column", children: lines.map((line, index) => (_jsx(Text, { wrap: "truncate-end", children: line.length === 0 ? ' ' : line.map((span, i) => _jsx(SpanText, { span: span, theme: theme }, i)) }, index))) }));
+}
+/**
+ * The rows of `lines` shown in `height` rows, starting at line `top`. A row is kept free for a
+ * "more above" or "more below" marker when there is hidden content, so a marker never covers a line.
+ */
+export function topWindow(lines, height, top) {
+    if (lines.length <= height)
+        return { lines, above: 0, below: 0 };
+    const rows = Math.max(1, height);
+    // The last page shows the end of the content under a single "above" marker.
+    const lastStart = lines.length - Math.max(1, rows - 1);
+    const start = Math.min(Math.max(0, top), lastStart);
+    let room = rows - (start > 0 ? 1 : 0);
+    if (start + room < lines.length)
+        room = Math.max(1, room - 1);
+    const end = Math.min(lines.length, start + room);
+    return { lines: lines.slice(start, end), above: start, below: lines.length - end };
+}
+/** The same window counted from the bottom: `scroll` lines up from the newest line (0 = newest). */
+export function bottomWindow(lines, height, scroll) {
+    if (lines.length <= height)
+        return { lines, above: 0, below: 0 };
+    const rows = Math.max(1, height);
+    const offset = Math.min(Math.max(0, scroll), lines.length - Math.max(1, rows - 1));
+    let room = rows - (offset > 0 ? 1 : 0);
+    if (lines.length - offset - room > 0)
+        room = Math.max(1, room - 1);
+    const end = lines.length - offset;
+    const start = Math.max(0, end - room);
+    return { lines: lines.slice(start, end), above: start, below: lines.length - end };
+}

package/dist/ui/components/Panels.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { blank, hanging } from '../lines.js';
+import { displayPath } from '../../core/paths.js';
+import { quotaPanelLines, runPanelLines } from '../runView.js';
+import { padEnd, truncateEnd, truncateMiddle, width } from '../text.js';
+import { Lines, topWindow } from './Lines.js';
+/** A bordered panel with a title row; content beyond its height scrolls and shows how much is hidden. */
+export function Frame(props) {
+    const { theme } = props;
+    const inner = props.width - 4;
+    const contentHeight = Math.max(0, props.height - 3);
+    const window = topWindow(props.lines, contentHeight, props.top ?? 0);
+    const title = [{ text: truncateEnd(props.title, Math.max(1, inner - (props.hint ? width(props.hint) + 2 : 0)), theme.glyphs.ellipsis), bold: true, color: 'accent' }];
+    if (props.hint && width(props.title) + width(props.hint) + 2 <= inner) {
+        title.push({ text: ' '.repeat(inner - width(props.title) - width(props.hint)) }, { text: props.hint, dim: true });
+    }
+    const body = [
+        ...(window.above > 0 ? [[{ text: `${theme.glyphs.up} còn ${window.above} dòng (PgUp)`, dim: true }]] : []),
+        ...window.lines,
+        ...(window.below > 0 ? [[{ text: `${theme.glyphs.down} còn ${window.below} dòng (PgDn)`, dim: true }]] : []),
+    ];
+    return (_jsxs(Box, { borderStyle: theme.border, borderColor: theme.fg(props.active ? 'accent' : 'border'), paddingX: 1, width: props.width, height: props.height, flexDirection: "column", overflow: "hidden", children: [_jsx(Lines, { lines: [title], theme: theme }), _jsx(Lines, { lines: body, theme: theme })] }));
+}
+export function sidePanelLines(info, provider, columns, theme, run = null, live, extras = {}) {
+    const g = theme.glyphs;
+    const labelWidth = 11;
+    const row = (label, value, extra = {}) => {
+        const room = Math.max(4, columns - labelWidth);
+        return [[{ text: padEnd(label, labelWidth), dim: true }, { text: truncateMiddle(value, room, g.ellipsis), ...extra }]];
+    };
+    const target = info.target;
+    const providerTone = { ok: 'success', warn: 'warning', fail: 'danger', checking: 'muted' };
+    const providerText = { ok: 'sẵn sàng', warn: 'cần kiểm tra', fail: 'chưa sẵn sàng', checking: 'đang kiểm tra' }[provider.state];
+    const head = [
+        ...(target.kind === 'git'
+            ? [...row('Repo', displayPath(target.root)), ...row('Nhánh', target.branch ?? '—')]
+            : row('Repo', target.reason, { color: 'warning' })),
+        ...row('Provider', `${provider.label} · ${providerText}`, { color: providerTone[provider.state] }),
+        ...(extras.model ? row('Model', extras.model) : []),
+        ...row('Framework', info.hub ? `${info.hub.upstreamTag ?? '—'} · ${info.hub.localImprovements} cải tiến` : 'Hub lỗi', info.hub ? {} : { color: 'danger' }),
+        blank,
+        [{ text: 'Run', bold: true }],
+    ];
+    return [...head, ...runPanelLines(run, columns, theme, live), blank, [{ text: 'Hạn mức', bold: true }], ...quotaPanelLines(extras.quota ?? null, columns, theme)];
+}
+export function SidePanel(props) {
+    return (_jsx(Frame, { title: "Phi\u00EAn l\u00E0m vi\u1EC7c", lines: sidePanelLines(props.info, props.provider, props.width - 4, props.theme, props.run, props.live, props.extras), width: props.width, height: props.height, theme: props.theme }));
+}
+export function statusLine(parts, mode, columns, theme) {
+    const sep = ` ${theme.glyphs.sep} `;
+    if (mode === 'single')
+        return [{ text: truncateEnd(parts.usage, columns, theme.glyphs.ellipsis), dim: true }];
+    const left = mode === 'full'
+        ? [
+            { text: `${parts.usage}${sep}`, dim: true },
+            ...(parts.spinner ? [parts.spinner, { text: ' ' }] : []),
+            { text: parts.run, dim: true },
+            ...(parts.clock ? [{ text: sep, dim: true }, parts.clock] : []),
+        ]
+        : [{ text: parts.usage, dim: true }];
+    const leftWidth = left.reduce((sum, span) => sum + width(span.text), 0);
+    if (mode === 'usage' || leftWidth + width(parts.hints) + 2 > columns) {
+        if (leftWidth <= columns)
+            return left;
+        return [{ text: truncateEnd(mode === 'full' ? `${parts.usage}${sep}${parts.run}` : parts.usage, columns, theme.glyphs.ellipsis), dim: true }];
+    }
+    return [...left, { text: ' '.repeat(columns - leftWidth - width(parts.hints)) }, { text: parts.hints, dim: true }];
+}
+export function TooSmall({ columns, rows, theme }) {
+    const text = columns < 40 ? `Cửa sổ quá hẹp (${columns} cột). Hãy mở rộng tới ít nhất 40 cột.` : `Cửa sổ quá thấp (${rows} dòng). Hãy kéo cao tới ít nhất 10 dòng.`;
+    return (_jsx(Box, { width: columns, height: rows, flexDirection: "column", justifyContent: "center", children: _jsx(Lines, { lines: hanging([{ text: `${theme.glyphs.warn} `, color: 'warning' }], text, Math.max(1, columns)).slice(0, rows), theme: theme }) }));
+}

package/dist/ui/content.js

@@ -0,0 +1,225 @@
+import { COMMANDS, commandUsage } from '../commands/registry.js';
+import { COLOR_SCHEME_IDS, EFFORT_IDS, MOUSE_IDS, MODEL_IDS, PARALLEL_LIMITS, ROLE_MODEL_IDS, } from '../core/config.js';
+import { PROVIDERS } from '../providers/index.js';
+import { blank, hanging } from './lines.js';
+import { runLines } from './runView.js';
+import { padEnd, width } from './text.js';
+import { COLOR_SCHEMES } from './theme.js';
+const TONE = {
+    info: { glyph: 'info', color: 'accent' },
+    success: { glyph: 'ok', color: 'success' },
+    warning: { glyph: 'warn', color: 'warning' },
+    error: { glyph: 'fail', color: 'danger' },
+};
+const CHECK_TONE = { ok: 'success', warn: 'warning', fail: 'error' };
+/**
+ * A two-column list (command and summary) that becomes stacked rows when the window is too narrow
+ * to keep the summary readable beside the command.
+ */
+export function definitionList(items, columns, indent = 2) {
+    const termWidth = Math.max(...items.map(item => width(item.term))) + 2;
+    const sideBySide = columns - indent - termWidth >= 24;
+    return items.flatMap(item => {
+        const term = { text: item.term, color: 'accent' };
+        if (sideBySide) {
+            return hanging([{ text: ' '.repeat(indent) }, { ...term, text: padEnd(item.term, termWidth) }], item.description, columns);
+        }
+        return [
+            [{ text: ' '.repeat(indent) }, term],
+            ...hanging([{ text: ' '.repeat(indent + 2) }], item.description, columns, { dim: true }),
+        ];
+    });
+}
+const commandItems = (commands) => commands.map(spec => ({ term: commandUsage(spec), description: spec.summary }));
+export function messageLines(message, columns, theme, context = { runs: {}, interaction: null }) {
+    const g = theme.glyphs;
+    switch (message.kind) {
+        case 'welcome':
+            return [
+                [
+                    { text: 'PIRL', color: 'accent', bold: true },
+                    { text: ` ${g.sep} Plan ${g.sep} Implement ${g.sep} Review`, dim: true },
+                ],
+                ...hanging([], 'Gõ / để xem lệnh, hoặc nhập yêu cầu. Gõ @ để đính kèm file hoặc thư mục.', columns),
+                blank,
+                ...definitionList(commandItems(COMMANDS.filter(spec => spec.group === 'Layer' || spec.name === 'help')), columns),
+            ];
+        case 'user':
+            return hanging([{ text: `${g.prompt} `, color: 'user', bold: true }], message.text, columns, { bold: true });
+        case 'run': {
+            const run = context.runs[message.runId];
+            return run ? runLines(run, columns, theme, context.interaction, context.live) : [];
+        }
+        case 'note': {
+            const tone = TONE[message.tone];
+            const prefix = [{ text: `${g[tone.glyph]} `, color: tone.color }];
+            const lines = hanging(prefix, message.text, columns, message.tone === 'error' ? { color: 'danger' } : {});
+            if (message.hint)
+                lines.push(...hanging([{ text: '  ' }], message.hint, columns, { dim: true }));
+            return lines;
+        }
+    }
+}
+/** Every message, separated by one blank line, laid out for `columns` cells. */
+export function transcriptLines(messages, columns, theme, context) {
+    return messages.flatMap((message, index) => [...(index > 0 ? [blank] : []), ...messageLines(message, columns, theme, context)]);
+}
+// ---------- overlays ----------
+const heading = (text) => [{ text, bold: true }];
+export function helpLines(columns, theme) {
+    const groups = [...new Set(COMMANDS.map(spec => spec.group))];
+    const keys = [
+        { term: 'Enter', description: 'Gửi' },
+        { term: 'Shift+Enter', description: 'Xuống dòng trong ô nhập (cũng được: \\ rồi Enter, Ctrl+J, Alt+Enter)' },
+        { term: 'Ctrl+V', description: 'Dán từ clipboard (chuột phải hoặc phím dán của terminal cũng được)' },
+        { term: 'Tab', description: 'Hoàn thành tên lệnh đang chọn' },
+        { term: theme.glyphs.upDown, description: 'Chọn lệnh gợi ý hoặc đáp án; ngoài ra cuộn khung chat (chuột "Bôi đen tự do") hoặc xem lại nội dung đã gửi' },
+        { term: 'Ctrl+P / Ctrl+N', description: 'Xem lại nội dung đã gửi' },
+        { term: '@', description: 'Đính kèm file hoặc thư mục: Tab/Enter chọn, Enter lần nữa trên thư mục đang mở để đính kèm cả thư mục, Esc ẩn danh sách' },
+        { term: 'PgUp / PgDn', description: 'Cuộn khung chat' },
+        { term: 'Esc', description: 'Xoá ô nhập, đóng bảng đang mở, hoặc dừng run đang chạy' },
+        { term: 'Ctrl+C', description: 'Dừng run đang chạy; khi không có run thì thoát' },
+    ];
+    const lines = [];
+    for (const group of groups) {
+        lines.push(heading(group));
+        lines.push(...definitionList(commandItems(COMMANDS.filter(spec => spec.group === group)), columns));
+        lines.push(blank);
+    }
+    lines.push(heading('Phím tắt'));
+    lines.push(...definitionList(keys, columns));
+    lines.push(blank);
+    lines.push(...hanging([], 'Nhập không có dấu / là câu hỏi, standalone task hoặc bảo trì framework. Muốn copy một đoạn bất kỳ: bôi đen bằng chuột như mọi nội dung trong terminal; /copy copy nguyên câu trả lời gần nhất.', columns, { dim: true }));
+    lines.push(...hanging([], 'Windows Terminal trước bản 1.25 không phân biệt Shift+Enter với Enter: dùng Ctrl+J, hoặc thêm phím tắt sendInput "\\n" cho shift+enter trong settings.json.', columns, { dim: true }));
+    return lines;
+}
+function checkLines(check, columns, theme) {
+    const tone = TONE[CHECK_TONE[check.state]];
+    const lines = hanging([{ text: `${theme.glyphs[tone.glyph]} `, color: tone.color }, { text: `${check.label}: `, bold: true }], check.detail, columns);
+    if (check.fix)
+        lines.push(...hanging([{ text: '  ' }], check.fix, columns, { dim: true }));
+    return lines;
+}
+export function doctorLines(doctor, columns, theme) {
+    if (doctor.state === 'idle')
+        return [[{ text: 'Chưa kiểm tra.', dim: true }]];
+    const report = doctor.state === 'done' ? doctor.report : doctor.previous;
+    const lines = [];
+    if (doctor.state === 'running')
+        lines.push([{ text: `${theme.glyphs.running} Đang kiểm tra…`, color: 'accent' }], blank);
+    for (const check of report?.checks ?? [])
+        lines.push(...checkLines(check, columns, theme));
+    if (report) {
+        const failed = report.checks.filter(check => check.state === 'fail').length;
+        lines.push(blank);
+        lines.push(failed === 0
+            ? [{ text: 'Môi trường sẵn sàng cho PIRL.', color: 'success' }]
+            : [{ text: `${failed} mục cần xử lý trước khi chạy layer.`, color: 'danger' }]);
+    }
+    return lines;
+}
+const MODEL_LABELS = { sonnet: 'Sonnet (khuyến nghị)', opus: 'Opus', fable: 'Fable', haiku: 'Haiku', default: 'Theo Claude Code' };
+const ROLE_MODEL_LABELS = { inherit: 'Giống coordinator', sonnet: 'Sonnet', opus: 'Opus', fable: 'Fable', haiku: 'Haiku' };
+const MOUSE_LABELS = { select: 'Bôi đen tự do', wheel: 'Con lăn của PIRL', off: 'Tắt' };
+const MOUSE_NOTES = {
+    select: 'Kéo chuột bôi đen như bình thường. Con lăn cuộn hội thoại vì terminal gửi nó thành phím ↑/↓, nên ↑/↓ cuộn hội thoại và Ctrl+P/Ctrl+N gọi lại lệnh đã gõ. Cần terminal hỗ trợ: Windows Terminal, VS Code, iTerm2, Terminal của macOS, GNOME, kitty, WezTerm',
+    wheel: 'PIRL nhận con lăn trực tiếp, chạy trên mọi terminal có chuột. Bôi đen chữ phải giữ Shift khi kéo (iTerm2: Option); ↑/↓ gọi lại lệnh đã gõ',
+    off: 'PIRL không dùng chuột. Cuộn bằng PageUp/PageDown; ↑/↓ gọi lại lệnh đã gõ',
+};
+const EFFORT_LABELS = { default: 'Theo Claude Code', low: 'Thấp', medium: 'Vừa', high: 'Cao', xhigh: 'Rất cao', max: 'Tối đa' };
+export function settingsRows(config) {
+    const provider = PROVIDERS.find(p => p.id === config.provider);
+    const later = PROVIDERS.filter(p => !p.available).map(p => p.label);
+    return [
+        { key: 'provider', label: 'Provider', value: provider?.label ?? config.provider, note: later.length ? `Giai đoạn sau: ${later.join(', ')}` : undefined },
+        {
+            key: 'model',
+            label: 'Model coordinator',
+            value: MODEL_LABELS[config.model],
+            note: 'Model điều phối run. Theo giá API, Opus tốn quota khoảng gấp đôi Sonnet, Fable khoảng gấp năm; Haiku rẻ nhất nhưng điều phối kém hơn',
+        },
+        {
+            key: 'roleModel',
+            label: 'Model các role',
+            value: ROLE_MODEL_LABELS[config.roleModel],
+            note: 'Model của các role chạy như subagent (code-analyst, process-auditor…)',
+        },
+        {
+            key: 'effort',
+            label: 'Mức suy luận',
+            value: EFFORT_LABELS[config.effort],
+            note: 'Áp dụng cho coordinator và mọi role. Phần suy luận tính như token ra, loại token đắt nhất: mức thấp hơn rẻ hơn nhưng phân tích kém kỹ hơn. Claude Code chuyển mức này thành một con số nội bộ, khác nhau theo model và phiên bản (Sonnet: low 4, medium 5, high 10, xhigh 30, max). Con số đó không phải thang điểm, nên hỏi model "đang ở mức nào" không cho biết mức. "Theo Claude Code" hiện là medium',
+        },
+        { key: 'theme', label: 'Giao diện', value: { auto: 'Tự nhận theo terminal', dark: 'Nền tối', light: 'Nền sáng' }[config.theme] },
+        { key: 'colors', label: 'Bảng màu', value: COLOR_SCHEMES[config.colors].label, note: 'Đổi màu nhấn, màu lời nhập và màu viền; màu báo thành công, cảnh báo, lỗi giữ nguyên' },
+        { key: 'glyphs', label: 'Ký hiệu', value: { auto: 'Tự nhận theo terminal', unicode: 'Unicode', ascii: 'ASCII' }[config.glyphs] },
+        {
+            key: 'mouse',
+            label: 'Chuột',
+            value: MOUSE_LABELS[config.mouse],
+            note: MOUSE_NOTES[config.mouse],
+        },
+        { key: 'motion', label: 'Hiệu ứng chuyển động', value: config.motion ? 'Bật' : 'Tắt', note: 'Spinner khi run đang chạy; tắt nếu terminal chậm hoặc bạn không thích chuyển động' },
+        {
+            key: 'maxParallelRoles',
+            label: 'Role chạy song song',
+            value: String(config.maxParallelRoles),
+            note: `${PARALLEL_LIMITS.min}–${PARALLEL_LIMITS.max}; càng nhiều càng nhanh nhưng tốn quota nhanh hơn`,
+        },
+    ];
+}
+/** Cycles one setting forward (+1) or back (-1). The provider only cycles among providers whose adapter exists. */
+export function cycleSetting(config, key, step) {
+    const cycle = (values, current) => values[(values.indexOf(current) + step + values.length) % values.length];
+    switch (key) {
+        case 'provider':
+            return { ...config, provider: cycle(PROVIDERS.filter(p => p.available).map(p => p.id), config.provider) };
+        case 'model':
+            return { ...config, model: cycle(MODEL_IDS, config.model) };
+        case 'roleModel':
+            return { ...config, roleModel: cycle(ROLE_MODEL_IDS, config.roleModel) };
+        case 'effort':
+            return { ...config, effort: cycle(EFFORT_IDS, config.effort) };
+        case 'theme':
+            return { ...config, theme: cycle(['auto', 'dark', 'light'], config.theme) };
+        case 'colors':
+            return { ...config, colors: cycle(COLOR_SCHEME_IDS, config.colors) };
+        case 'glyphs':
+            return { ...config, glyphs: cycle(['auto', 'unicode', 'ascii'], config.glyphs) };
+        case 'motion':
+            return { ...config, motion: !config.motion };
+        case 'mouse':
+            return { ...config, mouse: cycle(MOUSE_IDS, config.mouse) };
+        case 'maxParallelRoles': {
+            const next = config.maxParallelRoles + step;
+            return { ...config, maxParallelRoles: Math.min(PARALLEL_LIMITS.max, Math.max(PARALLEL_LIMITS.min, next)) };
+        }
+    }
+}
+export function settingsLines(config, selected, columns, theme) {
+    const rows = settingsRows(config);
+    const labelWidth = Math.max(...rows.map(row => width(row.label))) + 2;
+    const stacked = columns - 2 - labelWidth < 20;
+    const lines = [];
+    rows.forEach((row, index) => {
+        const active = index === selected;
+        const pointer = { text: active ? `${theme.glyphs.pointer} ` : '  ', color: 'accent' };
+        const value = { text: `‹ ${row.value} ›`, color: active || row.key === 'colors' ? 'accent' : undefined, bold: active };
+        if (!theme.unicode)
+            value.text = `< ${row.value} >`;
+        if (stacked) {
+            lines.push([pointer, { text: row.label, bold: active }]);
+            lines.push([{ text: '    ' }, value]);
+        }
+        else {
+            lines.push([pointer, { text: padEnd(row.label, labelWidth), bold: active }, value]);
+        }
+        if (row.note && active)
+            lines.push(...hanging([{ text: '    ' }], row.note, columns, { dim: true }));
+    });
+    lines.push(blank);
+    const g = theme.glyphs;
+    lines.push(...hanging([], `${g.upDown} chọn mục ${g.sep} ${g.leftRight} đổi giá trị ${g.sep} thay đổi được lưu ngay`, columns, { dim: true }));
+    return lines;
+}
+// ---------- /plans and /records ----------