bravecode-cli 0.1.11 → 0.1.13

package/dist/cli.mjs

@@ -38047,7 +38047,7 @@ var APP_VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    APP_VERSION = "0.1.11";
+    APP_VERSION = "0.1.13";
   }
 });
 
@@ -41577,55 +41577,36 @@ var init_toast = __esm({
   }
 });
 
-// src/core/tui/components/header-bar.tsx
+// src/core/tui/components/logo.tsx
 import "react";
 import { Box, Text } from "ink";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
-function HeaderBar() {
-  const { colors } = useTheme();
-  const { currentAgent, currentModel, isRunning } = useAgent();
-  const { session } = useSession();
-  const width = process.stdout.columns || 80;
-  const separatorWidth = width - 2;
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx6(Text, { color: colors.border, children: "\u2500".repeat(separatorWidth) }),
-    /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx6(Text, { bold: true, color: colors.primary, children: "BraveCode" }),
-        /* @__PURE__ */ jsx6(Text, { color: colors.textMuted, children: " \xB7 " }),
-        /* @__PURE__ */ jsx6(Text, { color: colors.textSecondary, children: currentAgent.name })
-      ] }),
-      /* @__PURE__ */ jsxs(Box, { children: [
-        isRunning && /* @__PURE__ */ jsx6(Text, { color: colors.warning, children: "\u25CF " }),
-        /* @__PURE__ */ jsx6(Text, { color: colors.textMuted, children: "model " }),
-        /* @__PURE__ */ jsx6(Text, { color: colors.accent, children: currentModel })
-      ] })
-    ] }),
-    session && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx6(Text, { color: colors.textMuted, children: "session " }),
-      /* @__PURE__ */ jsx6(Text, { color: colors.textSecondary, children: session.title }),
-      /* @__PURE__ */ jsx6(Text, { color: colors.textMuted, children: " \xB7 " }),
-      /* @__PURE__ */ jsxs(Text, { color: colors.textMuted, children: [
-        session.messages.length,
-        " messages"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx6(Text, { color: colors.border, children: "\u2500".repeat(separatorWidth) })
-  ] });
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Logo({ width = 80 }) {
+  const logo = [
+    "\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557      \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557    \u2588\u2588\u2557",
+    "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551     \u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551    \u2588\u2588\u2551",
+    "\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551",
+    "\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551   \u2588\u2588\u2551\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551     \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551",
+    "\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D",
+    "\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D "
+  ];
+  const maxLineWidth = Math.max(...logo.map((line) => line.length));
+  const centeredLines = logo.map((line) => {
+    const padding = Math.max(0, Math.floor((width - line.length) / 2));
+    return " ".repeat(padding) + line;
+  });
+  return /* @__PURE__ */ jsx6(Box, { flexDirection: "column", alignItems: "center", children: centeredLines.map((line, i) => /* @__PURE__ */ jsx6(Text, { color: "gray", children: line }, i)) });
 }
