triagent 0.1.0-alpha9 → 0.1.0-beta2

package/src/tui/app.tsx

@@ -1,19 +1,21 @@
 /* @jsxImportSource @opentui/solid */
 import { render } from "@opentui/solid";
-import { createSignal, For, Show, onMount } from "solid-js";
-import { createTextAttributes } from "@opentui/core";
-import "opentui-spinner/solid";
+import { createSignal, onMount, type JSX } from "solid-js";
+import { exec } from "child_process";
+import { promisify } from "util";
 import { getDebuggerAgent, buildIncidentPrompt } from "../mastra/index.js";
 import type { IncidentInput } from "../mastra/agents/debugger.js";
-
-interface Message {
-  id: string;
-  role: "user" | "assistant" | "tool";
-  content: string;
-  timestamp: Date;
-  toolName?: string;
-  command?: string;
-}
+import { approvalStore } from "../mastra/tools/approval-store.js";
+import { ToastProvider, toastSuccess, toastError, toastWarning, toastInfo } from "./components/toast.js";
+import { ApprovalDialogProvider, useApprovalDialog } from "./components/approval-dialog.js";
+import { Header } from "./components/header.js";
+import { MessagesPanel, type Message } from "./components/messages-panel.js";
+import { Editor } from "./components/editor.js";
+import { StatusBar } from "./components/status-bar.js";
+import { type AppStatus, type RiskLevel } from "./theme/index.js";
+import { loadConfig } from "../config.js";
+
+const execAsync = promisify(exec);
 
 // Conversation history for multi-turn debugging
 interface ConversationMessage {
@@ -33,11 +35,6 @@ function formatHistoryAsPrompt(history: ConversationMessage[], newMessage: strin
   return `Previous conversation:\n${historyText}\n\nUser: ${newMessage}`;
 }
 
-type AppStatus = "idle" | "investigating" | "complete" | "error";
-
-const ATTR_DIM = createTextAttributes({ dim: true });
-const ATTR_BOLD = createTextAttributes({ bold: true });
-
 function buildDisplayCommand(toolName: string, args: unknown): string | undefined {
   if (!args || typeof args !== "object") return undefined;
 
@@ -45,11 +42,9 @@ function buildDisplayCommand(toolName: string, args: unknown): string | undefine
 
   switch (toolName) {
     case "cli":
-      // CLI tool has direct command
       return "command" in a ? String(a.command) : undefined;
 
     case "git": {
-      // Build git command: git <command> [args...] [path]
       if (!("command" in a)) return undefined;
       const parts = ["git", String(a.command)];
       if ("args" in a && Array.isArray(a.args)) {
@@ -62,7 +57,6 @@ function buildDisplayCommand(toolName: string, args: unknown): string | undefine
     }
 
     case "filesystem": {
-      // Build filesystem display: <operation> <path> [pattern]
       if (!("operation" in a)) return undefined;
       const op = String(a.operation);
       const path = "path" in a ? String(a.path) : "";
@@ -79,18 +73,51 @@ function buildDisplayCommand(toolName: string, args: unknown): string | undefine
     }
 
     default:
-      // Fallback: try to use command if it exists
       return "command" in a ? String(a.command) : undefined;
   }
 }
 
-function App() {
+// Pending approval state for HITL
+interface PendingApprovalState {
+  approvalId: string;
+  command: string;
+  riskLevel: RiskLevel;
+  selectedOption: number;
+}
+
+function AppContent() {
   const [messages, setMessages] = createSignal<Message[]>([]);
   const [conversationHistory, setConversationHistory] = createSignal<ConversationMessage[]>([]);
   const [status, setStatus] = createSignal<AppStatus>("idle");
   const [currentTool, setCurrentTool] = createSignal<string | null>(null);
   const [inputValue, setInputValue] = createSignal("");
-  const [error, setError] = createSignal<string | null>(null);
+  const [kubeContext, setKubeContext] = createSignal<string>("loading...");
+  const [modelName, setModelName] = createSignal<string>("loading...");
+
+  // HITL approval state
+  const [pendingApproval, setPendingApproval] = createSignal<PendingApprovalState | null>(null);
+
+  // Approval dialog hook
+  const { showApproval } = useApprovalDialog();
+
+  // Fetch kubectl context and config on mount
+  onMount(async () => {
+    // Load kubectl context
+    try {
+      const { stdout } = await execAsync("kubectl config current-context");
+      setKubeContext(stdout.trim());
+    } catch {
+      setKubeContext("not connected");
+    }
+
+    // Load model name from config
+    try {
+      const config = await loadConfig();
+      setModelName(config.aiModel);
+    } catch {
+      setModelName("unknown");
+    }
+  });
 
   const addMessage = (msg: Omit<Message, "id" | "timestamp">) => {
     setMessages((prev) => [
@@ -103,27 +130,160 @@ function App() {
     ]);
   };
 
+  const handleApprovalDecision = async (approved: boolean) => {
+    const approval = pendingApproval();
+    if (!approval) return;
+
+    if (approved) {
+      const token = approvalStore.approve(approval.approvalId);
+      if (!token) {
+        addMessage({
+          role: "assistant",
+          content: "Approval expired. Please try the operation again.",
+        });
+        setPendingApproval(null);
+        setStatus("complete");
+        toastWarning("Approval expired", "Please retry the operation");
+        return;
+      }
+
+      addMessage({
+        role: "user",
+        content: `Approved: ${approval.command}`,
+      });
+      toastSuccess("Command approved");
+
+      setPendingApproval(null);
+      const approvalMessage = `User approved the command. The approval token is: ${token}. Please execute the command: ${approval.command} with approvalToken: "${token}"`;
+
+      setConversationHistory((prev) => [
+        ...prev,
+        { role: "user", content: approvalMessage },
+      ]);
+
+      setStatus("investigating");
+      continueWithApproval(approvalMessage);
+    } else {
+      approvalStore.reject(approval.approvalId);
+      addMessage({
+        role: "user",
+        content: `Rejected: ${approval.command}`,
+      });
+      addMessage({
+        role: "assistant",
+        content: "Command rejected by user. How would you like to proceed?",
+      });
+      setPendingApproval(null);
+      setStatus("complete");
+      toastWarning("Command rejected");
+    }
+  };
+
+  // Handle approval using dialog overlay
+  const handleApprovalRequest = async (approvalData: PendingApprovalState) => {
+    setPendingApproval(approvalData);
+    setStatus("awaiting_approval");
+
+    const approved = await showApproval({
+      command: approvalData.command,
+      riskLevel: approvalData.riskLevel,
+      description: `This ${approvalData.riskLevel}-risk operation requires your approval.`,
+    });
+
+    await handleApprovalDecision(approved);
+  };
+
+  const continueWithApproval = async (message: string) => {
+    try {
+      const agent = getDebuggerAgent();
+      let assistantContent = "";
+
+      const prompt = formatHistoryAsPrompt(conversationHistory(), message);
+
+      const stream = await agent.stream(prompt, {
+        maxSteps: 20,
+        onStepFinish: ({ toolCalls, toolResults }) => {
+          if (toolCalls && toolCalls.length > 0) {
+            const toolCallChunk = toolCalls[0] as { payload?: { toolName?: string; args?: unknown } };
+            const toolName = toolCallChunk?.payload?.toolName ?? "tool";
+            const args = toolCallChunk?.payload?.args ?? {};
+
+            const command = buildDisplayCommand(toolName, args);
+
+            addMessage({
+              role: "tool",
+              content: command ? `$ ${command}` : `Executing ${toolName}...`,
+              toolName,
+              command,
+            });
+            // Note: Tool is already complete when onStepFinish fires
+          }
+
+          if (toolResults && toolResults.length > 0) {
+            for (const toolResult of toolResults) {
+              const tr = toolResult as any;
+              const data = tr?.payload?.result ?? tr?.result ?? tr;
+
+              if (data?.requiresApproval && data?.approvalId) {
+                handleApprovalRequest({
+                  approvalId: data.approvalId,
+                  command: data.command || "unknown command",
+                  riskLevel: (data.riskLevel as RiskLevel) || "medium",
+                  selectedOption: 0,
+                });
+              }
+            }
+          }
+        },
+      });
+
+      for await (const chunk of stream.textStream) {
+        assistantContent += chunk;
+      }
+
+      if (status() !== "awaiting_approval") {
+        addMessage({
+          role: "assistant",
+          content: assistantContent,
+        });
+
+        setConversationHistory((prev) => [
+          ...prev,
+          { role: "assistant", content: assistantContent },
+        ]);
+
+        setStatus("complete");
+        toastSuccess("Command executed");
+      }
+      setCurrentTool(null);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      setStatus("error");
+      toastError("Execution failed", errorMsg);
+      addMessage({
+        role: "assistant",
+        content: `Error: ${errorMsg}`,
+      });
+    }
+  };
+
   const investigate = async (incident: IncidentInput) => {
     setStatus("investigating");
-    setError(null);
     setCurrentTool(null);
+    toastInfo("Investigation started", incident.title);
 
-    // Add user message to UI
     addMessage({
       role: "user",
       content: incident.description,
     });
 
-    // Build prompt: use full incident prompt for first message, include history for follow-ups
     const isFirstMessage = conversationHistory().length === 0;
     const userContent = isFirstMessage
       ? buildIncidentPrompt(incident)
       : incident.description;
 
-    // Format prompt with conversation history
     const prompt = formatHistoryAsPrompt(conversationHistory(), userContent);
 
-    // Add user message to conversation history
     setConversationHistory((prev) => [
       ...prev,
       { role: "user", content: userContent },
@@ -131,28 +291,43 @@ function App() {
 
     try {
       const agent = getDebuggerAgent();
-
       let assistantContent = "";
 
-      // Send the formatted prompt to the agent
       const stream = await agent.stream(prompt, {
         maxSteps: 20,
-        onStepFinish: ({ toolCalls }) => {
+        onStepFinish: (stepResult) => {
+          const { toolCalls, toolResults } = stepResult;
+
           if (toolCalls && toolCalls.length > 0) {
-            const toolCall = toolCalls[0] as { toolName?: string; args?: unknown };
-            const toolName = toolCall.toolName ?? "tool";
-            const args = toolCall.args ?? {};
+            const toolCallChunk = toolCalls[0] as { payload?: { toolName?: string; args?: unknown } };
+            const toolName = toolCallChunk?.payload?.toolName ?? "tool";
+            const args = toolCallChunk?.payload?.args ?? {};
 
-            // Build display command based on tool type
             const command = buildDisplayCommand(toolName, args);
 
-            setCurrentTool(toolName);
             addMessage({
               role: "tool",
               content: command ? `$ ${command}` : `Executing ${toolName}...`,
               toolName,
               command,
             });
+            // Note: Tool is already complete when onStepFinish fires
+          }
+
+          if (toolResults && toolResults.length > 0) {
+            for (const toolResult of toolResults) {
+              const tr = toolResult as any;
+              const data = tr?.payload?.result ?? tr?.result ?? tr;
+
+              if (data?.requiresApproval && data?.approvalId) {
+                handleApprovalRequest({
+                  approvalId: data.approvalId,
+                  command: data.command || "unknown command",
+                  riskLevel: (data.riskLevel as RiskLevel) || "medium",
+                  selectedOption: 0,
+                });
+              }
+            }
           }
         },
       });
@@ -161,24 +336,25 @@ function App() {
         assistantContent += chunk;
       }
 
-      // Add assistant response to UI
-      addMessage({
-        role: "assistant",
-        content: assistantContent,
-      });
+      if (status() !== "awaiting_approval") {
+        addMessage({
+          role: "assistant",
+          content: assistantContent,
+        });
 
-      // Add assistant response to conversation history
-      setConversationHistory((prev) => [
-        ...prev,
-        { role: "assistant", content: assistantContent },
-      ]);
+        setConversationHistory((prev) => [
+          ...prev,
+          { role: "assistant", content: assistantContent },
+        ]);
 
-      setStatus("complete");
+        setStatus("complete");
+        toastSuccess("Investigation complete");
+      }
       setCurrentTool(null);
     } catch (err) {
       const errorMsg = err instanceof Error ? err.message : String(err);
-      setError(errorMsg);
       setStatus("error");
+      toastError("Investigation failed", errorMsg);
       addMessage({
         role: "assistant",
         content: `Error: ${errorMsg}`,
@@ -202,165 +378,70 @@ function App() {
     setInputValue(value);
   };
 
-  const getStatusColor = (): string => {
-    switch (status()) {
-      case "investigating":
-        return "yellow";
-      case "complete":
-        return "green";
-      case "error":
-        return "red";
-      default:
-        return "gray";
+  const handleApprovalInput = (value: string) => {
+    if (value.toLowerCase() === "y") {
+      handleApprovalDecision(true);
+    } else if (value.toLowerCase() === "n") {
+      handleApprovalDecision(false);
     }
   };
 
-  const getStatusText = (): string => {
-    switch (status()) {
-      case "investigating":
-        return currentTool() ? `Running: ${currentTool()}` : "Investigating...";
-      case "complete":
-        return "Complete";
-      case "error":
-        return "Error";
-      default:
-        return "Ready";
+  const handleApprovalKeyDown = (key: { name: string }) => {
+    const approval = pendingApproval();
+    if (!approval) return;
+
+    if (key.name === "up" || key.name === "down") {
+      setPendingApproval({ ...approval, selectedOption: approval.selectedOption === 0 ? 1 : 0 });
+    } else if (key.name === "return") {
+      handleApprovalDecision(approval.selectedOption === 0);
     }
   };
 
   return (
     <box flexDirection="column" width="100%" height="100%">
       {/* Header */}
-      <box
-        borderStyle="single"
-        borderColor="red"
-        paddingLeft={2}
-        paddingRight={2}
-        flexDirection="row"
-        justifyContent="space-between"
-      >
-        <text fg="red" attributes={ATTR_BOLD}>
-          TRIAGENT
-        </text>
-        <text fg="gray">Kubernetes Debugging Agent</text>
-        <text fg={getStatusColor()} attributes={ATTR_BOLD}>
-          [{getStatusText()}]
-        </text>
-      </box>
-
-      {/* Messages Area */}
-      <scrollbox
-        flexGrow={1}
-        borderStyle="single"
-        borderColor="gray"
-        paddingLeft={1}
-        paddingRight={1}
-        stickyScroll
-        stickyStart="bottom"
-      >
-        <box flexDirection="column" gap={1}>
-          <Show
-            when={messages().length > 0}
-            fallback={
-              <box paddingTop={2} paddingBottom={2}>
-                <text fg="gray" attributes={ATTR_DIM}>
-                  Enter an incident description to start investigating...
-                </text>
-              </box>
-            }
-          >
-            <For each={messages()}>
-              {(msg) => (
-                <box flexDirection="column" marginBottom={1}>
-                  <Show when={msg.role === "user"}>
-                    <box flexDirection="row" gap={1}>
-                      <text fg="cyan" attributes={ATTR_BOLD}>
-                        You:
-                      </text>
-                      <text fg="white">{msg.content}</text>
-                    </box>
-                  </Show>
-                  <Show when={msg.role === "tool"}>
-                    <box flexDirection="row" gap={1} alignItems="center">
-                      <Show
-                        when={status() === "investigating" && msg.id === messages().filter(m => m.role === "tool").at(-1)?.id}
-                        fallback={<text fg="green">✓</text>}
-                      >
-                        <spinner name="dots" color="blue" />
-                      </Show>
-                      <text fg="blue" attributes={ATTR_DIM}>
-                        [{msg.toolName}]
-                      </text>
-                      <text fg="gray" attributes={ATTR_DIM}>
-                        {msg.content}
-                      </text>
-                    </box>
-                  </Show>
-                  <Show when={msg.role === "assistant"}>
-                    <box flexDirection="column">
-                      <text fg="green" attributes={ATTR_BOLD}>
-                        Triagent:
-                      </text>
-                      <text fg="white" wrapMode="word">
-                        {msg.content}
-                      </text>
-                    </box>
-                  </Show>
-                </box>
-              )}
-            </For>
-          </Show>
-        </box>
-      </scrollbox>
-
-      {/* Input Area */}
-      <box
-        borderStyle="single"
-        borderColor={status() === "investigating" ? "yellow" : "cyan"}
-        paddingLeft={1}
-        paddingRight={1}
-        flexDirection="row"
-        gap={1}
-      >
-        <text fg="cyan" attributes={ATTR_BOLD}>
-          {">"}
-        </text>
-        <input
-          flexGrow={1}
-          focused={true}
-          value={inputValue()}
-          onInput={handleInput}
-          onSubmit={handleSubmit}
-          placeholder={
-            status() === "investigating"
-              ? "Investigating..."
-              : "Describe the incident..."
-          }
-          textColor="white"
-          placeholderColor="gray"
-          focusedTextColor="white"
-          focusedBackgroundColor="#1a1a1a"
-        />
-      </box>
-
-      {/* Footer */}
-      <box
-        paddingLeft={2}
-        paddingRight={2}
-        flexDirection="row"
-        justifyContent="space-between"
-      >
-        <text fg="gray" attributes={ATTR_DIM}>
-          Press Enter to submit | Ctrl+C to quit
-        </text>
-        <text fg="gray" attributes={ATTR_DIM}>
-          {messages().length} messages
-        </text>
-      </box>
+      <Header
+        status={status()}
+        currentTool={currentTool()}
+        kubeContext={kubeContext()}
+        modelName={modelName()}
+      />
+
+      {/* Messages Panel */}
+      <MessagesPanel
+        messages={messages()}
+        status={status()}
+      />
+
+      {/* Editor */}
+      <Editor
+        status={status()}
+        value={inputValue()}
+        onInput={handleInput}
+        onSubmit={handleSubmit}
+        onApprovalInput={handleApprovalInput}
+        onApprovalKeyDown={handleApprovalKeyDown}
+      />
+
+      {/* Status Bar */}
+      <StatusBar
+        status={status()}
+        messageCount={messages().length}
+      />
     </box>
   );
 }
 
+function App() {
+  return (
+    <ToastProvider>
+      <ApprovalDialogProvider>
+        <AppContent />
+      </ApprovalDialogProvider>
+    </ToastProvider>
+  );
+}
+
 export interface TUIHandle {
   shutdown: () => void;
   handleWebhookIncident: (incident: IncidentInput) => Promise<string>;
@@ -371,13 +452,13 @@ export async function runTUI(): Promise<TUIHandle> {
 
   return {
     shutdown: () => {
-      // The render function handles cleanup
       process.exit(0);
     },
     handleWebhookIncident: async (incident: IncidentInput) => {
-      // For webhook mode, we'd need to integrate differently
-      // This is a placeholder for now
       return "Webhook incident handling not yet implemented in TUI mode";
     },
   };
 }
+
+// Export Message type for use in other components
+export type { Message } from "./components/messages-panel.js";