kafox-cli 0.9.9 → 0.10.0

package/src/tui.js

@@ -16,6 +16,7 @@ const os = require("os");
 const path = require("path");
 const chalk = require("chalk");
 const storage = require("./storage");
+const { estimateTokens: countContextTokens, compactIfNeeded } = require("./compact");
 const { ensureSession, fetchApi } = require("./auth");
 const { runAgent } = require("./agent");
 const { THEMES, themeColors, paintLine, paintPanel, borderColor } = require("./theme");
@@ -25,12 +26,22 @@ const { toolMeta, parseCommandOutput } = require("./tools");
 const { McpHub } = require("./mcp");
 const sessions = require("./sessions");
 const wallpaper = require("./wallpaper");
+const { listProviders } = require("./providers");
 
 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));
 
+// Falha de rede/servidor: o alerta correspondente é transitório e some quando
+// a conexão volta. Mesmo padrão usado no retry do gateway (src/gateway.js).
+const CONNECTION_ERROR =
+  /fetch failed|failed to fetch|ECONNRESET|ETIMEDOUT|EAI_AGAIN|ECONNREFUSED|ENOTFOUND|socket hang up|network|networkerror|stream interrompido|terminated|other side closed|falha de rede|timeout|502|503|504/i;
+
+function isConnectionError(message) {
+  return CONNECTION_ERROR.test(String(message || ""));
+}
+
 const SIDEBAR_MIN_COLS = 100;
 const MENU_HEIGHT = 6;
 const SYNC_START = "\x1b[?2026h";
@@ -100,6 +111,12 @@ function truncate(text, width) {
   return plain.slice(0, width - 1) + "…";
 }
 
