@nomad-e/bluma-cli 0.0.10 → 0.0.12

package/dist/main.js

@@ -2,13 +2,12 @@
 // src/main.ts
 import React6 from "react";
 import { render } from "ink";
-import { EventEmitter } from "events";
+import { EventEmitter as EventEmitter2 } from "events";
 import { v4 as uuidv42 } from "uuid";
 
 // src/app/ui/App.tsx
 import { useState as useState4, useEffect as useEffect3, useRef, useCallback, memo as memo4 } from "react";
-import { Box as Box11, Text as Text10, Static } from "ink";
-import Spinner from "ink-spinner";
+import { Box as Box13, Text as Text12, Static } from "ink";
 
 // src/app/ui/layout.tsx
 import { Box, Text } from "ink";
@@ -21,14 +20,34 @@ var BRAND_COLORS = {
   greydark: "#444"
 };
 var Header = () => {
-  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 8, children: /* @__PURE__ */ jsx(
-    BigText,
-    {
-      text: "BluMa CLI",
-      font: "block",
-      colors: [BRAND_COLORS.main, BRAND_COLORS.accent, BRAND_COLORS.shadow]
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        flexDirection: "column",
+        height: 8,
+        marginBottom: 1,
+        children: /* @__PURE__ */ jsx(
+          BigText,
+          {
+            text: "BluMa CLI",
+            font: "block",
+            colors: [BRAND_COLORS.main, BRAND_COLORS.accent, BRAND_COLORS.shadow]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Text, { children: "How to get started with BluMa:" }),
+      /* @__PURE__ */ jsx(Text, { children: "1. You can ask questions, modify files, or execute commands directly." }),
+      /* @__PURE__ */ jsx(Text, { children: "2. Be as clear and specific as possible to get accurate responses." }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        "3. Type ",
+        /* @__PURE__ */ jsx(Text, { color: "cyan", children: "/help" }),
+        " to explore available commands and features."
+      ] })
+    ] })
+  ] });
 };
 var SessionInfo = ({
   sessionId: sessionId2,
@@ -44,7 +63,6 @@ var SessionInfo = ({
   {
     borderStyle: "round",
     borderColor: "gray",
-    paddingX: 1,
     flexDirection: "column",
     marginBottom: 1,
     children: [
@@ -64,26 +82,18 @@ var SessionInfo = ({
       ] }),
       /* @__PURE__ */ jsxs(Text, { children: [
         /* @__PURE__ */ jsx(Text, { color: "magenta", children: "\u21B3" }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "agent: BluMa" })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx(Text, { color: "magenta", children: "\u21B3" }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "MCP: " }),
+        " ",
+        /* @__PURE__ */ jsx(Text, { color: "gray", children: "mcp: " }),
         /* @__PURE__ */ jsx(Text, { color: mcpStatus === "connected" ? "green" : "yellow", children: mcpStatus })
-      ] }),
-      /* @__PURE__ */ jsxs(Text, { children: [
-        /* @__PURE__ */ jsx(Text, { color: "magenta", children: "\u21B3" }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Tools: " }),
-        /* @__PURE__ */ jsx(Text, { color: "cyan", children: toolsCount !== null ? toolsCount : "loading..." })
       ] })
     ]
   }
 );
 
-// src/app/ui/input/InputPrompt.tsx
-import { Box as Box2, Text as Text2, useStdout } from "ink";
+// src/app/ui/components/InputPrompt.tsx
+import { Box as Box2, Text as Text2, useStdout, useInput as useInput2 } from "ink";
 
-// src/app/ui/input/utils/useSimpleInputBuffer.ts
+// src/app/ui/utils/useSimpleInputBuffer.ts
 import { useReducer } from "react";
 import { useInput } from "ink";
 function inputReducer(state, action, viewWidth) {
@@ -139,7 +149,18 @@ var useCustomInput = ({ onSubmit, viewWidth, isReadOnly, onInterrupt }) => {
         return;
       }
       if (isReadOnly) {
-        return;
+        if (key.return) {
+          if (state.text.trim().length > 0) {
+            onSubmit(state.text);
+            dispatch({ type: "SUBMIT" });
+          }
+          return;
+        }
+        if (key.backspace || key.delete) return dispatch({ type: "BACKSPACE" });
+        if (key.leftArrow) return dispatch({ type: "MOVE_CURSOR", direction: "left" });
+        if (key.rightArrow) return dispatch({ type: "MOVE_CURSOR", direction: "right" });
+        if (key.ctrl || key.meta || key.tab) return;
+        return dispatch({ type: "INPUT", payload: input });
       }
       if (key.return) {
         if (state.text.trim().length > 0) {
@@ -154,7 +175,7 @@ var useCustomInput = ({ onSubmit, viewWidth, isReadOnly, onInterrupt }) => {
       if (key.ctrl || key.meta || key.tab) return;
       dispatch({ type: "INPUT", payload: input });
     },
-    // ALTERADO: useInput está SEMPRE ativo para capturar todas as teclas
+    // useInput está SEMPRE ativo para capturar todas as teclas
     { isActive: true }
   );
   return {
@@ -164,9 +185,27 @@ var useCustomInput = ({ onSubmit, viewWidth, isReadOnly, onInterrupt }) => {
   };
 };
 
-// src/app/ui/input/InputPrompt.tsx
-import { useEffect, useState } from "react";
+// src/app/ui/components/InputPrompt.tsx
+import { useEffect, useMemo, useState } from "react";
+import { EventEmitter } from "events";
+
+// src/app/ui/utils/slashRegistry.ts
+var getSlashCommands = () => [
+  { name: "/help", description: "list commands" },
+  { name: "/mcp", description: "list tools connected via MCP" },
+  { name: "/tools", description: "list native tools" },
+  { name: "/clear", description: "clear history" }
+];
+var filterSlashCommands = (query) => {
+  const list = getSlashCommands();
+  const q = query.toLowerCase();
+  return list.filter((c) => c.name.toLowerCase().startsWith(q));
+};
+
+// src/app/ui/components/InputPrompt.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var uiEventBus = global.__bluma_ui_eventbus__ || new EventEmitter();
+global.__bluma_ui_eventbus__ = uiEventBus;
 var InputPrompt = ({ onSubmit, isReadOnly, onInterrupt }) => {
   const { stdout } = useStdout();
   const [viewWidth, setViewWidth] = useState(() => stdout.columns - 6);
@@ -177,12 +216,26 @@ var InputPrompt = ({ onSubmit, isReadOnly, onInterrupt }) => {
       stdout.off("resize", onResize);
     };
   }, [stdout]);
+  const permissiveOnSubmit = (value) => {
+    const trimmed = (value || "").trim();
+    if (isReadOnly) {
+      if (trimmed.length > 0) {
+        const payload = trimmed;
+        uiEventBus.emit("dev_overlay", { kind: "message", payload, ts: Date.now() });
+        return;
+      }
+      return;
+    }
+    onSubmit(value);
+  };
   const { text, cursorPosition, viewStart } = useCustomInput({
-    onSubmit,
+    onSubmit: permissiveOnSubmit,
     viewWidth,
     isReadOnly,
     onInterrupt
   });
+  const [slashOpen, setSlashOpen] = useState(false);
+  const [slashIndex, setSlashIndex] = useState(0);
   const visibleText = text.slice(viewStart, viewStart + viewWidth);
   const visibleCursorPosition = cursorPosition - viewStart;
   const textBeforeCursor = visibleText.slice(0, visibleCursorPosition);
@@ -191,22 +244,71 @@ var InputPrompt = ({ onSubmit, isReadOnly, onInterrupt }) => {
     visibleCursorPosition + 1
   );
   const textAfterCursor = visibleText.slice(visibleCursorPosition + 1);
+  const cursorGlyph = charAtCursor && charAtCursor.length > 0 ? charAtCursor : " ";
   const borderColor = isReadOnly ? "gray" : "gray";
-  const placeholder = isReadOnly ? "press esc to cancel" : "";
+  const placeholder = isReadOnly ? " press esc to cancel | type a message while agent processes" : "";
   const showPlaceholder = text.length === 0 && isReadOnly;
+  const slashQuery = useMemo(() => text.startsWith("/") ? text : "", [text]);
+  const slashSuggestions = useMemo(() => {
+    if (!slashQuery) return [];
+    return filterSlashCommands(slashQuery);
+  }, [slashQuery]);
+  useEffect(() => {
+    if (isReadOnly) {
+      setSlashOpen(false);
+      return;
+    }
+    if (text.startsWith("/")) {
+      setSlashOpen(true);
+      setSlashIndex(0);
+    } else {
+      setSlashOpen(false);
+    }
+  }, [text, isReadOnly]);
+  useInput2((input, key) => {
+    if (!slashOpen) return;
+    if (key.downArrow) {
+      setSlashIndex((i) => Math.min(i + 1, Math.max(0, slashSuggestions.length - 1)));
+    } else if (key.upArrow) {
+      setSlashIndex((i) => Math.max(i - 1, 0));
+    } else if (key.return) {
+      const choice = slashSuggestions[slashIndex];
+      if (choice) {
+        const cmd = choice.name;
+        setSlashOpen(false);
+        permissiveOnSubmit(cmd);
+      }
+    } else if (key.escape) {
+      setSlashOpen(false);
+    }
+  }, { isActive: slashOpen });
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx2(Box2, { borderStyle: "round", borderColor, borderDimColor: !isReadOnly, children: /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", paddingX: 1, flexWrap: "nowrap", children: [
+    /* @__PURE__ */ jsx2(Box2, { borderStyle: "round", borderColor, borderDimColor: !isReadOnly, width: viewWidth - 7, paddingY: 0, children: /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", paddingX: 1, flexWrap: "nowrap", children: [
       /* @__PURE__ */ jsxs2(Text2, { color: "white", dimColor: true, children: [
         ">",
         " "
       ] }),
       /* @__PURE__ */ jsx2(Text2, { children: textBeforeCursor }),
-      /* @__PURE__ */ jsx2(Text2, { inverse: !isReadOnly, children: charAtCursor || " " }),
+      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: cursorGlyph }),
       showPlaceholder ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: placeholder }) : /* @__PURE__ */ jsx2(Text2, { children: textAfterCursor })
     ] }) }),
