bravecode-cli 0.1.16 → 0.1.17

package/dist/cli.mjs

@@ -38043,11 +38043,12 @@ var init_task = __esm({
 });
 
 // src/version.ts
-var APP_VERSION;
+var APP_VERSION, APP_NAME;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    APP_VERSION = "0.1.16";
+    APP_VERSION = "0.1.17";
+    APP_NAME = "BraveCode";
   }
 });
 
@@ -41582,18 +41583,73 @@ import "react";
 import { Box, Text } from "ink";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function Logo() {
-  return /* @__PURE__ */ jsx6(Box, { flexDirection: "column", alignItems: "center", children: /* @__PURE__ */ jsx6(Text, { bold: true, color: "#00d4ff", fontSize: 2, children: "bravecode" }) });
+  return /* @__PURE__ */ jsx6(Box, { flexDirection: "column", alignItems: "center", children: ROWS.map((row, i) => /* @__PURE__ */ jsx6(
+    Text,
+    {
+      dimColor: !row.bright,
+      italic: row.italic,
+      bold: row.bright,
+      children: row.chars
+    },
+    i
+  )) });
 }
+var ROWS;
 var init_logo = __esm({
   "src/core/tui/components/logo.tsx"() {
     "use strict";
+    ROWS = [
+      { chars: " ____                 ", bright: false, italic: true },
+      { chars: "|  _ \\ __ _ _ __   __ _ ", bright: false, italic: true },
+      { chars: "| |_) / _` | '_ \\ / _` |", bright: false, italic: true },
+      { chars: "|  __/ (_| | | | | (_| |", bright: true, italic: false },
+      { chars: "|_|   \\__,_|_| |_|\\__,_|", bright: true, italic: false }
+    ];
   }
 });
 
