feat(agent): Pi in-app agent with tool router

New Pi tab. Talks to a typed tool router that maps natural-language intent to real EA2 calls: navigate go to mission / runs / studio / chat / hubs start_process 'run laptop procurement for store-204' send_chat 'tell Mariana that the quote is approved' create_process opens the wizard list_processes pulls published flow definitions for the tenant This is the OSS-pluggable shape: today the router is rule-based and fully wired to FlowMaster; swapping in an LLM provider for intent parsing is a localised change in routeAgentInput().
2026-06-14 12:41:13 +04:00
parent 333667366d
commit 47b1bf6998
4 changed files with 331 additions and 0 deletions
@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from "react";
+import { useApp } from "../state/store";
+import { routeAgentInput, agentToolList, type ToolResult } from "../lib/agentTools";
+import { Bot, Branch } from "../components/icons";
+
+interface Turn {
+  id: string;
+  role: "user" | "agent";
+  text: string;
+  ok?: boolean;
+}
+
+const SUGGESTIONS = [
+  "Open mission control",
+  "List processes",
+  "Run procurement to pay for store-204",
+  "Tell Rohan that the laptop quote is approved",
+  "Create a new process",
+  "Open the IT hub",
+];
+
+export default function Agent() {
+  const userEmail = useApp((s) => s.userEmail);
+  const setScene = useApp((s) => s.setScene as (s: string) => void);
+  const [turns, setTurns] = useState<Turn[]>([
+    {
+      id: "welcome",
+      role: "agent",
+      ok: true,
+      text:
+        `Hi ${userEmail.split("@")[0]}. I'm Pi — your FlowMaster co-pilot. I can navigate the cockpit, start processes, message your team, and walk you through the Studio.`,
+    },
+  ]);
+  const [draft, setDraft] = useState("");
+  const [working, setWorking] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" }), 50);
+  }, [turns]);
+
+  const submit = async (text: string) => {
+    const t = text.trim();
+    if (!t || working) return;
+    const userTurn: Turn = { id: `u-${Date.now()}`, role: "user", text: t };
+    setTurns((prev) => [...prev, userTurn]);
+    setDraft("");
+    setWorking(true);
+    try {
+      const res: ToolResult = await routeAgentInput(t, {
+        navigate: (s) => setScene(s),
+        userEmail,
+      });
+      setTurns((prev) => [...prev, { id: `a-${Date.now()}`, role: "agent", text: res.display, ok: res.ok }]);
+    } catch (e: any) {
+      setTurns((prev) => [...prev, { id: `a-${Date.now()}`, role: "agent", text: `Error: ${e.message}`, ok: false }]);
+    } finally {
+      setWorking(false);
+    }
+  };
+
+  return (
+    <div className="agent-scene">
+      <aside className="agent-sidebar">
+        <header className="agent-side-head">
+          <div className="mc-hero-eyebrow"><Bot size={12} /> Pi — FlowMaster Agent</div>
+          <h2 className="mc-hero-title">Talk to your cockpit</h2>
+        </header>
+        <div className="agent-tool-list">
+          <div className="agent-tool-label">CAPABILITIES</div>
+          {agentToolList().map((t) => (
+            <div key={t.name} className="agent-tool-row">
+              <Branch size={11} />
+              <div>
+                <div className="agent-tool-name">{t.name.replace(/_/g, " ")}</div>
+                <div className="agent-tool-desc">{t.description}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </aside>
+
+      <section className="agent-main">
+        <div className="agent-messages" ref={scrollRef}>
+          {turns.map((t) => (
+            <div key={t.id} className={`agent-turn agent-turn-${t.role}${t.ok === false ? " agent-turn-err" : ""}`}>
+              <div className="agent-turn-author">{t.role === "user" ? userEmail.split("@")[0] : "Pi"}</div>
+              <div className="agent-turn-body">{t.text}</div>
+            </div>
+          ))}
+          {working && <div className="agent-turn agent-turn-agent agent-turn-thinking">Pi is thinking…</div>}
+        </div>
+
+        {turns.length <= 1 && (
+          <div className="agent-suggestions">
+            {SUGGESTIONS.map((s) => (
+              <button key={s} className="agent-suggestion" onClick={() => submit(s)}>{s}</button>
+            ))}
+          </div>
+        )}
+
+        <footer className="agent-composer">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                submit(draft);
+              }
+            }}
+            placeholder="Ask Pi to navigate, start a process, or message a teammate. Enter to send."
+            rows={2}
+            disabled={working}
+          />
+          <button className="btn btn-primary" onClick={() => submit(draft)} disabled={!draft.trim() || working}>
+            {working ? "…" : "Send"}
+          </button>
+        </footer>
+      </section>
+    </div>
+  );
+}