kafox-cli 0.10.1 → 0.10.3

package/src/tui.js

@@ -25,8 +25,10 @@ const { diffBlocks } = require("./diff");
 const { toolMeta, parseCommandOutput } = require("./tools");
 const { McpHub } = require("./mcp");
 const sessions = require("./sessions");
+const promptHistory = require("./prompt-history");
 const wallpaper = require("./wallpaper");
 const { listProviders } = require("./providers");
+const { MAX_IMAGES, loadImage, humanSize } = require("./images");
 
 const ANSI = /\x1b\[[0-9;]*m/g;
 const stripAnsi = (value) => String(value).replace(ANSI, "");
@@ -316,8 +318,26 @@ function tableLines(header, aligns = [], body = [], width = 80, theme = "default
   return lines;
 }
 
-/** Converte Markdown simples em linhas prontas para o terminal. */
+// Cache do markdown renderizado por {texto, largura, tema}. Sem isso, cada
+// frame (inclusive a cada tecla) reparseava o markdown de TODAS as mensagens
+// da conversa, o que domina o tempo de render em chats longos.
+const MARKDOWN_CACHE = new Map();
+const MARKDOWN_CACHE_MAX = 400;
+/** Converte Markdown simples em linhas prontas para o terminal (com cache). */
 function markdownLines(text, width, theme = "default") {
+  const key = `${width}\u0000${theme}\u0000${text}`;
+  const hit = MARKDOWN_CACHE.get(key);
+  if (hit) return hit;
+  const out = markdownLinesUncached(text, width, theme);
+  if (MARKDOWN_CACHE.size >= MARKDOWN_CACHE_MAX) {
+    // Despeja o mais antigo (ordem de insercao do Map).
+    MARKDOWN_CACHE.delete(MARKDOWN_CACHE.keys().next().value);
+  }
+  MARKDOWN_CACHE.set(key, out);
+  return out;
+}
+
+function markdownLinesUncached(text, width, theme = "default") {
   const accent = accentFor(theme);
   const out = [];
   const rows = String(text).replace(/\r/g, "").split("\n");
@@ -481,6 +501,8 @@ const CONTROL_KEYS = {
   12: { name: "l", ctrl: true },
   13: { name: "return" },
   21: { name: "u", ctrl: true },
+  // Ctrl+R: atualiza saldo da conta e dos provedores externos agora.
+  18: { name: "r", 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 },
@@ -661,6 +683,10 @@ function initialState() {
   return {
     input: "",
     cursor: 0,
+    // Anexos de imagem do proximo turno (maximo MAX_IMAGES). Sao consumidos
+    // por submit() e nao sobrevivem a ele.
+    images: [],
+    imageError: null,
     history: [],
     historyIndex: -1,
     messages: [],
@@ -684,6 +710,7 @@ function initialState() {
     modal: null,
     models: [],
     balance: null,
+    providerBalances: [],
     tokens: 0,
     files: [],
     mcp: { loading: false, statuses: [], tools: 0 },
@@ -754,6 +781,8 @@ function heroLines(state, width, available) {
           " envia   " +
           chalk.dim("/") +
           " menu   " +
+          chalk.dim("ctrl+r") +
+          " saldo   " +
           chalk.dim("ctrl+c") +
           " sai",
         width
@@ -1082,40 +1111,81 @@ function compactionLines(message, width, state) {
   return lines;
 }
 
-function messageLines(state, width) {
+/**
+ * Virtualizacao de mensagens.
+ *
+ * Sem isso, cada frame (inclusive a cada tecla) reconstruia linha a linha TODO
+ * o historico da conversa; em chats longos isso domina o tempo de render e
+ * trava a digitacao. Aqui cada mensagem tem suas linhas memorizadas (chaveadas
+ * por texto/largura/tema + o estado que muda o desenho) e so as mensagens que
+ * caem no viewport sao realmente remontadas.
+ */
+const MESSAGE_CACHE = new Map();
+const MESSAGE_CACHE_MAX = 600;
+
+/** Chave de cache de uma mensagem: tudo que muda o desenho dela. */
+function messageCacheKey(message, width, state) {
+  const streaming = state.streaming;
+  const extra =
+    message.role === "tool"
+      ? `${message.status || ""}\u0001${message.duration || ""}\u0001${state.toolCompact ? 1 : 0}`
+      : message.role === "thinking"
+        ? `${message.done ? 1 : 0}`
+        : "";
+  return `${width}\u0000${state.theme}\u0000${message.role}\u0000${extra}\u0000${message.text}`;
+}
+
+/** Linhas de UMA mensagem (com cache). */
+function messageBlock(message, width, state) {
+  const key = messageCacheKey(message, width, state);
+  const hit = MESSAGE_CACHE.get(key);
+  if (hit) return hit;
+  const out = messageBlockUncached(message, width, state);
+  if (MESSAGE_CACHE.size >= MESSAGE_CACHE_MAX) {
+    MESSAGE_CACHE.delete(MESSAGE_CACHE.keys().next().value);
+  }
+  MESSAGE_CACHE.set(key, out);
+  return out;
+}
+
+function messageBlockUncached(message, width, state) {
   const lines = [];
-  for (const message of state.messages) {
-    if (message.role === "user") {
-      lines.push("");
-      const body = wrap(message.text, width - 2);
-      lines.push(indent(2) + chalk.cyan("▌ ") + chalk.bold(body[0] || ""));
-      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));
-      // Só latência: a rota usada por trás é da Kafox, não do cliente.
-      const meta = [];
-      if (message.interrupted) meta.push("interrompido");
-      if (message.ms) meta.push(`${(message.ms / 1000).toFixed(1)}s`);
-      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 : 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 (message.role === "user") {
+    lines.push("");
+    const body = wrap(message.text, width - 2);
+    lines.push(indent(2) + chalk.cyan("▌ ") + chalk.bold(body[0] || ""));
+    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));
+    const meta = [];
+    if (message.interrupted) meta.push("interrompido");
+    if (message.ms) meta.push(`${(message.ms / 1000).toFixed(1)}s`);
+    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 : 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));
   }
+  return lines;
+}
 
-  // Resposta chegando token a token (e o "thinking" do modelo, se houver).
+/**
+ * "Cauda" da conversa: bloco de streaming, indicador de "trabalhando" etc.
+ * Fica separado do historico porque muda a cada token e nao vale cachear.
+ */
+function messageTailLines(state, width) {
+  const lines = [];
   const streaming = state.streaming;
   if (streaming && (streaming.reasoning || streaming.text)) {
     if (streaming.reasoning) {
@@ -1134,7 +1204,6 @@ function messageLines(state, width) {
       lines.push(...markdownLines(streaming.text, width - 2, state.theme));
     }
   }
-
   if (state.busy && !streaming?.text) {
     lines.push("");
     lines.push(indent(2) + chalk.dim("trabalhando" + ".".repeat(state.frame % 4)));
@@ -1142,6 +1211,47 @@ function messageLines(state, width) {
   return lines;
 }
 
+/**
+ * Monta o corpo da conversa gastando o minimo: processa mensagens de tras pra
+ * frente ate cobrir o viewport pedido (ou ate acabar o historico). Fora do
+ * viewport nem tocamos no markdown. Devolve o array ja "padded" no topo para
+ * preencher a altura do terminal.
+ */
+function messageLines(state, width, budget = Infinity) {
+  const need = budget === Infinity ? Infinity : Math.max(0, budget);
+  const blocks = [];
+  let total = 0;
+
+  const tail = messageTailLines(state, width);
+  if (tail.length) {
+    blocks.push({ start: 0, lines: tail });
+    total += tail.length;
+  }
+
+  for (let index = state.messages.length - 1; index >= 0; index -= 1) {
+    const message = state.messages[index];
+    const lines = messageBlock(message, width, state);
+    blocks.push({ lines });
+    total += lines.length;
+    // Ja cobrimos o viewport (com uma folga para o padding do topo)? Paramos.
+    if (total >= need + 4) break;
+  }
+
+  const lines = [];
+  for (let index = blocks.length - 1; index >= 0; index -= 1) {
+    lines.push(...blocks[index].lines);
+  }
+  return lines;
+}
+
+function messageLinesFull(state, width) {
+  const lines = [];
+  for (const message of state.messages) lines.push(...messageBlock(message, width, state));
+  lines.push(...messageTailLines(state, width));
+  return lines;
+}
+
+
 function filteredCommands(state, commands) {
   if (state.menuDismissed) return [];
   if (!state.input.startsWith("/") || state.input.includes(" ")) return [];
@@ -1316,30 +1426,87 @@ function modelLine(state, width) {
   );
 }
 
+/**
+ * Preview dos anexos dentro da caixa de input: a imagem pixelada (blocos com
+ * cor real) e, a direita de cada uma, o rotulo clicavel "✕" que a remove.
+ * O preview e montado na ordem inversa de proposito — a TUI desenha a caixa
+ * de baixo para cima ao posicionar o cursor, entao o texto fica por ultimo.
+ */
+function imagePreviewLines(state, width) {
+  const items = state.images || [];
+  state.imageHit = {};
+  if (!items.length) return [];
+
+  const inner = Math.max(10, width - 2);
+  const lines = [];
+
+  items.forEach((image, index) => {
+    const preview = image.preview || [];
+    const label = `${index + 1}. ${truncate(image.name, Math.max(8, inner - 22))} ${chalk.dim(
+      `${image.width}×${image.height} · ${humanSize(image.bytes)}`
+    )}`;
+    const remove = chalk.red.bold("✕");
+    // A linha do rotulo e a ultima coluna util (onde cai o "✕"), para o
+    // clique do mouse acertar o alvo. A TUI pinta 1 espaco de borda a
+    // esquerda, entao a coluna do ✕ (1-based) e a posicao dentro de `inner`.
+    const labelLine = padRight(" " + label, inner - 2) + " " + remove + " ";
+    // 1-based dentro da coluna total: 1 (borda "│") + 1 (espaco) + label + 1.
+    const removeCol = 1 + 1 + visible(label) + 1;
+
+    lines.push(paintPanel(state.theme, padRight(labelLine, inner)));
+    for (const line of preview) {
+      lines.push(paintPanel(state.theme, padRight(" " + line, inner)));
+    }
+
+    state.imageHit[index] = { row: lines.length - 1 - preview.length, col: removeCol };
+  });
+
+  return lines;
+}
+
+/**
+ * Caixa de entrada: borda superior, previews de imagem anexadas (com o "✕"
+ * de remover), a linha de digitacao com cursor e a borda inferior. Devolve as
+ * linhas prontas, a linha/coluna do cursor dentro do bloco e a linha do
+ * rodape (avisos, ex.: modelo sem visao).
+ */
 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("▌ ");
-  // A caixa fica sempre limpa: o "trabalhando" ja aparece na conversa, acima.
-  const body = state.input ? prompt + shown : prompt;
-
-  const lines = [
-    rule(state, width),
-    paintPanel(state.theme, padRight(body, width)),
-    rule(state, width),
-  ];
+  const inner = Math.max(10, width - 2);
+  const edge = (text) => border(state, text);
+  const row = (content) => edge("│") + paintPanel(state.theme, padRight(content, inner)) + edge("│");
+  const lines = [];
+
+  lines.push(edge("┌" + "─".repeat(inner) + "┐"));
+
+  const previews = hero ? [] : imagePreviewLines(state, inner);
+  for (const preview of previews) lines.push(preview);
+
+  const prompt = hero ? "  " : "› ";
+  const room = Math.max(4, inner - visible(prompt) - 1);
+  // Janela de rolagem horizontal: mantem o cursor visivel em linhas longas.
+  let offset = 0;
+  if (state.cursor > room) offset = state.cursor - room;
+  const shown = state.input.slice(offset, offset + room);
+  const beforeCursor = state.input.slice(offset, state.cursor);
+  // A coluna e absoluta na linha montada pelo frame: 1 espaco de borda +
+  // 1 borda "│" + 1 espaco do row + prompt + o que ja foi digitado.
+  const cursorColInRow = 4 + visible(prompt) + visible(beforeCursor);
+
+  const typed = state.input.length ? shown : chalk.dim("Escreva algo ou /comando");
+  const inputRow = lines.length;
+  lines.push(row(" " + prompt + typed));
+
+  lines.push(edge("└" + "─".repeat(inner) + "┘"));
+
+  const footer = state.imageError
+    ? chalk.red(truncate(`⚠ ${state.imageError}`, width))
+    : null;
 
   return {
     lines,
-    cursorRow: 1,
-    cursorCol: 4 + (state.cursor - start),
-    // O modelo fica fora da caixa de texto, logo abaixo dela.
-    footer: tight ? null : modelLine(state, width),
+    footer,
+    cursorRow: inputRow,
+    cursorCol: cursorColInRow,
   };
 }
 
@@ -1627,6 +1794,8 @@ function buildFrame(state, cols, rows, commands = {}) {
     ...menu,
     ...input.lines,
     ...(input.footer ? [input.footer] : []),
+    // Modelo + versao logo abaixo da caixa (some so em terminal baixo).
+    ...(bare ? [] : [modelLine(state, inner)]),
     ...status,
     ...hints,
   ];
@@ -1636,7 +1805,7 @@ function buildFrame(state, cols, rows, commands = {}) {
   const bodyHeight = Math.max(0, rows - head.length - chrome.length);
   state.pageSize = Math.max(1, bodyHeight);
 
-  let body = hero ? [] : messageLines(state, inner);
+  let body = hero ? [] : messageLines(state, inner, bodyHeight + state.scroll);
   const maxScroll = Math.max(0, body.length - bodyHeight);
   state.scroll = clamp(state.scroll, 0, maxScroll);
   const end = body.length - state.scroll;
@@ -1674,10 +1843,16 @@ function buildFrame(state, cols, rows, commands = {}) {
     });
   }
 
-  const inputRow = head.length + bodyHeight + queue.length + menu.length + input.cursorRow;
+  const inputTop = head.length + bodyHeight + queue.length + menu.length;
+  const inputRow = inputTop + input.cursorRow;
   const cursorRow = overlay ? 0 : clamp(inputRow + 1, 1, rows);
   const cursorCol = overlay ? 0 : clamp(input.cursorCol, 1, cols);
 
+  // Guarda a linha (0-based) do topo do bloco de entrada para o clique do
+  // mouse acertar o "✕" de cada preview (imageHit usa linhas relativas).
+  state.inputTop = inputTop;
+  state.inputInner = inner;
+
   return {
     lines,
     cursorRow,
@@ -1701,6 +1876,10 @@ async function runTUI({
   const stdin = process.stdin;
   const stdout = process.stdout;
   const state = initialState();
+  // Retoma também o histórico de linhas digitadas (↑/↓). Sem isso cada boot
+  // começava com a lista vazia, mesmo com conversas salvas no disco.
+  state.history = promptHistory.load();
+  state.historyIndex = state.history.length;
 
   // resume: "pick" abre o seletor de conversas, "last" pega a mais recente e
   // qualquer outro valor e o codigo do chat que o usuario fechou no Ctrl+C.
@@ -1719,7 +1898,12 @@ async function runTUI({
         state.sessionId = saved.id;
         state.sessionStartedAt = saved.startedAt;
         state.messages = Array.isArray(saved.messages) ? saved.messages : [];
-        state.context = Array.isArray(saved.context) ? saved.context : [];
+        // Sessao antiga pode nao ter `context`: reconstroi da conversa visivel
+        // para a IA nao esquecer tudo ao retomar.
+        state.context =
+          Array.isArray(saved.context) && saved.context.length
+            ? saved.context
+            : sessions.contextFromMessages(state.messages);
         if (saved.model) state.model = saved.model;
         if (saved.theme) state.theme = saved.theme;
         state.autoApprove = forcedAllow || Boolean(saved.allowAll);
@@ -1755,19 +1939,35 @@ async function runTUI({
     renderTimer.unref?.();
   }
 
+  // Digitar/apagar dispara uma tecla por evento: render() sincrono a cada tecla
+  // reconstroi a conversa inteira e trava o input em chats longos. Este
+  // agendador curto (~60fps) mantem a resposta visual imediata e coalesce
+  // rajadas (segurar backspace/colar) num unico frame.
+  let inputTimer = null;
+  function scheduleInputRender() {
+    if (inputTimer || closed) return;
+    inputTimer = setTimeout(() => {
+      inputTimer = null;
+      render();
+    }, 16);
+    inputTimer.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() {
+  async function refreshAccount({ fresh = false } = {}) {
     const token = await ensureSession();
     if (!token) return;
-    const response = await fetchApi("/api/bootstrap").catch(() => null);
+    const response = await fetchApi(`/api/bootstrap${fresh ? "?fresh=1" : ""}`).catch(() => null);
     if (!response || !response.ok) return;
     const data = await response.json().catch(() => null);
     if (data?.user) state.balance = data.user.balance_micros;
+    // Saldo (credits) dos provedores externos, ex.: unlid/uncensored.
+    state.providerBalances = Array.isArray(data?.provider_balances) ? data.provider_balances : [];
 
     if (!state.model) {
       const pricing = await fetchApi("/api/public/pricing")
@@ -1777,6 +1977,19 @@ async function runTUI({
     }
   }
 
+  /** Atalho/botão de atualizar: re-busca saldo da conta e dos provedores. */
+  async function refreshBalance() {
+    if (state.balanceLoading) return;
+    state.balanceLoading = true;
+    render();
+    try {
+      await refreshAccount({ fresh: true });
+    } finally {
+      state.balanceLoading = false;
+      render();
+    }
+  }
+
   function applyMcp() {
     state.mcp.statuses = mcp.statuses();
     state.mcp.tools = state.mcp.statuses.reduce((total, item) => total + item.tools, 0);
@@ -1994,7 +2207,10 @@ async function runTUI({
     state.sessionId = saved.id;
     state.sessionStartedAt = saved.startedAt;
     state.messages = Array.isArray(saved.messages) ? saved.messages : [];
-    state.context = Array.isArray(saved.context) ? saved.context : [];
+    state.context =
+      Array.isArray(saved.context) && saved.context.length
+        ? saved.context
+        : sessions.contextFromMessages(state.messages);
     if (saved.model) state.model = saved.model;
     if (saved.theme) state.theme = saved.theme;
     state.autoApprove = forcedAllow || Boolean(saved.allowAll);
@@ -2076,6 +2292,35 @@ async function runTUI({
     }
   }
 
+  // Anexa imagem(ns) ao proximo turno. Aceita um ou mais caminhos separados
+  // por espaco. Respeita MAX_IMAGES e grava o ultimo erro em state.imageError.
+  async function attachImages(argument) {
+    const files = String(argument || "")
+      .split(/\s+/)
+      .map((part) => part.trim())
+      .filter(Boolean);
+    if (!files.length) return render();
+
+    const items = state.images || (state.images = []);
+    let lastError = null;
+
+    for (const file of files) {
+      if (items.length >= MAX_IMAGES) {
+        lastError = `limite de ${MAX_IMAGES} imagens por mensagem`;
+        break;
+      }
+      const result = loadImage(file.replace(/^~(?=\/)/, os.homedir()));
+      if (!result || !result.ok) {
+        lastError = `${path.basename(file)}: ${result?.error || "falha ao carregar"}`;
+        continue;
+      }
+      items.push(result.attachment);
+    }
+
+    state.imageError = lastError;
+    return render();
+  }
+
   async function runCommand(line) {
     const parts = line.trim().split(/\s+/);
     const name = parts[0];
@@ -2083,6 +2328,31 @@ async function runTUI({
 
     // /models e /model sem argumento abrem o mesmo seletor navegavel.
     if ((name === "/model" || name === "/models") && !parts[1]) return openModelPicker();
+
+    // /image <arquivo> anexa uma imagem ao proximo turno (ate MAX_IMAGES).
+    // /image (sem argumento) lista o que esta anexado; /image clear limpa tudo.
+    if (name === "/image" || name === "/images" || name === "/anexar") {
+      const argument = parts.slice(1).join(" ").trim();
+      if (!argument) {
+        const items = state.images || [];
+        state.modal = {
+          title: "Imagens",
+          text: items.length
+            ? `${items
+                .map((image, index) => `${index + 1}. ${image.name}  (${image.width}×${image.height} · ${humanSize(image.bytes)})`)
+                .join("\n")}\n\nUse /image clear para remover todas. Clique no ✕ do preview para tirar uma.`
+            : "Nenhuma imagem anexada.\n\nUse /image <arquivo> para anexar (PNG ou JPG, ate " +
+              `${MAX_IMAGES} por vez). Exemplo: /image ~/Imagens/grafico.png`,
+        };
+        return render();
+      }
+      if (/^(clear|limpar|off|none|limpa)$/i.test(argument)) {
+        state.images = [];
+        state.imageError = null;
+        return render();
+      }
+      return attachImages(argument);
+    }
     if (name === "/theme") return openThemePicker();
     if (name === "/background" || name === "/bg") {
       const value = parts.slice(1).join(" ");
@@ -2276,7 +2546,7 @@ async function runTUI({
   function submit() {
     const line = state.input.trim();
     if (!line) return;
-    state.history.push(line);
+    state.history = promptHistory.push(line);
     state.historyIndex = state.history.length;
     state.input = "";
     state.cursor = 0;
@@ -2318,7 +2588,27 @@ async function runTUI({
     state.abort = controller;
     state.escArmed = false;
     startMessageText(line);
-    state.context.push({ role: "user", content: line });
+    // Imagens anexadas viram partes multimodais no content desta mensagem.
+    // O anexo e consumido no turno: some da lista assim que entra no contexto.
+    const attached = state.images || [];
+    // Guarda o tamanho do contexto ANTES deste turno: se o provedor recusar as
+    // imagens (vision_not_supported), desfazemos o push e devolvemos os anexos
+    // para o usuario reaproveitar com outro modelo, sem reenviar tudo a mao.
+    const contextBefore = state.context.length;
+    if (attached.length) {
+      state.context.push({
+        role: "user",
+        content: [
+          { type: "text", text: line },
+          ...attached.map((image) => ({ type: "image_url", image_url: { url: image.dataUrl } })),
+        ],
+      });
+      startMessageText(`📎 ${attached.length} imagem(ns) anexada(s)`);
+      state.images = [];
+      state.imageError = null;
+    } else {
+      state.context.push({ role: "user", content: line });
+    }
     state.busy = true;
     state.streaming = { text: "", reasoning: "", thinkingStartedAt: 0 };
     state.scroll = 0;
@@ -2453,6 +2743,23 @@ async function runTUI({
       if (result.messages) state.context = trimHistory(result.messages);
       // Reconectou de verdade: limpa o alerta e os erros de rede pendentes.
       clearRetry();
+    } else if (result.code === "vision_not_supported") {
+      // O modelo escolhido não aceita imagens: nada de erro genérico nem de
+      // retry automático (reenviar a mesma imagem falharia de novo). Avisa de
+      // forma clara e sugere trocar para um modelo com visão.
+      // Desfaz o turno no contexto e devolve os anexos para reuso.
+      if (attached.length && state.context.length > contextBefore) {
+        state.context.length = contextBefore;
+        state.images = attached;
+      }
+      state.messages.push({
+        role: "system",
+        text:
+          result.error ||
+          "Este modelo não aceita imagens. Escolha um modelo com visão (ex.: `kafox model`) e envie de novo — o anexo foi mantido.",
+        error: true,
+        connectionError: false,
+      });
     } else {
       // Erro de rede/servidor entra marcado como transitório: some sozinho
       // quando a próxima resposta chegar. Erros de verdade (saldo, chave)
@@ -2587,6 +2894,22 @@ async function runTUI({
     const cols = Math.max(30, stdout.columns || 80);
     const rows = Math.max(14, stdout.rows || 24);
     const overlay = buildOverlay(state, cols, rows);
+
+    // "✕" dos previews: alvo clicavel mesmo sem overlay aberto. As coords do
+    // mouse sao 1-based; imageHit guarda linha relativa + coluna 1-based.
+    if (!overlay && state.imageHit && state.inputTop != null) {
+      const rowAt = y - 1;
+      for (const [key, hit] of Object.entries(state.imageHit)) {
+        if (state.inputTop + hit.row !== rowAt) continue;
+        const col = x - 1;
+        if (col < hit.col - 1 || col > hit.col + 1) continue;
+        const index = Number(key);
+        state.images.splice(index, 1);
+        state.imageError = null;
+        return render();
+      }
+    }
+
     if (!overlay || !overlay.hit) return;
 
     const { first, count, left, width, kind } = overlay.hit;
@@ -2617,7 +2940,7 @@ async function runTUI({
     state.cursor = cursor == null ? value.length : clamp(cursor, 0, value.length);
     state.menuIndex = 0;
     state.menuDismissed = false;
-    render();
+    scheduleInputRender();
   }
 
   function moveApproval(delta) {
@@ -2682,6 +3005,7 @@ async function runTUI({
 
     if (key.name === "f2") return toggleMouse();
     if (key.ctrl && key.name === "y") return copyLastAnswer();
+    if (key.ctrl && key.name === "r") return refreshBalance();
 
     // 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).