Merge origin/main with local UI refactor integration

Refactor UI modules and harden run/API behavior
2026-02-25 00:38:19 -05:00 · 2026-02-25 00:21:04 -05:00
40 changed files with 6555 additions and 1186 deletions
--- a/README.md
+++ b/README.md
@@ -60,6 +60,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
 ```
@@ -86,6 +87,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)
--- a/demo-manifest.json
+++ b/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"
            }
        ]
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
--- a/src/agents/manifest-store.ts
+++ b/src/agents/manifest-store.ts
--- a/src/agents/manifest.ts
+++ b/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)) {
--- a/src/agents/provider-executor.ts
+++ b/src/agents/provider-executor.ts
@@ -9,7 +9,8 @@ import {
 import { isDomainEventType, type DomainEventEmission } from "../agents/domain-events.js";
 import type { ActorExecutionInput, ActorExecutionResult, ActorExecutor } from "../agents/pipeline.js";
 import { isRecord, type JsonObject, type JsonValue } from "../agents/types.js";
-import { ClaudeObservabilityLogger } from "./claude-observability.js";
+import { ClaudeObservabilityLogger } from "../ui/claude-observability.js";
 import { z } from "zod";
 export type RunProvider = "codex" | "claude";
@@ -83,6 +84,15 @@ const CLAUDE_OUTPUT_FORMAT = {
  schema: ACTOR_RESPONSE_SCHEMA,
 } as const;
 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;
@@ -262,8 +272,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,
@@ -298,7 +308,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: {
@@ -307,31 +319,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 } : {}),
@@ -420,10 +423,10 @@ async function runCodexActor(input: {
  const usage: ProviderUsage = {
    ...(turn.usage
      ? {
-          tokenInput: turn.usage.input_tokens + turn.usage.cached_input_tokens,
+        tokenInput: turn.usage.input_tokens + turn.usage.cached_input_tokens,
-          tokenOutput: turn.usage.output_tokens,
+        tokenOutput: turn.usage.output_tokens,
-          tokenTotal: turn.usage.input_tokens + turn.usage.cached_input_tokens + turn.usage.output_tokens,
+        tokenTotal: turn.usage.input_tokens + turn.usage.cached_input_tokens + turn.usage.output_tokens,
-        }
+      }
      : {}),
    durationMs: Date.now() - startedAt,
  };
@@ -488,9 +491,9 @@ function buildClaudeOptions(input: {
  const authOptionOverrides = runtime.config.provider.anthropicOauthToken
    ? { authToken: runtime.config.provider.anthropicOauthToken }
    : (() => {
-        const token = resolveAnthropicToken(runtime.config.provider);
+      const token = resolveAnthropicToken(runtime.config.provider);
-        return token ? { apiKey: token } : {};
+      return token ? { apiKey: token } : {};
-      })();
+    })();
  const runtimeEnv = buildProviderRuntimeEnv({
    runtime,
--- a/src/agents/session-lifecycle.ts
+++ b/src/agents/session-lifecycle.ts
@@ -95,6 +95,11 @@ function assertAbsolutePath(path: string, label: string): string {
  return resolve(path);
 }
 function normalizeWorktreePath(path: string): string {
  const normalized = resolve(path);
  return normalized.startsWith("/private/var/") ? normalized.slice("/private".length) : normalized;
 }
 function assertNonEmptyString(value: unknown, label: string): string {
  if (typeof value !== "string" || value.trim().length === 0) {
    throw new Error(`${label} must be a non-empty string.`);
@@ -433,7 +438,10 @@ export class SessionWorktreeManager {
    const branchName = this.resolveTaskBranchName(input.sessionId, input.taskId);
    const attachedWorktree = await this.findWorktreePathForBranch(baseWorkspacePath, branchName);
-    if (attachedWorktree && attachedWorktree !== worktreePath) {
+    const normalizedWorktreePath = normalizeWorktreePath(worktreePath);
    const normalizedAttachedWorktree = attachedWorktree ? normalizeWorktreePath(attachedWorktree) : undefined;
    if (normalizedAttachedWorktree && normalizedAttachedWorktree !== normalizedWorktreePath) {
      throw new Error(
        `Task branch "${branchName}" is already attached to worktree "${attachedWorktree}", ` +
          `expected "${worktreePath}".`,
@@ -458,7 +466,11 @@ export class SessionWorktreeManager {
      ]);
      if (addResult.exitCode !== 0) {
        const attachedAfterFailure = await this.findWorktreePathForBranch(baseWorkspacePath, branchName);
-        if (attachedAfterFailure === worktreePath && (await pathExists(worktreePath))) {
+        if (
          attachedAfterFailure &&
          normalizeWorktreePath(attachedAfterFailure) === normalizedWorktreePath &&
          (await pathExists(worktreePath))
        ) {
          const taskWorkingDirectory = await this.ensureWorktreeTargetPath(worktreePath);
          return {
            taskWorktreePath: worktreePath,
--- a/src/runs/run-service.ts
+++ b/src/runs/run-service.ts
@@ -1,6 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
 import { JSONFilePreset } from "lowdb/node";
 import { SchemaDrivenExecutionEngine } from "../agents/orchestration.js";
 import { parseAgentManifest, type AgentManifest } from "../agents/manifest.js";
 import { FileSystemProjectContextStore } from "../agents/project-context.js";
@@ -15,12 +16,12 @@ import {
  type SessionMetadata,
 } from "../agents/session-lifecycle.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";
@@ -267,7 +268,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: {
@@ -298,9 +301,9 @@ export async function readRunMetaBySession(input: {
      sessionId: record.sessionId,
      status:
        record.status === "running" ||
-        record.status === "success" ||
+          record.status === "success" ||
-        record.status === "failure" ||
+          record.status === "failure" ||
-        record.status === "cancelled"
+          record.status === "cancelled"
          ? record.status
          : "failure",
      startedAt: record.startedAt,
@@ -496,10 +499,10 @@ export class UiRunService {
          executionMode === "provider" && providerRuntime
            ? createSingleExecutorMap(manifest, createProviderActorExecutor(providerRuntime))
            : createMockActorExecutors(manifest, {
-                prompt: input.prompt,
+              prompt: input.prompt,
-                topologyHint: input.topologyHint,
+              topologyHint: input.topologyHint,
-                simulateValidationNodeIds: new Set(input.simulateValidationNodeIds ?? []),
+              simulateValidationNodeIds: new Set(input.simulateValidationNodeIds ?? []),
-              });
+            });
        const engine = new SchemaDrivenExecutionEngine({
          manifest,
--- a/src/store/config-store.ts
+++ b/src/store/config-store.ts
--- a/src/store/env-store.ts
+++ b/src/store/env-store.ts
--- a/src/telemetry/runtime-events-store.ts
+++ b/src/telemetry/runtime-events-store.ts
--- a/src/telemetry/session-insights.ts
+++ b/src/telemetry/session-insights.ts
--- a/src/ui/http-utils.ts
+++ b/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;
  }
 }
--- a/src/ui/server.ts
+++ b/src/ui/server.ts
--- a/tests/env-store.test.ts
+++ b/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-"));
--- a/tests/manifest-schema.test.ts
+++ b/tests/manifest-schema.test.ts
@@ -148,7 +148,7 @@ test("rejects legacy edge trigger aliases", () => {
  assert.throws(
    () => parseAgentManifest(manifest),
-    /unsupported event "onValidationFail"/,
+    /Invalid option/,
  );
 });
--- a/tests/provider-executor.test.ts
+++ b/tests/provider-executor.test.ts
@@ -11,7 +11,7 @@ import {
  parseActorExecutionResultFromModelOutput,
  resolveProviderWorkingDirectory,
  type ProviderRunRuntime,
-} from "../src/ui/provider-executor.js";
+} from "../src/agents/provider-executor.js";
 test("parseActorExecutionResultFromModelOutput parses strict JSON payload", () => {
  const parsed = parseActorExecutionResultFromModelOutput({
@@ -76,6 +76,45 @@ test("parseActorExecutionResultFromModelOutput falls back when response is not J
  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);
 });
 test("resolveProviderWorkingDirectory reads cwd from actor execution context", () => {
  const actorInput = {
    executionContext: {
--- a/tests/run-service.test.ts
+++ b/tests/run-service.test.ts
@@ -4,8 +4,8 @@ import { execFile } from "node:child_process";
 import { mkdtemp, mkdir, stat, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { resolve } from "node:path";
 import { UiRunService, readRunMetaBySession } from "../src/runs/run-service.js";
 import { promisify } from "node:util";
 import { UiRunService, readRunMetaBySession } from "../src/ui/run-service.js";
 const execFileAsync = promisify(execFile);
--- a/tests/session-insights.test.ts
+++ b/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");
--- a/ui/.gitignore
+++ b/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?
--- a/ui/README.md
+++ b/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...
    },
  },
 ])
 ```
