@warlock.js/devtools 5.32.0 → 5.34.0

package/llms-full.txt

@@ -8,7 +8,7 @@
 
 ---
 name: devtools-overview
-description: 'Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.'
+description: 'Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, AI traces per HTTP request (model, tokens, cost, cache hits, tools, retries, truncation, compaction), the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.'
 ---
 
 # `@warlock.js/devtools` — overview
@@ -58,6 +58,78 @@ of it would fail to resolve there.
 Work outside a request (boot, scheduler ticks, queue jobs) goes to a separate
 background list, so it never clutters a request's timeline.
 
+## AI runs alongside HTTP requests
+
+The **AI** tab and each request's **AI runs** section display completed traces
+from optional `@warlock.js/ai-panoptic`. If it cannot be imported, the tab shows
+install/restart guidance and the other panels keep working.
+
+```bash
+warlock add devtools
+npm install @warlock.js/ai @warlock.js/ai-panoptic
+```
+
+At app boot, enable observation, then restart `warlock dev`:
+
+```ts
+import { ai } from "@warlock.js/ai";
+import "@warlock.js/ai-panoptic";
+ai.config({ panoptic: { observeAll: true } });
+```
+
+No `dashboard: true` or extra listener port is needed. Existing `attach`,
+middleware and explicit collection through Panoptic's built-in collector also
+feed the panel. An installed but unobserved flow produces no trace.
+
+- `DevtoolsAiRun` and `DevtoolsAiEvent` are public types from
+  `@warlock.js/devtools`; `DevtoolsStreamEvent` includes the `ai` event.
+- Read all runs with `GET /__warlock/api/ai`, or filter by an exact HTTP id with
+  `GET /__warlock/api/ai?requestId=<encoded-id>`. Responses include `available`,
+  `runs` and a root-usage `aggregate`; unavailable responses contain `message`.
+- Inspect tools/timings, retry attempts and compaction records with
+  `GET /__warlock/api/ai/runs/<encoded-trace-id>` (404 when evicted). The existing
+  stream emits `ai` events with `{ traceId, requestId? }`.
+- Model, input/output/cache-read/cache-write tokens and historical USD cost come
+  from the trace, never a guessed price table. Unknown cost is unpriced. Root
+  usage includes children already; do not sum all spans for a run total.
+- Cache hits count trips reporting positive provider `cachedTokens`.
+  Semantic-cache hits have no explicit report flag and remain unreported; zero
+  tokens alone do not prove a hit. `—` means unreported rather than zero.
+- `incomplete` status or normalized `AGENT_INCOMPLETE` / `AgentIncompleteError`
+  marks truncation. Recovered truncated trips still contribute to their count.
+- Compaction metadata includes applied/skipped agent decisions and provider
+  compaction-block counts; summary content is omitted. Orchestrator result-only
+  compaction cannot be reconstructed from a report-only trace.
+
+A same-origin browser tool can consume the public types directly:
+
+```ts
+import type { DevtoolsAiEvent, DevtoolsAiRun, DevtoolsStreamEvent } from "@warlock.js/devtools";
+
+const response = await fetch("/__warlock/api/ai?requestId=request-42");
+const { runs }: { runs: DevtoolsAiRun[] } = await response.json();
+console.log(runs.map((run) => [run.traceId, run.usage, run.cost]));
+
+function handleStream(event: DevtoolsStreamEvent): void {
+  if (event.type === "ai") {
+    const update: DevtoolsAiEvent = event.data;
+    console.log(update.traceId, update.requestId);
+  }
+}
+handleStream({ type: "ai", data: { traceId: "run-42", requestId: "request-42" } });
+```
+
+Request correlation reads core's current request id at collection time, before
+exporters. Concurrent/late runs can retain their async context. No id means
+background; `sessionId` is never substituted. Replayed reports outside the
+request cannot recover its context automatically.
+
+Devtools retains its own content-free in-memory store, at most `maxRequests`
+traces (200 by default), independently of HTTP request retention. Clear/shutdown
+empties this view, leaving application exporter/cache stores alone. Boot-time
+and persisted traces are not replayed. The source only attaches in development;
+AI routes keep the same socket-loopback guard as every other panel.
+
 ## API docs
 
 `/__warlock/docs` renders the app's OpenAPI 3.1 document with [Scalar](https://github.com/scalar/scalar); the dashboard's **API** tab shows the same page and has a **Scalar | Swagger UI** switch (remembered in the browser). `/__warlock/docs/swagger` renders the same document with [Swagger UI](https://github.com/swagger-api/swagger-ui). The document comes from `GET /__warlock/api/openapi.json`, built in-process by core's `getDevelopmentOpenApiDocument()` from the routes already registered, so it is the same generator as `warlock generate.openapi` and follows your edits with no CLI run. It covers API routes (not pages): paths, parameters, request bodies from Seal validation, responses from each handler's `responseSchema`, `401`/`422` and bearer/cookie security from `authMiddleware()`. See core's `generate-openapi` topic for what is documented and how to declare it.
@@ -99,4 +171,16 @@ why the dashboard is development-only and loopback-only.
   cascade `dataSourceRegistry.on("query")`, core `mailEvents.onCaptured()` and
   the cache `invalidated` event are public APIs that also work without devtools.
 
+## Process supervision panel
+
+Run `npx warlock add process` to create an app-owned supervisor and
+`src/app/processes/devtools.ts`, exporting `processPanel = { list: () =>
+processes.list() }`. Devtools discovers this registration only in development.
+The **Processes** tab refreshes `GET /__warlock/api/processes`: PIDs, workload
+categories, labels, display commands, limits, enforcement, and peak memory.
+It excludes ownership tokens. Without registration the list is empty. The
+endpoint retains development/loopback guards and provides no stop action.
+Use the `supervise-processes` skill of `@warlock.js/process` for launch,
+recovery and stop APIs; configure one owner/registry per application instance.
+
 

package/llms.txt

@@ -6,4 +6,4 @@
 
 ## Skills
 
-- [devtools-overview](@warlock.js/devtools/devtools-overview/SKILL.md): Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.
+- [devtools-overview](@warlock.js/devtools/devtools-overview/SKILL.md): Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, AI traces per HTTP request (model, tokens, cost, cache hits, tools, retries, truncation, compaction), the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.

package/package.json

@@ -5,12 +5,16 @@
     "environment": "server"
   },
   "peerDependencies": {
-    "@warlock.js/cache": "5.32.0",
-    "@warlock.js/cascade": "5.32.0",
-    "@warlock.js/core": "5.32.0",
-    "@warlock.js/logger": "5.32.0"
+    "@warlock.js/ai-panoptic": "5.34.0",
+    "@warlock.js/cache": "5.34.0",
+    "@warlock.js/cascade": "5.34.0",
+    "@warlock.js/core": "5.34.0",
+    "@warlock.js/logger": "5.34.0"
   },
   "peerDependenciesMeta": {
+    "@warlock.js/ai-panoptic": {
+      "optional": true
+    },
     "@warlock.js/cache": {
       "optional": true
     },
@@ -34,7 +38,7 @@
   ],
   "author": "hassanzohdy",
   "license": "MIT",
