moderado 0.4.46 → 0.4.51

package/dist/ui/welcome.js

@@ -7,7 +7,7 @@ import { overlayCentered, dimLines, shadowUnder } from './popup.js';
 import { getHelpCommandGroups } from './help_content.js';
 export const MODERADO_ASCII_LOGO = [
     '\x1b[38;5;75m    __  _______  ____  __________  ___    ____  ____ \x1b[0m',
-    '\x1b[38;5;75m   /  |/  / __ \\/ __ \\/ ____/ __ \\/   |  / __ \\/ __ \\\x1b[0m',
+    '\x1b[38;5;75m   /  |/  / __ \\/ __ \\/ ____/ __ \\/   |  / __ \\/ __ \x1b[0m',
     '\x1b[38;5;81m  / /|_/ / / / / / / / __/ / /_/ / /| | / / / / / / /\x1b[0m',
     '\x1b[38;5;81m / /  / / /_/ / /_/ / /___/ _, _/ ___ |/ /_/ / /_/ / \x1b[0m',
     '\x1b[38;5;87m/_/  /_/\\____/_____/_____/_/ |_/_/  |_/_____/\\____/  \x1b[0m',
@@ -31,10 +31,125 @@ function visibleLen(str) {
 export const MOUSE_REPORT_PATTERN = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
 export const MOUSE_REPORT_ON = '\x1b[?1000h\x1b[?1006h';
 export const MOUSE_REPORT_OFF = '\x1b[?1000l\x1b[?1006l';
-export function composerInputWindow(input, caret, width) {
-    const capacity = Math.max(1, width - 3);
-    const start = Math.max(0, Math.min(caret, input.length - capacity));
-    return { text: input.slice(start, start + capacity), caretColumn: caret - start };
+/**
+ * Ask the terminal to report keys whose legacy encoding is ambiguous
+ * (XTMODKEYS level 1), which is the only way Shift+Enter can be told apart from
+ * Enter. Level 1 leaves unambiguous keys — plain Ctrl+C, Shift+Tab, shifted
+ * letters — on their legacy bytes, so nothing else changes behaviour.
+ */
+export const KEY_MODIFIER_REPORT_ON = '\x1b[>4;1m';
+export const KEY_MODIFIER_REPORT_OFF = '\x1b[>4;0m';
+/**
+ * Cells a composer row spends on its `❯ ` marker, plus one spare so a full row
+ * never reaches the last column (a terminal that wraps on the final cell would
+ * push the whole card down a row).
+ */
+const COMPOSER_ROW_OVERHEAD = 3;
+/** Split the composer text into the rows the card paints, wrapping at words. */
+export function wrapComposerInput(input, width) {
+    const capacity = Math.max(1, width - COMPOSER_ROW_OVERHEAD);
+    const rows = [];
+    let segmentStart = 0;
+    for (;;) {
+        const newline = input.indexOf('\n', segmentStart);
+        const segmentEnd = newline === -1 ? input.length : newline;
+        if (segmentStart === segmentEnd) {
+            // An empty line (a bare line feed, or the tail after a trailing one) is
+            // still a row: the caret has to have somewhere to sit.
+            rows.push({ text: '', start: segmentStart, end: segmentStart });
+        }
+        else {
+            let cursor = segmentStart;
+            while (cursor < segmentEnd) {
+                let end = cursor;
+                let cells = 0;
+                let lastSpace = -1;
+                while (end < segmentEnd) {
+                    const char = String.fromCodePoint(input.codePointAt(end));
+                    const charWidth = displayWidth(char);
+                    if (cells + charWidth > capacity)
+                        break;
+                    cells += charWidth;
+                    end += char.length;
+                    if (char === ' ')
+                        lastSpace = end;
+                }
+                if (end >= segmentEnd) {
+                    rows.push({ text: input.slice(cursor, segmentEnd), start: cursor, end: segmentEnd });
+                    break;
+                }
+                // Break after the last space so words stay whole; the space itself is
+                // swallowed by the break rather than trailing the row. A row that would
+                // come out empty (a space at the wrap point) falls through to a hard
+                // break instead of emitting a blank row.
+                if (lastSpace - 1 > cursor) {
+                    rows.push({ text: input.slice(cursor, lastSpace - 1), start: cursor, end: lastSpace - 1 });
+                    cursor = lastSpace;
+                }
+                else {
+                    rows.push({ text: input.slice(cursor, end), start: cursor, end });
+                    cursor = end;
+                }
+            }
+        }
+        if (newline === -1)
+            return rows;
+        segmentStart = newline + 1;
+    }
+}
+/**
+ * Resolve the composer text into painted rows plus the caret's place in them.
+ * The window follows the caret, so a long prompt scrolls inside the box instead
+ * of growing the card past the bottom of the terminal.
+ */
+export function composerView(input, caret, width, maxRows = Number.POSITIVE_INFINITY) {
+    const all = wrapComposerInput(input, width);
+    const clampedCaret = Math.max(0, Math.min(caret, input.length));
+    // The last row whose slice contains the caret: at a hard wrap the caret
+    // belongs to the row that starts there, at a swallowed space to the row that
+    // ends there.
+    let caretRow = 0;
+    for (let index = 0; index < all.length; index += 1) {
+        if (all[index].start <= clampedCaret && clampedCaret <= all[index].end)
+            caretRow = index;
+    }
+    const limit = Math.max(1, Math.floor(maxRows));
+    const start = Math.max(0, Math.min(caretRow - limit + 1, all.length - limit));
+    const rows = all.slice(start, start + limit);
+    const row = all[caretRow];
+    return {
+        rows,
+        caretRow: caretRow - start,
+        caretColumn: Math.min(Math.max(1, width - COMPOSER_ROW_OVERHEAD), displayWidth(input.slice(row.start, clampedCaret))),
+        hiddenAbove: start,
+        hiddenBelow: all.length - start - rows.length,
+    };
+}
+/** Caret index for a click `cells` into a painted row. */
+export function composerCaretIndex(input, rows, rowOffset, cells) {
+    const row = rows[Math.max(0, Math.min(rows.length - 1, rowOffset))];
+    let index = row.start;
+    let used = 0;
+    while (index < row.end) {
+        const char = String.fromCodePoint(input.codePointAt(index));
+        const charWidth = displayWidth(char);
+        if (used + charWidth > cells)
+            break;
+        used += charWidth;
+        index += char.length;
+    }
+    return index;
+}
+/**
+ * Input rows the composer may show before it scrolls in place.
+ *
+ * The chat frame needs eight rows above the card (header, question, status,
+ * answer) and the card keeps four rows of its own furniture, so anything taller
+ * than this would scroll the composer off the screen.
+ */
+export function getComposerInputMaxRows(height) {
+    const terminalHeight = height ?? process.stdout.rows ?? 24;
+    return Math.max(1, terminalHeight - 13);
 }
 /** Card width: nearly full terminal width, like OpenCode/Cline. */
 export function getWelcomeCardWidth(width) {
@@ -82,32 +197,23 @@ export const CHAT_COMPOSER_ROWS = 5;
  * composer: a long answer is windowed instead of pushing the input card, the
  * mode row, and the workspace row off screen (or painting over them).
  */
-export function getChatLayout(width, height, question = '', composerRows = CHAT_COMPOSER_ROWS) {
+export function getChatLayout(width, height, _question = '', composerRows = CHAT_COMPOSER_ROWS) {
     const terminalWidth = width ?? (process.stdout.columns || 80);
     // Honor the real viewport: a hard floor here would emit a frame taller than a
     // short terminal and scroll the composer away. A very short terminal simply
     // shows fewer sections (the composer always wins — see renderChatScreen).
     const terminalHeight = Math.max(2, height ?? (process.stdout.rows || 24));
     const area = getChatAnswerArea(terminalWidth);
-    const wrappedQuestion = wrapText(question, Math.max(1, area.textWidth - 2)).length;
-    const questionTop = CHAT_HEADER_ROWS + 2;
-    // Rows above the answer: header, blank, question rows, status, blank.
-    const answerTopOffset = CHAT_HEADER_ROWS + 4;
     // The frame has to end on the second-to-last row: a trailing newline written
     // on the bottom row scrolls the viewport and drags the composer out of place.
     // So the composer is pinned to the viewport bottom and keeps every row it
     // needs — a queued-commands box makes it taller, and the answer area gives up
     // those rows instead of pushing the card off screen.
     const composerTop = Math.max(2, terminalHeight - Math.max(CHAT_COMPOSER_ROWS, composerRows));
-    // A pathological question must never starve the answer or the composer; when
-    // a tall composer leaves no room at all the question is dropped, not the card.
-    const questionRows = Math.max(0, Math.min(wrappedQuestion, composerTop - answerTopOffset - 2));
-    const statusRow = questionTop + questionRows;
+    const statusRow = CHAT_HEADER_ROWS + 2;
     const answerTop = statusRow + 2;
     return {
         area,
-        questionTop,
-        questionRows,
         statusRow,
         answerTop,
         answerRows: Math.max(0, composerTop - 1 - answerTop),
@@ -121,6 +227,8 @@ export function getChatComposerRows(options) {
 }
 /** Invisible prefix that marks a rendered line as part of the turn summary. */
 const SUMMARY_MARK = '\u0001';
+/** Invisible prefix that marks a transcript row as the user's question. */
+const QUESTION_MARK = '\u0003';
 /**
  * Wrap an answer for the card, marking the turn summary as it goes.
  *
@@ -193,6 +301,14 @@ export function windowChatAnswerAt(text, maxRows, textWidth, offsetFromBottom =
  * of thing from the prose above it, rather than three more paragraphs.
  */
 export function renderAnswerLine(line, textWidth) {
+    // Question rows get the same surface background as the input box so they stand
+    // out from the answer without altering their text colour.
+    if (line.startsWith(QUESTION_MARK)) {
+        const text = line.slice(QUESTION_MARK.length);
+        const clipped = truncateToWidth(text, textWidth);
+        const padding = ' '.repeat(Math.max(0, textWidth - displayWidth(clipped)));
+        return `\x1b[48;5;24m${clipped}${padding}\x1b[0m`;
+    }
     // Activity-log rows share the window with the answer but read as a record of
     // what happened: dim, no rail, no band. One function, two kinds of row.
     if (line.startsWith(LOG_MARK)) {
@@ -208,10 +324,12 @@ export function renderAnswerLine(line, textWidth) {
     const heading = body.match(/^#{1,6}\s+(.+)$/);
     const bullet = body.match(/^[-*]\s+(.+)$/);
     const text = heading ? heading[1].trim() : bullet ? `· ${bullet[1].trim()}` : body;
-    const tone = heading ? '1;38;5;222' : '38;5;253';
+    const tone = heading
+        ? text === 'COMPLETED' || text === 'COMPLETED!' ? '1;38;5;40' : '1;38;5;222'
+        : '38;5;253';
     // Pad to the card so the tint is a solid band instead of a ragged highlight.
     const padded = `${text}${' '.repeat(Math.max(0, textWidth - 2 - displayWidth(text)))}`;
-    return `\x1b[48;5;236m\x1b[38;5;75m▍\x1b[0;48;5;236m\x1b[${tone}m ${padded}\x1b[0m`;
+    return `\x1b[48;2;35;44;37m\x1b[38;5;75m▍\x1b[0;48;2;35;44;37m\x1b[${tone}m ${padded}\x1b[0m`;
 }
 export function chatAnswerOverflowNote(hidden) {
     // Short on purpose: the status row carries the scroll position, and this row
@@ -249,11 +367,14 @@ export function renderWelcomeCard(options) {
         ? getWelcomeCardWidth(options.width)
         : getChatCardWidth(options.width);
     const indent = ' '.repeat(getWelcomeIndent(width, options.width));
-    const displayInput = options.input && options.input.length > 0
-        ? composerInputWindow(options.input, options.inputCaret ?? options.input.length, width).text
-        : '\x1b[38;5;242mAsk anything, I am all ears...\x1b[0m';
+    const inputText = options.input ?? '';
+    const inputView = composerView(inputText, options.inputCaret ?? inputText.length, width, options.maxInputRows ?? getComposerInputMaxRows());
+    // The placeholder owns the first row only; a typed prompt is wrapped into as
+    // many rows as it needs, so the box grows instead of scrolling sideways.
+    const inputRows = inputText.length > 0
+        ? inputView.rows.map((row) => row.text)
+        : ['\x1b[38;5;242mAsk anything, I am all ears...\x1b[0m'];
     const promptMarker = '\x1b[1;38;5;75m' + String.fromCodePoint(0x276F) + '\x1b[0;48;5;236m';
-    const textBox = `${promptMarker} ${displayInput}`;
     const surface = '\x1b[48;5;236m';
     const surfaceLine = (content = '') => {
         const preserved = content.replace(/\x1b\[0m/g, '\x1b[0;48;5;236m');
@@ -341,7 +462,10 @@ export function renderWelcomeCard(options) {
         if (matching.length)
             cardLines.push(...renderSuggestionsBox(matching, width, options.commandSelection ?? 0).map(line => indent + line));
     }
-    cardLines.push(indent + surfaceLine(), indent + surfaceLine(textBox), indent + surfaceLine(), indent + line4, indent + line5);
+    cardLines.push(indent + surfaceLine(), 
+    // Continuation rows keep the marker's two cells, so wrapped text lines up
+    // under the first row's text instead of under the ❯.
+    ...inputRows.map((rowText, index) => indent + surfaceLine(`${index === 0 ? promptMarker : '  '} ${rowText}`)), indent + surfaceLine(), indent + line4, indent + line5);
     if (options.mentionFiles && options.mentionFiles.length > 0) {
         cardLines.push(...renderMentionSuggestionsBox(options.mentionFiles, options.mentionSelection ?? 0, width).map((line) => indent + line));
     }
@@ -361,7 +485,8 @@ export const SLASH_COMMANDS = [
     { name: '/budget', desc: 'Set a per-task token limit' },
     { name: '/skills', desc: 'List skills; enable or disable user skills' },
     { name: '/clear', desc: 'Reset conversation memory' },
-    { name: '/help', desc: 'Display commands, shortcuts & version' },
+    { name: '/about', desc: 'Show version and copyright info' },
+    { name: '/help', desc: 'Display commands & shortcuts' },
     { name: '/exit', desc: 'Exit Moderado' },
 ];
 export function getMatchingCommands(input) {
@@ -454,7 +579,8 @@ export function renderModeradoHeader(width) {
 export function renderChatHeader(width) {
     const terminalWidth = width ?? (process.stdout.columns || 80);
     const label = 'MODERADO'.slice(0, Math.max(1, terminalWidth));
-    return ' '.repeat(Math.max(0, terminalWidth - label.length)) + `\x1b[1;38;5;75m${label}\x1b[0m`;
+    const padding = Math.max(0, Math.floor((terminalWidth - label.length) / 2));
+    return ' '.repeat(padding) + `\x1b[1;38;5;75m${label}\x1b[0m`;
 }
 /** Word-wrap plain text to `maxWidth` visible columns, hard-breaking long words. */
 export function wrapText(text, maxWidth) {
@@ -506,9 +632,7 @@ export function wrapText(text, maxWidth) {
     return out;
 }
 /**
- * Full chat window (after a question is submitted): no logo — the question is
- * displayed on the first row, the multi-line model answer below it, then the
- * same input card as the welcome window at the bottom.
+ * Full chat window: the transcript scrolls above a fixed input card.
  */
 export function renderChatScreen(options, height) {
     const terminalWidth = options.width ?? (process.stdout.columns || 80);
@@ -517,24 +641,16 @@ export function renderChatScreen(options, height) {
     // The composer is measured before the layout: a queued-commands box or a
     // mention box makes the card taller, and the answer area must give up those
     // rows instead of pushing the card past the bottom of the viewport.
-    const composer = renderWelcomeCard(options).split('\n');
+    const cardOptions = options.maxInputRows === undefined
+        ? { ...options, maxInputRows: getComposerInputMaxRows(terminalHeight) }
+        : options;
+    const composer = renderWelcomeCard(cardOptions).split('\n');
     const layout = getChatLayout(terminalWidth, terminalHeight, question, composer.length);
     const area = layout.area;
     const indent = ' '.repeat(area.indent);
     const lines = [];
     lines.push(renderChatHeader(terminalWidth));
     lines.push('');
-    // Row 1: the user's question, wrapped onto the same columns as the composer card.
-    const questionMarker = '\x1b[1;38;5;75m' + String.fromCodePoint(0x276F) + '\x1b[0;48;5;236m';
-    const questionLines = wrapText(question, Math.max(1, area.textWidth - 2));
-    const visibleQuestion = questionLines.slice(0, layout.questionRows);
-    for (const [index, questionLine] of visibleQuestion.entries()) {
-        const clipped = index === layout.questionRows - 1 && questionLines.length > layout.questionRows
-            ? `${questionLine.slice(0, Math.max(0, area.textWidth - 3))}…`
-            : questionLine;
-        const questionText = `${index === 0 ? questionMarker : '  '} ${clipped}`;
-        lines.push(indent + String.fromCharCode(27) + '[48;5;236m' + questionText + ' '.repeat(Math.max(0, area.cardWidth - visibleLen(questionText))) + String.fromCharCode(27) + '[0m');
-    }
     const thoughtTime = options.chatThoughtTime ?? 0;
     const thoughtTimeLabel = thoughtTime > 0 && thoughtTime < 1 ? '<1s' : `${Math.round(thoughtTime)}s`;
     const answerText = options.chatAnswer ?? '';
@@ -542,7 +658,7 @@ export function renderChatScreen(options, height) {
     // The activity log and the answer are one list, so both the scroll position
     // and the window are computed over the merged rows.
     const transcriptWidth = getChatTranscriptWidth(layout);
-    const transcript = buildChatTranscriptRows(options.chatActivity, answerText, transcriptWidth);
+    const transcript = buildChatTranscriptRows(options.chatActivity, answerText, transcriptWidth, options.chatHistory, question);
     // While the reader is scrolled up, the status row belongs to the scroll
     // position: the turn clock is not what they are looking for.
     const scrollWindow = transcript.rows.length > 0 && layout.answerRows > 0 && answerOffset > 0
@@ -557,7 +673,7 @@ export function renderChatScreen(options, height) {
     const scrolled = scrollWindow !== undefined
         && (scrollWindow.hiddenAbove > 0 || scrollWindow.hiddenBelow > 0);
     const chatStatus = scrolled
-        ? `${scrollWindow.hiddenAbove === 0 ? 'Top of the turn' : `↑ ${scrollWindow.hiddenAbove} above`} · ↓ ${scrollWindow.hiddenBelow} below · PgUp/PgDn`
+        ? `${scrollWindow.hiddenAbove === 0 ? (options.chatHistory?.length ? 'Top of history' : 'Top of the turn') : `↑ ${scrollWindow.hiddenAbove} above`} · ↓ ${scrollWindow.hiddenBelow} below · PgUp/PgDn`
         : options.chatActivity
             ? truncateToWidth(`${options.chatActivity.glyph} ${options.chatActivity.label} · ${activityElapsed}`, transcriptWidth)
             : !answerText.trim()
@@ -575,12 +691,8 @@ export function renderChatScreen(options, height) {
     // answer — that trade is what produced the one-line view.
     if (transcript.rows.length > 0 && layout.answerRows > 0) {
         lines.push('');
-        const { lines: transcriptLines, hiddenAbove } = windowChatTranscriptAt(transcript.rows, layout.answerRows, answerOffset);
-        if (hiddenAbove > 0)
-            lines.push(indent + `\x1b[38;5;244m${truncateToWidth(chatAnswerOverflowNote(hiddenAbove), transcriptWidth)}\x1b[0m`);
-        for (const transcriptLine of transcriptLines) {
-            lines.push(indent + renderAnswerLine(transcriptLine, getChatTranscriptWidth(layout)));
-        }
+        for (const transcriptLine of renderTranscriptRows(transcript.rows, layout, answerOffset))
+            lines.push(indent + transcriptLine);
     }
     // Hard guarantee: the composer starts at `composerTop` and the frame ends one
     // row above the viewport bottom, whatever the content did. This holds for any
@@ -594,17 +706,19 @@ export function renderChatScreen(options, height) {
     return lines.join('\n') + '\n';
 }
 /**
- * Place the terminal cursor on the input row. Passing the layout's
- * `composerTop` addresses the row absolutely, which stays correct when a
- * queued-commands box grows the card; the relative form is the legacy path.
+ * Place the terminal cursor on the caret's row inside the input box. Passing
+ * the layout's `composerTop` addresses the row absolutely, which stays correct
+ * when the card grows (a queued-commands box or a wrapped prompt); the relative
+ * form is the legacy path.
  */
-export function renderChatComposerCursor(options, inputLength, composerTop) {
+export function renderChatComposerCursor(options, input, composerTop) {
     const width = getChatCardWidth(options.width);
     const indent = getWelcomeIndent(width, options.width);
-    const caretColumn = indent + 3 + Math.min(inputLength, Math.max(0, width - 3));
+    const view = composerView(input, input.length, width, getComposerInputMaxRows());
+    const caretColumn = indent + 2 + view.caretColumn;
     if (composerTop !== undefined)
-        return `\x1b[1 q\x1b[?25h\x1b[${composerTop + 1};${caretColumn}H`;
-    return `\x1b[1 q\x1b[?25h\x1b[4A\r\x1b[${indent + 2 + Math.min(inputLength, Math.max(0, width - 3))}C`;
+        return `\x1b[1 q\x1b[?25h\x1b[${composerTop + 1 + view.caretRow};${caretColumn + 1}H`;
+    return `\x1b[1 q\x1b[?25h\x1b[${4 + view.caretRow}A\r\x1b[${caretColumn}C`;
 }
 export function navigateQuestionHistory(history, direction, index, draft) {
     const nextIndex = Math.max(0, Math.min(history.length, index + direction));
@@ -818,8 +932,14 @@ export function getChatTranscriptWidth(layout) {
  * The log and the answer now share the window, so the record of what the agent
  * did and the answer it produced are read in one place and scroll together.
  */
-export function buildChatTranscriptRows(activity, answer, textWidth) {
+export function buildChatTranscriptRows(activity, answer, textWidth, history = [], question = '') {
     const rows = [];
+    for (const turn of history) {
+        rows.push(...wrapText(`❯ ${turn.question}`, textWidth).map((line) => QUESTION_MARK + line));
+        rows.push(...wrapAnswerLines(turn.answer.trimEnd(), textWidth));
+    }
+    if (question)
+        rows.push(...wrapText(`❯ ${question}`, textWidth).map((line) => QUESTION_MARK + line));
     for (const entry of activity?.history ?? []) {
         rows.push(LOG_MARK + `${entry.glyph} ${entry.label}`);
     }
@@ -845,13 +965,36 @@ export function windowChatTranscriptAt(rows, maxRows, offsetFromBottom = 0) {
         return { lines: [...rows], hiddenAbove: 0, hiddenBelow: 0 };
     // The note costs a row, so the content capacity is one row smaller — and the
     // maximum offset follows from that capacity, not from the raw row count.
-    const capacity = Math.max(1, maxRows - 1);
+    const capacity = Math.max(1, maxRows - (maxRows > 1 ? 1 : 0));
     const maxOffset = Math.max(0, rows.length - capacity);
     const offset = Math.max(0, Math.min(Math.round(offsetFromBottom), maxOffset));
     const end = rows.length - offset;
     const start = Math.max(0, end - capacity);
     return { lines: [...rows.slice(start, end)], hiddenAbove: start, hiddenBelow: rows.length - end };
 }
+/** A click at the top of the chat scrollbar jumps to the oldest transcript row. */
+export function chatTranscriptOffsetForRow(totalRows, visibleRows, row) {
+    const maxOffset = Math.max(0, totalRows - Math.max(1, visibleRows - 1));
+    return visibleRows <= 1 ? maxOffset : Math.round(maxOffset * (1 - Math.max(0, Math.min(row, visibleRows - 1)) / (visibleRows - 1)));
+}
+function renderTranscriptRows(rows, layout, offset) {
+    const cells = getChatTranscriptWidth(layout);
+    const { lines, hiddenAbove, hiddenBelow } = windowChatTranscriptAt(rows, layout.answerRows, offset);
+    const visible = hiddenAbove > 0 && layout.answerRows > 1
+        ? [`\x1b[38;5;244m${truncateToWidth(chatAnswerOverflowNote(hiddenAbove), cells)}\x1b[0m`, ...lines.map((line) => renderAnswerLine(line, cells))]
+        : lines.map((line) => renderAnswerLine(line, cells));
+    const overflowing = rows.length > layout.answerRows && layout.answerRows > 0;
+    const offsetFromBottom = hiddenBelow;
+    const maxOffset = Math.max(1, rows.length - Math.max(1, layout.answerRows - 1));
+    const thumbRow = Math.round((1 - offsetFromBottom / maxOffset) * Math.max(0, layout.answerRows - 1));
+    return Array.from({ length: layout.answerRows }, (_, index) => {
+        const line = visible[index] ?? '';
+        if (!overflowing)
+            return line;
+        const glyph = index === thumbRow ? '█' : '│';
+        return `${line}${' '.repeat(Math.max(0, cells - displayWidth(line)))}\x1b[38;5;244m${glyph}\x1b[0m`;
+    });
+}
 /** Rows the transcript occupies for a layout; 0 when the viewport is tiny. */
 export function getChatTranscriptRows(layout) {
     return Math.max(0, layout.answerRows);
@@ -881,14 +1024,10 @@ export function renderChatTranscriptHeader(activity, layout, thoughtTime) {
  * is one PgUp away. Every row is clamped to the card in terminal cells, so a
  * wide CJK glyph or a long path cannot push a row past the right border.
  */
-export function renderChatTranscriptWindow(activity, answer, layout, offsetFromBottom = 0) {
+export function renderChatTranscriptWindow(activity, answer, layout, offsetFromBottom = 0, history = [], question = '') {
     const { area } = layout;
-    const cells = getChatTranscriptWidth(layout);
-    const { rows } = buildChatTranscriptRows(activity, answer, cells);
-    const { lines, hiddenAbove } = windowChatTranscriptAt(rows, layout.answerRows, offsetFromBottom);
-    const visible = hiddenAbove > 0
-        ? [`\x1b[38;5;244m${truncateToWidth(chatAnswerOverflowNote(hiddenAbove), cells)}\x1b[0m`, ...lines.map((line) => renderAnswerLine(line, cells))]
-        : lines.map((line) => renderAnswerLine(line, cells));
+    const { rows } = buildChatTranscriptRows(activity, answer, getChatTranscriptWidth(layout), history, question);
+    const visible = renderTranscriptRows(rows, layout, offsetFromBottom);
     let sequence = '\x1b7';
     for (let index = 0; index < layout.answerRows; index++) {
         const row = layout.answerTop + index;
@@ -934,7 +1073,7 @@ export function renderWelcomePopupLayer(options, popupLines, width, height) {
     const lightPopup = popupLines.map((line) => surface + line.replace(/\x1b\[0m/g, `\x1b[0m${surface}`) + '\x1b[0m');
     return background + shadowUnder(lightPopup, cols, rows) + overlayCentered(lightPopup, cols, rows);
 }
-export function renderHelpPopupBox(version, workspace, width) {
+export function renderHelpPopupBox(_version, workspace, width) {
     const terminalWidth = width ?? (process.stdout.columns || 80);
     const targetWidth = 82;
     const boxWidth = Math.max(76, Math.min(terminalWidth, targetWidth));
@@ -952,14 +1091,15 @@ export function renderHelpPopupBox(version, workspace, width) {
         '\x1b[1;38;5;114mKeyboard Shortcuts:\x1b[0m',
         '\x1b[1mTab\x1b[0m          Toggle between [Plan] and [Execute] mode',
         '\x1b[1mShift+Tab\x1b[0m    Toggle Auto-approval on / off for actions',
+        '\x1b[1mShift+Enter\x1b[0m  Insert a line break (Ctrl+J works everywhere)',
         '\x1b[1mCtrl+C\x1b[0m       Cancel active inference or exit session',
         '\x1b[1mEsc\x1b[0m          Stop the active task',
         '\x1b[1mLeft/Right\x1b[0m   Move the caret inside the bottom input line',
         '\x1b[1mUp/Down\x1b[0m       Browse slash commands after "/", else recall history',
+        '\x1b[1mPgUp/PgDn\x1b[0m     Browse chat; click its right-side scroll track to jump',
         '\x1b[1mMouse click\x1b[0m  Place the caret on the input line',
         '',
         `\x1b[38;5;245mWorkspace:\x1b[0m  \x1b[38;5;253m${shortWs}\x1b[0m`,
-        `\x1b[38;5;245mVersion:\x1b[0m    \x1b[1;38;5;75m${version}\x1b[0m`,
         '',
         '\x1b[38;5;244mPress \x1b[1;38;5;75m[Esc]\x1b[0;38;5;244m or \x1b[1;38;5;75m[Enter]\x1b[0;38;5;244m to close\x1b[0m',
     ];
@@ -978,6 +1118,31 @@ export function renderHelpPopupBox(version, workspace, width) {
     lines.push('\x1b[38;5;240m╰' + '─'.repeat(boxWidth - 2) + '╯\x1b[0m');
     return lines;
 }
+/** Render a centered "About" popup with version and copyright info. */
+export function renderAboutPopupBox(version) {
+    const boxWidth = 52;
+    const innerW = boxWidth - 4;
+    const titleStr = 'About Moderado';
+    const remainingDashes = Math.max(0, boxWidth - titleStr.length - 5);
+    // Strip the Alfazen build suffix (`+261024h`) so only `v<major.minor.patch>` shows.
+    const semverOnly = version.split('+')[0];
+    const content = [
+        'Moderado CLI',
+        semverOnly,
+        '',
+        '(c) 2026 Moderado AI, an Alfazen Product',
+    ];
+    const lines = [];
+    lines.push('\x1b[38;5;240m╭─ \x1b[1;38;5;75m' + titleStr + '\x1b[0;38;5;240m ' + '─'.repeat(remainingDashes) + '╮\x1b[0m');
+    for (const item of content) {
+        const plain = item.replace(/\x1b\\[[0-9;]*[a-zA-Z]/g, '');
+        const leftPad = Math.max(0, Math.floor((innerW - plain.length) / 2));
+        const rightPad = Math.max(0, innerW - plain.length - leftPad);
+        lines.push('\x1b[38;5;240m│\x1b[0m' + ' '.repeat(leftPad) + item + ' '.repeat(rightPad) + '\x1b[38;5;240m│\x1b[0m');
+    }
+    lines.push('\x1b[38;5;240m╰' + '─'.repeat(boxWidth - 2) + '╯\x1b[0m');
+    return lines;
+}
 export let terminalCleanExitDone = false;
 /** Mark that a clean exit already restored + cleared the terminal (guards the process 'exit' hook). */
 export function notifyCleanExit() {
@@ -1005,7 +1170,7 @@ export async function exitCleanly(message) {
     notifyCleanExit();
     const stdout = process.stdout;
     const payload = stdout.isTTY
-        ? MOUSE_REPORT_OFF + '\x1b[?25h\x1b[?1049l\x1b[0 q\x1b[0m\x1b[2J\x1b[3J\x1b[H' + renderExitMessage(message)
+        ? KEY_MODIFIER_REPORT_OFF + MOUSE_REPORT_OFF + '\x1b[?25h\x1b[?1049l\x1b[0 q\x1b[0m\x1b[2J\x1b[3J\x1b[H' + renderExitMessage(message)
         : renderExitMessage(message);
     try {
         fs.writeSync(1, payload);