@fastino-ai/pioneer-cli 0.1.0 → 0.2.1

package/src/chat/ChatApp.tsx

@@ -0,0 +1,738 @@
+/**
+ * ChatApp - Main interactive chat interface using Ink
+ */
+
+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 { 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";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ChatMessage {
+  role: "user" | "assistant" | "system" | "tool";
+  content: string;
+  timestamp: Date;
+  toolName?: string;
+  isStreaming?: boolean;
+}
+
+interface ChatState {
+  messages: ChatMessage[];
+  isProcessing: boolean;
+  streamingContent: string;
+  currentToolCall: string | null;
+  fileReferences: FileReference[];
+  error: string | null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Message Display Components
+// ─────────────────────────────────────────────────────────────────────────────
+
+const MessageBubble: React.FC<{ message: ChatMessage }> = ({ message }) => {
+  const roleColors: Record<string, string> = {
+    user: "cyan",
+    assistant: "green",
+    system: "yellow",
+    tool: "magenta",
+  };
+
+  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>
+      </Box>
+    </Box>
+  );
+};
+
+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}>
+      <Text wrap="wrap">{content || "..."}</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 FileReferencesIndicator: React.FC<{ refs: FileReference[] }> = ({ 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>
+  );
+};
+
+// 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 {
+  // 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,
+  isProcessing,
+}) => (
+  <Box
+    borderStyle="single"
+    borderColor="gray"
+    paddingX={1}
+    marginTop={1}
+  >
+    <Text dimColor>
+      {isProcessing ? "Processing... | " : ""}
+      {budgetSummary}
+    </Text>
+  </Box>
+);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Chat Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ChatAppProps {
+  config: AgentConfig;
+  initialMessage?: string;
+}
+
+export const ChatApp: React.FC<ChatAppProps> = ({ config, 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 [agent, setAgent] = useState<Agent | null>(null);
+  const [budgetSummary, setBudgetSummary] = useState("Initializing...");
+
+  // 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);
+
+  // Streaming content refs for throttled updates
+  const streamBufferRef = useRef("");
+  const streamUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Initialize agent
+  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,
+        }));
+      },
+    });
+
+    // Register tools
+    newAgent.registerTool(createBashTool({ cwd: process.cwd() }));
+    newAgent.registerTools(createFilesystemTools());
+    newAgent.registerTool(createSandboxTool());
+
+    setAgent(newAgent);
+
+    // Update budget summary - only when agent is initialized
+    setBudgetSummary(newAgent.getBudgetStatus().summary);
+
+    return () => { };
+  }, [config]);
+
+  // Update file suggestions when input changes
+  useEffect(() => {
+    if (!agent || state.isProcessing) {
+      // Only update if currently showing suggestions
+      if (showSuggestions) {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+      return;
+    }
+
+    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);
+      setSuggestions(newSuggestions);
+      setShowSuggestions(newSuggestions.length > 0);
+      setSelectedIndex(0);
+    } else if (showSuggestions) {
+      // Only clear if currently showing
+      setSuggestions([]);
+      setShowSuggestions(false);
+    }
+  }, [input, agent, state.isProcessing]);
+
+  // Handle initial message if provided
+  useEffect(() => {
+    if (agent && initialMessage && state.messages.length === 0) {
+      handleSubmit(initialMessage);
+    }
+  }, [agent, initialMessage]);
+
+  const handleSubmit = useCallback(
+    async (value: string) => {
+      if (!agent || !value.trim() || state.isProcessing) return;
+
+      const userMessage = value.trim();
+      setInput("");
+
+      // Handle special commands
+      if (userMessage === "/exit" || userMessage === "/quit") {
+        exit();
+        return;
+      }
+
+      if (userMessage === "/clear") {
+        agent.clearHistory();
+        streamBufferRef.current = "";
+        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
+  /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
+
+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
+  @src/         - Include directory listing
+  @package.json - Include any file by path`,
+              timestamp: new Date(),
+            },
+          ],
+        }));
+        return;
+      }
+
+      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);
+          setState((s) => ({
+            ...s,
+            messages: [...s.messages, { role: "system", content: `✓ Switched to model: ${newModel}`, 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`;
+
+        setState((s) => ({
+          ...s,
+          messages: [
+            ...s.messages,
+            { role: "system", content: budgetInfo, 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);
+        return;
+      }
+
+      // Direct bash mode: commands starting with ! execute directly without agent
+      if (userMessage.startsWith("!")) {
+        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() })) {
+            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" }],
+          isProcessing: false,
+        }));
+        return;
+      }
+
+      // 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: "",
+        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 = "";
+
+        setState((s) => ({
+          ...s,
+          messages: [
+            ...s.messages,
+            { role: "assistant", content: response, timestamp: new Date() },
+          ],
+          isProcessing: false,
+          streamingContent: "",
+        }));
+      } catch (error) {
+        streamBufferRef.current = "";
+        setState((s) => ({
+          ...s,
+          error: error instanceof Error ? error.message : String(error),
+          isProcessing: false,
+        }));
+      }
+
+      setBudgetSummary(agent.getBudgetStatus().summary);
+    },
+    [agent, state.isProcessing, exit]
+  );
+
+  // 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 agent
+  const handleStop = useCallback(() => {
+    if (agent && state.isProcessing) {
+      agent.stop();
+      setState((s) => ({
+        ...s,
+        isProcessing: false,
+        currentToolCall: null,
+      }));
+    }
+  }, [agent, state.isProcessing]);
+
+  // Handle keyboard shortcuts
+  useInput((char, key) => {
+    if (key.ctrl && char === "c") {
+      exit();
+      return;
+    }
+
+    // Escape to stop agent when processing
+    if (key.escape && state.isProcessing) {
+      handleStop();
+      return;
+    }
+
+    // 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;
+      }
+    }
+  });
+
+  if (!agent) {
+    return (
+      <Box>
+        <Text color="yellow">
+          <Spinner type="dots" />
+        </Text>
+        <Text> Initializing agent...</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color="cyan" bold>
+          Pioneer Agent
+        </Text>
+        <Text dimColor> — /help for commands, @ 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 toolName={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 || ""}
+        />
+      )}
+
+      {/* 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)"
+              />
+            ) : (
+              <Text dimColor>Raw mode not supported in this terminal</Text>
+            )}
+          </Box>
+        )}
+      </Box>
+
+      {/* Status bar */}
+      <StatusBar budgetSummary={budgetSummary} isProcessing={state.isProcessing} />
+    </Box>
+  );
+};
+