wave-code 1.0.0 → 1.0.1

package/dist/utils/bracketedPaste.js

@@ -0,0 +1,122 @@
+const ESC = "\u001b";
+const START_STRIPPED = "[200~";
+const START_RAW = `${ESC}[200~`;
+const END_STRIPPED = "[201~";
+const END_RAW = `${ESC}[201~`;
+const START_FORMS = [START_RAW, START_STRIPPED];
+const END_FORMS = [END_RAW, END_STRIPPED];
+/**
+ * Suffixes that may be the beginning of a marker split across chunks.
+ * Longest-first so the longest matching suffix is deferred (e.g. `[200`
+ * rather than `[20` for `...x[200`). Deferral is flush-equivalent: if the
+ * next chunk does not complete a marker, the deferred suffix is delivered
+ * as regular input unchanged.
+ */
+const PARTIAL_SUFFIXES = [
+    `${ESC}[201`,
+    `${ESC}[200`,
+    `${ESC}[20`,
+    `${ESC}[2`,
+    "[201",
+    "[200",
+    "[20",
+    "[2",
+].sort((a, b) => b.length - a.length);
+export function createBracketedPasteDetector() {
+    let inPaste = false;
+    let buffer = ""; // paste content collected since the start marker
+    let pending = ""; // deferred partial marker suffix from a previous chunk
+    const findFirst = (text, forms) => {
+        let best = null;
+        for (const form of forms) {
+            const index = text.indexOf(form);
+            if (index !== -1 && (best === null || index < best.index)) {
+                best = { index, length: form.length };
+            }
+        }
+        return best;
+    };
+    const endsWithPartial = (text) => {
+        for (const prefix of PARTIAL_SUFFIXES) {
+            if (text.endsWith(prefix)) {
+                return prefix;
+            }
+        }
+        return null;
+    };
+    const process = (chunk) => {
+        let remaining = pending + chunk;
+        pending = "";
+        let leadingInput = "";
+        let pasteText = null;
+        while (remaining.length > 0) {
+            if (!inPaste) {
+                const start = findFirst(remaining, START_FORMS);
+                if (start) {
+                    leadingInput += remaining.slice(0, start.index);
+                    remaining = remaining.slice(start.index + start.length);
+                    inPaste = true;
+                    continue;
+                }
+                // Orphan end marker (start was missed, e.g. consumed by another
+                // input handler): treat the preceding text as paste so a trailing
+                // `\r` cannot trigger the coalesced-Enter submit heuristic.
+                const end = findFirst(remaining, END_FORMS);
+                if (end) {
+                    pasteText =
+                        (pasteText ?? "") + leadingInput + remaining.slice(0, end.index);
+                    leadingInput = "";
+                    remaining = remaining.slice(end.index + end.length);
+                    continue;
+                }
+                const partial = endsWithPartial(remaining);
+                if (partial) {
+                    pending = remaining.slice(remaining.length - partial.length);
+                    remaining = remaining.slice(0, remaining.length - partial.length);
+                }
+                if (remaining.length > 0) {
+                    leadingInput += remaining;
+                    remaining = "";
+                }
+                break;
+            }
+            const end = findFirst(remaining, END_FORMS);
+            if (end) {
+                pasteText = (pasteText ?? "") + buffer + remaining.slice(0, end.index);
+                buffer = "";
+                inPaste = false;
+                remaining = remaining.slice(end.index + end.length);
+                continue;
+            }
+            const partial = endsWithPartial(remaining);
+            if (partial) {
+                pending = remaining.slice(remaining.length - partial.length);
+                remaining = remaining.slice(0, remaining.length - partial.length);
+            }
+            buffer += remaining;
+            remaining = "";
+            break;
+        }
+        if (inPaste) {
+            // Paste still in flight: hold the content, deliver nothing yet.
+            return { kind: "consume" };
+        }
+        if (pasteText !== null) {
+            const result = {
+                kind: "paste",
+                text: pasteText,
+            };
+            if (leadingInput !== "") {
+                result.leadingInput = leadingInput;
+            }
+            return result;
+        }
+        return { kind: "input", input: leadingInput };
+    };
+    const reset = () => {
+        inPaste = false;
+        buffer = "";
+        pending = "";
+    };
+    return { process, reset };
+}