-// src/core/tui/components/message.tsx
+// src/core/tui/components/header-bar.tsx
 import "react";
 import { Box as Box2, Text as Text2 } from "ink";
 import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function HeaderBar({ title, subtitle }) {
+  const { colors } = useTheme();
+  const cwd = process.cwd().replace(process.env.HOME || "", "~");
+  return /* @__PURE__ */ jsxs(
+    Box2,
+    {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", alignItems: "center", flexGrow: 1, children: [
+          /* @__PURE__ */ jsxs(Text2, { children: [
+            /* @__PURE__ */ jsx7(Text2, { bold: true, color: colors.text, children: title }),
+            /* @__PURE__ */ jsx7(Text2, { color: colors.textMuted, children: " \u2014 " }),
+            /* @__PURE__ */ jsx7(Text2, { color: colors.textSecondary, children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx7(Text2, { color: colors.textMuted, children: cwd })
+        ] }),
+        /* @__PURE__ */ jsxs(Box2, { gap: 1, children: [
+          /* @__PURE__ */ jsx7(Text2, { color: colors.textMuted, children: "\u25A6" }),
+          /* @__PURE__ */ jsx7(Text2, { color: colors.textMuted, children: "\u2261" })
+        ] })
+      ]
+    }
+  );
+}
+var init_header_bar = __esm({
+  "src/core/tui/components/header-bar.tsx"() {
+    "use strict";
+    init_theme();
+  }
+});
+
+// src/core/tui/components/message.tsx
+import { memo, useEffect as useEffect2, useRef, useState as useState6 } from "react";
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function ToolCallDisplay({ toolCall }) {
   const { colors } = useTheme();
   const statusIcon = {
@@ -41623,17 +41679,17 @@ function ToolCallDisplay({ toolCall }) {
   };
   const label = toolLabels[toolCall.name]?.past || toolCall.name;
   const argStr = getToolArgs(toolCall);
-  return /* @__PURE__ */ jsxs(Box2, { marginLeft: 2, children: [
-    /* @__PURE__ */ jsxs(Text2, { color: statusColor, children: [
+  return /* @__PURE__ */ jsxs2(Box3, { marginLeft: 2, children: [
+    /* @__PURE__ */ jsxs2(Text3, { color: statusColor, children: [
       statusIcon,
       " "
     ] }),
-    /* @__PURE__ */ jsx7(Text2, { bold: true, color: colors.text, children: label }),
-    argStr && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
+    /* @__PURE__ */ jsx8(Text3, { bold: true, color: colors.text, children: label }),
+    argStr && /* @__PURE__ */ jsxs2(Text3, { color: colors.textMuted, children: [
       " ",
       argStr
     ] }),
-    toolCall.output && toolCall.status === "completed" && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
+    toolCall.output && toolCall.status === "completed" && /* @__PURE__ */ jsxs2(Text3, { color: colors.textMuted, children: [
       " \u2514 ",
       truncate(toolCall.output.split("\n")[0], 60)
     ] })
@@ -41679,14 +41735,59 @@ function formatTime(date5) {
     hour12: false
   });
 }
-function Message({ message, showTimestamp = false }) {
+function wrapLines(text2, width) {
+  const innerWidth = Math.max(10, width);
+  const out = [];
+  for (const line of text2.split("\n")) {
+    if (line.length === 0) {
+      out.push("");
+      continue;
+    }
+    for (let i = 0; i < line.length; i += innerWidth) {
+      out.push(line.slice(i, i + innerWidth));
+    }
+  }
+  return out;
+}
+function clipContent(content, width, skipTop, skipBottom) {
+  if (!skipTop && !skipBottom) return content;
+  const wrapped = wrapLines(content, Math.max(10, width - 2));
+  const start = Math.min(skipTop, wrapped.length);
+  const end = Math.max(start, wrapped.length - skipBottom);
+  return wrapped.slice(start, end).join("\n");
+}
+function MessageImpl({
+  message,
+  showTimestamp = false,
+  clipTop = 0,
+  clipBottom = 0,
+  maxRenderedLines
+}) {
   const { colors } = useTheme();
+  if (message.role === "user") {
+    return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "row", marginBottom: 1, children: [
+      /* @__PURE__ */ jsx8(Text3, { color: colors.primary, children: "\u2502 " }),
+      /* @__PURE__ */ jsx8(Text3, { color: colors.text, children: message.content })
+    ] });
+  }
+  const isStreaming = message.toolCalls && message.toolCalls.some((tc) => tc.status === "running");
+  const [renderedContent, setRenderedContent] = useState6(() => {
+    if (!maxRenderedLines) return message.content;
+    const wrapped = wrapLines(message.content, 80);
+    return wrapped.slice(-maxRenderedLines).join("\n");
+  });
+  const lastSeenContent = useRef(message.content);
+  useEffect2(() => {
+    if (message.content === lastSeenContent.current) return;
+    lastSeenContent.current = message.content;
+    if (!maxRenderedLines) {
+      setRenderedContent(message.content);
+      return;
+    }
+    const wrapped = wrapLines(message.content, 80);
+    setRenderedContent(wrapped.slice(-maxRenderedLines).join("\n"));
+  }, [message.content, maxRenderedLines]);
   const roleConfig = {
-    user: {
-      label: "You",
-      color: colors.primary,
-      prefix: "\u203A"
-    },
     assistant: {
       label: "Assistant",
       color: colors.secondary,
@@ -41699,80 +41800,185 @@ function Message({ message, showTimestamp = false }) {
     }
   };
   const config2 = roleConfig[message.role];
-  return /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsxs(Box2, { children: [
-      /* @__PURE__ */ jsxs(Text2, { bold: true, color: config2.color, children: [
+  const baseContent = clipTop || clipBottom ? clipContent(renderedContent, 80, clipTop, clipBottom) : renderedContent;
+  return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsxs2(Box3, { children: [
+      /* @__PURE__ */ jsxs2(Text3, { bold: true, color: config2.color, children: [
         config2.prefix,
         " ",
         config2.label
       ] }),
-      message.agent && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
+      message.agent && /* @__PURE__ */ jsxs2(Text3, { color: colors.textMuted, children: [
         " (",
         message.agent,
         ")"
       ] }),
-      showTimestamp && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
+      showTimestamp && /* @__PURE__ */ jsxs2(Text3, { color: colors.textMuted, children: [
         " ",
         formatTime(message.timestamp)
-      ] })
+      ] }),
+      isStreaming && /* @__PURE__ */ jsx8(Text3, { color: colors.textMuted, children: " streaming\u2026" })
     ] }),
-    message.role === "user" ? /* @__PURE__ */ jsx7(Box2, { marginLeft: 2, children: /* @__PURE__ */ jsx7(Text2, { color: colors.text, children: message.content }) }) : /* @__PURE__ */ jsx7(Box2, { marginLeft: 2, flexDirection: "column", children: /* @__PURE__ */ jsx7(Text2, { color: colors.text, children: message.content }) }),
-    message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx7(Box2, { flexDirection: "column", marginTop: 1, children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx7(ToolCallDisplay, { toolCall }, toolCall.id)) })
+    /* @__PURE__ */ jsx8(Box3, { marginLeft: 2, flexDirection: "column", children: /* @__PURE__ */ jsx8(Text3, { color: colors.text, children: baseContent }) }),
+    message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx8(Box3, { flexDirection: "column", marginTop: 1, children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx8(ToolCallDisplay, { toolCall }, toolCall.id)) })
   ] });
 }
+var Message;
 var init_message = __esm({
   "src/core/tui/components/message.tsx"() {
     "use strict";
     init_theme();
+    Message = memo(MessageImpl, (prev, next) => {
+      return prev.message === next.message && prev.showTimestamp === next.showTimestamp && prev.clipTop === next.clipTop && prev.clipBottom === next.clipBottom && prev.maxRenderedLines === next.maxRenderedLines;
+    });
+  }
+});
+
+// src/core/tui/hooks/use-terminal-size.ts
+import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useStdout } from "ink";
+function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState7(() => ({
+    columns: stdout?.columns ?? 80,
+    rows: stdout?.rows ?? 24
+  }));
+  useEffect3(() => {
+    if (!stdout) return;
+    const update = () => {
+      setSize({
+        columns: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24
+      });
+    };
+    stdout.on("resize", update);
+    update();
+    return () => {
+      stdout.off("resize", update);
+    };
+  }, [stdout]);
+  return size;
+}
+var init_use_terminal_size = __esm({
+  "src/core/tui/hooks/use-terminal-size.ts"() {
+    "use strict";
   }
 });
 
 // src/core/tui/components/message-container.tsx
-import { useRef, useEffect as useEffect2 } from "react";
-import { Box as Box3, Text as Text3 } from "ink";
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState8 } from "react";
+import { Box as Box4, Text as Text4, useInput } from "ink";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function messageLineCount(content, width, extras) {
+  const innerWidth = Math.max(10, width - 4);
+  const lines = content.split("\n");
+  let rows = 0;
+  for (const line of lines) {
+    rows += Math.max(1, Math.ceil((line.length || 1) / innerWidth));
+  }
+  rows += 1;
+  rows += extras.toolCalls ?? 0;
+  return rows;
+}
 function MessageContainer() {
   const { colors } = useTheme();
   const { messages } = useSession();
-  const containerRef = useRef(null);
-  useEffect2(() => {
-    if (containerRef.current) {
+  const { rows, columns } = useTerminalSize();
+  const viewportHeight = Math.max(5, rows - 3);
+  const messageHeights = useMemo(() => {
+    return messages.map(
+      (m) => messageLineCount(m.content, columns, {
+        role: m.role,
+        toolCalls: m.toolCalls?.length
+      })
+    );
+  }, [messages, columns]);
+  const totalLines = useMemo(
+    () => messageHeights.reduce((a, b) => a + b, 0),
+    [messageHeights]
+  );
+  const [scrollOffset, setScrollOffset] = useState8(0);
+  const stickToBottom = useRef2(true);
+  useEffect4(() => {
+    if (stickToBottom.current) {
+      setScrollOffset(0);
+    }
+  }, [totalLines]);
+  useInput((input, key) => {
+    if (key.pageUp) {
+      stickToBottom.current = false;
+      setScrollOffset((o) => Math.min(o + Math.floor(viewportHeight * 0.9), Math.max(0, totalLines - viewportHeight)));
+    } else if (key.pageDown) {
+      setScrollOffset((o) => {
+        const next = Math.max(0, o - Math.floor(viewportHeight * 0.9));
+        if (next === 0) stickToBottom.current = true;
+        return next;
+      });
+    } else if (input === "g" && key.shift) {
+      stickToBottom.current = true;
+      setScrollOffset(0);
+    } else if (input === "g" && !key.shift) {
+      stickToBottom.current = false;
+      setScrollOffset(Math.max(0, totalLines - viewportHeight));
+    } else if (key.upArrow) {
+      stickToBottom.current = false;
+      setScrollOffset((o) => Math.min(o + 1, Math.max(0, totalLines - viewportHeight)));
+    } else if (key.downArrow) {
+      setScrollOffset((o) => {
+        const next = Math.max(0, o - 1);
+        if (next === 0) stickToBottom.current = true;
+        return next;
+      });
     }
-  }, [messages.length]);
+  });
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxs2(
-      Box3,
-      {
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        flexGrow: 1,
-        children: [
-          /* @__PURE__ */ jsx8(Text3, { bold: true, color: colors.primary, children: "BraveCode AI" }),
-          /* @__PURE__ */ jsx8(Text3, { color: colors.textMuted, children: "Agentic coding assistant with free model access" }),
-          /* @__PURE__ */ jsx8(Text3, { color: colors.textMuted, children: " " }),
-          /* @__PURE__ */ jsx8(Text3, { color: colors.textMuted, children: "Type a message to start. Use /help for commands." })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", justifyContent: "center", alignItems: "center", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx9(Text4, { bold: true, color: colors.primary, children: "BraveCode AI" }),
+      /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: "Agentic coding assistant with free model access" }),
+      /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: " " }),
+      /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: "Type a message to start. Use /help for commands." })
+    ] });
   }