-  "version": "5.32.0",
+  "version": "5.34.0",
   "main": "./cjs/index.cjs",
   "module": "./esm/index.mjs",
   "types": "./esm/index.d.mts",

package/skills/devtools-overview/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: devtools-overview
-description: 'Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.'
+description: 'Development-only dashboard for Warlock.js apps at `/__warlock`: request timeline (router + page middleware, loaders, render, deferred values), every SQL/Mongo query with EXPLAIN, N+1 warnings naming the file and line, a dev mailbox, logs, cache operations, AI traces per HTTP request (model, tokens, cost, cache hits, tools, retries, truncation, compaction), the route map and an API docs page (`/__warlock/docs`, the OpenAPI 3.1 document of the app rendered with Scalar or Swagger UI at `/__warlock/docs/swagger`, with OpenAPI and Postman downloads). Use for: "why is this page slow", "which queries does this request run", "find N+1 queries", "see the email my app just sent in dev", "open the dashboard", "browse my API docs in dev", "see the OpenAPI for my routes", "open Swagger UI for my API", "export my routes to Postman". Install with `warlock add devtools`; never registered in warlock.config.ts. Not this package: production monitoring/APM or OpenTelemetry export — use `http.tracing` hooks in @warlock.js/core; slow-query logging in production — subscribe to cascade `dataSourceRegistry.on("query")` yourself.'
 ---
 
 # `@warlock.js/devtools` — overview