-var init_header_bar = __esm({
-  "src/core/tui/components/header-bar.tsx"() {
+var init_logo = __esm({
+  "src/core/tui/components/logo.tsx"() {
     "use strict";
-    init_theme();
-    init_agent2();
-    init_session();
   }
 });
 
 // src/core/tui/components/message.tsx
 import "react";
 import { Box as Box2, Text as Text2 } from "ink";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 function ToolCallDisplay({ toolCall }) {
   const { colors } = useTheme();
   const statusIcon = {
@@ -41655,17 +41636,17 @@ function ToolCallDisplay({ toolCall }) {
   };
   const label = toolLabels[toolCall.name]?.past || toolCall.name;
   const argStr = getToolArgs(toolCall);
-  return /* @__PURE__ */ jsxs2(Box2, { marginLeft: 2, children: [
-    /* @__PURE__ */ jsxs2(Text2, { color: statusColor, children: [
+  return /* @__PURE__ */ jsxs(Box2, { marginLeft: 2, children: [
+    /* @__PURE__ */ jsxs(Text2, { color: statusColor, children: [
       statusIcon,
       " "
     ] }),
     /* @__PURE__ */ jsx7(Text2, { bold: true, color: colors.text, children: label }),
-    argStr && /* @__PURE__ */ jsxs2(Text2, { color: colors.textMuted, children: [
+    argStr && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
       " ",
       argStr
     ] }),
-    toolCall.output && toolCall.status === "completed" && /* @__PURE__ */ jsxs2(Text2, { color: colors.textMuted, children: [
+    toolCall.output && toolCall.status === "completed" && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
       " \u2514 ",
       truncate(toolCall.output.split("\n")[0], 60)
     ] })
@@ -41731,19 +41712,19 @@ function Message({ message, showTimestamp = false }) {
     }
   };
   const config2 = roleConfig[message.role];
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsxs2(Text2, { bold: true, color: config2.color, children: [
+  return /* @__PURE__ */ jsxs(Box2, { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsxs(Box2, { children: [
+      /* @__PURE__ */ jsxs(Text2, { bold: true, color: config2.color, children: [
         config2.prefix,
         " ",
         config2.label
       ] }),
-      message.agent && /* @__PURE__ */ jsxs2(Text2, { color: colors.textMuted, children: [
+      message.agent && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
         " (",
         message.agent,
         ")"
       ] }),
-      showTimestamp && /* @__PURE__ */ jsxs2(Text2, { color: colors.textMuted, children: [
+      showTimestamp && /* @__PURE__ */ jsxs(Text2, { color: colors.textMuted, children: [
         " ",
         formatTime(message.timestamp)
       ] })
@@ -41762,7 +41743,7 @@ var init_message = __esm({
 // 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 jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function MessageContainer() {
   const { colors } = useTheme();
   const { messages } = useSession();
@@ -41772,7 +41753,7 @@ function MessageContainer() {
     }
   }, [messages.length]);
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs2(
       Box3,
       {
         flexDirection: "column",
@@ -41816,9 +41797,9 @@ var init_message_container = __esm({
 });
 
 // src/core/tui/components/input-editor.tsx
-import { useState as useState6, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { useState as useState6 } from "react";
 import { Box as Box4, Text as Text4, useInput, useApp } from "ink";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = false }) {
   const { colors } = useTheme();
   const { isRunning } = useAgent();
@@ -41827,11 +41808,6 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
   const [cursorPos, setCursorPos] = useState6(0);
   const [history, setHistory] = useState6([]);
   const [historyIndex, setHistoryIndex] = useState6(-1);
-  const [isMultiline, setIsMultiline] = useState6(false);
-  const inputRef = useRef2("");
-  useEffect3(() => {
-    inputRef.current = value;
-  }, [value]);
   useInput((input, key) => {
     if (disabled || isRunning) return;
     if (key.return) {
@@ -41839,7 +41815,6 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
         const newValue = value.slice(0, cursorPos) + "\n" + value.slice(cursorPos);
         setValue(newValue);
         setCursorPos(cursorPos + 1);
-        setIsMultiline(true);
         return;
       }
       if (value.trim()) {
@@ -41848,7 +41823,6 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
         setValue("");
         setCursorPos(0);
         setHistoryIndex(-1);
-        setIsMultiline(false);
       }
       return;
     }
@@ -41941,10 +41915,6 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
       }
       return;
     }
-    if (key.ctrl && input === "l") {
-      process.stdout.write("\x1B[2J\x1B[H");
-      return;
-    }
     if (input.length === 1 && !key.ctrl && !key.meta) {
       const newValue = value.slice(0, cursorPos) + input + value.slice(cursorPos);
       setValue(newValue);
@@ -41955,32 +41925,22 @@ function InputEditor({ onSubmit, placeholder = "Type a message...", disabled = f
     if (disabled || isRunning) {
       return /* @__PURE__ */ jsx9(Box4, { children: /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: isRunning ? "Thinking..." : "Disabled" }) });
     }
-    if (!value && !isMultiline) {
+    if (!value) {
       return /* @__PURE__ */ jsx9(Box4, { children: /* @__PURE__ */ jsx9(Text4, { color: colors.textMuted, children: placeholder }) });
     }
     const before = value.slice(0, cursorPos);
     const cursor = value[cursorPos] || " ";
     const after = value.slice(cursorPos + 1);
-    return /* @__PURE__ */ jsx9(Box4, { flexDirection: "column", children: /* @__PURE__ */ jsxs4(Box4, { children: [
+    return /* @__PURE__ */ jsxs3(Box4, { children: [
       /* @__PURE__ */ jsx9(Text4, { children: before }),
       /* @__PURE__ */ jsx9(Text4, { inverse: true, children: cursor }),
       /* @__PURE__ */ jsx9(Text4, { children: after })
-    ] }) });
+    ] });
   };
-  return /* @__PURE__ */ jsx9(
-    Box4,
-    {
-      borderStyle: "round",
-      borderColor: colors.borderFocused,
-      paddingX: 1,
-      paddingY: 0,
-      flexDirection: "column",
-      children: /* @__PURE__ */ jsxs4(Box4, { children: [
-        /* @__PURE__ */ jsx9(Text4, { bold: true, color: colors.primary, children: "\u203A " }),
-        renderInput()
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs3(Box4, { children: [
+    /* @__PURE__ */ jsx9(Text4, { bold: true, color: colors.primary, children: "\u203A " }),
+    renderInput()
+  ] });
 }
 var init_input_editor = __esm({
   "src/core/tui/components/input-editor.tsx"() {
@@ -41993,18 +41953,21 @@ var init_input_editor = __esm({
 // src/core/tui/components/status-bar.tsx
 import "react";
 import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function StatusBar() {
   const { colors } = useTheme();
   const { currentAgent, isRunning } = useAgent();
   const width = process.stdout.columns || 80;
-  return /* @__PURE__ */ jsxs5(Box5, { justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx10(Box5, { children: /* @__PURE__ */ jsxs5(Text5, { color: colors.textMuted, children: [
-      "v",
-      APP_VERSION
-    ] }) }),
-    /* @__PURE__ */ jsx10(Box5, { children: isRunning ? /* @__PURE__ */ jsx10(Text5, { color: colors.warning, children: "\u25CF Running" }) : /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: "Ready" }) }),
-    /* @__PURE__ */ jsx10(Box5, { children: /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: "/help for commands" }) })
+  const cwd = process.cwd().replace(process.env.HOME || "", "~");
+  return /* @__PURE__ */ jsxs4(Box5, { justifyContent: "space-between", width, children: [
+    /* @__PURE__ */ jsxs4(Box5, { gap: 1, children: [
+      /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: cwd }),
+      isRunning && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: "\xB7" }),
+        /* @__PURE__ */ jsx10(Text5, { color: colors.warning, children: "\u25CF running" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10(Text5, { color: colors.textMuted, children: APP_VERSION })
   ] });
 }
 var init_status_bar = __esm({
@@ -42019,14 +41982,14 @@ var init_status_bar = __esm({
 // src/core/tui/components/toast.tsx
 import "react";
 import { Box as Box6, Text as Text6 } from "ink";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } 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__ */ jsxs6(
+  return /* @__PURE__ */ jsx11(Box6, { flexDirection: "column", position: "absolute", bottom: 2, right: 2, children: toasts.map((toast) => /* @__PURE__ */ jsxs5(
     Box6,
     {
       borderStyle: "round",
@@ -42034,7 +41997,7 @@ function ToastContainer() {
       paddingX: 1,
       marginBottom: 1,
       children: [
-        /* @__PURE__ */ jsxs6(Text6, { color: colors[variantColors[toast.variant]], children: [
+        /* @__PURE__ */ jsxs5(Text6, { color: colors[variantColors[toast.variant]], children: [
           variantIcons[toast.variant],
           " "
         ] }),
@@ -42068,110 +42031,39 @@ var init_toast2 = __esm({
 // src/core/tui/components/command-palette.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 jsxs7 } from "react/jsx-runtime";
-function CommandPalette() {
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var init_command_palette = __esm({
+  "src/core/tui/components/command-palette.tsx"() {
+    "use strict";
+    init_theme();
+    init_dialog();
+    init_agent2();
+    init_session();
+    init_toast();
+  }
+});
+
+// src/core/tui/components/model-selector.tsx
+import { useState as useState8 } from "react";
+import { Box as Box8, Text as Text8, useInput as useInput3 } from "ink";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function ModelSelector() {
   const { colors } = useTheme();
+  const { currentModel, setModel } = useAgent();
   const { closeDialog } = useDialog();
-  const { setAgent, setModel, availableAgents } = useAgent();
-  const { createSession, clearMessages } = useSession();
   const toast = useToast();
-  const [query, setQuery] = useState7("");
-  const [selectedIndex, setSelectedIndex] = useState7(0);
-  const commands = [
-    // Session commands
-    {
-      name: "new",
-      label: "New Session",
-      description: "Start a new conversation",
-      category: "Session",
-      action: () => {
-        createSession();
-        toast.success("New session created");
-        closeDialog();
-      }
-    },
-    {
-      name: "clear",
-      label: "Clear Messages",
-      description: "Clear current conversation",
-      category: "Session",
-      action: () => {
-        clearMessages();
-        toast.success("Messages cleared");
-        closeDialog();
-      }
-    },
-    // Agent commands
-    ...availableAgents.map((agent) => ({
-      name: `agent:${agent.id}`,
-      label: `Switch to ${agent.name}`,
-      description: agent.description,
-      category: "Agent",
-      action: () => {
-        setAgent(agent.id);
-        toast.success(`Switched to ${agent.name}`);
-        closeDialog();
-      }
-    })),
-    // Model commands
-    {
-      name: "model:codestral",
-      label: "Switch to Codestral",
-      description: "Code generation model",
-      category: "Model",
-      action: () => {
-        setModel("codestral-latest");
-        toast.success("Switched to Codestral");
-        closeDialog();
-      }
-    },
-    {
-      name: "model:deepseek-r1",
-      label: "Switch to DeepSeek R1",
-      description: "Reasoning model",
-      category: "Model",
-      action: () => {
-        setModel("DeepSeek-R1");
-        toast.success("Switched to DeepSeek R1");
-        closeDialog();
-      }
-    },
-    {
-      name: "model:mistral",
-      label: "Switch to Mistral Large",
-      description: "General purpose model",
-      category: "Model",
-      action: () => {
-        setModel("mistral-large-2512");
-        toast.success("Switched to Mistral Large");
-        closeDialog();
-      }
-    },
-    // System commands
-    {
-      name: "help",
-      label: "Help",
-      description: "Show help information",
-      category: "System",
-      action: () => {
-        toast.info("Help: Use arrow keys to navigate, Enter to select, Esc to close");
-        closeDialog();
-      }
-    },
-    {
-      name: "exit",
-      label: "Exit",
-      description: "Quit the application",
-      category: "System",
-      action: () => {
-        process.exit(0);
-      }
-    }
-  ];
-  const filteredCommands = commands.filter(
-    (cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description.toLowerCase().includes(query.toLowerCase())
+  const [selectedIndex, setSelectedIndex] = useState8(0);
+  const [filter3, setFilter] = useState8("");
+  const models = models_default.models.map((m) => ({
+    id: m.id,
+    name: m.name,
+    provider: m.provider,
+    tags: m.tags
+  }));
+  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;
@@ -42181,75 +42073,84 @@ function CommandPalette() {
       return;
     }
     if (key.downArrow) {
-      setSelectedIndex((prev) => Math.min(filteredCommands.length - 1, prev + 1));
+      setSelectedIndex((prev) => Math.min(filteredModels.length - 1, prev + 1));
       return;
     }
     if (key.return) {
-      if (filteredCommands[selectedIndex]) {
-        filteredCommands[selectedIndex].action();
+      if (filteredModels[selectedIndex]) {
+        const selected = filteredModels[selectedIndex];
+        setModel(selected.id);
+        toast.success(`Switched to ${selected.name}`);
+        closeDialog();
       }
       return;
     }
     if (!key.ctrl && !key.meta && input.length === 1) {
-      setQuery((prev) => prev + input);
+      setFilter((prev) => prev + input);
       setSelectedIndex(0);
     }
     if (key.backspace) {
-      setQuery((prev) => prev.slice(0, -1));
+      setFilter((prev) => prev.slice(0, -1));
       setSelectedIndex(0);
     }
   });
+  const renderModel = (model, index) => {
+    const isSelected = model.id === currentModel;
+    const isHighlighted = index === selectedIndex;
+    return /* @__PURE__ */ jsxs7(Box8, { children: [
+      /* @__PURE__ */ jsxs7(
+        Text8,
+        {
+          bold: isHighlighted,
+          color: isSelected ? colors.primary : isHighlighted ? colors.accent : colors.text,
+          children: [
+            isSelected ? "\u25CF " : "\u25CB ",
+            model.name
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs7(Text8, { color: colors.textMuted, children: [
+        " (",
+        model.provider,
+        ")"
+      ] }),
+      model.tags.includes("free") && /* @__PURE__ */ jsx13(Text8, { color: colors.success, children: " free" })
+    ] }, model.id);
+  };
   return /* @__PURE__ */ jsxs7(
-    Box7,
+    Box8,
     {
       flexDirection: "column",
       borderStyle: "double",
       borderColor: colors.borderFocused,
+      width: 60,
       position: "absolute",
       top: "50%",
       left: "50%",
-      width: "60%",
       children: [
-        /* @__PURE__ */ jsx12(Box7, { paddingX: 1, children: /* @__PURE__ */ jsx12(Text7, { bold: true, color: colors.primary, children: "Command Palette" }) }),
-        /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, paddingY: 0, children: [
-          /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "Search: " }),
-          /* @__PURE__ */ jsx12(Text7, { children: query }),
-          /* @__PURE__ */ jsx12(Text7, { inverse: true, children: " " })
+        /* @__PURE__ */ jsx13(Box8, { paddingX: 1, children: /* @__PURE__ */ jsx13(Text8, { bold: true, color: colors.primary, children: "Select Model" }) }),
+        /* @__PURE__ */ jsxs7(Box8, { paddingX: 1, children: [
+          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "Search: " }),
+          /* @__PURE__ */ jsx13(Text8, { children: filter3 }),
+          /* @__PURE__ */ jsx13(Text8, { inverse: true, children: " " })
         ] }),
-        /* @__PURE__ */ jsx12(Box7, { flexDirection: "column", paddingX: 1, maxHeight: 15, children: filteredCommands.length === 0 ? /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "No matching commands" }) : filteredCommands.map((cmd, index) => /* @__PURE__ */ jsxs7(
-          Box7,
-          {
-            backgroundColor: index === selectedIndex ? colors.backgroundHighlight : void 0,
-            children: [
-              /* @__PURE__ */ jsx12(
-                Text7,
-                {
-                  bold: index === selectedIndex,
-                  color: index === selectedIndex ? colors.primary : colors.text,
-                  children: cmd.label
-                }
-              ),
-              /* @__PURE__ */ jsxs7(Text7, { color: colors.textMuted, children: [
-                " - ",
-                cmd.description
-              ] })
-            ]
-          },
-          cmd.name
-        )) }),
-        /* @__PURE__ */ jsx12(Box7, { paddingX: 1, children: /* @__PURE__ */ jsx12(Text7, { color: colors.textMuted, children: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc close" }) })
+        /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", paddingX: 1, maxHeight: 15, children: [
+          /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "Available Models (free):" }),
+          filteredModels.map((model, index) => renderModel(model, index))
+        ] }),
+        /* @__PURE__ */ jsx13(Box8, { paddingX: 1, children: /* @__PURE__ */ jsx13(Text8, { color: colors.textMuted, children: "\u2191\u2193 navigate \xB7 Enter select \xB7 Esc close" }) })
       ]
     }
   );
 }
-var init_command_palette = __esm({
-  "src/core/tui/components/command-palette.tsx"() {
+var init_model_selector = __esm({
+  "src/core/tui/components/model-selector.tsx"() {
     "use strict";
     init_theme();
-    init_dialog();
     init_agent2();
-    init_session();
+    init_dialog();
     init_toast();
+    init_models();
   }
 });
 
@@ -42350,20 +42251,27 @@ var init_use_agent = __esm({
 
 // src/core/tui/app.tsx
 import "react";
-import { Box as Box8, useInput as useInput3, useApp as useApp2 } from "ink";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box9, Text as Text9, useInput as useInput4, useApp as useApp2 } from "ink";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function App() {
   const { colors } = useTheme();
   const { messages } = useSession();
-  const { isRunning } = useAgent();
-  const { isOpen, openDialog, closeDialog } = useDialog();
+  const { currentAgent, currentModel, isRunning, setAgent } = useAgent();
+  const { isOpen, openDialog, closeDialog, dialog } = useDialog();
   const { sendMessage, cancelCurrent } = useAgent2();
   const { exit } = useApp2();
-  useInput3((input, key) => {
+  useInput4((input, key) => {
     if (key.ctrl && input === "p") {
       openDialog("model");
       return;
     }
+    if (key.tab) {
+      const agents = ["build", "plan", "debug", "testing", "security"];
+      const currentIndex = agents.indexOf(currentAgent.id);
+      const nextIndex = (currentIndex + 1) % agents.length;
+      setAgent(agents[nextIndex]);
+      return;
+    }
     if (key.ctrl && input === "c") {
       if (isRunning) {
         cancelCurrent();
@@ -42409,29 +42317,51 @@ function App() {
     }
     await sendMessage(value);
   };
+  const hasMessages = messages.length > 0;
   return /* @__PURE__ */ jsxs8(
-    Box8,
+    Box9,
     {
       flexDirection: "column",
       width: "100%",
       height: "100%",
       backgroundColor: colors.background,
       children: [
-        /* @__PURE__ */ jsx13(HeaderBar, {}),
-        /* @__PURE__ */ jsx13(Box8, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: /* @__PURE__ */ jsx13(MessageContainer, {}) }),
-        /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
-          /* @__PURE__ */ jsx13(
-            InputEditor,
-            {
-              onSubmit: handleSubmit,
-              disabled: isOpen,
-              placeholder: isRunning ? "Press Ctrl+C to cancel..." : "Type a message... (Ctrl+P for commands)"
-            }
-          ),
-          /* @__PURE__ */ jsx13(StatusBar, {})
-        ] }),
-        isOpen && /* @__PURE__ */ jsx13(CommandPalette, {}),
-        /* @__PURE__ */ jsx13(ToastContainer, {})
+        /* @__PURE__ */ jsx14(Box9, { flexDirection: "column", flexGrow: 1, justifyContent: hasMessages ? "flex-start" : "center", children: hasMessages ? /* @__PURE__ */ jsx14(MessageContainer, {}) : (
+          /* Welcome screen - centered layout like OpenCode */
+          /* @__PURE__ */ jsxs8(Box9, { flexDirection: "column", alignItems: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx14(Logo, { width: 80 }),
+            /* @__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... "What is the tech stack of this project?"'
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs8(Box9, { gap: 1, children: [
+              /* @__PURE__ */ jsx14(Text9, { bold: true, color: colors.primary, children: currentAgent.name }),
+              /* @__PURE__ */ jsx14(Text9, { color: colors.textMuted, children: "\xB7" }),
+              /* @__PURE__ */ jsx14(Text9, { color: colors.textSecondary, children: currentModel })
+            ] }),
+            /* @__PURE__ */ jsxs8(Box9, { gap: 2, children: [
+              /* @__PURE__ */ jsx14(Text9, { color: colors.textMuted, children: "tab agents" }),
+              /* @__PURE__ */ jsx14(Text9, { color: colors.textMuted, children: "ctrl+p commands" })
+            ] })
+          ] })
+        ) }),
+        /* @__PURE__ */ jsx14(StatusBar, {}),
+        isOpen && dialog.type === "model" && /* @__PURE__ */ jsx14(ModelSelector, {}),
+        /* @__PURE__ */ jsx14(ToastContainer, {})
       ]
     }
   );
@@ -42443,12 +42373,13 @@ var init_app = __esm({
     init_session();
     init_agent2();
     init_dialog();
-    init_header_bar();
+    init_logo();
     init_message_container();
     init_input_editor();
     init_status_bar();
     init_toast2();
     init_command_palette();
+    init_model_selector();
     init_use_agent();
   }
 });
@@ -42460,7 +42391,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"() {
@@ -42478,12 +42409,12 @@ var init_tui = __esm({
       }
       async start() {
         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, {}) }) })
             }
           ) }) })
         );