package/dist/utils/markdownTable.d.ts

@@ -0,0 +1,34 @@
+import type { Token, Tokens } from "marked";
+export type CellAlign = "left" | "center" | "right" | null;
+/**
+ * Wrap text to fit within a given width, returning array of lines.
+ * ANSI-aware: preserves styling across line breaks.
+ *
+ * @param hard - If true, break words that exceed width (needed when columns
+ *               are narrower than the longest word). Default false.
+ */
+export declare function wrapText(text: string, width: number, options?: {
+    hard?: boolean;
+}): string[];
+/**
+ * Pad `content` to `targetWidth` according to alignment. `displayWidth` is the
+ * visible width of `content` (caller computes this, e.g. via stringWidth on
+ * ANSI-stripped text, so ANSI codes in `content` don't affect padding).
+ */
+export declare function padAligned(content: string, displayWidth: number, targetWidth: number, align: CellAlign | undefined): string;
+/**
+ * Render a markdown table to a box-drawing ANSI string for the terminal.
+ * Handles terminal width by:
+ * 1. Calculating minimum column widths based on longest word
+ * 2. Distributing available space proportionally
+ * 3. Wrapping text within cells (no truncation)
+ * 4. Falling back to a vertical key-value format when rows would be too
+ *    tall or the table still overflows the terminal width
+ *
+ * @param token - marked table token
+ * @param columns - terminal width
+ * @param formatInline - formats inline tokens to an ANSI string (the caller
+ *                       binds its marked parser so this module stays
+ *                       parser-agnostic and directly testable)
+ */
+export declare function renderMarkdownTable(token: Tokens.Table, columns: number, formatInline: (tokens: Token[]) => string): string;

package/dist/utils/markdownTable.js