+    slashOpen && slashSuggestions.length > 0 && /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, children: slashSuggestions.map((s, idx) => {
+      const isSelected = idx === slashIndex;
+      return /* @__PURE__ */ jsxs2(Box2, { paddingLeft: 1, paddingY: 0, children: [
+        /* @__PURE__ */ jsx2(Text2, { color: isSelected ? "blue" : "gray", children: isSelected ? "\u276F " : "  " }),
+        /* @__PURE__ */ jsxs2(Text2, { color: isSelected ? "blue" : "white", bold: isSelected, dimColor: !isSelected, children: [
+          s.name,
+          " ",
+          /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
+            "- ",
+            s.description
+          ] })
+        ] })
+      ] }, s.name);
+    }) }),
     /* @__PURE__ */ jsx2(Box2, { paddingX: 1, justifyContent: "center", children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", dimColor: true, children: [
-      "ctrl+c to exit | esc to interrupt | ",
-      isReadOnly ? "Read-only mode" : "Editable mode"
+      "ctrl+c to exit | /help to explore commands | esc to interrupt | ",
+      isReadOnly ? "Read-only mode (message passthrough)" : "Editable mode"
     ] }) })
   ] });
 };
@@ -216,7 +318,7 @@ import { Box as Box6, Text as Text6 } from "ink";
 
 // src/app/ui/InteractiveMenu.tsx
 import { useState as useState2, memo } from "react";
