okengine 0.1.4

package/src/console/ui/ai/search.test.ts

@@ -0,0 +1,40 @@
+/**
+ * AI URL search tests (console §9.10).
+ */
+
+import { describe, expect, test } from "bun:test";
+import {
+  manifestDiffHref,
+  openPromptVersion,
+  parseAiSearch,
+  serializeAiSearch,
+} from "./search.ts";
+
+describe("AI search", () => {
+  test("round-trips prompt + version", () => {
+    const parsed = parseAiSearch({ prompt: "ticket-triage", version: "3" });
+    expect(parsed.prompt).toBe("ticket-triage");
+    expect(parsed.version).toBe(3);
+    expect(serializeAiSearch(parsed)).toEqual({
+      prompt: "ticket-triage",
+      version: 3,
+    });
+  });
+
+  test("manifestDiffHref links to Manifest Diff, does not embed blast radius", () => {
+    expect(manifestDiffHref("/ai/prompts/ticket-triage/version")).toBe(
+      "/manifest-diff?path=%2Fai%2Fprompts%2Fticket-triage%2Fversion",
+    );
+  });
+
+  test("openPromptVersion clears agent selection", () => {
+    const next = openPromptVersion(
+      { agent: "support", run: "r1" },
+      "ticket-triage",
+      3,
+    );
+    expect(next.agent).toBeUndefined();
+    expect(next.prompt).toBe("ticket-triage");
+    expect(next.version).toBe(3);
+  });
+});

package/src/console/ui/ai/search.ts

@@ -0,0 +1,89 @@
+/**
+ * Typed search params for the AI panel (console §7 · §9.10).
+ */
+
+import { z } from "zod";
+
+/** URL search schema. */
+export const AiSearchSchema = z.object({
+  /** Selected prompt name. */
+  prompt: z.string().optional(),
+  /** Selected prompt version. */
+  version: z.coerce.number().int().optional(),
+  /** Selected agent name. */
+  agent: z.string().optional(),
+  /** Selected agent run id. */
+  run: z.string().optional(),
+  /** List filter. */
+  q: z.string().optional(),
+});
+
+/** Parsed AI search state. */
+export type AiSearch = z.infer<typeof AiSearchSchema>;
+
+/**
+ * Parse router search into typed AI search.
+ *
+ * @param search - Raw search
+ */
+export function parseAiSearch(search: Record<string, unknown>): AiSearch {
+  const parsed = AiSearchSchema.safeParse(search);
+  return parsed.success ? parsed.data : {};
+}
+
+/**
+ * Serialize AI search for navigation (drop empties).
+ *
+ * @param search - Typed search
+ */
+export function serializeAiSearch(
+  search: AiSearch,
+): Record<string, string | number> {
+  const out: Record<string, string | number> = {};
+  if (search.prompt) out.prompt = search.prompt;
+  if (search.version !== undefined) out.version = search.version;
+  if (search.agent) out.agent = search.agent;
+  if (search.run) out.run = search.run;
+  if (search.q) out.q = search.q;
+  return out;
+}
+
+/**
+ * Open a prompt version in the URL.
+ *
+ * @param search - Current
+ * @param prompt - Prompt name
+ * @param version - Version
+ */
+export function openPromptVersion(
+  search: AiSearch,
+  prompt: string,
+  version: number,
+): AiSearch {
+  return { ...search, prompt, version, agent: undefined, run: undefined };
+}
+
+/**
+ * Open an agent run in the URL.
+ *
+ * @param search - Current
+ * @param agent - Agent name
+ * @param run - Run id
+ */
+export function openAgentRun(
+  search: AiSearch,
+  agent: string,
+  run: string,
+): AiSearch {
+  return { ...search, agent, run };
+}
+
+/**
+ * Manifest Diff href for a prompt version bump (do not duplicate Diff UI).
+ *
+ * @param manifestDiffPath - Path from projection (`/ai/prompts/…/version`)
+ */
+export function manifestDiffHref(manifestDiffPath: string): string {
+  const params = new URLSearchParams({ path: manifestDiffPath });
+  return `/manifest-diff?${params.toString()}`;
+}

package/src/console/ui/ai/types.ts