-  return /* @__PURE__ */ jsx8(
-    Box3,
-    {
-      ref: containerRef,
-      flexDirection: "column",
-      flexGrow: 1,
-      overflow: "hidden",
-      children: messages.map((message) => /* @__PURE__ */ jsx8(
+  const windowTop = totalLines - viewportHeight - scrollOffset;
+  const windowBottom = totalLines - scrollOffset;
+  let cursor = 0;
+  const visible = [];
+  for (let i = 0; i < messages.length; i++) {
+    const h = messageHeights[i];
+    const msgTop = cursor;
+    const msgBottom = cursor + h;
+    if (msgBottom > windowTop && msgTop < windowBottom) {
+      const overlapTop = Math.max(0, windowTop - msgTop);
+      const overlapBottom = Math.min(h, windowBottom - msgTop);
+      visible.push({ idx: i, skipTop: overlapTop, skipBottom: h - overlapBottom });
+    }
+    cursor += h;
+    if (msgBottom >= windowBottom) break;
+  }
+  const STREAMING_LINE_CAP = Math.max(10, Math.floor(viewportHeight * 0.6));
+  const lastIndex = messages.length - 1;
+  return /* @__PURE__ */ jsxs3(Box4, { ref: () => {
+  }, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [
+    visible.map(({ idx, skipTop, skipBottom }) => {
+      const m = messages[idx];
+      if (m.role === "user") {
+        return /* @__PURE__ */ jsx9(Message, { message: m }, m.id);
+      }
+      const isStreaming = idx === lastIndex && m.content !== "";
+      return /* @__PURE__ */ jsx9(
         Message,
         {
-          message,
-          showTimestamp: true
+          message: m,
+          showTimestamp: true,
+          clipTop: skipTop,
+          clipBottom: skipBottom,
+          maxRenderedLines: isStreaming ? STREAMING_LINE_CAP : void 0
         },
-        message.id
-      ))
-    }
-  );
+        m.id
+      );
+    }),
+    !stickToBottom.current && /* @__PURE__ */ jsx9(Box4, { children: /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: "\u2191\u2193 scroll \xB7 pgup/pgdn \xB7 g/G top/bottom" }) })
+  ] });
 }
 var init_message_container = __esm({
   "src/core/tui/components/message-container.tsx"() {
@@ -41780,22 +41986,23 @@ var init_message_container = __esm({
     init_theme();
     init_session();
     init_message();
+    init_use_terminal_size();
   }
 });
 
 // src/core/tui/components/input-editor.tsx
-import { useState as useState6 } from "react";
-import { Box as Box4, Text as Text4, useInput, useApp } from "ink";
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { Box as Box5, Text as Text5, useInput as useInput2, useApp } from "ink";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = false }) {
   const { colors } = useTheme();
   const { isRunning } = useAgent();
   const { exit } = useApp();
-  const [value, setValue] = useState6("");
-  const [cursorPos, setCursorPos] = useState6(0);
-  const [history, setHistory] = useState6([]);
-  const [historyIndex, setHistoryIndex] = useState6(-1);
-  useInput((input, key) => {
+  const [value, setValue] = useState9("");
+  const [cursorPos, setCursorPos] = useState9(0);
+  const [history, setHistory] = useState9([]);
+  const [historyIndex, setHistoryIndex] = useState9(-1);
+  useInput2((input, key) => {
     if (disabled || isRunning) return;
     if (key.return) {
       if (key.shift) {
@@ -41910,22 +42117,22 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
   });
   const renderInput = () => {
     if (disabled || isRunning) {
-      return /* @__PURE__ */ jsx9(Box4, { children: /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: isRunning ? "Thinking..." : "Disabled" }) });
+      return /* @__PURE__ */ jsx10(Box5, { children: /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: isRunning ? "Thinking..." : "Disabled" }) });
     }
     if (!value) {
-      return /* @__PURE__ */ jsx9(Box4, { children: /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: placeholder }) });
+      return /* @__PURE__ */ jsx10(Box5, { children: /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: placeholder }) });
     }
     const before = value.slice(0, cursorPos);
     const cursor = value[cursorPos] || " ";
     const after = value.slice(cursorPos + 1);
