nihalashetty
ae67bff5a3
Self-hosted platform for building, testing, and shipping LangChain/LangGraph agents. Deep-agent sub-agents on the canvas, a live tracing/observability timeline, auto-provisioned built-in tools with import/export, per-environment tool variables, streamed evaluations, and per-user auth token forwarding.
278 lines
13 KiB
TypeScript
278 lines
13 KiB
TypeScript
"use client";
|
|
/* The canvas Test panel: messages a workflow over SSE and lights up nodes as the graph
|
|
executes (one backend thread per session so the checkpointer holds prior turns). */
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { Icon } from "../icons";
|
|
import { Tile } from "../primitives";
|
|
import { api, openSSE, type Workflow, type ComponentT } from "@/lib/api";
|
|
import { fmtUSD } from "@/lib/data";
|
|
import { ComponentRenderer } from "../component-renderer";
|
|
import { Markdown } from "../markdown";
|
|
import { ReplyAccumulator, type Part, type ComponentInstance } from "@/lib/chat-parts";
|
|
import Mustache from "mustache";
|
|
|
|
interface TestMsg { role: "user" | "assistant"; content?: string; parts?: Part[] }
|
|
|
|
export function WorkflowTestPanel({
|
|
project,
|
|
workflow,
|
|
running,
|
|
onRunningChange,
|
|
onBeforeRun,
|
|
onClose,
|
|
onResetRun,
|
|
onNodeStep,
|
|
onFinalDebug,
|
|
}: {
|
|
project: any;
|
|
workflow: Workflow;
|
|
running: boolean;
|
|
onRunningChange: (running: boolean) => void;
|
|
onBeforeRun: () => Promise<void>;
|
|
onClose: () => void;
|
|
onResetRun: () => void;
|
|
onNodeStep: (nodeId: string, status?: "idle" | "running" | "done" | "error", output?: any) => void;
|
|
onFinalDebug: (debugNodes: Record<string, any>) => void;
|
|
}) {
|
|
const [input, setInput] = useState("");
|
|
const [msgs, setMsgs] = useState<TestMsg[]>([]);
|
|
const [streaming, setStreaming] = useState("");
|
|
const [meter, setMeter] = useState<{ tokens: number; cost: number } | null>(null);
|
|
const [compDefs, setCompDefs] = useState<Record<string, ComponentT>>({});
|
|
const [liveParts, setLiveParts] = useState<Part[]>([]); // in-flight assistant reply parts (audit H3)
|
|
const activeRef = useRef(true);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
// Folded sub-agents aren't graph nodes, so node_start never fires for them - map each
|
|
// sub-agent NAME to its canvas node id so the live `activity` stream can light it up.
|
|
const subNameToId = useMemo(() => {
|
|
const m: Record<string, string> = {};
|
|
const nodes = (workflow as any)?.executable?.nodes || (workflow as any)?.canvas?.nodes || [];
|
|
for (const n of nodes) {
|
|
const name = n?.config?.name ?? n?.data?.config?.name;
|
|
const type = n?.type ?? n?.data?.nodeType;
|
|
if (type === "agent" || type === "deep_agent") {
|
|
if (name) m[name] = n.id;
|
|
m[n.id] = n.id; // sub-agent name falls back to the node id when the agent is unnamed
|
|
}
|
|
}
|
|
return m;
|
|
}, [workflow]);
|
|
const actNameRef = useRef<Record<string, string>>({}); // activity id -> sub-agent name
|
|
// One backend thread per test session - the checkpointer holds prior turns.
|
|
const threadRef = useRef<string | null>(null);
|
|
useEffect(() => {
|
|
threadRef.current = null; setMsgs([]);
|
|
if (project?.id) api.listComponents(project.id).then((cs) => setCompDefs(Object.fromEntries(cs.map((c) => [c.id, c])))).catch(() => {});
|
|
}, [workflow?.id, project?.id]);
|
|
|
|
useEffect(() => {
|
|
activeRef.current = true;
|
|
return () => {
|
|
activeRef.current = false;
|
|
onRunningChange(false);
|
|
};
|
|
}, [onRunningChange]);
|
|
|
|
useEffect(() => {
|
|
scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
|
|
}, [msgs, streaming, meter, liveParts]);
|
|
|
|
async function send(textArg?: string) {
|
|
const text = (typeof textArg === "string" ? textArg : input).trim();
|
|
if (!text || running || !project?.id || !workflow?.id) return;
|
|
if (typeof textArg !== "string") setInput("");
|
|
setMsgs((m) => [...m, { role: "user", content: text }]);
|
|
setStreaming("");
|
|
setMeter(null);
|
|
setLiveParts([]);
|
|
actNameRef.current = {};
|
|
onResetRun();
|
|
onRunningChange(true);
|
|
let finalAnswer = "";
|
|
let lastNode: string | null = null;
|
|
// Components are positioned by the [[forge:component:ID]] markers the agent writes into its
|
|
// reply (not by frame-arrival order), so a widget lands in its natural place, not at the top.
|
|
const acc = new ReplyAccumulator();
|
|
|
|
try {
|
|
await onBeforeRun();
|
|
if (!activeRef.current) return;
|
|
const run = await api.createRun(
|
|
project.id, workflow.id,
|
|
{ messages: [{ role: "user", content: text }] },
|
|
threadRef.current || undefined,
|
|
);
|
|
threadRef.current = run.thread_id;
|
|
await openSSE(api.runStreamUrl(project.id, workflow.id, run.id), (f) => {
|
|
if (!activeRef.current) return;
|
|
if (f.event === "messages" && f.data?.content) {
|
|
acc.addText(f.data.content);
|
|
setStreaming(acc.text);
|
|
setLiveParts(acc.parts({ streaming: true }));
|
|
} else if (f.event === "node_start" && f.data?.node) {
|
|
const node = f.data.node;
|
|
lastNode = node;
|
|
onNodeStep(node, "running");
|
|
} else if (f.event === "node_error" && f.data?.node) {
|
|
const node = f.data.node;
|
|
onNodeStep(node, "error");
|
|
finalAnswer = `⚠ ${f.data?.message || `${node} failed`}`;
|
|
} else if (f.event === "updates" && f.data && typeof f.data === "object") {
|
|
const node = Object.keys(f.data)[0];
|
|
if (!node) return;
|
|
const output = f.data[node];
|
|
onNodeStep(node, "done", output);
|
|
if (lastNode === node) lastNode = null;
|
|
} else if (f.event === "activity" && f.data?.id) {
|
|
// Light up a folded sub-agent's canvas node from the live activity stream (it has no
|
|
// graph node_start of its own). Tools inside the sub-agent aren't nodes, so skip them.
|
|
const a = f.data;
|
|
if (a.phase === "start" && a.kind === "subagent") {
|
|
actNameRef.current[a.id] = a.name;
|
|
const nid = subNameToId[a.name];
|
|
if (nid) onNodeStep(nid, "running");
|
|
} else if (a.phase === "end") {
|
|
const nid = subNameToId[actNameRef.current[a.id]];
|
|
if (nid) onNodeStep(nid, "done", a.output);
|
|
}
|
|
} else if (f.event === "custom" && f.data?.channel === "component" && f.data?.payload) {
|
|
acc.addComponent(f.data.payload as ComponentInstance);
|
|
setLiveParts(acc.parts({ streaming: true }));
|
|
} else if (f.event === "done") {
|
|
finalAnswer = f.data?.answer || "";
|
|
setMeter({ tokens: f.data?.total_tokens ?? 0, cost: f.data?.total_cost_usd ?? 0 });
|
|
onFinalDebug(f.data?.debug?.nodes || {});
|
|
if (lastNode) onNodeStep(lastNode, "done");
|
|
} else if (f.event === "interrupt") {
|
|
finalAnswer = "⏸ This run paused for approval. Open the full Playground to resume it.";
|
|
if (lastNode) onNodeStep(lastNode, "done");
|
|
} else if (f.event === "error") {
|
|
finalAnswer = `⚠ ${f.data?.message || "run failed"}`;
|
|
if (lastNode) onNodeStep(lastNode, "error");
|
|
}
|
|
});
|
|
} catch (e: any) {
|
|
if (!activeRef.current) return;
|
|
finalAnswer = `⚠ ${e.message || e}`;
|
|
if (lastNode) onNodeStep(lastNode, "error");
|
|
} finally {
|
|
if (activeRef.current) {
|
|
setStreaming("");
|
|
onRunningChange(false);
|
|
setLiveParts([]);
|
|
}
|
|
}
|
|
if (activeRef.current) {
|
|
// resolveText reconciles the streamed buffer with the authoritative answer / error so it's
|
|
// never dropped (audit H2); markers in it splice components into place.
|
|
const finalText = acc.resolveText(finalAnswer);
|
|
if (acc.hasComponents()) {
|
|
setMsgs((m) => [...m, { role: "assistant", parts: acc.parts({ finalText }) }]);
|
|
} else {
|
|
setMsgs((m) => [...m, { role: "assistant", content: finalText || "(no output)" }]);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleComponentAction(inst: ComponentInstance, action: string, fields: Record<string, string>) {
|
|
const def = (inst.actions || []).find((a: any) => a.id === action) || {};
|
|
let msg = (def as any).message || (def as any).label || action;
|
|
try { msg = Mustache.render(String(msg), { props: inst.props || {}, fields, action }); } catch {}
|
|
if (msg) send(msg);
|
|
}
|
|
|
|
return (
|
|
<div className="col" style={{ flex: 1, minHeight: 0 }}>
|
|
<div className="row spread" style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", flex: "none" }}>
|
|
<div style={{ minWidth: 0 }}>
|
|
<div className="t-h2">Test</div>
|
|
<div className="fg-2 t-caption mono truncate">{workflow.name}</div>
|
|
</div>
|
|
<button className="iconbtn" onClick={onClose}><Icon name="x" size={15} /></button>
|
|
</div>
|
|
<div ref={scrollRef} className="scroll-y col gap3" style={{ flex: 1, minHeight: 0, padding: 12, overflowX: "hidden" }}>
|
|
{msgs.length === 0 && !streaming && !running && (
|
|
<div className="col center" style={{ minHeight: 160, textAlign: "center", gap: 8, color: "var(--fg-2)" }}>
|
|
<Tile icon="playground" color="var(--io-json)" size={38} />
|
|
<div className="t-h3" style={{ color: "var(--fg-1)" }}>Message this workflow</div>
|
|
<div className="t-caption">Nodes highlight as the graph executes. Hover the debug chips on nodes for output and cost.</div>
|
|
</div>
|
|
)}
|
|
{msgs.map((m, i) => (
|
|
<TestMessage key={i} role={m.role} content={m.content} parts={m.parts} compDefs={compDefs} onAction={handleComponentAction} />
|
|
))}
|
|
{(running || liveParts.length > 0) && (
|
|
<TestMessage role="assistant" parts={liveParts} streaming compDefs={compDefs} onAction={handleComponentAction} />
|
|
)}
|
|
{meter && <span className="chip chip-mono" style={{ alignSelf: "flex-start" }}><Icon name="bolt" size={12} />{meter.tokens} tok · {fmtUSD(meter.cost)}</span>}
|
|
</div>
|
|
<div style={{ padding: 12, borderTop: "1px solid var(--line)", flex: "none" }}>
|
|
<div className="row gap2" style={{ background: "var(--bg-3)", border: "1px solid var(--line)", borderRadius: 10, padding: "6px 6px 6px 10px" }}>
|
|
<input
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && send()}
|
|
placeholder="Ask this workflow..."
|
|
disabled={running}
|
|
style={{ flex: 1, minWidth: 0, border: "none", background: "none", outline: "none", fontSize: 13, color: "var(--fg-0)", fontFamily: "var(--font-ui)" }}
|
|
/>
|
|
<button className="btn btn-primary btn-sm" onClick={() => send()} disabled={running || !input.trim()}>
|
|
<Icon name={running ? "refresh" : "play"} size={13} style={running ? { animation: "spin 1s linear infinite" } : {}} />
|
|
{running ? "Testing" : "Send"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* One test-panel turn: a single avatar + a column. The assistant reply is an ordered list
|
|
of parts (text + components interleaved in produced order), matching the Playground so a
|
|
rendered component sits in its correct place within the reply. */
|
|
function TestMessage({ role, content, streaming, parts, compDefs, onAction }: {
|
|
role: "user" | "assistant";
|
|
content?: string;
|
|
streaming?: boolean;
|
|
parts?: Part[];
|
|
compDefs: Record<string, ComponentT>;
|
|
onAction: (inst: ComponentInstance, action: string, fields: Record<string, string>) => void;
|
|
}) {
|
|
const user = role === "user";
|
|
if (user) {
|
|
return (
|
|
<div className="row" style={{ gap: 8, alignItems: "flex-start", flexDirection: "row-reverse" }}>
|
|
<Tile icon="user" color="var(--signal)" size={24} />
|
|
<div style={{ maxWidth: 260, padding: "8px 10px", borderRadius: 10, borderTopRightRadius: 3, fontSize: 13, lineHeight: "19px", whiteSpace: "pre-wrap", overflowWrap: "anywhere", background: "var(--accent)", color: "var(--fg-on-accent)" }}>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
const renderComp = (inst: ComponentInstance, key: number | string) => {
|
|
const def = compDefs[inst.component_id];
|
|
if (!def) {
|
|
return <div key={key} className="card" style={{ padding: "6px 9px", fontSize: 12, color: "var(--fg-2)" }}>Component “{inst.name || inst.component_id}” unavailable.</div>;
|
|
}
|
|
return (
|
|
<ComponentRenderer key={key} def={{ id: def.id, name: def.name, html: def.html, css: def.css, actions: inst.actions || def.actions }} props={inst.props || {}} onAction={(a, f) => onAction(inst, a, f)} />
|
|
);
|
|
};
|
|
const list: Part[] = parts && parts.length ? parts : (content && content.trim() ? [{ kind: "text", text: content }] : []);
|
|
let lastText = -1;
|
|
for (let k = list.length - 1; k >= 0; k--) { if (list[k].kind === "text") { lastText = k; break; } }
|
|
return (
|
|
<div className="row" style={{ gap: 8, alignItems: "flex-start" }}>
|
|
<Tile icon="sparkles" color="var(--accent)" size={24} />
|
|
<div className="col gap2" style={{ minWidth: 0, flex: 1 }}>
|
|
{list.map((p, j) => (p.kind === "text" ? (
|
|
<div key={j} style={{ fontSize: 13, lineHeight: "19px", color: "var(--fg-0)", overflowWrap: "anywhere" }}>
|
|
<Markdown>{p.text}</Markdown>
|
|
{streaming && j === lastText && <span style={{ display: "inline-block", width: 6, height: 13, background: "var(--accent)", verticalAlign: "-2px", animation: "blink 1s steps(1) infinite" }} />}
|
|
</div>
|
|
) : renderComp(p.inst, j)))}
|
|
{streaming && lastText === -1 && <span className="fg-2" style={{ fontSize: 13 }}>…</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|