Refactor UI modules and harden run/API behavior

README.md

@@ -57,6 +57,7 @@ TypeScript runtime for deterministic multi-agent execution with:
 
 ```bash
 npm install
+npm --prefix ui install
 cp .env.example .env
 cp mcp.config.example.json mcp.config.json
 ```
@@ -83,6 +84,8 @@ Start the local UI server:
 npm run ui
 ```
 
+This script builds the React frontend from `ui/` before serving.
+
 Then open:
 
 - `http://127.0.0.1:4317` (default)

demo-manifest.json

@@ -0,0 +1,73 @@
+{
+    "schemaVersion": "1",
+    "topologies": [
+        "sequential"
+    ],
+    "personas": [
+        {
+            "id": "researcher",
+            "displayName": "Researcher",
+            "systemPromptTemplate": "You are a researcher. Read the README.md file in the repository to understand the core architecture of the AI Ops platform. Once you understand it, output your summary.",
+            "toolClearance": {
+                "allowlist": [
+                    "read_file",
+                    "list_directory"
+                ],
+                "banlist": []
+            }
+        },
+        {
+            "id": "writer",
+            "displayName": "Writer",
+            "systemPromptTemplate": "You are a writer. Take the summary provided by the researcher and write it to a new file called 'demo-summary.txt' in the root directory.",
+            "toolClearance": {
+                "allowlist": [
+                    "write_file"
+                ],
+                "banlist": []
+            }
+        }
+    ],
+    "relationships": [
+        {
+            "parentPersonaId": "researcher",
+            "childPersonaId": "writer",
+            "constraints": {
+                "maxDepth": 1,
+                "maxChildren": 1
+            }
+        }
+    ],
+    "topologyConstraints": {
+        "maxDepth": 5,
+        "maxRetries": 2
+    },
+    "pipeline": {
+        "entryNodeId": "research-node",
+        "nodes": [
+            {
+                "id": "research-node",
+                "actorId": "researcher_actor",
+                "personaId": "researcher",
+                "topology": {
+                    "kind": "sequential"
+                }
+            },
+            {
+                "id": "write-node",
+                "actorId": "writer_actor",
+                "personaId": "writer",
+                "topology": {
+                    "kind": "sequential"
+                }
+            }
+        ],
+        "edges": [
+            {
+                "from": "research-node",
+                "to": "write-node",
+                "on": "success"
+            }
+        ]
+    }
+}

package.json

@@ -10,7 +10,8 @@
     "test": "node --import tsx/esm --test tests/**/*.test.ts",
     "verify": "npm run check && npm run check:tests && npm run test && npm run build",
     "dev": "node --import tsx/esm src/index.ts",
-    "ui": "node --import tsx/esm src/ui/server.ts",
+    "ui:build": "npm --prefix ui run build",
+    "ui": "npm run ui:build && node --import tsx/esm src/ui/server.ts",
     "codex": "node --import tsx/esm src/examples/codex.ts",
     "claude": "node --import tsx/esm src/examples/claude.ts",
     "start": "node dist/index.js"
@@ -29,11 +30,16 @@
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.2.50",
     "@openai/codex-sdk": "^0.104.0",
+    "cors": "^2.8.6",
     "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "lowdb": "^7.0.1",
     "sh-syntax": "^0.5.8",
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
     "@types/node": "^25.3.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"

src/agents/manifest.ts

@@ -1,398 +1,113 @@
-import { isRecord } from "./types.js";
+import { z } from "zod";
 import { isDomainEventType, type DomainEventType } from "./domain-events.js";
 import {
-  parseToolClearancePolicy,
+  toolClearancePolicySchema,
   type ToolClearancePolicy as SecurityToolClearancePolicy,
 } from "../security/schemas.js";
 
 export type ToolClearancePolicy = SecurityToolClearancePolicy;
 
-export type ManifestPersona = {
+export const ManifestPersonaSchema = z.object({
-  id: string;
+  id: z.string().trim().min(1, 'Manifest field "id" must be a non-empty string.'),
-  displayName: string;
+  displayName: z.string().trim().min(1, 'Manifest field "displayName" must be a non-empty string.'),
-  systemPromptTemplate: string;
+  systemPromptTemplate: z.string().trim().min(1, 'Manifest field "systemPromptTemplate" must be a non-empty string.'),
-  modelConstraint?: string;
+  modelConstraint: z.string().trim().min(1, 'Manifest persona field "modelConstraint" must be a non-empty string when provided.').optional(),
-  toolClearance: ToolClearancePolicy;
+  toolClearance: toolClearancePolicySchema,
-};
+});
+export type ManifestPersona = z.infer<typeof ManifestPersonaSchema>;
 
-export type RelationshipConstraint = {
+export const RelationshipConstraintSchema = z.object({
-  maxDepth?: number;
+  maxDepth: z.number().int().min(1, 'Manifest field "maxDepth" must be an integer >= 1.').optional(),
-  maxChildren?: number;
+  maxChildren: z.number().int().min(1, 'Manifest field "maxChildren" must be an integer >= 1.').optional(),
-};
+});
+export type RelationshipConstraint = z.infer<typeof RelationshipConstraintSchema>;
 
-export type RelationshipEdge = {
+export const RelationshipEdgeSchema = z.object({
-  parentPersonaId: string;
+  parentPersonaId: z.string().trim().min(1, 'Manifest field "parentPersonaId" must be a non-empty string.'),
-  childPersonaId: string;
+  childPersonaId: z.string().trim().min(1, 'Manifest field "childPersonaId" must be a non-empty string.'),
-  constraints?: RelationshipConstraint;
+  constraints: RelationshipConstraintSchema.optional(),
-};
+});
+export type RelationshipEdge = z.infer<typeof RelationshipEdgeSchema>;
 
-export type RouteCondition =
+export const RouteConditionSchema = z.discriminatedUnion("type", [
-  | {
+  z.object({ type: z.literal("always") }),
-      type: "always";
+  z.object({ type: z.literal("state_flag"), key: z.string().trim().min(1), equals: z.boolean() }),
-    }
+  z.object({ type: z.literal("history_has_event"), event: z.string().trim().min(1) }),
-  | {
+  z.object({ type: z.literal("file_exists"), path: z.string().trim().min(1) }),
-      type: "state_flag";
+]);
-      key: string;
+export type RouteCondition = z.infer<typeof RouteConditionSchema>;
-      equals: boolean;
-    }
-  | {
-      type: "history_has_event";
-      event: string;
-    }
-  | {
-      type: "file_exists";
-      path: string;
-    };
 
-export type PipelineConstraint = {
+export const PipelineConstraintSchema = z.object({
-  maxRetries?: number;
+  maxRetries: z.number().int().min(0, 'Manifest field "maxRetries" must be an integer >= 0.').optional(),
-};
+});
+export type PipelineConstraint = z.infer<typeof PipelineConstraintSchema>;
 
-export type NodeTopologyKind = "sequential" | "parallel" | "hierarchical" | "retry-unrolled";
+export const NodeTopologyKindSchema = z.enum(["sequential", "parallel", "hierarchical", "retry-unrolled"]);
+export type NodeTopologyKind = z.infer<typeof NodeTopologyKindSchema>;
 
-export type PipelineNodeTopology = {
+export const PipelineNodeTopologySchema = z.object({
-  kind: NodeTopologyKind;
+  kind: NodeTopologyKindSchema,
-  blockId?: string;
+  blockId: z.string().trim().min(1, 'Pipeline node topology blockId must be a non-empty string when provided.').optional(),
-};
+});
+export type PipelineNodeTopology = z.infer<typeof PipelineNodeTopologySchema>;
 
-export type PipelineNode = {
+export const PipelineNodeSchema = z.object({
-  id: string;
+  id: z.string().trim().min(1),
-  actorId: string;
+  actorId: z.string().trim().min(1),
-  personaId: string;
+  personaId: z.string().trim().min(1),
-  constraints?: PipelineConstraint;
+  constraints: PipelineConstraintSchema.optional(),
-  topology?: PipelineNodeTopology;
+  topology: PipelineNodeTopologySchema.optional(),
-};
+});
+export type PipelineNode = z.infer<typeof PipelineNodeSchema>;
 
-export type PipelineEdge = {
+export const PipelineEdgeSchema = z.object({
-  from: string;
+  from: z.string().trim().min(1),
-  to: string;
+  to: z.string().trim().min(1),
-  on?: "success" | "validation_fail" | "failure" | "always";
+  on: z.enum(["success", "validation_fail", "failure", "always"]).optional(),
-  event?: DomainEventType;
+  event: z.string().refine((val): val is DomainEventType => isDomainEventType(val), {
-  when?: RouteCondition[];
+    message: "Pipeline edge field 'event' has unsupported domain event.",
-};
+  }).optional(),
+  when: z.array(RouteConditionSchema).optional(),
+}).refine((data) => {
+  if (!data.on && !data.event) return false;
+  if (data.on && data.event) return false;
+  return true;
+}, {
+  message: 'Pipeline edge must provide either an "on" trigger or an "event" trigger, but not both.',
+});
+export type PipelineEdge = z.infer<typeof PipelineEdgeSchema>;
 
-export type PipelineGraph = {
+export const PipelineGraphSchema = z.object({
-  entryNodeId: string;
+  entryNodeId: z.string().trim().min(1),
-  nodes: PipelineNode[];
+  nodes: z.array(PipelineNodeSchema).min(1, "Manifest pipeline.nodes must be a non-empty array."),
-  edges: PipelineEdge[];
+  edges: z.array(PipelineEdgeSchema),
-};
+});
+export type PipelineGraph = z.infer<typeof PipelineGraphSchema>;
 
-export type TopologyKind = "hierarchical" | "parallel" | "retry-unrolled" | "sequential";
+export const TopologyKindSchema = z.enum(["hierarchical", "parallel", "retry-unrolled", "sequential"]);
+export type TopologyKind = z.infer<typeof TopologyKindSchema>;
 
-export type TopologyConstraint = {
+export const TopologyConstraintSchema = z.object({
-  maxDepth: number;
+  maxDepth: z.number().int().min(1).default(4),
-  maxRetries: number;
+  maxRetries: z.number().int().min(0).default(2),
-};
+});
+export type TopologyConstraint = z.infer<typeof TopologyConstraintSchema>;
 
