kafox-cli 0.2.3 → 0.6.0

package/src/tui.js

@@ -1,22 +1,70 @@
 /**
- * Interface de terminal do kafox, no estilo opencode:
- * tela cheia, mascote, menu de comandos "/", seletor de modelo, input e rodape.
+ * Interface de terminal do kafox, no estilo opencode.
  *
- * Tudo e desenhado a mao (sem dependencia de TUI) para manter o pacote leve e
- * funcionar no Windows Terminal. Sem TTY, o cli.js usa o REPL simples.
+ * - primeiro frame: logo, pergunta e caixa de input
+ * - conversa rolavel (PgUp/PgDn e roda do mouse), com cards de ferramenta
+ *   mostrando o diff do que foi editado
+ * - "Thinking" aparece quando o modelo manda o raciocinio
+ * - aprovacao de ferramenta com tres opcoes (uma vez / sempre / negar),
+ *   navegavel por teclado ou mouse
+ * - o desenho e incremental: so as linhas que mudaram sao reescritas, entao
+ *   modal e streaming nao piscam
  */
-const readline = require("readline");
+const { spawnSync } = require("child_process");
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
 const chalk = require("chalk");
 const storage = require("./storage");
-const { mascot } = require("./mascot");
 const { ensureSession, fetchApi } = require("./auth");