@@ -0,0 +1,139 @@
+/**
+ * AI panel view types (console §9.10).
+ */
+
+/** Ask outcome class — schema failure ≠ provider error. */
+export type AiAskOutcome = "ok" | "provider_error" | "schema_invalid";
+
+/** Histogram bucket. */
+export interface AiDistributionBucket {
+  readonly min: number;
+  readonly max: number;
+  readonly count: number;
+}
+
+/** Metric distribution block. */
+export interface AiMetricDistribution {
+  readonly samples: readonly number[];
+  readonly mean: number;
+  readonly p50: number;
+  readonly p95: number;
+  readonly buckets: readonly AiDistributionBucket[];
+}
+
+/** Per-prompt-version metrics. */
+export interface PromptVersionMetrics {
+  readonly prompt: string;
+  readonly version: number;
+  readonly sampleCount: number;
+  readonly cost: AiMetricDistribution;
+  readonly latencyMs: AiMetricDistribution;
+  readonly evalScore: AiMetricDistribution;
+  readonly schemaInvalidRate: number;
+  readonly providerErrorRate: number;
+  readonly okRate: number;
+  readonly overBudgetRate: number;
+  readonly budgetMaxCostPerCall: number | null;
+  readonly outcomeCounts: Readonly<Record<AiAskOutcome, number>>;
+}
+
+/** Catalogue prompt. */
+export interface PromptCatalogueRow {
+  readonly name: string;
+  readonly version: number | undefined;
+  readonly model: string | undefined;
+  readonly evals: string | undefined;
+  readonly budgetMaxCostPerCall: number | null;
+  readonly manifestDiffPath: string;
+}
+
+/** Catalogue agent. */
+export interface AgentCatalogueRow {
+  readonly name: string;
+  readonly tools: readonly string[];
+  readonly maxSteps: number | undefined;
+  readonly model: string | undefined;
+  readonly budgetMaxCostPerRun: number | null;
+}
+
+/** Standing allowPii security row. */
+export interface AllowPiiRow {
+  readonly flowId: string;
+  readonly asks: readonly string[];
+  readonly pii: "masked" | "allow" | "denied" | null;
+  readonly allowPii: boolean;
+  readonly source: string | null;
+}
+
+/** Fallback attempt. */
+export interface AiFallbackAttempt {
+  readonly model: string;
+  readonly ok: boolean;
+  readonly error?: string;
+  readonly cost?: number;
+  readonly latencyMs?: number;
+  readonly at: number;
+}
+
+/** Fallback chain with cost consequence. */
+export interface FallbackChainRow {
+  readonly prompt: string;
+  readonly version: number | undefined;
+  readonly attempts: readonly AiFallbackAttempt[];
+  readonly actualCost: number;
+  readonly primaryOnlyCost: number | null;
+  readonly costConsequence: number | null;
+  readonly at: number;
+}
+
+/** Agent tool effect — Flows/Traces vocabulary. */
+export interface AgentToolEffect {
+  readonly kind:
+    | "read"
+    | "write"
+    | "emit"
+    | "send"
+    | "ask"
+    | "secret"
+    | "call";
+  readonly resource: string;
+}
+
+/** Denial ledger entry. */
+export interface AgentDenial {
+  readonly agent: string;
+  readonly tool: string;
+  readonly gate: string;
+  readonly reason: string;
+  readonly at: number;
+}
+
+/** Agent run trail row. */
+export interface AgentRunRow {
+  readonly id: string;
+  readonly agent: string;
+  readonly message: string;
+  readonly ok: boolean;
+  readonly steps: number;
+  readonly cost: number;
+  readonly at: number;
+  readonly trail: ReadonlyArray<{
+    readonly tool: string;
+    readonly status: "ok" | "denied";
+    readonly effects: readonly AgentToolEffect[];
+    readonly denial: AgentDenial | null;
+    readonly at: number;
+  }>;
+  readonly denials: readonly AgentDenial[];
+}
+
+/** Full list response from `console.ai.list`. */
+export interface AiListResponse {
+  readonly prompts: readonly PromptCatalogueRow[];
+  readonly agents: readonly AgentCatalogueRow[];
+  readonly versions: readonly PromptVersionMetrics[];
+  readonly allowPii: readonly AllowPiiRow[];
+  readonly fallbackChains: readonly FallbackChainRow[];
+  readonly agentRuns: readonly AgentRunRow[];
+  readonly denials: readonly AgentDenial[];
+}

