okengine 0.11.2 → 0.13.0

package/src/console/ui/traces/TracesA11yView.tsx

@@ -1,181 +0,0 @@
-/**
- * Static Traces markup for the axe gate — same landmarks / roles as the
- * live panel, fed by a fixture (no router / network).
- */
-
-import { buildCausalChain, groupTraceRoots, initialFocusSpanId } from "./chain.ts";
-import { criticalPathSpanIds } from "./critical-path.ts";
-import { TRACES_FIXTURE } from "./fixture.ts";
-import { foldTimeline, intervalsFromSpans } from "./fold.ts";
-import { miniWaterfall, rootErrorCode } from "./mini.ts";
-import { replayDecision } from "./replay.ts";
-import { DEFAULT_SAMPLING_LABEL } from "./sampling.ts";
-import { peakSpanTier } from "./tier.ts";
-
-/** Props for {@link TracesA11yView}. */
-export interface TracesA11yViewProps {
-  /** Optional root id to open in detail. */
-  readonly openRootId?: string;
-}
-
-/**
- * Accessible Traces list + detail for CI.
- *
- * @param props - Optional open root
- */
-export function TracesA11yView(props: TracesA11yViewProps) {
-  const roots = groupTraceRoots(TRACES_FIXTURE);
-  const openRootId = props.openRootId ?? "run-create-ok";
-  const open = roots.find((r) => r.rootId === openRootId);
-  const focusId = open ? initialFocusSpanId(open.spans) : undefined;
-  const chain = focusId ? buildCausalChain(TRACES_FIXTURE, focusId) : null;
-  const critical = chain ? criticalPathSpanIds(chain.connected) : new Set<string>();
-  const folded = chain ? foldTimeline(intervalsFromSpans(chain.connected), {}, critical) : null;
-  const decision = chain ? replayDecision(chain.connected) : null;
-
-  return (
-    <div className="traces-a11y">
-      <a href="#traces-main">Skip to main content</a>
-      <header>
-        <h1>Traces</h1>
-        <p>Sampling: {DEFAULT_SAMPLING_LABEL}</p>
-        <label>
-          Filter by effect
-          <select aria-label="Filter by effect" defaultValue="">
-            <option value="">All effects</option>
-            <option value="wrote:sql:bookings">Wrote sql:bookings</option>
-            <option value="sent">Sent email</option>
-            <option value="asked">Asked a model</option>
-            <option value="secret">Read a secret</option>
-            <option value="cost:0.05">Cost &gt; $0.05</option>
-          </select>
-        </label>
-        <button type="button" style={{ minHeight: 32, minWidth: 24 }}>
-          Trace bookings.create fully for 10 minutes
-        </button>
-      </header>
-      <main id="traces-main">
-        <section aria-label="Trace list">
-          <h2>Traces</h2>
-          <ul>
-            {roots.map((root) => {
-              const err = rootErrorCode(root.spans);
-              const bars = miniWaterfall(root.spans);
-              return (
-                <li key={root.rootId}>
-                  <button
-                    type="button"
-                    aria-pressed={root.rootId === openRootId}
-                    style={{ minHeight: 32, width: "100%" }}
-                  >
-                    <span>{root.root.flow}</span>
-                    {err ? (
-                      <span role="status" style={{ color: "#c44b4b" }}>
-                        {" "}
-                        {err}
-                      </span>
-                    ) : null}
-                    <span aria-hidden="true"> [{bars.length} bars]</span>
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </section>
-
-        {chain && folded ? (
-          <section aria-label="Trace detail" aria-live="polite">
-            <h2>Causal chain</h2>
-            <ol>
-              {chain.parents.map((p) => (
-                <li key={p.id}>
-                  <button type="button" style={{ minHeight: 32 }}>
-                    {p.flow}
-                  </button>
-                </li>
-              ))}
-              <li aria-current="true">
-                <strong>{chain.current.flow}</strong>
-                {chain.current.errorCode ? (
-                  <span role="status"> {chain.current.errorCode}</span>
-                ) : null}
-              </li>
-              {chain.children.map((c) => (
-                <li key={c.id}>
-                  <button type="button" style={{ minHeight: 32 }}>
-                    {c.flow}
-                  </button>
-                </li>
-              ))}
-            </ol>
-
-            <h2 id="waterfall-heading">Waterfall</h2>
-            <ul
-              aria-labelledby="waterfall-heading"
-              style={{
-                display: "flex",
-                gap: 2,
-                minHeight: 32,
-                listStyle: "none",
-                padding: 0,
-                margin: 0,
-              }}
-            >
-              {folded.segments.map((seg) => {
-                if (seg.kind === "fold") {
-                  return (
-                    <li key={seg.id} style={{ flex: `${seg.displayMs} 0 0` }}>
-                      <button
-                        type="button"
-                        aria-expanded={seg.expanded}
-                        style={{ minHeight: 32, minWidth: 24, width: "100%" }}
-                      >
-                        {seg.label}
-                      </button>
-                    </li>
-                  );
-                }
-                const dim = !seg.critical;
-                const external =
-                  peakSpanTier(chain.connected.find((s) => s.id === seg.spanId)?.effects ?? []) ===
-                  "external";
-                return (
-                  <li
-                    key={seg.id}
-                    style={{
-                      minHeight: 32,
-                      flex: `${seg.displayMs} 0 0`,
-                      opacity: dim ? 0.38 : 1,
-                      background: seg.tier === "external" ? "#d97706" : "#3d9a6a",
-                      outline: seg.failed ? "2px solid #c44b4b" : undefined,
-                    }}
-                  >
-                    {seg.label}
-                    {seg.critical ? " (critical path)" : ""}
-                    {seg.failed ? " (failed)" : ""}
-                    {external ? " ↗" : ""}
-                  </li>
-                );
-              })}
-            </ul>
-
-            <a href={`/runs?run=${chain.current.id}`}>Open in Runs</a>
-            <button
-              type="button"
-              style={{ minHeight: 32, minWidth: 24 }}
-              title={decision?.mode === "dry-run" ? decision.reason : undefined}
-            >
-              {decision?.mode === "dry-run" ? "Dry-run replay" : "Replay"}
-            </button>
-            <button type="button" style={{ minHeight: 32, minWidth: 24 }}>
-              Close
-            </button>
-            <button type="button" style={{ minHeight: 32, minWidth: 24 }}>
-              3 new
-            </button>
-          </section>
-        ) : null}
-      </main>
-    </div>
-  );
-}

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

@@ -1,96 +0,0 @@
-/**
- * Accessibility gate — axe reports zero violations at WCAG 2.2 AA
- * (console §7.5 · prompt 18.1).
- */
-
-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 { TracesA11yView } from "./TracesA11yView.tsx";
-
-describe("Traces 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/traces" });
-    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(<TracesA11yView openRootId="run-create-ok" />);
-    });
-
-    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/traces/chain.test.ts

@@ -1,47 +0,0 @@
-/**
- * Causal chain tests (console §9.3).
- */
-
-import { describe, expect, test } from "bun:test";
-import { buildCausalChain, groupTraceRoots, initialFocusSpanId } from "./chain.ts";
-import { TRACES_FIXTURE } from "./fixture.ts";
-
-describe("buildCausalChain", () => {
-  test("joins emit consumer under parent across async boundary", () => {
-    const chain = buildCausalChain(TRACES_FIXTURE, "run-fulfill");
-    expect(chain).not.toBeNull();
-    expect(chain?.parents.map((p) => p.id)).toEqual(["run-create-ok"]);
-    expect(chain?.current.id).toBe("run-fulfill");
-    expect(chain?.children).toEqual([]);
-    expect(chain?.connected.map((s) => s.id)).toEqual(["run-create-ok", "run-fulfill"]);
-  });
-
-  test("parents above, children below from root", () => {
-    const chain = buildCausalChain(TRACES_FIXTURE, "run-create-ok");
-    expect(chain?.parents).toEqual([]);
-    expect(chain?.children.map((c) => c.id)).toEqual(["run-fulfill"]);
-  });
-});
-
-describe("groupTraceRoots", () => {
-  test("groups by root and lists newest first", () => {
-    const roots = groupTraceRoots(TRACES_FIXTURE);
-    expect(roots.map((r) => r.rootId)).toContain("run-create-ok");
-    expect(roots.map((r) => r.rootId)).toContain("run-create-fail");
-    expect(roots.map((r) => r.rootId)).toContain("run-ask");
-    const ok = roots.find((r) => r.rootId === "run-create-ok");
-    expect(ok?.spans.map((s) => s.id)).toEqual(["run-create-ok", "run-fulfill"]);
-  });
-});
-
-describe("initialFocusSpanId", () => {
-  test("opens on the failing span", () => {
-    const failRoot = groupTraceRoots(TRACES_FIXTURE).find((r) => r.rootId === "run-create-fail");
-    expect(initialFocusSpanId(failRoot!.spans)).toBe("run-create-fail");
-  });
-
-  test("honours preferred id when present", () => {
-    const ok = groupTraceRoots(TRACES_FIXTURE).find((r) => r.rootId === "run-create-ok");
-    expect(initialFocusSpanId(ok!.spans, "run-fulfill")).toBe("run-fulfill");
-  });
-});

package/src/console/ui/traces/chain.ts

@@ -1,142 +0,0 @@
-/**
- * Causal chain across asynchronous boundaries (console §9.3).
- *
- * When `create` emits `order-placed` and another flow consumes it, declared
- * parentId joins them: parent above, current, children below.
- */
-
-import type { TraceSpan } from "./types.ts";
-
-/** Causal chain focused on one span. */
-export interface CausalChain {
-  /** Ancestors from root to immediate parent. */
-  readonly parents: readonly TraceSpan[];
-  /** Focused span. */
-  readonly current: TraceSpan;
-  /** Direct children. */
-  readonly children: readonly TraceSpan[];
-  /** Every span in the connected component (for waterfall / replay). */
-  readonly connected: readonly TraceSpan[];
-}
-
-/** Root-grouped forest entry for the list. */
-export interface TraceRoot {
-  /** Root span id. */
-  readonly rootId: string;
-  /** Root span. */
-  readonly root: TraceSpan;
-  /** All spans in this trace (root + descendants), start-time order. */
-  readonly spans: readonly TraceSpan[];
-}
-
-/**
- * Index spans by id and parent.
- *
- * @param spans - All known spans
- */
-export function indexSpans(spans: readonly TraceSpan[]): {
-  readonly byId: ReadonlyMap<string, TraceSpan>;
-  readonly childrenOf: ReadonlyMap<string, readonly TraceSpan[]>;
-} {
-  const byId = new Map<string, TraceSpan>();
-  const childrenOf = new Map<string, TraceSpan[]>();
-  for (const s of spans) {
-    byId.set(s.id, s);
-  }
-  for (const s of spans) {
-    if (!s.parentId) continue;
-    const list = childrenOf.get(s.parentId) ?? [];
-    list.push(s);
-    childrenOf.set(s.parentId, list);
-  }
-  for (const [, list] of childrenOf) {
-    list.sort((a, b) => a.startedAt - b.startedAt);
-  }
-  return { byId, childrenOf };
-}
-
-/**
- * Build the causal chain for a focused span.
- *
- * @param spans - All known spans
- * @param currentId - Focused span id
- */
-export function buildCausalChain(
-  spans: readonly TraceSpan[],
-  currentId: string,
-): CausalChain | null {
-  const { byId, childrenOf } = indexSpans(spans);
-  const current = byId.get(currentId);
-  if (!current) return null;
-
-  const parents: TraceSpan[] = [];
-  let cursor: TraceSpan | undefined = current;
-  const seen = new Set<string>();
-  while (cursor?.parentId) {
-    if (seen.has(cursor.parentId)) break;
-    seen.add(cursor.parentId);
-    const parent = byId.get(cursor.parentId);
-    if (!parent) break;
-    parents.unshift(parent);
-    cursor = parent;
-  }
-
-  const children = childrenOf.get(current.id) ?? [];
-  const root = parents[0] ?? current;
-  const connected = collectDescendants(root.id, byId, childrenOf);
-  return { parents, current, children, connected };
-}
-
-/**
- * Group spans into root traces for the list.
- *
- * @param spans - All known spans
- */
-export function groupTraceRoots(spans: readonly TraceSpan[]): TraceRoot[] {
-  const { byId, childrenOf } = indexSpans(spans);
-  const roots = spans.filter((s) => !s.parentId || !byId.has(s.parentId));
-  roots.sort((a, b) => b.startedAt - a.startedAt);
-  return roots.map((root) => ({
-    rootId: root.id,
-    root,
-    spans: collectDescendants(root.id, byId, childrenOf),
-  }));
-}
-
-/**
- * Initial focus when opening a trace: the failing span if any, else the root.
- *
- * @param spans - Spans in the connected component
- * @param preferredId - Optional URL-selected span
- */
-export function initialFocusSpanId(
-  spans: readonly TraceSpan[],
-  preferredId?: string,
-): string | undefined {
-  if (preferredId && spans.some((s) => s.id === preferredId)) {
-    return preferredId;
-  }
-  const failed = spans.find((s) => s.errorCode != null && s.errorCode !== "");
-  if (failed) return failed.id;
-  const root = spans.find((s) => !s.parentId || !spans.some((p) => p.id === s.parentId));
-  return root?.id ?? spans[0]?.id;
-}
-
-function collectDescendants(
-  rootId: string,
-  byId: ReadonlyMap<string, TraceSpan>,
-  childrenOf: ReadonlyMap<string, readonly TraceSpan[]>,
-): TraceSpan[] {
-  const out: TraceSpan[] = [];
-  const walk = (id: string): void => {
-    const span = byId.get(id);
-    if (!span) return;
-    out.push(span);
-    for (const child of childrenOf.get(id) ?? []) {
-      walk(child.id);
-    }
-  };
-  walk(rootId);
-  out.sort((a, b) => a.startedAt - b.startedAt);
-  return out;
-}

package/src/console/ui/traces/critical-path.test.ts

@@ -1,22 +0,0 @@
-/**
- * Critical-path tests (console §9.3).
- */
-
-import { describe, expect, test } from "bun:test";
-import { criticalPathSpanIds } from "./critical-path.ts";
-import { TRACES_FIXTURE } from "./fixture.ts";
-
-describe("criticalPathSpanIds", () => {
-  test("selects the longer root-to-leaf work path", () => {
-    const chain = TRACES_FIXTURE.filter((s) => s.id === "run-create-ok" || s.id === "run-fulfill");
-    const path = criticalPathSpanIds(chain);
-    expect(path.has("run-create-ok")).toBe(true);
-    expect(path.has("run-fulfill")).toBe(true);
-  });
-
-  test("single-span trace is its own critical path", () => {
-    const ask = TRACES_FIXTURE.filter((s) => s.id === "run-ask");
-    const path = criticalPathSpanIds(ask);
-    expect([...path]).toEqual(["run-ask"]);
-  });
-});

package/src/console/ui/traces/critical-path.ts

@@ -1,55 +0,0 @@
-/**
- * Critical-path highlighting for the folded waterfall (console §9.3).
- *
- * On open: *why was it slow* — the critical path is highlighted and the rest
- * dims. Path = root-to-leaf chain with maximum summed work duration.
- */
-
-import { indexSpans } from "./chain.ts";
-import type { TraceSpan } from "./types.ts";
-
-/**
- * Span ids on the critical path of a connected component.
- *
- * @param spans - Connected spans (one trace)
- */
-export function criticalPathSpanIds(spans: readonly TraceSpan[]): ReadonlySet<string> {
-  if (spans.length === 0) return new Set();
-  const { byId, childrenOf } = indexSpans(spans);
-  const roots = spans.filter((s) => !s.parentId || !byId.has(s.parentId));
-  let best: string[] = [];
-  let bestCost = -1;
-
-  const dfs = (id: string, path: string[], cost: number): void => {
-    const kids = childrenOf.get(id) ?? [];
-    const span = byId.get(id);
-    if (!span) return;
-    const nextCost = cost + workMs(span);
-    const nextPath = [...path, id];
-    if (kids.length === 0) {
-      if (nextCost > bestCost) {
-        bestCost = nextCost;
-        best = nextPath;
-      }
-      return;
-    }
-    for (const child of kids) {
-      dfs(child.id, nextPath, nextCost);
-    }
-  };
-
-  for (const root of roots) {
-    dfs(root.id, [], 0);
-  }
-  return new Set(best);
-}
-
-/**
- * Active work milliseconds for a span (sum of effect durations, else wall).
- *
- * @param span - Span
- */
-export function workMs(span: TraceSpan): number {
-  if (span.effects.length === 0) return Math.max(0, span.durationMs);
-  return span.effects.reduce((s, e) => s + Math.max(0, e.duration), 0);
-}

package/src/console/ui/traces/filter.test.ts

@@ -1,74 +0,0 @@
-/**
- * Effect-filter tests (console §9.3).
- */
-
-import { describe, expect, test } from "bun:test";
-import {
-  matchesEffectFilter,
-  parseEffectFilter,
-  serializeEffectFilter,
-  traceMatchesEffectFilter,
-} from "./filter.ts";
-import { TRACES_FIXTURE } from "./fixture.ts";
-
-describe("effect filter", () => {
-  test("wrote:sql:bookings matches create spans", () => {
-    const filter = parseEffectFilter("wrote:sql:bookings");
-    expect(filter).toEqual({ kind: "wrote", resource: "sql:bookings" });
-    const create = TRACES_FIXTURE.find((s) => s.id === "run-create-ok")!;
-    expect(matchesEffectFilter(create, filter)).toBe(true);
-    const ask = TRACES_FIXTURE.find((s) => s.id === "run-ask")!;
-    expect(matchesEffectFilter(ask, filter)).toBe(false);
-  });
-
-  test("asked / sent / secret / cost queries", () => {
-    expect(
-      matchesEffectFilter(
-        TRACES_FIXTURE.find((s) => s.id === "run-ask")!,
-        { kind: "asked" },
-      ),
-    ).toBe(true);
-    expect(
-      matchesEffectFilter(
-        TRACES_FIXTURE.find((s) => s.id === "run-fulfill")!,
-        { kind: "sent", resource: "booking-confirmed" },
-      ),
-    ).toBe(true);
-    expect(
-      matchesEffectFilter(
-        TRACES_FIXTURE.find((s) => s.id === "run-ask")!,
-        { kind: "secret", resource: "OPENAI_KEY" },
-      ),
-    ).toBe(true);
-    expect(
-      matchesEffectFilter(
-        TRACES_FIXTURE.find((s) => s.id === "run-ask")!,
-        { kind: "cost", min: 0.05 },
-      ),
-    ).toBe(true);
-    expect(
-      matchesEffectFilter(
-        TRACES_FIXTURE.find((s) => s.id === "run-create-ok")!,
-        { kind: "cost", min: 0.05 },
-      ),
-    ).toBe(false);
-  });
-
-  test("round-trips through URL serialisation", () => {
-    const filters = [
-      parseEffectFilter("wrote:sql:bookings"),
-      parseEffectFilter("asked"),
-      parseEffectFilter("sent:booking-confirmed"),
-      parseEffectFilter("secret"),
-      parseEffectFilter("cost:0.05"),
-    ];
-    for (const f of filters) {
-      expect(parseEffectFilter(serializeEffectFilter(f))).toEqual(f);
-    }
-  });
-
-  test("trace-level match when any connected span matches", () => {
-    const chain = TRACES_FIXTURE.filter((s) => s.id === "run-create-ok" || s.id === "run-fulfill");
-    expect(traceMatchesEffectFilter(chain, { kind: "sent" })).toBe(true);
-  });
-});