@fastino-ai/pioneer-cli 0.2.1 → 0.2.3

package/src/chat/ChatApp.tsx

@@ -1,18 +1,21 @@
 /**
  * ChatApp - Main interactive chat interface using Ink
+ * Uses Pioneer backend via WebSocket for agent, executes CLI tools locally
  */
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { Box, Text, useApp, useInput, useStdin } from "ink";
 import TextInput from "ink-text-input";
 import Spinner from "ink-spinner";
+import Markdown from "@inkkit/ink-markdown";
 
-import { Agent, AgentEvents } from "../agent/Agent.js";
-import type { Message, ToolCall, ToolResult, AgentConfig } from "../agent/types.js";
-import type { FileReference } from "../agent/FileResolver.js";
-import { createBashTool, executeBashStream } from "../tools/bash.js";
-import { createFilesystemTools } from "../tools/filesystem.js";
-import { createSandboxTool } from "../tools/sandbox.js";
+import { WebSocketClient, type HistoryMessage } from "../client/WebSocketClient.js";
+import { ToolExecutor } from "../client/ToolExecutor.js";
+import type { FileReference } from "../utils/FileResolver.js";
+import { FileResolver } from "../utils/FileResolver.js";
+import { executeBashStream } from "../tools/bash.js";
+import { trackChatSessionStart, trackChatSessionEnd } from "../telemetry.js";
+import { getMleModel, setMleModel, AVAILABLE_MLE_MODELS, DEFAULT_MLE_MODEL } from "../config.js";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -23,23 +26,119 @@ interface ChatMessage {
   content: string;
   timestamp: Date;
   toolName?: string;
+  toolArgs?: Record<string, unknown>;
   isStreaming?: boolean;
+  isUserBash?: boolean; // For !command - show raw output
+}
+
+interface ToolCallInfo {
+  name: string;
+  args: Record<string, unknown>;
 }
 
 interface ChatState {
   messages: ChatMessage[];
   isProcessing: boolean;
   streamingContent: string;
-  currentToolCall: string | null;
+  currentToolCall: ToolCallInfo | null;
   fileReferences: FileReference[];
   error: string | null;
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Tool Output Formatting
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface FormattedToolOutput {
+  header: string;
+  summary: string;
+  showContent: boolean;
+  content?: string;
+}
+
+function formatToolOutput(
+  toolName: string,
+  args: Record<string, unknown>,
+  result: string
+): FormattedToolOutput {
+  const lineCount = result.split("\n").length;
+
+  switch (toolName) {
+    case "read_file": {
+      const filePath = args.path as string || args.file_path as string || "unknown";
+      const shortPath = filePath.split("/").slice(-2).join("/");
+      return {
+        header: `Read(${shortPath})`,
+        summary: `Read ${lineCount} lines`,
+        showContent: false,
+      };
+    }
+
+    case "write_file": {
+      const filePath = args.path as string || args.file_path as string || "unknown";
+      const shortPath = filePath.split("/").slice(-2).join("/");
+      const content = args.content as string || "";
+      const writtenLines = content.split("\n").length;
+      return {
+        header: `Write(${shortPath})`,
+        summary: `Wrote ${writtenLines} lines`,
+        showContent: false,
+      };
+    }
+
+    case "list_directory": {
+      const dirPath = args.path as string || args.directory as string || ".";
+      const shortPath = dirPath === "." ? "." : dirPath.split("/").slice(-2).join("/");
+      const entries = result.trim().split("\n").filter(Boolean).length;
+      return {
+        header: `ListDir(${shortPath})`,
+        summary: `${entries} entries`,
+        showContent: true,
+        content: result.length > 500 ? result.slice(0, 500) + "\n..." : result,
+      };
+    }
+
+    case "bash": {
+      const command = args.command as string || "";
+      const shortCommand = command.length > 60 ? command.slice(0, 60) + "..." : command;
+      const hasOutput = Boolean(result && result !== "(no output)");
+      return {
+        header: `Bash: ${shortCommand}`,
+        summary: hasOutput ? `${lineCount} lines` : "(no output)",
+        showContent: hasOutput && lineCount <= 30,
+        content: hasOutput ? (result.length > 1000 ? result.slice(0, 1000) + "\n..." : result) : undefined,
+      };
+    }
+
+    case "search_files":
+    case "grep": {
+      const pattern = args.pattern as string || "";
+      const matches = result.trim().split("\n").filter(Boolean).length;
+      return {
+        header: `Search: "${pattern}"`,
+        summary: `${matches} matches`,
+        showContent: matches <= 20,
+        content: matches <= 20 ? result : result.split("\n").slice(0, 20).join("\n") + `\n... (${matches - 20} more)`,
+      };
+    }
+
+    default: {
+      // For unknown tools, show truncated content
+      return {
+        header: toolName,
+        summary: `${lineCount} lines`,
+        showContent: lineCount <= 20,
+        content: result.length > 1000 ? result.slice(0, 1000) + "\n..." : result,
+      };
+    }
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Message Display Components
 // ─────────────────────────────────────────────────────────────────────────────
 
-const MessageBubble: React.FC<{ message: ChatMessage }> = ({ message }) => {
+const MessageBubble: React.FC<{ message: ChatMessage }> = React.memo(({ message }) => {
   const roleColors: Record<string, string> = {
     user: "cyan",
     assistant: "green",
@@ -47,33 +146,76 @@ const MessageBubble: React.FC<{ message: ChatMessage }> = ({ message }) => {
     tool: "magenta",
   };
 
+  // Handle user-initiated bash commands (!command) - show raw output
+  if (message.role === "tool" && message.isUserBash) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text wrap="wrap">{message.content}</Text>
+      </Box>
+    );
+  }
+
+  // Handle agent tool messages with pretty formatting
+  if (message.role === "tool" && message.toolName && message.toolArgs) {
+    const formatted = formatToolOutput(message.toolName, message.toolArgs, message.content);
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text color="magenta">
+          {formatted.header}
+        </Text>
+        <Box marginLeft={2}>
+          <Text color="gray">⎿ {formatted.summary}</Text>
+        </Box>
+        {formatted.showContent && formatted.content && (
+          <Box marginLeft={4} flexDirection="column">
+            <Text wrap="wrap" dimColor>{formatted.content}</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  // Handle tool messages without args (fallback)
+  if (message.role === "tool") {
+    const label = message.toolName || "Tool";
+    const content = message.content.length > 1000
+      ? message.content.slice(0, 1000) + "\n... (truncated)"
+      : message.content;
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text color="magenta">{label}:</Text>
+        <Box marginLeft={2}>
+          <Text wrap="wrap" dimColor>{content}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
   const roleLabels: Record<string, string> = {
     user: "You",
     assistant: "Agent",
     system: "System",
-    tool: `Tool${message.toolName ? `: ${message.toolName}` : ""}`,
   };
 
   const color = roleColors[message.role] || "white";
   const label = roleLabels[message.role] || message.role;
 
-  // Truncate long tool outputs
-  let content = message.content;
-  if (message.role === "tool" && content.length > 1000) {
-    content = content.slice(0, 1000) + "\n... (truncated)";
-  }
-
   return (
     <Box flexDirection="column" marginBottom={1}>
       <Text color={color} bold>
         {label}:
       </Text>
       <Box marginLeft={2}>
-        <Text wrap="wrap">{content}</Text>
+        {message.role === "assistant" ? (
+          <Markdown>{message.content}</Markdown>
+        ) : (
+          <Text wrap="wrap">{message.content}</Text>
+        )}
       </Box>
     </Box>
   );
-};
+});
+MessageBubble.displayName = 'MessageBubble';
 
 const StreamingMessage: React.FC<{ content: string }> = ({ content }) => (
   <Box flexDirection="column" marginBottom={1}>
@@ -81,20 +223,36 @@ const StreamingMessage: React.FC<{ content: string }> = ({ content }) => (
       Agent: <Text color="gray">(streaming...)</Text>
     </Text>
     <Box marginLeft={2}>
-      <Text wrap="wrap">{content || "..."}</Text>
+      {content ? <Markdown>{content}</Markdown> : <Text>...</Text>}
     </Box>
   </Box>
 );
 
-const ToolCallIndicator: React.FC<{ toolName: string }> = ({ toolName }) => (
-  <Box marginBottom={1}>
-    <Text color="magenta">
-      <Spinner type="dots" /> Calling tool: {toolName}
-    </Text>
-  </Box>
-);
+const ToolCallIndicator: React.FC<{ toolCall: ToolCallInfo }> = React.memo(({ toolCall }) => {
+  // Show a nice summary of what tool is being called
+  let displayText = toolCall.name;
+  if (toolCall.name === "bash" && toolCall.args.command) {
+    const cmd = toolCall.args.command as string;
+    displayText = `bash: ${cmd.length > 50 ? cmd.slice(0, 50) + "..." : cmd}`;
+  } else if ((toolCall.name === "read_file" || toolCall.name === "write_file") && (toolCall.args.path || toolCall.args.file_path)) {
+    const path = (toolCall.args.path || toolCall.args.file_path) as string;
+    displayText = `${toolCall.name}: ${path.split("/").slice(-2).join("/")}`;
+  } else if (toolCall.name === "list_directory" && (toolCall.args.path || toolCall.args.directory)) {
+    const path = (toolCall.args.path || toolCall.args.directory) as string;
+    displayText = `list_directory: ${path}`;
+  }
 
-const FileReferencesIndicator: React.FC<{ refs: FileReference[] }> = ({ refs }) => {
+  return (
+    <Box marginBottom={1}>
+      <Text color="magenta">
+        <Spinner type="dots" /> {displayText}
+      </Text>
+    </Box>
+  );
+});
+ToolCallIndicator.displayName = 'ToolCallIndicator';
+
+const FileReferencesIndicator: React.FC<{ refs: FileReference[] }> = React.memo(({ refs }) => {
   if (refs.length === 0) return null;
 
   return (
@@ -111,7 +269,8 @@ const FileReferencesIndicator: React.FC<{ refs: FileReference[] }> = ({ refs })
       ))}
     </Box>
   );
-};
+});
+FileReferencesIndicator.displayName = 'FileReferencesIndicator';
 
 // File autocomplete dropdown
 const FileSuggestions: React.FC<{
@@ -145,14 +304,49 @@ const FileSuggestions: React.FC<{
 
 // Extract @path from end of input
 function extractAtPath(input: string): { path: string; start: number } | null {
-  // Match @ followed by path characters at end of string
   const match = input.match(/@([\w\-.\/]*)$/);
   if (!match) return null;
   return { path: match[1], start: input.length - match[0].length };
 }
 
-const StatusBar: React.FC<{ budgetSummary: string; isProcessing: boolean }> = ({
-  budgetSummary,
+// Model selection component
+const ModelSelector: React.FC<{
+  selectedIndex: number;
+  currentModel: string | undefined;
+}> = ({ selectedIndex, currentModel }) => {
+  const effectiveModel = currentModel || DEFAULT_MLE_MODEL;
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1} marginBottom={1}>
+      <Text color="cyan" bold>
+        Select a model: <Text color="gray">(↑/↓ navigate, Enter select, Esc cancel)</Text>
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {AVAILABLE_MLE_MODELS.map((model, i) => {
+          const isSelected = i === selectedIndex;
+          const isCurrent = model.id === effectiveModel;
+          return (
+            <Box key={model.id}>
+              <Text
+                color={isSelected ? "black" : isCurrent ? "cyan" : "white"}
+                backgroundColor={isSelected ? "cyan" : undefined}
+                bold={isSelected}
+              >
+                {" "}{isSelected ? "❯" : " "} {model.name}
+                <Text dimColor={!isSelected}> - {model.description}</Text>
+                {isCurrent && <Text color={isSelected ? "black" : "green"}> (current)</Text>}
+                {" "}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+
+const StatusBar: React.FC<{ serverStatus: string; isProcessing: boolean }> = ({
+  serverStatus,
   isProcessing,
 }) => (
   <Box
@@ -163,7 +357,7 @@ const StatusBar: React.FC<{ budgetSummary: string; isProcessing: boolean }> = ({
   >
     <Text dimColor>
       {isProcessing ? "Processing... | " : ""}
-      {budgetSummary}
+      {serverStatus}
     </Text>
   </Box>
 );
@@ -173,11 +367,10 @@ const StatusBar: React.FC<{ budgetSummary: string; isProcessing: boolean }> = ({
 // ─────────────────────────────────────────────────────────────────────────────
 
 export interface ChatAppProps {
-  config: AgentConfig;
   initialMessage?: string;
 }
 
-export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
+export const ChatApp: React.FC<ChatAppProps> = ({ initialMessage }) => {
   const { exit } = useApp();
   const { isRawModeSupported } = useStdin();
 
@@ -191,8 +384,11 @@ export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
   });
 
   const [input, setInput] = useState("");
-  const [agent, setAgent] = useState<Agent | null>(null);
-  const [budgetSummary, setBudgetSummary] = useState("Initializing...");
+  const [client, setClient] = useState<WebSocketClient | null>(null);
+  const [toolExecutor, setToolExecutor] = useState<ToolExecutor | null>(null);
+  const [fileResolver, setFileResolver] = useState<FileResolver | null>(null);
+  const [serverStatus, setServerStatus] = useState("Connecting...");
+  const [history, setHistory] = useState<HistoryMessage[]>([]);
 
   // Autocomplete state
   const [suggestions, setSuggestions] = useState<string[]>([]);
@@ -200,94 +396,67 @@ export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [currentAtPath, setCurrentAtPath] = useState<{ path: string; start: number } | null>(null);
 
+  // Model selection state
+  const [showModelSelect, setShowModelSelect] = useState(false);
+  const [modelSelectedIndex, setModelSelectedIndex] = useState(0);
+  const [currentMleModel, setCurrentMleModel] = useState<string | undefined>(getMleModel());
+
   // Streaming content refs for throttled updates
   const streamBufferRef = useRef("");
   const streamUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Initialize agent
+  // Session tracking refs
+  const sessionStartTimeRef = useRef<number>(Date.now());
+  const toolCallCountRef = useRef<number>(0);
+  const messageCountRef = useRef<number>(0);
+
+  // Initialize client, tool executor, and file resolver
   useEffect(() => {
-    const newAgent = new Agent(config, {
-      onStream: (chunk) => {
-        // Accumulate in buffer
-        streamBufferRef.current += chunk;
-
-        // Throttle UI updates to every 50ms
-        if (!streamUpdateTimerRef.current) {
-          streamUpdateTimerRef.current = setTimeout(() => {
-            setState((s) => ({
-              ...s,
-              streamingContent: streamBufferRef.current,
-            }));
-            streamUpdateTimerRef.current = null;
-          }, 50);
-        }
-      },
-      onToolCall: (toolCall) => {
-        setState((s) => ({
-          ...s,
-          currentToolCall: toolCall.name,
-        }));
-      },
-      onToolResult: (result) => {
-        setState((s) => ({
-          ...s,
-          currentToolCall: null,
-          messages: [
-            ...s.messages,
-            {
-              role: "tool",
-              content: result.output || result.error || "(no output)",
-              timestamp: new Date(),
-              toolName: s.currentToolCall || undefined,
-            },
-          ],
-        }));
-      },
-      onBudgetWarning: (warnings) => {
-        setState((s) => ({
-          ...s,
-          messages: [
-            ...s.messages,
-            {
-              role: "system",
-              content: `⚠️ Budget warning: ${warnings.join(", ")}`,
-              timestamp: new Date(),
-            },
-          ],
-        }));
-      },
-      onFileReference: (refs) => {
-        setState((s) => ({
-          ...s,
-          fileReferences: refs,
-        }));
-      },
-      onError: (error) => {
-        setState((s) => ({
-          ...s,
-          error: error.message,
-          isProcessing: false,
-        }));
-      },
-    });
+    // Track session start
+    sessionStartTimeRef.current = Date.now();
+    toolCallCountRef.current = 0;
+    const model = getMleModel() || DEFAULT_MLE_MODEL;
+    trackChatSessionStart("mle-agent", model);
+
+    const newClient = new WebSocketClient();
+    setClient(newClient);
 
-    // Register tools
-    newAgent.registerTool(createBashTool({ cwd: process.cwd() }));
-    newAgent.registerTools(createFilesystemTools());
-    newAgent.registerTool(createSandboxTool());
+    const executor = new ToolExecutor({ workingDirectory: process.cwd() });
+    setToolExecutor(executor);
 
-    setAgent(newAgent);
+    const resolver = new FileResolver(process.cwd());
+    setFileResolver(resolver);
 
-    // Update budget summary - only when agent is initialized
-    setBudgetSummary(newAgent.getBudgetStatus().summary);
+    // Check server health and connect
+    newClient.health().then(async (healthy) => {
+      if (healthy) {
+        try {
+          await newClient.connect();
+          setServerStatus("Connected to Pioneer server (WebSocket)");
+        } catch (err) {
+          setServerStatus("⚠️ WebSocket connection failed");
+        }
+      } else {
+        setServerStatus("⚠️ Server not reachable - is Pioneer running on port 5001?");
+      }
+    });
+
+    return () => {
+      // Track session end
+      const durationMs = Date.now() - sessionStartTimeRef.current;
+      trackChatSessionEnd(durationMs, messageCountRef.current, toolCallCountRef.current);
+      newClient.disconnect();
+    };
+  }, []);
 
-    return () => { };
-  }, [config]);
+  // Keep message count ref in sync for telemetry
+  useEffect(() => {
+    messageCountRef.current = state.messages.filter(m => m.role === "user").length;
+  }, [state.messages]);
 
   // Update file suggestions when input changes
   useEffect(() => {
-    if (!agent || state.isProcessing) {
-      // Only update if currently showing suggestions
+    if (!fileResolver || state.isProcessing) {
       if (showSuggestions) {
         setSuggestions([]);
         setShowSuggestions(false);
@@ -297,33 +466,31 @@ export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
 
     const atPath = extractAtPath(input);
 
-    // Only update currentAtPath if it changed
     if (JSON.stringify(atPath) !== JSON.stringify(currentAtPath)) {
       setCurrentAtPath(atPath);
     }
 
     if (atPath) {
-      const newSuggestions = agent.getFileSuggestions(atPath.path);
+      const newSuggestions = fileResolver.getSuggestions(atPath.path);
       setSuggestions(newSuggestions);
       setShowSuggestions(newSuggestions.length > 0);
       setSelectedIndex(0);
     } else if (showSuggestions) {
-      // Only clear if currently showing
       setSuggestions([]);
       setShowSuggestions(false);
     }
-  }, [input, agent, state.isProcessing]);
+  }, [input, fileResolver, state.isProcessing]);
 
   // Handle initial message if provided
   useEffect(() => {
-    if (agent && initialMessage && state.messages.length === 0) {
+    if (client && initialMessage && state.messages.length === 0) {
       handleSubmit(initialMessage);
     }
-  }, [agent, initialMessage]);
+  }, [client, initialMessage]);
 
   const handleSubmit = useCallback(
     async (value: string) => {
-      if (!agent || !value.trim() || state.isProcessing) return;
+      if (!client || !value.trim() || state.isProcessing) return;
 
       const userMessage = value.trim();
       setInput("");
@@ -335,8 +502,8 @@ export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
       }
 
       if (userMessage === "/clear") {
-        agent.clearHistory();
         streamBufferRef.current = "";
+        setHistory([]);
         setState({
           messages: [],
           isProcessing: false,
@@ -360,15 +527,8 @@ export const ChatApp: React.FC<ChatAppProps> = ({ config, initialMessage }) => {
   /help   - Show this help
   /exit   - Exit the chat
   /tools  - List available tools
-  /model  - Show/switch model
-  /budget - Show budget status
-
-Budget adjustment:
-  /budget tokens <n>  - Set max tokens (0=unlimited)
-  /budget cost <n>    - Set max cost in USD
-  /budget time <n>    - Set max time in seconds
-  /budget tools <n>   - Set max tool calls per turn
-  /budget unlimited   - Remove all limits
+  /status - Check server connection
+  /model  - Select AI model (Haiku/Sonnet/Opus)
 
 Direct bash mode:
   !<command>    - Execute command directly (no agent)
@@ -376,7 +536,7 @@ Direct bash mode:
   !pwd          - Example: print working directory
 
 File references:
-  @file.ts      - Include file contents
+  @file.ts      - Include file contents in message
   @src/         - Include directory listing
   @package.json - Include any file by path`,
               timestamp: new Date(),
@@ -387,119 +547,62 @@ File references:
       }
 
       if (userMessage === "/tools") {
-        const tools = agent.getTools();
-        const toolList = tools
-          .map((t) => `  • ${t.name}: ${t.description}`)
-          .join("\n");
-        setState((s) => ({
-          ...s,
-          messages: [
-            ...s.messages,
-            {
-              role: "system",
-              content: `Available tools:\n${toolList}`,
-              timestamp: new Date(),
-            },
-          ],
-        }));
-        return;
-      }
-
-      if (userMessage === "/model") {
-        const info = agent.getModelInfo();
-        const modelHelp = `🤖 Current Model
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-Provider: ${info.provider}
-Model: ${info.model}
-
-Switch with /model <name>. Examples:
-  Anthropic (Claude 4.5):
-    claude-opus-4-5-20251101    (strongest)
-    claude-sonnet-4-5-20250929  (balanced)
-    claude-haiku-4-5-20251001   (fast/cheap)
-  OpenAI:
-    gpt-4o, gpt-4o-mini, o1, o3-mini`;
-        setState((s) => ({
-          ...s,
-          messages: [...s.messages, { role: "system", content: modelHelp, timestamp: new Date() }],
-        }));
-        return;
-      }
-
-      if (userMessage.startsWith("/model ")) {
-        const newModel = userMessage.slice(7).trim();
-        if (newModel) {
-          agent.setModel(newModel);
+        try {
+          const tools = await client.listTools();
+          const toolList = tools
+            .map((t) => `  • ${t.name}: ${t.description}`)
+            .join("\n");
+          setState((s) => ({
+            ...s,
+            messages: [
+              ...s.messages,
+              {
+                role: "system",
+                content: `Available tools:\n${toolList}`,
+                timestamp: new Date(),
+              },
+            ],
+          }));
+        } catch (error) {
           setState((s) => ({
             ...s,
-            messages: [...s.messages, { role: "system", content: `✓ Switched to model: ${newModel}`, timestamp: new Date() }],
+            messages: [
+              ...s.messages,
+              {
+                role: "system",
+                content: `Error fetching tools: ${error}`,
+                timestamp: new Date(),
+              },
+            ],
           }));
         }
         return;
       }
 
-      if (userMessage === "/budget") {
-        const status = agent.getBudgetStatus();
-        const maxTools = agent.getMaxToolCalls();
-        const budgetInfo = `📊 Budget Status
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-${status.summary}
-Max tool calls: ${maxTools}
-
-⚙️  Adjust Limits
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-/budget tokens <n>   Set max tokens (0 = unlimited)
-/budget cost <n>     Set max cost in USD (0 = unlimited)
-/budget time <n>     Set max time in seconds (0 = unlimited)
-/budget tools <n>    Set max tool calls per turn (0 = unlimited)
-/budget unlimited    Remove all limits`;
-
+      if (userMessage === "/status") {
+        const healthy = await client.health();
         setState((s) => ({
           ...s,
           messages: [
             ...s.messages,
-            { role: "system", content: budgetInfo, timestamp: new Date() },
+            {
+              role: "system",
+              content: healthy
+                ? "✅ Connected to Pioneer server"
+                : "❌ Cannot reach Pioneer server",
+              timestamp: new Date(),
+            },
           ],
         }));
         return;
       }
 
-      // Budget adjustment commands
-      if (userMessage.startsWith("/budget ")) {
-        const parts = userMessage.split(" ");
-        const subCmd = parts[1];
-        const value = parts[2];
-
-        let message = "";
-        if (subCmd === "unlimited") {
-          agent.updateBudget({ maxTokens: undefined, maxCost: undefined, maxTime: undefined, maxIterations: undefined });
-          agent.setMaxToolCalls(1000);
-          message = "✓ All limits removed";
-        } else if (subCmd === "tokens" && value) {
-          const val = parseInt(value, 10);
-          agent.updateBudget({ maxTokens: val === 0 ? undefined : val });
-          message = val === 0 ? "✓ Token limit removed" : `✓ Token limit set to ${val.toLocaleString()}`;
-        } else if (subCmd === "cost" && value) {
-          const val = parseFloat(value);
-          agent.updateBudget({ maxCost: val === 0 ? undefined : val });
-          message = val === 0 ? "✓ Cost limit removed" : `✓ Cost limit set to $${val}`;
-        } else if (subCmd === "time" && value) {
-          const val = parseInt(value, 10);
-          agent.updateBudget({ maxTime: val === 0 ? undefined : val });
-          message = val === 0 ? "✓ Time limit removed" : `✓ Time limit set to ${val}s`;
-        } else if (subCmd === "tools" && value) {
-          const val = parseInt(value, 10);
-          agent.setMaxToolCalls(val === 0 ? 1000 : val);
-          message = val === 0 ? "✓ Tool call limit removed" : `✓ Max tool calls set to ${val}`;
-        } else {
-          message = "Usage: /budget [tokens|cost|time|tools] <value> or /budget unlimited";
-        }
-
-        setState((s) => ({
-          ...s,
-          messages: [...s.messages, { role: "system", content: message, timestamp: new Date() }],
-        }));
-        setBudgetSummary(agent.getBudgetStatus().summary);
+      if (userMessage === "/model") {
+        // Find the index of the current model
+        const currentModel = currentMleModel || DEFAULT_MLE_MODEL;
+        const currentIndex = AVAILABLE_MLE_MODELS.findIndex(m => m.id === currentModel);
+        setModelSelectedIndex(currentIndex >= 0 ? currentIndex : 0);
+        setShowModelSelect(true);
         return;
       }
 
@@ -508,14 +611,12 @@ Max tool calls: ${maxTools}
         const bashCommand = userMessage.slice(1).trim();
         if (!bashCommand) return;
 
-        // Show command being executed
         setState((s) => ({
           ...s,
           messages: [...s.messages, { role: "user", content: userMessage, timestamp: new Date() }],
           isProcessing: true,
         }));
 
-        // Execute directly and collect output
         let output = "";
         try {
           for await (const chunk of executeBashStream(bashCommand, { cwd: process.cwd() })) {
@@ -529,12 +630,36 @@ Max tool calls: ${maxTools}
 
         setState((s) => ({
           ...s,
-          messages: [...s.messages, { role: "tool", content: output || "(no output)", timestamp: new Date(), toolName: "bash" }],
+          messages: [...s.messages, {
+            role: "tool",
+            content: output || "(no output)",
+            timestamp: new Date(),
+            toolName: "bash",
+            isUserBash: true,
+          }],
           isProcessing: false,
         }));
         return;
       }
 
+      // Process file references (@file syntax) using FileResolver
+      let processedMessage = userMessage;
+      let fileRefs: FileReference[] = [];
+      if (fileResolver) {
+        const resolved = fileResolver.resolve(userMessage);
+        fileRefs = resolved.references;
+        // Prepend the context block to the message if there are resolved files
+        if (resolved.contextBlock) {
+          processedMessage = resolved.contextBlock + "\n" + userMessage;
+        }
+      }
+
+      // Update file references display
+      setState((s) => ({
+        ...s,
+        fileReferences: fileRefs,
+      }));
+
       // Add user message
       streamBufferRef.current = "";
       if (streamUpdateTimerRef.current) {
@@ -549,29 +674,146 @@ Max tool calls: ${maxTools}
         ],
         isProcessing: true,
         streamingContent: "",
-        fileReferences: [],
         error: null,
       }));
 
-      try {
-        const response = await agent.chat(userMessage, true);
-
-        // Clear any pending stream update
-        if (streamUpdateTimerRef.current) {
-          clearTimeout(streamUpdateTimerRef.current);
-          streamUpdateTimerRef.current = null;
-        }
-        streamBufferRef.current = "";
+      // Track final response for history
+      let finalResponse = "";
 
-        setState((s) => ({
-          ...s,
-          messages: [
-            ...s.messages,
-            { role: "assistant", content: response, timestamp: new Date() },
-          ],
-          isProcessing: false,
-          streamingContent: "",
-        }));
+      try {
+        await client.chat(
+          processedMessage,
+          {
+            onStream: (chunk) => {
+              streamBufferRef.current += chunk;
+              if (!streamUpdateTimerRef.current) {
+                streamUpdateTimerRef.current = setTimeout(() => {
+                  setState((s) => ({
+                    ...s,
+                    streamingContent: streamBufferRef.current,
+                  }));
+                  streamUpdateTimerRef.current = null;
+                }, 50);
+              }
+            },
+            onToolStart: (name, callId, args) => {
+              toolCallCountRef.current++;
+              setState((s) => ({
+                ...s,
+                currentToolCall: { name, args: args as Record<string, unknown> },
+              }));
+            },
+            onToolCall: async (call) => {
+              // Execute tool locally using ToolExecutor
+              // NOTE: Don't add message here - server will send tool_result event
+              // which triggers onToolResult and adds the message there
+              if (!toolExecutor) {
+                throw new Error("Tool executor not initialized");
+              }
+              setState((s) => ({
+                ...s,
+                currentToolCall: { name: call.tool, args: call.args },
+              }));
+              const result = await toolExecutor.execute(call.tool, call.args);
+              // Keep currentToolCall for onToolResult to use
+              return result;
+            },
+            onToolResult: (name, callId, result) => {
+              // Tool result from server (both Felix tools AND client-side tool results echoed back)
+              setState((s) => {
+                // Get args from currentToolCall if available
+                const toolArgs = s.currentToolCall?.name === name ? s.currentToolCall.args : {};
+                return {
+                  ...s,
+                  currentToolCall: null,
+                  messages: [
+                    ...s.messages,
+                    {
+                      role: "tool",
+                      content: typeof result === "string" ? result : JSON.stringify(result, null, 2),
+                      timestamp: new Date(),
+                      toolName: name,
+                      toolArgs,
+                    },
+                  ],
+                };
+              });
+            },
+            onToolError: (name, callId, error) => {
+              setState((s) => ({
+                ...s,
+                currentToolCall: null,
+                messages: [
+                  ...s.messages,
+                  {
+                    role: "tool",
+                    content: `Error: ${error}`,
+                    timestamp: new Date(),
+                    toolName: name,
+                  },
+                ],
+              }));
+            },
+            onAssistantMessage: (content) => {
+              finalResponse = content;
+            },
+            onError: (error) => {
+              setState((s) => ({
+                ...s,
+                error: error.message,
+                isProcessing: false,
+              }));
+            },
+            onDone: (backendMessages) => {
+              // Clear any pending stream update
+              if (streamUpdateTimerRef.current) {
+                clearTimeout(streamUpdateTimerRef.current);
+                streamUpdateTimerRef.current = null;
+              }
+              streamBufferRef.current = "";
+
+              console.log("[DEBUG] ChatApp onDone received messages:", backendMessages?.length, "roles:", backendMessages?.map(m => m.role));
+
+              // Update history with full message history from backend (includes tool calls)
+              if (backendMessages && backendMessages.length > 0) {
+                // Backend sends the complete history including this turn's messages
+                console.log("[DEBUG] Setting history to backendMessages");
+                setHistory(backendMessages);
+              } else if (finalResponse) {
+                // Fallback if backend doesn't send messages (legacy)
+                setHistory((h) => [
+                  ...h,
+                  { role: "user", content: processedMessage },
+                  { role: "assistant", content: finalResponse },
+                ]);
+              }
+
+              // Update UI state
+              if (finalResponse) {
+                setState((s) => ({
+                  ...s,
+                  messages: [
+                    ...s.messages,
+                    { role: "assistant", content: finalResponse, timestamp: new Date() },
+                  ],
+                  isProcessing: false,
+                  streamingContent: "",
+                }));
+              } else {
+                setState((s) => ({
+                  ...s,
+                  isProcessing: false,
+                  streamingContent: "",
+                }));
+              }
+            },
+          },
+          {
+            history: history,
+            fileReferences: fileRefs.filter(r => r.exists).map(r => r.path),
+            config: currentMleModel ? { model: currentMleModel } : undefined,
+          }
+        );
       } catch (error) {
         streamBufferRef.current = "";
         setState((s) => ({
@@ -580,10 +822,8 @@ Max tool calls: ${maxTools}
           isProcessing: false,
         }));
       }
-
-      setBudgetSummary(agent.getBudgetStatus().summary);
     },
-    [agent, state.isProcessing, exit]
+    [client, toolExecutor, fileResolver, state.isProcessing, history, exit, currentMleModel]
   );
 
   // Insert selected suggestion into input
@@ -596,17 +836,21 @@ Max tool calls: ${maxTools}
     setSuggestions([]);
   }, [input, currentAtPath]);
 
-  // Stop the agent
+  // Stop the request (disconnect and reconnect)
   const handleStop = useCallback(() => {
-    if (agent && state.isProcessing) {
-      agent.stop();
+    if (client && state.isProcessing) {
+      client.disconnect();
+      // Reconnect for future messages
+      client.connect().catch(() => {
+        setServerStatus("⚠️ Reconnection failed");
+      });
       setState((s) => ({
         ...s,
         isProcessing: false,
         currentToolCall: null,
       }));
     }
-  }, [agent, state.isProcessing]);
+  }, [client, state.isProcessing]);
 
   // Handle keyboard shortcuts
   useInput((char, key) => {
@@ -615,12 +859,46 @@ Max tool calls: ${maxTools}
       return;
     }
 
-    // Escape to stop agent when processing
     if (key.escape && state.isProcessing) {
       handleStop();
       return;
     }
 
+    // Handle model selection navigation
+    if (showModelSelect) {
+      if (key.downArrow) {
+        setModelSelectedIndex((i) => Math.min(i + 1, AVAILABLE_MLE_MODELS.length - 1));
+        return;
+      }
+      if (key.upArrow) {
+        setModelSelectedIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (key.return) {
+        const selectedModel = AVAILABLE_MLE_MODELS[modelSelectedIndex];
+        setMleModel(selectedModel.id);
+        setCurrentMleModel(selectedModel.id);
+        setShowModelSelect(false);
+        setState((s) => ({
+          ...s,
+          messages: [
+            ...s.messages,
+            {
+              role: "system",
+              content: `✓ Model set to: ${selectedModel.name} (${selectedModel.id})`,
+              timestamp: new Date(),
+            },
+          ],
+        }));
+        return;
+      }
+      if (key.escape) {
+        setShowModelSelect(false);
+        return;
+      }
+      return; // Consume all other input when model select is shown
+    }
+
     // Handle suggestion navigation when suggestions are shown
     if (showSuggestions && suggestions.length > 0) {
       if (key.downArrow) {
@@ -642,13 +920,13 @@ Max tool calls: ${maxTools}
     }
   });
 
-  if (!agent) {
+  if (!client) {
     return (
       <Box>
         <Text color="yellow">
           <Spinner type="dots" />
         </Text>
-        <Text> Initializing agent...</Text>
+        <Text> Initializing...</Text>
       </Box>
     );
   }
@@ -660,7 +938,7 @@ Max tool calls: ${maxTools}
         <Text color="cyan" bold>
           Pioneer Agent
         </Text>
-        <Text dimColor> — /help for commands, @ for files, Ctrl+C to exit</Text>
+        <Text dimColor> — /help for commands, /model to change AI, @ for files, Ctrl+C to exit</Text>
       </Box>
 
       {/* Messages */}
@@ -681,7 +959,7 @@ Max tool calls: ${maxTools}
 
         {/* Tool call indicator */}
         {state.currentToolCall && (
-          <ToolCallIndicator toolName={state.currentToolCall} />
+          <ToolCallIndicator toolCall={state.currentToolCall} />
         )}
 
         {/* Error display */}
@@ -701,6 +979,14 @@ Max tool calls: ${maxTools}
         />
       )}
 
+      {/* Model selection overlay */}
+      {showModelSelect && (
+        <ModelSelector
+          selectedIndex={modelSelectedIndex}
+          currentModel={currentMleModel}
+        />
+      )}
+
       {/* Input area */}
       <Box marginTop={1}>
         {state.isProcessing ? (
@@ -721,7 +1007,7 @@ Max tool calls: ${maxTools}
                 value={input}
                 onChange={setInput}
                 onSubmit={handleSubmit}
-                placeholder="Type a message... (@ for files)"
+                placeholder="Type a message... (@ for files, ! for bash)"
               />
             ) : (
               <Text dimColor>Raw mode not supported in this terminal</Text>
@@ -731,8 +1017,7 @@ Max tool calls: ${maxTools}
       </Box>
 
       {/* Status bar */}
-      <StatusBar budgetSummary={budgetSummary} isProcessing={state.isProcessing} />
+      <StatusBar serverStatus={serverStatus} isProcessing={state.isProcessing} />
     </Box>
   );
 };
-