kafox-cli 0.10.2 → 0.10.4

package/src/tui.js

@@ -25,8 +25,11 @@ 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, buildAttachment, humanSize } = require("./images");
+const clipboard = require("./clipboard");
 
 const ANSI = /\x1b\[[0-9;]*m/g;
 const stripAnsi = (value) => String(value).replace(ANSI, "");
@@ -499,6 +502,8 @@ const CONTROL_KEYS = {
   12: { name: "l", ctrl: true },
   13: { name: "return" },
   21: { name: "u", ctrl: true },
+  // Ctrl+V: cola o que esta na area de transferencia (imagem vira anexo).
+  22: { name: "v", 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).
@@ -681,6 +686,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: [],
@@ -1332,22 +1341,6 @@ function sidebarLines(state, width) {
   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)}`));
 
-  // Saldo dos provedores externos (unlid etc.): so aparece quando o backend
-  // consegue ler. Moeda vem do provedor; "sem consulta" quando falha.
-  if (state.balanceLoading) lines.push(chalk.dim("atualizando…"));
-  for (const item of state.providerBalances || []) {
-    const label = truncate(item.label || item.id || "provider", Math.max(6, width - 12));
-    if (item.ok && item.balance != null) {
-      const money =
-        item.currency === "BRL"
-          ? `R$ ${Number(item.balance).toFixed(2)}`
-          : `${Number(item.balance).toFixed(2)} ${item.currency || "USD"}`;
-      lines.push(chalk.dim(`${label} `) + chalk.cyan(money));
-    } else {
-      lines.push(chalk.dim(`${label} `) + chalk.dim("--"));
-    }
-  }
-
   lines.push("");
   lines.push(border(state, "MCP"));
   if (state.mcp.loading) {
@@ -1436,30 +1429,89 @@ 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) + "┐"));
+
+  // Na tela inicial o preview tambem aparece: colar uma imagem antes da
+  // primeira pergunta precisa de retorno visual na caixa.
+  const previews = hero && !(state.images || []).length ? [] : 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,
   };
 }
 
@@ -1747,6 +1799,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,
   ];
@@ -1794,10 +1848,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,
@@ -1821,6 +1881,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.
@@ -1839,7 +1903,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);
@@ -2143,7 +2212,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);
@@ -2225,6 +2297,75 @@ 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();
+  }
+
+  // Cola o que esta na area de transferencia: imagem entra como anexo do
+  // proximo turno (Ctrl+V ou /paste) e texto sem imagem vai para a caixa de
+  // escrita, como um paste comum. E isso que faz `Ctrl+V` de um print
+  // funcionar mesmo o terminal entregando so texto.
+  async function pasteFromClipboard() {
+    const items = state.images || (state.images = []);
+    if (items.length >= MAX_IMAGES) {
+      state.imageError = `limite de ${MAX_IMAGES} imagens por mensagem`;
+      return render();
+    }
+
+    const shot = clipboard.readImage();
+    if (shot.ok) {
+      const result = buildAttachment(shot.buffer, {
+        name: shot.mime === "image/jpeg" ? "colagem.jpg" : "colagem.png",
+        mime: shot.mime,
+      });
+      if (!result.ok) {
+        state.imageError = `colagem: ${result.error}`;
+        return render();
+      }
+      items.push(result.attachment);
+      state.imageError = null;
+      return render();
+    }
+
+    const text = String(clipboard.readText() || "")
+      .replace(/[\r\n]+/g, " ")
+      .replace(/[\x00-\x1f\x7f]/g, "");
+    if (text.trim()) {
+      return setInput(
+        state.input.slice(0, state.cursor) + text + state.input.slice(state.cursor),
+        state.cursor + text.length
+      );
+    }
+
+    state.imageError = shot.error;
+    return render();
+  }
+
   async function runCommand(line) {
     const parts = line.trim().split(/\s+/);
     const name = parts[0];
@@ -2232,6 +2373,37 @@ async function runTUI({
 
     // /models e /model sem argumento abrem o mesmo seletor navegavel.
     if ((name === "/model" || name === "/models") && !parts[1]) return openModelPicker();
+
+    // /paste (atalho Ctrl+V) cola a imagem copiada; sem imagem, cola o texto.
+    // Serve tambem para terminais que consomem o Ctrl+V antes da CLI.
+    if (name === "/paste" || name === "/colar" || name === "/clipboard") {
+      return pasteFromClipboard();
+    }
+
+    // /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(" ");
@@ -2290,11 +2462,21 @@ async function runTUI({
     }
 
     if (name === "/clear") {
+      // Limpar o contexto e comecar outra conversa, nao continuar a mesma: com
+      // o codigo antigo tudo o que vinha depois do /clear era gravado no mesmo
+      // arquivo, entao conversas diferentes apareciam como uma so no history.
       state.messages = [];
       state.context = [];
       state.streaming = null;
+      state.streamedText = "";
       state.files = [];
+      state.images = [];
+      state.imageError = null;
+      state.retry = null;
+      state.tokens = 0;
       state.scroll = 0;
+      state.sessionId = sessions.newId();
+      state.sessionStartedAt = new Date().toISOString();
       return render();
     }
     if (name === "/compact") {
@@ -2425,7 +2607,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;
@@ -2467,7 +2649,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;
@@ -2602,6 +2804,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)
@@ -2736,6 +2955,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;
@@ -2832,6 +3067,8 @@ 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();
+    // Ctrl+V cola imagem (ou texto) da area de transferencia.
+    if (key.ctrl && key.name === "v") return pasteFromClipboard();
 
     // 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).