diff --git a/src/ui/public/app.js b/src/ui/public/app.js
new file mode 100644
index 0000000..57abb4a
--- /dev/null
+++ b/src/ui/public/app.js
@@ -0,0 +1,1697 @@
+const state = {
+ config: null,
+ manifests: [],
+ sessions: [],
+ runs: [],
+ selectedSessionId: "",
+ selectedManifestPath: "",
+ selectedNodeId: "",
+ graph: null,
+ activeRunId: "",
+ manifestDraft: null,
+};
+
+const dom = {
+ serverStatus: document.querySelector("#server-status"),
+ sessionSelect: document.querySelector("#session-select"),
+ graphManifestSelect: document.querySelector("#graph-manifest-select"),
+ graphRefresh: document.querySelector("#graph-refresh"),
+ graphSvg: document.querySelector("#graph-svg"),
+ graphBanner: document.querySelector("#graph-banner"),
+ runForm: document.querySelector("#run-form"),
+ runPrompt: document.querySelector("#run-prompt"),
+ runManifestSelect: document.querySelector("#run-manifest-select"),
+ runExecutionMode: document.querySelector("#run-execution-mode"),
+ runProvider: document.querySelector("#run-provider"),
+ runTopologyHint: document.querySelector("#run-topology-hint"),
+ runFlags: document.querySelector("#run-flags"),
+ runValidationNodes: document.querySelector("#run-validation-nodes"),
+ killRun: document.querySelector("#kill-run"),
+ runStatus: document.querySelector("#run-status"),
+ nodeInspector: document.querySelector("#node-inspector"),
+ eventsLimit: document.querySelector("#events-limit"),
+ eventsRefresh: document.querySelector("#events-refresh"),
+ eventFeed: document.querySelector("#event-feed"),
+ historyRefresh: document.querySelector("#history-refresh"),
+ historyBody: document.querySelector("#history-body"),
+ notificationsForm: document.querySelector("#notifications-form"),
+ securityForm: document.querySelector("#security-form"),
+ limitsForm: document.querySelector("#limits-form"),
+ manifestForm: document.querySelector("#manifest-form"),
+ manifestPath: document.querySelector("#manifest-path"),
+ manifestLoad: document.querySelector("#manifest-load"),
+ manifestValidate: document.querySelector("#manifest-validate"),
+ manifestEditor: document.querySelector("#manifest-editor"),
+ manifestStatus: document.querySelector("#manifest-status"),
+ manifestTemplateMinimal: document.querySelector("#manifest-template-minimal"),
+ manifestTemplateTwoStage: document.querySelector("#manifest-template-two-stage"),
+ manifestSyncFromEditor: document.querySelector("#manifest-sync-from-editor"),
+ manifestApplyToEditor: document.querySelector("#manifest-apply-to-editor"),
+ manifestHelperStatus: document.querySelector("#manifest-helper-status"),
+ helperTopologySequential: document.querySelector("#helper-topology-sequential"),
+ helperTopologyParallel: document.querySelector("#helper-topology-parallel"),
+ helperTopologyHierarchical: document.querySelector("#helper-topology-hierarchical"),
+ helperTopologyRetryUnrolled: document.querySelector("#helper-topology-retry-unrolled"),
+ helperTopologyMaxDepth: document.querySelector("#helper-topology-max-depth"),
+ helperTopologyMaxRetries: document.querySelector("#helper-topology-max-retries"),
+ helperEntryNodeId: document.querySelector("#helper-entry-node-id"),
+ helperPersonas: document.querySelector("#helper-personas"),
+ helperRelationships: document.querySelector("#helper-relationships"),
+ helperNodes: document.querySelector("#helper-nodes"),
+ helperEdges: document.querySelector("#helper-edges"),
+ helperAddPersona: document.querySelector("#helper-add-persona"),
+ helperAddRelationship: document.querySelector("#helper-add-relationship"),
+ helperAddNode: document.querySelector("#helper-add-node"),
+ helperAddEdge: document.querySelector("#helper-add-edge"),
+ cfgWebhookUrl: document.querySelector("#cfg-webhook-url"),
+ cfgWebhookSeverity: document.querySelector("#cfg-webhook-severity"),
+ cfgWebhookAlways: document.querySelector("#cfg-webhook-always"),
+ cfgSecurityMode: document.querySelector("#cfg-security-mode"),
+ cfgSecurityBinaries: document.querySelector("#cfg-security-binaries"),
+ cfgSecurityTimeout: document.querySelector("#cfg-security-timeout"),
+ cfgSecurityInherit: document.querySelector("#cfg-security-inherit"),
+ cfgSecurityScrub: document.querySelector("#cfg-security-scrub"),
+ cfgLimitConcurrent: document.querySelector("#cfg-limit-concurrent"),
+ cfgLimitSession: document.querySelector("#cfg-limit-session"),
+ cfgLimitDepth: document.querySelector("#cfg-limit-depth"),
+ cfgTopologyDepth: document.querySelector("#cfg-topology-depth"),
+ cfgTopologyRetries: document.querySelector("#cfg-topology-retries"),
+ cfgRelationshipChildren: document.querySelector("#cfg-relationship-children"),
+ cfgPortBase: document.querySelector("#cfg-port-base"),
+ cfgPortBlockSize: document.querySelector("#cfg-port-block-size"),
+ cfgPortBlockCount: document.querySelector("#cfg-port-block-count"),
+ cfgPortPrimaryOffset: document.querySelector("#cfg-port-primary-offset"),
+};
+
+const TOPOLOGY_COLORS = {
+ sequential: "#56c3ff",
+ parallel: "#f6b73c",
+ hierarchical: "#44d38f",
+ "retry-unrolled": "#ff8a5b",
+};
+
+const STATUS_COLORS = {
+ success: "#44d38f",
+ validation_fail: "#ffc94a",
+ failure: "#ff6e4a",
+ running: "#ffc94a",
+ cancelled: "#ff6e4a",
+ unknown: "#9bb8cf",
+};
+
+const MANIFEST_TOPOLOGY_ORDER = [
+ "sequential",
+ "parallel",
+ "hierarchical",
+ "retry-unrolled",
+];
+
+const MANIFEST_ON_TRIGGERS = ["success", "validation_fail", "failure", "always"];
+const MANIFEST_EVENT_TRIGGERS = [
+ "requirements_defined",
+ "tasks_planned",
+ "code_committed",
+ "task_blocked",
+ "validation_passed",
+ "validation_failed",
+ "branch_merged",
+];
+
+function fmtMoney(value) {
+ return `$${Number(value || 0).toFixed(4)}`;
+}
+
+function fmtMs(value) {
+ const ms = Number(value || 0);
+ if (ms < 1000) {
+ return `${ms.toFixed(0)}ms`;
+ }
+ return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function escapeHtml(value) {
+ return String(value)
+ .replaceAll("&", "&")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")
+ .replaceAll('"', """)
+ .replaceAll("'", "'");
+}
+
+function showRunStatus(message, isError = false) {
+ dom.runStatus.textContent = message;
+ dom.runStatus.style.color = isError ? "#ff9d87" : "#9bb8cf";
+}
+
+function setManifestStatus(message, isError = false) {
+ dom.manifestStatus.textContent = message;
+ dom.manifestStatus.style.color = isError ? "#ff9d87" : "#9bb8cf";
+}
+
+function setManifestHelperStatus(message, isError = false) {
+ dom.manifestHelperStatus.textContent = message;
+ dom.manifestHelperStatus.style.color = isError ? "#ff9d87" : "#9bb8cf";
+}
+
+function cloneJson(value) {
+ return JSON.parse(JSON.stringify(value));
+}
+
+function toIntegerOrFallback(value, fallback, min = 0) {
+ const parsed = Number(value);
+ if (!Number.isInteger(parsed) || parsed < min) {
+ return fallback;
+ }
+ return parsed;
+}
+
+function readOptionalIntegerField(value, min = 0) {
+ const trimmed = String(value ?? "").trim();
+ if (!trimmed) {
+ return undefined;
+ }
+ const parsed = Number(trimmed);
+ if (!Number.isInteger(parsed) || parsed < min) {
+ return undefined;
+ }
+ return parsed;
+}
+
+function buildMinimalManifestTemplate() {
+ return {
+ schemaVersion: "1",
+ topologies: ["sequential"],
+ personas: [
+ {
+ id: "builder",
+ displayName: "Builder",
+ systemPromptTemplate: "Build and validate for {{repo}}",
+ toolClearance: {
+ allowlist: ["read_file", "write_file"],
+ banlist: [],
+ },
+ },
+ ],
+ relationships: [],
+ topologyConstraints: {
+ maxDepth: 4,
+ maxRetries: 1,
+ },
+ pipeline: {
+ entryNodeId: "build-node",
+ nodes: [
+ {
+ id: "build-node",
+ actorId: "builder_actor",
+ personaId: "builder",
+ },
+ ],
+ edges: [],
+ },
+ };
+}
+
+function buildTwoStageManifestTemplate() {
+ return {
+ schemaVersion: "1",
+ topologies: ["sequential", "retry-unrolled"],
+ personas: [
+ {
+ id: "planner",
+ displayName: "Planner",
+ systemPromptTemplate: "Plan delivery for {{repo}}",
+ toolClearance: {
+ allowlist: ["read_file"],
+ banlist: [],
+ },
+ },
+ {
+ id: "coder",
+ displayName: "Coder",
+ systemPromptTemplate: "Implement ticket {{ticket}}",
+ toolClearance: {
+ allowlist: ["read_file", "write_file"],
+ banlist: [],
+ },
+ },
+ ],
+ relationships: [
+ {
+ parentPersonaId: "planner",
+ childPersonaId: "coder",
+ constraints: {
+ maxDepth: 2,
+ maxChildren: 2,
+ },
+ },
+ ],
+ topologyConstraints: {
+ maxDepth: 5,
+ maxRetries: 2,
+ },
+ pipeline: {
+ entryNodeId: "plan",
+ nodes: [
+ {
+ id: "plan",
+ actorId: "planner_actor",
+ personaId: "planner",
+ },
+ {
+ id: "implement",
+ actorId: "coder_actor",
+ personaId: "coder",
+ constraints: {
+ maxRetries: 1,
+ },
+ topology: {
+ kind: "retry-unrolled",
+ },
+ },
+ ],
+ edges: [
+ {
+ from: "plan",
+ to: "implement",
+ on: "success",
+ },
+ ],
+ },
+ };
+}
+
+function normalizeManifestDraft(manifest) {
+ const fallback = buildMinimalManifestTemplate();
+ if (!manifest || typeof manifest !== "object" || Array.isArray(manifest)) {
+ return fallback;
+ }
+
+ const input = manifest;
+ const topologies = Array.isArray(input.topologies)
+ ? input.topologies.filter((value) => MANIFEST_TOPOLOGY_ORDER.includes(value))
+ : [];
+ const personas = Array.isArray(input.personas) ? input.personas : [];
+ const relationships = Array.isArray(input.relationships) ? input.relationships : [];
+ const pipeline = input.pipeline && typeof input.pipeline === "object" ? input.pipeline : {};
+ const nodes = Array.isArray(pipeline.nodes) ? pipeline.nodes : [];
+ const edges = Array.isArray(pipeline.edges) ? pipeline.edges : [];
+ const constraints =
+ input.topologyConstraints && typeof input.topologyConstraints === "object"
+ ? input.topologyConstraints
+ : {};
+
+ return {
+ schemaVersion: "1",
+ topologies: topologies.length > 0 ? topologies : ["sequential"],
+ personas: personas.map((persona, index) => {
+ const toolClearance =
+ persona && typeof persona.toolClearance === "object" && persona.toolClearance
+ ? persona.toolClearance
+ : {};
+ return {
+ id: String(persona?.id ?? `persona_${index + 1}`),
+ displayName: String(persona?.displayName ?? `Persona ${index + 1}`),
+ systemPromptTemplate: String(persona?.systemPromptTemplate ?? "Prompt for {{repo}}"),
+ ...(typeof persona?.modelConstraint === "string" && persona.modelConstraint.trim()
+ ? { modelConstraint: persona.modelConstraint.trim() }
+ : {}),
+ toolClearance: {
+ allowlist: Array.isArray(toolClearance.allowlist)
+ ? toolClearance.allowlist.map((value) => String(value))
+ : [],
+ banlist: Array.isArray(toolClearance.banlist)
+ ? toolClearance.banlist.map((value) => String(value))
+ : [],
+ },
+ };
+ }),
+ relationships: relationships.map((relationship) => ({
+ parentPersonaId: String(relationship?.parentPersonaId ?? ""),
+ childPersonaId: String(relationship?.childPersonaId ?? ""),
+ ...(relationship?.constraints && typeof relationship.constraints === "object"
+ ? {
+ constraints: {
+ ...(readOptionalIntegerField(relationship.constraints.maxDepth, 1) !== undefined
+ ? { maxDepth: readOptionalIntegerField(relationship.constraints.maxDepth, 1) }
+ : {}),
+ ...(readOptionalIntegerField(relationship.constraints.maxChildren, 1) !== undefined
+ ? { maxChildren: readOptionalIntegerField(relationship.constraints.maxChildren, 1) }
+ : {}),
+ },
+ }
+ : {}),
+ })),
+ topologyConstraints: {
+ maxDepth: toIntegerOrFallback(constraints.maxDepth, 4, 1),
+ maxRetries: toIntegerOrFallback(constraints.maxRetries, 2, 0),
+ },
+ pipeline: {
+ entryNodeId: String(pipeline.entryNodeId ?? (nodes[0]?.id || "")),
+ nodes: nodes.map((node, index) => ({
+ id: String(node?.id ?? `node_${index + 1}`),
+ actorId: String(node?.actorId ?? `actor_${index + 1}`),
+ personaId: String(node?.personaId ?? ""),
+ ...(node?.constraints && typeof node.constraints === "object"
+ ? {
+ constraints: {
+ ...(readOptionalIntegerField(node.constraints.maxRetries, 0) !== undefined
+ ? { maxRetries: readOptionalIntegerField(node.constraints.maxRetries, 0) }
+ : {}),
+ },
+ }
+ : {}),
+ ...(node?.topology && typeof node.topology === "object"
+ ? {
+ topology: {
+ kind: String(node.topology.kind ?? ""),
+ ...(typeof node.topology.blockId === "string" && node.topology.blockId.trim()
+ ? { blockId: node.topology.blockId.trim() }
+ : {}),
+ },
+ }
+ : {}),
+ })),
+ edges: edges.map((edge) => ({
+ from: String(edge?.from ?? ""),
+ to: String(edge?.to ?? ""),
+ ...(typeof edge?.on === "string" ? { on: edge.on } : {}),
+ ...(typeof edge?.event === "string" ? { event: edge.event } : {}),
+ ...(Array.isArray(edge?.when) ? { when: edge.when } : {}),
+ })),
+ },
+ };
+}
+
+function renderSelectOptions(values, selectedValue, input = {}) {
+ const includeBlank = input.includeBlank === true;
+ const blankLabel = input.blankLabel || "(none)";
+ const options = [];
+
+ if (includeBlank) {
+ options.push(``);
+ }
+
+ for (const value of values) {
+ const selected = value === selectedValue ? " selected" : "";
+ options.push(
+ ``,
+ );
+ }
+
+ return options.join("");
+}
+
+function renderManifestHelper() {
+ if (!state.manifestDraft) {
+ state.manifestDraft = buildMinimalManifestTemplate();
+ }
+
+ const draft = state.manifestDraft;
+ const topologies = Array.isArray(draft.topologies) ? draft.topologies : [];
+ const topologySet = new Set(topologies);
+ dom.helperTopologySequential.checked = topologySet.has("sequential");
+ dom.helperTopologyParallel.checked = topologySet.has("parallel");
+ dom.helperTopologyHierarchical.checked = topologySet.has("hierarchical");
+ dom.helperTopologyRetryUnrolled.checked = topologySet.has("retry-unrolled");
+ dom.helperTopologyMaxDepth.value = String(
+ toIntegerOrFallback(draft.topologyConstraints?.maxDepth, 4, 1),
+ );
+ dom.helperTopologyMaxRetries.value = String(
+ toIntegerOrFallback(draft.topologyConstraints?.maxRetries, 2, 0),
+ );
+ dom.helperEntryNodeId.value = String(draft.pipeline?.entryNodeId || "");
+
+ const personas = Array.isArray(draft.personas) ? draft.personas : [];
+ const personaIds = personas.map((persona) => String(persona.id || "")).filter((value) => value);
+ dom.helperPersonas.innerHTML = personas
+ .map((persona, index) => {
+ const allowlist = Array.isArray(persona.toolClearance?.allowlist)
+ ? persona.toolClearance.allowlist
+ : [];
+ const banlist = Array.isArray(persona.toolClearance?.banlist)
+ ? persona.toolClearance.banlist
+ : [];
+ return `
+
+ `;
+ })
+ .join("");
+
+ const relationships = Array.isArray(draft.relationships) ? draft.relationships : [];
+ dom.helperRelationships.innerHTML = relationships
+ .map(
+ (relationship, index) => `
+
+ `,
+ )
+ .join("");
+
+ const nodes = Array.isArray(draft.pipeline?.nodes) ? draft.pipeline.nodes : [];
+ const nodeIds = nodes.map((node) => String(node.id || "")).filter((value) => value);
+ dom.helperNodes.innerHTML = nodes
+ .map(
+ (node, index) => `
+
+ `,
+ )
+ .join("");
+
+ const edges = Array.isArray(draft.pipeline?.edges) ? draft.pipeline.edges : [];
+ dom.helperEdges.innerHTML = edges
+ .map((edge, index) => {
+ const triggerKind = edge.event ? "event" : "on";
+ const whenText = Array.isArray(edge.when) && edge.when.length > 0 ? JSON.stringify(edge.when) : "";
+ return `
+
+
+
+
+
+
+
+
+
+
+
+ | ${escapeHtml(session.sessionId)} |
+ ${escapeHtml(sessionStatus)} |
+ ${Number(session.nodeAttemptCount || 0)} |
+ ${fmtMs(session.durationMs)} |
+ ${fmtMoney(session.costUsd)} |
+ ${escapeHtml(session.endedAt || session.startedAt || "-")} |
+
+ `);
+ }
+
+ dom.historyBody.innerHTML = rows.join("");
+
+ for (const row of dom.historyBody.querySelectorAll("tr[data-session-id]")) {
+ row.addEventListener("click", () => {
+ const sessionId = row.getAttribute("data-session-id") || "";
+ state.selectedSessionId = sessionId;
+ dom.sessionSelect.value = sessionId;
+ void refreshGraph();
+ });
+ }
+}
+
+async function loadSessions() {
+ const payload = await apiRequest("/api/sessions");
+ state.sessions = payload.sessions || [];
+ state.runs = payload.runs || [];
+
+ if (!state.selectedSessionId && state.sessions.length > 0) {
+ state.selectedSessionId = state.sessions[0].sessionId;
+ }
+
+ populateSelect(
+ dom.sessionSelect,
+ state.sessions.map((session) => session.sessionId),
+ state.selectedSessionId,
+ );
+
+ renderRunsAndSessionsTable();
+}
+
+function createSvg(tag, attrs = {}) {
+ const element = document.createElementNS("http://www.w3.org/2000/svg", tag);
+ for (const [key, value] of Object.entries(attrs)) {
+ if (value === undefined || value === null) {
+ continue;
+ }
+ element.setAttribute(key, String(value));
+ }
+ return element;
+}
+
+function computeLayout(nodes, edges) {
+ const nodeIds = nodes.map((node) => node.nodeId);
+ const indegree = new Map(nodeIds.map((nodeId) => [nodeId, 0]));
+ const outgoing = new Map(nodeIds.map((nodeId) => [nodeId, []]));
+
+ for (const edge of edges) {
+ if (!indegree.has(edge.from) || !indegree.has(edge.to)) {
+ continue;
+ }
+ indegree.set(edge.to, (indegree.get(edge.to) || 0) + 1);
+ outgoing.get(edge.from).push(edge.to);
+ }
+
+ const queue = [];
+ for (const [nodeId, count] of indegree.entries()) {
+ if (count === 0) {
+ queue.push(nodeId);
+ }
+ }
+
+ const levelByNode = new Map();
+ for (const nodeId of queue) {
+ levelByNode.set(nodeId, 0);
+ }
+
+ while (queue.length > 0) {
+ const nodeId = queue.shift();
+ const level = levelByNode.get(nodeId) || 0;
+
+ for (const nextNodeId of outgoing.get(nodeId) || []) {
+ const candidate = level + 1;
+ const current = levelByNode.get(nextNodeId);
+ if (current === undefined || candidate > current) {
+ levelByNode.set(nextNodeId, candidate);
+ }
+
+ indegree.set(nextNodeId, (indegree.get(nextNodeId) || 0) - 1);
+ if ((indegree.get(nextNodeId) || 0) <= 0) {
+ queue.push(nextNodeId);
+ }
+ }
+ }
+
+ for (const nodeId of nodeIds) {
+ if (!levelByNode.has(nodeId)) {
+ levelByNode.set(nodeId, 0);
+ }
+ }
+
+ const maxLevel = Math.max(...levelByNode.values(), 0);
+ const columns = Array.from({ length: maxLevel + 1 }, () => []);
+ for (const node of nodes) {
+ const level = levelByNode.get(node.nodeId) || 0;
+ columns[level].push(node.nodeId);
+ }
+
+ const width = 1280;
+ const height = 640;
+ const nodeWidth = 190;
+ const nodeHeight = 76;
+ const xGap = (width - 160) / Math.max(columns.length, 1);
+ const positions = new Map();
+
+ columns.forEach((column, level) => {
+ const yGap = Math.min(130, Math.max(96, (height - 120) / Math.max(column.length, 1)));
+ const startY = Math.max(50, height / 2 - ((column.length - 1) * yGap) / 2);
+
+ column.forEach((nodeId, index) => {
+ positions.set(nodeId, {
+ x: 80 + level * xGap,
+ y: startY + index * yGap,
+ width: nodeWidth,
+ height: nodeHeight,
+ });
+ });
+ });
+
+ return positions;
+}
+
+function renderNodeInspector() {
+ if (!state.graph || !state.selectedNodeId) {
+ dom.nodeInspector.classList.add("empty");
+ dom.nodeInspector.innerHTML = "Select a graph node.";
+ return;
+ }
+
+ const node = state.graph.nodes.find((entry) => entry.nodeId === state.selectedNodeId);
+ if (!node) {
+ dom.nodeInspector.classList.add("empty");
+ dom.nodeInspector.innerHTML = "Selected node is not in the current graph.";
+ return;
+ }
+
+ dom.nodeInspector.classList.remove("empty");
+
+ const attemptsSummary = node.attempts
+ .map((attempt) => {
+ const toolCalls = attempt.usage?.toolCalls ?? 0;
+ const duration = attempt.usage?.durationMs ?? 0;
+ const cost = attempt.usage?.costUsd ?? 0;
+ return `- #${attempt.attempt} ${attempt.status} | ${fmtMs(duration)} | ${fmtMoney(cost)} | tools:${toolCalls} | retrySpawned:${attempt.retrySpawned}`;
+ })
+ .join("\n");
+
+ const domainEvents = (node.domainEvents || []).map((event) => `- ${event.type} @ ${event.timestamp}`).join("\n");
+ const sandbox = JSON.stringify(node.sandboxPayload || {}, null, 2);
+
+ dom.nodeInspector.innerHTML = `
+ ${escapeHtml(
+`Node: ${node.nodeId}
+Actor: ${node.actorId}
+Persona: ${node.personaId}
+Topology: ${node.topology}
+From: ${node.fromNodeId || "(entry)"}
+Attempts: ${node.attemptCount}
+Last status: ${node.lastStatus || "-"}
+Cost: ${fmtMoney(node.usage?.costUsd || 0)}
+Duration: ${fmtMs(node.usage?.durationMs || 0)}
+Subtasks: ${node.subtaskCount}
+Security violations: ${node.securityViolationCount}
+
+Attempt Timeline:
+${attemptsSummary || "-"}
+
+Domain Events:
+${domainEvents || "-"}
+
+Sandbox Payload (ResolvedExecutionContext):
+${sandbox}`,
+ )}
+ `;
+}
+
+function renderGraph() {
+ const svg = dom.graphSvg;
+ svg.innerHTML = "";
+
+ if (!state.graph) {
+ dom.graphBanner.textContent = "No graph loaded.";
+ return;
+ }
+
+ const graph = state.graph;
+ const positions = computeLayout(graph.nodes, graph.edges);
+
+ const defs = createSvg("defs");
+ const marker = createSvg("marker", {
+ id: "arrow",
+ viewBox: "0 0 10 10",
+ refX: "10",
+ refY: "5",
+ markerWidth: "7",
+ markerHeight: "7",
+ orient: "auto-start-reverse",
+ });
+ marker.appendChild(createSvg("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "#5e89ab" }));
+ defs.appendChild(marker);
+ svg.appendChild(defs);
+
+ for (const edge of graph.edges) {
+ const from = positions.get(edge.from);
+ const to = positions.get(edge.to);
+ if (!from || !to) {
+ continue;
+ }
+
+ const startX = from.x + from.width;
+ const startY = from.y + from.height / 2;
+ const endX = to.x;
+ const endY = to.y + to.height / 2;
+ const midX = (startX + endX) / 2;
+
+ const path = createSvg("path", {
+ d: `M ${startX} ${startY} C ${midX} ${startY}, ${midX} ${endY}, ${endX} ${endY}`,
+ fill: "none",
+ stroke: edge.critical ? "#ff6e4a" : edge.visited ? "#7fbce4" : "#486987",
+ "stroke-width": edge.critical ? "2.7" : edge.visited ? "2" : "1.4",
+ "stroke-dasharray": edge.visited ? "" : "6 5",
+ "marker-end": "url(#arrow)",
+ opacity: edge.visited || edge.critical ? "1" : "0.7",
+ });
+ svg.appendChild(path);
+
+ const label = createSvg("text", {
+ x: String(midX),
+ y: String((startY + endY) / 2 - 6),
+ fill: edge.critical ? "#ff6e4a" : "#9dc1dc",
+ "font-size": "11",
+ "text-anchor": "middle",
+ "font-family": "IBM Plex Mono, monospace",
+ });
+ const condition = (edge.conditionLabels || []).join(" & ");
+ label.textContent = condition ? `${edge.trigger} [${condition}]` : edge.trigger;
+ svg.appendChild(label);
+ }
+
+ for (const node of graph.nodes) {
+ const box = positions.get(node.nodeId);
+ if (!box) {
+ continue;
+ }
+
+ const group = createSvg("g", {
+ cursor: "pointer",
+ });
+
+ const color = TOPOLOGY_COLORS[node.topology] || "#56c3ff";
+ const status = node.lastStatus || "unknown";
+ const statusColor = STATUS_COLORS[status] || "#9bb8cf";
+ const isSelected = state.selectedNodeId === node.nodeId;
+ const isCritical = (graph.criticalPathNodeIds || []).includes(node.nodeId);
+
+ const rect = createSvg("rect", {
+ x: box.x,
+ y: box.y,
+ width: box.width,
+ height: box.height,
+ rx: 12,
+ ry: 12,
+ fill: "#0d2234",
+ stroke: isSelected ? "#f6b73c" : isCritical ? "#ff6e4a" : color,
+ "stroke-width": isSelected ? "3" : "2",
+ });
+
+ const top = createSvg("rect", {
+ x: box.x,
+ y: box.y,
+ width: box.width,
+ height: 18,
+ rx: 12,
+ ry: 12,
+ fill: color,
+ opacity: "0.18",
+ stroke: "none",
+ });
+
+ const title = createSvg("text", {
+ x: box.x + 10,
+ y: box.y + 32,
+ fill: "#e8f5ff",
+ "font-size": "13",
+ "font-weight": "700",
+ "font-family": "Space Grotesk, sans-serif",
+ });
+ title.textContent = node.nodeId;
+
+ const meta = createSvg("text", {
+ x: box.x + 10,
+ y: box.y + 50,
+ fill: "#9dc1dc",
+ "font-size": "11",
+ "font-family": "IBM Plex Mono, monospace",
+ });
+ meta.textContent = `${node.topology} | ${node.personaId}`;
+
+ const metrics = createSvg("text", {
+ x: box.x + 10,
+ y: box.y + 66,
+ fill: statusColor,
+ "font-size": "10",
+ "font-family": "IBM Plex Mono, monospace",
+ });
+ const duration = node.usage?.durationMs || 0;
+ const cost = node.usage?.costUsd || 0;
+ metrics.textContent = `a:${node.attemptCount} ${fmtMs(duration)} ${fmtMoney(cost)}`;
+
+ const dot = createSvg("circle", {
+ cx: box.x + box.width - 13,
+ cy: box.y + 13,
+ r: 6,
+ fill: statusColor,
+ });
+
+ group.append(rect, top, title, meta, metrics, dot);
+ group.addEventListener("click", () => {
+ state.selectedNodeId = node.nodeId;
+ renderGraph();
+ renderNodeInspector();
+ });
+
+ svg.appendChild(group);
+ }
+
+ const statusText = graph.status || "unknown";
+ const abortText = graph.aborted ? ` | aborted: ${graph.abortMessage || "yes"}` : "";
+ dom.graphBanner.textContent = `Session ${graph.sessionId} | status: ${statusText}${abortText} | critical path: ${graph.criticalPathNodeIds.join(" -> ") || "(none)"}`;
+}
+
+async function refreshGraph() {
+ if (!state.selectedSessionId || !state.selectedManifestPath) {
+ state.graph = null;
+ renderGraph();
+ renderNodeInspector();
+ return;
+ }
+
+ const query = new URLSearchParams({
+ sessionId: state.selectedSessionId,
+ manifestPath: state.selectedManifestPath,
+ });
+
+ try {
+ const payload = await apiRequest(`/api/sessions/graph?${query.toString()}`);
+ state.graph = payload.graph;
+
+ if (!state.selectedNodeId && state.graph.nodes.length > 0) {
+ state.selectedNodeId = state.graph.nodes[0].nodeId;
+ }
+
+ renderGraph();
+ renderNodeInspector();
+ } catch (error) {
+ state.graph = null;
+ dom.graphSvg.innerHTML = "";
+ dom.graphBanner.textContent = `Graph unavailable: ${error instanceof Error ? error.message : String(error)}`;
+ dom.nodeInspector.classList.add("empty");
+ dom.nodeInspector.textContent = "Select a graph node.";
+ }
+}
+
+function renderEventFeed(events) {
+ const rows = [...events]
+ .reverse()
+ .map((event) => {
+ const ts = new Date(event.timestamp).toLocaleTimeString();
+ return `
+
+
${escapeHtml(ts)}
+
${escapeHtml(event.type)}
+
${escapeHtml(event.message)}
+
+
+
+
+
+
+
Graph Visualizer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Live Event Feed
+
+
+
+
+
+
Run History
+
+
+
+
+
+ | Session |
+ Status |
+ Attempts |
+ Duration |
+ Cost |
+ Updated |
+
+
+
+
+
+
+
+
+
Definitions & Policies
+
+
+
+
+
+
+
+
+
+
+
+
+
+