-    return /* @__PURE__ */ jsxs3(Box4, { children: [
-      /* @__PURE__ */ jsx9(Text4, { children: before }),
-      /* @__PURE__ */ jsx9(Text4, { inverse: true, children: cursor }),
-      /* @__PURE__ */ jsx9(Text4, { children: after })
+    return /* @__PURE__ */ jsxs4(Box5, { children: [
+      /* @__PURE__ */ jsx10(Text5, { children: before }),
+      /* @__PURE__ */ jsx10(Text5, { inverse: true, children: cursor }),
+      /* @__PURE__ */ jsx10(Text5, { children: after })
     ] });
   };
-  return /* @__PURE__ */ jsxs3(Box4, { children: [
-    /* @__PURE__ */ jsx9(Text4, { bold: true, color: colors.primary, children: "\u203A " }),
+  return /* @__PURE__ */ jsxs4(Box5, { children: [
+    /* @__PURE__ */ jsx10(Text5, { bold: true, color: colors.primary, children: "\u203A " }),
     renderInput()
   ] });
 }
@@ -41937,56 +42144,91 @@ var init_input_editor = __esm({
   }
 });
 
+// src/core/tui/components/spinner.tsx
+import { useEffect as useEffect6, useState as useState10 } from "react";
+import { Text as Text6 } from "ink";
+import { jsxs as jsxs5 } from "react/jsx-runtime";
+function Spinner({ color, suffix = "" }) {
+  const [frame, setFrame] = useState10(0);
+  useEffect6(() => {
+    const id = setInterval(() => {
+      setFrame((f) => (f + 1) % FRAMES.length);
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsxs5(Text6, { color, children: [
+    FRAMES[frame],
+    suffix
+  ] });
+}
+var FRAMES, TICK_MS;
+var init_spinner = __esm({
+  "src/core/tui/components/spinner.tsx"() {
+    "use strict";
+    FRAMES = ["\xB7\xB7\xB7\xB7\xB7\xB7\u25A0", "\xB7\xB7\xB7\xB7\xB7\u25A0\xB7", "\xB7\xB7\xB7\xB7\u25A0\xB7\xB7", "\xB7\xB7\xB7\u25A0\xB7\xB7\xB7", "\xB7\xB7\u25A0\xB7\xB7\xB7\xB7", "\xB7\u25A0\xB7\xB7\xB7\xB7\xB7", "\u25A0\xB7\xB7\xB7\xB7\xB7\xB7", "\xB7\u25A0\xB7\xB7\xB7\xB7\xB7", "\xB7\xB7\u25A0\xB7\xB7\xB7\xB7", "\xB7\xB7\xB7\u25A0\xB7\xB7\xB7", "\xB7\xB7\xB7\xB7\u25A0\xB7\xB7", "\xB7\xB7\xB7\xB7\xB7\u25A0\xB7"];
+    TICK_MS = 100;
+  }
+});
+
 // src/core/tui/components/status-bar.tsx
 import "react";
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box6, Text as Text7 } from "ink";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function StatusBar() {
   const { colors } = useTheme();
-  const { currentAgent, isRunning } = useAgent();
-  const width = process.stdout.columns || 80;
-  const cwd = process.cwd().replace(process.env.HOME || "", "~");
-  return /* @__PURE__ */ jsxs4(Box5, { justifyContent: "space-between", width, children: [
-    /* @__PURE__ */ jsxs4(Box5, { gap: 2, children: [
-      /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: cwd }),
-      /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: "\u25CF 1 MCP" }),
-      /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: "/status" })
-    ] }),
-    /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: APP_VERSION })
-  ] });
+  const { isRunning } = useAgent();
+  return /* @__PURE__ */ jsxs6(
+    Box6,
+    {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ jsx11(Box6, { children: isRunning ? /* @__PURE__ */ jsx11(Spinner, { color: colors.textMuted, suffix: " esc interrupt" }) : /* @__PURE__ */ jsx11(Text7, { color: colors.textMuted, children: " " }) }),
+        /* @__PURE__ */ jsxs6(Box6, { gap: 2, children: [
+          /* @__PURE__ */ jsx11(Text7, { color: colors.textMuted, children: "tab agents" }),
+          /* @__PURE__ */ jsx11(Text7, { color: colors.textMuted, children: "ctrl+p commands" }),
+          /* @__PURE__ */ jsx11(Text7, { color: colors.textMuted, children: "\xB7" }),
+          /* @__PURE__ */ jsx11(Text7, { color: colors.textMuted, children: APP_VERSION })
+        ] })
+      ]
+    }
+  );
 }
 var init_status_bar = __esm({
   "src/core/tui/components/status-bar.tsx"() {
     "use strict";
     init_theme();
     init_agent2();
+    init_spinner();
     init_version();
   }
 });
 
 // src/core/tui/components/toast.tsx
 import "react";