@@ -50,6 +50,78 @@ of it would fail to resolve there.
 Work outside a request (boot, scheduler ticks, queue jobs) goes to a separate
 background list, so it never clutters a request's timeline.
 
+## AI runs alongside HTTP requests
+
+The **AI** tab and each request's **AI runs** section display completed traces
+from optional `@warlock.js/ai-panoptic`. If it cannot be imported, the tab shows
+install/restart guidance and the other panels keep working.
+
+```bash
+warlock add devtools
+npm install @warlock.js/ai @warlock.js/ai-panoptic
+```
+
+At app boot, enable observation, then restart `warlock dev`:
+
+```ts
+import { ai } from "@warlock.js/ai";
+import "@warlock.js/ai-panoptic";
+ai.config({ panoptic: { observeAll: true } });
+```
+
+No `dashboard: true` or extra listener port is needed. Existing `attach`,
+middleware and explicit collection through Panoptic's built-in collector also
+feed the panel. An installed but unobserved flow produces no trace.
+
+- `DevtoolsAiRun` and `DevtoolsAiEvent` are public types from
+  `@warlock.js/devtools`; `DevtoolsStreamEvent` includes the `ai` event.
+- Read all runs with `GET /__warlock/api/ai`, or filter by an exact HTTP id with
+  `GET /__warlock/api/ai?requestId=<encoded-id>`. Responses include `available`,
+  `runs` and a root-usage `aggregate`; unavailable responses contain `message`.
+- Inspect tools/timings, retry attempts and compaction records with
+  `GET /__warlock/api/ai/runs/<encoded-trace-id>` (404 when evicted). The existing
+  stream emits `ai` events with `{ traceId, requestId? }`.
+- Model, input/output/cache-read/cache-write tokens and historical USD cost come
+  from the trace, never a guessed price table. Unknown cost is unpriced. Root
+  usage includes children already; do not sum all spans for a run total.
+- Cache hits count trips reporting positive provider `cachedTokens`.
+  Semantic-cache hits have no explicit report flag and remain unreported; zero
+  tokens alone do not prove a hit. `—` means unreported rather than zero.
+- `incomplete` status or normalized `AGENT_INCOMPLETE` / `AgentIncompleteError`
+  marks truncation. Recovered truncated trips still contribute to their count.
+- Compaction metadata includes applied/skipped agent decisions and provider
+  compaction-block counts; summary content is omitted. Orchestrator result-only
+  compaction cannot be reconstructed from a report-only trace.
+
+A same-origin browser tool can consume the public types directly:
+
+```ts
+import type { DevtoolsAiEvent, DevtoolsAiRun, DevtoolsStreamEvent } from "@warlock.js/devtools";
+
+const response = await fetch("/__warlock/api/ai?requestId=request-42");
+const { runs }: { runs: DevtoolsAiRun[] } = await response.json();
+console.log(runs.map((run) => [run.traceId, run.usage, run.cost]));
+
+function handleStream(event: DevtoolsStreamEvent): void {
+  if (event.type === "ai") {
+    const update: DevtoolsAiEvent = event.data;
+    console.log(update.traceId, update.requestId);
+  }
+}
+handleStream({ type: "ai", data: { traceId: "run-42", requestId: "request-42" } });
+```
+
+Request correlation reads core's current request id at collection time, before
+exporters. Concurrent/late runs can retain their async context. No id means
+background; `sessionId` is never substituted. Replayed reports outside the
+request cannot recover its context automatically.
+
+Devtools retains its own content-free in-memory store, at most `maxRequests`
+traces (200 by default), independently of HTTP request retention. Clear/shutdown
+empties this view, leaving application exporter/cache stores alone. Boot-time
+and persisted traces are not replayed. The source only attaches in development;
+AI routes keep the same socket-loopback guard as every other panel.
+
 ## API docs
 
 `/__warlock/docs` renders the app's OpenAPI 3.1 document with [Scalar](https://github.com/scalar/scalar); the dashboard's **API** tab shows the same page and has a **Scalar | Swagger UI** switch (remembered in the browser). `/__warlock/docs/swagger` renders the same document with [Swagger UI](https://github.com/swagger-api/swagger-ui). The document comes from `GET /__warlock/api/openapi.json`, built in-process by core's `getDevelopmentOpenApiDocument()` from the routes already registered, so it is the same generator as `warlock generate.openapi` and follows your edits with no CLI run. It covers API routes (not pages): paths, parameters, request bodies from Seal validation, responses from each handler's `responseSchema`, `401`/`422` and bearer/cookie security from `authMiddleware()`. See core's `generate-openapi` topic for what is documented and how to declare it.
@@ -90,3 +162,15 @@ why the dashboard is development-only and loopback-only.
 - Building your own tooling on the same hooks: core `registerTracingHooks()`,
   cascade `dataSourceRegistry.on("query")`, core `mailEvents.onCaptured()` and
   the cache `invalidated` event are public APIs that also work without devtools.
+
+## Process supervision panel
+
+Run `npx warlock add process` to create an app-owned supervisor and
+`src/app/processes/devtools.ts`, exporting `processPanel = { list: () =>
+processes.list() }`. Devtools discovers this registration only in development.
+The **Processes** tab refreshes `GET /__warlock/api/processes`: PIDs, workload
+categories, labels, display commands, limits, enforcement, and peak memory.
+It excludes ownership tokens. Without registration the list is empty. The
+endpoint retains development/loopback guards and provides no stop action.
+Use the `supervise-processes` skill of `@warlock.js/process` for launch,
+recovery and stop APIs; configure one owner/registry per application instance.

package/ui/app.css

@@ -361,3 +361,16 @@ details summary {
     grid-template-columns: 120px 1fr;
   }
 }