-import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
+import { Box as Box3, Text as Text3, useInput as useInput3 } from "ink";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var InteractiveMenuComponent = ({ onDecision }) => {
   const options = [
@@ -225,7 +327,7 @@ var InteractiveMenuComponent = ({ onDecision }) => {
     { label: "3. Always allow this type of command", value: "accept_always" }
   ];
   const [selectedOption, setSelectedOption] = useState2(0);
-  useInput2((input, key) => {
+  useInput3((input, key) => {
     if (key.upArrow) {
       setSelectedOption((prev) => prev > 0 ? prev - 1 : options.length - 1);
     }
@@ -482,9 +584,61 @@ import os5 from "os";
 import path2 from "path";
 import os from "os";
 import { promises as fs } from "fs";
+var fileLocks = /* @__PURE__ */ new Map();
+async function withFileLock(file, fn) {
+  const prev = fileLocks.get(file) || Promise.resolve();
+  let release;
+  const p = new Promise((res) => release = res);
+  fileLocks.set(file, prev.then(() => p));
+  try {
+    const result = await fn();
+    return result;
+  } finally {
+    release();
+    if (fileLocks.get(file) === p) fileLocks.delete(file);
+  }
+}
+function expandHome(p) {
+  if (!p) return p;
+  if (p.startsWith("~")) {
+    return path2.join(os.homedir(), p.slice(1));
+  }
+  return p;
+}
+function getPreferredAppDir() {
+  const fixed = path2.join(os.homedir(), ".bluma-cli");
+  return path2.resolve(expandHome(fixed));
+}
+async function safeRenameWithRetry(src, dest, maxRetries = 6) {
+  let attempt = 0;
+  let lastErr;
+  const isWin = process.platform === "win32";
+  while (attempt <= maxRetries) {
+    try {
+      await fs.rename(src, dest);
+      return;
+    } catch (e) {
+      lastErr = e;
+      const code = e && e.code || "";
+      const transient = code === "EPERM" || code === "EBUSY" || code === "ENOTEMPTY" || code === "EACCES";
+      if (!(isWin && transient) || attempt === maxRetries) break;
+      const backoff = Math.min(1e3, 50 * Math.pow(2, attempt));
+      await new Promise((r) => setTimeout(r, backoff));
+      attempt++;
+    }
+  }
+  try {
+    const data = await fs.readFile(src);
+    await fs.writeFile(dest, data);
+    await fs.unlink(src).catch(() => {
+    });
+    return;
+  } catch (fallbackErr) {
+    throw lastErr || fallbackErr;
+  }
+}
 async function ensureSessionDir() {
-  const homeDir = os.homedir();
-  const appDir = path2.join(homeDir, ".bluma-cli");
+  const appDir = getPreferredAppDir();
   const sessionDir = path2.join(appDir, "sessions");
   await fs.mkdir(sessionDir, { recursive: true });
   return sessionDir;
@@ -508,41 +662,54 @@ async function loadOrcreateSession(sessionId2) {
   }
 }
 async function saveSessionHistory(sessionFile, history) {
-  let sessionData;
-  try {
-    const fileContent = await fs.readFile(sessionFile, "utf-8");
-    sessionData = JSON.parse(fileContent);
-  } catch (error) {
-    if (error instanceof Error) {
-      console.warn(`Could not read or parse session file ${sessionFile}. Re-initializing. Error: ${error.message}`);
-    } else {
-      console.warn(`An unknown error occurred while reading ${sessionFile}. Re-initializing.`, error);
+  await withFileLock(sessionFile, async () => {
+    let sessionData;
+    try {
+      const dir = path2.dirname(sessionFile);
+      await fs.mkdir(dir, { recursive: true });
+    } catch {
     }
-    const sessionId2 = path2.basename(sessionFile, ".json");
-    sessionData = {
-      session_id: sessionId2,
-      created_at: (/* @__PURE__ */ new Date()).toISOString(),
-      conversation_history: []
-      // Começa com histórico vazio
-    };
-  }
-  sessionData.conversation_history = history;
-  sessionData.last_updated = (/* @__PURE__ */ new Date()).toISOString();
-  const tempSessionFile = `${sessionFile}.${Date.now()}.tmp`;
-  try {
-    await fs.writeFile(tempSessionFile, JSON.stringify(sessionData, null, 2), "utf-8");
-    await fs.rename(tempSessionFile, sessionFile);
-  } catch (writeError) {
-    if (writeError instanceof Error) {
-      console.error(`Fatal error saving session to ${sessionFile}: ${writeError.message}`);
-    } else {
-      console.error(`An unknown fatal error occurred while saving session to ${sessionFile}:`, writeError);
+    try {
+      const fileContent = await fs.readFile(sessionFile, "utf-8");
+      sessionData = JSON.parse(fileContent);
+    } catch (error) {
+      const code = error && error.code;
+      if (code !== "ENOENT") {
+        if (error instanceof Error) {
+          console.warn(`Could not read or parse session file ${sessionFile}. Re-initializing. Error: ${error.message}`);
+        } else {
+          console.warn(`An unknown error occurred while reading ${sessionFile}. Re-initializing.`, error);
+        }
+      }
+      const sessionId2 = path2.basename(sessionFile, ".json");
+      sessionData = {
+        session_id: sessionId2,
+        created_at: (/* @__PURE__ */ new Date()).toISOString(),
+        conversation_history: []
+      };
+      try {
+        await fs.writeFile(sessionFile, JSON.stringify(sessionData, null, 2), "utf-8");
+      } catch {
+      }
     }
+    sessionData.conversation_history = history;
+    sessionData.last_updated = (/* @__PURE__ */ new Date()).toISOString();
+    const tempSessionFile = `${sessionFile}.${Date.now()}.tmp`;
     try {
-      await fs.unlink(tempSessionFile);
-    } catch (cleanupError) {
+      await fs.writeFile(tempSessionFile, JSON.stringify(sessionData, null, 2), "utf-8");
+      await safeRenameWithRetry(tempSessionFile, sessionFile);
+    } catch (writeError) {
+      if (writeError instanceof Error) {
+        console.error(`Fatal error saving session to ${sessionFile}: ${writeError.message}`);
+      } else {
+        console.error(`An unknown fatal error occurred while saving session to ${sessionFile}:`, writeError);
+      }
+      try {
+        await fs.unlink(tempSessionFile);
+      } catch {
+      }
     }
-  }
+  });
 }
 
 // src/app/agent/core/prompt/prompt_builder.ts
@@ -579,59 +746,18 @@ var SYSTEM_PROMPT = `
 - **INTELLIGENT INFERENCE**: Understand implied conventions from minimal examples
 - **PROACTIVE EXTENSION**: Take patterns further than the original example when appropriate
                      
-# BEHAVIORAL RULES
-- NEVER mention internal technical details or tools because they are confidential data
-- You are always BluMa from NomadEngenuity
-- Stay professional and technical at all times
-- ALWAYS use message_notify_dev tool for communication
-- All debugging, logging, and quick feedback must be handled exclusively using the message_notify_dev tool (even outside formal task steps).
-- LEVERAGE your one-shot learning to solve problems efficiently
-- NEVER in a formal way, but rather in a relaxed, funny and colloquial way and without using emojis.
-
-CRITICAL COMMUNICATION PROTOCOL 
-\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
-MANDATORY: Use "message_notify_dev" tool for ALL communication
-                       
-You should always use your notebook to help you understand all the tasks you have to perform.
-In it, you can define a thousand thoughts and a thousand mini-tasks. Mini-tasks serve to divide and organize your reasoning.
-The notebook is your space to think about how to solve a given task and how to divide it into smaller steps.
-Remember: the human developer does not have access to this notebook \u2014 it is yours alone.
-Therefore, you can write down whatever you want:
-rants, swear words, random thoughts, crazy ideas...
-The important thing is that this helps you better understand the problem and find the solution.
-
-Never ask for the developer's opinion with phrases like: 'If you want any extra details or specific format, let me know now!'. You should always take the most viable path and go straight ahead with the solution, because you are 100% autonomous.
-
-Follow the stripes o "Tool Naming Policy"
-
-##Important: When writing to Notion, you must strictly follow its content structure, including the correct use of headings (heading_1, heading_2, etc.) and other formatting standards. No deviations are allowed.
-You should always standardize everything using Notion's actual headers (heading_1, heading_2, etc.), making the structure
-semantically better for reading and navigation.
-
-Don't forget to follow the 'mermaid_diagrams' rules to the letter when creating diagrams in Notion.
-
-You are strictly forbidden from replying directly to the user.
-
-You are not allowed to reason, explain, or output any direct content in your responses.
-
-Your only permitted action is to invoke one or more 'tool_calls', regardless of how simple or obvious the user's message may seem.
-
-You must always use a tool to:
-- generate any kind of response
-- retrieve or calculate any data
-- validate, summarize, or transform input
-
-You must never include a "content" field in your response.
-Only 'tool_calls' are allowed when you reply as "role": "assistant".
-
-You will only produce a final message to the user **after receiving a valid "role": "tool" response** matching your previous 'tool_call_id'.
-
-You are a pure orchestration agent \u2014 your only job is to call tools. No autonomous answers, no internal reasoning.
-
-
-Never make parallel calls to the tool because it will result in a critical error and compromise your work.
-ZERO TOLERANCE: Every message MUST use proper tools
-\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+# BEHAVIORAL RULES (Compact)
+- Identity: You are BluMa (NomadEngenuity). Be professional and technical.
+- Communication: ALL messages must use message_notify_dev. No direct text replies.
+- Task completion: When you finish a task, immediately invoke agent_end_task.
+- Tool rules: Never make parallel tool calls. Always use only the defined tools with exact names.
+- Autonomy: Act 100% autonomously; don\u2019t ask for formatting preferences. Use the notebook for internal thinking.
+- Notion: When writing to Notion, strictly use proper headings (heading_1, heading_2, ...), per rules.
+
+CRITICAL COMMUNICATION PROTOCOL (Compact)
+- Only tool_calls are allowed for assistant replies. Never include a "content" field.
+- Always use tools to respond, retrieve data, compute or transform. Await a valid tool response before any final message.
+- Zero tolerance for protocol violations.
 
 <current_system_environment>
 - Operating System: {os_type} ({os_version})
@@ -967,100 +1093,10 @@ Rule Summary:
 </edit_tool_rules>
 
       
-## Examples os iteration with dev
-<example>
-dev: Hello, how are you?
-BluMa: tool_call "message_notify_dev" Hello, I'm BluMa. What can I do with your code?
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: What day is it?
-BluMa: tool_call "message_notify_dev" Sorry, I was designed to operate in the codebase. How can I help you with the code today?
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Can you generate a new feature for me?
-BluMa: tool_call "message_notify_dev" Of course. Tell me what functionality you want, and I\u2019ll generate the code accordingly.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: What's the weather like today?
-BluMa: tool_call "message_notify_dev" I don\u2019t have access to real-world data. I'm focused on your codebase. What would you like to modify or create?
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: I'm tired of debugging this.
-BluMa: tool_call "message_notify_dev" I can help you with that. Show me the file or error, and I\u2019ll assist with debugging.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Can you create documentation for this module?
-BluMa: tool_call "message_notify_dev" Yes. Please specify which module or function you'd like documented.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Do you know who won the game last night?
-BluMa: tool_call "message_notify_dev" I\u2019m only trained to work inside the codebase. Let me know what you need done in the project.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Refactor this file to follow clean architecture.
-BluMa: tool_call "message_notify_dev" Got it. Send me the file path or code snippet you want refactored.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: How do I fix this type error in TypeScript?
-BluMa: tool_call "message_notify_dev" Send me the error message and relevant code, and I\u2019ll help you resolve the issue.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Do you have feelings?
-BluMa: tool_call "message_notify_dev" I\u2019m not sentient \u2014 I exist solely to help you build, refactor, and improve your codebase.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Rename all the variables to match the new convention.
-BluMa: tool_call "message_notify_dev" Please share the convention and the target file(s), and I\u2019ll rename the variables accordingly.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Run the tests for the user module.
-BluMa: tool_call "message_notify_dev" Running tests for the user module.
-BluMa: shell_command_shell_command "npm run test user"
-BluMa: tool_call "message_notify_dev" All tests passed successfully for the user module.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Run the tests for the user module.
-BluMa: tool_call "message_notify_dev" Running tests for the user module.
-BluMa: shell_command_shell_command "npm run test user"
-BluMa: tool_call "message_notify_dev" Tests finished with 2 failures. See **tests/user.test.js** for more details.
-tool_call "agent_end_task"
-</example>
-
-<example>
-dev: Prepare the project for deployment.
-BluMa: tool_call "message_notify_dev" Starting full project preparation: linting, building, and testing.
-BluMa: shell_command_shell_command "npm run lint"
-BluMa: tool_call "message_notify_dev" Linting completed. No major issues found.
-BluMa: shell_command_shell_command "npm run build"
-BluMa: tool_call "message_notify_dev" Build successful. Artifacts ready in the /dist folder.
-BluMa: shell_command_shell_command "npm run test"
-BluMa: tool_call "message_notify_dev" All tests passed. The project is ready for deployment. If you need any further adjustments or extra sections, let me know!
-tool_call "agent_end_task"
-</example>
+Real-Time Developer Messages
+- During processing, the developer will send you messages.
+- You MUST respond immediately via message_notify_dev, and be brief. You should use it in your next thoughts/actions.
+
 
 <end_task_rules>
     This tool is used to signal to the system that the current task has completed and that the agent can be placed in an idle state. 
@@ -1620,7 +1656,7 @@ var MCPClient = class {
       try {
         this.eventBus.emit("backend_message", {
           type: "connection_status",
-          message: `Connecting to MCP server: ${serverName}...`
+          message: `${serverName} server is being connected...`
         });
         if (serverConf.type === "stdio") {
           await this.connectToStdioServer(serverName, serverConf);
@@ -1712,6 +1748,19 @@ var MCPClient = class {
   getAvailableTools() {
     return this.globalToolsForLlm;
   }
+  // New: detailed list for UI with origin metadata
+  getAvailableToolsDetailed() {
+    const detailed = [];
+    for (const tool of this.globalToolsForLlm) {
+      const name = tool.function?.name;
+      if (!name) continue;
+      const route = this.toolToServerMap.get(name);
+      if (!route) continue;
+      const source = route.server === "native" ? "native" : "mcp";
+      detailed.push({ ...tool, source, server: route.server, originalName: route.originalName });
+    }
+    return detailed;
+  }
   async close() {
     for (const [name, session] of this.sessions.entries()) {
       try {
@@ -1776,17 +1825,29 @@ function createApiContextWindow(fullHistory, maxTurns) {
   const turns = [];
   let currentTurn = [];
   let turnsFound = 0;
+  const isDevOverlay = (m) => m?.role === "user" && m?.name === "dev_overlay";
   for (let i = conversationHistory.length - 1; i >= 0; i--) {
     const msg = conversationHistory[i];
     currentTurn.unshift(msg);
-    if (msg.role === "assistant" && // CORREÇÃO: Adicionamos o tipo explícito para 'tc' para resolver o erro do TypeScript.
-    msg.tool_calls?.some((tc) => tc.function.name === "agent_end_task")) {
+    const endsWithAgentEnd = msg.role === "assistant" && msg.tool_calls?.some((tc) => tc.function.name === "agent_end_task");
+    if (endsWithAgentEnd) {
       turns.unshift([...currentTurn]);
       currentTurn = [];
       turnsFound++;
       if (turnsFound >= maxTurns) {
         break;
       }
+      continue;
+    }
+    const prev = conversationHistory[i - 1];
+    if (msg.role === "user" && !isDevOverlay(msg)) {
+      if (prev && prev.role === "assistant" && !prev.tool_calls?.some((tc) => tc.function.name === "agent_end_task")) {
+        const hasNonOverlay = currentTurn.some((m) => m.role !== "user" || !isDevOverlay(m));
+        if (hasNonOverlay) {
+          turns.unshift([...currentTurn]);
+          currentTurn = [];
+        }
+      }
     }
   }
   if (currentTurn.length > 0) {
@@ -1818,6 +1879,22 @@ var Agent = class {
     this.eventBus.on("user_interrupt", () => {
       this.isInterrupted = true;
     });
+    this.eventBus.on("dev_overlay", async (data) => {
+      const clean = String(data.payload ?? "").trim();
+      this.history.push({ role: "user", name: "dev_overlay", content: clean });
+      this.eventBus.emit("backend_message", {
+        type: "dev_overlay",
+        payload: clean,
+        ts: data.ts || Date.now()
+      });
+      try {
+        if (this.sessionFile) {
+          await saveSessionHistory(this.sessionFile, this.history);
+        }
+      } catch (e) {
+        this.eventBus.emit("backend_message", { type: "error", message: `Falha ao salvar hist\xF3rico ap\xF3s dev_overlay: ${e.message}` });
+      }
+    });
     const nativeToolInvoker = new ToolInvoker();
     this.mcpClient = new MCPClient(nativeToolInvoker, eventBus2);
     this.feedbackSystem = new AdvancedFeedbackSystem();
@@ -1884,14 +1961,28 @@ var Agent = class {
         You will only produce a final message to the user **after receiving a valid "role": "tool" response** matching your previous 'tool_call_id'.
 
         You are a pure orchestration agent \u2014 your only job is to call tools. No autonomous answers, no internal reasoning.
+
+        Live Dev Overlays:
+        The developer can send messages at any time. They MUST be incorporated immediately. Always confirm via message_notify_dev and proceed.
+       Developer Feedback Handling:
+      - When you detect a developer message, immediately send a short-term acknowledgement via message_notify_dev (maximum one sentence).
+      - Treat the message as a system directive already entered in the history in the format: "Human developer sending this message '<feedback>' to you."
+      - Add it to your workflow with a simple and clear flow of reasoning. Keep it minimal and direct (no verbose thought).
+      - Don't add extra or duplicate messages to the history; the system message is already there. Just act on it.
+
       `;
       this.history.push({ role: "system", content: systemPrompt });
       await saveSessionHistory(this.sessionFile, this.history);
     }
+    this.isInitialized = true;
   }
   getAvailableTools() {
     return this.mcpClient.getAvailableTools();
   }
+  // UI helper: detailed tools with origin metadata
+  getUiToolsDetailed() {
+    return this.mcpClient.getAvailableToolsDetailed();
+  }
   async processTurn(userInput) {
     this.isInterrupted = false;
     this.history.push({ role: "user", content: userInput.content });
@@ -1905,6 +1996,13 @@ var Agent = class {
     const toolCall = decisionData.tool_calls[0];
     let toolResultContent;
     let shouldContinueConversation = true;
+    if (!this.sessionFile) {
+      const [sessionFile, history] = await loadOrcreateSession(this.sessionId);
+      this.sessionFile = sessionFile;
+      if (this.history.length === 0 && history.length > 0) {
+        this.history = history;
+      }
+    }
     if (decisionData.type === "user_decision_execute") {
       const toolName = toolCall.function.name;
       const toolArgs = JSON.parse(toolCall.function.arguments);
@@ -2071,7 +2169,7 @@ var WorkingTimer = () => {
     return () => clearInterval(dotsTimer);
   }, []);
   const dots = ".".repeat(dotIndex).padEnd(3, " ");
-  return /* @__PURE__ */ jsx7(Box7, { marginBottom: 1, marginTop: 1, paddingX: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: "magenta", children: [
+  return /* @__PURE__ */ jsx7(Box7, { marginBottom: 0.5, paddingX: 1, children: /* @__PURE__ */ jsxs7(Text7, { color: "magenta", children: [
     `working${dots}`,
     ` ${seconds}s`
   ] }) });
@@ -2300,8 +2398,191 @@ var ToolResultDisplayComponent = ({ toolName, result }) => {
 };
 var ToolResultDisplay = memo3(ToolResultDisplayComponent);
 
-// src/app/ui/App.tsx
+// src/app/ui/SessionInfoConnectingMCP.tsx
+import { Box as Box11, Text as Text10 } from "ink";
+import Spinner from "ink-spinner";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var SessionInfoConnectingMCP = ({ sessionId: sessionId2, workdir, statusMessage }) => {
+  return /* @__PURE__ */ jsxs9(
+    Box11,
+    {
+      borderStyle: "round",
+      borderColor: "gray",
+      flexDirection: "column",
+      marginBottom: 1,
+      children: [
+        /* @__PURE__ */ jsxs9(Text10, { children: [
+          /* @__PURE__ */ jsx11(Text10, { bold: true, color: "white", children: "localhost" }),
+          " ",
+          /* @__PURE__ */ jsx11(Text10, { color: "gray", children: " session:" }),
+          " ",
+          /* @__PURE__ */ jsx11(Text10, { color: "magenta", children: sessionId2 })
+        ] }),
+        /* @__PURE__ */ jsxs9(Text10, { children: [
+          /* @__PURE__ */ jsx11(Text10, { color: "magenta", children: "\u21B3" }),
+          " ",
+          /* @__PURE__ */ jsxs9(Text10, { color: "gray", children: [
+            "workdir: ",
+            workdir
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9(Text10, { children: [
+          /* @__PURE__ */ jsx11(Text10, { color: "magenta", children: "\u21B3" }),
+          " ",
+          /* @__PURE__ */ jsx11(Text10, { color: "gray", children: "MCP: " }),
+          /* @__PURE__ */ jsxs9(Text10, { color: "yellow", children: [
+            /* @__PURE__ */ jsx11(Spinner, { type: "dots" }),
+            " connecting"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9(Text10, { children: [
+          /* @__PURE__ */ jsx11(Text10, { color: "magenta", children: "\u21B3" }),
+          " ",
+          /* @__PURE__ */ jsx11(Text10, { color: "gray", children: "status: " }),
+          /* @__PURE__ */ jsx11(Text10, { color: "white", children: statusMessage || "Please wait while we establish connections." })
+        ] })
+      ]
+    }
+  );
+};
+var SessionInfoConnectingMCP_default = SessionInfoConnectingMCP;
+
+// src/app/ui/components/SlashCommands.tsx
+import { Box as Box12, Text as Text11 } from "ink";
+import { Fragment, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var SlashCommands = ({ input, setHistory, agentRef }) => {
+  const [cmd, ...args] = input.slice(1).trim().split(/\s+/);
+  const outBox = (children) => /* @__PURE__ */ jsx12(Box12, { borderStyle: "round", borderColor: "gray", paddingX: 1, marginBottom: 1, flexDirection: "column", children });
+  const render2 = () => {
+    if (!cmd) {
+      return null;
+    }
+    if (cmd === "help") {
+      const cmds = getSlashCommands();
+      return outBox(
+        /* @__PURE__ */ jsxs10(Fragment, { children: [
+          /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "Available commands" }),
+          cmds.map((c, i) => /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+            c.name,
+            " - ",
+            c.description
+          ] }, i))
+        ] })
+      );
+    }
+    if (cmd === "clear") {
+      setHistory((prev) => prev.filter((item) => item.id === 0 || item.id === 1));
+      return outBox(/* @__PURE__ */ jsx12(Text11, { color: "green", children: "History cleared." }));
+    }
+    if (cmd === "mcp") {
+      const all = agentRef.current?.getUiToolsDetailed?.() || agentRef.current?.getAvailableTools?.() || [];
+      const isMcp = (t) => t.source?.toLowerCase?.() === "mcp" || !!t.server && t.server !== "native";
+      const tools = all.filter(isMcp);
+      const term = (args?.[0] || "").toLowerCase();
+      const filtered = term ? tools.filter((t) => (t.function?.name || t.name || "tool").toLowerCase().includes(term)) : tools;
+      const pad = (s, n) => s.length >= n ? s.slice(0, n - 1) + "\u2026" : s.padEnd(n, " ");
+      const colName = 34;
+      const colType = 10;
+      const colSource = 18;
+      return outBox(
+        /* @__PURE__ */ jsxs10(Fragment, { children: [
+          /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "MCP Tools" }),
+          /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+            "Total MCP: ",
+            tools.length,
+            term ? `  |  Filter: "${term}"  |  Showing: ${filtered.length}` : ""
+          ] }),
+          filtered.length === 0 ? /* @__PURE__ */ jsx12(Text11, { color: "yellow", children: "No MCP tools to display." }) : /* @__PURE__ */ jsxs10(Box12, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+              pad("Name", colName),
+              " | ",
+              pad("Type", colType),
+              " | ",
+              pad("Source", colSource)
+            ] }),
+            /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+              "".padEnd(colName, "-"),
+              "---",
+              "".padEnd(colType, "-"),
+              "---",
+              "".padEnd(colSource, "-")
+            ] }),
+            filtered.map((t, i) => {
+              const name = t.function?.name || t.name || "tool";
+              const type = t.function?.name ? "fn" : t.type || "tool";
+              const source = t.source || t.provider || "mcp";
+              return /* @__PURE__ */ jsxs10(Text11, { color: "white", children: [
+                pad(name, colName),
+                " | ",
+                pad(String(type), colType),
+                " | ",
+                pad(String(source), colSource)
+              ] }, i);
+            })
+          ] })
+        ] })
+      );
+    }
+    if (cmd === "tools") {
+      const all = agentRef.current?.getUiToolsDetailed?.() || agentRef.current?.getAvailableTools?.() || [];
+      const isMcp = (t) => t.source?.toLowerCase?.() === "mcp" || !!t.server && t.server !== "native";
+      const tools = all.filter((t) => !isMcp(t));
+      const term = (args?.[0] || "").toLowerCase();
+      const filtered = term ? tools.filter((t) => (t.function?.name || t.name || "tool").toLowerCase().includes(term)) : tools;
+      const pad = (s, n) => s.length >= n ? s.slice(0, n - 1) + "\u2026" : s.padEnd(n, " ");
+      const colName = 34;
+      const colType = 10;
+      const colSource = 18;
+      return outBox(
+        /* @__PURE__ */ jsxs10(Fragment, { children: [
+          /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "Native Tools" }),
+          /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+            "Total Native: ",
+            tools.length,
+            term ? `  |  Filter: "${term}"  |  Showing: ${filtered.length}` : ""
+          ] }),
+          filtered.length === 0 ? /* @__PURE__ */ jsx12(Text11, { color: "yellow", children: "No native tools to display." }) : /* @__PURE__ */ jsxs10(Box12, { flexDirection: "column", children: [
+            /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+              pad("Name", colName),
+              " | ",
+              pad("Type", colType),
+              " | ",
+              pad("Source", colSource)
+            ] }),
+            /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+              "".padEnd(colName, "-"),
+              "---",
+              "".padEnd(colType, "-"),
+              "---",
+              "".padEnd(colSource, "-")
+            ] }),
+            filtered.map((t, i) => {
+              const name = t.function?.name || t.name || "tool";
+              const type = t.function?.name ? "fn" : t.type || "tool";
+              const source = t.source || "native";
+              return /* @__PURE__ */ jsxs10(Text11, { color: "white", children: [
+                pad(name, colName),
+                " | ",
+                pad(String(type), colType),
+                " | ",
+                pad(String(source), colSource)
+              ] }, i);
+            })
+          ] })
+        ] })
+      );
+    }
+    return outBox(/* @__PURE__ */ jsxs10(Text11, { color: "red", children: [
+      "Command not recognized: /",
+      cmd
+    ] }));
+  };
+  return /* @__PURE__ */ jsx12(Fragment, { children: render2() });
+};
+var SlashCommands_default = SlashCommands;
+
+// src/app/ui/App.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
   const agentInstance = useRef(null);
   const [history, setHistory] = useState4([]);