--- a/ui/eslint.config.js
+++ b/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,
    },
  },
 ])
--- a/ui/index.html
+++ b/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>
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/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"
  }
 }
--- a/ui/public/vite.svg
+++ b/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>
--- a/ui/src/App.css
+++ b/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;
 }
--- a/ui/src/App.tsx
+++ b/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;
--- a/ui/src/assets/react.svg
+++ b/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>
--- a/ui/src/index.css
+++ b/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;
 }
--- a/ui/src/layouts/MainLayout.tsx
+++ b/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;
--- a/ui/src/main.tsx
+++ b/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>,
 )
--- a/ui/src/pages/Dashboard.tsx
+++ b/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;
--- a/ui/src/pages/History.tsx
+++ b/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;
--- a/ui/src/pages/Settings.tsx
+++ b/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;
--- a/ui/tsconfig.app.json
+++ b/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"]
 }
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/ui/tsconfig.node.json
+++ b/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"]
 }
--- a/ui/vite.config.ts
+++ b/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,
      }
    }
  }
 })
Author	SHA1	Message	Date
zman	35e3f81327	Merge origin/main with local UI refactor integration	2026-02-25 00:38:19 -05:00
zman	659f3edcee	Refactor UI modules and harden run/API behavior	2026-02-25 00:21:04 -05:00
		`@@ -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>