canvas-frontend/src/scenes/Agent.tsx

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 the FlowMaster Command Assistant. I understand a fixed set of commands and run them against EA2 — navigate, list processes, start a process, message a teammate, remember a note, recall notes. Memory is text-only with keyword recall; an LLM backend is a separate component, off by default.`,
    },
  ]);
  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} /> FlowMaster Command Assistant</div>
          <h2 className="mc-hero-title">Tell the cockpit what to do</h2>
          <p className="agent-side-sub">Deterministic command router with EA2-backed text memory. The LLM adapter ships separately when a provider key is configured.</p>
        </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] : "Assistant"}</div>
              <div className="agent-turn-body">{t.text}</div>
            </div>
          ))}
          {working && <div className="agent-turn agent-turn-agent agent-turn-thinking">Working…</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 the assistant 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>
  );
}