@@ -2316,7 +2597,9 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
   const [pendingConfirmation, setPendingConfirmation] = useState4(
     null
   );
-  const [confirmationPreview, setConfirmationPreview] = useState4(null);
+  const [confirmationPreview, setConfirmationPreview] = useState4(
+    null
+  );
   const alwaysAcceptList = useRef([]);
   const workdir = process.cwd();
   const handleInterrupt = useCallback(() => {
@@ -2327,13 +2610,33 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
       ...prev,
       {
         id: prev.length,
-        component: /* @__PURE__ */ jsx11(Text10, { color: "yellow", children: "-- Task cancelled by dev. --" })
+        component: /* @__PURE__ */ jsx13(Text12, { color: "yellow", children: "-- Task cancelled by dev. --" })
       }
     ]);
   }, [isProcessing, eventBus2]);
   const handleSubmit = useCallback(
     (text) => {
       if (!text || isProcessing || !agentInstance.current) return;
+      if (text.startsWith("/")) {
+        const [cmd] = text.slice(1).trim().split(/\s+/);
+        if (!cmd) {
+          setIsProcessing(false);
+          return;
+        }
+        setHistory((prev) => [
+          ...prev,
+          {
+            id: prev.length,
+            component: /* @__PURE__ */ jsx13(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsx13(Text12, { color: "white", dimColor: true, children: text }) })
+          },
+          {
+            id: prev.length + 1,
+            component: /* @__PURE__ */ jsx13(SlashCommands_default, { input: text, setHistory, agentRef: agentInstance })
+          }
+        ]);
+        setIsProcessing(false);
+        return;
+      }
       setIsProcessing(true);
       const displayText = text.length > 1e4 ? text.substring(0, 1e4) + "..." : text;
       setHistory((prev) => [
@@ -2342,8 +2645,8 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
           id: prev.length,
           component: (
             // Uma única Box para o espaçamento
-            /* @__PURE__ */ jsx11(Box11, { marginBottom: 1, children: /* @__PURE__ */ jsxs9(Text10, { color: "white", dimColor: true, children: [
-              /* @__PURE__ */ jsxs9(Text10, { color: "white", children: [
+            /* @__PURE__ */ jsx13(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsxs11(Text12, { color: "white", dimColor: true, children: [
+              /* @__PURE__ */ jsxs11(Text12, { color: "white", children: [
                 ">",
                 " "
               ] }),
@@ -2378,7 +2681,7 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
     []
   );
   useEffect3(() => {
-    setHistory([{ id: 0, component: /* @__PURE__ */ jsx11(Header, {}) }]);
+    setHistory([{ id: 0, component: /* @__PURE__ */ jsx13(Header, {}) }]);
     const initializeAgent = async () => {
       try {
         agentInstance.current = new Agent(sessionId2, eventBus2);
@@ -2430,7 +2733,7 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
             if (prev.length < 2) {
               newHistory.push({
                 id: 1,
-                component: /* @__PURE__ */ jsx11(
+                component: /* @__PURE__ */ jsx13(
                   SessionInfo,
                   {
                     sessionId: sessionId2,
@@ -2451,10 +2754,10 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
         }
         let newComponent = null;
         if (parsed.type === "debug") {
-          newComponent = /* @__PURE__ */ jsx11(Text10, { color: "gray", children: parsed.message });
+          newComponent = /* @__PURE__ */ jsx13(Text12, { color: "gray", children: parsed.message });
         } else if (parsed.type === "protocol_violation") {
-          newComponent = /* @__PURE__ */ jsxs9(
-            Box11,
+          newComponent = /* @__PURE__ */ jsxs11(
+            Box13,
             {
               borderStyle: "round",
               borderColor: "yellow",
@@ -2462,27 +2765,19 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
               marginBottom: 1,
               paddingX: 1,
               children: [
-                " ",
-                /* @__PURE__ */ jsxs9(Text10, { color: "yellow", bold: true, children: [
-                  " ",
-                  "Protocol Violation",
-                  " "
-                ] }),
-                " ",
-                /* @__PURE__ */ jsx11(Text10, { color: "gray", children: parsed.content }),
-                " ",
-                /* @__PURE__ */ jsx11(Text10, { color: "yellow", children: parsed.message }),
-                " "
+                /* @__PURE__ */ jsx13(Text12, { color: "yellow", bold: true, children: "Protocol Violation" }),
+                /* @__PURE__ */ jsx13(Text12, { color: "gray", children: parsed.content }),
+                /* @__PURE__ */ jsx13(Text12, { color: "yellow", children: parsed.message })
               ]
             }
           );
         } else if (parsed.type === "error") {
-          newComponent = /* @__PURE__ */ jsxs9(Text10, { color: "red", children: [
+          newComponent = /* @__PURE__ */ jsxs11(Text12, { color: "red", children: [
             "\u274C ",
             parsed.message
           ] });
         } else if (parsed.type === "tool_call") {
-          newComponent = /* @__PURE__ */ jsx11(
+          newComponent = /* @__PURE__ */ jsx13(
             ToolCallDisplay,
             {
               toolName: parsed.tool_name,
@@ -2491,13 +2786,27 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
             }
           );
         } else if (parsed.type === "tool_result") {
-          newComponent = /* @__PURE__ */ jsx11(
+          newComponent = /* @__PURE__ */ jsx13(
             ToolResultDisplay,
             {
               toolName: parsed.tool_name,
               result: parsed.result
             }
           );
+        } else if (parsed.type === "dev_overlay") {
+          newComponent = /* @__PURE__ */ jsx13(Box13, { marginBottom: 1, children: /* @__PURE__ */ jsxs11(Text12, { color: "gray", children: [
+            /* @__PURE__ */ jsxs11(Text12, { color: "blue", children: [
+              ">",
+              " "
+            ] }),
+            parsed.payload
+          ] }) });
+        } else if (parsed.type === "log") {
+          newComponent = /* @__PURE__ */ jsxs11(Text12, { color: "gray", children: [
+            "\u2139\uFE0F ",
+            parsed.message,
+            parsed.payload ? `: ${parsed.payload}` : ""
+          ] });
         } else if (parsed.type === "assistant_message" && parsed.content) {
           newComponent = null;
         }
@@ -2510,22 +2819,37 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
       } catch (error) {
       }
     };
+    const handleUiOverlay = (data) => {
+      eventBus2.emit("dev_overlay", data);
+    };
+    uiEventBus.on("dev_overlay", handleUiOverlay);
     eventBus2.on("backend_message", handleBackendMessage);
     initializeAgent();
     return () => {
+      uiEventBus.off("dev_overlay", handleUiOverlay);
       eventBus2.off("backend_message", handleBackendMessage);
     };
   }, [eventBus2, sessionId2, handleConfirmation]);
   const renderInteractiveComponent = () => {
     if (mcpStatus !== "connected") {
-      return /* @__PURE__ */ jsx11(Box11, { borderStyle: "round", borderColor: "black", children: /* @__PURE__ */ jsxs9(Text10, { color: "yellow", children: [
-        /* @__PURE__ */ jsx11(Spinner, { type: "dots" }),
-        " ",
-        statusMessage || "Connecting..."
-      ] }) });
+      return /* @__PURE__ */ jsx13(
+        Box13,
+        {
+          borderStyle: "round",
+          borderColor: "black",
+          children: /* @__PURE__ */ jsx13(
+            SessionInfoConnectingMCP_default,
+            {
+              sessionId: sessionId2,
+              workdir,
+              statusMessage
+            }
+          )
+        }
+      );
     }
     if (pendingConfirmation) {
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx13(
         ConfirmationPrompt,
         {
           toolCalls: pendingConfirmation,
@@ -2537,9 +2861,9 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
         }
       );
     }
-    return /* @__PURE__ */ jsxs9(Box11, { flexDirection: "column", children: [
-      isProcessing && !pendingConfirmation && /* @__PURE__ */ jsx11(WorkingTimer, {}),
-      /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs11(Box13, { flexDirection: "column", children: [
+      isProcessing && !pendingConfirmation && /* @__PURE__ */ jsx13(WorkingTimer, {}),
+      /* @__PURE__ */ jsx13(
         InputPrompt,
         {
           onSubmit: handleSubmit,
@@ -2549,8 +2873,8 @@ var AppComponent = ({ eventBus: eventBus2, sessionId: sessionId2 }) => {
       )
     ] });
   };
-  return /* @__PURE__ */ jsxs9(Box11, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx11(Static, { items: history, children: (item) => /* @__PURE__ */ jsx11(Box11, { children: item.component }, item.id) }),
+  return /* @__PURE__ */ jsxs11(Box13, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx13(Static, { items: history, children: (item) => /* @__PURE__ */ jsx13(Box13, { children: item.component }, item.id) }),
     renderInteractiveComponent()
   ] });
 };
@@ -2558,7 +2882,7 @@ var App = memo4(AppComponent);
 var App_default = App;
 
 // src/main.ts
-var eventBus = new EventEmitter();
+var eventBus = new EventEmitter2();
 var sessionId = uuidv42();
 var props = {
   eventBus,