kafox-cli 0.2.1 → 0.2.3

package/README.md

@@ -12,7 +12,7 @@ npm install -g kafox-cli
 O comando instalado e `kafox`. Alternativa sem npm:
 
 ```bash
-npm install -g https://kafox.pypag.com/static/downloads/kafox-cli-0.2.1.tgz
+npm install -g https://kafox.pypag.com/static/downloads/kafox-cli-0.2.3.tgz
 ```
 
 Requisito: Node.js 22.5+.
@@ -31,7 +31,7 @@ navegador, entre na sua conta e clique em **Autorizar**. A sessao fica em
 
 | Comando | O que faz |
 | --- | --- |
-| `kafox` | abre o REPL |
+| `kafox` | abre a interface de tela cheia |
 | `kafox login` / `logout` / `whoami` | sessao da conta |
 | `kafox models` | lista modelos e precos por 1M de tokens |
 | `kafox pricing` | pacotes de recarga |
@@ -43,9 +43,10 @@ navegador, entre na sua conta e clique em **Autorizar**. A sessao fica em
 | `kafox background [url]` | imagem de fundo do terminal |
 | `kafox compact` / `clear` | compacta / limpa o contexto do REPL |
 
-Dentro do REPL: `/help`, `/models`, `/model <id>`, `/balance`, `/pricing`,
-`/key`, `/login`, `/logout`, `/whoami`, `/theme`, `/background`, `/clear`,
-`/compact`, `/status`, `/exit`.
+Na interface: digite `/` para o menu (↑/↓ navega, Tab completa, Enter executa
+), `/model` abre o seletor de modelo (↑/↓ + Enter). Demais comandos: `/help`,
+`/models`, `/balance`, `/pricing`, `/key`, `/login`, `/logout`, `/whoami`,
+`/theme`, `/background`, `/clear`, `/compact`, `/status`, `/exit`.
 
 ## Configuracao
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kafox-cli",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Kafox CLI in opencode style: full-screen terminal UI, device login, models, balance, themes",
   "bin": {
     "kafox": "bin/kafox.js"

package/src/cli.js

@@ -13,7 +13,7 @@ const { version: VERSION } = require("../package.json");
 const COMMANDS = {
   "/help": "show this help",
   "/models": "list models and prices",
-  "/model <id>": "set default model",
+  "/model": "choose the default model (picker)",
   "/balance": "show balance",
   "/pricing": "show recharge packages",
   "/key": "create an API key",
@@ -21,7 +21,7 @@ const COMMANDS = {
   "/logout": "end the session",
   "/whoami": "show the linked account",
   "/theme": "open theme selector",
-  "/background [url]": "set background image (modal asks for URL)",
+  "/background": "set background image (modal asks for URL)",
   "/clear": "clear conversation context",
   "/compact": "compact conversation context",
   "/status": "show account, balance and gateway status",

package/src/gateway.js

@@ -120,7 +120,7 @@ async function ask(question, options = {}) {
   console.log(chalk.green("\nAnswer:"));
   console.log(result.text);
   if (result.ms) {
-    console.log(chalk.dim(`\n(${result.ms}ms  provider ${result.provider || "?"})`));
+    console.log(chalk.dim(`\n(${result.ms}ms)`));
   }
 }
 

package/src/tui.js

@@ -1,6 +1,6 @@
 /**
  * Interface de terminal do kafox, no estilo opencode:
- * tela cheia, mascote, menu de comandos "/", caixa de input e rodape.
+ * tela cheia, mascote, menu de comandos "/", seletor de modelo, input e rodape.
  *
  * 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.
@@ -9,7 +9,6 @@ const readline = require("readline");
 const chalk = require("chalk");
 const storage = require("./storage");
 const { mascot } = require("./mascot");
-const { paint } = require("./theme");
 const { ensureSession, fetchApi } = require("./auth");
 const { askModel } = require("./gateway");
 
@@ -72,6 +71,9 @@ function initialState() {
     busy: false,
     frame: 0,
     menuIndex: 0,
+    menuDismissed: false,
+    picker: null,
+    models: [],
     balance: null,
     model: cfg.model || null,
     theme: cfg.theme || "default",
@@ -82,18 +84,27 @@ function initialState() {
 
 /* ------------------------------------------------------------------ layout */
 
-function headerLines(state, width, rows) {
-  if (state.messages.length) return [];
-  const art = mascot.split("\n");
-  const visibleArt = rows >= 46 ? art : art.slice(0, 9);
-  const lines = visibleArt.map((line) => center(paint(state.theme, line), width));
-  lines.push("");
-  lines.push(center(chalk.bold("O que voce quer fazer?"), width));
-  lines.push(
-    center(chalk.dim("Use / para comandos  |  Enter envia  |  Ctrl+C sai"), width)
-  );
-  lines.push("");
-  return lines;
+function headerLines(state, width, rows, footerCount, compact) {
+  if (state.messages.length || state.picker) return [];
+
+  // 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);
+
+  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), ""];
+  }
+  if (space >= art.length + 2) {
+    return [...art, "", center(chalk.bold("O que voce quer fazer?"), width), ""];
+  }
+  if (space >= art.length + 1) return [...art, ""];
+  if (space >= art.length) return art;
+  return art.slice(0, Math.max(0, space));
 }
 
 function messageLines(state, width) {
@@ -109,12 +120,7 @@ function messageLines(state, width) {
     } 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` : null,
-        message.provider,
-      ]
-        .filter(Boolean)
-        .join(" | ");
+      const meta = message.ms ? `${(message.ms / 1000).toFixed(1)}s` : "";
       if (meta) lines.push(chalk.dim("  " + meta));
     } else {
       lines.push("");
@@ -130,11 +136,15 @@ function messageLines(state, width) {
 }
 
 function filteredCommands(state, commands) {
+  if (state.menuDismissed) return [];
   if (!state.input.startsWith("/") || state.input.includes(" ")) return [];
   const query = state.input.toLowerCase();
-  return Object.entries(commands).filter(([name]) =>
-    name.toLowerCase().startsWith(query)
-  );
+  return Object.entries(commands)
+    .filter(([name]) => name.toLowerCase().startsWith(query))
+    .sort(
+      (a, b) =>
+        Number(b[0].toLowerCase() === query) - Number(a[0].toLowerCase() === query)
+    );
 }
 
 function menuLines(state, commands, width) {
@@ -147,8 +157,33 @@ function menuLines(state, commands, width) {
   });
 }
 
+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);
+  });
+  lines.push("");
+  return lines;
+}
+
 function footerLines(state, width) {
-  const name = state.version ? `kafox ${state.version}` : "kafox";
+  const name = `kafox ${state.version}`;
   const left = chalk.dim(truncate(`${name}  |  ${state.model || "auto"}`, width - 16));
   const right = chalk.green(
     state.balance == null ? "saldo --" : `R$ ${(state.balance / 1_000_000).toFixed(2)}`
@@ -165,10 +200,19 @@ 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 header = headerLines(state, width, rows);
-  const menu = menuLines(state, commands, width);
-  const footer = footerLines(state, width);
+  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
@@ -180,17 +224,20 @@ function buildFrame(state, cols, rows, commands) {
     : chalk.cyan("> ") + chalk.dim(truncate("Pergunte alguma coisa...", inputWidth));
   const rule = chalk.dim("-".repeat(width));
 
-  const reserved = footer.length + menu.length + 3;
-  const available = Math.max(1, 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 raw = [...header, ...body, "", ...menu, inputLine, rule, ...footer];
+  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 + 1 + menu.length + 1;
+  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 };
 }
@@ -247,6 +294,46 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     return collected.join("\n");
   }
 
+  async function loadModels() {
+    if (state.models.length) return state.models;
+    const pricing = await fetchApi("/api/public/pricing")
+      .then((res) => res.json())
+      .catch(() => null);
+    state.models = (pricing?.pricing || []).map((row) => ({
+      id: row.model,
+      input: row.input_micros_per_1m,
+      output: row.output_micros_per_1m,
+    }));
+    return state.models;
+  }
+
+  async function openModelPicker() {
+    state.menuDismissed = true;
+    state.picker = { 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 });
+      return render();
+    }
+    const current = models.findIndex((item) => item.id === state.model);
+    state.picker = { items: models, index: current >= 0 ? current : 0, loading: false };
+    render();
+  }
+
+  function selectModel() {
+    const picker = state.picker;
+    if (!picker || picker.loading) return;
+    const item = picker.items[picker.index];
+    if (!item) return;
+    storage.setConfig({ model: item.id });
+    state.model = item.id;
+    state.picker = null;
+    state.messages.push({ role: "system", text: `Modelo: ${item.id}` });
+    render();
+  }
+
   async function runOutside(line) {
     state.suspended = true;
     leaveScreen();
@@ -265,12 +352,14 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
   }
 
   async function runCommand(line) {
-    const name = line.split(/\s+/)[0];
+    const parts = line.trim().split(/\s+/);
+    const name = parts[0];
     if (name === "/exit" || name === "/quit") return quit();
 
+    if (name === "/model" && !parts[1]) return openModelPicker();
+
     if (name === "/clear") {
       state.messages = [];
-      state.status = "";
       return render();
     }
     if (name === "/compact") {
@@ -279,10 +368,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       } else {
         const total = state.messages.length;
         state.messages = [
-          {
-            role: "system",
-            text: `Contexto compactado: ${total} mensagens resumidas.`,
-          },
+          { role: "system", text: `Contexto compactado: ${total} mensagens resumidas.` },
           ...state.messages.slice(-6),
         ];
       }
@@ -311,6 +397,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     state.input = "";
     state.cursor = 0;
     state.menuIndex = 0;
+    state.menuDismissed = false;
 
     if (line.startsWith("/")) return runCommand(line);
 
@@ -339,6 +426,7 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     state.input = value;
     state.cursor = cursor == null ? value.length : clamp(cursor, 0, value.length);
     state.menuIndex = 0;
+    state.menuDismissed = false;
     render();
   }
 
@@ -346,10 +434,46 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
     if (state.suspended) return;
     if (key.ctrl && key.name === "c") return quit();
 
+    // Seletor de modelo tem prioridade sobre o resto.
+    if (state.picker) {
+      if (state.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)
+        );
+        return render();
+      }
+      if (key.name === "return") return selectModel();
+      if (key.name === "escape") {
+        state.picker = null;
+        return render();
+      }
+      return;
+    }
+
     const items = filteredCommands(state, commands);
     const menuOpen = items.length > 0;
 
-    if (key.name === "return") return submit();
+    if (key.name === "return") {
+      // Se o texto ja e um comando exato, ele vence a lista (ex.: /model vs /models).
+      const exact = Object.keys(commands).find(
+        (name) => name.toLowerCase() === state.input.trim().toLowerCase()
+      );
+      if (exact) {
+        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;
+        state.menuIndex = 0;
+      }
+      return submit();
+    }
     if (key.name === "tab") {
       if (menuOpen) {
         const selected = items[state.menuIndex % items.length];
@@ -358,7 +482,10 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       return;
     }
     if (key.name === "escape") {
-      if (menuOpen) return setInput("");
+      if (menuOpen) {
+        state.menuDismissed = true;
+        return render();
+      }
       return;
     }
     if (key.name === "up" || key.name === "down") {
@@ -374,12 +501,8 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
       if (next === state.history.length) return setInput("");
       return setInput(state.history[next]);
     }
-    if (key.name === "left") {
-      return setInput(state.input, state.cursor - 1);
-    }
-    if (key.name === "right") {
-      return setInput(state.input, state.cursor + 1);
-    }
+    if (key.name === "left") return setInput(state.input, state.cursor - 1);
+    if (key.name === "right") return setInput(state.input, state.cursor + 1);
     if (key.name === "home") return setInput(state.input, 0);
     if (key.name === "end") return setInput(state.input, state.input.length);
     if (key.name === "backspace") {
@@ -450,4 +573,4 @@ async function runTUI({ commands = {}, onCommand, interactiveCommands = new Set(
   return { state, quit, render, submit };
 }
 
-module.exports = { runTUI, buildFrame, wrap, initialState, filteredCommands };
+module.exports = { runTUI, buildFrame, wrap, initialState, filteredCommands, pickerLines };