-export type AgentManifest = {
+export const AgentManifestSchema = z.object({
-  schemaVersion: "1";
+  schemaVersion: z.literal("1"),
-  topologies: TopologyKind[];
+  topologies: z.array(TopologyKindSchema).min(1, "Manifest topologies must be a non-empty array."),
-  personas: ManifestPersona[];
+  personas: z.array(ManifestPersonaSchema).min(1, "Manifest personas must be a non-empty array."),
-  relationships: RelationshipEdge[];
+  relationships: z.array(RelationshipEdgeSchema),
-  pipeline: PipelineGraph;
+  pipeline: PipelineGraphSchema,
-  topologyConstraints: TopologyConstraint;
+  topologyConstraints: TopologyConstraintSchema,
-};
+});
-
+export type AgentManifest = z.infer<typeof AgentManifestSchema>;
-function readString(record: Record<string, unknown>, key: string): string {
-  const value = record[key];
-  if (typeof value !== "string" || value.trim().length === 0) {
-    throw new Error(`Manifest field \"${key}\" must be a non-empty string.`);
-  }
-  return value.trim();
-}
-
-function readOptionalInteger(
-  record: Record<string, unknown>,
-  key: string,
-  input: {
-    min: number;
-  },
-): number | undefined {
-  const value = record[key];
-  if (value === undefined) {
-    return undefined;
-  }
-  if (typeof value !== "number" || !Number.isInteger(value) || value < input.min) {
-    throw new Error(`Manifest field \"${key}\" must be an integer >= ${String(input.min)}.`);
-  }
-  return value;
-}
-
-function readStringArray(record: Record<string, unknown>, key: string): string[] {
-  const value = record[key];
-  if (!Array.isArray(value)) {
-    throw new Error(`Manifest field \"${key}\" must be an array.`);
-  }
-
-  const output: string[] = [];
-  for (const item of value) {
-    if (typeof item !== "string" || item.trim().length === 0) {
-      throw new Error(`Manifest field \"${key}\" contains an invalid string.`);
-    }
-    output.push(item.trim());
-  }
-  return output;
-}
-
-function parseToolClearance(value: unknown): ToolClearancePolicy {
-  try {
-    return parseToolClearancePolicy(value);
-  } catch (error) {
-    const detail = error instanceof Error ? error.message : String(error);
-    throw new Error(`Manifest persona toolClearance is invalid: ${detail}`);
-  }
-}
-
-function parsePersona(value: unknown): ManifestPersona {
-  if (!isRecord(value)) {
-    throw new Error("Manifest persona entry must be an object.");
-  }
-
-  const modelConstraintRaw = value.modelConstraint;
-  if (
-    modelConstraintRaw !== undefined &&
-    (typeof modelConstraintRaw !== "string" || modelConstraintRaw.trim().length === 0)
-  ) {
-    throw new Error('Manifest persona field "modelConstraint" must be a non-empty string when provided.');
-  }
-
-  return {
-    id: readString(value, "id"),
-    displayName: readString(value, "displayName"),
-    systemPromptTemplate: readString(value, "systemPromptTemplate"),
-    ...(typeof modelConstraintRaw === "string"
-      ? { modelConstraint: modelConstraintRaw.trim() }
-      : {}),
-    toolClearance: parseToolClearance(value.toolClearance),
-  };
-}
-
-function parseRelationship(value: unknown): RelationshipEdge {
-  if (!isRecord(value)) {
-    throw new Error("Manifest relationship entry must be an object.");
-  }
-
-  const constraints = isRecord(value.constraints)
-    ? {
-        maxDepth: readOptionalInteger(value.constraints, "maxDepth", { min: 1 }),
-        maxChildren: readOptionalInteger(value.constraints, "maxChildren", { min: 1 }),
-      }
-    : undefined;
-
-  return {
-    parentPersonaId: readString(value, "parentPersonaId"),
-    childPersonaId: readString(value, "childPersonaId"),
-    constraints,
-  };
-}
-
-function parseCondition(value: unknown): RouteCondition {
-  if (!isRecord(value)) {
-    throw new Error("Route condition must be an object.");
-  }
-
-  const type = readString(value, "type");
-  if (type === "always") {
-    return { type };
-  }
-
-  if (type === "state_flag") {
-    const key = readString(value, "key");
-    const equals = value.equals;
-    if (typeof equals !== "boolean") {
-      throw new Error('Route condition field "equals" must be a boolean.');
-    }
-    return {
-      type,
-      key,
-      equals,
-    };
-  }
-
-  if (type === "history_has_event") {
-    return {
-      type,
-      event: readString(value, "event"),
-    };
-  }
-
-  if (type === "file_exists") {
-    return {
-      type,
-      path: readString(value, "path"),
-    };
-  }
-
-  throw new Error(`Unsupported route condition type \"${type}\".`);
-}
-
-function parsePipelineNode(value: unknown): PipelineNode {
-  if (!isRecord(value)) {
-    throw new Error("Pipeline node must be an object.");
-  }
-
-  const topology = value.topology;
-  let parsedTopology: PipelineNodeTopology | undefined;
-  if (topology !== undefined) {
-    if (!isRecord(topology)) {
-      throw new Error("Pipeline node topology must be an object when provided.");
-    }
-
-    const kind = readString(topology, "kind");
-    if (
-      kind !== "sequential" &&
-      kind !== "parallel" &&
-      kind !== "hierarchical" &&
-      kind !== "retry-unrolled"
-    ) {
-      throw new Error(`Pipeline node topology kind "${kind}" is not supported.`);
-    }
-
-    const blockIdRaw = topology.blockId;
-    if (blockIdRaw !== undefined && (typeof blockIdRaw !== "string" || blockIdRaw.trim().length === 0)) {
-      throw new Error("Pipeline node topology blockId must be a non-empty string when provided.");
-    }
-
-    parsedTopology = {
-      kind,
-      ...(typeof blockIdRaw === "string" ? { blockId: blockIdRaw.trim() } : {}),
-    };
-  }
-
-  const constraints = isRecord(value.constraints)
-    ? {
-        maxRetries: readOptionalInteger(value.constraints, "maxRetries", { min: 0 }),
-      }
-    : undefined;
-
-  return {
-    id: readString(value, "id"),
-    actorId: readString(value, "actorId"),
-    personaId: readString(value, "personaId"),
-    constraints,
-    ...(parsedTopology ? { topology: parsedTopology } : {}),
-  };
-}
-
-function parsePipelineEdge(value: unknown): PipelineEdge {
-  if (!isRecord(value)) {
-    throw new Error("Pipeline edge must be an object.");
-  }
-
-  const validEvents: NonNullable<PipelineEdge["on"]>[] = [
-    "success",
-    "validation_fail",
-    "failure",
-    "always",
-  ];
-
-  const rawOn = value.on;
-  let on: PipelineEdge["on"];
-  if (rawOn !== undefined) {
-    if (typeof rawOn !== "string" || !validEvents.includes(rawOn as NonNullable<PipelineEdge["on"]>)) {
-      throw new Error(`Pipeline edge field "on" has unsupported event "${String(rawOn)}".`);
-    }
-    on = rawOn as NonNullable<PipelineEdge["on"]>;
-  }
-
-  const rawDomainEvent = value.event;
-  let event: DomainEventType | undefined;
-  if (rawDomainEvent !== undefined) {
-    if (typeof rawDomainEvent !== "string" || !isDomainEventType(rawDomainEvent)) {
-      throw new Error(`Pipeline edge field "event" has unsupported domain event "${String(rawDomainEvent)}".`);
-    }
-    event = rawDomainEvent;
-  }
-
-  if (!on && !event) {
-    throw new Error('Pipeline edge must provide either an "on" trigger or an "event" trigger.');
-  }
-  if (on && event) {
-    throw new Error('Pipeline edge cannot define both "on" and "event" triggers simultaneously.');
-  }
-
-  const rawWhen = value.when;
-  const when: RouteCondition[] = [];
-  if (rawWhen !== undefined) {
-    if (!Array.isArray(rawWhen)) {
-      throw new Error('Pipeline edge field "when" must be an array when provided.');
-    }
-    for (const condition of rawWhen) {
-      when.push(parseCondition(condition));
-    }
-  }
-
-  return {
-    from: readString(value, "from"),
-    to: readString(value, "to"),
-    ...(on ? { on } : {}),
-    ...(event ? { event } : {}),
-    ...(when.length > 0 ? { when } : {}),
-  };
-}
-
-function parsePipeline(value: unknown): PipelineGraph {
-  if (!isRecord(value)) {
-    throw new Error("Manifest pipeline must be an object.");
-  }
-
-  const nodesValue = value.nodes;
-  if (!Array.isArray(nodesValue) || nodesValue.length === 0) {
-    throw new Error("Manifest pipeline.nodes must be a non-empty array.");
-  }
-
-  const edgesValue = value.edges;
-  if (!Array.isArray(edgesValue)) {
-    throw new Error("Manifest pipeline.edges must be an array.");
-  }
-
-  const nodes = nodesValue.map(parsePipelineNode);
-  const edges = edgesValue.map(parsePipelineEdge);
-
-  return {
-    entryNodeId: readString(value, "entryNodeId"),
-    nodes,
-    edges,
-  };
-}
-
-function parseTopologies(value: unknown): TopologyKind[] {
-  if (!Array.isArray(value) || value.length === 0) {
-    throw new Error("Manifest topologies must be a non-empty array.");
-  }
-
-  const valid = new Set<TopologyKind>(["hierarchical", "parallel", "retry-unrolled", "sequential"]);
-  const result: TopologyKind[] = [];
-
-  for (const item of value) {
-    if (typeof item !== "string" || !valid.has(item as TopologyKind)) {
-      throw new Error("Manifest topologies contains an unsupported topology kind.");
-    }
-    result.push(item as TopologyKind);
-  }
-
-  return result;
-}
-
-function parseTopologyConstraints(value: unknown): TopologyConstraint {
-  if (!isRecord(value)) {
-    throw new Error("Manifest topologyConstraints must be an object.");
-  }
-
-  const maxDepth = readOptionalInteger(value, "maxDepth", { min: 1 });
-  const maxRetries = readOptionalInteger(value, "maxRetries", { min: 0 });
-
-  return {
-    maxDepth: maxDepth ?? 4,
-    maxRetries: maxRetries ?? 2,
-  };
-}
 
 function assertNoDuplicates(items: string[], label: string): void {
   const seen = new Set<string>();
   for (const item of items) {
     if (seen.has(item)) {
-      throw new Error(`${label} contains duplicate id \"${item}\".`);
+      throw new Error(`${label} contains duplicate id "${item}".`);
     }
     seen.add(item);
   }
@@ -409,20 +124,20 @@ function assertPipelineDag(pipeline: PipelineGraph): void {
   }
 
   if (!nodeIds.has(pipeline.entryNodeId)) {
-    throw new Error(`Pipeline entry node \"${pipeline.entryNodeId}\" is not defined.`);
+    throw new Error(`Pipeline entry node "${pipeline.entryNodeId}" is not defined.`);
   }
 
   for (const edge of pipeline.edges) {
     if (!nodeIds.has(edge.from)) {
-      throw new Error(`Pipeline edge references unknown from node \"${edge.from}\".`);
+      throw new Error(`Pipeline edge references unknown from node "${edge.from}".`);
     }
     if (!nodeIds.has(edge.to)) {
-      throw new Error(`Pipeline edge references unknown to node \"${edge.to}\".`);
+      throw new Error(`Pipeline edge references unknown to node "${edge.to}".`);
     }
 
     const neighbors = adjacency.get(edge.from);
     if (!neighbors) {
-      throw new Error(`Internal DAG error for node \"${edge.from}\".`);
+      throw new Error(`Internal DAG error for node "${edge.from}".`);
     }
     neighbors.push(edge.to);
     const currentInDegree = indegree.get(edge.to);
@@ -503,34 +218,16 @@ function assertRelationshipDag(relationships: RelationshipEdge[]): void {
 }
 
 export function parseAgentManifest(input: unknown): AgentManifest {
-  if (!isRecord(input)) {
+  let manifest: AgentManifest;
-    throw new Error("AgentManifest must be an object.");
+  try {
+    manifest = AgentManifestSchema.parse(input);
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      throw new Error("Manifest invalid: " + error.issues.map((e: any) => e.message).join(", "));
     }
-
+    throw error;
-  const schemaVersion = readString(input, "schemaVersion");
-  if (schemaVersion !== "1") {
-    throw new Error(`Unsupported AgentManifest schemaVersion \"${schemaVersion}\".`);
   }
 
-  const personasValue = input.personas;
-  if (!Array.isArray(personasValue) || personasValue.length === 0) {
-    throw new Error("Manifest personas must be a non-empty array.");
-  }
-
-  const relationshipsValue = input.relationships;
-  if (!Array.isArray(relationshipsValue)) {
-    throw new Error("Manifest relationships must be an array.");
-  }
-
-  const manifest: AgentManifest = {
-    schemaVersion: "1",
-    topologies: parseTopologies(input.topologies),
-    personas: personasValue.map(parsePersona),
-    relationships: relationshipsValue.map(parseRelationship),
-    pipeline: parsePipeline(input.pipeline),
-    topologyConstraints: parseTopologyConstraints(input.topologyConstraints),
-  };
-
   assertNoDuplicates(
     manifest.personas.map((persona) => persona.id),
     "Manifest personas",
@@ -545,12 +242,12 @@ export function parseAgentManifest(input: unknown): AgentManifest {
   for (const relation of manifest.relationships) {
     if (!personaIds.has(relation.parentPersonaId)) {
       throw new Error(
-        `Relationship references unknown parent persona \"${relation.parentPersonaId}\".`,
+        `Relationship references unknown parent persona "${relation.parentPersonaId}".`,
       );
     }
     if (!personaIds.has(relation.childPersonaId)) {
       throw new Error(
-        `Relationship references unknown child persona \"${relation.childPersonaId}\".`,
+        `Relationship references unknown child persona "${relation.childPersonaId}".`,
       );
     }
   }
@@ -559,7 +256,7 @@ export function parseAgentManifest(input: unknown): AgentManifest {
 
   for (const node of manifest.pipeline.nodes) {
     if (!personaIds.has(node.personaId)) {
-      throw new Error(`Pipeline node \"${node.id}\" references unknown persona \"${node.personaId}\".`);
+      throw new Error(`Pipeline node "${node.id}" references unknown persona "${node.personaId}".`);
     }
 
     if (node.topology && !manifest.topologies.includes(node.topology.kind as TopologyKind)) {

src/agents/provider-executor.ts

@@ -74,6 +74,18 @@ const CLAUDE_OUTPUT_FORMAT = {
 
 const CLAUDE_PROVIDER_MAX_TURNS = 2;
 
+import { z } from "zod";
+
+const ActorResponseSchema = z.object({
+  status: z.enum(["success", "validation_fail", "failure"]),
+  payload: z.unknown().optional(),
+  stateFlags: z.unknown().optional(),
+  stateMetadata: z.unknown().optional(),
+  events: z.unknown().optional(),
+  failureKind: z.unknown().optional(),
+  failureCode: z.unknown().optional(),
+});
+
 function toErrorMessage(error: unknown): string {
   if (error instanceof Error) {
     return error.message;
@@ -236,8 +248,8 @@ function ensureUsageMetadata(input: {
   result: ActorExecutionResult;
   providerUsage: ProviderUsage;
 }): ActorExecutionResult {
-  const stateMetadata = toJsonObject(input.result.stateMetadata) ?? {};
+  const stateMetadata = (input.result.stateMetadata as JsonObject | undefined) ?? {};
-  const existingUsage = toJsonObject(stateMetadata.usage) ?? {};
+  const existingUsage = (stateMetadata.usage as JsonObject | undefined) ?? {};
 
   const usage: JsonObject = {
     ...existingUsage,
@@ -272,7 +284,9 @@ export function parseActorExecutionResultFromModelOutput(input: {
   structuredOutput?: unknown;
 }): ActorExecutionResult {
   const parsed = tryParseResponseObject(input.rawText, input.structuredOutput);
-  if (!isRecord(parsed)) {
+
+  const result = ActorResponseSchema.safeParse(parsed);
+  if (!result.success) {
     return {
       status: "success",
       payload: {
@@ -281,31 +295,22 @@ export function parseActorExecutionResultFromModelOutput(input: {
     };
   }
 
-  const status = parsed.status;
+  const { data } = result;
-  if (status !== "success" && status !== "validation_fail" && status !== "failure") {
+  const payload = toJsonObject(data.payload) ?? {
-    return {
-      status: "success",
-      payload: {
-        assistantResponse: input.rawText.trim(),
-      },
-    };
-  }
-
-  const payload = toJsonObject(parsed.payload) ?? {
     assistantResponse: input.rawText.trim(),
   };
-  const stateMetadata = toJsonObject(parsed.stateMetadata);
+  const stateMetadata = toJsonObject(data.stateMetadata);
-  const stateFlags = toBooleanRecord(parsed.stateFlags);
+  const stateFlags = toBooleanRecord(data.stateFlags);
-  const events = toEventEmissions(parsed.events);
+  const events = toEventEmissions(data.events);
-  const failureKind = parsed.failureKind === "soft" || parsed.failureKind === "hard"
+  const failureKind = data.failureKind === "soft" || data.failureKind === "hard"
-    ? parsed.failureKind
+    ? data.failureKind
     : undefined;
-  const failureCode = typeof parsed.failureCode === "string"
+  const failureCode = typeof data.failureCode === "string"
-    ? parsed.failureCode
+    ? data.failureCode
     : undefined;
 
   return {
-    status,
+    status: data.status,
     payload,
     ...(stateFlags ? { stateFlags } : {}),
     ...(stateMetadata ? { stateMetadata } : {}),

src/runs/run-service.ts

@@ -9,12 +9,12 @@ import type {
   PipelineAggregateStatus,
 } from "../agents/pipeline.js";
 import { loadConfig, type AppConfig } from "../config.js";
-import { parseEnvFile } from "./env-store.js";
+import { parseEnvFile } from "../store/env-store.js";
 import {
   createProviderActorExecutor,
   createProviderRunRuntime,
   type RunProvider,
-} from "./provider-executor.js";
+} from "../agents/provider-executor.js";
 
 const RUN_META_FILE_NAME = "ui-run-meta.json";
 
@@ -240,6 +240,8 @@ async function loadRuntimeConfig(envPath: string): Promise<Readonly<AppConfig>>
   });
 }
 
+import { JSONFilePreset } from "lowdb/node";
+
 async function writeRunMeta(input: {
   stateRoot: string;
   sessionId: string;
@@ -248,7 +250,9 @@ async function writeRunMeta(input: {
   const sessionDirectory = resolve(input.stateRoot, input.sessionId);
   await mkdir(sessionDirectory, { recursive: true });
   const path = resolve(sessionDirectory, RUN_META_FILE_NAME);
-  await writeFile(path, `${JSON.stringify(input.run, null, 2)}\n`, "utf8");
+  const db = await JSONFilePreset<RunRecord>(path, input.run);
+  db.data = input.run;
+  await db.write();
 }
 
 export async function readRunMetaBySession(input: {

src/ui/http-utils.ts

@@ -1,90 +0,0 @@
-import { createReadStream } from "node:fs";
-import { stat } from "node:fs/promises";
-import { extname, resolve } from "node:path";
-import type { IncomingMessage, ServerResponse } from "node:http";
-
-const CONTENT_TYPES: Record<string, string> = {
-  ".html": "text/html; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".svg": "image/svg+xml",
-};
-
-export function sendJson(response: ServerResponse, statusCode: number, body: unknown): void {
-  const payload = JSON.stringify(body);
-  response.statusCode = statusCode;
-  response.setHeader("Content-Type", "application/json; charset=utf-8");
-  response.end(payload);
-}
-
-export function sendText(response: ServerResponse, statusCode: number, body: string): void {
-  response.statusCode = statusCode;
-  response.setHeader("Content-Type", "text/plain; charset=utf-8");
-  response.end(body);
-}
-
-export async function parseJsonBody<T>(request: IncomingMessage): Promise<T> {
-  const chunks: Buffer[] = [];
-
-  await new Promise<void>((resolveBody, rejectBody) => {
-    request.on("data", (chunk: Buffer) => {
-      chunks.push(chunk);
-    });
-    request.on("end", () => resolveBody());
-    request.on("error", rejectBody);
-  });
-
-  const body = Buffer.concat(chunks).toString("utf8").trim();
-  if (!body) {
-    throw new Error("Request body is required.");
-  }
-
-  return JSON.parse(body) as T;
-}
-
-export function methodNotAllowed(response: ServerResponse): void {
-  sendJson(response, 405, {
-    ok: false,
-    error: "Method not allowed.",
-  });
-}
-
-export function notFound(response: ServerResponse): void {
-  sendJson(response, 404, {
-    ok: false,
-    error: "Not found.",
-  });
-}
-
-export async function serveStaticFile(input: {
-  response: ServerResponse;
-  filePath: string;
-}): Promise<boolean> {
-  try {
-    const absolutePath = resolve(input.filePath);
-    const fileStats = await stat(absolutePath);
-    if (!fileStats.isFile()) {
-      return false;
-    }
-
-    const extension = extname(absolutePath).toLowerCase();
-    const contentType = CONTENT_TYPES[extension] ?? "application/octet-stream";
-    input.response.statusCode = 200;
-    input.response.setHeader("Content-Type", contentType);
-
-    await new Promise<void>((resolveStream, rejectStream) => {
-      const stream = createReadStream(absolutePath);
-      stream.on("error", rejectStream);
-      stream.on("end", () => resolveStream());
-      stream.pipe(input.response);
-    });
-
-    return true;
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException).code === "ENOENT") {
-      return false;
-    }
-    throw error;
-  }
-}

src/ui/server.ts

@@ -1,27 +1,14 @@
 import "dotenv/config";
-import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { pathToFileURL } from "node:url";
 import { resolve } from "node:path";
-import { buildSessionGraphInsight, buildSessionSummaries } from "./session-insights.js";
+import express from "express";
-import { UiConfigStore, type LimitSettings, type RuntimeNotificationSettings, type SecurityPolicySettings } from "./config-store.js";
+import cors from "cors";
-import { ManifestStore } from "./manifest-store.js";
+import { z } from "zod";
-import { filterRuntimeEvents, readRuntimeEvents } from "./runtime-events-store.js";
+import { buildSessionGraphInsight, buildSessionSummaries } from "../telemetry/session-insights.js";
-import { parseJsonBody, sendJson, methodNotAllowed, notFound, serveStaticFile } from "./http-utils.js";
+import { UiConfigStore, type LimitSettings, type RuntimeNotificationSettings, type SecurityPolicySettings } from "../store/config-store.js";
-import { readRunMetaBySession, UiRunService, type RunExecutionMode } from "./run-service.js";
+import { ManifestStore } from "../agents/manifest-store.js";
-import type { RunProvider } from "./provider-executor.js";
+import { filterRuntimeEvents, readRuntimeEvents } from "../telemetry/runtime-events-store.js";
-
+import { readRunMetaBySession, UiRunService } from "../runs/run-service.js";
-type StartRunRequest = {
-  prompt: string;
-  manifestPath?: string;
-  manifest?: unknown;
-  sessionId?: string;
-  topologyHint?: string;
-  initialFlags?: Record<string, boolean>;
-  runtimeContextOverrides?: Record<string, string | number | boolean>;
-  simulateValidationNodeIds?: string[];
-  executionMode?: RunExecutionMode;
-  provider?: RunProvider;
-};
 
 function parsePort(value: string | undefined): number {
   const parsed = Number(value ?? "4317");
@@ -31,7 +18,7 @@ function parsePort(value: string | undefined): number {
   return parsed;
 }
 
-function parseLimit(value: string | null, fallback: number): number {
+function parseLimit(value: string | null | undefined, fallback: number): number {
   if (!value) {
     return fallback;
   }
@@ -42,66 +29,6 @@ function parseLimit(value: string | null, fallback: number): number {
   return parsed;
 }
 
-function toRelativePathFromApi(urlPath: string): string {
-  return decodeURIComponent(urlPath);
-}
-
-function ensureBooleanRecord(value: unknown): Record<string, boolean> {
-  if (!value || typeof value !== "object") {
-    return {};
-  }
-
-  const output: Record<string, boolean> = {};
-  for (const [key, raw] of Object.entries(value as Record<string, unknown>)) {
-    if (typeof raw === "boolean") {
-      output[key] = raw;
-    }
-  }
-  return output;
-}
-
-function ensureStringArray(value: unknown): string[] {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-
-  const output: string[] = [];
-  for (const item of value) {
-    if (typeof item !== "string") {
-      continue;
-    }
-    const normalized = item.trim();
-    if (!normalized) {
-      continue;
-    }
-    output.push(normalized);
-  }
-
-  return output;
-}
-
-function ensureRuntimeContext(value: unknown): Record<string, string | number | boolean> {
-  if (!value || typeof value !== "object") {
-    return {};
-  }
-
-  const output: Record<string, string | number | boolean> = {};
-  for (const [key, raw] of Object.entries(value as Record<string, unknown>)) {
-    if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
-      output[key] = raw;
-    }
-  }
-  return output;
-}
-
-function ensureExecutionMode(value: unknown): RunExecutionMode {
-  return value === "provider" ? "provider" : "mock";
-}
-
-function ensureProvider(value: unknown): RunProvider {
-  return value === "claude" ? "claude" : "codex";
-}
-
 async function readRuntimePaths(configStore: UiConfigStore, workspaceRoot: string): Promise<{
   stateRoot: string;
   runtimeEventLogPath: string;
@@ -113,237 +40,144 @@ async function readRuntimePaths(configStore: UiConfigStore, workspaceRoot: strin
   };
 }
 
-async function handleApiRequest(input: {
+const StartRunSchema = z.object({
-  request: IncomingMessage;
+  prompt: z.string().min(1, 'Field "prompt" is required.'),
-  response: ServerResponse;
+  manifestPath: z.string().optional(),
+  manifest: z.unknown().optional(),
+  sessionId: z.string().optional(),
+  topologyHint: z.string().optional(),
+  initialFlags: z.record(z.string(), z.boolean()).optional(),
+  runtimeContextOverrides: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  simulateValidationNodeIds: z.array(z.string()).optional(),
+  executionMode: z.enum(["mock", "provider"]).optional(),
+  provider: z.enum(["claude", "codex"]).optional(),
+});
+
+export async function startUiServer(input: {
   workspaceRoot: string;
-  configStore: UiConfigStore;
+  port?: number;
-  manifestStore: ManifestStore;
+  host?: string;
-  runService: UiRunService;
+}): Promise<{
-}): Promise<boolean> {
+  close: () => Promise<void>;
-  const { request, response, workspaceRoot, configStore, manifestStore, runService } = input;
+}> {
-  const requestUrl = new URL(request.url ?? "/", `http://${request.headers.host ?? "localhost"}`);
+  const workspaceRoot = resolve(input.workspaceRoot);
-  const { pathname } = requestUrl;
+  const staticRoot = resolve(workspaceRoot, "ui/dist");
-  const method = request.method ?? "GET";
 
-  if (!pathname.startsWith("/api/")) {
+  const configStore = new UiConfigStore({ workspaceRoot });
-    return false;
+  const manifestStore = new ManifestStore({ workspaceRoot });
-  }
+  const runService = new UiRunService({ workspaceRoot });
 
+  const app = express();
+  app.use(cors());
+  app.use(express.json({ limit: "50mb" }));
+
+  app.get("/api/health", (req, res) => {
+    res.json({ ok: true, now: new Date().toISOString() });
+  });
+
+  app.get("/api/config", async (req, res, next) => {
     try {
-    if (pathname === "/api/health") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
-      sendJson(response, 200, {
-        ok: true,
-        now: new Date().toISOString(),
-      });
-      return true;
-    }
-
-    if (pathname === "/api/config") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
-
       const snapshot = await configStore.readSnapshot();
-      sendJson(response, 200, {
+      res.json({ ok: true, config: snapshot });
-        ok: true,
+    } catch (error) { next(error); }
-        config: snapshot,
   });
-      return true;
-    }
 
-    if (pathname === "/api/config/runtime-events") {
+  app.put("/api/config/runtime-events", async (req, res, next) => {
-      if (method !== "PUT") {
+    try {
-        methodNotAllowed(response);
+      const snapshot = await configStore.updateRuntimeEvents(req.body as RuntimeNotificationSettings);
-        return true;
+      res.json({ ok: true, config: snapshot });
-      }
+    } catch (error) { next(error); }
-
-      const body = await parseJsonBody<RuntimeNotificationSettings>(request);
-      const snapshot = await configStore.updateRuntimeEvents(body);
-      sendJson(response, 200, {
-        ok: true,
-        config: snapshot,
   });
-      return true;
-    }
 
-    if (pathname === "/api/config/security") {
+  app.put("/api/config/security", async (req, res, next) => {
-      if (method !== "PUT") {
+    try {
-        methodNotAllowed(response);
+      const snapshot = await configStore.updateSecurityPolicy(req.body as SecurityPolicySettings);
-        return true;
+      res.json({ ok: true, config: snapshot });
-      }
+    } catch (error) { next(error); }
-
-      const body = await parseJsonBody<SecurityPolicySettings>(request);
-      const snapshot = await configStore.updateSecurityPolicy(body);
-      sendJson(response, 200, {
-        ok: true,
-        config: snapshot,
   });
-      return true;
-    }
 
-    if (pathname === "/api/config/limits") {
+  app.put("/api/config/limits", async (req, res, next) => {
-      if (method !== "PUT") {
+    try {
-        methodNotAllowed(response);
+      const snapshot = await configStore.updateLimits(req.body as LimitSettings);
-        return true;
+      res.json({ ok: true, config: snapshot });
-      }
+    } catch (error) { next(error); }
-
-      const body = await parseJsonBody<LimitSettings>(request);
-      const snapshot = await configStore.updateLimits(body);
-      sendJson(response, 200, {
-        ok: true,
-        config: snapshot,
   });
-      return true;
-    }
-
-    if (pathname === "/api/manifests") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
 
+  app.get("/api/manifests", async (req, res, next) => {
+    try {
       const listing = await manifestStore.list();
-      sendJson(response, 200, {
+      res.json({ ok: true, manifests: listing.paths });
-        ok: true,
+    } catch (error) { next(error); }
-        manifests: listing.paths,
   });
-      return true;
-    }
 
-    if (pathname === "/api/manifests/read") {
+  app.get("/api/manifests/read", async (req, res, next) => {
-      if (method !== "GET") {
+    try {
-        methodNotAllowed(response);
+      const manifestPath = req.query.path as string;
-        return true;
-      }
-
-      const manifestPath = requestUrl.searchParams.get("path");
       if (!manifestPath) {
-        sendJson(response, 400, {
+        res.status(400).json({ ok: false, error: 'Query parameter "path" is required.' });
-          ok: false,
+        return;
-          error: 'Query parameter "path" is required.',
-        });
-        return true;
       }
-
       const record = await manifestStore.read(manifestPath);
-      sendJson(response, 200, {
+      res.json({ ok: true, manifest: record });
-        ok: true,
+    } catch (error) { next(error); }
-        manifest: record,
   });
-      return true;
-    }
 
-    if (pathname === "/api/manifests/validate") {
+  app.post("/api/manifests/validate", async (req, res, next) => {
-      if (method !== "POST") {
+    try {
-        methodNotAllowed(response);
+      const manifest = await manifestStore.validate(req.body.manifest);
-        return true;
+      res.json({ ok: true, manifest });
-      }
+    } catch (error) { next(error); }
-
-      const body = await parseJsonBody<{ manifest: unknown }>(request);
-      const manifest = await manifestStore.validate(body.manifest);
-      sendJson(response, 200, {
-        ok: true,
-        manifest,
   });
-      return true;
-    }
 
-    if (pathname === "/api/manifests/save") {
+  app.put("/api/manifests/save", async (req, res, next) => {
-      if (method !== "PUT") {
+    try {
-        methodNotAllowed(response);
+      const { path, manifest } = req.body;
-        return true;
+      if (!path || typeof path !== "string") {
+        res.status(400).json({ ok: false, error: 'Field "path" is required.' });
+        return;
       }
-
+      const record = await manifestStore.save(path, manifest);
-      const body = await parseJsonBody<{ path: string; manifest: unknown }>(request);
+      res.json({ ok: true, manifest: record });
-      if (!body.path || typeof body.path !== "string") {
+    } catch (error) { next(error); }
-        sendJson(response, 400, {
-          ok: false,
-          error: 'Field "path" is required.',
   });
-        return true;
-      }
-
-      const record = await manifestStore.save(body.path, body.manifest);
-      sendJson(response, 200, {
-        ok: true,
-        manifest: record,
-      });
-      return true;
-    }
-
-    if (pathname === "/api/runtime-events") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
 
+  app.get("/api/runtime-events", async (req, res, next) => {
+    try {
       const { runtimeEventLogPath } = await readRuntimePaths(configStore, workspaceRoot);
-      const limit = parseLimit(requestUrl.searchParams.get("limit"), 200);
+      const limit = parseLimit(req.query.limit as string | undefined, 200);
-      const sessionId = requestUrl.searchParams.get("sessionId") ?? undefined;
+      const sessionId = (req.query.sessionId as string) || undefined;
       const events = filterRuntimeEvents(await readRuntimeEvents(runtimeEventLogPath), {
         ...(sessionId ? { sessionId } : {}),
         limit,
       });
-
+      res.json({ ok: true, events });
-      sendJson(response, 200, {
+    } catch (error) { next(error); }
-        ok: true,
-        events,
   });
-      return true;
-    }
-
-    if (pathname === "/api/sessions") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
 
+  app.get("/api/sessions", async (req, res, next) => {
+    try {
       const { stateRoot, runtimeEventLogPath } = await readRuntimePaths(configStore, workspaceRoot);
-      const sessions = await buildSessionSummaries({
+      const sessions = await buildSessionSummaries({ stateRoot, runtimeEventLogPath });
-        stateRoot,
+      res.json({ ok: true, sessions, runs: runService.listRuns() });
-        runtimeEventLogPath,
+    } catch (error) { next(error); }
   });
 
-      sendJson(response, 200, {
+  app.get("/api/sessions/graph", async (req, res, next) => {
-        ok: true,
+    try {
-        sessions,
+      const sessionId = (req.query.sessionId as string) ?? "";
-        runs: runService.listRuns(),
-      });
-      return true;
-    }
-
-    if (pathname === "/api/sessions/graph") {
-      if (method !== "GET") {
-        methodNotAllowed(response);
-        return true;
-      }
-
-      const sessionId = requestUrl.searchParams.get("sessionId") ?? "";
       if (!sessionId) {
-        sendJson(response, 400, {
+        res.status(400).json({ ok: false, error: 'Query parameter "sessionId" is required.' });
-          ok: false,
+        return;
-          error: 'Query parameter "sessionId" is required.',
-        });
-        return true;
       }
 
       const { stateRoot, runtimeEventLogPath } = await readRuntimePaths(configStore, workspaceRoot);
-      const explicitManifestPath = requestUrl.searchParams.get("manifestPath");
+      const explicitManifestPath = req.query.manifestPath as string | undefined;
       const runMeta = await readRunMetaBySession({ stateRoot, sessionId });
       const manifestPath = explicitManifestPath ?? runMeta?.manifestPath;
 
       if (!manifestPath) {
-        sendJson(response, 400, {
+        res.status(400).json({ ok: false, error: "No manifestPath available for this session. Provide one in query string." });
-          ok: false,
+        return;
-          error: "No manifestPath available for this session. Provide one in query string.",
-        });
-        return true;
       }
 
       const manifestRecord = await manifestStore.read(manifestPath);
@@ -354,63 +188,33 @@ async function handleApiRequest(input: {
         manifest: manifestRecord.manifest,
       });
 
-      sendJson(response, 200, {
+      res.json({ ok: true, graph, manifestPath: manifestRecord.path });
-        ok: true,
+    } catch (error) { next(error); }
-        graph,
-        manifestPath: manifestRecord.path,
   });
-      return true;
-    }
 
-    if (pathname === "/api/runs") {
+  app.get("/api/runs", (req, res) => {
-      if (method === "GET") {
+    res.json({ ok: true, runs: runService.listRuns() });
-        sendJson(response, 200, {
-          ok: true,
-          runs: runService.listRuns(),
   });
-        return true;
-      }
 
-      if (method === "POST") {
+  app.post("/api/runs", async (req, res, next) => {
-        const body = await parseJsonBody<StartRunRequest>(request);
+    try {
-        if (typeof body.prompt !== "string" || body.prompt.trim().length === 0) {
+      const parseResult = StartRunSchema.safeParse(req.body);
-          sendJson(response, 400, {
+      if (!parseResult.success) {
-            ok: false,
+        res.status(400).json({ ok: false, error: parseResult.error.issues[0]?.message || 'Invalid body' });
-            error: 'Field "prompt" is required.',
+        return;
-          });
-          return true;
       }
-
+      const body = parseResult.data;
-        const manifestSource = (() => {
-          if (body.manifest !== undefined) {
-            return body.manifest;
-          }
-          if (typeof body.manifestPath === "string" && body.manifestPath.trim().length > 0) {
-            return undefined;
-          }
-          return undefined;
-        })();
-
-        const resolvedManifest = manifestSource ?? (() => {
-          if (!body.manifestPath) {
-            return undefined;
-          }
-          return body.manifestPath;
-        })();
 
       let manifest: unknown;
-        if (typeof resolvedManifest === "string") {
+      if (body.manifest !== undefined) {
-          manifest = (await manifestStore.read(resolvedManifest)).source;
+        manifest = body.manifest;
-        } else if (resolvedManifest !== undefined) {
+      } else if (body.manifestPath) {
-          manifest = resolvedManifest;
+        manifest = (await manifestStore.read(body.manifestPath)).source;
       }
 
       if (!manifest) {
-          sendJson(response, 400, {
+        res.status(400).json({ ok: false, error: "A manifest or manifestPath is required to start a run." });
-            ok: false,
+        return;
-            error: "A manifest or manifestPath is required to start a run.",
-          });
-          return true;
       }
 
       const record = await runService.startRun({
@@ -419,147 +223,91 @@ async function handleApiRequest(input: {
         manifestPath: body.manifestPath,
         sessionId: body.sessionId,
         topologyHint: body.topologyHint,
-          initialFlags: ensureBooleanRecord(body.initialFlags),
+        initialFlags: body.initialFlags ?? {},
-          runtimeContextOverrides: ensureRuntimeContext(body.runtimeContextOverrides),
+        runtimeContextOverrides: body.runtimeContextOverrides ?? {},
-          simulateValidationNodeIds: ensureStringArray(body.simulateValidationNodeIds),
+        simulateValidationNodeIds: body.simulateValidationNodeIds ?? [],
-          executionMode: ensureExecutionMode(body.executionMode),
+        executionMode: body.executionMode ?? "mock",
-          provider: ensureProvider(body.provider),
+        provider: body.provider ?? "codex",
       });
 
-        sendJson(response, 202, {
+      res.status(202).json({ ok: true, run: record });
-          ok: true,
+    } catch (error) { next(error); }
-          run: record,
   });
-        return true;
-      }
 
-      methodNotAllowed(response);
+  app.post("/api/runs/:runId/cancel", async (req, res, next) => {
-      return true;
+    try {
+      const runId = req.params.runId;
+      if (!runId) {
+        res.status(400).json({ ok: false, error: "runId required" });
+        return;
       }
-
-    if (pathname.startsWith("/api/runs/") && pathname.endsWith("/cancel")) {
-      if (method !== "POST") {
-        methodNotAllowed(response);
-        return true;
-      }
-
-      const runId = toRelativePathFromApi(pathname.slice("/api/runs/".length, -"/cancel".length));
       const run = await runService.cancelRun(runId);
-      sendJson(response, 200, {
+      res.json({ ok: true, run });
-        ok: true,
+    } catch (error) { next(error); }
-        run,
   });
-      return true;
-    }
 
-    if (pathname.startsWith("/api/runs/")) {
+  app.get("/api/runs/:runId", async (req, res, next) => {
-      if (method !== "GET") {
+    try {
-        methodNotAllowed(response);
+      const runId = req.params.runId;
-        return true;
+      if (!runId) {
+        res.status(400).json({ ok: false, error: "runId required" });
+        return;
       }
-
-      const runId = toRelativePathFromApi(pathname.slice("/api/runs/".length));
       const run = runService.getRun(runId);
       if (!run) {
-        sendJson(response, 404, {
+        res.status(404).json({ ok: false, error: `Run "${runId}" was not found.` });
+        return;
+      }
+      res.json({ ok: true, run });
+    } catch (error) { next(error); }
+  });
+
+  app.use("/api", (req, res) => {
+    res.status(404).json({
       ok: false,
-          error: `Run \"${runId}\" was not found.`,
+      error: `API route "${req.method} ${req.originalUrl}" was not found.`,
     });
-        return true;
-      }
-
-      sendJson(response, 200, {
-        ok: true,
-        run,
   });
-      return true;
-    }
 
-    notFound(response);
+  // Default error handler
-    return true;
+  app.use((err: any, req: express.Request, res: express.Response, next: express.NextFunction) => {
-  } catch (error) {
+    res.status(400).json({
-    sendJson(response, 400, {
       ok: false,
-      error: error instanceof Error ? error.message : String(error),
+      error: err instanceof Error ? err.message : String(err),
     });
-    return true;
-  }
-}
-
-export async function startUiServer(input: {
-  workspaceRoot: string;
-  port?: number;
-  host?: string;
-}): Promise<{
-  close: () => Promise<void>;
-}> {
-  const workspaceRoot = resolve(input.workspaceRoot);
-  const staticRoot = resolve(workspaceRoot, "src/ui/public");
-
-  const configStore = new UiConfigStore({ workspaceRoot });
-  const manifestStore = new ManifestStore({ workspaceRoot });
-  const runService = new UiRunService({ workspaceRoot });
-
-  const server = createServer(async (request, response) => {
-    const handledApi = await handleApiRequest({
-      request,
-      response,
-      workspaceRoot,
-      configStore,
-      manifestStore,
-      runService,
   });
 
-    if (handledApi) {
+  // Serve static files
-      return;
+  app.use(express.static(staticRoot));
-    }
+  app.get(/(.*)/, (req, res) => {
-
+    res.sendFile(resolve(staticRoot, "index.html"));
-    const requestUrl = new URL(request.url ?? "/", `http://${request.headers.host ?? "localhost"}`);
-    const pathname = requestUrl.pathname === "/" ? "/index.html" : requestUrl.pathname;
-    const cleanPath = pathname.replace(/^\//, "");
-    if (cleanPath.includes("..")) {
-      notFound(response);
-      return;
-    }
-
-    const staticPath = resolve(staticRoot, cleanPath);
-    const served = await serveStaticFile({
-      response,
-      filePath: staticPath,
-    });
-
-    if (served) {
-      return;
-    }
-
-    const fallbackServed = await serveStaticFile({
-      response,
-      filePath: resolve(staticRoot, "index.html"),
-    });
-
-    if (!fallbackServed) {
-      notFound(response);
-    }
   });
 
   const host = input.host ?? "127.0.0.1";
   const port = input.port ?? parsePort(process.env.AGENT_UI_PORT);
 
+  const server = app.listen(port, host);
   await new Promise<void>((resolveReady, rejectReady) => {
     server.once("error", rejectReady);
-    server.listen(port, host, () => {
+    server.once("listening", () => {
       server.off("error", rejectReady);
+      console.log(`AI Ops UI listening at http://${host}:${String(port)}`);
       resolveReady();
     });
   });
 
-  console.log(`AI Ops UI listening at http://${host}:${String(port)}`);
-
   return {
     close: async () => {
+      if (!server.listening) {
+        return;
+      }
       await new Promise<void>((resolveClose, rejectClose) => {
         server.close((error) => {
           if (error) {
+            if ((error as NodeJS.ErrnoException).code === "ERR_SERVER_NOT_RUNNING") {
+              resolveClose();
+              return;
+            }
             rejectClose(error);
             return;
           }

tests/env-store.test.ts

@@ -3,7 +3,7 @@ import assert from "node:assert/strict";
 import { mkdtemp, readFile, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { resolve } from "node:path";
-import { parseEnvFile, writeEnvFileUpdates } from "../src/ui/env-store.js";
+import { parseEnvFile, writeEnvFileUpdates } from "../src/store/env-store.js";
 
 test("parseEnvFile handles missing files", async () => {
   const root = await mkdtemp(resolve(tmpdir(), "ai-ops-env-store-"));

tests/manifest-schema.test.ts

@@ -148,7 +148,7 @@ test("rejects legacy edge trigger aliases", () => {
 
   assert.throws(
     () => parseAgentManifest(manifest),
-    /unsupported event "onValidationFail"/,
+    /Invalid option/,
   );
 });
 

tests/provider-executor.test.ts

@@ -1,6 +1,6 @@
 import test from "node:test";
 import assert from "node:assert/strict";
-import { parseActorExecutionResultFromModelOutput } from "../src/ui/provider-executor.js";
+import { parseActorExecutionResultFromModelOutput } from "../src/agents/provider-executor.js";
 
 test("parseActorExecutionResultFromModelOutput parses strict JSON payload", () => {
   const parsed = parseActorExecutionResultFromModelOutput({
@@ -64,3 +64,42 @@ test("parseActorExecutionResultFromModelOutput falls back when response is not J
   assert.equal(parsed.status, "success");
   assert.equal(parsed.payload?.assistantResponse, "Implemented update successfully.");
 });
+
+test("parseActorExecutionResultFromModelOutput preserves status when optional fields are malformed", () => {
+  const parsed = parseActorExecutionResultFromModelOutput({
+    rawText: JSON.stringify({
+      status: "failure",
+      payload: {
+        reason: "hard failure",
+      },
+      stateFlags: {
+        retryable: false,
+        invalid_flag: "nope",
+      },
+      stateMetadata: "not-an-object",
+      events: [
+        {
+          type: "validation_failed",
+          payload: {
+            summary: "failed",
+          },
+        },
+        {
+          type: 123,
+        },
+      ],
+      failureKind: "not-valid",
+      failureCode: 403,
+    }),
+  });
+
+  assert.equal(parsed.status, "failure");
+  assert.equal(parsed.payload?.reason, "hard failure");
+  assert.equal(parsed.stateFlags?.retryable, false);
+  assert.equal(parsed.stateFlags && "invalid_flag" in parsed.stateFlags, false);
+  assert.equal(parsed.stateMetadata, undefined);
+  assert.equal(parsed.events?.length, 1);
+  assert.equal(parsed.events?.[0]?.type, "validation_failed");
+  assert.equal(parsed.failureKind, undefined);
+  assert.equal(parsed.failureCode, undefined);
+});

tests/run-service.test.ts

@@ -3,7 +3,7 @@ import assert from "node:assert/strict";
 import { mkdtemp, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { resolve } from "node:path";
-import { UiRunService, readRunMetaBySession } from "../src/ui/run-service.js";
+import { UiRunService, readRunMetaBySession } from "../src/runs/run-service.js";
 
 async function waitForTerminalRun(
   runService: UiRunService,

tests/session-insights.test.ts

@@ -4,7 +4,7 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { resolve } from "node:path";
 import { mkdtemp } from "node:fs/promises";
-import { buildSessionGraphInsight, buildSessionSummaries } from "../src/ui/session-insights.js";
+import { buildSessionGraphInsight, buildSessionSummaries } from "../src/telemetry/session-insights.js";
 import { parseAgentManifest } from "../src/agents/manifest.js";
 
 function createManifest() {
@@ -155,13 +155,13 @@ test("buildSessionGraphInsight maps attempts, edge visits, and sandbox payload",
   assert.equal(graph.status, "success");
   assert.equal(graph.nodes.length, 2);
 
-  const node2 = graph.nodes.find((node) => node.nodeId === "n2");
+  const node2 = graph.nodes.find((node: any) => node.nodeId === "n2");
   assert.ok(node2);
   assert.equal(node2.attemptCount, 2);
   assert.equal(node2.subtaskCount, 1);
   assert.equal(node2.sandboxPayload?.phase, "n2");
 
-  const edge = graph.edges.find((entry) => entry.from === "n1" && entry.to === "n2");
+  const edge = graph.edges.find((entry: any) => entry.from === "n1" && entry.to === "n2");
   assert.ok(edge);
   assert.equal(edge.visited, true);
   assert.equal(edge.trigger, "event:validation_failed");

ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

ui/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

ui/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ui</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

ui/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

ui/src/App.tsx

@@ -0,0 +1,22 @@
+
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import MainLayout from './layouts/MainLayout';
+import Dashboard from './pages/Dashboard';
+import Settings from './pages/Settings';
+import History from './pages/History';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainLayout />}>
+          <Route index element={<Dashboard />} />
+          <Route path="history" element={<History />} />
+          <Route path="settings" element={<Settings />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

ui/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

ui/src/index.css

@@ -0,0 +1,602 @@
+:root {
+  --bg-primary: #0a0a0c;
+  --bg-secondary: #121216;
+  --bg-tertiary: #1a1a20;
+  --bg-highlight: #23232b;
+
+  --text-primary: #ffffff;
+  --text-secondary: #94949e;
+  --text-tertiary: #6b6b76;
+
+  --accent-primary: #818cf8;
+  --accent-primary-hover: #6366f1;
+  --accent-secondary: #c084fc;
+
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger: #ef4444;
+  --info: #38bdf8;
+
+  --border-color: rgba(255, 255, 255, 0.08);
+  --border-focus: rgba(129, 140, 248, 0.5);
+
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-glow: 0 0 15px rgba(129, 140, 248, 0.3);
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
+  /* App takes full height */
+}
+
+/* Typography elements */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+  letter-spacing: -0.025em;
+}
+
+h2 {
+  font-size: 1.25rem;
+  letter-spacing: -0.025em;
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+p {
+  color: var(--text-secondary);
+}
+
+/* Form Elements */
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: 0.875rem;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  transition: all var(--transition-fast);
+  outline: none;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 2px var(--border-focus);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled,
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--bg-highlight);
+  border: 1px solid var(--border-color);
+}
+
+button:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.primary {
+  background: var(--accent-primary);
+  color: white;
+  border-color: transparent;
+  box-shadow: 0 2px 4px rgba(129, 140, 248, 0.2);
+}
+
+button.primary:hover:not(:disabled) {
+  background: var(--accent-primary-hover);
+  box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
+}
+
+button.danger {
+  color: var(--danger);
+  border-color: rgba(239, 68, 68, 0.2);
+  background: rgba(239, 68, 68, 0.05);
+}
+
+button.danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+/* App Shell Layout */
+#root {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 260px;
+  background-color: var(--bg-secondary);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  z-index: 10;
+}
+
+.sidebar-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h1 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin: 0;
+}
+
+.sidebar-header p {
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  opacity: 0.7;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 1rem 0;
+  overflow-y: auto;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1.5rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  border-left: 2px solid transparent;
+}
+
+.nav-item:hover {
+  background-color: var(--bg-highlight);
+  color: var(--text-primary);
+}
+
+.nav-item.active {
+  background-color: rgba(129, 140, 248, 0.05);
+  color: var(--accent-primary);
+  border-left-color: var(--accent-primary);
+}
+
+.nav-item svg {
+  width: 18px;
+  height: 18px;
+  opacity: 0.8;
+}
+
+.nav-item.active svg {
+  opacity: 1;
+}
+
+.sidebar-footer {
+  padding: 1.25rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--text-tertiary);
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  transition: all var(--transition-normal);
+}
+
+.status-dot.online {
+  background-color: var(--success);
+  box-shadow: 0 0 8px var(--success);
+  animation: pulse 2s infinite;
+}
+
+.status-dot.offline {
+  background-color: var(--danger);
+  box-shadow: 0 0 8px var(--danger);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
+  }
+
+  70% {
+    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
+  }
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-primary);
+  overflow: hidden;
+  position: relative;
+}
+
+.top-bar {
+  height: 60px;
+  border-bottom: 1px solid var(--border-color);
+  background-color: rgba(10, 10, 12, 0.8);
+  backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  padding: 0 2rem;
+  justify-content: space-between;
+  z-index: 5;
+}
+
+.page-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.content-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+  scroll-behavior: smooth;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+/* Panel Layout */
+.panel {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-md);
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.panel-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Forms & Inputs specific to layout */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--text-secondary);
+}
+
+.form-row {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.form-row>* {
+  flex: 1;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-color);
+  margin: 1.5rem 0;
+}
+
+/* Tag / Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-full);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.badge.success {
+  background: rgba(52, 211, 153, 0.15);
+  color: var(--success);
+}
+
+.badge.warning {
+  background: rgba(251, 191, 36, 0.15);
+  color: var(--warning);
+  border: 1px solid rgba(251, 191, 36, 0.3);
+}
+
+.badge.danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--danger);
+}
+
+.badge.info {
+  background: rgba(56, 189, 248, 0.15);
+  color: var(--info);
+}
+
+.badge.neutral {
+  background: var(--bg-highlight);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
+/* Utility */
+.text-subtle {
+  color: var(--text-tertiary);
+  font-size: 0.8rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+/* Grid Layout */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1.5rem;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Utilities added for React flow */
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
+.h-48 {
+  height: 12rem;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.border {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+  border-style: solid;
+}
+
+.border-dashed {
+  border-style: dashed;
+}
+
+.border-color {
+  border-color: var(--border-color);
+}
+
+.rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.bg-tertiary {
+  background-color: var(--bg-tertiary);
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-accent {
+  color: var(--accent-primary);
+}
+
+.text-success {
+  color: var(--success);
+}
+
+.text-info {
+  color: var(--info);
+}
+
+.text-warning {
+  color: var(--warning);
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}

ui/src/layouts/MainLayout.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { LayoutDashboard, Settings, Activity, History } from 'lucide-react';
+
+const MainLayout: React.FC = () => {
+    const [isServerOnline, setIsServerOnline] = useState(false);
+    const location = useLocation();
+
+    useEffect(() => {
+        // Basic ping to check if our API is running
+        fetch('/api/health')
+            .then((res) => {
+                if (res.ok) setIsServerOnline(true);
+            })
+            .catch(() => setIsServerOnline(false));
+
+        // Optional: add a polling interval
+        const interval = setInterval(() => {
+            fetch('/api/health')
+                .then((res) => setIsServerOnline(res.ok))
+                .catch(() => setIsServerOnline(false));
+        }, 10000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const getPageTitle = (pathname: string) => {
+        switch (pathname) {
+            case '/': return 'Dashboard Overview';
+            case '/settings': return 'Definitions & Policies';
+            case '/history': return 'Run History';
+            default: return 'AI Ops';
+        }
+    };
+
+    return (
+        <div id="root">
+            <aside className="sidebar">
+                <div className="sidebar-header">
+                    <h1>AI Ops Control</h1>
+                    <p>Topology & Telemetry</p>
+                </div>
+                <nav className="sidebar-nav">
+                    <NavLink to="/" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
+                        <LayoutDashboard /> Dashboard
+                    </NavLink>
+                    <NavLink to="/history" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
+                        <History /> History
+                    </NavLink>
+                    <NavLink to="/settings" className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}>
+                        <Settings /> Policies & Limits
+                    </NavLink>
+                </nav>
+                <div className="sidebar-footer">
+                    <div className={`status-dot ${isServerOnline ? 'online' : 'offline'}`} />
+                    {isServerOnline ? 'Server Online' : 'Connecting...'}
+                </div>
+            </aside>
+
+            <main className="main-content">
+                <header className="top-bar">
+                    <h2 className="page-title">{getPageTitle(location.pathname)}</h2>
+                    <div>
+                        <div className="badge neutral flex items-center gap-2">
+                            <Activity size={14} /> Agent Ready
+                        </div>
+                    </div>
+                </header>
+
+                <div className="content-scroll animate-fade-in" key={location.pathname}>
+                    <Outlet />
+                </div>
+            </main>
+        </div>
+    );
+};
+
+export default MainLayout;

ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

ui/src/pages/Dashboard.tsx

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import { Play, Activity, Box } from 'lucide-react';
+
+const Dashboard: React.FC = () => {
+    const [sessions, setSessions] = useState<any[]>([]);
+    const [manifests, setManifests] = useState<string[]>([]);
+    const [selectedSession, setSelectedSession] = useState('');
+
+    // Job Form State
+    const [prompt, setPrompt] = useState('');
+    const [runManifest, setRunManifest] = useState('');
+    const [provider, setProvider] = useState('codex');
+    const [mode, setMode] = useState('provider');
+    const [topologyHint, setTopologyHint] = useState('');
+    const [runStatus, setRunStatus] = useState({ text: '', isError: false });
+
+    // Events State
+    const [events, setEvents] = useState<any[]>([]);
+
+    // Graph State
+    const [graphData, setGraphData] = useState<any>(null);
+    const [graphLoading, setGraphLoading] = useState(false);
+
+    useEffect(() => {
+        fetch('/api/sessions').then(r => r.json()).then(d => {
+            if (d.ok) setSessions(d.sessions || []);
+        });
+        fetch('/api/manifests').then(r => r.json()).then(d => {
+            if (d.ok) {
+                setManifests(d.manifests || []);
+                if (d.manifests?.length) setRunManifest(d.manifests[0]);
+            }
+        });
+        fetchEvents();
+    }, []);
+
+    const fetchEvents = () => {
+        fetch('/api/runtime-events?limit=50').then(r => r.json()).then(d => {
+            if (d.ok) {
+                setEvents(d.events || []);
+            }
+        });
+    };
+
+    const handleGraphRefresh = async () => {
+        if (!selectedSession || !runManifest) return;
+        setGraphLoading(true);
+        try {
+            const res = await fetch(`/api/sessions/graph?sessionId=${encodeURIComponent(selectedSession)}&manifestPath=${encodeURIComponent(runManifest)}`);
+            const data = await res.json();
+            if (data.ok) {
+                setGraphData(data.graph);
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setGraphLoading(false);
+        }
+    };
+
+    const handleStartRun = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setRunStatus({ text: 'Starting...', isError: false });
+        try {
+            const res = await fetch('/api/runs', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    prompt,
+                    manifestPath: runManifest,
+                    provider,
+                    executionMode: mode,
+                    topologyHint: topologyHint || undefined
+                })
+            });
+            const data = await res.json();
+            if (res.ok && data.ok) {
+                setRunStatus({ text: 'Run started successfully.', isError: false });
+                setPrompt('');
+                fetchEvents();
+            } else {
+                setRunStatus({ text: data.error || 'Failed to start run.', isError: true });
+            }
+        } catch (err: any) {
+            setRunStatus({ text: err.message, isError: true });
+        }
+    };
+
+    return (
+        <div className="dashboard-grid fade-in">
+            {/* Left Column */}
+            <div className="flex flex-col gap-4">
+                {/* Graph Visualizer Panel */}
+                <section className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Network size={18} className="text-accent" /> Graph Visualizer
+                        </h2>
+                        <div className="flex gap-4">
+                            <label className="text-subtle">
+                                Session
+                                <select className="ml-2 bg-tertiary" value={selectedSession} onChange={e => setSelectedSession(e.target.value)}>
+                                    <option value="">Select Session</option>
+                                    {sessions.map(s => (
+                                        <option key={s.id} value={s.id}>{s.id}</option>
+                                    ))}
+                                </select>
+                            </label>
+                            <button className="primary" type="button" onClick={handleGraphRefresh} disabled={graphLoading}>
+                                {graphLoading ? 'Loading...' : 'Refresh'}
+                            </button>
+                        </div>
+                    </div>
+                    <div className="h-64 flex items-center justify-center border border-dashed border-color rounded-lg text-subtle overflow-hidden relative">
+                        {graphData ? (
+                            <pre className="text-xs overflow-auto w-full h-full p-4 text-left">
+                                {JSON.stringify(graphData, null, 2)}
+                            </pre>
+                        ) : (
+                            <span>Select a Session and Manifest to view execution graph structure</span>
+                        )}
+                    </div>
+                </section>
+
+                {/* Live Event Feed Panel */}
+                <section className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Activity size={18} className="text-info" /> Live Event Feed
+                        </h2>
+                        <button className="primary text-sm p-1" type="button" onClick={fetchEvents}>Refresh</button>
+                    </div>
+                    <div className="h-48 overflow-y-auto bg-tertiary rounded-lg p-2 text-sm font-mono text-subtle opacity-75 whitespace-pre-wrap">
+                        {events.length === 0 ? '[Live Feed] Waiting for events...' : events.map((ev, i) => (
+                            <div key={i}>[{new Date(ev.timestamp).toLocaleTimeString()}] {ev.type} - {ev.message}</div>
+                        ))}
+                    </div>
+                </section>
+            </div>
+
+            {/* Right Column */}
+            <div className="flex flex-col gap-4">
+                {/* Job Trigger Panel */}
+                <aside className="panel mb-0">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Play size={18} className="text-success" /> Job Trigger
+                        </h2>
+                    </div>
+                    <form className="flex flex-col gap-4" onSubmit={handleStartRun}>
+                        <div className="form-group mb-0">
+                            <label>Prompt / Task</label>
+                            <textarea rows={3} placeholder="Describe the run objective..." className="w-full" value={prompt} onChange={e => setPrompt(e.target.value)} required></textarea>
+                        </div>
+
+                        <div className="form-group mb-0">
+                            <label>Manifest</label>
+                            <select className="w-full" value={runManifest} onChange={e => setRunManifest(e.target.value)} required>
+                                {manifests.map(m => (
+                                    <option key={m} value={m}>{m}</option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <div className="form-row mb-0">
+                            <div className="form-group mb-0">
+                                <label>Provider</label>
+                                <select className="w-full" value={provider} onChange={e => setProvider(e.target.value)}>
+                                    <option value="codex">codex</option>
+                                    <option value="claude">claude</option>
+                                </select>
+                            </div>
+                            <div className="form-group mb-0">
+                                <label>Mode</label>
+                                <select className="w-full" value={mode} onChange={e => setMode(e.target.value)}>
+                                    <option value="provider">provider</option>
+                                    <option value="mock">mock</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className="form-group mb-0">
+                            <label>Topology Hint</label>
+                            <input type="text" placeholder="sequential | parallel..." className="w-full" value={topologyHint} onChange={e => setTopologyHint(e.target.value)} />
+                        </div>
+
+                        <div className="flex justify-between items-center mt-2">
+                            <button type="submit" className="primary w-full">Start Run</button>
+                        </div>
+                        {runStatus.text && (
+                            <div className={`text-sm ${runStatus.isError ? 'text-danger' : 'text-success'}`}>{runStatus.text}</div>
+                        )}
+                    </form>
+                </aside>
+
+                {/* Node Inspector */}
+                <aside className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Box size={18} className="text-warning" /> Node Inspector
+                        </h2>
+                    </div>
+                    <div className="p-4 bg-tertiary rounded-lg text-center text-subtle text-sm">
+                        Select a graph node to inspect details.
+                    </div>
+                </aside>
+            </div>
+        </div>
+    );
+};
+
+// Add missing lucide import that was used from layout 
+import { Network } from 'lucide-react';
+export default Dashboard;

ui/src/pages/History.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { History as HistoryIcon, RefreshCw } from 'lucide-react';
+
+const History: React.FC = () => {
+    const [runs, setRuns] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    const fetchHistory = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch('/api/sessions');
+            const data = await res.json();
+            if (data.ok) {
+                // Sort by descending update time (assuming default or simple sort needed)
+                const sortedRuns = (data.runs || []).sort((a: any, b: any) => {
+                    return new Date(b.updatedAt || 0).getTime() - new Date(a.updatedAt || 0).getTime();
+                });
+                setRuns(sortedRuns);
+            }
+        } catch (e) {
+            console.error('Failed to fetch history', e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchHistory();
+    }, []);
+
+    return (
+        <div className="fade-in">
+            <section className="panel">
+                <div className="panel-header">
+                    <h2 className="panel-title">
+                        <HistoryIcon size={18} className="text-secondary" /> Run History
+                    </h2>
+                    <button className="primary" onClick={fetchHistory} disabled={loading}>
+                        <RefreshCw size={14} className={loading ? 'animate-spin' : ''} /> Refresh
+                    </button>
+                </div>
+
+                <div className="overflow-x-auto">
+                    <table className="w-full text-left border-collapse">
+                        <thead>
+                            <tr className="border-b border-color text-subtle">
+                                <th className="p-3 font-medium">Session ID</th>
+                                <th className="p-3 font-medium">Status</th>
+                                <th className="p-3 font-medium">Attempts</th>
+                                <th className="p-3 font-medium">Updated</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {runs.length === 0 ? (
+                                <tr>
+                                    <td className="p-3" colSpan={4}>
+                                        <div className="text-center py-8 text-subtle">
+                                            {loading ? 'Loading...' : 'No run history available.'}
+                                        </div>
+                                    </td>
+                                </tr>
+                            ) : (
+                                runs.map((run: any) => {
+                                    const dateStr = run.updatedAt ? new Date(run.updatedAt).toLocaleString() : 'N/A';
+                                    let statusColor = 'text-subtle';
+                                    if (run.status === 'success') statusColor = 'text-success';
+                                    if (run.status === 'failure' || run.status === 'cancelled') statusColor = 'text-danger';
+                                    if (run.status === 'validation_fail') statusColor = 'text-warning';
+
+                                    return (
+                                        <tr key={run.id} className="border-b border-color hover:bg-highlight transition-colors">
+                                            <td className="p-3 font-mono text-sm">{run.sessionId || 'N/A'}</td>
+                                            <td className={`p-3 font-medium ${statusColor}`}>{run.status || 'unknown'}</td>
+                                            <td className="p-3">{run.attempts ?? 0}</td>
+                                            <td className="p-3 text-sm text-subtle">{dateStr}</td>
+                                        </tr>
+                                    );
+                                })
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </div>
+    );
+};
+
+export default History;

ui/src/pages/Settings.tsx

@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from 'react';
+import { Shield, Bell, HardDrive, FileJson } from 'lucide-react';
+
+const Settings: React.FC = () => {
+    // Config Status
+    const [configStatus, setConfigStatus] = useState({ text: '', isError: false, section: '' });
+
+    // Notifications State
+    const [webhookUrl, setWebhookUrl] = useState('');
+    const [severity, setSeverity] = useState('info');
+    const [alwaysNotify, setAlwaysNotify] = useState('');
+
+    // Security State
+    const [violationMode, setViolationMode] = useState('hard_abort');
+    const [allowedBinaries, setAllowedBinaries] = useState('');
+
+    // Limits State
+    const [maxConcurrent, setMaxConcurrent] = useState('');
+    const [maxSession, setMaxSession] = useState('');
+
+    useEffect(() => {
+        fetch('/api/config')
+            .then(res => res.json())
+            .then(data => {
+                if (data.ok && data.config) {
+                    const cfg = data.config;
+                    setWebhookUrl(cfg.runtimeEvents?.discordWebhookUrl || '');
+                    setSeverity(cfg.runtimeEvents?.minSeverity || 'info');
+                    setAlwaysNotify(cfg.runtimeEvents?.alwaysNotifyTypes?.join(',') || '');
+
+                    setViolationMode(cfg.securityPolicy?.violationMode || 'hard_abort');
+                    setAllowedBinaries(cfg.securityPolicy?.allowedBinaries?.join(',') || '');
+
+                    setMaxConcurrent(cfg.limits?.maxConcurrentSessionLimit?.toString() || '');
+                    setMaxSession(cfg.limits?.maxSessionAgentLimit?.toString() || '');
+                }
+            })
+            .catch(e => console.error("Failed to load config", e));
+    }, []);
+
+    const handleSaveNotifications = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setConfigStatus({ text: 'Saving notifications...', isError: false, section: 'notifications' });
+        try {
+            const res = await fetch('/api/config/runtime-events', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    discordWebhookUrl: webhookUrl || undefined,
+                    minSeverity: severity,
+                    alwaysNotifyTypes: alwaysNotify ? alwaysNotify.split(',').map(s => s.trim()) : undefined
+                })
+            });
+            const data = await res.json();
+            if (data.ok) setConfigStatus({ text: 'Saved successfully.', isError: false, section: 'notifications' });
+            else setConfigStatus({ text: data.error || 'Failed to save.', isError: true, section: 'notifications' });
+        } catch (err: any) {
+            setConfigStatus({ text: err.message, isError: true, section: 'notifications' });
+        }
+    };
+
+    const handleSaveSecurity = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setConfigStatus({ text: 'Saving security...', isError: false, section: 'security' });
+        try {
+            const res = await fetch('/api/config/security', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    violationMode,
+                    allowedBinaries: allowedBinaries ? allowedBinaries.split(',').map(s => s.trim()) : undefined
+                })
+            });
+            const data = await res.json();
+            if (data.ok) setConfigStatus({ text: 'Saved successfully.', isError: false, section: 'security' });
+            else setConfigStatus({ text: data.error || 'Failed to save.', isError: true, section: 'security' });
+        } catch (err: any) {
+            setConfigStatus({ text: err.message, isError: true, section: 'security' });
+        }
+    };
+
+    const handleSaveLimits = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setConfigStatus({ text: 'Saving limits...', isError: false, section: 'limits' });
+        try {
+            const res = await fetch('/api/config/limits', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    maxConcurrentSessionLimit: parseInt(maxConcurrent) || undefined,
+                    maxSessionAgentLimit: parseInt(maxSession) || undefined
+                })
+            });
+            const data = await res.json();
+            if (data.ok) setConfigStatus({ text: 'Saved successfully.', isError: false, section: 'limits' });
+            else setConfigStatus({ text: data.error || 'Failed to save.', isError: true, section: 'limits' });
+        } catch (err: any) {
+            setConfigStatus({ text: err.message, isError: true, section: 'limits' });
+        }
+    };
+
+    const [manifestPath, setManifestPath] = useState('');
+    const [manifestJson, setManifestJson] = useState('');
+    const [manifestStatus, setManifestStatus] = useState({ text: '', isError: false });
+
+    const handleLoadManifest = async () => {
+        if (!manifestPath) {
+            setManifestStatus({ text: 'Please enter a manifest path.', isError: true });
+            return;
+        }
+        setManifestStatus({ text: 'Loading...', isError: false });
+        try {
+            const res = await fetch(`/api/manifests/read?path=${encodeURIComponent(manifestPath)}`);
+            const data = await res.json();
+            if (data.ok) {
+                setManifestJson(JSON.stringify(data.manifest.source || data.manifest.manifest, null, 2));
+                setManifestStatus({ text: 'Manifest loaded successfully.', isError: false });
+            } else {
+                setManifestStatus({ text: data.error || 'Failed to load manifest.', isError: true });
+            }
+        } catch (e: any) {
+            setManifestStatus({ text: e.message || 'Error loading manifest.', isError: true });
+        }
+    };
+
+    const handleValidateManifest = async () => {
+        try {
+            const parsed = JSON.parse(manifestJson);
+            setManifestStatus({ text: 'Validating...', isError: false });
+            const res = await fetch('/api/manifests/validate', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ manifest: parsed })
+            });
+            const data = await res.json();
+            if (data.ok) {
+                setManifestStatus({ text: 'Manifest is valid.', isError: false });
+            } else {
+                setManifestStatus({ text: data.error || 'Manifest validation failed.', isError: true });
+            }
+        } catch (e: any) {
+            setManifestStatus({ text: 'Invalid JSON format.', isError: true });
+        }
+    };
+
+    const handleSaveManifest = async () => {
+        if (!manifestPath) {
+            setManifestStatus({ text: 'Please enter a manifest path.', isError: true });
+            return;
+        }
+        try {
+            const parsed = JSON.parse(manifestJson);
+            setManifestStatus({ text: 'Saving...', isError: false });
+            const res = await fetch('/api/manifests/save', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ path: manifestPath, manifest: parsed })
+            });
+            const data = await res.json();
+            if (data.ok) {
+                setManifestStatus({ text: 'Manifest saved successfully.', isError: false });
+            } else {
+                setManifestStatus({ text: data.error || 'Failed to save manifest.', isError: true });
+            }
+        } catch (e: any) {
+            setManifestStatus({ text: 'Invalid JSON format.', isError: true });
+        }
+    };
+
+    return (
+        <div className="fade-in">
+            <div className="config-grid">
+                {/* Notifications */}
+                <section className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Bell size={18} className="text-accent" /> Notifications
+                        </h2>
+                    </div>
+                    <form className="flex flex-col gap-3" onSubmit={handleSaveNotifications}>
+                        <div className="form-group mb-0">
+                            <label>Discord Webhook URL</label>
+                            <input type="text" className="w-full" placeholder="https://discord.com/api/webhooks/..." value={webhookUrl} onChange={(e) => setWebhookUrl(e.target.value)} />
+                        </div>
+                        <div className="form-group mb-0">
+                            <label>Min Severity</label>
+                            <select className="w-full" value={severity} onChange={(e) => setSeverity(e.target.value)}>
+                                <option value="info">info</option>
+                                <option value="warning">warning</option>
+                                <option value="critical">critical</option>
+                            </select>
+                        </div>
+                        <div className="form-group mb-0">
+                            <label>Always Notify Types (CSV)</label>
+                            <input type="text" className="w-full" value={alwaysNotify} onChange={(e) => setAlwaysNotify(e.target.value)} />
+                        </div>
+                        <button type="submit" className="primary mt-2">Save Notifications</button>
+                        {configStatus.section === 'notifications' && (
+                            <div className={`text-sm mt-1 ${configStatus.isError ? 'text-danger' : 'text-success'}`}>{configStatus.text}</div>
+                        )}
+                    </form>
+                </section>
+
+                {/* Security */}
+                <section className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <Shield size={18} className="text-warning" /> Security Policy
+                        </h2>
+                    </div>
+                    <form className="flex flex-col gap-3" onSubmit={handleSaveSecurity}>
+                        <div className="form-group mb-0">
+                            <label>Violation Mode</label>
+                            <select className="w-full" value={violationMode} onChange={(e) => setViolationMode(e.target.value)}>
+                                <option value="hard_abort">hard_abort</option>
+                                <option value="validation_fail">validation_fail</option>
+                            </select>
+                        </div>
+                        <div className="form-group mb-0">
+                            <label>Allowed Binaries (CSV)</label>
+                            <input type="text" className="w-full" value={allowedBinaries} onChange={(e) => setAllowedBinaries(e.target.value)} />
+                        </div>
+                        <button type="submit" className="primary mt-2">Save Security</button>
+                        {configStatus.section === 'security' && (
+                            <div className={`text-sm mt-1 ${configStatus.isError ? 'text-danger' : 'text-success'}`}>{configStatus.text}</div>
+                        )}
+                    </form>
+                </section>
+
+                {/* Limits */}
+                <section className="panel">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <HardDrive size={18} className="text-info" /> Platform Limits
+                        </h2>
+                    </div>
+                    <form className="flex flex-col gap-3" onSubmit={handleSaveLimits}>
+                        <div className="form-group mb-0">
+                            <label>AGENT_MAX_CONCURRENT</label>
+                            <input type="number" className="w-full" value={maxConcurrent} onChange={(e) => setMaxConcurrent(e.target.value)} />
+                        </div>
+                        <div className="form-group mb-0">
+                            <label>AGENT_MAX_SESSION</label>
+                            <input type="number" className="w-full" value={maxSession} onChange={(e) => setMaxSession(e.target.value)} />
+                        </div>
+                        <button type="submit" className="primary mt-2">Save Limits</button>
+                        {configStatus.section === 'limits' && (
+                            <div className={`text-sm mt-1 ${configStatus.isError ? 'text-danger' : 'text-success'}`}>{configStatus.text}</div>
+                        )}
+                    </form>
+                </section>
+
+                {/* Manifest Builder */}
+                <section className="panel md:col-span-2">
+                    <div className="panel-header">
+                        <h2 className="panel-title">
+                            <FileJson size={18} className="text-success" /> Manifest Builder
+                        </h2>
+                    </div>
+                    <div className="flex flex-col gap-4">
+                        <div className="flex gap-4 mb-2">
+                            <input
+                                type="text"
+                                className="flex-1"
+                                placeholder=".ai_ops/manifests/default.json"
+                                value={manifestPath}
+                                onChange={(e) => setManifestPath(e.target.value)}
+                            />
+                            <button type="button" onClick={handleLoadManifest}>Load</button>
+                            <button type="button" onClick={handleValidateManifest}>Validate</button>
+                            <button type="button" className="primary" onClick={handleSaveManifest}>Save</button>
+                        </div>
+                        <textarea
+                            className="w-full font-mono text-sm bg-tertiary"
+                            rows={16}
+                            placeholder="{...}"
+                            value={manifestJson}
+                            onChange={(e) => setManifestJson(e.target.value)}
+                            spellCheck={false}
+                        ></textarea>
+                        {manifestStatus.text && (
+                            <div className={`text-sm mt-2 ${manifestStatus.isError ? 'text-danger' : 'text-success'}`}>
+                                {manifestStatus.text}
+                            </div>
+                        )}
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+};
+
+export default Settings;

ui/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

ui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

ui/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

ui/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:4317',
+        changeOrigin: true,
+      }
+    }
+  }
+})