@@ -0,0 +1,302 @@
+import stringWidth from "string-width";
+import wrapAnsi from "wrap-ansi";
+import { stripAnsiColors } from "wave-agent-sdk";
+/**
+ * Accounts for parent indentation (e.g. message prefix) and terminal
+ * resize races. Without enough margin the table overflows its layout box
+ * and Ink's clip truncates differently on alternating frames.
+ */
+const SAFETY_MARGIN = 4;
+/** Minimum column width to prevent degenerate layouts */
+const MIN_COLUMN_WIDTH = 3;
+/**
+ * Maximum number of lines per row before switching to vertical format.
+ * When wrapping would make rows taller than this, vertical (key-value)
+ * format provides better readability.
+ */
+const MAX_ROW_LINES = 4;
+/** ANSI escape codes for text formatting */
+const ANSI_BOLD_START = "\x1b[1m";
+const ANSI_BOLD_END = "\x1b[22m";
+/**
+ * Wrap text to fit within a given width, returning array of lines.
+ * ANSI-aware: preserves styling across line breaks.
+ *
+ * @param hard - If true, break words that exceed width (needed when columns
+ *               are narrower than the longest word). Default false.
+ */
+export function wrapText(text, width, options) {
+    if (width <= 0)
+        return [text];
+    // Strip trailing whitespace/newlines before wrapping, otherwise extra
+    // blank lines would appear in table cells.
+    const trimmedText = text.trimEnd();
+    const wrapped = wrapAnsi(trimmedText, width, {
+        hard: options?.hard ?? false,
+        trim: false,
+        wordWrap: true,
+    });
+    // Filter out empty lines that result from trailing newlines or
+    // multiple consecutive newlines in the source content.
+    const lines = wrapped.split("\n").filter((line) => line.length > 0);
+    // Ensure we always return at least one line (empty string for empty cells)
+    return lines.length > 0 ? lines : [""];
+}
+/**
+ * Pad `content` to `targetWidth` according to alignment. `displayWidth` is the
+ * visible width of `content` (caller computes this, e.g. via stringWidth on
+ * ANSI-stripped text, so ANSI codes in `content` don't affect padding).
+ */
+export function padAligned(content, displayWidth, targetWidth, align) {
+    const padding = Math.max(0, targetWidth - displayWidth);
+    if (align === "center") {
+        const leftPad = Math.floor(padding / 2);
+        return " ".repeat(leftPad) + content + " ".repeat(padding - leftPad);
+    }
+    if (align === "right") {
+        return " ".repeat(padding) + content;
+    }
+    return content + " ".repeat(padding);
+}
+/**
+ * Render a markdown table to a box-drawing ANSI string for the terminal.
+ * Handles terminal width by:
+ * 1. Calculating minimum column widths based on longest word
+ * 2. Distributing available space proportionally
+ * 3. Wrapping text within cells (no truncation)
+ * 4. Falling back to a vertical key-value format when rows would be too
+ *    tall or the table still overflows the terminal width
+ *
+ * @param token - marked table token
+ * @param columns - terminal width
+ * @param formatInline - formats inline tokens to an ANSI string (the caller
+ *                       binds its marked parser so this module stays
+ *                       parser-agnostic and directly testable)
+ */
+export function renderMarkdownTable(token, columns, formatInline) {
+    // Format cell content to ANSI string
+    function formatCell(tokens) {
+        return tokens && tokens.length > 0 ? formatInline(tokens) : "";
+    }
+    // Get plain text (stripped of ANSI codes)
+    function getPlainText(tokens) {
+        return stripAnsiColors(formatCell(tokens));
+    }
+    // Get the longest word width in a cell (minimum width to avoid breaking words)
+    function getMinWidth(tokens) {
+        const text = getPlainText(tokens);
+        const words = text.split(/\s+/).filter((w) => w.length > 0);
+        if (words.length === 0)
+            return MIN_COLUMN_WIDTH;
+        return Math.max(...words.map((w) => stringWidth(w)), MIN_COLUMN_WIDTH);
+    }
+    // Get ideal width (full content without wrapping)
+    function getIdealWidth(tokens) {
+        return Math.max(stringWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
+    }
+    // Step 1: Get minimum (longest word) and ideal (full content) widths
+    const minWidths = token.header.map((header, colIndex) => {
+        let maxMinWidth = getMinWidth(header.tokens);
+        for (const row of token.rows) {
+            maxMinWidth = Math.max(maxMinWidth, getMinWidth(row[colIndex]?.tokens));
+        }
+        return maxMinWidth;
+    });
+    const idealWidths = token.header.map((header, colIndex) => {
+        let maxIdeal = getIdealWidth(header.tokens);
+        for (const row of token.rows) {
+            maxIdeal = Math.max(maxIdeal, getIdealWidth(row[colIndex]?.tokens));
+        }
+        return maxIdeal;
+    });
+    // Step 2: Calculate available space
+    // Border overhead: │ content │ content │ = 1 + (width + 3) per column
+    const numCols = token.header.length;
+    const borderOverhead = 1 + numCols * 3; // │ + (2 padding + 1 border) per col
+    // Account for SAFETY_MARGIN to avoid triggering the fallback safety check
+    const availableWidth = Math.max(columns - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
+    // Step 3: Calculate column widths that fit available space
+    const totalMin = minWidths.reduce((sum, w) => sum + w, 0);
+    const totalIdeal = idealWidths.reduce((sum, w) => sum + w, 0);
+    // Track whether columns are narrower than longest words (needs hard wrap)
+    let needsHardWrap = false;
+    let columnWidths;
+    if (totalIdeal <= availableWidth) {
+        // Everything fits - use ideal widths
+        columnWidths = idealWidths;
+    }
+    else if (totalMin <= availableWidth) {
+        // Need to shrink - give each column its min, distribute remaining space
+        const extraSpace = availableWidth - totalMin;
+        const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]);
+        const totalOverflow = overflows.reduce((sum, o) => sum + o, 0);
+        columnWidths = minWidths.map((min, i) => {
+            if (totalOverflow === 0)
+                return min;
+            const extra = Math.floor((overflows[i] / totalOverflow) * extraSpace);
+            return min + extra;
+        });
+    }
+    else {
+        // Table wider than terminal at minimum widths
+        // Shrink columns proportionally to fit allowing word breaks
+        needsHardWrap = true;
+        const scaleFactor = availableWidth / totalMin;
+        columnWidths = minWidths.map((w) => Math.max(Math.floor(w * scaleFactor), MIN_COLUMN_WIDTH));
+    }
+    // Step 4: Calculate max row lines to determine if vertical format is needed
+    function calculateMaxRowLines() {
+        let maxLines = 1;
+        // Check header
+        for (let i = 0; i < token.header.length; i++) {
+            const content = formatCell(token.header[i].tokens);
+            const wrapped = wrapText(content, columnWidths[i], {
+                hard: needsHardWrap,
+            });
+            maxLines = Math.max(maxLines, wrapped.length);
+        }
+        // Check rows
+        for (const row of token.rows) {
+            for (let i = 0; i < row.length; i++) {
+                const content = formatCell(row[i]?.tokens);
+                const wrapped = wrapText(content, columnWidths[i], {
+                    hard: needsHardWrap,
+                });
+                maxLines = Math.max(maxLines, wrapped.length);
+            }
+        }
+        return maxLines;
+    }
+    // Use vertical format if wrapping would make rows too tall
+    const maxRowLines = calculateMaxRowLines();
+    const useVerticalFormat = maxRowLines > MAX_ROW_LINES;
+    // Render a single row with potential multi-line cells
+    // Returns an array of strings, one per line of the row
+    function renderRowLines(cells, isHeader) {
+        // Get wrapped lines for each cell (preserving ANSI formatting)
+        const cellLines = cells.map((cell, colIndex) => {
+            const formattedText = formatCell(cell.tokens);
+            const width = columnWidths[colIndex];
+            return wrapText(formattedText, width, { hard: needsHardWrap });
+        });
+        // Find max number of lines in this row
+        const maxLines = Math.max(...cellLines.map((lines) => lines.length), 1);
+        // Calculate vertical offset for each cell (to center vertically)
+        const verticalOffsets = cellLines.map((lines) => Math.floor((maxLines - lines.length) / 2));
+        // Build each line of the row as a single string
+        const result = [];
+        for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+            let line = "│";
+            for (let colIndex = 0; colIndex < cells.length; colIndex++) {
+                const lines = cellLines[colIndex];
+                const offset = verticalOffsets[colIndex];
+                const contentLineIdx = lineIdx - offset;
+                const lineText = contentLineIdx >= 0 && contentLineIdx < lines.length
+                    ? lines[contentLineIdx]
+                    : "";
+                const width = columnWidths[colIndex];
+                // Headers always centered; data uses table alignment
+                const align = isHeader
+                    ? "center"
+                    : (token.align?.[colIndex] ?? "left");
+                line +=
+                    " " +
+                        padAligned(lineText, stringWidth(lineText), width, align) +
+                        " │";
+            }
+            result.push(line);
+        }
+        return result;
+    }
+    // Render horizontal border as a single string
+    function renderBorderLine(type) {
+        const [left, mid, cross, right] = {
+            top: ["┌", "─", "┬", "┐"],
+            middle: ["├", "─", "┼", "┤"],
+            bottom: ["└", "─", "┴", "┘"],
+        }[type];
+        let line = left;
+        columnWidths.forEach((width, colIndex) => {
+            line += mid.repeat(width + 2);
+            line += colIndex < columnWidths.length - 1 ? cross : right;
+        });
+        return line;
+    }
+    // Render vertical format (key-value pairs) for extra-narrow terminals
+    function renderVerticalFormat() {
+        const lines = [];
+        const headers = token.header.map((h) => getPlainText(h.tokens));
+        const separatorWidth = Math.min(columns - 1, 40);
+        const separator = "─".repeat(separatorWidth);
+        // Small indent for wrapped lines (just 2 spaces)
+        const wrapIndent = "  ";
+        token.rows.forEach((row, rowIndex) => {
+            if (rowIndex > 0) {
+                lines.push(separator);
+            }
+            row.forEach((cell, colIndex) => {
+                const label = headers[colIndex] || `Column ${colIndex + 1}`;
+                // Clean value: trim, remove extra internal whitespace/newlines
+                const rawValue = formatCell(cell.tokens).trimEnd();
+                const value = rawValue.replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
+                // Wrap value to fit terminal, accounting for label on first line
+                const firstLineWidth = columns - stringWidth(label) - 3;
+                const subsequentLineWidth = columns - wrapIndent.length - 1;
+                // Two-pass wrap: first line is narrower (label takes space),
+                // continuation lines get the full width minus indent.
+                const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
+                const firstLine = firstPassLines[0] || "";
+                let wrappedValue;
+                if (firstPassLines.length <= 1 ||
+                    subsequentLineWidth <= firstLineWidth) {
+                    wrappedValue = firstPassLines;
+                }
+                else {
+                    // Re-join remaining text and re-wrap to the wider continuation width
+                    const remainingText = firstPassLines
+                        .slice(1)
+                        .map((l) => l.trim())
+                        .join(" ");
+                    const rewrapped = wrapText(remainingText, subsequentLineWidth);
+                    wrappedValue = [firstLine, ...rewrapped];
+                }
+                // First line: bold label + value
+                lines.push(`${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} ${wrappedValue[0] || ""}`);
+                // Subsequent lines with small indent (skip empty lines)
+                for (let i = 1; i < wrappedValue.length; i++) {
+                    const line = wrappedValue[i];
+                    if (!line.trim())
+                        continue;
+                    lines.push(`${wrapIndent}${line}`);
+                }
+            });
+        });
+        return lines.join("\n");
+    }
+    // Choose format based on available width
+    if (useVerticalFormat) {
+        return renderVerticalFormat();
+    }
+    // Build the complete horizontal table as an array of strings
+    const tableLines = [];
+    tableLines.push(renderBorderLine("top"));
+    tableLines.push(...renderRowLines(token.header, true));
+    tableLines.push(renderBorderLine("middle"));
+    token.rows.forEach((row, rowIndex) => {
+        tableLines.push(...renderRowLines(row, false));
+        if (rowIndex < token.rows.length - 1) {
+            tableLines.push(renderBorderLine("middle"));
+        }
+    });
+    tableLines.push(renderBorderLine("bottom"));
+    // Safety check: verify no line exceeds terminal width.
+    // This catches edge cases during terminal resize where calculations
+    // were based on a different width than the current render target.
+    const maxLineWidth = Math.max(...tableLines.map((line) => stringWidth(stripAnsiColors(line))));
+    // If we're within SAFETY_MARGIN characters of the edge, use vertical format
+    // to account for terminal resize race conditions.
+    if (maxLineWidth > columns - SAFETY_MARGIN) {
+        return renderVerticalFormat();
+    }
+    return tableLines.join("\n");
+}