+
+.ai-span {
+  margin: 0.75rem 0 0.75rem 0.75rem;
+  padding-left: 0.75rem;
+  border-left: 2px solid currentColor;
+}
+.ai-span summary {
+  cursor: pointer;
+}
+.toolbar input {
+  flex: 1;
+  min-width: 12rem;
+}

package/ui/app.js

@@ -174,7 +174,7 @@ function queryRow(query, requestId) {
   return details;
 }
 
-function requestDetail(request) {
+async function requestDetail(request) {
   const section = el("section", { class: "detail" }, [
     el("h2", {
       text: `${request.method} ${request.path} · ${value(request.status)} · ${value(request.durationMs)} ms`,
@@ -225,6 +225,7 @@ function requestDetail(request) {
       ),
     );
   else section.append(empty("No mail captured."));
+  section.append(el("h3", { text: "AI runs" }), await requestAiView(request.id));
   return section;
 }
 
@@ -242,11 +243,186 @@ async function requestsView() {
     );
   const detail =
     state.selectedRequest && state.details.get(state.selectedRequest)
-      ? requestDetail(state.details.get(state.selectedRequest))
+      ? await requestDetail(state.details.get(state.selectedRequest))
       : el("div", { class: "panel" }, empty("Select a request to inspect it."));
   return el("div", { class: "layout" }, [list, detail]);
 }
 
+function aiUsage(usage, cost) {
+  const cacheSemantics =
+    usage.inputIncludesCache === false
+      ? "input excludes cache tokens"
+      : "input includes cache tokens";
+  return `${value(usage.input)} input · ${value(usage.output)} output · ${value(usage.cachedTokens)} cache read · ${value(usage.cacheWriteTokens)} cache write · ${cost == null ? "unpriced" : `$${cost.toFixed(6)} USD`} (${cacheSemantics})`;
+}
+
+function aiRunSummary(run) {
+  return el("div", {}, [
+    el("div", {
+      class: "row-top",
+      text: `${run.name} · ${run.status}${run.incomplete ? " · Incomplete / truncated" : ""} · ${run.duration} ms`,
+    }),
+    el("div", { class: "meta", text: run.models.join(", ") || "Model unreported" }),
+    el("p", { text: aiUsage(run.usage, run.cost) }),
+    el("div", {
+      class: "meta",
+      text: `${run.toolCalls} tool calls · ${run.retries} retries · ${value(run.cacheHits)} provider cache-hit trips · ${run.truncatedTrips} truncated trips · ${run.compactions} applied / ${run.skippedCompactions} skipped compactions · ${run.providerCompactions} provider compactions`,
+    }),
+    el("div", {
+      class: "meta",
+      text: `${run.traceId} · ${run.requestId ? `Request ${run.requestId}` : "Background / no request id"}`,
+    }),
+  ]);
+}
+
+function aiGuidance(data) {
+  return empty(
+    data.message ||
+      "Install @warlock.js/ai and @warlock.js/ai-panoptic, restart warlock dev, and enable Panoptic observation.",
+  );
+}
+
+async function requestAiView(requestId) {
+  try {
+    const data = await api(`api/ai?requestId=${encodeURIComponent(requestId)}`);
+    if (!data.available) return aiGuidance(data);
+    const section = el("div");
+    if (!data.runs.length) section.append(empty("No AI runs collected for this request yet."));
+    for (const run of data.runs) {
+      section.append(
+        el(
+          "button",
+          {
+            class: "row",
+            type: "button",
+            onclick: () => {
+              state.selectedAiRun = run.traceId;
+              state.aiRequestId = requestId;
+              setTab("ai");
+            },
+          },
+          aiRunSummary(run),
+        ),
+      );
+    }
+    return section;
+  } catch (error) {
+    return errorView(error);
+  }
+}
+
+function aiSpan(span, rootStartedAt) {
+  const incomplete =
+    span.status === "incomplete" ||
+    span.error?.type === "AgentIncompleteError" ||
+    span.error?.type === "AGENT_INCOMPLETE";
+  const start = Date.parse(span.startedAt) - Date.parse(rootStartedAt);
+  const section = el("details", { class: "ai-span", open: "" }, [
+    el("summary", {
+      text: `${span.type} ${span.name} · ${span.status}${incomplete ? " · Incomplete / truncated" : ""} · +${start} ms · ${span.duration} ms`,
+    }),
+    el("p", { class: "meta", text: `${span.startedAt} → ${span.endedAt}` }),
+    el("pre", {
+      text: JSON.stringify(
+        { usage: span.usage, attributes: span.attributes, error: span.error },
+        null,
+        2,
+      ),
+    }),
+  ]);
+  span.children.forEach((child) => section.append(aiSpan(child, rootStartedAt)));
+  return section;
+}
+
+async function aiView() {
+  const section = el("section", { class: "detail" }, el("h2", { text: "AI runs" }));
+  const input = el("input", {
+    type: "text",
+    placeholder: "HTTP request id (empty for all runs)",
+    "aria-label": "Filter AI runs by HTTP request id",
+    value: state.aiRequestId || "",
+  });
+  section.append(
+    el(
+      "form",
+      {
+        class: "toolbar",
+        onsubmit: (event) => {
+          event.preventDefault();
+          state.aiRequestId = input.value;
+          state.selectedAiRun = undefined;
+          render();
+        },
+      },
+      [input, el("button", { type: "submit", text: "Filter / refresh" })],
+    ),
+  );
+  const data = await api(
+    `api/ai${state.aiRequestId ? `?requestId=${encodeURIComponent(state.aiRequestId)}` : ""}`,
+  );
+  if (!data.available) {
+    section.append(aiGuidance(data));
+    return section;
+  }
+  if (!data.runs.length) {
+    section.append(
+      empty(
+        "No AI runs yet. Enable Panoptic observation and execute a flow; runs appear when collection completes.",
+      ),
+    );
+    return section;
+  }
+  const costs = data.runs.filter((run) => run.cost != null);
+  section.append(
+    el("p", {
+      text: `${data.aggregate.traces} runs · ${data.aggregate.usage.input} input tokens · ${data.aggregate.usage.output} output tokens · ${costs.length ? `$${costs.reduce((sum, run) => sum + run.cost, 0).toFixed(6)} USD (reported cost)` : "unpriced"}`,
+    }),
+  );
+  const list = el("div", { class: "panel list" });
+  for (const run of data.runs)
+    list.append(
+      el(
+        "button",
+        {
+          class: `row${run.traceId === state.selectedAiRun ? " is-selected" : ""}`,
+          type: "button",
+          onclick: () => {
+            state.selectedAiRun = run.traceId;
+            render();
+          },
+        },
+        aiRunSummary(run),
+      ),
+    );
+  const detail = el("div", { class: "panel detail" });
+  const selected = data.runs.find((run) => run.traceId === state.selectedAiRun);
+  if (selected) {
+    detail.append(aiRunSummary(selected));
+    if (selected.requestId)
+      detail.append(
+        el("button", {
+          type: "button",
+          text: "Open HTTP request",
+          onclick: async () => {
+            state.tab = "requests";
+            tabs.forEach((button) =>
+              button.classList.toggle("is-active", button.dataset.tab === "requests"),
+            );
+            await showRequest(selected.requestId);
+          },
+        }),
+      );
+    try {
+      const trace = await api(`api/ai/runs/${encodeURIComponent(selected.traceId)}`);
+      detail.append(aiSpan(trace.root, trace.startedAt));
+    } catch (error) {
+      detail.append(errorView(error));
+    }
+  } else detail.append(empty("Select a run to inspect tools, retries and compaction metadata."));
+  section.append(el("div", { class: "layout" }, [list, detail]));
+  return section;
+}
+
 function queriesView() {
   const requests = [...state.details.values()].sort((a, b) => b.startedAt - a.startedAt);
   // This session-only tab intentionally lists queries from request details fetched so far.
@@ -535,23 +711,42 @@ function apiView() {
   return section;
 }
 
+let renderVersion = 0;
+
+async function processesView() {
+  const rows = await api("api/processes");
+  const section = el("section", { class: "card detail" }, [el("h2", { text: "Processes" })]);
+  section.append(el("button", { text: "Refresh", onclick: () => render() }));
+  if (!rows.length)
+    section.append(empty("No supervised processes. Configure with warlock add process."));
+  for (const row of rows) {
+    section.append(el("pre", { text: JSON.stringify(row, null, 2) }));
+  }
+  return section;
+}
+
 async function render() {
+  const version = ++renderVersion;
   try {
     const view =
-      state.tab === "requests"
-        ? await requestsView()
-        : state.tab === "queries"
-          ? queriesView()
-          : state.tab === "mail"
-            ? await mailView()
-            : state.tab === "logs"
-              ? await logsView()
-              : state.tab === "routes"
-                ? await routesView()
-                : apiView();
-    app.replaceChildren(view);
+      state.tab === "ai"
+        ? await aiView()
+        : state.tab === "requests"
+          ? await requestsView()
+          : state.tab === "queries"
+            ? queriesView()
+            : state.tab === "mail"
+              ? await mailView()
+              : state.tab === "logs"
+                ? await logsView()
+                : state.tab === "routes"
+                  ? await routesView()
+                  : state.tab === "processes"
+                    ? await processesView()
+                    : apiView();
+    if (version === renderVersion) app.replaceChildren(view);
   } catch (error) {
-    app.replaceChildren(errorView(error));
+    if (version === renderVersion) app.replaceChildren(errorView(error));
   }
 }
 
@@ -562,16 +757,18 @@ document.querySelector("#clear").addEventListener("click", async () => {
     state.requests = [];
     state.details.clear();
     state.selectedRequest = undefined;
+    state.selectedAiRun = undefined;
     render();
   } catch (error) {
     app.prepend(errorView(error));
   }
 });
 const events = new EventSource("api/stream");
-for (const type of ["request", "mail", "log"])
+for (const type of ["request", "mail", "log", "ai"])
   events.addEventListener(type, (event) => {
     try {
       const data = JSON.parse(event.data);
+      if (type === "ai" && (state.tab === "ai" || state.tab === "requests")) render();
       if (type === "request") {
         state.requests = [data, ...state.requests.filter((item) => item.id !== data.id)].slice(
           0,

package/ui/index.html

@@ -11,10 +11,12 @@
       <h1>Warlock Devtools</h1>
       <nav aria-label="Dashboard sections">
         <button class="tab is-active" data-tab="requests">Requests</button>
+        <button class="tab" data-tab="ai">AI</button>
         <button class="tab" data-tab="queries">Queries</button>
         <button class="tab" data-tab="mail">Mail</button>
         <button class="tab" data-tab="logs">Logs</button>
         <button class="tab" data-tab="routes">Routes</button>
+        <button class="tab" data-tab="processes">Processes</button>
         <button class="tab" data-tab="api">API</button>
       </nav>
       <button id="clear" class="clear" type="button">Clear</button>