@fastino-ai/pioneer-cli 0.2.10 → 0.3.0

package/src/chat/ChatApp.tsx

@@ -1,1028 +0,0 @@
-/**
- * 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 { 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
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface ChatMessage {
-  role: "user" | "assistant" | "system" | "tool";
-  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: 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 }> = React.memo(({ message }) => {
-  const roleColors: Record<string, string> = {
-    user: "cyan",
-    assistant: "green",
-    system: "yellow",
-    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",
-  };
-
-  const color = roleColors[message.role] || "white";
-  const label = roleLabels[message.role] || message.role;
-
-  return (
-    <Box flexDirection="column" marginBottom={1}>
-      <Text color={color} bold>
-        {label}:
-      </Text>
-      <Box marginLeft={2}>
-        {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}>
-    <Text color="green" bold>
-      Agent: <Text color="gray">(streaming...)</Text>
-    </Text>
-    <Box marginLeft={2}>
-      {content ? <Markdown>{content}</Markdown> : <Text>...</Text>}
-    </Box>
-  </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}`;
-  }
-
-  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 (
-    <Box flexDirection="column" marginBottom={1}>
-      <Text color="blue" bold>📎 Referenced files:</Text>
-      {refs.map((ref, i) => (
-        <Box key={i} marginLeft={2}>
-          <Text color={ref.exists ? "blue" : "red"}>
-            {ref.exists ? "✓" : "✗"} {ref.relativePath}
-            {ref.isDirectory ? "/" : ""}
-            {ref.error ? ` (${ref.error})` : ""}
-          </Text>
-        </Box>
-      ))}
-    </Box>
-  );
-});
-FileReferencesIndicator.displayName = 'FileReferencesIndicator';
-
-// File autocomplete dropdown
-const FileSuggestions: React.FC<{
-  suggestions: string[];
-  selectedIndex: number;
-  searchPath: string;
-}> = ({ suggestions, selectedIndex, searchPath }) => {
-  if (suggestions.length === 0) return null;
-
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="blue" paddingX={1} marginBottom={1}>
-      <Text color="blue" dimColor>
-        📁 {searchPath || "./"} <Text color="gray">(↑↓ navigate, Tab select, Esc close)</Text>
-      </Text>
-      {suggestions.slice(0, 10).map((suggestion, i) => (
-        <Box key={i}>
-          <Text
-            color={i === selectedIndex ? "black" : "white"}
-            backgroundColor={i === selectedIndex ? "blue" : undefined}
-          >
-            {" "}{suggestion.endsWith("/") ? "📁" : "📄"} {suggestion}{" "}
-          </Text>
-        </Box>
-      ))}
-      {suggestions.length > 10 && (
-        <Text dimColor>  ... and {suggestions.length - 10} more</Text>
-      )}
-    </Box>
-  );
-};
-
-// Extract @path from end of input
-function extractAtPath(input: string): { path: string; start: number } | null {
-  const match = input.match(/@([\w\-.\/]*)$/);
-  if (!match) return null;
-  return { path: match[1], start: input.length - match[0].length };
-}
-
-// 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
-    borderStyle="single"
-    borderColor="gray"
-    paddingX={1}
-    marginTop={1}
-  >
-    <Text dimColor>
-      {isProcessing ? "Processing... | " : ""}
-      {serverStatus}
-    </Text>
-  </Box>
-);
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main Chat Component
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface ChatAppProps {
-  initialMessage?: string;
-}
-
-export const ChatApp: React.FC<ChatAppProps> = ({ initialMessage }) => {
-  const { exit } = useApp();
-  const { isRawModeSupported } = useStdin();
-
-  const [state, setState] = useState<ChatState>({
-    messages: [],
-    isProcessing: false,
-    streamingContent: "",
-    currentToolCall: null,
-    fileReferences: [],
-    error: null,
-  });
-
-  const [input, setInput] = useState("");
-  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[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  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);
-
-  // 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(() => {
-    // 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);
-
-    const executor = new ToolExecutor({ workingDirectory: process.cwd() });
-    setToolExecutor(executor);
-
-    const resolver = new FileResolver(process.cwd());
-    setFileResolver(resolver);
-
-    // Check server health and connect
-    const serverUrl = newClient.getWebSocketUrl();
-    newClient.health().then(async (healthy) => {
-      if (healthy) {
-        try {
-          await newClient.connect();
-          setServerStatus("Connected to Pioneer server (WebSocket)");
-        } catch (err) {
-          const errorMsg = err instanceof Error ? err.message : "Unknown error";
-          setServerStatus(`⚠️ WebSocket failed (${serverUrl}): ${errorMsg}`);
-        }
-      } else {
-        setServerStatus(`⚠️ Server not reachable at ${serverUrl}`);
-      }
-    });
-
-    return () => {
-      // Track session end
-      const durationMs = Date.now() - sessionStartTimeRef.current;
-      trackChatSessionEnd(durationMs, messageCountRef.current, toolCallCountRef.current);
-      newClient.disconnect();
-    };
-  }, []);
-
-  // 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 (!fileResolver || state.isProcessing) {
-      if (showSuggestions) {
-        setSuggestions([]);
-        setShowSuggestions(false);
-      }
-      return;
-    }
-
-    const atPath = extractAtPath(input);
-
-    if (JSON.stringify(atPath) !== JSON.stringify(currentAtPath)) {
-      setCurrentAtPath(atPath);
-    }
-
-    if (atPath) {
-      const newSuggestions = fileResolver.getSuggestions(atPath.path);
-      setSuggestions(newSuggestions);
-      setShowSuggestions(newSuggestions.length > 0);
-      setSelectedIndex(0);
-    } else if (showSuggestions) {
-      setSuggestions([]);
-      setShowSuggestions(false);
-    }
-  }, [input, fileResolver, state.isProcessing]);
-
-  // Handle initial message if provided
-  useEffect(() => {
-    if (client && initialMessage && state.messages.length === 0) {
-      handleSubmit(initialMessage);
-    }
-  }, [client, initialMessage]);
-
-  const handleSubmit = useCallback(
-    async (value: string) => {
-      if (!client || !value.trim() || state.isProcessing) return;
-
-      const userMessage = value.trim();
-      setInput("");
-
-      // Handle special commands
-      if (userMessage === "/exit" || userMessage === "/quit") {
-        exit();
-        return;
-      }
-
-      if (userMessage === "/clear") {
-        streamBufferRef.current = "";
-        setHistory([]);
-        setState({
-          messages: [],
-          isProcessing: false,
-          streamingContent: "",
-          currentToolCall: null,
-          fileReferences: [],
-          error: null,
-        });
-        return;
-      }
-
-      if (userMessage === "/help") {
-        setState((s) => ({
-          ...s,
-          messages: [
-            ...s.messages,
-            {
-              role: "system",
-              content: `Available commands:
-  /clear  - Clear conversation history
-  /help   - Show this help
-  /exit   - Exit the chat
-  /tools  - List available tools
-  /status - Check server connection
-  /model  - Select AI model (Haiku/Sonnet/Opus)
-
-Direct bash mode:
-  !<command>    - Execute command directly (no agent)
-  !ls -la       - Example: list files
-  !pwd          - Example: print working directory
-
-File references:
-  @file.ts      - Include file contents in message
-  @src/         - Include directory listing
-  @package.json - Include any file by path`,
-              timestamp: new Date(),
-            },
-          ],
-        }));
-        return;
-      }
-
-      if (userMessage === "/tools") {
-        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: `Error fetching tools: ${error}`,
-                timestamp: new Date(),
-              },
-            ],
-          }));
-        }
-        return;
-      }
-
-      if (userMessage === "/status") {
-        const healthy = await client.health();
-        setState((s) => ({
-          ...s,
-          messages: [
-            ...s.messages,
-            {
-              role: "system",
-              content: healthy
-                ? "✅ Connected to Pioneer server"
-                : "❌ Cannot reach Pioneer server",
-              timestamp: new Date(),
-            },
-          ],
-        }));
-        return;
-      }
-
-      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;
-      }
-
-      // Direct bash mode: commands starting with ! execute directly without agent
-      if (userMessage.startsWith("!")) {
-        const bashCommand = userMessage.slice(1).trim();
-        if (!bashCommand) return;
-
-        setState((s) => ({
-          ...s,
-          messages: [...s.messages, { role: "user", content: userMessage, timestamp: new Date() }],
-          isProcessing: true,
-        }));
-
-        let output = "";
-        try {
-          for await (const chunk of executeBashStream(bashCommand, { cwd: process.cwd() })) {
-            if (chunk.type === "stdout" || chunk.type === "stderr") {
-              output += chunk.data;
-            }
-          }
-        } catch (err) {
-          output = `Error: ${err instanceof Error ? err.message : String(err)}`;
-        }
-
-        setState((s) => ({
-          ...s,
-          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) {
-        clearTimeout(streamUpdateTimerRef.current);
-        streamUpdateTimerRef.current = null;
-      }
-      setState((s) => ({
-        ...s,
-        messages: [
-          ...s.messages,
-          { role: "user", content: userMessage, timestamp: new Date() },
-        ],
-        isProcessing: true,
-        streamingContent: "",
-        error: null,
-      }));
-
-      // Track final response for history
-      let finalResponse = "";
-
-      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) => ({
-          ...s,
-          error: error instanceof Error ? error.message : String(error),
-          isProcessing: false,
-        }));
-      }
-    },
-    [client, toolExecutor, fileResolver, state.isProcessing, history, exit, currentMleModel]
-  );
-
-  // Insert selected suggestion into input
-  const insertSuggestion = useCallback((suggestion: string) => {
-    if (!currentAtPath) return;
-    const before = input.slice(0, currentAtPath.start);
-    const newInput = before + "@" + suggestion;
-    setInput(newInput);
-    setShowSuggestions(false);
-    setSuggestions([]);
-  }, [input, currentAtPath]);
-
-  // Stop the request (disconnect and reconnect)
-  const handleStop = useCallback(() => {
-    if (client && state.isProcessing) {
-      client.disconnect();
-      // Reconnect for future messages
-      client.connect().catch(() => {
-        setServerStatus("⚠️ Reconnection failed");
-      });
-      setState((s) => ({
-        ...s,
-        isProcessing: false,
-        currentToolCall: null,
-      }));
-    }
-  }, [client, state.isProcessing]);
-
-  // Handle keyboard shortcuts
-  useInput(
-    (char, key) => {
-    if (key.ctrl && char === "c") {
-      exit();
-      return;
-    }
-
-    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) {
-        setSelectedIndex((i) => Math.min(i + 1, suggestions.length - 1));
-        return;
-      }
-      if (key.upArrow) {
-        setSelectedIndex((i) => Math.max(i - 1, 0));
-        return;
-      }
-      if (key.tab) {
-        insertSuggestion(suggestions[selectedIndex]);
-        return;
-      }
-      if (key.escape) {
-        setShowSuggestions(false);
-        return;
-      }
-    }
-    },
-    { isActive: isRawModeSupported }
-  );
-
-  if (!client) {
-    return (
-      <Box>
-        <Text color="yellow">
-          <Spinner type="dots" />
-        </Text>
-        <Text> Initializing...</Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box flexDirection="column" paddingX={1}>
-      {/* Header */}
-      <Box marginBottom={1}>
-        <Text color="cyan" bold>
-          Pioneer Agent
-        </Text>
-        <Text dimColor> — /help for commands, /model to change AI, @ for files, Ctrl+C to exit</Text>
-      </Box>
-
-      {/* Messages */}
-      <Box flexDirection="column" flexGrow={1}>
-        {state.messages.map((msg, i) => (
-          <MessageBubble key={i} message={msg} />
-        ))}
-
-        {/* Streaming content */}
-        {state.isProcessing && state.streamingContent && (
-          <StreamingMessage content={state.streamingContent} />
-        )}
-
-        {/* File references indicator */}
-        {state.fileReferences.length > 0 && (
-          <FileReferencesIndicator refs={state.fileReferences} />
-        )}
-
-        {/* Tool call indicator */}
-        {state.currentToolCall && (
-          <ToolCallIndicator toolCall={state.currentToolCall} />
-        )}
-
-        {/* Error display */}
-        {state.error && (
-          <Box marginBottom={1}>
-            <Text color="red">Error: {state.error}</Text>
-          </Box>
-        )}
-      </Box>
-
-      {/* File suggestions dropdown */}
-      {showSuggestions && !state.isProcessing && (
-        <FileSuggestions
-          suggestions={suggestions}
-          selectedIndex={selectedIndex}
-          searchPath={currentAtPath?.path || ""}
-        />
-      )}
-
-      {/* Model selection overlay */}
-      {showModelSelect && (
-        <ModelSelector
-          selectedIndex={modelSelectedIndex}
-          currentModel={currentMleModel}
-        />
-      )}
-
-      {/* Input area */}
-      <Box marginTop={1}>
-        {state.isProcessing ? (
-          <Box>
-            <Text color="yellow">
-              <Spinner type="dots" />
-            </Text>
-            <Text> Processing... </Text>
-            <Text dimColor>(Esc to stop)</Text>
-          </Box>
-        ) : (
-          <Box>
-            <Text color="cyan" bold>
-              {">"}{" "}
-            </Text>
-            {isRawModeSupported ? (
-              <TextInput
-                value={input}
-                onChange={setInput}
-                onSubmit={handleSubmit}
-                placeholder="Type a message... (@ for files, ! for bash)"
-              />
-            ) : (
-              <Text dimColor>Raw mode not supported in this terminal</Text>
-            )}
-          </Box>
-        )}
-      </Box>
-
-      {/* Status bar */}
-      <StatusBar serverStatus={serverStatus} isProcessing={state.isProcessing} />
-    </Box>
-  );
-};