kafox-cli 0.6.0 → 0.7.0

package/src/subagents.js

@@ -0,0 +1,156 @@
+/**
+ * Subagentes: um agente dentro do agente.
+ *
+ * O modelo chama `spawn_subagent` com um objetivo; cada tarefa roda em contexto
+ * proprio (nao polui a conversa principal) e devolve apenas o resultado final.
+ * Várias tarefas rodam em paralelo, o que serve para investigar pontos
+ * diferentes do projeto ao mesmo tempo (auditoria, testes, levantamento).
+ */
+const SUBAGENT_TOOL_NAME = "spawn_subagent";
+const MAX_TASKS = 3;
+const MAX_DEPTH = 1;
+// Subagente tambem nao tem teto por padrao: roda ate entregar o objetivo.
+const DEFAULT_MAX_STEPS = Infinity;
+const READ_ONLY_TOOLS = ["read_file", "list_dir"];
+const ALL_LOCAL_TOOLS = ["read_file", "list_dir", "write_file", "edit_file", "run_command"];
+
+const SUBAGENT_TOOL = {
+  type: "function",
+  function: {
+    name: SUBAGENT_TOOL_NAME,
+    description:
+      "Lanca um ou mais subagentes com objetivo proprio. Cada subagente roda em contexto separado, usa as ferramentas liberadas (padrao: read_file e list_dir) e devolve so o resultado final. Use para dividir trabalho, investigar varios pontos em paralelo (auditoria, testes, busca de arquivos) ou tarefas longas que nao precisam sujar esta conversa.",
+    parameters: {
+      type: "object",
+      properties: {
+        tasks: {
+          type: "array",
+          description: `Lista de tarefas (1 a ${MAX_TASKS}). Independentes rodam em paralelo.`,
+          items: {
+            type: "object",
+            properties: {
+              objective: {
+                type: "string",
+                description: "O que o subagente deve entregar, com o criterio de pronto",
+              },
+              context: {
+                type: "string",
+                description: "Contexto extra: arquivos, caminhos, comandos, restricoes",
+              },
+              tools: {
+                type: "array",
+                items: { type: "string" },
+                description:
+                  "Ferramentas liberadas para esta tarefa (read_file, list_dir, write_file, edit_file, run_command). Padrao: read_file e list_dir.",
+              },
+              max_steps: {
+                type: "integer",
+                description: "Limite de passos (opcional; sem ele o subagente roda ate terminar)",
+              },
+            },
+            required: ["objective"],
+          },
+        },
+        objective: {
+          type: "string",
+          description: "Atalho para uma unica tarefa (equivalente a tasks: [{objective}])",
+        },
+        context: { type: "string", description: "Contexto extra para a tarefa unica" },
+        model: { type: "string", description: "Modelo dos subagentes (padrao: o da sessao)" },
+      },
+    },
+  },
+};
+
+function normalizeTasks(args = {}) {
+  const list = [];
+  if (Array.isArray(args.tasks)) {
+    for (const item of args.tasks) {
+      if (!item) continue;
+      if (typeof item === "string") list.push({ objective: item });
+      else if (item.objective) list.push(item);
+    }
+  } else if (args.objective) {
+    list.push({ objective: args.objective, context: args.context, tools: args.tools });
+  }
+  return list.slice(0, MAX_TASKS).map((task) => ({
+    objective: String(task.objective).trim(),
+    context: task.context ? String(task.context) : "",
+    tools: allowedTools(task.tools),
+    maxSteps: Number(task.max_steps || task.maxSteps) > 0 ? Number(task.max_steps || task.maxSteps) : Infinity,
+  }));
+}
+
+function allowedTools(requested) {
+  if (!Array.isArray(requested) || !requested.length) return [...READ_ONLY_TOOLS];
+  const chosen = requested
+    .map((name) => String(name).trim())
+    .filter((name) => ALL_LOCAL_TOOLS.includes(name));
+  return chosen.length ? [...new Set(chosen)] : [...READ_ONLY_TOOLS];
+}
+
+function subagentPrompt({ objective, context, cwd, depth }) {
+  return [
+    "Voce e um subagente do kafox CLI, rodando em contexto separado do agente principal.",
+    `Diretorio de trabalho: ${cwd}`,
+    `Objetivo: ${objective}`,
+    context ? `Contexto: ${context}` : "",
+    depth >= MAX_DEPTH ? "Nao lance outros subagentes." : "",
+    "Trabalhe so no objetivo recebido, use as ferramentas disponiveis e pare quando tiver a resposta.",
+    "Devolva um relatorio curto e direto em Markdown: o que encontrou, evidencias (arquivo:linha, saida de comando) e o que ficou em duvida.",
+    "Nao invente nada: se nao conseguiu verificar, diga isso explicitamente.",
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+function describeSubagentCall(args = {}) {
+  const tasks = normalizeTasks(args);
+  if (!tasks.length) return "(sem objetivo)";
+  if (tasks.length === 1) return tasks[0].objective.slice(0, 120);
+  return `${tasks.length} tarefas: ${tasks.map((task) => task.objective.slice(0, 40)).join(" | ")}`;
+}
+
+/* ------------------------- historico da sessao ------------------------- */
+// O que os subagentes desta sessao fizeram: alimenta o `/agents`.
+const SESSION_RUNS = [];
+const MAX_RUNS = 50;
+
+function recordRun({ objective, tools = [], ok, ms = 0, steps = 0, report = "" }) {
+  SESSION_RUNS.push({
+    objective: String(objective || "(sem objetivo)"),
+    tools: [...tools],
+    ok: Boolean(ok),
+    ms: Number(ms) || 0,
+    steps: Number(steps) || 0,
+    report: String(report || ""),
+    at: new Date().toISOString(),
+  });
+  if (SESSION_RUNS.length > MAX_RUNS) SESSION_RUNS.splice(0, SESSION_RUNS.length - MAX_RUNS);
+  return SESSION_RUNS[SESSION_RUNS.length - 1];
+}
+
+function listRuns() {
+  return SESSION_RUNS.map((run) => ({ ...run }));
+}
+
+function clearRuns() {
+  SESSION_RUNS.length = 0;
+}
+
+module.exports = {
+  SUBAGENT_TOOL,
+  SUBAGENT_TOOL_NAME,
+  MAX_TASKS,
+  MAX_DEPTH,
+  DEFAULT_MAX_STEPS,
+  READ_ONLY_TOOLS,
+  ALL_LOCAL_TOOLS,
+  normalizeTasks,
+  allowedTools,
+  subagentPrompt,
+  describeSubagentCall,
+  recordRun,
+  listRuns,
+  clearRuns,
+};

package/src/tools.js

@@ -102,6 +102,10 @@ const TOOL_NAMES = LOCAL_TOOL_NAMES;
 const APPROVAL_REQUIRED = new Set(["write_file", "edit_file", "run_command"]);
 
 const TOOL_META = {
+  // A ferramenta de subagente e montada no agent.js (nao vai para TOOL_SPECS
+  // porque só aparece enquanto a profundidade permite), mas o card da TUI
+  // precisa do mesmo rótulo das outras.
+  spawn_subagent: { kind: "agent", label: "Subagente" },
   read_file: { kind: "read", label: "Read" },
   list_dir: { kind: "list", label: "List" },
   write_file: { kind: "write", label: "Write" },
@@ -292,6 +296,14 @@ function previewToolChange(name, args = {}, context = {}) {
 
 /** Resumo curto da chamada para mostrar na conversa. */
 function describeToolCall(name, args = {}) {
+  if (name === "spawn_subagent") {
+    const tasks = Array.isArray(args.tasks) ? args.tasks : args.objective ? [args] : [];
+    if (!tasks.length) return "(sem objetivo)";
+    if (tasks.length === 1) return String(tasks[0].objective || "(objetivo)").slice(0, 120);
+    return `${tasks.length} subagentes: ${tasks
+      .map((task) => String(task.objective || "").slice(0, 40))
+      .join(" | ")}`;
+  }
   if (name === "read_file") return args.path || "(arquivo)";
   if (name === "write_file") return `${args.path || "(arquivo)"} (${String(args.content || "").length} chars)`;
   if (name === "edit_file") return `${args.path || "(arquivo)"}`;

package/src/tui.js

@@ -23,6 +23,7 @@ const { logoLines, LOGO_WIDTH, LOGO_HEIGHT } = require("./logo");
 const { diffBlocks } = require("./diff");
 const { toolMeta, parseCommandOutput } = require("./tools");
 const { McpHub } = require("./mcp");
+const sessions = require("./sessions");
 
 const ANSI = /\x1b\[[0-9;]*m/g;
 const stripAnsi = (value) => String(value).replace(ANSI, "");
@@ -508,6 +509,9 @@ function initialState() {
     scroll: 0,
     pageSize: 10,
     mouse: true,
+    retry: null,
+    sessionId: null,
+    sessionStartedAt: null,
     model: cfg.model || null,
     theme: cfg.theme || "default",
     suspended: false,
@@ -851,7 +855,7 @@ function messageLines(state, width) {
 
   if (state.busy && !streaming?.text) {
     lines.push("");
-    lines.push(indent(2) + chalk.dim("pensando" + ".".repeat(state.frame % 4)));
+    lines.push(indent(2) + chalk.dim("trabalhando" + ".".repeat(state.frame % 4)));
   }
   return lines;
 }
@@ -962,6 +966,23 @@ function queueLines(state, width) {
   return rows;
 }
 
+function modelLine(state, width) {
+  const model = state.model || "auto";
+  // O aviso do momento tem prioridade sobre a versao: com nome de modelo longo
+  // a linha trunca e a mensagem util precisa aparecer primeiro.
+  let label = `${model} · kafox v${state.version}`;
+  if (state.escArmed) {
+    label = `${model} · Esc de novo para parar`;
+  } else if (state.retry) {
+    const left = Math.max(1, Math.ceil(((state.retry.endsAt || 0) - Date.now()) / 1000));
+    label = `${model} · reconectando em ${left}s (tentativa ${state.retry.attempt}/${state.retry.maxAttempts})`;
+  }
+  return paintPanel(
+    state.theme,
+    padRight(indent(2) + chalk.dim(truncate(label, width - 2)), width)
+  );
+}
+
 function inputBlock(state, width, { hero = false, tight = false } = {}) {
   const available = width - 4;
   const start =
@@ -975,36 +996,23 @@ function inputBlock(state, width, { hero = false, tight = false } = {}) {
   if (state.input) {
     body = prompt + shown;
   } else {
-    const placeholder = hero
-      ? "Pergunte alguma coisa... ex: \"explica esse repo\""
-      : "Pergunte alguma coisa...";
+    // Enquanto a IA trabalha os pontinhos correm; parada, a caixa fica limpa.
+    const placeholder = state.busy ? `trabalhando${".".repeat(state.frame % 4)}` : "";
     body = prompt + chalk.dim(truncate(placeholder, available));
   }
 
-  const lines = [rule(state, width), paintPanel(state.theme, padRight(body, width))];
-  let cursorRow = 1;
-
-  if (!tight) {
-    const model = state.model || "auto";
-    const status = state.escArmed
-      ? "  Esc de novo para parar a IA"
-      : state.busy
-        ? `  pensando${".".repeat(state.frame % 4)}  ·  Esc 2× para parar`
-        : state.autoApprove
-          ? "  rodando tudo"
-          : "";
-    // Com o Esc armado a versao sai de cena: o aviso precisa caber na linha.
-    const label = state.escArmed
-      ? `${model}${status}`
-      : `${model} · kafox v${state.version}${status}`;
-    lines.push(paintPanel(state.theme, padRight(indent(2) + chalk.dim(truncate(label, width - 2)), width)));
-    lines.push(rule(state, width));
-  }
+  const lines = [
+    rule(state, width),
+    paintPanel(state.theme, padRight(body, width)),
+    rule(state, width),
+  ];
 
   return {
     lines,
-    cursorRow,
+    cursorRow: 1,
     cursorCol: 4 + (state.cursor - start),
+    // O modelo fica fora da caixa de texto, logo abaixo dela.
+    footer: tight ? null : modelLine(state, width),
   };
 }
 
@@ -1132,13 +1140,20 @@ function buildOverlay(state, cols, rows) {
   } else if (state.picker) {
     const picker = state.picker;
     const themePicker = picker.kind === "theme";
-    title = themePicker ? `Tema  (${picker.index + 1}/${picker.items.length})` : "Escolha o modelo";
-    hint = "↑/↓ ou clique  ·  Enter aplica  ·  Esc cancela";
+    const chatPicker = picker.kind === "chat";
+    title = themePicker
+      ? `Tema  (${picker.index + 1}/${picker.items.length})`
+      : chatPicker
+        ? `Conversas  (${picker.index + 1}/${picker.items.length})`
+        : "Escolha o modelo";
+    hint = chatPicker
+      ? "↑/↓ ou clique  ·  Enter retoma  ·  Esc cancela"
+      : "↑/↓ ou clique  ·  Enter aplica  ·  Esc cancela";
 
     if (picker.loading) {
       body = [chalk.dim("carregando modelos...")];
     } else {
-      const height = Math.min(themePicker ? 9 : 8, picker.items.length);
+      const height = Math.min(chatPicker ? 10 : themePicker ? 9 : 8, picker.items.length);
       const start = clamp(
         picker.index - Math.floor(height / 2),
         0,
@@ -1152,10 +1167,16 @@ function buildOverlay(state, cols, rows) {
         let line;
         if (themePicker) {
           line = padRight(` ${caret} ${padRight(item.id, 15)} ` + themeSwatch(item.id), width - 4);
+        } else if (chatPicker) {
+          const when = String(item.updatedAt || "").slice(0, 10);
+          const right = chalk.dim(`${when} ${item.id}`);
+          const space = width - 6;
+          const room = Math.max(12, space - visible(right) - 2);
+          const left = ` ${caret} ${truncate(item.title || item.id, room)}`;
+          const gap = Math.max(1, space - visible(left) - visible(right));
+          line = padRight(left + " ".repeat(gap) + right, width - 4);
         } else {
-          const price = `${(item.input / 1_000_000).toFixed(2)} / ${(item.output / 1_000_000).toFixed(2)} R$`;
-          const label = padRight(` ${caret} ${item.id}`, Math.max(20, width - 28));
-          line = padRight(label + price, width - 4);
+          line = padRight(` ${caret} ${item.id} `, width - 4);
         }
         body.push(real === picker.index ? chalk.inverse(line) : line);
       }
@@ -1231,7 +1252,14 @@ function buildFrame(state, cols, rows, commands = {}) {
   const input = inputBlock(state, inner, { hero, tight });
   const status = statusLines(state, inner, { bare });
   const hints = hintsLines(state, inner, { bare });
-  const chrome = [...queue, ...menu, ...input.lines, ...status, ...hints];
+  const chrome = [
+    ...queue,
+    ...menu,
+    ...input.lines,
+    ...(input.footer ? [input.footer] : []),
+    ...status,
+    ...hints,
+  ];
 
   const head = hero ? heroLines(state, inner, rows - chrome.length) : [];
 
@@ -1297,15 +1325,45 @@ async function runTUI({
   onCommand,
   interactiveCommands = new Set(),
   autoApprove = false,
+  resume = null,
 } = {}) {
   const stdin = process.stdin;
   const stdout = process.stdout;
   const state = initialState();
+
+  // 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.
+  let resumeMissing = null;
+  let resumePick = false;
+  if (resume) {
+    if (resume === "pick") {
+      resumePick = true;
+    } else {
+      const id = resume === "last" || resume === true ? sessions.latest()?.id : String(resume);
+      const saved = sessions.load(id);
+      if (saved) {
+        state.sessionId = saved.id;
+        state.sessionStartedAt = saved.startedAt;
+        state.messages = Array.isArray(saved.messages) ? saved.messages : [];
+        state.context = Array.isArray(saved.context) ? saved.context : [];
+        if (saved.model) state.model = saved.model;
+        if (saved.theme) state.theme = saved.theme;
+        state.tokens = estimateTokens(state);
+      } else {
+        resumeMissing = String(id || resume);
+      }
+    }
+  }
+  if (!state.sessionId) {
+    state.sessionId = sessions.newId();
+    state.sessionStartedAt = new Date().toISOString();
+  }
   // `kafox --allow-all` (ou KAFOX_ALLOW_ALL=1) ja comeca sem pedir aprovacao.
   state.autoApprove = Boolean(autoApprove) || process.env.KAFOX_ALLOW_ALL === "1";
   let mcp = new McpHub({ cwd: process.cwd() });
   let spinner = null;
   let escTimer = null;
+  let saveTimer = null;
   let closed = false;
   let previousLines = [];
 
@@ -1365,6 +1423,34 @@ async function runTUI({
     render();
   }
 
+  /** Grava a conversa em ~/.kafox/chats para o --resume achar depois. */
+  function persist() {
+    if (!state.sessionId || closed) return;
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+      saveTimer = null;
+      saveNow();
+    }, 400);
+    saveTimer.unref?.();
+  }
+
+  function saveNow() {
+    if (!state.sessionId) return null;
+    try {
+      return sessions.save({
+        id: state.sessionId,
+        cwd: process.cwd(),
+        model: state.model,
+        theme: state.theme,
+        messages: state.messages,
+        context: state.context,
+        startedAt: state.sessionStartedAt,
+      });
+    } catch {
+      return null;
+    }
+  }
+
   function render() {
     if (closed || state.suspended) return;
     const cols = Math.max(30, stdout.columns || 80);
@@ -1406,11 +1492,7 @@ 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,
-      input: row.input_micros_per_1m,
-      output: row.output_micros_per_1m,
-    }));
+    state.models = (pricing?.pricing || []).map((row) => ({ id: row.model }));
     return state.models;
   }
 
@@ -1449,6 +1531,41 @@ async function runTUI({
     render();
   }
 
+  /** Modal com as conversas salvas (setas/mouse + Enter), igual ao de modelos. */
+  function openChatPicker() {
+    const items = sessions.list();
+    if (!items.length) {
+      state.modal = {
+        title: "Conversas",
+        text: `Nenhuma conversa salva ainda.\nFicam em ${sessions.chatsDir()}.`,
+      };
+      return render();
+    }
+    state.menuDismissed = true;
+    state.picker = { kind: "chat", items, index: 0, loading: false };
+    render();
+  }
+
+  /** Troca a sessao atual pela conversa escolhida no seletor. */
+  function resumeChat(id) {
+    const saved = sessions.load(id);
+    state.picker = null;
+    if (!saved) {
+      state.modal = { title: "Resume", text: "Nao consegui abrir essa conversa." };
+      return render();
+    }
+    state.sessionId = saved.id;
+    state.sessionStartedAt = saved.startedAt;
+    state.messages = Array.isArray(saved.messages) ? saved.messages : [];
+    state.context = Array.isArray(saved.context) ? saved.context : [];
+    if (saved.model) state.model = saved.model;
+    if (saved.theme) state.theme = saved.theme;
+    state.files = [];
+    state.tokens = estimateTokens(state);
+    state.scroll = 0;
+    return render();
+  }
+
   async function openModelPicker() {
     state.menuDismissed = true;
     state.picker = { kind: "model", items: state.models, index: 0, loading: true };
@@ -1525,7 +1642,8 @@ async function runTUI({
     const name = parts[0];
     if (name === "/exit" || name === "/quit") return quit();
 
-    if (name === "/model" && !parts[1]) return openModelPicker();
+    // /models e /model sem argumento abrem o mesmo seletor navegavel.
+    if ((name === "/model" || name === "/models") && !parts[1]) return openModelPicker();
     if (name === "/theme") return openThemePicker();
     if (name === "/allow") {
       const argument = (parts[1] || "on").toLowerCase();
@@ -1665,15 +1783,17 @@ async function runTUI({
           state.streaming.reasoning += chunk;
           scheduleRender();
         },
-        onToolStart: ({ name, args, label, change, fromMcp }) => {
+        onToolStart: ({ id, name, args, label, change, fromMcp, subagent }) => {
           finishStreaming();
           state.messages.push({
             role: "tool",
             tool: {
+              id,
               name,
               args,
               label,
               change,
+              subagent,
               meta: toolMeta(name, fromMcp ? mcp : null),
               status: "running",
               startedAt: Date.now(),
@@ -1682,10 +1802,34 @@ async function runTUI({
           state.scroll = 0;
           render();
         },
-        onToolResult: ({ name, output, change, ok, skipped, summary, ms }) => {
+        onRetry: (info) => {
+          state.retry = { ...info, endsAt: Date.now() + info.delay };
+          scheduleRender();
+        },
+        onSubagentEvent: (event) => {
+          const card = [...state.messages].reverse().find((message) => {
+            if (message.role !== "tool" || !message.tool?.id) return false;
+            return message.tool.id === event.id;
+          });
+          if (!card) return;
+          const prefix = `subagente ${event.index}/${event.total}`;
+          if (event.phase === "start") card.tool.summary = `${prefix}: ${event.objective}`;
+          else if (event.phase === "tool") card.tool.summary = `${prefix}: ${event.tool} · ${event.text || ""}`;
+          else if (event.phase === "tool-done") card.tool.summary = `${prefix}: ${event.tool} ${event.ok ? "ok" : "falhou"}`;
+          else if (event.phase === "done")
+            card.tool.summary = `${prefix} ${event.ok ? "concluído" : "falhou"} em ${event.ms}ms`;
+          state.scroll = 0;
+          scheduleRender();
+        },
+        onToolResult: ({ id, name, output, change, ok, skipped, summary, ms }) => {
           const card = [...state.messages]
             .reverse()
-            .find((message) => message.role === "tool" && message.tool?.name === name && message.tool.status === "running");
+            .find(
+              (message) =>
+                message.role === "tool" &&
+                message.tool.status === "running" &&
+                (id ? message.tool.id === id : message.tool.name === name)
+            );
           if (card) {
             card.tool.status = "done";
             card.tool.ok = ok;
@@ -1742,8 +1886,10 @@ async function runTUI({
         error: true,
       });
     }
+    state.retry = null;
     state.tokens = estimateTokens(state);
     state.scroll = 0;
+    persist();
     render();
   }
 
@@ -1873,12 +2019,12 @@ async function runTUI({
     if (!state.picker) return;
     const index = overlay.hit.start + offset;
     if (!state.picker.items[index]) return;
-    state.picker.index = index;
-
-    if (state.picker.kind === "theme") {
+    state.picker.index = index;    if (state.picker.kind === "theme") {
       previewTheme(index);
       return applyTheme();
     }
+    if (state.picker.kind === "chat") return resumeChat(state.picker.items[index]?.id);
+
     return selectModel();
   }
 
@@ -1970,7 +2116,11 @@ async function runTUI({
         if (themePicker) previewTheme(picker.index);
         return render();
       }
-      if (key.name === "return") return themePicker ? applyTheme() : selectModel();
+      if (key.name === "return") {
+        if (themePicker) return applyTheme();
+        if (picker.kind === "chat") return resumeChat(picker.items[picker.index]?.id);
+        return selectModel();
+      }
       if (key.name === "escape") {
         if (themePicker) return cancelTheme();
         state.picker = null;
@@ -2077,14 +2227,27 @@ async function runTUI({
     if (spinner) clearInterval(spinner);
     if (renderTimer) clearTimeout(renderTimer);
     if (escTimer) clearTimeout(escTimer);
+    if (saveTimer) clearTimeout(saveTimer);
     stdin.removeListener("data", onData);
     stdout.removeListener("resize", onResize);
     try {
       stdin.setRawMode(false);
     } catch {}
+    // Fechou no meio da conversa: guarda e mostra como voltar para ela.
+    const hasChat = state.messages.some(
+      (message) => message.role === "user" || message.role === "assistant"
+    );
+    if (hasChat) saveNow();
     mcp.close();
     leaveScreen();
     write("\n");
+    if (hasChat) {
+      write(
+        `${chalk.cyan("  Retome esta conversa:")} ${chalk.bold(
+          `kafox --resume ${state.sessionId}`
+        )}\n\n`
+      );
+    }
     process.exit(0);
   }
 
@@ -2103,7 +2266,14 @@ async function runTUI({
   stdout.on("resize", onResize);
 
   await refreshAccount();
+  if (resumeMissing) {
+    state.modal = {
+      title: "Resume",
+      text: `Nao achei a conversa "${resumeMissing}".\nVeja as salvas em ${sessions.chatsDir()}.`,
+    };
+  }
   render();
+  if (resumePick) openChatPicker();
   connectMcp().catch(() => {});
 
   spinner = setInterval(() => {