+/** Preco em BRL por 1M tokens, curto para caber na linha do seletor. */
+function fmtModelPrice(value) {
+  if (value === null || value === undefined) return "—";
+  return `R$${Number(value).toFixed(2)}`;
+}
+
 function padRight(text, width) {
   const missing = width - visible(text);
   return missing > 0 ? text + " ".repeat(missing) : truncate(text, width);
@@ -120,17 +137,35 @@ function accentFor(theme) {
   return chalk.hex(accent);
 }
 
-const INLINE = /(\*\*[^*]+\*\*|`[^`]+`|\*[^*\n]+\*)/g;
+// Ordem importa: link antes de negrito/italico, senao o `*` do `[...](...)`
+// casaria dentro da URL. `~~riscado~~` tambem entrava como texto literal.
+const INLINE = /(\[[^\]]+\]\([^)\s]+\)|`[^`]+`|\*\*[^*]+\*\*|~~[^~]+~~|\*[^*\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 });
+    const link = part.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
+    if (link) {
+      // No terminal o link nao e clicavel: mostra o rotulo e a URL ao lado,
+      // porque esconder a URL deixaria o usuario sem como abrir.
+      // O rotulo ainda pode ter marcacao (`[**forte**](url)`): resolvemos.
+      const rotulo = parseInline(link[1])
+        .map((inner) => inner.text)
+        .join("");
+      const url = link[2];
+      segments.push({ text: rotulo === url ? url : `${rotulo} (${url})`, link: true });
+    } else if (part.startsWith("**") && part.endsWith("**") && part.length > 4) {
+      // `**[texto](url)**`: a marcacao de dentro ainda tem que ser resolvida,
+      // senao o link sai literal no terminal.
+      const inner = parseInline(part.slice(2, -2));
+      if (inner.length === 1) segments.push({ ...inner[0], bold: true });
+      else segments.push({ text: part.slice(2, -2), bold: true, nested: inner });
     } 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 > 4) {
+      segments.push({ text: part.slice(2, -2), strike: true });
     } else if (part.startsWith("*") && part.endsWith("*") && part.length > 2) {
       segments.push({ text: part.slice(1, -1), italic: true });
     } else {
@@ -184,15 +219,103 @@ function renderSegments(segments, theme = "default") {
   const accent = accentFor(theme);
   return segments
     .map((segment) => {
-      let text = segment.text;
+      // Segmento com marcacao interna (ex.: link dentro de negrito): resolve
+      // primeiro o conteudo e depois aplica o estilo de fora.
+      let text = segment.nested
+        ? renderSegments(segment.nested, theme)
+        : segment.text;
       if (segment.code) text = chalk.cyan(text);
       if (segment.italic) text = chalk.italic(text);
+      if (segment.strike) text = chalk.dim(chalk.strikethrough(text));
+      if (segment.link) text = chalk.underline.cyan(text);
       if (segment.bold) text = accent(chalk.bold(text));
       return text;
     })
     .join("");
 }
 
+/**
+ * Texto de uma celula sem a marcacao inline (`**bold**`, `` `code` ``, `*it*`).
+ * E o que ocupa coluna de verdade — medir o bruto erra a largura da tabela.
+ */
+function plainOf(text) {
+  return parseInline(String(text))
+    .map((segment) =>
+      segment.nested
+        ? segment.nested.map((inner) => plainOf(inner.text)).join("")
+        : segment.text
+    )
+    .join("");
+}
+
+/**
+ * Desenha uma tabela Markdown como grade no terminal.
+ *
+ * A largura total e limitada a `width`: as colunas encolhem proporcionalmente
+ * e o conteudo que nao couber e truncado com `…`, para a mensagem nunca
+ * quebrar o layout da TUI. Colunas numericas tendem a alinhar a direita.
+ */
+function tableLines(header, aligns = [], body = [], width = 80, theme = "default") {
+  const accent = accentFor(theme);
+  const columns = Math.max(header.length, ...body.map((row) => row.length));
+  const pad = Array.from({ length: columns }, (_, i) => header[i] || "");
+  const rowsBody = body.map((row) => Array.from({ length: columns }, (_, i) => row[i] || ""));
+
+  // `│ a │ b │` = 3 caracteres de moldura por coluna + 1 de borda.
+  const gutter = width - 2; // indent(2)
+  const available = Math.max(columns * 6, gutter - columns * 3 - 1);
+
+  const natural = Array.from({ length: columns }, (_, i) =>
+    Math.max(
+      3,
+      ...rowsBody.map((row) => stripAnsi(plainOf(row[i])).length),
+      stripAnsi(plainOf(pad[i])).length
+    )
+  );
+
+  // Se o conteudo cabe, cada coluna fica do tamanho natural (tabela compacta).
+  // Se nao cabe, encolhe proporcionalmente, com piso de 3 para nao sumir.
+  let widths;
+  const total = natural.reduce((sum, n) => sum + n, 0);
+  if (total <= available) {
+    widths = natural;
+  } else {
+    widths = natural.map((n) => Math.max(3, Math.floor((n * available) / total)));
+    // Sobra do arredondamento volta para a maior coluna, evitando buraco a direita.
+    let used = widths.reduce((sum, n) => sum + n, 0);
+    while (used < available) {
+      const widest = widths.indexOf(Math.max(...widths));
+      widths[widest] += 1;
+      used += 1;
+    }
+  }
+
+  const cell = (text, col) => {
+    const plain = truncate(stripAnsi(plainOf(String(text))), widths[col]);
+    const fill = widths[col] - plain.length;
+    const align = aligns[col] || "left";
+    if (align === "right") return " ".repeat(fill) + plain;
+    if (align === "center") {
+      const left = Math.floor(fill / 2);
+      return " ".repeat(left) + plain + " ".repeat(fill - left);
+    }
+    return plain + " ".repeat(fill);
+  };
+
+  const lines = [];
+  const head = pad.map((text, col) => accent(chalk.bold(cell(text, col))));
+  lines.push(indent(2) + chalk.dim("│ ") + head.join(chalk.dim(" │ ")) + chalk.dim(" │"));
+
+  const ruleWidths = widths.map((w) => "─".repeat(w));
+  lines.push(indent(2) + chalk.dim("├─" + ruleWidths.join("─┼─") + "─┤"));
+
+  for (const row of rowsBody) {
+    const cells = row.map((text, col) => renderSegments(parseInline(cell(text, col)), theme));
+    lines.push(indent(2) + chalk.dim("│ ") + cells.join(chalk.dim(" │ ")) + chalk.dim(" │"));
+  }
+  return lines;
+}
+
 /** Converte Markdown simples em linhas prontas para o terminal. */
 function markdownLines(text, width, theme = "default") {
   const accent = accentFor(theme);
@@ -200,7 +323,22 @@ function markdownLines(text, width, theme = "default") {
   const rows = String(text).replace(/\r/g, "").split("\n");
   let inCode = false;
 
-  for (const raw of rows) {
+  /** Linha de tabela? Tem que ter os pipes externos. */
+  const isTableRow = (line) => /^\s*\|.*\|\s*$/.test(line);
+  /** Separador `|---|:--:|` — define alinhamento e a largura das colunas. */
+  const isTableRule = (line) =>
+    /^\s*\|(\s*:?-{2,}:?\s*\|)+\s*$/.test(line);
+
+  const splitRow = (line) =>
+    line
+      .trim()
+      .replace(/^\|/, "")
+      .replace(/\|$/, "")
+      .split("|")
+      .map((cell) => cell.trim());
+
+  for (let index = 0; index < rows.length; index += 1) {
+    const raw = rows[index];
     const line = raw.replace(/\s+$/, "");
     if (/^\s*```/.test(line)) {
       inCode = !inCode;
@@ -211,6 +349,33 @@ function markdownLines(text, width, theme = "default") {
       out.push(chalk.dim(indent(2) + "│ ") + chalk.cyan(truncate(line, width - 4)));
       continue;
     }
+
+    // Tabela: cabecalho + regra + linhas. Precisa das duas primeiras linhas
+    // para saber que e tabela, senao um `|` solto viraria grade.
+    if (isTableRow(line) && isTableRule(rows[index + 1] || "")) {
+      const header = splitRow(line);
+      const aligns = splitRow(rows[index + 1]).map((cell) => {
+        const left = cell.startsWith(":");
+        const right = cell.endsWith(":");
+        if (left && right) return "center";
+        if (right) return "right";
+        return "left";
+      });
+
+      const body = [];
+      let cursor = index + 2;
+      while (cursor < rows.length && isTableRow(rows[cursor])) {
+        body.push(splitRow(rows[cursor]));
+        cursor += 1;
+      }
+      index = cursor - 1;
+
+      out.push("");
+      out.push(...tableLines(header, aligns, body, width, theme));
+      out.push("");
+      continue;
+    }
+
     if (!line.trim()) {
       out.push("");
       continue;
@@ -230,11 +395,21 @@ function markdownLines(text, width, theme = "default") {
       continue;
     }
 
-    const bullet = line.match(/^\s*[-*+]\s+(.*)$/);
+    const bullet = line.match(/^(\s*)[-*+]\s+(.*)$/);
     if (bullet) {
-      const wrapped = wrapSegments(parseInline(bullet[1]), width - 5);
+      const depth = Math.min(3, Math.floor(bullet[1].length / 2));
+      let corpo = bullet[2];
+      // Checkbox: o marcador vira simbolo, nao texto literal "- [x] feito".
+      let marcador = "•";
+      const check = corpo.match(/^\[([ xX])\]\s+(.*)$/);
+      if (check) {
+        marcador = check[1].trim() ? "✓" : "○";
+        corpo = check[2];
+      }
+      const base = indent(2 + depth * 2);
+      const wrapped = wrapSegments(parseInline(corpo), width - 5 - depth * 2);
       wrapped.forEach((part, index) => {
-        out.push((index === 0 ? indent(2) + "• " : indent(4)) + renderSegments(part, theme));
+        out.push((index === 0 ? base + marcador + " " : base + "  ") + renderSegments(part, theme));
       });
       continue;
     }
@@ -306,6 +481,8 @@ const CONTROL_KEYS = {
   12: { name: "l", ctrl: true },
   13: { name: "return" },
   21: { name: "u", ctrl: true },
+  // Ctrl+Q: desiste das mensagens que estao na fila (nao cancela a atual).
+  17: { name: "q", ctrl: true },
   23: { name: "w", ctrl: true },
   25: { name: "y", ctrl: true },
   127: { name: "backspace" },
@@ -807,6 +984,104 @@ function thinkingLines(message, width) {
   return lines;
 }
 
+/**
+ * Card da compactacao, no formato do opencode:
+ *
+ *   ───────────────── Compaction ─────────────────
+ *   Objective
+ *     ...
+ *   Work State
+ *     Completed / Active / Blocked
+ *   Next Move
+ *     1. ...
+ *
+ * O resumo chega como secoes nomeadas; aqui so agrupamos logicamente
+ * ("Work State" junta Completed, Active e Blocked) e aplicamos cor.
+ */
+function compactionLines(message, width, state) {
+  const accent = accentFor(state?.theme || "default");
+  const meta = message.compaction || {};
+  const inner = Math.max(20, width - 4);
+  const lines = [""];
+
+  const label = " Compaction ";
+  const rule = Math.max(0, inner - label.length);
+  const left = Math.floor(rule / 2);
+  lines.push(
+    indent(2) +
+      chalk.dim("─".repeat(left)) +
+      accent(chalk.bold(label)) +
+      chalk.dim("─".repeat(rule - left))
+  );
+
+  // Agrupa as secoes: Completed/Active/Blocked viram "Work State".
+  const WORK_KEYS = new Set(["completed", "active", "blocked"]);
+  const blocks = [];
+  let work = null;
+  for (const raw of String(message.text || "").split("\n")) {
+    const line = raw.replace(/\s+$/, "");
+    if (!line.trim()) continue;
+    const heading = line.match(/^\s*#{0,3}\s*(Objective|Important Details|Work State|Completed|Active|Blocked|Next Move|Relevant Files)\s*:?\s*$/i);
+    if (heading) {
+      const title = heading[1];
+      const key = title.toLowerCase();
+      // "Work State" agrupa as tres subsecoes; se ele vier explicito, so abre o
+      // grupo (sem criar bloco duplicado quando Completed/Active aparecerem).
+      if (key === "work state") {
+        if (!work) {
+          work = { title: "Work State", items: [{ sub: null, lines: [] }] };
+          blocks.push(work);
+        }
+        continue;
+      }
+      if (WORK_KEYS.has(key)) {
+        if (!work) {
+          work = { title: "Work State", items: [{ sub: null, lines: [] }] };
+          blocks.push(work);
+        }
+        // Descarta o item vazio criado ao abrir o grupo por "Work State".
+        work.items = work.items.filter((item) => item.sub || item.lines.length);
+        work.items.push({ sub: title, lines: [] });
+        continue;
+      }
+      work = null;
+      blocks.push({ title, items: [{ sub: null, lines: [] }] });
+      continue;
+    }
+    // Conteudo solto antes de qualquer secao: guarda em "Summary".
+    if (!blocks.length) blocks.push({ title: "Summary", items: [{ sub: null, lines: [] }] });
+    const lastBlock = blocks[blocks.length - 1];
+    const lastItem = lastBlock.items[lastBlock.items.length - 1];
+    // `Sub:` e o cabecalho de subsecao dentro de Work State.
+    const sub = line.match(/^\s*(Completed|Active|Blocked)\s*:?\s*$/i);
+    if (sub) {
+      lastBlock.items.push({ sub: sub[1], lines: [] });
+      continue;
+    }
+    lastItem.lines.push(line);
+  }
+
+  for (const block of blocks) {
+    lines.push(indent(2) + accent(chalk.bold(block.title)));
+    for (const item of block.items) {
+      if (item.sub) lines.push(indent(4) + chalk.bold(item.sub));
+      const pad = item.sub ? 6 : 4;
+      for (const raw of item.lines) {
+        const text = raw.replace(/^\s*[-*•]\s+/, "• ").replace(/^\s+/, "");
+        for (const row of wrap(text, inner - pad + 2)) {
+          lines.push(indent(pad) + row);
+        }
+      }
+    }
+  }
+
+  const antes = Number(meta.before || 0).toLocaleString("pt-BR");
+  const depois = Number(meta.after || 0).toLocaleString("pt-BR");
+  lines.push("");
+  lines.push(indent(2) + chalk.dim(`${antes} → ${depois} tokens`));
+  return lines;
+}
+
 function messageLines(state, width) {
   const lines = [];
   for (const message of state.messages) {
@@ -817,6 +1092,8 @@ function messageLines(state, width) {
       for (let index = 1; index < body.length; index += 1) {
         lines.push(indent(4) + chalk.bold(body[index]));
       }
+    } else if (message.role === "compaction") {
+      lines.push(...compactionLines(message, width, state));
     } else if (message.role === "assistant") {
       lines.push("");
       lines.push(...markdownLines(message.text, width - 2, state.theme));
@@ -934,10 +1211,12 @@ function commitFinalText(state, text, ms) {
   return true;
 }
 
-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 estimateTokens(state) {
+  // `tool_calls` (nome + arguments) tambem vai no payload, entao conta: sem
+  // isso o sidebar mostrava um contexto bem menor do que o provedor recebia.
+  let tokens = countContextTokens(state.context || []);
+  if (state.streaming) tokens += Math.round(String(state.streaming.text || "").length / 4);
+  return tokens;
 }
 
 function sidebarLines(state, width) {
@@ -986,12 +1265,36 @@ function sidebarLines(state, width) {
 
 /* --------------------------------------------------------------------- chrome */
 
+/**
+ * Desiste das mensagens enfileiradas.
+ *
+ * Pura de proposito: `state.queue` e `state.messages` sao mutados no lugar
+ * porque a TUI e dona deles, mas a decisao (quantas sairam, o que avisar)
+ * fica testavel sem terminal. A mensagem em andamento nao e tocada: quem
+ * para a atual e o Esc duas vezes.
+ */
+function dropQueue(state) {
+  const pending = state.queue || [];
+  const count = pending.length;
+  if (!count) return 0;
+  state.queue.length = 0;
+  state.messages.push({
+    role: "system",
+    text:
+      count === 1
+        ? "1 mensagem removida da fila."
+        : `${count} mensagens removidas da fila.`,
+  });
+  state.scroll = 0;
+  return count;
+}
+
 /** 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`)];
+  const rows = [indent(1) + chalk.dim(`⏳ ${pending.length} na fila  ·  ctrl+q descarta  ·  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)));
   });
@@ -1063,7 +1366,7 @@ function hintsLines(state, width, { bare = false } = {}) {
     const attempt = state.retry.maxAttempts
       ? ` (tentativa ${state.retry.attempt}/${state.retry.maxAttempts})`
       : "";
-    const label = truncate(`⚠ ${state.retry.error || "fetch failed"} · reconectando em ${left}s${attempt}`, width);
+    const label = truncate(`⚠ ${state.retry.error || "fetch failed"} · tentando reconectar em ${left}s${attempt}`, width);
     return [chalk.red(label)];
   }
 
@@ -1213,7 +1516,14 @@ function buildOverlay(state, cols, rows) {
           const gap = Math.max(1, space - visible(left) - visible(right));
           line = padRight(left + " ".repeat(gap) + right, width - 4);
         } else {
-          line = padRight(` ${caret} ${item.id} `, width - 4);
+          const right = item.cost
+            ? chalk.dim(`in ${fmtModelPrice(item.cost.in)} · out ${fmtModelPrice(item.cost.out)}`)
+            : "";
+          const space = width - 6;
+          const room = Math.max(16, space - visible(right));
+          const left = ` ${caret} ${truncate(item.id, room)}`;
+          const gap = Math.max(1, space - visible(left) - visible(right));
+          line = padRight(left + " ".repeat(gap) + right, width - 4);
         }
         body.push(real === picker.index ? chalk.inverse(line) : line);
       }
@@ -1363,6 +1673,7 @@ async function runTUI({
   interactiveCommands = new Set(),
   autoApprove = false,
   resume = null,
+  mobile = null,
 } = {}) {
   const stdin = process.stdin;
   const stdout = process.stdout;
@@ -1586,7 +1897,16 @@ async function runTUI({
     const pricing = await fetchApi("/api/public/pricing")
       .then((res) => res.json())
       .catch(() => null);
-    state.models = (pricing?.pricing || []).map((row) => ({ id: row.model }));
+    const gateway = (pricing?.pricing || []).map((row) => ({ id: row.model }));
+    // Provedores alternativos (OpenAI-compatible): id prefixado `provedor/modelo`
+    // para o gateway saber rotear; preco em BRL por 1M tokens.
+    const external = [];
+    for (const provider of listProviders()) {
+      for (const model of provider.models || []) {
+        external.push({ id: `${provider.id}/${model.id}`, cost: model.brl, tools: model.tools });
+      }
+    }
+    state.models = [...gateway, ...external];
     return state.models;
   }
 
@@ -1658,6 +1978,7 @@ async function runTUI({
     state.files = [];
     state.tokens = estimateTokens(state);
     state.scroll = 0;
+    startMobile();
     return render();
   }
 
@@ -1776,6 +2097,26 @@ async function runTUI({
       return openMcpView();
     }
 
+    if (name === "/queue") {
+      const pending = state.queue || [];
+      if (!pending.length) {
+        state.modal = { title: "Fila", text: "Nada na fila — a mensagem atual continua rodando." };
+        return render();
+      }
+      // `/queue` sozinho mostra a fila; `/queue clear` (ou `limpar`) desiste dela.
+      const arg = String(parts.slice(1).join(" ") || "").trim().toLowerCase();
+      const clearing = ["clear", "limpar", "off", "drop", "cancel", "cancelar"].includes(arg);
+      if (!clearing) {
+        const rows = pending.map((item, index) => `${index + 1}. ${item}`).join("\n");
+        state.modal = {
+          title: `Fila (${pending.length})`,
+          text: `${rows}\n\nDesista de todas com /queue clear ou Ctrl+Q.`,
+        };
+        return render();
+      }
+      return clearQueue();
+    }
+
     if (name === "/clear") {
       state.messages = [];
       state.context = [];
@@ -1789,16 +2130,9 @@ async function runTUI({
         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();
+      // Usa o mesmo resumo estruturado da compactacao automatica: descartar
+      // mensagens (comportamento antigo) fazia o agente "esquecer" o trabalho.
+      return compactNow();
     }
 
     if (interactiveCommands.has(name)) return runOutside(line);
@@ -1815,14 +2149,107 @@ async function runTUI({
     render();
   }
 
+  /**
+   * Desiste das mensagens enfileiradas.
+   *
+   * So mexe na fila: a mensagem que ja esta rodando continua ate o fim (para
+   * parar essa, e Esc duas vezes). Devolve quantas saíram para o aviso.
+   */
+  /**
+   * `/compact` manual: roda o mesmo resumo da compactacao automatica.
+   *
+   * Forca o corte mesmo abaixo do limiar (o usuario pediu), mas `keepMessages`
+   * garante que as trocas recentes fiquem intactas.
+   */
+  async function compactNow() {
+    const antes = state.context.length;
+    if (antes <= 2) {
+      state.modal = { title: "Contexto", text: "Conversa curta demais para compactar." };
+      return render();
+    }
+    state.busy = true;
+    state.modal = { title: "Compactando", text: "Resumindo o historico…" };
+    render();
+    try {
+      const result = await compactIfNeeded(state.context, {
+        model: state.model,
+        // 0 forca o resumo: quem digitou /compact quer compactar agora.
+        thresholdTokens: 0,
+        keepMessages: 6,
+      });
+      if (!result.compacted) {
+        state.modal = { title: "Contexto", text: `Nao deu para compactar: ${result.error || "sem conteudo"}` };
+        return render();
+      }
+      state.context = result.messages;
+      // A conversa visivel tambem encolhe, mantendo as ultimas trocas.
+      const visiveis = state.messages.filter((m) => m.role !== "compaction");
+      state.messages = [
+        ...visiveis.slice(0, 1),
+        { role: "compaction", text: result.summary, compaction: { before: result.before, after: result.after } },
+        ...visiveis.slice(-6),
+      ];
+      state.modal = null;
+      state.scroll = 0;
+      return render();
+    } finally {
+      state.busy = false;
+    }
+  }
+
+  function clearQueue() {
+    const removed = dropQueue(state);
+    if (removed) render();
+    return removed;
+  }
+
   function startMessageText(text) {
     state.messages.push({ role: "user", text });
   }
 
+  /**
+   * A conexao voltou: some com o aviso de reconexao do rodape e com as
+   * mensagens de erro de rede pendentes no historico. Sem isso o alerta fica
+   * preso para sempre na tela, mesmo depois do gateway responder de novo.
+   */
+  function clearRetry() {
+    let changed = false;
+    if (state.retry) {
+      state.retry = null;
+      changed = true;
+    }
+    const before = state.messages.length;
+    state.messages = state.messages.filter((message) => !message.connectionError);
+    if (state.messages.length !== before) changed = true;
+    return changed;
+  }
+
   /**
    * Enter coloca a linha na fila e a fila anda sozinha: da para mandar
    * quantas mensagens quiser enquanto a IA ainda esta respondendo.
    */
+  /**
+   * Enfileira um turno vindo de outro cliente (celular). Mesmo caminho do
+   * teclado: entra na `state.queue` e o `pump` roda. Nao mexe em input/history
+   * do terminal do PC (evita "sujeira" na linha de digitacao do usuario).
+   */
+  function submitText(text) {
+    const line = String(text || "").trim();
+    if (!line) return false;
+    if (line === "/exit" || line === "/quit") return true;
+    state.queue.push(line);
+    render();
+    pump();
+    return true;
+  }
+
+  /** Aborta o turno corrente (equivalente ao Esc). */
+  function abortTurn() {
+    if (state.approval) settleApproval("deny");
+    state.abort?.abort();
+    render();
+  }
+
   function submit() {
     const line = state.input.trim();
     if (!line) return;
@@ -1886,10 +2313,12 @@ async function runTUI({
         mcp,
         signal: controller.signal,
         onText: (chunk) => {
+          clearRetry();
           state.streaming.text += chunk;
           scheduleRender();
         },
         onReasoning: (chunk) => {
+          clearRetry();
           if (!state.streaming.thinkingStartedAt) state.streaming.thinkingStartedAt = Date.now();
           state.streaming.reasoning += chunk;
           scheduleRender();
@@ -1917,6 +2346,19 @@ async function runTUI({
           state.retry = { ...info, endsAt: Date.now() + info.delay };
           scheduleRender();
         },
+        onCompact: ({ before, after, summary }) => {
+          // O historico antigo virou resumo: mostra na conversa para o usuario
+          // saber que o contexto encolheu (e por que a resposta "esqueceu").
+          finishStreaming();
+          state.messages.push({
+            role: "compaction",
+            text: summary || "",
+            compaction: { before, after, at: Date.now() },
+          });
+          state.tokenWarned = false;
+          state.scroll = 0;
+          render();
+        },
         onSubagentEvent: (event) => {
           const card = [...state.messages].reverse().find((message) => {
             if (message.role !== "tool" || !message.tool?.id) return false;
@@ -1986,11 +2428,19 @@ async function runTUI({
       if (text) commitFinalText(state, text, result.ms);
       state.streamedText = "";
       if (result.messages) state.context = result.messages;
+      // Reconectou de verdade: limpa o alerta e os erros de rede pendentes.
+      clearRetry();
     } else {
+      // Erro de rede/servidor entra marcado como transitório: some sozinho
+      // quando a próxima resposta chegar. Erros de verdade (saldo, chave)
+      // continuam fixos porque exigem ação do usuário.
+      const transient = isConnectionError(result.error);
+      if (transient) clearRetry();
       state.messages.push({
         role: "system",
         text: result.error || "Falha ao responder.",
         error: true,
+        connectionError: transient,
       });
     }
     state.retry = null;
@@ -2152,6 +2602,12 @@ async function runTUI({
     if (state.suspended) return;
     if (key.ctrl && key.name === "c") return quit();
 
+    // Ctrl+Q: desiste da fila (a mensagem em andamento continua).
+    if (key.ctrl && key.name === "q") {
+      if (!state.approval && !state.modal) clearQueue();
+      return;
+    }
+
     // Aprovacao de ferramenta: navega e confirma.
     if (state.approval) {
       if (key.name === "up" || key.name === "down" || key.name === "tab") {
@@ -2384,6 +2840,36 @@ async function runTUI({
   const savedBackground = storage.getConfig().background;
   if (savedBackground) setBackground(savedBackground, { quiet: true }).catch(() => {});
 
+  // `kafox mobile`: a TUI continua sendo o "dono" da sessao; o celular entra
+  // como mais um cliente. O QR aparece sobre a interface, em modal.
+  //
+  // IMPORTANTE (fluxo): se o seletor de conversas foi pedido (`resume: "pick"`),
+  // NAO subimos o servidor agora — so depois que a conversa for escolhida em
+  // resumeChat(). Caso contrario o modal do QR cobriria o seletor e o celular
+  // parearia com a sessao errada/vazia.
+  let mobileStarted = false;
+  function startMobile() {
+    if (!mobile || mobileStarted) return;
+    mobileStarted = true;
+    try {
+      const { attachMobile } = require("./mobile");
+      attachMobile({
+        state,
+        api: { submitText, settleApproval, abortTurn },
+        options: mobile,
+        print: (lines) => {
+          state.modal = { title: "kafox mobile", text: lines.join("\n") };
+          render();
+        },
+      });
+    } catch (error) {
+      state.modal = { title: "kafox mobile", text: `Nao subiu o servidor mobile: ${error.message}` };
+      render();
+    }
+  }
+
+  if (!resumePick) startMobile();
+
   spinner = setInterval(() => {
     if (!state.busy || closed) return;
     state.frame += 1;
@@ -2391,7 +2877,7 @@ async function runTUI({
   }, 180);
   spinner.unref?.();
 
-  return { state, quit, render, submit };
+  return { state, quit, render, submit, submitText, abortTurn };
 }
 
 module.exports = {
@@ -2411,4 +2897,8 @@ module.exports = {
   layoutFor,
   commitStreamedText,
   commitFinalText,
+  dropQueue,
+  queueLines,
+  compactionLines,
+  isConnectionError,
 };