package/src/console/ui/architecture/ArchitectureA11yView.tsx

@@ -0,0 +1,163 @@
+/**
+ * Static Architecture markup for the axe gate — same landmarks / roles as
+ * the live panel (console §9.13). View-only: no preview, no destructive actions.
+ */
+
+import { buildCausalityGraph } from "../flows/graph.ts";
+import {
+  ARCHITECTURE_RUNS_FIXTURE,
+  ARCHITECTURE_TEST_MANIFEST,
+} from "./fixture.ts";
+import { LAYER_LABEL, ELEMENT_LAYERS } from "./types.ts";
+import { buildArchitectureView } from "./view.ts";
+import { layersOf, type ArchitectureSearch } from "./search.ts";
+
+/** Props for {@link ArchitectureA11yView}. */
+export interface ArchitectureA11yViewProps {
+  /** Optional focus node id. */
+  readonly focus?: string;
+  /** Neighbourhood depth. */
+  readonly depth?: 1 | 2;
+}
+
+/**
+ * Accessible Architecture panel for CI.
+ *
+ * @param props - Focus + depth
+ */
+export function ArchitectureA11yView(props: ArchitectureA11yViewProps) {
+  const search: ArchitectureSearch = {
+    focus: props.focus,
+    depth: props.depth ?? 1,
+  };
+  const graph = buildCausalityGraph(ARCHITECTURE_TEST_MANIFEST);
+  const view = buildArchitectureView(graph, {
+    focus: search.focus ?? null,
+    depth: search.depth,
+    layers: layersOf(search),
+    runs: ARCHITECTURE_RUNS_FIXTURE,
+  });
+
+  return (
+    <div className="architecture-a11y">
+      <a href="#architecture-main">Skip to main content</a>
+      <header>
+        <h1>Architecture</h1>
+        <p>What shape — clustered by unit, typed layers, live traffic</p>
+        <p role="status">
+          Boundary crossings: {view.boundaryCrossingCount}
+        </p>
+      </header>
+
+      <main id="architecture-main">
+        <fieldset>
+          <legend>Element layers</legend>
+          {ELEMENT_LAYERS.map((layer) => (
+            <label key={layer}>
+              <input
+                type="checkbox"
+                checked={view.layers[layer]}
+                onChange={() => {}}
+                aria-label={`${LAYER_LABEL[layer]} layer`}
+              />{" "}
+              {LAYER_LABEL[layer]}
+            </label>
+          ))}
+        </fieldset>
+
+        {view.focus ? (
+          <div>
+            <p>
+              Focus: {view.focus} · depth {view.depth}
+            </p>
+            <button type="button">Clear focus</button>
+            <fieldset>
+              <legend>Focus depth</legend>
+              <label>
+                <input
+                  type="radio"
+                  name="depth"
+                  checked={view.depth === 1}
+                  onChange={() => {}}
+                />{" "}
+                1 hop
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="depth"
+                  checked={view.depth === 2}
+                  onChange={() => {}}
+                />{" "}
+                2 hops
+              </label>
+            </fieldset>
+          </div>
+        ) : null}
+
+        <section aria-label="System diagram">
+          <h2>System</h2>
+          <div aria-hidden="true">
+            <svg width="640" height="360" viewBox="0 0 640 360">
+              <rect
+                x="24"
+                y="24"
+                width="420"
+                height="312"
+                fill="none"
+                stroke="currentColor"
+                strokeDasharray="6 4"
+              />
+              <text x="32" y="44" fontSize="12" fill="currentColor">
+                System boundary
+              </text>
+            </svg>
+          </div>
+          <ul aria-label="Nodes">
+            {view.nodes.map((n) => (
+              <li key={n.id}>
+                <button
+                  type="button"
+                  aria-pressed={n.focused === true}
+                  style={{ minHeight: 32 }}
+                >
+                  {n.label}
+                  {n.kind === "unit" && n.flowCount !== undefined
+                    ? ` (${n.flowCount} flows)`
+                    : ""}
+                  {!n.insideBoundary ? " — outside boundary" : ""}
+                </button>
+              </li>
+            ))}
+          </ul>
+          <ul aria-label="Edges">
+            {view.edges.map((e) => (
+              <li key={e.id}>
+                {e.from} → {e.to}
+                {e.dashed ? " (declared, never traversed)" : ` · ${e.traversals} traversals`}
+                {` · ${e.layer}`}
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section aria-label="Findings" aria-live="polite">
+          <h2>Findings</h2>
+          {view.findings.length === 0 ? (
+            <p>No pathologies detected.</p>
+          ) : (
+            <ul>
+              {view.findings.map((f, i) => (
+                <li key={`${f.kind}-${i}`}>
+                  <strong>{f.title}</strong>
+                  {" — "}
+                  {f.detail}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}

package/src/console/ui/architecture/a11y.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * Accessibility gate — axe reports zero violations at WCAG 2.2 AA
+ * (console §7.5 · §9.13).
+ */
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import axe from "axe-core";
+import { Window } from "happy-dom";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "react";
+import { ArchitectureA11yView } from "./ArchitectureA11yView.tsx";
+
+describe("Architecture panel accessibility", () => {
+  let window: Window;
+  let root: Root;
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
+      true;
+    window = new Window({ url: "http://console.test/architecture" });
+    Object.defineProperty(globalThis, "window", {
+      value: window,
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "document", {
+      value: window.document,
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "HTMLElement", {
+      value: window.HTMLElement,
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "Node", {
+      value: window.Node,
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "navigator", {
+      value: window.navigator,
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "getComputedStyle", {
+      value: window.getComputedStyle.bind(window),
+      configurable: true,
+      writable: true,
+    });
+    Object.defineProperty(globalThis, "requestAnimationFrame", {
+      value: (cb: FrameRequestCallback) => window.setTimeout(cb, 0),
+      configurable: true,
+      writable: true,
+    });
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    window.close();
+  });
+
+  test("axe reports zero violations at WCAG 2.2 AA", async () => {
+    await act(async () => {
+      root.render(<ArchitectureA11yView focus="unit:bookings" depth={1} />);
+    });
+
+    await new Promise((r) => setTimeout(r, 10));
+
+    const results = await axe.run(container, {
+      runOnly: {
+        type: "tag",
+        values: ["wcag2a", "wcag2aa", "wcag22aa"],
+      },
+    });
+
+    if (results.violations.length > 0) {
+      const summary = results.violations
+        .map(
+          (v) =>
+            `${v.id}: ${v.help} (${v.nodes.length} nodes) — ${v.nodes.map((n) => n.html).join("; ")}`,
+        )
+        .join("\n");
+      console.error(summary);
+    }
+
+    expect(results.violations).toEqual([]);
+  });
+});

package/src/console/ui/architecture/boundary.ts

@@ -0,0 +1,42 @@
+/**
+ * System boundary metric from Manifest external effects (console §9.13).
+ *
+ * Count is queried from declared `sends` / `asks` on the causality graph —
+ * never hand-counted in the UI.
+ */
+
+import type { CausalityGraph } from "../flows/graph.ts";
+import { isBoundaryExternal } from "./layers.ts";
+
+/**
+ * Distinct boundary-crossing external effects declared on flows.
+ *
+ * Watching this climb (2 → 9) is the security / architecture metric the
+ * panel tracks — each unique channel or AI resource a flow touches.
+ *
+ * @param graph - Causality graph built by Flows (§9.1)
+ */
+export function boundaryCrossingCount(graph: CausalityGraph): number {
+  const refs = new Set<string>();
+  for (const flow of graph.flows) {
+    for (const ref of flow.effectRefs) {
+      if (isBoundaryExternal(ref)) refs.add(ref);
+    }
+  }
+  return refs.size;
+}
+
+/**
+ * Sorted list of distinct external effect refs that cross the boundary.
+ *
+ * @param graph - Causality graph
+ */
+export function boundaryCrossingRefs(graph: CausalityGraph): string[] {
+  const refs = new Set<string>();
+  for (const flow of graph.flows) {
+    for (const ref of flow.effectRefs) {
+      if (isBoundaryExternal(ref)) refs.add(ref);
+    }
+  }
+  return [...refs].sort();
+}