-import { Box as Box6, Text as Text6 } from "ink";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text8 } from "ink";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function ToastContainer() {
   const { colors } = useTheme();
   const { toasts } = useToast();
   if (toasts.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(Box6, { flexDirection: "column", position: "absolute", bottom: 2, right: 2, children: toasts.map((toast) => /* @__PURE__ */ jsxs5(
-    Box6,
+  return /* @__PURE__ */ jsx12(Box7, { flexDirection: "column", position: "absolute", bottom: 2, right: 2, children: toasts.map((toast) => /* @__PURE__ */ jsxs7(
+    Box7,
     {
       borderStyle: "round",
       borderColor: colors[variantColors[toast.variant]],
       paddingX: 1,
       marginBottom: 1,
       children: [
-        /* @__PURE__ */ jsxs5(Text6, { color: colors[variantColors[toast.variant]], children: [
+        /* @__PURE__ */ jsxs7(Text8, { color: colors[variantColors[toast.variant]], children: [
           variantIcons[toast.variant],
           " "
         ] }),
-        /* @__PURE__ */ jsx11(Text6, { children: toast.message })
+        /* @__PURE__ */ jsx12(Text8, { children: toast.message })
       ]
     },
     toast.id
@@ -42014,16 +42256,16 @@ var init_toast2 = __esm({
 });
 
 // src/core/tui/components/model-selector.tsx
-import { useState as useState7 } from "react";
-import { Box as Box7, Text as Text7, useInput as useInput2 } from "ink";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Box as Box8, Text as Text9, useInput as useInput3 } from "ink";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function ModelSelector() {
   const { colors } = useTheme();
   const { currentModel, setModel } = useAgent();
   const { closeDialog } = useDialog();
   const toast = useToast();
-  const [selectedIndex, setSelectedIndex] = useState7(0);
-  const [filter3, setFilter] = useState7("");
+  const [selectedIndex, setSelectedIndex] = useState11(0);
+  const [filter3, setFilter] = useState11("");
   const models = models_default.models.map((m) => ({
     id: m.id,
     name: m.name,
@@ -42033,7 +42275,7 @@ function ModelSelector() {
   const filteredModels = models.filter(
     (m) => m.tags.includes("free") && (m.name.toLowerCase().includes(filter3.toLowerCase()) || m.id.toLowerCase().includes(filter3.toLowerCase()))
   );
-  useInput2((input, key) => {
+  useInput3((input, key) => {
     if (key.escape) {
       closeDialog();
       return;
@@ -42067,9 +42309,9 @@ function ModelSelector() {
   const renderModel = (model, index) => {
     const isSelected = model.id === currentModel;
     const isHighlighted = index === selectedIndex;
-    return /* @__PURE__ */ jsxs6(Box7, { children: [
-      /* @__PURE__ */ jsxs6(
-        Text7,
+    return /* @__PURE__ */ jsxs8(Box8, { children: [
+      /* @__PURE__ */ jsxs8(
+        Text9,
         {
           bold: isHighlighted,
           color: isSelected ? colors.primary : isHighlighted ? colors.accent : colors.text,
@@ -42079,16 +42321,16 @@ function ModelSelector() {
           ]
         }
       ),
-      /* @__PURE__ */ jsxs6(Text7, { color: colors.textMuted, children: [
+      /* @__PURE__ */ jsxs8(Text9, { color: colors.textMuted, children: [
         " (",
         model.provider,
         ")"
       ] }),
-      model.tags.includes("free") && /* @__PURE__ */ jsx12(Text7, { color: colors.success, children: " free" })
+      model.tags.includes("free") && /* @__PURE__ */ jsx13(Text9, { color: colors.success, children: " free" })
     ] }, model.id);
   };
-  return /* @__PURE__ */ jsxs6(
-    Box7,
+  return /* @__PURE__ */ jsxs8(
+    Box8,
     {
       flexDirection: "column",
       borderStyle: "double",
@@ -42098,17 +42340,17 @@ function ModelSelector() {
       top: "50%",
       left: "50%",
       children: [
-        /* @__PURE__ */ jsx12(Box7, { paddingX: 1, children: /* @__PURE__ */ jsx12(Text7, { bold: true, color: colors.primary, children: "Select Model" }) }),
-        /* @__PURE__ */ jsxs6(Box7, { paddingX: 1, children: [
-          /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "Search: " }),
-          /* @__PURE__ */ jsx12(Text7, { children: filter3 }),
-          /* @__PURE__ */ jsx12(Text7, { inverse: true, children: " " })
+        /* @__PURE__ */ jsx13(Box8, { paddingX: 1, children: /* @__PURE__ */ jsx13(Text9, { bold: true, color: colors.primary, children: "Select Model" }) }),
+        /* @__PURE__ */ jsxs8(Box8, { paddingX: 1, children: [
+          /* @__PURE__ */ jsx13(Text9, { color: colors.textMuted, children: "Search: " }),
+          /* @__PURE__ */ jsx13(Text9, { children: filter3 }),
+          /* @__PURE__ */ jsx13(Text9, { inverse: true, children: " " })
         ] }),
-        /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", paddingX: 1, maxHeight: 15, children: [
-          /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "Available Models (free):" }),
+        /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, maxHeight: 15, children: [
+          /* @__PURE__ */ jsx13(Text9, { color: colors.textMuted, children: "Available Models (free):" }),
           filteredModels.map((model, index) => renderModel(model, index))
         ] }),
-        /* @__PURE__ */ jsx12(Box7, { paddingX: 1, children: /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc close" }) })
+        /* @__PURE__ */ jsx13(Box8, { paddingX: 1, children: /* @__PURE__ */ jsx13(Text9, { color: colors.textMuted, children: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc close" }) })
       ]
     }
   );
@@ -42125,13 +42367,13 @@ var init_model_selector = __esm({
 });
 
 // src/core/tui/hooks/use-agent.ts
-import { useCallback as useCallback7, useRef as useRef3 } from "react";
+import { useCallback as useCallback7, useRef as useRef4 } from "react";
 function useAgent2() {
   const { addMessage, updateMessage, addToolCall, updateToolCall } = useSession();
   const { currentAgent, currentModel, setRunning } = useAgent();
   const toast = useToast();
-  const agentRef = useRef3(null);
-  const abortRef = useRef3(null);
+  const agentRef = useRef4(null);
+  const abortRef = useRef4(null);
   const sendMessage = useCallback7(async (content) => {
     const userMessage = addMessage({
       role: "user",
@@ -42220,9 +42462,9 @@ var init_use_agent = __esm({
 });
 
 // src/core/tui/app.tsx
-import "react";
-import { Box as Box8, Text as Text8, useInput as useInput3, useApp as useApp2 } from "ink";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import React15 from "react";
+import { Box as Box9, Text as Text10, useInput as useInput4, useApp as useApp2 } from "ink";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function App() {
   const { colors } = useTheme();
   const { messages } = useSession();
@@ -42230,11 +42472,18 @@ function App() {
   const { isOpen, openDialog, closeDialog, dialog } = useDialog();
   const { sendMessage, cancelCurrent } = useAgent2();
   const { exit } = useApp2();
-  useInput3((input, key) => {
+  const { columns } = useTerminalSize();
+  const [sidebarForced, setSidebarForced] = React15.useState(false);
+  const sidebarVisible = sidebarForced || columns >= SIDEBAR_BREAKPOINT;
+  useInput4((input, key) => {
     if (key.ctrl && input === "p") {
       openDialog("model");
       return;
     }
+    if (key.ctrl && input === "b") {
+      setSidebarForced((v) => !v);
+      return;
+    }
     if (key.tab) {
       const agents = ["build", "plan", "debug", "testing", "security"];
       const currentIndex = agents.indexOf(currentAgent.id);
@@ -42250,8 +42499,12 @@ function App() {
       }
       return;
     }
-    if (key.escape && isOpen) {
-      closeDialog();
+    if (key.escape) {
+      if (isRunning) {
+        cancelCurrent();
+      } else if (isOpen) {
+        closeDialog();
+      }
       return;
     }
   });
@@ -42284,82 +42537,121 @@ function App() {
     await sendMessage(value);
   };
   const hasMessages = messages.length > 0;
-  const cwd = process.cwd().replace(process.env.HOME || "", "~");
-  return /* @__PURE__ */ jsxs7(Box8, { flexDirection: "row", width: "100%", height: "100%", children: [
-    /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", flexGrow: 1, backgroundColor: colors.background, children: [
-      /* @__PURE__ */ jsx13(Box8, { flexDirection: "column", flexGrow: 1, justifyContent: hasMessages ? "flex-start" : "center", children: hasMessages ? /* @__PURE__ */ jsx13(MessageContainer, {}) : (
-        /* Welcome screen - centered vertically */
-        /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", alignItems: "center", gap: 1, children: [
-          /* @__PURE__ */ jsx13(Logo, {}),
-          /* @__PURE__ */ jsx13(
-            Box8,
-            {
-              flexDirection: "column",
-              width: 60,
-              borderStyle: "round",
-              borderColor: colors.border,
-              paddingX: 2,
-              paddingY: 1,
-              children: /* @__PURE__ */ jsx13(
-                InputEditor,
-                {
-                  onSubmit: handleSubmit,
-                  placeholder: 'Ask anything... "What is the tech stack of this project?"'
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs7(Box8, { gap: 1, children: [
-            /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.primary, children: currentAgent.name }),
-            /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "\xB7" }),
-            /* @__PURE__ */ jsx13(Text8, { color: colors.textSecondary, children: currentModel })
-          ] }),
-          /* @__PURE__ */ jsxs7(Box8, { gap: 2, children: [
-            /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "tab agents" }),
-            /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "ctrl+p commands" })
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", width: "100%", height: "100%", children: [
+    /* @__PURE__ */ jsx14(HeaderBar, { title: APP_NAME, subtitle: APP_NAME.toLowerCase() }),
+    /* @__PURE__ */ jsxs9(Box9, { flexDirection: "row", flexGrow: 1, width: "100%", children: [
+      /* @__PURE__ */ jsx14(Box9, { flexDirection: "column", flexGrow: 1, backgroundColor: colors.background, children: /* @__PURE__ */ jsx14(
+        Box9,
+        {
+          flexDirection: "column",
+          flexGrow: 1,
+          justifyContent: hasMessages ? "flex-start" : "center",
+          children: hasMessages ? /* @__PURE__ */ jsx14(MessageContainer, {}) : /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx14(Logo, {}),
+            /* @__PURE__ */ jsx14(
+              Box9,
+              {
+                flexDirection: "column",
+                width: 60,
+                borderStyle: "round",
+                borderColor: colors.border,
+                paddingX: 2,
+                paddingY: 1,
+                children: /* @__PURE__ */ jsx14(
+                  InputEditor,
+                  {
+                    onSubmit: handleSubmit,
+                    placeholder: 'Ask anything... "Fix broken tests"'
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs9(Box9, { gap: 1, children: [
+              /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.primary, children: currentAgent.name }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "\xB7" }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textSecondary, children: currentModel })
+            ] }),
+            /* @__PURE__ */ jsxs9(Box9, { gap: 2, children: [
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "tab agents" }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "ctrl+p commands" })
+            ] })
           ] })
-        ] })
+        }
       ) }),
-      /* @__PURE__ */ jsx13(StatusBar, {})
-    ] }),
-    /* @__PURE__ */ jsxs7(
-      Box8,
-      {
-        flexDirection: "column",
-        width: 35,
-        borderStyle: "single",
-        borderColor: colors.border,
-        paddingLeft: 1,
-        children: [
-          /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.textSecondary, children: "New session" }),
-          /* @__PURE__ */ jsxs7(Text8, { color: colors.textMuted, children: [
-            (/* @__PURE__ */ new Date()).toISOString().split(".")[0],
-            "Z"
-          ] }),
-          /* @__PURE__ */ jsx13(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.textSecondary, children: "Context" }) }),
-          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "0 tokens" }),
-          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "0% used" }),
-          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "$0.00 spent" }),
-          /* @__PURE__ */ jsx13(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.textSecondary, children: "MCP" }) }),
-          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "\u25CF railway Connected" }),
-          /* @__PURE__ */ jsx13(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.textSecondary, children: "LSP" }) }),
-          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "LSPs are disabled" }),
-          /* @__PURE__ */ jsx13(Box8, { flexGrow: 1 }),
-          /* @__PURE__ */ jsx13(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: cwd }) }),
-          /* @__PURE__ */ jsxs7(Box8, { children: [
-            /* @__PURE__ */ jsx13(Text8, { color: colors.success, children: "\u25CF" }),
-            /* @__PURE__ */ jsxs7(Text8, { color: colors.textMuted, children: [
-              " ",
-              APP_VERSION
+      sidebarVisible && /* @__PURE__ */ jsxs9(
+        Box9,
+        {
+          flexDirection: "column",
+          width: 35,
+          borderStyle: "single",
+          borderColor: colors.border,
+          paddingLeft: 1,
+          children: [
+            /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.text, children: "New session" }),
+            /* @__PURE__ */ jsxs9(Text10, { color: colors.textMuted, children: [
+              (/* @__PURE__ */ new Date()).toISOString().split(".")[0],
+              "Z"
+            ] }),
+            /* @__PURE__ */ jsx14(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.text, children: "Context" }) }),
+            /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "0 tokens" }),
+            /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "0% used" }),
+            /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "$0.00 spent" }),
+            /* @__PURE__ */ jsx14(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.text, children: "MCP" }) }),
+            /* @__PURE__ */ jsxs9(Box9, { children: [
+              /* @__PURE__ */ jsx14(Text10, { color: colors.success, children: "\u25CF" }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textSecondary, children: " railway " }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "Connected" })
+            ] }),
+            /* @__PURE__ */ jsx14(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.text, children: "LSP" }) }),
+            /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "LSPs are disabled" }),
+            /* @__PURE__ */ jsx14(Box9, { flexGrow: 1 }),
+            /* @__PURE__ */ jsx14(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: process.cwd().replace(process.env.HOME || "", "~") }) }),
+            /* @__PURE__ */ jsxs9(Box9, { children: [
+              /* @__PURE__ */ jsxs9(Text10, { bold: true, color: colors.text, children: [
+                "\u25CF ",
+                APP_NAME,
+                " "
+              ] }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: APP_VERSION })
             ] })
-          ] })
-        ]
-      }
-    ),
-    isOpen && dialog.type === "model" && /* @__PURE__ */ jsx13(ModelSelector, {}),
-    /* @__PURE__ */ jsx13(ToastContainer, {})
+          ]
+        }
+      ),
+      !sidebarVisible && /* @__PURE__ */ jsxs9(
+        Box9,
+        {
+          flexDirection: "column",
+          width: 28,
+          borderStyle: "single",
+          borderColor: colors.border,
+          paddingLeft: 1,
+          children: [
+            /* @__PURE__ */ jsx14(Text10, { bold: true, color: colors.text, children: "Info" }),
+            /* @__PURE__ */ jsxs9(Box9, { marginTop: 1, children: [
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "agent " }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.primary, children: currentAgent.name })
+            ] }),
+            /* @__PURE__ */ jsxs9(Text10, { color: colors.textMuted, children: [
+              "model ",
+              currentModel
+            ] }),
+            /* @__PURE__ */ jsxs9(Box9, { marginTop: 1, children: [
+              /* @__PURE__ */ jsx14(Text10, { color: colors.success, children: "\u25CF" }),
+              /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: " mcp connected" })
+            ] }),
+            /* @__PURE__ */ jsx14(Box9, { flexGrow: 1 }),
+            /* @__PURE__ */ jsx14(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: APP_VERSION }) }),
+            /* @__PURE__ */ jsx14(Text10, { color: colors.textMuted, children: "ctrl+b sidebar" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14(StatusBar, {}),
+    isOpen && dialog.type === "model" && /* @__PURE__ */ jsx14(ModelSelector, {}),
+    /* @__PURE__ */ jsx14(ToastContainer, {})
   ] });
 }