package/dist/utils/throttle.d.ts

@@ -2,8 +2,8 @@ export interface ThrottleOptions {
     leading?: boolean;
     trailing?: boolean;
 }
-export interface ThrottledFunction<T extends (...args: unknown[]) => void> {
-    (...args: Parameters<T>): void;
+export interface ThrottledFunction<A extends unknown[]> {
+    (...args: A): void;
     cancel: () => void;
     flush: () => void;
 }
@@ -11,4 +11,4 @@ export interface ThrottledFunction<T extends (...args: unknown[]) => void> {
  * Creates a throttled function that only invokes `func` at most once per
  * every `wait` milliseconds.
  */
-export declare function throttle<T extends (...args: unknown[]) => void>(func: T, wait: number, options?: ThrottleOptions): ThrottledFunction<T>;
+export declare function throttle<A extends unknown[]>(func: (...args: A) => void, wait: number, options?: ThrottleOptions): ThrottledFunction<A>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-code",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "CLI-based code assistant powered by AI, built with React and Ink",
   "repository": {
     "type": "git",
@@ -39,9 +39,11 @@
     "react": "^19.2.4",
     "react-dom": "19.2.4",
     "semver": "^7.7.4",
+    "string-width": "^8.2.2",
+    "wrap-ansi": "^10.0.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8",
-    "wave-agent-sdk": "1.0.0"
+    "wave-agent-sdk": "1.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",

package/src/cli.tsx

@@ -31,6 +31,17 @@ export async function startCli(options: CliOptions): Promise<void> {
   // Continue with ink-based UI for normal mode
   let shouldRemoveWorktree = false;
 
+  // Enable bracketed paste (DECSET 2004) so terminals wrap pasted text in
+  // \x1b[200~ ... \x1b[201~ markers. The input pipeline uses these to insert
+  // pasted text without submitting (a pasted trailing \r is not an Enter).
+  // Terminals without bracketed-paste support ignore the sequence and paste
+  // without markers, falling back to legacy behavior. No-op when stdout is
+  // not a TTY (piped input, stdio mode).
+  const stdoutIsTTY = process.stdout.isTTY === true;
+  if (stdoutIsTTY) {
+    process.stdout.write("\x1b[?2004h");
+  }
+
   const handleExit = (shouldRemove: boolean) => {
     shouldRemoveWorktree = shouldRemove;
     unmount();
@@ -59,7 +70,15 @@ export async function startCli(options: CliOptions): Promise<void> {
   );
 
   // Wait for the app to finish unmounting
-  await waitUntilExit();
+  try {
+    await waitUntilExit();
+  } finally {
+    // Disable bracketed paste (DECSET 2004) so the terminal returns to its
+    // previous paste handling.
+    if (stdoutIsTTY) {
+      process.stdout.write("\x1b[?2004l");
+    }
+  }
 
   try {
     // Clean up old log files

package/src/components/App.tsx

@@ -10,6 +10,7 @@ import {
   getDefaultRemoteBranch,
 } from "wave-agent-sdk";
 import { BaseAppProps } from "../types.js";
+import { btwOverlayActiveRef } from "../managers/inputReducer.js";
 
 interface AppProps extends BaseAppProps {
   restoreSessionId?: string;
@@ -51,6 +52,8 @@ const ChatWithExitPrompt: React.FC<{
   }, [worktreeSession, onExit]);
 
   useInput((input, key) => {
+    // While the /btw overlay is up it owns the keys; Ctrl+C must not quit
+    if (btwOverlayActiveRef.current) return;
     if (input === "c" && key.ctrl) {
       handleSignal();
     }
@@ -107,6 +110,8 @@ const AppWithProviders: React.FC<AppWithProvidersProps> = ({
   // Handle Ctrl-C for non-worktree sessions (immediate exit)
   // Ink runs terminal in raw mode, so Ctrl+C arrives as useInput event, not SIGINT
   useInput((input, key) => {
+    // While the /btw overlay is up it owns the keys; Ctrl+C must not quit
+    if (btwOverlayActiveRef.current) return;
     if (!worktreeSession && input === "c" && key.ctrl) {
       onExit(false);
       return true;

package/src/components/BtwDisplay.tsx

@@ -8,29 +8,53 @@ interface BtwDisplayProps {
 }
 
 export const BtwDisplay: React.FC<BtwDisplayProps> = ({ btwState }) => {
-  if (!btwState.question) {
+  // Rendered for a real question (loading or answered) and for the bare
+  // `/btw` usage message (question === "", answer set).
+  if (!btwState.question && !btwState.answer) {
     return null;
   }
 
+  const answer = btwState.answer ?? "";
+
+  // The SDK surfaces failure as the answer string; classify by prefix so it
+  // renders in error color (aligned with Claude Code's error display).
+  const isError =
+    !btwState.isLoading &&
+    (answer.startsWith("(API error") ||
+      answer.startsWith("(The model tried to call") ||
+      answer === "No response received");
+
   return (
-    <Box flexDirection="column" marginTop={0} marginBottom={0}>
+    <Box flexDirection="column" marginTop={1}>
       {btwState.question && (
         <Box>
-          <Text color={btwState.isLoading ? "yellow" : "green"}>/ </Text>
-          <Text italic color="gray">
-            btw {btwState.question}
+          <Text color="warning" bold>
+            /btw{" "}
           </Text>
+          <Text dimColor>{btwState.question}</Text>
         </Box>
       )}
-
-      {btwState.answer && (
-        <Box flexDirection="column">
-          <Markdown>{btwState.answer}</Markdown>
-          <Text color="gray" dimColor>
-            ESC to dismiss
-          </Text>
+      <Box marginTop={1} flexDirection="column">
+        {btwState.isLoading ? (
+          <Text color="gray">✻ Answering...</Text>
+        ) : isError ? (
+          <Text color="error">{answer}</Text>
+        ) : (
+          <Markdown>{answer}</Markdown>
+        )}
+      </Box>
+      {btwState.question && btwState.answer && (
+        <Box marginTop={1}>
+          <Text dimColor>Escape to dismiss</Text>
+        </Box>
+      )}
+      {!btwState.question && btwState.answer && (
+        <Box marginTop={1}>
+          <Text dimColor>Escape to dismiss</Text>
         </Box>
       )}
     </Box>
   );
 };
+
+BtwDisplay.displayName = "BtwDisplay";