godspeed-agent 0.1.0

package/src/tui/App.tsx

@@ -0,0 +1,377 @@
+import React, { useState } from "react";
+import { Box, Text, useInput, useApp } from "ink";
+import { runAgent, type AgentStep } from "../lib/agent.js";
+import { loadHistory, saveHistory } from "../lib/history.js";
+import { getWorkspace } from "../tools/workspace.js";
+import { getToolLabel } from "../tools/labels.js";
+import {
+  loadAgentMemory,
+  saveAgentMemory,
+  updateAgentMemory,
+} from "../lib/agentMemory.js";
+import { streamLLMToCallback } from "../lib/llm.js";
+
+type UiMessage = {
+  role: "user" | "ai";
+  text: string;
+};
+
+type AppProps = {
+  sessionName: string;
+  direct?: boolean;
+};
+
+export function App({ sessionName, direct = false }: AppProps) {
+  const { exit } = useApp();
+
+  const [input, setInput] = useState("");
+  const [agentMemory, setAgentMemory] = useState(loadAgentMemory(sessionName));
+
+  const [uiMessages, setUiMessages] = useState<UiMessage[]>(
+    loadHistory(sessionName).map((message) => ({
+      role: message.role === "user" ? "user" : "ai",
+      text: message.text,
+    })),
+  );
+
+  const [steps, setSteps] = useState<AgentStep[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const [pendingApproval, setPendingApproval] = useState<{
+    label: string;
+    resolve: (approved: boolean) => void;
+  } | null>(null);
+
+  const visibleSteps = steps.slice(-10);
+  const visibleMessages = uiMessages.slice(-8);
+
+  function persistHistory(messages: UiMessage[]) {
+    saveHistory(
+      sessionName,
+      messages.map((message) => ({
+        role: message.role === "user" ? "user" : "model",
+        text: message.text,
+      })),
+    );
+  }
+
+  function upsertStep(step: AgentStep) {
+    setSteps((prev) => {
+      const existingIndex = prev.findIndex(
+        (item) => item.step === step.step && item.action === step.action,
+      );
+
+      if (existingIndex === -1) {
+        return [...prev, step];
+      }
+
+      const next = [...prev];
+      next[existingIndex] = step;
+      return next;
+    });
+  }
+
+  async function streamAiMessage(text: string) {
+    let current = "";
+
+    setUiMessages((prev) => [
+      ...prev,
+      {
+        role: "ai",
+        text: "",
+      },
+    ]);
+
+    for (const char of text) {
+      current += char;
+
+      setUiMessages((prev) => {
+        const next = [...prev];
+
+        if (next.length === 0) {
+          return [
+            {
+              role: "ai",
+              text: current,
+            },
+          ];
+        }
+
+        next[next.length - 1] = {
+          role: "ai",
+          text: current,
+        };
+
+        return next;
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 5));
+    }
+  }
+
+  async function sendMessage() {
+    const prompt = input.trim();
+
+    if (!prompt || loading) return;
+
+    setInput("");
+    setLoading(true);
+    setSteps([]);
+
+    const userMessage: UiMessage = {
+      role: "user",
+      text: prompt,
+    };
+
+    setUiMessages((prev) => [...prev, userMessage]);
+
+    const isDirectChat = direct || prompt.startsWith("/chat ");
+
+    const directPrompt = prompt.startsWith("/chat ")
+      ? prompt.replace(/^\/chat\s+/, "")
+      : prompt;
+
+    if (isDirectChat) {
+      let fullAnswer = "";
+
+      setUiMessages((prev) => [
+        ...prev,
+        {
+          role: "ai",
+          text: "",
+        },
+      ]);
+
+      try {
+        await streamLLMToCallback(directPrompt, (token) => {
+          fullAnswer += token;
+
+          setUiMessages((prev) => {
+            const next = [...prev];
+
+            next[next.length - 1] = {
+              role: "ai",
+              text: fullAnswer,
+            };
+
+            return next;
+          });
+        });
+
+        setUiMessages((prev) => {
+          persistHistory(prev);
+          return prev;
+        });
+      } finally {
+        setLoading(false);
+      }
+
+      return;
+    }
+
+    try {
+      const answer = await runAgent(prompt, {
+        memory: agentMemory,
+        showSpinner: false,
+
+        async confirmTool(action) {
+          const needsApproval =
+            action.action === "WRITE_FILE" ||
+            action.action === "EDIT_FILE" ||
+            action.action === "DELETE_FILE" ||
+            action.action === "CREATE_DIRECTORY" ||
+            action.action === "MOVE_FILE" ||
+            action.action === "COPY_FILE" ||
+            action.action === "RUN_COMMAND";
+
+          if (!needsApproval) {
+            return true;
+          }
+
+          const label = getToolLabel(action);
+
+          return new Promise<boolean>((resolve) => {
+            setPendingApproval({
+              label,
+              resolve,
+            });
+          });
+        },
+
+        onStep(step) {
+          upsertStep(step);
+        },
+      });
+
+      const nextMemory = await updateAgentMemory({
+        previousMemory: agentMemory,
+        userPrompt: prompt,
+        finalAnswer: answer,
+      });
+
+      setAgentMemory(nextMemory);
+      saveAgentMemory(sessionName, nextMemory);
+
+      await streamAiMessage(answer || "Done.");
+
+      setUiMessages((prev) => {
+        persistHistory(prev);
+        return prev;
+      });
+    } catch (err) {
+      const errorMessage: UiMessage = {
+        role: "ai",
+        text: err instanceof Error ? err.message : String(err),
+      };
+
+      setUiMessages((prev) => {
+        const next = [...prev, errorMessage];
+        persistHistory(next);
+        return next;
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useInput((char, key) => {
+    if (pendingApproval) {
+      if (char?.toLowerCase() === "y") {
+        pendingApproval.resolve(true);
+        setPendingApproval(null);
+      }
+
+      if (char?.toLowerCase() === "n") {
+        pendingApproval.resolve(false);
+        setPendingApproval(null);
+      }
+
+      return;
+    }
+
+    if (key.escape || (key.ctrl && char === "c")) {
+      exit();
+      return;
+    }
+
+    if (loading) return;
+
+    if (key.backspace || key.delete) {
+      setInput((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    if (key.return) {
+      sendMessage();
+      return;
+    }
+
+    if (char) {
+      setInput((prev) => prev + char);
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor="green"
+        paddingX={1}
+      >
+        <Text color="green">TUI Starter</Text>
+        <Text color="gray">Session: {sessionName}</Text>
+        <Text color="gray">Workspace: {getWorkspace()}</Text>
+        <Text color="gray">Mode: {direct ? "Direct Chat" : "Agent"}</Text>
+        <Text color="gray">Press ESC or Ctrl+C to exit</Text>
+      </Box>
+
+      <Box marginTop={1} gap={2}>
+        <Box
+          width="40%"
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="magenta"
+          paddingX={1}
+        >
+          <Text color="magenta">Steps</Text>
+
+          {visibleSteps.length === 0 && <Text color="gray">No steps yet</Text>}
+
+          {visibleSteps.map((step, index) => {
+            const icon =
+              step.status === "completed"
+                ? "✅"
+                : step.status === "failed"
+                  ? "❌"
+                  : "⏳";
+
+            const detail =
+              step.error ??
+              step.path ??
+              step.command ??
+              step.pattern ??
+              step.query ??
+              (step.from && step.to ? `${step.from} -> ${step.to}` : "");
+
+            const pointer = index === visibleSteps.length - 1 ? ">" : " ";
+
+            return (
+              <Text key={`${step.step}-${step.action}`}>
+                {pointer} {icon} {step.action} {detail}
+              </Text>
+            );
+          })}
+        </Box>
+
+        <Box
+          width="60%"
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="cyan"
+          paddingX={1}
+        >
+          <Text color="cyan">Chat</Text>
+
+          {visibleMessages.length === 0 && (
+            <Text color="gray">No messages yet</Text>
+          )}
+
+          {visibleMessages.map((message, index) => (
+            <Box key={index} flexDirection="column" marginBottom={1}>
+              <Text color={message.role === "user" ? "cyan" : "yellow"}>
+                {message.role === "user" ? "You>" : "AI>"}
+              </Text>
+
+              <Text>{message.text}</Text>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+
+      {pendingApproval && (
+        <Box
+          flexDirection="column"
+          borderStyle="round"
+          borderColor="yellow"
+          marginTop={1}
+          paddingX={1}
+        >
+          <Text color="yellow">Tool Approval Required</Text>
+          <Text>{pendingApproval.label}</Text>
+          <Text color="gray">Press Y to approve, N to deny</Text>
+        </Box>
+      )}
+
+      {loading && <Text color="gray">Thinking...</Text>}
+
+      <Box marginTop={1} borderStyle="round" borderColor="blue" paddingX={1}>
+        <Text color="cyan">You&gt; </Text>
+        <Text>
+          {input}
+          <Text color="green">|</Text>
+        </Text>
+      </Box>
+    </Box>
+  );
+}