+var SIDEBAR_BREAKPOINT;
 var init_app = __esm({
   "src/core/tui/app.tsx"() {
     "use strict";
@@ -42368,13 +42660,16 @@ var init_app = __esm({
     init_agent2();
     init_dialog();
     init_logo();
+    init_header_bar();
     init_message_container();
     init_input_editor();
     init_status_bar();
     init_toast2();
     init_model_selector();
     init_use_agent();
+    init_use_terminal_size();
     init_version();
+    SIDEBAR_BREAKPOINT = 90;
   }
 });
 
@@ -42385,7 +42680,7 @@ __export(tui_exports, {
 });
 import "react";
 import { render } from "ink";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var TUILauncher;
 var init_tui = __esm({
   "src/core/tui/index.tsx"() {
@@ -42404,12 +42699,12 @@ var init_tui = __esm({
       async start() {
         process.stdout.write("\x1B[2J\x1B[H");
         const { waitUntilExit } = render(
-          /* @__PURE__ */ jsx14(ThemeProvider, { children: /* @__PURE__ */ jsx14(SessionProvider, { children: /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(ThemeProvider, { children: /* @__PURE__ */ jsx15(SessionProvider, { children: /* @__PURE__ */ jsx15(
             AgentProvider,
             {
               initialAgent: this.options.agent || "build",
               initialModel: this.options.model,
-              children: /* @__PURE__ */ jsx14(DialogProvider, { children: /* @__PURE__ */ jsx14(ToastProvider, { children: /* @__PURE__ */ jsx14(App, {}) }) })
+              children: /* @__PURE__ */ jsx15(DialogProvider, { children: /* @__PURE__ */ jsx15(ToastProvider, { children: /* @__PURE__ */ jsx15(App, {}) }) })
             }
           ) }) }),
           {