-const { askModel } = require("./gateway");
+const { runAgent } = require("./agent");
+const { THEMES, themeColors, paintLine, paintPanel, borderColor } = require("./theme");
+const { logoLines, LOGO_WIDTH, LOGO_HEIGHT } = require("./logo");
+const { diffBlocks } = require("./diff");
+const { toolMeta, parseCommandOutput } = require("./tools");
+const { McpHub } = require("./mcp");
 
 const ANSI = /\x1b\[[0-9;]*m/g;
 const stripAnsi = (value) => String(value).replace(ANSI, "");
 const visible = (value) => stripAnsi(value).length;
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
+const SIDEBAR_MIN_COLS = 100;
+const MENU_HEIGHT = 6;
+const SYNC_START = "\x1b[?2026h";
+const SYNC_END = "\x1b[?2026l";
+
+const APPROVAL_OPTIONS = [
+  { id: "once", label: "Permitir uma vez" },
+  { id: "always", label: "Permitir sempre  (rodar tudo nesta sessão)" },
+  { id: "deny", label: "Negar" },
+];
+
+const KIND_COLORS = {
+  read: chalk.cyan,
+  list: chalk.cyanBright,
+  write: chalk.green,
+  edit: chalk.yellow,
+  bash: chalk.blueBright,
+  mcp: chalk.magenta,
+  tool: chalk.white,
+};
+
+const KIND_LABELS = {
+  read: "Read",
+  list: "List",
+  write: "Write",
+  edit: "Edit",
+  bash: "Bash",
+  mcp: "MCP",
+  tool: "Tool",
+};
+
+// Spinner do "rodando" dentro da janela de terminal da ferramenta.
+const SPINNER = ["⠋", "⠙", "⠹", "⠸"];
+const TERM_INDENT = 4;
+const MAX_CARD_OUTPUT = 6;
+
 function wrap(text, width) {
   const max = Math.max(10, width);
   const lines = [];
@@ -46,8 +94,13 @@ function wrap(text, width) {
 function truncate(text, width) {
   const plain = stripAnsi(text);
   if (plain.length <= width) return text;
-  if (width <= 3) return plain.slice(0, width);
-  return plain.slice(0, width - 3) + "...";
+  if (width <= 3) return plain.slice(0, Math.max(0, width));
+  return plain.slice(0, width - 1) + "…";
+}
+
+function padRight(text, width) {
+  const missing = width - visible(text);
+  return missing > 0 ? text + " ".repeat(missing) : truncate(text, width);
 }
 
 function center(text, width) {
@@ -55,11 +108,375 @@ function center(text, width) {
   return " ".repeat(pad) + text;
 }
 
-function padRight(text, width) {
-  const missing = width - visible(text);
-  return missing > 0 ? text + " ".repeat(missing) : truncate(text, width);
+const indent = (size) => " ".repeat(Math.max(0, size));
+
+/* ----------------------------------------------------------------- markdown */
+
+function accentFor(theme) {
+  const { accent } = themeColors(theme);
+  if (typeof chalk[accent] === "function") return chalk[accent];
+  return chalk.hex(accent);
+}
+
+const INLINE = /(\*\*[^*]+\*\*|`[^`]+`|\*[^*\n]+\*)/g;
+
+function parseInline(text) {
+  const parts = String(text).split(INLINE);
+  const segments = [];
+  for (const part of parts) {
+    if (!part) continue;
+    if (part.startsWith("**") && part.endsWith("**") && part.length > 4) {
+      segments.push({ text: part.slice(2, -2), bold: true });
+    } else if (part.startsWith("`") && part.endsWith("`") && part.length > 2) {
+      segments.push({ text: part.slice(1, -1), code: true });
+    } else if (part.startsWith("*") && part.endsWith("*") && part.length > 2) {
+      segments.push({ text: part.slice(1, -1), italic: true });
+    } else {
+      segments.push({ text: part });
+    }
+  }
+  return segments;
+}
+
+function wrapSegments(segments, width) {
+  const max = Math.max(10, width);
+  const lines = [];
+  let current = [];
+  let length = 0;
+
+  const flush = () => {
+    lines.push(current);
+    current = [];
+    length = 0;
+  };
+
+  for (const segment of segments) {
+    for (const token of String(segment.text).split(/(\s+)/)) {
+      if (!token || !token.trim()) continue;
+      let word = token;
+      while (word.length > max) {
+        const slice = word.slice(0, max - (length > 0 ? 1 : 0));
+        if (length > 0) {
+          current.push({ text: " " });
+          length += 1;
+        }
+        current.push({ ...segment, text: slice });
+        flush();
+        word = word.slice(slice.length);
+      }
+      const space = length > 0 ? 1 : 0;
+      if (length + space + word.length > max) flush();
+      if (length > 0) {
+        current.push({ text: " " });
+        length += 1;
+      }
+      current.push({ ...segment, text: word });
+      length += word.length;
+    }
+  }
+  if (current.length) flush();
+  return lines;
+}
+
+function renderSegments(segments, theme = "default") {
+  const accent = accentFor(theme);
+  return segments
+    .map((segment) => {
+      let text = segment.text;
+      if (segment.code) text = chalk.cyan(text);
+      if (segment.italic) text = chalk.italic(text);
+      if (segment.bold) text = accent(chalk.bold(text));
+      return text;
+    })
+    .join("");
+}
+
+/** Converte Markdown simples em linhas prontas para o terminal. */
+function markdownLines(text, width, theme = "default") {
+  const accent = accentFor(theme);
+  const out = [];
+  const rows = String(text).replace(/\r/g, "").split("\n");
+  let inCode = false;
+
+  for (const raw of rows) {
+    const line = raw.replace(/\s+$/, "");
+    if (/^\s*```/.test(line)) {
+      inCode = !inCode;
+      out.push(chalk.dim(indent(2) + "─".repeat(Math.min(width - 2, 24))));
+      continue;
+    }
+    if (inCode) {
+      out.push(chalk.dim(indent(2) + "│ ") + chalk.cyan(truncate(line, width - 4)));
+      continue;
+    }
+    if (!line.trim()) {
+      out.push("");
+      continue;
+    }
+    if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      out.push(chalk.dim(indent(2) + "─".repeat(Math.min(width - 2, 40))));
+      continue;
+    }
+
+    const heading = line.match(/^\s*#{1,6}\s+(.*)$/);
+    if (heading) {
+      if (out.length) out.push("");
+      for (const wrapped of wrapSegments(parseInline(heading[1]), width - 2)) {
+        out.push(indent(2) + accent(chalk.bold(renderSegments(wrapped, theme))));
+      }
+      out.push("");
+      continue;
+    }
+
+    const bullet = line.match(/^\s*[-*+]\s+(.*)$/);
+    if (bullet) {
+      const wrapped = wrapSegments(parseInline(bullet[1]), width - 5);
+      wrapped.forEach((part, index) => {
+        out.push((index === 0 ? indent(2) + "• " : indent(4)) + renderSegments(part, theme));
+      });
+      continue;
+    }
+
+    const numbered = line.match(/^\s*(\d+)[.)]\s+(.*)$/);
+    if (numbered) {
+      const wrapped = wrapSegments(parseInline(numbered[2]), width - 6);
+      wrapped.forEach((part) => {
+        out.push(indent(2) + `${numbered[1]}. ` + renderSegments(part, theme));
+      });
+      continue;
+    }
+
+    const quote = line.match(/^\s*>\s?(.*)$/);
+    if (quote) {
+      for (const part of wrapSegments(parseInline(quote[1]), width - 5)) {
+        out.push(chalk.dim(indent(2) + "│ " + stripAnsi(renderSegments(part, theme))));
+      }
+      continue;
+    }
+
+    // Modelos costumam indentar paragrafos; no terminal isso vira ruim.
+    const clean = line.replace(/^\s+(?=\S)/, "");
+    for (const part of wrapSegments(parseInline(clean), width - 2)) {
+      out.push(indent(2) + renderSegments(part, theme));
+    }
+  }
+  return out;
+}
+
+/* -------------------------------------------------------------------- teclado */
+
+const KEY_MAP = {
+  "\x1b[A": "up",
+  "\x1b[B": "down",
+  "\x1b[C": "right",
+  "\x1b[D": "left",
+  "\x1bOA": "up",
+  "\x1bOB": "down",
+  "\x1bOC": "right",
+  "\x1bOD": "left",
+  "\x1b[H": "home",
+  "\x1bOH": "home",
+  "\x1b[F": "end",
+  "\x1bOF": "end",
+  "\x1b[1~": "home",
+  "\x1b[4~": "end",
+  "\x1b[3~": "delete",
+  "\x1b[5~": "pageup",
+  "\x1b[6~": "pagedown",
+  "\x1b[Z": "tab",
+  "\x1bOP": "f1",
+  "\x1bOQ": "f2",
+  "\x1bOR": "f3",
+  "\x1bOS": "f4",
+  "\x1b[11~": "f1",
+  "\x1b[12~": "f2",
+  "\x1b[13~": "f3",
+  "\x1b[14~": "f4",
+};
+const KEY_SEQUENCES = Object.keys(KEY_MAP).sort((a, b) => b.length - a.length);
+
+const CONTROL_KEYS = {
+  3: { name: "c", ctrl: true },
+  4: { name: "d", ctrl: true },
+  8: { name: "backspace" },
+  9: { name: "tab" },
+  10: { name: "return" },
+  12: { name: "l", ctrl: true },
+  13: { name: "return" },
+  21: { name: "u", ctrl: true },
+  23: { name: "w", ctrl: true },
+  25: { name: "y", ctrl: true },
+  127: { name: "backspace" },
+};
+
+const MOUSE_RE = /^\x1b\[<(\d+);(\d+);(\d+)[Mm]/;
+const PARTIAL_MOUSE_RE = /^\x1b\[<[\d;]*$/;
+
+/** Decodifica o que chegou do stdin no formato (str, key) usado pela TUI. */
+function decodeKeys(data) {
+  const events = [];
+  let index = 0;
+
+  while (index < data.length) {
+    const rest = data.slice(index);
+
+    const mouse = rest.match(MOUSE_RE);
+    if (mouse) {
+      events.push({ str: mouse[0], key: { sequence: mouse[0] } });
+      index += mouse[0].length;
+      continue;
+    }
+    if (PARTIAL_MOUSE_RE.test(rest)) break;
+
+    const sequence = KEY_SEQUENCES.find((candidate) => rest.startsWith(candidate));
+    if (sequence) {
+      events.push({ str: undefined, key: { name: KEY_MAP[sequence], sequence } });
+      index += sequence.length;
+      continue;
+    }
+    // Sequencia incompleta: espera o resto chegar.
+    if (KEY_SEQUENCES.some((candidate) => candidate.startsWith(rest))) break;
+    if (rest === "\x1b") break;
+
+    if (rest[0] === "\x1b") {
+      events.push({ str: undefined, key: { name: "escape", sequence: "\x1b" } });
+      index += 1;
+      continue;
+    }
+
+    const code = rest.charCodeAt(0);
+    if (code < 32 || code === 127) {
+      const entry = CONTROL_KEYS[code];
+      events.push({
+        str: entry?.ctrl ? "" : undefined,
+        key: { name: entry?.name, ctrl: !!entry?.ctrl, sequence: rest[0] },
+      });
+      index += 1;
+      continue;
+    }
+
+    let end = index;
+    while (end < data.length) {
+      const charCode = data.charCodeAt(end);
+      if (charCode < 32 || charCode === 127 || data[end] === "\x1b") break;
+      end += 1;
+    }
+    events.push({ str: data.slice(index, end), key: { sequence: data.slice(index, end) } });
+    index = end;
+  }
+
+  return { events, rest: data.slice(index) };
 }
 
+const PASTE_START = "\x1b[200~";
+const PASTE_END = "\x1b[201~";
+
+/**
+ * Leitor do stdin cru: junta pedacos de escape sequence, trata colagem
+ * (bracketed paste) como texto e entrega eventos (str, key) para a TUI.
+ */
+function createKeyReader(onEvent, { escapeDelay = 40 } = {}) {
+  let pending = "";
+  let pasting = false;
+  let timer = null;
+
+  const armEscape = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    if (pending !== "\x1b") return;
+    timer = setTimeout(() => {
+      timer = null;
+      if (pending !== "\x1b") return;
+      pending = "";
+      onEvent({ str: undefined, key: { name: "escape", sequence: "\x1b" } });
+    }, escapeDelay);
+    timer.unref?.();
+  };
+
+  return {
+    feed(chunk) {
+      pending += String(chunk);
+      let guard = 0;
+
+      while (pending.length && guard < 4096) {
+        guard += 1;
+
+        if (pasting) {
+          const end = pending.indexOf(PASTE_END);
+          if (end === -1) {
+            if (pending.length > PASTE_END.length) {
+              const cut = pending.length - PASTE_END.length;
+              onEvent({ str: pending.slice(0, cut).replace(/[\r\n]+/g, " "), key: {} });
+              pending = pending.slice(cut);
+            }
+            return;
+          }
+          onEvent({ str: pending.slice(0, end).replace(/[\r\n]+/g, " "), key: {} });
+          pending = pending.slice(end + PASTE_END.length);
+          pasting = false;
+          continue;
+        }
+
+        const start = pending.indexOf(PASTE_START);
+        const { events, rest } = decodeKeys(start === -1 ? pending : pending.slice(0, start));
+        for (const event of events) onEvent(event);
+
+        if (start === -1) {
+          pending = rest;
+          break;
+        }
+        pending = pending.slice(start + PASTE_START.length);
+        pasting = true;
+      }
+
+      armEscape();
+    },
+  };
+}
+
+/* --------------------------------------------------------------- area de transferencia */
+
+function copyToClipboard(text) {
+  try {
+    if (process.platform === "win32") {
+      // clip.exe depende do code page do console (estraga acentos); o arquivo
+      // temporario em UTF-8 resolve isso sem limite de tamanho.
+      const file = path.join(os.tmpdir(), `kafox-copy-${process.pid}-${Date.now()}.txt`);
+      try {
+        fs.writeFileSync(file, text, "utf8");
+        const script = `Set-Clipboard -Value (Get-Content -Raw -Encoding UTF8 '${file}')`;
+        const result = spawnSync(
+          "powershell",
+          ["-NoProfile", "-NonInteractive", "-Command", script],
+          { timeout: 10000, windowsHide: true }
+        );
+        return result.status === 0;
+      } finally {
+        try {
+          fs.unlinkSync(file);
+        } catch {}
+      }
+    }
+    const attempts =
+      process.platform === "darwin"
+        ? [["pbcopy", []]]
+        : [
+            ["wl-copy", []],
+            ["xclip", ["-selection", "clipboard"]],
+            ["xsel", ["--clipboard", "--input"]],
+          ];
+    for (const [command, args] of attempts) {
+      const result = spawnSync(command, args, { input: text, timeout: 5000 });
+      if (result.status === 0) return true;
+    }
+  } catch {}
+  return false;
+}
+
+/* ------------------------------------------------------------------- estado */
+
 function initialState() {
   const cfg = storage.getConfig();
   return {
@@ -68,13 +485,29 @@ function initialState() {
     history: [],
     historyIndex: -1,
     messages: [],
+    context: [],
+    streaming: null,
+    approval: null,
+    autoApprove: false,
     busy: false,
     frame: 0,
+    queue: [],
+    draining: false,
+    escArmed: false,
+    abort: null,
+
     menuIndex: 0,
     menuDismissed: false,
     picker: null,
+    modal: null,
     models: [],
     balance: null,
+    tokens: 0,
+    files: [],
+    mcp: { loading: false, statuses: [], tools: 0 },
+    scroll: 0,
+    pageSize: 10,
+    mouse: true,
     model: cfg.model || null,
     theme: cfg.theme || "default",
     suspended: false,
@@ -82,29 +515,287 @@ function initialState() {
   };
 }
 
-/* ------------------------------------------------------------------ layout */
+/* ------------------------------------------------------------------- layout */
 
-function headerLines(state, width, rows, footerCount, compact) {
-  if (state.messages.length || state.picker) return [];
+function layoutFor(state, cols) {
+  const sidebar =
+    cols >= SIDEBAR_MIN_COLS && (state.messages.length > 0 || state.streaming) ? Math.min(34, Math.floor(cols * 0.3)) : 0;
+  const main = cols - sidebar;
+  return { sidebar, main, inner: Math.max(20, main - 2) };
+}
 
-  // Centraliza o bloco inteiro: as linhas tem larguras diferentes e cada uma
-  // precisa do mesmo recuo para a raposa nao sair distorcida.
-  const artLines = mascot.split("\n");
-  const artWidth = Math.max(...artLines.map((line) => line.length));
-  const artLeft = " ".repeat(Math.max(0, Math.floor((width - artWidth) / 2)));
-  const art = artLines.map((line) => artLeft + chalk.white(line));
-  const space = rows - 2 - footerCount - (compact ? 0 : 1);
+function border(state, text) {
+  return borderColor(state.theme)(text);
+}
+
+function rule(state, width) {
+  return border(state, "─".repeat(Math.max(0, width)));
+}
+
+function dot(state, status) {
+  if (status === "connected") return chalk.green("●");
+  if (status === "error") return chalk.red("●");
+  if (status === "connecting") return chalk.yellow("●");
+  return chalk.dim("○");
+}
+
+function heroActive(state) {
+  return state.messages.length === 0 && !state.streaming && !state.picker && !state.modal && !state.approval;
+}
+
+function heroLines(state, width, available) {
+  const sections = [];
+  const logo = logoLines(state.theme);
+  const logoWidth = Math.max(...logo.map((line) => visible(line)));
+
+  if (width >= logoWidth + 2 && available >= LOGO_HEIGHT + 9) {
+    sections.push({ gap: true, lines: logo.map((line) => center(line, width)) });
+  }
+  sections.push({ lines: [""] });
+  sections.push({
+    lines: [
+      center(chalk.bold("O que voce quer fazer?"), width),
+      center(chalk.dim('"cria um hello world em python"'), width),
+    ],
+  });
+  sections.push({
+    lines: [
+      "",
+      center(
+        chalk.dim("tab") +
+          " comandos   " +
+          chalk.dim("enter") +
+          " envia   " +
+          chalk.dim("/") +
+          " menu   " +
+          chalk.dim("ctrl+c") +
+          " sai",
+        width
+      ),
+    ],
+  });
+
+  const out = [];
+  for (const section of sections) {
+    if (available && out.length + section.lines.length > available) break;
+    out.push(...section.lines);
+    if (section.gap) out.push("");
+  }
+
+  // Um respiro em cima deixa o bloco no meio em vez de colado na primeira linha.
+  const grow = Math.max(0, available - out.length);
+  const top = Math.min(Math.floor(grow / 3), Math.max(0, Math.floor((available - 1) / 4)));
+  return [...Array(top).fill(""), ...out].slice(0, Math.max(0, available || out.length));
+}
+
+/* --------------------------------------------------------------------- cards */
+
+function diffCardLines(change, width) {
+  const lines = [];
+  if (!change || change.error) return lines;
+  const before = change.before ?? "";
+  const after = change.after ?? "";
+
+  if (change.kind === "create") {
+    const rows = String(after).replace(/\n$/, "").split("\n");
+    rows.slice(0, 5).forEach((row, index) => {
+      lines.push(
+        indent(4) +
+          chalk.dim(String(index + 1).padStart(4)) +
+          " " +
+          chalk.green("+ " + truncate(row, width - 12))
+      );
+    });
+    if (rows.length > 5) lines.push(indent(8) + chalk.dim(`... +${rows.length - 5} linhas`));
+    return lines;
+  }
+
+  const { blocks, added, removed, truncated } = diffBlocks(before, after, {
+    context: 1,
+    maxLines: 14,
+  });
+
+  for (const block of blocks) {
+    for (const entry of block) {
+      if (entry.type === "gap") {
+        lines.push(indent(8) + chalk.dim("⋯"));
+        continue;
+      }
+      const number = entry.afterNo ?? entry.beforeNo ?? "";
+      const gutter = String(number).padStart(4);
+      if (entry.type === "add") {
+        lines.push(indent(4) + chalk.dim(gutter) + " " + chalk.green("+ " + truncate(entry.text, width - 12)));
+      } else if (entry.type === "del") {
+        lines.push(indent(4) + chalk.dim(gutter) + " " + chalk.red("- " + truncate(entry.text, width - 12)));
+      } else {
+        lines.push(indent(4) + chalk.dim(gutter + "   " + truncate(entry.text, width - 12)));
+      }
+    }
+  }
+
+  lines.push(
+    indent(6) +
+      chalk.green(`+${added}`) +
+      " " +
+      chalk.red(`-${removed}`) +
+      (truncated ? chalk.dim("  (diff simplificado)") : "")
+  );
+  return lines;
+}
+
+/* ------------------------------- janela de terminal (ferramentas que rodam) */
+
+function termWidth(width) {
+  return Math.max(24, width - TERM_INDENT);
+}
 
-  if (space >= art.length + 4) {
-    return [...art, "", center(chalk.bold("O que voce quer fazer?"), width),
-      center(chalk.dim("Use / para comandos  |  Enter envia  |  Ctrl+C sai"), width), ""];
+function termTop(state, label, width) {
+  const box = termWidth(width);
+  const head = `─ ${label} `;
+  return (
+    indent(TERM_INDENT) +
+    border(state, `╭${head}${"─".repeat(Math.max(0, box - 2 - visible(head)))}╮`)
+  );
+}
+
+function termBottom(state, status, width) {
+  const box = termWidth(width);
+  const head = `─ ${status} `;
+  return (
+    indent(TERM_INDENT) +
+    border(state, `╰${head}${"─".repeat(Math.max(0, box - 2 - visible(head)))}╯`)
+  );
+}
+
+function termRow(state, text, width) {
+  const box = termWidth(width);
+  const inner = box - 4;
+  return indent(TERM_INDENT) + border(state, "│ ") + padRight(text, inner) + border(state, " │");
+}
+
+function elapsedLabel(tool) {
+  if (!tool.startedAt) return "";
+  const seconds = (Date.now() - tool.startedAt) / 1000;
+  return `${seconds < 10 ? seconds.toFixed(1) : Math.round(seconds)}s`;
+}
+
+function termStatus(state, tool, parsed) {
+  if (tool.status === "running") {
+    const spinner = chalk.yellow(SPINNER[state.frame % SPINNER.length]);
+    const seconds = elapsedLabel(tool);
+    return `${spinner} ${chalk.yellow("rodando")}${seconds ? chalk.dim(` ${seconds}`) : ""}`;
+  }
+  if (tool.skipped) return chalk.dim("negado por você");
+  const seconds = tool.ms ? ` · ${(tool.ms / 1000).toFixed(1)}s` : "";
+  if (parsed?.timedOut) return chalk.red("timeout") + chalk.dim(seconds);
+  if (parsed && parsed.exit != null) {
+    const code = String(parsed.exit);
+    return (parsed.exit === 0 && tool.ok ? chalk.green : chalk.red)(`exit ${code}`) + chalk.dim(seconds);
+  }
+  return (tool.ok ? chalk.green : chalk.red)(tool.ok ? "ok" : "erro") + chalk.dim(seconds);
+}
+
+function outputRows(state, tool, width) {
+  const parsed = tool.change?.kind === "command" ? parseCommandOutput(tool.output || "") : null;
+  const rows = [];
+
+  if (parsed) {
+    for (const line of parsed.stdout) rows.push({ text: line });
+    for (const line of parsed.stderr) rows.push({ text: line, stderr: true });
+  } else {
+    for (const line of String(tool.output || "").split("\n")) rows.push({ text: line });
   }
-  if (space >= art.length + 2) {
-    return [...art, "", center(chalk.bold("O que voce quer fazer?"), width), ""];
+
+  const body = rows.filter((row, index) => row.text.length || index < rows.length - 1);
+  const shown = body.slice(0, MAX_CARD_OUTPUT);
+  const lines = shown.map((row) => termRow(state, row.stderr ? chalk.red(row.text) : row.text, width));
+  if (body.length > shown.length) {
+    lines.push(termRow(state, chalk.dim(`… +${body.length - shown.length} linhas`), width));
   }
-  if (space >= art.length + 1) return [...art, ""];
-  if (space >= art.length) return art;
-  return art.slice(0, Math.max(0, space));
+  return { lines, parsed };
+}
+
+/** Bash: janela de terminal com o comando, a saida e o status. */
+function commandCardLines(state, tool, width) {
+  const command = tool.change?.command || tool.label || "";
+  const lines = [termTop(state, KIND_COLORS.bash("bash"), width)];
+  const commandWidth = termWidth(width) - 6;
+
+  wrap(command, commandWidth)
+    .slice(0, 3)
+    .forEach((row, index) => {
+      lines.push(termRow(state, chalk.bold((index === 0 ? "$ " : "  ") + row), width));
+    });
+
+  const { lines: output, parsed } = outputRows(state, tool, width);
+  if (output.length) {
+    lines.push(termRow(state, "", width));
+    lines.push(...output);
+  }
+
+  lines.push(termBottom(state, termStatus(state, tool, parsed), width));
+  return lines;
+}
+
+/** MCP: mesma janela, com os argumentos e o resultado da ferramenta remota. */
+function mcpCardLines(state, tool, width) {
+  const meta = tool.meta || {};
+  const title = truncate(`${meta.server || "mcp"} / ${meta.tool || tool.name}`, termWidth(width) - 8);
+  const lines = [termTop(state, KIND_COLORS.mcp(`mcp · ${title}`), width)];
+  const args = JSON.stringify(tool.args || {});
+
+  wrap(`$ ${args}`, termWidth(width) - 6)
+    .slice(0, 2)
+    .forEach((row) => lines.push(termRow(state, chalk.bold(row), width)));
+
+  const { lines: output, parsed } = outputRows(state, tool, width);
+  if (output.length) {
+    lines.push(termRow(state, "", width));
+    lines.push(...output);
+  }
+
+  lines.push(termBottom(state, termStatus(state, tool, parsed), width));
+  return lines;
+}
+
+function toolCardLines(message, width, state) {
+  const tool = message.tool || {};
+  const meta = tool.meta || { kind: "tool", label: KIND_LABELS[tool.kind] || tool.name || "Tool" };
+
+  if (meta.kind === "bash") return ["", ...commandCardLines(state, tool, width)];
+  if (meta.kind === "mcp") return ["", ...mcpCardLines(state, tool, width)];
+
+  const paint = KIND_COLORS[meta.kind] || chalk.white;
+  const label = paint((meta.label || KIND_LABELS[meta.kind] || "Tool").padEnd(5));
+  const target = tool.label || "";
+
+  const lines = ["", indent(2) + chalk.dim("• ") + label + " " + chalk.bold(truncate(target, width - 12))];
+
+  if (tool.change) {
+    lines.push(...diffCardLines(tool.change, width));
+    if (tool.change.error) lines.push(indent(8) + chalk.red(truncate(tool.change.error, width - 10)));
+  }
+
+  if (tool.status === "running") {
+    lines.push(indent(8) + chalk.dim("rodando…"));
+  } else if (tool.status === "done") {
+    const summary = tool.summary || "(sem saida)";
+    lines.push(
+      indent(8) +
+        (tool.skipped ? chalk.dim("⎿ ") : tool.ok ? chalk.dim("⎿ ") : chalk.red("⎿ ")) +
+        (tool.ok ? chalk.dim(summary) : chalk.red(summary))
+    );
+  }
+
+  return lines;
+}
+
+function thinkingLines(message, width) {
+  const lines = ["", indent(2) + chalk.dim("▾ Thinking") + chalk.dim(message.ms ? `  ${(message.ms / 1000).toFixed(1)}s` : "")];
+  const rows = wrap(String(message.text || "").trim(), width - 6);
+  for (const row of rows.slice(0, 8)) lines.push(indent(6) + chalk.dim.italic(row));
+  if (rows.length > 8) lines.push(indent(6) + chalk.dim(`... +${rows.length - 8} linhas`));
+  return lines;
 }
 
 function messageLines(state, width) {
@@ -113,24 +804,54 @@ function messageLines(state, width) {
     if (message.role === "user") {
       lines.push("");
       const body = wrap(message.text, width - 2);
-      lines.push(chalk.cyan("> ") + chalk.bold(body[0] || ""));
+      lines.push(indent(2) + chalk.cyan("▌ ") + chalk.bold(body[0] || ""));
       for (let index = 1; index < body.length; index += 1) {
-        lines.push("  " + chalk.bold(body[index]));
+        lines.push(indent(4) + chalk.bold(body[index]));
       }
     } else if (message.role === "assistant") {
       lines.push("");
-      for (const line of wrap(message.text, width - 2)) lines.push("  " + line);
-      const meta = message.ms ? `${(message.ms / 1000).toFixed(1)}s` : "";
-      if (meta) lines.push(chalk.dim("  " + meta));
+      lines.push(...markdownLines(message.text, width - 2, state.theme));
+      const meta = [];
+      if (message.interrupted) meta.push("interrompido");
+      if (message.ms) meta.push(`${(message.ms / 1000).toFixed(1)}s`);
+      if (message.provider) meta.push(message.provider);
+      if (meta.length) lines.push("");
+      if (meta.length) lines.push(indent(2) + chalk.dim(meta.join(" · ")));
+    } else if (message.role === "thinking") {
+      lines.push(...thinkingLines(message, width));
+    } else if (message.role === "tool") {
+      lines.push(...toolCardLines(message, width, state));
     } else {
       lines.push("");
-      const color = message.error ? chalk.red : chalk.dim;
-      for (const line of wrap(message.text, width - 2)) lines.push(color("  " + line));
+      const color = message.error ? chalk.red : message.interrupted ? chalk.yellow : chalk.dim;
+      const mark = message.interrupted ? "⏹" : "!";
+      for (const line of wrap(message.text, width - 4)) lines.push(color(indent(2) + mark + " " + line));
     }
   }
-  if (state.busy) {
+
+  // Resposta chegando token a token (e o "thinking" do modelo, se houver).
+  const streaming = state.streaming;
+  if (streaming && (streaming.reasoning || streaming.text)) {
+    if (streaming.reasoning) {
+      const elapsed = streaming.thinkingStartedAt
+        ? (Date.now() - streaming.thinkingStartedAt) / 1000
+        : 0;
+      lines.push("");
+      lines.push(
+        indent(2) + chalk.dim("▾ Thinking") + chalk.dim(elapsed ? `  ${elapsed.toFixed(1)}s` : "")
+      );
+      const rows = wrap(streaming.reasoning.trim(), width - 6);
+      for (const row of rows.slice(-8)) lines.push(indent(6) + chalk.dim.italic(row));
+    }
+    if (streaming.text) {
+      lines.push("");
+      lines.push(...markdownLines(streaming.text, width - 2, state.theme));
+    }
+  }
+
+  if (state.busy && !streaming?.text) {
     lines.push("");
-    lines.push(chalk.dim(`  pensando${".".repeat(state.frame % 4)}`));
+    lines.push(indent(2) + chalk.dim("pensando" + ".".repeat(state.frame % 4)));
   }
   return lines;
 }
@@ -148,112 +869,464 @@ function filteredCommands(state, commands) {
 }
 
 function menuLines(state, commands, width) {
-  const items = filteredCommands(state, commands).slice(0, 8);
+  const items = filteredCommands(state, commands);
   if (!items.length) return [];
-  return items.map(([name, description], index) => {
-    const selected = index === state.menuIndex % items.length;
-    const text = truncate(` ${name}`.padEnd(24) + description, width);
-    return selected ? chalk.inverse(padRight(text, width)) : chalk.dim(text);
+
+  // Janela acompanhando o item selecionado: com 15 comandos a lista fixa
+  // empurrava input e rodape para fora da tela (e /logout ficava inalcancavel).
+  const height = Math.min(MENU_HEIGHT, items.length);
+  const index = state.menuIndex % items.length;
+  const start = clamp(index - Math.floor(height / 2), 0, Math.max(0, items.length - height));
+  const rows = [];
+
+  if (items.length > height) {
+    rows.push(chalk.dim(indent(2) + `${index + 1}/${items.length}  ↑/↓ para navegar`));
+  }
+  items.slice(start, start + height).forEach(([name, description], offset) => {
+    const selected = start + offset === index;
+    const text = padRight(` ${name}`.padEnd(16) + description, width - 1);
+    rows.push(indent(1) + (selected ? chalk.inverse(text) : chalk.dim(text)));
   });
+  return rows;
 }
 
-function pickerLines(state, width) {
-  const picker = state.picker;
-  if (!picker) return [];
-
-  const lines = [
-    chalk.bold(" Escolha o modelo"),
-    chalk.dim(" ↑/↓ navega  |  Enter seleciona  |  Esc cancela"),
-    "",
-  ];
-  if (picker.loading) return [...lines, chalk.dim(" carregando modelos..."), ""];
-
-  const height = 6;
-  const start = clamp(picker.index - Math.floor(height / 2), 0, Math.max(0, picker.items.length - height));
-  picker.items.slice(start, start + height).forEach((item, offset) => {
-    const real = start + offset;
-    const price = `in ${(item.input / 1_000_000).toFixed(2)}  out ${(item.output / 1_000_000).toFixed(2)} R$/1M`;
-    const available = Math.max(20, width - price.length - 2);
-    const label = padRight(truncate(` ${real === picker.index ? ">" : " "} ${item.id}`, available), available);
-    const line = label + "  " + chalk.dim(price);
-    lines.push(real === picker.index ? chalk.inverse(padRight(line, width)) : line);
-  });
+function formatTokens(count) {
+  if (count < 1000) return String(count);
+  if (count < 1_000_000) return `${(count / 1000).toFixed(1)}k`;
+  return `${(count / 1_000_000).toFixed(1)}M`;
+}
+
+function estimateTokens(state) {
+  let chars = 0;
+  for (const message of state.context) chars += String(message.content || "").length;
+  if (state.streaming) chars += String(state.streaming.text || "").length;
+  return Math.round(chars / 4);
+}
+
+function sidebarLines(state, width) {
+  const lines = [];
+  const tokens = state.tokens || estimateTokens(state);
+
+  lines.push(border(state, "Context"));
+  const messages = state.context.length;
+  lines.push(chalk.dim(`${formatTokens(tokens)} tokens · ${messages} msg${messages === 1 ? "" : "s"}`));
+  lines.push(chalk.dim(state.balance == null ? "saldo --" : `R$ ${(state.balance / 1_000_000).toFixed(2)}`));
+
   lines.push("");
+  lines.push(border(state, "MCP"));
+  if (state.mcp.loading) {
+    lines.push(chalk.dim("conectando…"));
+  } else if (!state.mcp.statuses.length) {
+    lines.push(chalk.dim("nenhum servidor"));
+    lines.push(chalk.dim("/mcp para configurar"));
+  } else {
+    for (const status of state.mcp.statuses) {
+      const label = truncate(status.name, width - 7);
+      lines.push(`${dot(state, status.status)} ${chalk.bold(label)} ${chalk.dim(String(status.tools))}`);
+      if (status.status === "error") {
+        lines.push(chalk.dim(indent(2) + truncate(status.error || "erro", width - 4)));
+      }
+    }
+  }
+
+  if (state.files.length) {
+    lines.push("");
+    lines.push(border(state, "Arquivos"));
+    for (const file of state.files.slice(-8)) {
+      const mark = file.kind === "create" ? "A" : "M";
+      lines.push(chalk.dim(`${mark} `) + truncate(file.path, width - 3));
+    }
+  }
+
+  if (state.autoApprove) {
+    lines.push("");
+    lines.push(chalk.yellow("● rodando tudo"));
+    lines.push(chalk.dim("sem pedir aprovacao"));
+  }
+
   return lines;
 }
 
-function footerLines(state, width) {
-  const name = `kafox ${state.version}`;
-  const left = chalk.dim(truncate(`${name}  |  ${state.model || "auto"}`, width - 16));
+/* --------------------------------------------------------------------- chrome */
+
+/** Mensagens esperando a vez: aparecem acima do input, sem interromper a digitacao. */
+function queueLines(state, width) {
+  const pending = state.queue || [];
+  if (!pending.length) return [];
+
+  const rows = [indent(1) + chalk.dim(`⏳ ${pending.length} na fila  ·  Esc 2× para parar a atual`)];
+  pending.slice(0, 3).forEach((line, index) => {
+    rows.push(indent(3) + chalk.dim(truncate(`${index + 1}. ${line}`, width - 4)));
+  });
+  if (pending.length > 3) rows.push(indent(3) + chalk.dim(`… +${pending.length - 3}`));
+  return rows;
+}
+
+function inputBlock(state, width, { hero = false, tight = false } = {}) {
+  const available = width - 4;
+  const start =
+    state.input.length > available
+      ? clamp(state.cursor - (available - 2), 0, Math.max(0, state.input.length - available))
+      : 0;
+  const shown = state.input.slice(start, start + available);
+
+  const prompt = chalk.cyan("▌ ");
+  let body;
+  if (state.input) {
+    body = prompt + shown;
+  } else {
+    const placeholder = hero
+      ? "Pergunte alguma coisa... ex: \"explica esse repo\""
+      : "Pergunte alguma coisa...";
+    body = prompt + chalk.dim(truncate(placeholder, available));
+  }
+
+  const lines = [rule(state, width), paintPanel(state.theme, padRight(body, width))];
+  let cursorRow = 1;
+
+  if (!tight) {
+    const model = state.model || "auto";
+    const status = state.escArmed
+      ? "  Esc de novo para parar a IA"
+      : state.busy
+        ? `  pensando${".".repeat(state.frame % 4)}  ·  Esc 2× para parar`
+        : state.autoApprove
+          ? "  rodando tudo"
+          : "";
+    // Com o Esc armado a versao sai de cena: o aviso precisa caber na linha.
+    const label = state.escArmed
+      ? `${model}${status}`
+      : `${model} · kafox v${state.version}${status}`;
+    lines.push(paintPanel(state.theme, padRight(indent(2) + chalk.dim(truncate(label, width - 2)), width)));
+    lines.push(rule(state, width));
+  }
+
+  return {
+    lines,
+    cursorRow,
+    cursorCol: 4 + (state.cursor - start),
+  };
+}
+
+function statusLines(state, width, { bare = false } = {}) {
+  if (bare) return [];
+  const cwd = truncate(process.cwd(), Math.max(10, width - 16));
+  const left = chalk.dim(cwd);
   const right = chalk.green(
     state.balance == null ? "saldo --" : `R$ ${(state.balance / 1_000_000).toFixed(2)}`
   );
   const gap = " ".repeat(Math.max(1, width - visible(left) - visible(right)));
-  return [
-    left + gap + right,
-    chalk.dim(truncate(process.cwd(), width)),
-    chalk.dim(truncate("Enter envia  |  / comandos  |  Ctrl+C sai", width)),
-  ];
-}
-
-function buildFrame(state, cols, rows, commands) {
-  const width = Math.min(cols - 2, 108);
-  const margin = Math.floor((cols - width) / 2);
-  const gutter = " ".repeat(Math.max(0, margin));
-  const compact = rows < 34;
-
-  const footer = footerLines(state, width).slice(0, compact ? 1 : 3);
-  const panel = state.picker
-    ? pickerLines(state, width)
-    : menuLines(state, commands, width);
-  const header = headerLines(state, width, rows, footer.length, compact);
-
-  const reserved = 2 + footer.length + (compact ? 0 : 1) + panel.length;
-  const available = Math.max(0, rows - header.length - reserved);
-  let body = messageLines(state, width);
-  if (body.length > available) body = body.slice(body.length - available);
-  while (body.length < available) body.unshift("");
-
-  const inputWidth = width - 2;
-  const start = state.input.length > inputWidth
-    ? clamp(state.cursor - (inputWidth - 2), 0, Math.max(0, state.input.length - inputWidth))
-    : 0;
-  const shown = state.input.slice(start, start + inputWidth);
-  const inputLine = state.input
-    ? chalk.cyan("> ") + shown
-    : chalk.cyan("> ") + chalk.dim(truncate("Pergunte alguma coisa...", inputWidth));
-  const rule = chalk.dim("-".repeat(width));
-
-  const middle = compact ? [] : [""];
-  const raw = [
-    ...header,
-    ...body,
-    ...middle,
-    ...panel,
-    inputLine,
-    rule,
-    ...footer,
-  ];
-  while (raw.length < rows) raw.push("");
-  const lines = raw.slice(0, rows).map((line) => gutter + padRight(line, width));
-
-  const inputRow = header.length + available + middle.length + panel.length + 1;
-  const cursorCol = Math.max(1, margin + 2 + (state.cursor - start) + 1);
-  return { lines, cursorRow: Math.min(rows, inputRow), cursorCol };
-}
-
-/* --------------------------------------------------------------------- app */
-
-async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set() } = {}) {
+  return [left + gap + right];
+}
+
+function hintsLines(state, width, { bare = false } = {}) {
+  if (bare) return [];
+  const parts = [];
+  if (state.scroll > 0) parts.push(`↑ ${state.scroll} linhas`);
+  if (state.busy) parts.push("Enter enfileira · Esc 2× para parar");
+  parts.push("PgUp/PgDn rola");
+  parts.push("Ctrl+Y copia");
+  parts.push(`F2 ${state.mouse ? "seleção" : "mouse"}`);
+  parts.push("/ comandos");
+  return [chalk.dim(truncate(parts.join("  ·  "), width))];
+}
+
+/* ------------------------------------------------------------------ overlay */
+
+function overlayWidth(state, cols) {
+  const base = state.modal ? 84 : 78;
+  const target = state.approval ? 88 : base;
+  return clamp(Math.min(target, cols - 4), Math.min(38, cols - 2), cols - 2);
+}
+
+function box(state, { title, body, hint, width }) {
+  const inner = Math.max(10, width - 2);
+  const out = [];
+  const edge = (text) => border(state, text);
+  const row = (content) => edge("│") + paintPanel(state.theme, padRight(content, inner)) + edge("│");
+
+  out.push(edge("┌" + "─".repeat(inner) + "┐"));
+  if (title) {
+    out.push(row(" " + chalk.bold(truncate(title, inner - 2))));
+    out.push(row(""));
+  }
+  const bodyFirst = out.length;
+  for (const line of body) out.push(row(" " + line));
+  if (hint) {
+    out.push(row(""));
+    out.push(row(" " + chalk.dim(truncate(hint, inner - 2))));
+  }
+  out.push(edge("└" + "─".repeat(inner) + "┘"));
+  return { lines: out.map((line) => padRight(line, width)), bodyFirst };
+}
+
+function approvalBody(state, width) {
+  const { name, args, change } = state.approval;
+  const meta = toolMeta(name);
+  const body = [];
+
+  if (meta.kind === "bash" || change?.kind === "command") {
+    body.push(chalk.bold("$ ") + truncate(change?.command || String(args.command || ""), width - 4));
+  } else {
+    body.push(chalk.bold(truncate(change?.path || String(args.path || meta.label), width - 4)));
+    if (change?.error) {
+      body.push(chalk.red(truncate(change.error, width - 4)));
+    } else if (change) {
+      body.push(...diffCardLines(change, width - 2));
+    }
+  }
+
+  body.push("");
+  const optionsStart = body.length;
+  for (const [index, option] of APPROVAL_OPTIONS.entries()) {
+    const selected = index === state.approval.index;
+    const line = padRight(`${selected ? "▸ " : "  "}${option.label}`, width - 6);
+    if (selected) {
+      body.push(chalk.inverse(chalk.bold(line)));
+    } else if (option.id === "deny") {
+      body.push(chalk.dim(line));
+    } else {
+      body.push(line);
+    }
+  }
+
+  return {
+    title:
+      meta.kind === "bash"
+        ? "Executar comando"
+        : meta.kind === "mcp"
+          ? `Chamar ${meta.label} · ${meta.server}`
+          : change?.kind === "create"
+            ? "Criar arquivo"
+            : "Editar arquivo",
+    body,
+    optionsStart,
+  };
+}
+
+function themeSwatch(theme) {
+  const { bg, fg } = themeColors(theme);
+  if (!bg) return chalk.dim("terminal");
+  const sample = "███";
+  const painted = fg ? chalk.bgHex(bg).hex(fg)(sample) : chalk.bgHex(bg)(sample);
+  return painted + " " + chalk.dim(bg);
+}
+
+function buildOverlay(state, cols, rows) {
+  if (!state.approval && !state.picker && !state.modal) return null;
+
+  const width = overlayWidth(state, cols);
+  const maxBody = Math.max(3, rows - 9);
+
+  let title = "";
+  let hint = "";
+  let body = [];
+  let hit = null;
+
+  if (state.approval) {
+    const content = approvalBody(state, width);
+    title = content.title;
+    hint = "↑/↓ ou clique  ·  Enter confirma  ·  Esc nega  ·  a = sempre";
+    body = content.body;
+    hit = { optionsStart: content.optionsStart, count: APPROVAL_OPTIONS.length, kind: "approval" };
+  } else if (state.picker) {
+    const picker = state.picker;
+    const themePicker = picker.kind === "theme";
+    title = themePicker ? `Tema  (${picker.index + 1}/${picker.items.length})` : "Escolha o modelo";
+    hint = "↑/↓ ou clique  ·  Enter aplica  ·  Esc cancela";
+
+    if (picker.loading) {
+      body = [chalk.dim("carregando modelos...")];
+    } else {
+      const height = Math.min(themePicker ? 9 : 8, picker.items.length);
+      const start = clamp(
+        picker.index - Math.floor(height / 2),
+        0,
+        Math.max(0, picker.items.length - height)
+      );
+      for (let offset = 0; offset < height; offset += 1) {
+        const real = start + offset;
+        const item = picker.items[real];
+        if (!item) continue;
+        const caret = real === picker.index ? "❯" : " ";
+        let line;
+        if (themePicker) {
+          line = padRight(` ${caret} ${padRight(item.id, 15)} ` + themeSwatch(item.id), width - 4);
+        } else {
+          const price = `${(item.input / 1_000_000).toFixed(2)} / ${(item.output / 1_000_000).toFixed(2)} R$`;
+          const label = padRight(` ${caret} ${item.id}`, Math.max(20, width - 28));
+          line = padRight(label + price, width - 4);
+        }
+        body.push(real === picker.index ? chalk.inverse(line) : line);
+      }
+      hit = { start, count: height, kind: "picker" };
+    }
+  } else {
+    title = state.modal.title;
+    hint = state.modal.hint || "qualquer tecla fecha";
+    body = wrap(state.modal.text || "", width - 4);
+  }
+
+  if (body.length > maxBody) {
+    const cut = body.slice(0, maxBody - 1);
+    cut.push(chalk.dim(`... (+${body.length - cut.length} linhas)`));
+    body = cut;
+  }
+
+  const boxed = box(state, { title, body, hint, width });
+  const top = Math.max(1, Math.floor((rows - boxed.lines.length) / 2) + 1);
+  const left = Math.max(1, Math.floor((cols - width) / 2) + 1);
+
+  return {
+    top,
+    left,
+    width,
+    lines: boxed.lines,
+    bodyFirst: boxed.bodyFirst,
+    hit: hit
+      ? {
+          ...hit,
+          first: top + boxed.bodyFirst + (hit.optionsStart || 0),
+          left,
+          width,
+        }
+      : null,
+  };
+}
+
+/* --------------------------------------------------------------------- frame */
+
+/**
+ * Monta a string de repintura: apenas as linhas que mudaram, com o cursor no
+ * fim. Tudo dentro de uma atualizacao sincronizada do terminal.
+ */
+function planRepaint(previousLines, frame, rows) {
+  const out = ["\x1b[?25l"];
+
+  for (let row = frame.lines.length; row < previousLines.length; row += 1) {
+    if (row < rows) out.push(`\x1b[${row + 1};1H\x1b[2K`);
+  }
+
+  for (let row = 0; row < frame.lines.length; row += 1) {
+    const line = frame.lines[row];
+    if (previousLines[row] === line) continue;
+    out.push(`\x1b[${row + 1};1H` + line);
+  }
+
+  if (frame.cursorRow > 0) out.push(`\x1b[${frame.cursorRow};${frame.cursorCol}H\x1b[?25h`);
+  return SYNC_START + out.join("") + SYNC_END;
+}
+
+function buildFrame(state, cols, rows, commands = {}) {
+  const { sidebar, main, inner } = layoutFor(state, cols);
+  const overlay = buildOverlay(state, cols, rows);
+  const hero = heroActive(state);
+  // Em terminal baixo a chrome encolhe: primeiro a linha do modelo, depois
+  // o rodape, ate sobrar input + status.
+  const tight = rows < 24;
+  const bare = rows < 20;
+
+  const menu = overlay ? [] : menuLines(state, commands, inner);
+  const queue = overlay ? [] : queueLines(state, inner);
+  const input = inputBlock(state, inner, { hero, tight });
+  const status = statusLines(state, inner, { bare });
+  const hints = hintsLines(state, inner, { bare });
+  const chrome = [...queue, ...menu, ...input.lines, ...status, ...hints];
+
+  const head = hero ? heroLines(state, inner, rows - chrome.length) : [];
+
+  const bodyHeight = Math.max(0, rows - head.length - chrome.length);
+  state.pageSize = Math.max(1, bodyHeight);
+
+  let body = hero ? [] : messageLines(state, inner);
+  const maxScroll = Math.max(0, body.length - bodyHeight);
+  state.scroll = clamp(state.scroll, 0, maxScroll);
+  const end = body.length - state.scroll;
+  let visibleBody = body.slice(Math.max(0, end - bodyHeight), end);
+  if (visibleBody.length < bodyHeight) {
+    visibleBody = [...Array(bodyHeight - visibleBody.length).fill(""), ...visibleBody];
+  }
+
+  const sideLines = sidebar ? sidebarLines(state, sidebar - 1) : [];
+
+  const total = [...head, ...visibleBody, ...chrome];
+  while (total.length < rows) total.push("");
+  const lines = new Array(rows);
+
+  for (let row = 0; row < rows; row += 1) {
+    const content = total[row] ?? "";
+    let line = " " + padRight(content, inner) + " ";
+    if (sidebar) {
+      line = padRight(line, main);
+      const side = sideLines[row] ?? "";
+      line += border(state, "│") + paintPanel(state.theme, padRight(" " + side, sidebar - 1));
+    }
+    lines[row] = paintLine(state.theme, padRight(line, cols));
+  }
+
+  if (overlay) {
+    overlay.lines.forEach((boxLine, index) => {
+      const row = overlay.top - 1 + index;
+      if (row < 0 || row >= rows) return;
+      const left = overlay.left - 1;
+      lines[row] =
+        paintLine(state.theme, " ".repeat(left)) +
+        boxLine +
+        paintLine(state.theme, " ".repeat(Math.max(0, cols - left - visible(boxLine))));
+    });
+  }
+
+  const inputRow = head.length + bodyHeight + queue.length + menu.length + input.cursorRow;
+  const cursorRow = overlay ? 0 : clamp(inputRow + 1, 1, rows);
+  const cursorCol = overlay ? 0 : clamp(input.cursorCol, 1, cols);
+
+  return {
+    lines,
+    cursorRow,
+    cursorCol,
+    sidebar,
+    overlay,
+    bodyHeight,
+  };
+}
+
+/* ----------------------------------------------------------------------- app */
+
+async function runTUI({
+  commands = {},
+  onCommand,
+  interactiveCommands = new Set(),
+  autoApprove = false,
+} = {}) {
   const stdin = process.stdin;
   const stdout = process.stdout;
   const state = initialState();
+  // `kafox --allow-all` (ou KAFOX_ALLOW_ALL=1) ja comeca sem pedir aprovacao.
+  state.autoApprove = Boolean(autoApprove) || process.env.KAFOX_ALLOW_ALL === "1";
+  let mcp = new McpHub({ cwd: process.cwd() });
   let spinner = null;
+  let escTimer = null;
   let closed = false;
+  let previousLines = [];
 
   const write = (value) => stdout.write(value);
-  const enterScreen = () => write("\x1b[?1049h\x1b[?25l\x1b[H\x1b[2J");
-  const leaveScreen = () => write("\x1b[?25h\x1b[?1049l");
+
+  // O stream chega a cada token: redesenhar a cada um pisca demais.
+  let renderTimer = null;
+  function scheduleRender() {
+    if (renderTimer || closed) return;
+    renderTimer = setTimeout(() => {
+      renderTimer = null;
+      render();
+    }, 60);
+    renderTimer.unref?.();
+  }
+
+  const mouseMode = () => (state.mouse ? "\x1b[?1000h\x1b[?1006h" : "\x1b[?1000l\x1b[?1006l");
+  const enterScreen = () =>
+    write(`\x1b[?1049h\x1b[?25l\x1b[H\x1b[2J${mouseMode()}\x1b[?2004h`);
+  const leaveScreen = () =>
+    write("\x1b[?2004l\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[?1049l");
 
   async function refreshAccount() {
     const token = await ensureSession();
@@ -271,13 +1344,47 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     }
   }
 
+  function applyMcp() {
+    state.mcp.statuses = mcp.statuses();
+    state.mcp.tools = state.mcp.statuses.reduce((total, item) => total + item.tools, 0);
+    state.mcp.loading = state.mcp.statuses.some(
+      (item) => item.status === "connecting" || item.status === "idle"
+    );
+  }
+
+  async function connectMcp() {
+    applyMcp();
+    if (!mcp.size) {
+      state.mcp.loading = false;
+      return render();
+    }
+    state.mcp.loading = true;
+    render();
+    await mcp.connectAll();
+    applyMcp();
+    render();
+  }
+
   function render() {
     if (closed || state.suspended) return;
-    const cols = Math.max(40, stdout.columns || 80);
-    const rows = Math.max(16, stdout.rows || 24);
+    const cols = Math.max(30, stdout.columns || 80);
+    const rows = Math.max(14, stdout.rows || 24);
     const frame = buildFrame(state, cols, rows, commands);
-    write("\x1b[?25l\x1b[H" + frame.lines.join("\r\n"));
-    write(`\x1b[${frame.cursorRow};${frame.cursorCol}H\x1b[?25h`);
+    paintFrame(frame, { cols, rows });
+  }
+
+  /**
+   * Desenho incremental: manda so as linhas diferentes, dentro de uma unica
+   * atualizacao sincronizada. E o que impede o piscar do modal e do streaming.
+   */
+  function paintFrame(frame, { rows }) {
+    write(planRepaint(previousLines, frame, rows));
+    previousLines = frame.lines.slice();
+  }
+
+  function clearScreen() {
+    write("\x1b[H\x1b[2J");
+    previousLines = [];
   }
 
   async function capture(fn) {
@@ -307,18 +1414,53 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     return state.models;
   }
 
+  // /theme abre um modal navegavel; cada parada ja pinta a tela com o tema.
+  function openThemePicker() {
+    state.menuDismissed = true;
+    state.picker = {
+      kind: "theme",
+      items: THEMES.map((id) => ({ id })),
+      index: Math.max(0, THEMES.indexOf(state.theme)),
+      loading: false,
+      previous: state.theme,
+    };
+    render();
+  }
+
+  function previewTheme(index) {
+    const item = state.picker?.items?.[index];
+    if (item) state.theme = item.id;
+  }
+
+  function applyTheme() {
+    const picker = state.picker;
+    if (!picker) return;
+    const chosen = picker.items[picker.index]?.id || state.theme;
+    state.theme = chosen;
+    storage.setConfig({ theme: chosen });
+    state.picker = null;
+    render();
+  }
+
+  function cancelTheme() {
+    const picker = state.picker;
+    if (picker && picker.kind === "theme") state.theme = picker.previous;
+    state.picker = null;
+    render();
+  }
+
   async function openModelPicker() {
     state.menuDismissed = true;
-    state.picker = { items: state.models, index: 0, loading: true };
+    state.picker = { kind: "model", items: state.models, index: 0, loading: true };
     render();
     const models = await loadModels();
     if (!models.length) {
       state.picker = null;
-      state.messages.push({ role: "system", text: "Nao consegui carregar os modelos.", error: true });
+      state.modal = { title: "Modelos", text: "Nao consegui carregar os modelos." };
       return render();
     }
     const current = models.findIndex((item) => item.id === state.model);
-    state.picker = { items: models, index: current >= 0 ? current : 0, loading: false };
+    state.picker = { kind: "model", items: models, index: current >= 0 ? current : 0, loading: false };
     render();
   }
 
@@ -330,7 +1472,33 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     storage.setConfig({ model: item.id });
     state.model = item.id;
     state.picker = null;
-    state.messages.push({ role: "system", text: `Modelo: ${item.id}` });
+    render();
+  }
+
+  function openMcpView() {
+    const lines = [];
+    const statuses = state.mcp.statuses;
+    if (!mcp.size) {
+      lines.push("Nenhum servidor MCP configurado.");
+      lines.push("");
+      lines.push(`${path.join(os.homedir(), ".kafox", "mcp.json")}:`);
+      lines.push('{ "mcp": { "playwright": {');
+      lines.push('  "type": "local",');
+      lines.push('  "command": ["npx", "-y", "@playwright/mcp@latest"] } } }');
+      lines.push("");
+      lines.push("Depois rode /mcp reload.");
+    } else {
+      for (const item of statuses) {
+        lines.push(`${stripAnsi(dot(state, item.status))} ${item.name}  (${item.kind})  ${item.status}`);
+        if (item.error) lines.push(`   ${item.error}`);
+        for (const name of item.toolNames.slice(0, 6)) lines.push(`   · ${name}`);
+        if (item.toolNames.length > 6) lines.push(`   ... +${item.toolNames.length - 6} ferramentas`);
+        lines.push("");
+      }
+      lines.push(`${state.mcp.tools} ferramenta(s) de MCP disponiveis.`);
+      lines.push("Config: ~/.kafox/mcp.json ou ./mcp.json  ·  /mcp reload reconecta.");
+    }
+    state.modal = { title: "MCP", text: lines.join("\n") };
     render();
   }
 
@@ -346,6 +1514,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       stdin.setRawMode(true);
       state.suspended = false;
       enterScreen();
+      previousLines = [];
       await refreshAccount();
       render();
     }
@@ -357,41 +1526,77 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     if (name === "/exit" || name === "/quit") return quit();
 
     if (name === "/model" && !parts[1]) return openModelPicker();
+    if (name === "/theme") return openThemePicker();
+    if (name === "/allow") {
+      const argument = (parts[1] || "on").toLowerCase();
+      state.autoApprove = argument !== "off" && argument !== "ask";
+      state.modal = {
+        title: "Aprovacao",
+        text: state.autoApprove
+          ? "Rodando tudo: escrever, editar, executar e MCP nao pedem mais aprovacao nesta sessao.\nUse /allow off para voltar a perguntar (comece com `kafox --allow-all` para ja abrir assim)."
+          : "Voltou a pedir aprovacao para escrever, editar, executar e chamar MCP.",
+      };
+      return render();
+    }
+    if (name === "/mcp") {
+      if (parts[1] === "reload") {
+        mcp.close();
+        mcp = new McpHub({ cwd: process.cwd() });
+        return connectMcp();
+      }
+      return openMcpView();
+    }
 
     if (name === "/clear") {
       state.messages = [];
+      state.context = [];
+      state.streaming = null;
+      state.files = [];
+      state.scroll = 0;
       return render();
     }
     if (name === "/compact") {
-      if (!state.messages.length) {
-        state.messages.push({ role: "system", text: "Nada para compactar." });
-      } else {
-        const total = state.messages.length;
-        state.messages = [
-          { role: "system", text: `Contexto compactado: ${total} mensagens resumidas.` },
-          ...state.messages.slice(-6),
-        ];
+      if (!state.messages.length && !state.context.length) {
+        state.modal = { title: "Contexto", text: "Nada para compactar." };
+        return render();
       }
+      const total = state.messages.length;
+      const kept = state.context.slice(-6);
+      state.messages = [
+        { role: "system", text: `Contexto compactado: ${total} mensagens resumidas.` },
+        ...state.messages.slice(-6),
+      ];
+      // O system prompt do agente (indice 0) continua valendo.
+      state.context = state.context.length ? [state.context[0], ...kept] : [];
+      state.scroll = 0;
       return render();
     }
 
     if (interactiveCommands.has(name)) return runOutside(line);
 
-    const before = state.messages.length;
-    const output = (await capture(() => onCommand(line))).trim();
-    if (output) state.messages.push({ role: "system", text: output });
-    else if (state.messages.length === before) {
-      state.messages.push({ role: "system", text: `${name}: sem saida.` });
-    }
-    state.model = storage.getConfig().model || state.model;
-    render();
+    const output = stripAnsi(await capture(() => onCommand(line))).trim();
+    const config = storage.getConfig();
+    state.model = config.model || state.model;
+    state.theme = config.theme || state.theme;
+    state.modal = {
+      title: name.replace(/^\//, ""),
+      text: output || "(sem saida)",
+    };
     await refreshAccount();
     render();
   }
 
-  async function submit() {
+  function startMessageText(text) {
+    state.messages.push({ role: "user", text });
+  }
+
+  /**
+   * Enter coloca a linha na fila e a fila anda sozinha: da para mandar
+   * quantas mensagens quiser enquanto a IA ainda esta respondendo.
+   */
+  function submit() {
     const line = state.input.trim();
-    if (!line || state.busy) return;
+    if (!line) return;
     state.history.push(line);
     state.historyIndex = state.history.length;
     state.input = "";
@@ -399,29 +1604,284 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     state.menuIndex = 0;
     state.menuDismissed = false;
 
-    if (line.startsWith("/")) return runCommand(line);
+    if (line === "/exit" || line === "/quit") return quit();
+
+    state.queue.push(line);
+    render();
+    return pump();
+  }
+
+  async function pump() {
+    if (state.draining) return;
+    state.draining = true;
+    try {
+      while (state.queue.length) {
+        const line = state.queue.shift();
+        render();
+        await runLine(line);
+      }
+    } finally {
+      state.draining = false;
+      state.busy = false;
+      render();
+      await refreshAccount();
+      render();
+    }
+  }
+
+  async function runLine(line) {
+    if (line.startsWith("/")) {
+      state.busy = false;
+      return runCommand(line);
+    }
 
-    state.messages.push({ role: "user", text: line });
+    const controller = new AbortController();
+    state.abort = controller;
+    state.escArmed = false;
+    startMessageText(line);
+    state.context.push({ role: "user", content: line });
     state.busy = true;
+    state.streaming = { text: "", reasoning: "", thinkingStartedAt: 0 };
+    state.scroll = 0;
     render();
 
-    const result = await askModel(line, { model: state.model });
+    let result;
+    try {
+      result = await runAgent({
+        messages: state.context,
+        model: state.model,
+        cwd: process.cwd(),
+        approve: requestApproval,
+        autoApprove: () => state.autoApprove,
+        extraTools: mcp.specs(),
+        mcp,
+        signal: controller.signal,
+        onText: (chunk) => {
+          state.streaming.text += chunk;
+          scheduleRender();
+        },
+        onReasoning: (chunk) => {
+          if (!state.streaming.thinkingStartedAt) state.streaming.thinkingStartedAt = Date.now();
+          state.streaming.reasoning += chunk;
+          scheduleRender();
+        },
+        onToolStart: ({ name, args, label, change, fromMcp }) => {
+          finishStreaming();
+          state.messages.push({
+            role: "tool",
+            tool: {
+              name,
+              args,
+              label,
+              change,
+              meta: toolMeta(name, fromMcp ? mcp : null),
+              status: "running",
+              startedAt: Date.now(),
+            },
+          });
+          state.scroll = 0;
+          render();
+        },
+        onToolResult: ({ name, output, change, ok, skipped, summary, ms }) => {
+          const card = [...state.messages]
+            .reverse()
+            .find((message) => message.role === "tool" && message.tool?.name === name && message.tool.status === "running");
+          if (card) {
+            card.tool.status = "done";
+            card.tool.ok = ok;
+            card.tool.skipped = skipped;
+            card.tool.ms = ms;
+            card.tool.output = String(output || "").slice(0, 6000);
+            card.tool.summary = summary || (String(output || "").split("\n")[0] || "").slice(0, 200);
+            if (change?.path && change.kind !== "command") {
+              const kind = change.kind === "create" ? "create" : "update";
+              const existing = state.files.find((file) => file.path === change.path);
+              if (existing) existing.kind = existing.kind === "create" ? "create" : kind;
+              else state.files.push({ path: change.path, kind });
+            }
+          }
+          state.scroll = 0;
+          scheduleRender();
+        },
+      });
+    } catch (error) {
+      result = { ok: false, error: `Falha inesperada: ${error.message}` };
+    }
+
+    finishStreaming();
+    state.abort = null;
     state.busy = false;
-    if (result.ok) {
+    state.streaming = null;
+
+    if (result.aborted || result.code === "aborted") {
+      const partial = String(result.text || "").trim();
+      if (partial) {
+        state.messages.push({ role: "assistant", text: partial, ms: result.ms, interrupted: true });
+      }
       state.messages.push({
-        role: "assistant",
-        text: result.text,
-        ms: result.ms,
-        provider: result.provider,
+        role: "system",
+        text: "Interrompido por você (Esc).",
+        interrupted: true,
       });
+      if (result.messages) state.context = result.messages;
+    } else if (result.ok) {
+      const text = String(result.text || "").trim();
+      if (text) {
+        state.messages.push({
+          role: "assistant",
+          text,
+          ms: result.ms,
+          provider: result.provider || "",
+        });
+      }
+      if (result.messages) state.context = result.messages;
     } else {
-      state.messages.push({ role: "system", text: result.error || "Falha ao responder.", error: true });
+      state.messages.push({
+        role: "system",
+        text: result.error || "Falha ao responder.",
+        error: true,
+      });
     }
+    state.tokens = estimateTokens(state);
+    state.scroll = 0;
     render();
-    await refreshAccount();
+  }
+
+  /** Fecha o bloco em streaming (thinking + texto) como mensagens normais. */
+  function finishStreaming() {
+    const streaming = state.streaming;
+    if (!streaming) return;
+    if (streaming.reasoning.trim()) {
+      state.messages.push({
+        role: "thinking",
+        text: streaming.reasoning.trim(),
+        ms: streaming.thinkingStartedAt ? Date.now() - streaming.thinkingStartedAt : 0,
+      });
+    }
+    if (streaming.text.trim()) {
+      state.messages.push({ role: "assistant", text: streaming.text.trim() });
+    }
+    state.streaming = { text: "", reasoning: "", thinkingStartedAt: 0 };
+  }
+
+  /** Esc armado uma vez avisa; a segunda cancela o que esta rodando. */
+  function armEscape() {
+    state.escArmed = true;
+    if (escTimer) clearTimeout(escTimer);
+    escTimer = setTimeout(() => {
+      escTimer = null;
+      if (!state.escArmed) return;
+      state.escArmed = false;
+      if (!closed) render();
+    }, 4000);
+    escTimer.unref?.();
     render();
   }
 
+  function cancelRun() {
+    state.escArmed = false;
+    if (escTimer) {
+      clearTimeout(escTimer);
+      escTimer = null;
+    }
+    if (state.approval) settleApproval("deny");
+    state.abort?.abort();
+    render();
+  }
+
+  function requestApproval(name, args, extra = {}) {
+    // "Permitir sempre" (ou --allow-all) nao pode voltar a perguntar.
+    if (state.autoApprove) return Promise.resolve(true);
+    return new Promise((resolve) => {
+      state.approval = {
+        name,
+        args,
+        change: extra.change ?? null,
+        fromMcp: !!extra.fromMcp,
+        index: 0,
+        resolve,
+      };
+      render();
+    });
+  }
+
+  function settleApproval(decision) {
+    const pending = state.approval;
+    if (!pending) return;
+    state.approval = null;
+    if (decision === "always") state.autoApprove = true;
+    render();
+    pending.resolve(decision !== "deny");
+  }
+
+  // Com captura de mouse ligada o terminal entrega a roda para a TUI, mas em
+  // troca nao seleciona texto com o arrasto. F2 devolve o mouse ao terminal.
+  function toggleMouse() {
+    state.mouse = !state.mouse;
+    write(mouseMode());
+    state.modal = {
+      title: state.mouse ? "Mouse" : "Selecao",
+      text: state.mouse
+        ? "Roda do mouse rola a conversa.\nF2 desliga a captura para selecionar texto e copiar."
+        : "Captura desligada: arraste para selecionar e copie com o terminal.\nF2 liga a roda do mouse de novo.",
+    };
+    render();
+  }
+
+  function copyLastAnswer() {
+    const last = [...state.messages].reverse().find((message) => message.role === "assistant");
+    const text = last
+      ? last.text
+      : state.messages
+          .map((message) => message.text)
+          .filter(Boolean)
+          .join("\n\n");
+
+    if (!String(text || "").trim()) {
+      state.modal = { title: "Copiar", text: "Nada para copiar ainda." };
+      return render();
+    }
+
+    const ok = copyToClipboard(text);
+    state.modal = {
+      title: "Copiar",
+      text: ok
+        ? `Ultima resposta copiada (${text.length} caracteres).`
+        : "Nao consegui acessar a area de transferencia.\nUse F2 e arraste com o mouse para selecionar.",
+    };
+    render();
+  }
+
+  // Clique esquerdo: acerta a linha do item dentro do modal aberto.
+  function handleClick(x, y) {
+    const cols = Math.max(30, stdout.columns || 80);
+    const rows = Math.max(14, stdout.rows || 24);
+    const overlay = buildOverlay(state, cols, rows);
+    if (!overlay || !overlay.hit) return;
+
+    const { first, count, left, width, kind } = overlay.hit;
+    if (x < left || x >= left + width) return;
+    const offset = y - first;
+    if (offset < 0 || offset >= count) return;
+
+    if (kind === "approval") {
+      if (state.approval.index === offset) return settleApproval(APPROVAL_OPTIONS[offset].id);
+      state.approval.index = offset;
+      return render();
+    }
+
+    if (!state.picker) return;
+    const index = overlay.hit.start + offset;
+    if (!state.picker.items[index]) return;
+    state.picker.index = index;
+
+    if (state.picker.kind === "theme") {
+      previewTheme(index);
+      return applyTheme();
+    }
+    return selectModel();
+  }
+
   function setInput(value, cursor) {
     state.input = value;
     state.cursor = cursor == null ? value.length : clamp(cursor, 0, value.length);
@@ -430,30 +1890,101 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     render();
   }
 
+  function moveApproval(delta) {
+    const count = APPROVAL_OPTIONS.length;
+    state.approval.index = (state.approval.index + delta + count) % count;
+    render();
+  }
+
   function onKey(str, key = {}) {
     if (state.suspended) return;
     if (key.ctrl && key.name === "c") return quit();
 
-    // Seletor de modelo tem prioridade sobre o resto.
+    // Aprovacao de ferramenta: navega e confirma.
+    if (state.approval) {
+      if (key.name === "up" || key.name === "down" || key.name === "tab") {
+        return moveApproval(key.name === "up" ? -1 : 1);
+      }
+      if (key.name === "return") return settleApproval(APPROVAL_OPTIONS[state.approval.index].id);
+      if (key.name === "escape") return settleApproval("deny");
+      if (key.name === "a") return settleApproval("always");
+      if (key.name === "y") return settleApproval("once");
+      if (key.name === "n") return settleApproval("deny");
+      return;
+    }
+
+    // Roda do mouse (SGR): 64 = cima, 65 = baixo; botao 0 = clique esquerdo.
+    if (str && str.startsWith("\x1b[<")) {
+      const match = str.match(/<(\d+);(\d+);(\d+)([Mm])/);
+      if (!match) return;
+      const button = Number(match[1]);
+      const x = Number(match[2]);
+      const y = Number(match[3]);
+
+      if (button === 0) {
+        if (match[4] !== "M") return;
+        return handleClick(x, y);
+      }
+      if (button !== 64 && button !== 65) return;
+      const step = button === 64 ? 3 : -3;
+
+      if (state.modal) {
+        state.modal = null;
+        return render();
+      }
+      if (state.picker && !state.picker.loading) {
+        const last = Math.max(0, state.picker.items.length - 1);
+        state.picker.index = clamp(state.picker.index + (button === 64 ? -1 : 1), 0, last);
+        if (state.picker.kind === "theme") previewTheme(state.picker.index);
+        return render();
+      }
+      state.scroll = Math.max(0, state.scroll + step);
+      return render();
+    }
+
+    if (key.name === "f2") return toggleMouse();
+    if (key.ctrl && key.name === "y") return copyLastAnswer();
+
+    // Modal de texto: qualquer tecla fecha — e se for texto, ele vai para o
+    // input em vez de ser engolido (quem digita nao perde o que escreveu).
+    if (state.modal) {
+      state.modal = null;
+      const text = str && !key.ctrl && !key.meta ? str.replace(/[\x00-\x1f\x7f]/g, "") : "";
+      if (text) {
+        return setInput(
+          state.input.slice(0, state.cursor) + text + state.input.slice(state.cursor),
+          state.cursor + text.length
+        );
+      }
+      return render();
+    }
+
+    // Seletor de modelo / tema.
     if (state.picker) {
-      if (state.picker.loading) return;
+      const picker = state.picker;
+      const themePicker = picker.kind === "theme";
+      if (picker.loading) return;
       if (key.name === "up" || key.name === "down") {
         const delta = key.name === "up" ? -1 : 1;
-        state.picker.index = clamp(
-          state.picker.index + delta,
-          0,
-          Math.max(0, state.picker.items.length - 1)
-        );
+        picker.index = clamp(picker.index + delta, 0, Math.max(0, picker.items.length - 1));
+        if (themePicker) previewTheme(picker.index);
         return render();
       }
-      if (key.name === "return") return selectModel();
+      if (key.name === "return") return themePicker ? applyTheme() : selectModel();
       if (key.name === "escape") {
+        if (themePicker) return cancelTheme();
         state.picker = null;
         return render();
       }
       return;
     }
 
+    if (key.name === "pageup" || key.name === "pagedown") {
+      const delta = key.name === "pageup" ? state.pageSize : -state.pageSize;
+      state.scroll = Math.max(0, state.scroll + delta);
+      return render();
+    }
+
     const items = filteredCommands(state, commands);
     const menuOpen = items.length > 0;
 
@@ -466,7 +1997,6 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
         state.input = exact;
         state.cursor = exact.length;
       } else if (menuOpen) {
-        // Enter executa o item destacado, nao o texto parcial digitado.
         const selected = items[state.menuIndex % items.length][0];
         state.input = selected;
         state.cursor = selected.length;
@@ -475,10 +2005,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       return submit();
     }
     if (key.name === "tab") {
-      if (menuOpen) {
-        const selected = items[state.menuIndex % items.length];
-        return setInput(selected[0] + " ");
-      }
+      if (menuOpen) return setInput(items[state.menuIndex % items.length][0] + " ");
       return;
     }
     if (key.name === "escape") {
@@ -486,6 +2013,11 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
         state.menuDismissed = true;
         return render();
       }
+      // Esc uma vez avisa, Esc de novo para o que esta rodando.
+      if (state.busy || state.draining) {
+        if (state.escArmed) return cancelRun();
+        return armEscape();
+      }
       return;
     }
     if (key.name === "up" || key.name === "down") {
@@ -525,7 +2057,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       return setInput(before + state.input.slice(state.cursor), before.length);
     }
     if (key.ctrl && key.name === "l") {
-      write("\x1b[H\x1b[2J");
+      clearScreen();
       return render();
     }
 
@@ -543,34 +2075,60 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     if (closed) return;
     closed = true;
     if (spinner) clearInterval(spinner);
-    stdin.removeListener("keypress", onKey);
-    stdout.removeListener("resize", render);
+    if (renderTimer) clearTimeout(renderTimer);
+    if (escTimer) clearTimeout(escTimer);
+    stdin.removeListener("data", onData);
+    stdout.removeListener("resize", onResize);
     try {
       stdin.setRawMode(false);
     } catch {}
+    mcp.close();
     leaveScreen();
     write("\n");
     process.exit(0);
   }
 
+  function onResize() {
+    clearScreen();
+    render();
+  }
+
   enterScreen();
   if (stdin.isTTY) stdin.setRawMode(true);
+  const reader = createKeyReader((event) => onKey(event.str, event.key));
+  const onData = (chunk) => reader.feed(chunk);
+  stdin.setEncoding("utf8");
+  stdin.on("data", onData);
   stdin.resume();
-  readline.emitKeypressEvents(stdin);
-  stdin.on("keypress", onKey);
-  stdout.on("resize", render);
+  stdout.on("resize", onResize);
 
   await refreshAccount();
   render();
+  connectMcp().catch(() => {});
 
   spinner = setInterval(() => {
     if (!state.busy || closed) return;
     state.frame += 1;
     render();
-  }, 110);
+  }, 180);
   spinner.unref?.();
 
   return { state, quit, render, submit };
 }
 
-module.exports = { runTUI, buildFrame, wrap, initialState, filteredCommands, pickerLines };
+module.exports = {
+  runTUI,
+  buildFrame,
+  buildOverlay,
+  markdownLines,
+  wrap,
+  initialState,
+  filteredCommands,
+  menuLines,
+  decodeKeys,
+  createKeyReader,
+  accentFor,
+  planRepaint,
+  APPROVAL_OPTIONS,
+  layoutFor,
+};