jev-devtools 0.5.3 → 0.5.5

package/README.md

@@ -1,157 +1,163 @@
 # Jev DevTools
 
-[![npm version 0.5.3](https://img.shields.io/badge/npm-v0.5.3-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.5.3)
+[![npm version 0.5.5](https://img.shields.io/badge/npm-v0.5.5-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.5.5)
 
-A React drawer and Node adapter for inspecting TypeSafe Jev requests with animated diagrams. Includes request history, context, questions, typed answers, transport attempts, and raw snapshots.
+A React inspector for TypeSafe Jev requests captured through a Node server adapter. Inspect request inputs, returned answers and probabilities, retries, and errors. Use the optional Flow API to connect requests and application steps in a diagram.
 
-**Package version: 0.5.3.** [See release notes for verified publication status.](https://github.com/diegoag64/jev-devtools/releases/tag/v0.5.3) Check the [release history](https://github.com/diegoag64/jev-devtools/blob/main/CHANGELOG.md) for compatibility notes. To try newer source changes, install the local archive below. **Experimental (pre-1.0).** React 18/19 and Node 22.12+ are supported. APIs may change before 1.0. Verification uses sample responses through the real TypeSafe SDK, not live inference.
-
-[Website](https://jevtools.dev/) · [Documentation](https://docs.jevtools.dev/) · [Quick start](https://docs.jevtools.dev/getting-started/) · [API reference](https://docs.jevtools.dev/api/reference/) · [Release history](https://docs.jevtools.dev/changelog/)
-
-Hosted docs update separately; use the installed declarations and bundled skill for your exact version, and the [repository changelog](https://github.com/diegoag64/jev-devtools/blob/main/CHANGELOG.md) for release-candidate status.
+[Website](https://jevtools.dev/) · [Documentation](https://docs.jevtools.dev/) · [API reference](https://docs.jevtools.dev/api/reference/) · [For AI agents](#for-ai-agents)
 
 ## Demo
 
-![Full 28-second Jev DevTools demo showing sample results, the request drawer, and animated diagrams.](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/docs/assets/jev-devtools-preview.gif)
+![Jev DevTools sample recording showing the request drawer and diagrams.](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/docs/assets/jev-devtools-preview.gif)
+
+The recording uses sample responses. Try the [sample apps and cookbooks](https://docs.jevtools.dev/examples/) without an API key. Cookbook application code and fixtures live in the repository and are not bundled in npm.
 
-The full sample recording loops above.
+## Install
 
-## Set up with your coding agent
+Use matching React and React DOM **18.x or 19.x**, Node **22.12+**, TypeSafe SDK **0.7.x**, and ESM imports. TypeScript consumers need **5.4+** and compatible React and Node types. React and React DOM are required peers even in a server-only workspace. See [compatibility and public imports](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md#compatibility-and-public-imports) for exact ranges and compiler settings.
 
-In your application's coding-agent chat, paste:
+Install in each workspace that imports the package:
 
-```text
-Set up jev-devtools in this React app. Read and follow:
-https://raw.githubusercontent.com/diegoag64/jev-devtools/main/packages/jev-devtools/skills/setup-jev-devtools/SKILL.md
-Choose the recipe for this app's framework, wire the server capture and root
-drawer, and verify with a labeled sample request. Preserve existing app behavior.
+```sh
+npm install jev-devtools @typesafe-ai/sdk
 ```
 
-After installing, the version-matched instructions are available locally at `node_modules/jev-devtools/skills/setup-jev-devtools/SKILL.md` with all references included. In a workspace, read the package installed for the consuming app. Agents can follow these files without web access. Tools with skill support can install/copy the entire `setup-jev-devtools` folder into their supported skills location; npm does not register it automatically.
+Connect one React drawer, one shared Node adapter, and an instrumented client created with `inspector.createClient()`. Only calls through that client are captured. The drawer and adapter default to disabled. Enable both for development and keep API keys on the server.
 
-The [setup skill](https://github.com/diegoag64/jev-devtools/blob/main/packages/jev-devtools/skills/setup-jev-devtools/SKILL.md) covers React/Node/Vite and Next.js App Router, with no-key sample verification and troubleshooting. A Node backend is required for live calls; browser-only apps can use a local Vite sample server. [Agent documentation index](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/llms.txt).
+Choose the setup guide for your app:
 
-## Install
+- [React with Node](https://docs.jevtools.dev/getting-started/) connects an existing Express server and a Vite React app, with proxy configuration and capture checks.
+- [Next.js App Router](https://docs.jevtools.dev/guides/nextjs/) uses `getJevDevtools` for a shared adapter, `handleNodeRoute` in an optional catch-all route, and a client component for the drawer. Externalize `@typesafe-ai/sdk` and keep `jev-devtools` bundled. The package does not require a Next.js dependency.
 
-Install from npm:
+Mount the drawer once near your app's root. It supplies its own styles inside a Shadow DOM boundary and requires no CSS import, Tailwind, or shadcn. The browser entry is safe for server rendering. Pan the Flow canvas by dragging, zoom by scrolling or pinching, or select **Fit**.
 
-```sh
-pnpm add jev-devtools @typesafe-ai/sdk
-```
+### Runtime and access
 
-Use ESM imports, matching React/React DOM **18.x or 19.x**, Node **22.12+**, and TypeSafe SDK **0.7.x**. TypeScript consumers need **5.4+** and compatible React/Node types. React and React DOM are required package peers even for server-only installations. See [compatibility and all public imports](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md#compatibility-and-public-imports); `/server` and `/flow` run only on Node.
+The inspector routes and application client must share one adapter in the same Node process. Keep `jev-devtools/server` and `jev-devtools/flow` on Node. Edge runtimes and history aggregation across distributed or serverless instances are unsupported.
 
-To try local changes before a future release:
+The drawer receives same-origin server-sent events, starting with a snapshot and then changed traces. Older client and server combinations can use full snapshots. Keep both on the same package version to inspect all supported flow steps. History is bounded to 50 calls in memory by default.
 
-```sh
-# From the jev-devtools repository root:
-npm ci
-npm run pack:devtools
-# From the consuming app:
-npm install /absolute/path/to/jev-devtools-0.5.3.tgz
-```
+Bind local development servers to `127.0.0.1`. Without `authorize`, Node middleware accepts only loopback connections. Web Request handlers cannot inspect the connection's address. Shared access and tunnels require real [authorization and access controls](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md#history-and-access). Match the adapter's `origin` to the browser URL, and proxy the inspector endpoints when the frontend and backend use different ports.
 
-Mount once. The drawer loads its own styles; no CSS import is needed:
+### Capture privacy
 
-```tsx
-import { JevDevtools } from "jev-devtools";
+Captures contain bounded, redacted copies of request context and answers. Application and SDK data remain unchanged. Diagrams show captured data and application-defined routing, not hidden model reasoning.
 
-<JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />;
-```
+Known credential fields and custom server redactions cannot be revealed in the drawer. Headers and client options are not captured. Arbitrary secrets in prose or unusual field names still need application-specific server redaction. See the [redaction policy and limits](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md#redaction-policy).
 
-Create one shared Node adapter and instrumented client:
+`redactAdditionalSensitiveData` defaults to `true` and masks supported email, phone, postal address, SSN, and card-number fields in the drawer. Set it to `false` on `JevDevtools` to disable that display masking, including in existing views. **Display masking does not remove captured data.** The underlying values remain in capture, stream, and browser memory. Use server-side redaction for data that must not reach the browser.
 
-```ts
-import { createJevDevtools } from "jev-devtools/server";
+### Versions and local builds
 
-const inspector = createJevDevtools({
-  enabled: process.env.NODE_ENV === "development",
-  origin: "http://localhost:3000",
-});
-const jev = inspector.createClient({ apiKey: process.env.TYPESAFE_API_KEY });
-app.use(inspector.middleware); // Mount at root, before fallback handlers.
-// Call jev.systemOne(...) in your application's handlers.
-// Call inspector.dispose() on shutdown.
-```
+**Package version: 0.5.5.** [See release notes for verified publication status](https://github.com/diegoag64/jev-devtools/releases/tag/v0.5.5). APIs remain experimental before 1.0. Check the [changelog](https://github.com/diegoag64/jev-devtools/blob/main/CHANGELOG.md) for compatibility and release status. Verification uses sample responses through the real TypeSafe SDK, not live inference.
 
-Only calls through that client are captured. The React component subscribes via same-origin SSE, receiving an initial snapshot followed by changed traces. Older client/server combinations remain compatible through full snapshots. Both sides default to disabled. API keys remain server-side. Browser code is SSR-safe. The drawer uses a Shadow DOM boundary and its own stylesheet so host page selectors cannot alter its internal layout. No Tailwind or shadcn installation is required. Drag the Flow canvas to pan, scroll/pinch to zoom, or use Fit.
+Hosted docs update separately. Prefer installed declarations and the bundled setup skill when the site's version differs from your package.
 
-History is bounded to 50 calls in memory by default. API routes and inspector endpoints must share an adapter instance; distributed processes and edge runtimes are not supported. Without `authorize`, the middleware accepts only loopback connections; Web Request handlers can't see the connection's address, so run those servers on `127.0.0.1`. Captures include bounded/redacted context and answers, not hidden model reasoning.
+<details>
+<summary>Try changes from a local checkout</summary>
 
-Known credential fields are always redacted from DevTools captures; SDK and runtime data remain unchanged. The optional `<JevDevtools redactAdditionalSensitiveData={false} />` prop controls **display-only** masking of supported email, phone, postal address, SSN and card-number fields. It defaults to `true` and updates existing views immediately. These additional values still exist in capture/stream/browser memory while masked. Custom server redaction remains active, and neither credentials nor custom-redacted values can be revealed. Headers/options are not captured. See the [exact policy and limitations](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md#redaction-policy); arbitrary secrets in prose and unusual field names still need application-specific redaction.
+Pack the Jev DevTools repository, then install the archive in your app:
 
-For Next.js App Router, use `getJevDevtools(appKey, optionsFactory)` from `/server` to share an adapter across server reloads, expose `handleNodeRoute` through an optional catch-all Route Handler, and mount the root component in a client boundary. See the [Next.js guide](https://docs.jevtools.dev/guides/nextjs/) and runnable example. No Next dependency is required by this package.
+```sh
+# From the jev-devtools repository root:
+npm ci
+npm run pack:devtools
+
+# From the consuming app:
+npm install /absolute/path/to/jev-devtools/jev-devtools-0.5.5.tgz
+```
 
-[Quick start](https://docs.jevtools.dev/getting-started/) · [Detailed integration and access controls](https://github.com/diegoag64/jev-devtools/blob/main/docs/integration.md) · [Repository and playground](https://github.com/diegoag64/jev-devtools)
+Keep the drawer and server adapter on the same build.
 
-Jev DevTools is an independent, open-source community project. It is not affiliated with TypeSafe AI.
+</details>
 
-MIT for project code. See bundled LICENSE and THIRD_PARTY_NOTICES.txt for original design attribution and TypeSafe branding.
+<a id="connected-jev-flows-with-jev-devtoolsflow"></a>
 
-## Connected Jev flows with `jev-devtools/flow`
+## Connect requests with flows
 
-Define calls, conditions, parallel checks, and named outcomes with `jev-devtools/flow`. The builder supports server function steps (`task`), runtime request factories, bounded collections (`map`), returning conditionals (`if`), stateful iteration (`loop`), and strict numeric `.gt()` comparisons. The drawer connects request diagrams, function results, selected paths, collection items, and loop iterations on one canvas. Existing single-request integrations remain supported.
+Define a flow on Node, then run it for each input. Typed answer references can feed later requests, conditions, and outputs. The API also supports server tasks, parallel steps, bounded collections, conditional paths that rejoin, and stateful loops.
 
-On the server, reuse the instrumented `jev` client and `inspector` from the setup above:
+This example asks whether a message is ready for review. An application-defined threshold selects an outcome. Reuse the instrumented `jev` client and shared `inspector` from your server integration. Running this example with a live client makes an inference request:
 
 ```ts
+import { noul } from "@typesafe-ai/sdk";
 import { defineJevFlow } from "jev-devtools/flow";
 
 const review = defineJevFlow<{ message: string }>("review", (flow) => {
-  const decision = flow.jev(
-    "readiness",
-    {
-      state: flow.input,
-      questions: {
-        ready: { type: "noul", instructions: "Is this ready for review?" },
-      },
-    },
-    { title: "Assess readiness" },
-  );
-
-  return flow.branch(
-    "route",
-    {
-      when: decision.answer("ready").noul.gte(0.9), // Your application's policy.
-      then: (path) =>
-        path.output(
-          "ready",
-          { probability: decision.answer("ready").noul },
-          {
-            title: "Ready for review",
-            description: "Return readiness to the application.",
-          },
-        ),
-      else: (path) =>
-        path.output("manual-review", undefined, {
-          title: "Needs manual review",
-        }),
+  const readiness = flow.jev("readiness", {
+    state: flow.input,
+    questions: {
+      ready: noul("Does this message include enough detail to review?"),
     },
-    { title: "Require at least 90% readiness" },
-  );
+  });
+
+  return flow.branch("route", {
+    // Example application policy, not a threshold supplied by Jev.
+    when: readiness.answer("ready").noul.gte(0.9),
+    then: (path) => path.output("ready"),
+    else: (path) => path.output("needs-detail"),
+  });
 });
 
 const result = await review.run(
-  { message: "Please review my ticket." },
-  {
-    client: jev,
-    devtools: inspector,
-  },
+  { message: "Please review the attached proposal." },
+  { client: jev, devtools: inspector },
 );
-// Handle result.outcome in your app. The flow does not execute business actions.
+console.log(result.outcome); // "ready" or "needs-detail", depending on the answer.
 ```
 
-Define once in a Node module and run per request. Use `flow.parallel` for concurrent named lanes; downstream calls wait for every lane to succeed. `flow.branch` is terminal in its block; use `flow.if` when selected values feed shared downstream work. Tasks execute application code on Node with JSON-compatible inputs/results; maps and loops have explicit bounds. Runs have SDK retries and cooperative cancellation, with bounded in-memory inspector history. They do not provide durable or distributed execution. Keep the server and drawer on the same package version to inspect every supported step kind.
+Open **Jev DevTools**, select **Flows**, and open the run. Inspect the returned probability and the condition that selected the path. Untaken paths remain visible. The flow returns an outcome. Your application decides what to do with it.
+
+Runs support SDK retries and cancellation, with bounded in-memory inspector history. They do not provide durable workflow execution. Learn the API in [Flows from scratch](https://docs.jevtools.dev/guides/flow-basics/) or look up contracts in the [flow reference](https://github.com/diegoag64/jev-devtools/blob/main/docs/flows.md).
+
+## Replay and compare runs
+
+Replay and comparison require **0.5.0 or later**. Choose **Copy fixture** on a captured run to save its answers as JSON. `replayClient(fixture)` from `jev-devtools/flow` supplies those answers without Jev inference or an API key. Tasks run again and may call outside services.
+
+`compareWithFixture` compares answers, routing, and item steps with a saved fixture. It runs the flow with the supplied client and can make live calls. See the [Flow API reference](https://docs.jevtools.dev/api/flow/) for fixture requirements and complete examples.
+
+<a id="set-up-with-your-coding-agent"></a>
+
+## For AI agents
 
-**Added in 0.5.0.** **Copy fixture** in the drawer saves a run as JSON, and `replayClient(fixture)` from `jev-devtools/flow` replays its Jev calls in tests with no network access or API key; tasks run again. `compareWithFixture` from `jev-devtools/flow` compares a live run's answers, routing and item steps with a saved fixture.
+Start with the `jev-devtools` version installed in the consuming app. Follow that app's project instructions and use its existing package manager. Choose guidance for the task:
 
-[Beginner flow guide](https://docs.jevtools.dev/guides/flow-basics/) · [Flow API reference](https://docs.jevtools.dev/api/flow/) · [Detailed flow guide](https://github.com/diegoag64/jev-devtools/blob/main/docs/flows.md) · [AI flow recipe](https://github.com/diegoag64/jev-devtools/blob/main/packages/jev-devtools/skills/setup-jev-devtools/references/flows.md)
+| Task                                                     | Instructions                                                                                                                                                                                                                                                     |
+| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Install or troubleshoot the inspector                    | Read `node_modules/jev-devtools/skills/setup-jev-devtools/SKILL.md`. The [setup skill](https://github.com/diegoag64/jev-devtools/blob/main/packages/jev-devtools/skills/setup-jev-devtools/SKILL.md) selects the framework recipe and capture checks.            |
+| Build a flow                                             | Read `references/flows.md` inside the installed setup skill. The [flow recipe](https://github.com/diegoag64/jev-devtools/blob/main/packages/jev-devtools/skills/setup-jev-devtools/references/flows.md) covers builders, execution, capture, replay, and limits. |
+| Convert existing Jev logic or check whether it fits Flow | Read [port-jev-to-flow](https://github.com/diegoag64/jev-devtools/blob/main/.agents/skills/port-jev-to-flow/SKILL.md) and its referenced guidance. It maps source behavior to public Flow APIs and records adaptations or unsupported behavior.                  |
+| Look up an API contract                                  | Read `lib/src/index.d.ts`, `lib/server/index.d.ts`, or `lib/flow/index.d.ts` inside the installed package. Use the [API reference](https://docs.jevtools.dev/api/reference/) for explanations and examples.                                                      |
 
-To have your coding agent add a flow after installation:
+The setup skill and its references ship in npm. **The porting skill is repository-only.** Read it at `.agents/skills/port-jev-to-flow/SKILL.md` in a Jev DevTools checkout, or use its [raw Markdown](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/.agents/skills/port-jev-to-flow/SKILL.md). Resolve its `references/` links beside that file. For offline use, copy the whole `port-jev-to-flow` folder, including its references. Cookbook paths in the skill refer to the Jev DevTools repository.
+
+Check online guidance against the installed declarations before using an API. Read declaration files from disk, but import application code only through `jev-devtools`, `jev-devtools/server`, and `jev-devtools/flow`. The latter two run on Node. Internal files and `jev-devtools/package.json` are not application import paths.
+
+Use this prompt to set up an app after installing the package:
 
 ```text
-Read node_modules/jev-devtools/skills/setup-jev-devtools/SKILL.md and references/flows.md.
-Build a flow for the scenario I describe using the shared server client/inspector.
-Preserve my routing policies, add clear step titles/descriptions, and verify with
-labeled samples before using live inference. Ask for any missing decision rules.
+Read node_modules/jev-devtools/skills/setup-jev-devtools/SKILL.md
+from the package installed for this app, then follow its framework recipe.
+Preserve authentication, redaction, SDK options, and application behavior.
+Keep credentials on the server. Share one adapter between application calls
+and inspector routes in the same Node process.
+Verify a labeled sample in the drawer, run the app's typecheck and build,
+and check that capture and display are disabled in production.
+Report what passed, whether inference was sample or live, and any gaps.
 ```
+
+For a port, provide the source code or recipe and ask the agent to use `port-jev-to-flow`. Preserve question wording, request order and concurrency, thresholds, and external effects. Report unsupported behavior before changing it. Verify with labeled samples first. Live inference, publication, and deployment require separate authorization.
+
+npm does not register skills with coding tools automatically. Point the agent to the files explicitly, or install each complete skill folder using the tool's supported mechanism. Use [llms.txt](https://raw.githubusercontent.com/diegoag64/jev-devtools/main/llms.txt) to find repository guidance and [the hosted Markdown index](https://docs.jevtools.dev/llms.txt) for docs pages. The [contributor instructions](https://github.com/diegoag64/jev-devtools/blob/main/AGENTS.md) apply when editing Jev DevTools itself.
+
+## Documentation and contributing
+
+Use the [documentation](https://docs.jevtools.dev/) for guides and API examples, and the [repository](https://github.com/diegoag64/jev-devtools/) for sample apps and cookbooks. See [Contributing](https://github.com/diegoag64/jev-devtools/blob/main/CONTRIBUTING.md) for repository setup, verification, and the pull request workflow. Merging, npm publication, and deployment each require explicit authorization.
+
+## Credits and license
+
+Inspired by the TanStack Query DevTools workflow, with a custom drawer and TanStack Virtual for the Questions list. The TanStack DevTools shell is not included. Diagram styling is based on [Cathryn Lavery's diagram-design](https://github.com/cathrynlavery/diagram-design).
+
+Jev DevTools is an independent, open-source community project. It is not affiliated with TypeSafe AI. TypeSafe branding belongs to its respective owner.
+
+Project code is MIT licensed. See the bundled `LICENSE` and `THIRD_PARTY_NOTICES.txt`, or read the repository's [license](https://github.com/diegoag64/jev-devtools/blob/main/LICENSE) and [third-party notices](https://github.com/diegoag64/jev-devtools/blob/main/THIRD_PARTY_NOTICES.txt).

package/lib/flow/index.d.ts

@@ -21,14 +21,17 @@ type Ast = {
     args: Ast[];
 };
 declare const valueTypeBrand: unique symbol;
+type Scalar = string | number | boolean | null;
+type ExpressionFields<T> = T extends readonly unknown[] ? Pick<T, number | "length" | Extract<keyof T, `${number}`>> : T;
 /** Inspectable expression, not an application callback. Use get() for input fields. */
 export declare class FlowExpression<T> {
     readonly ast: Ast;
     protected readonly [valueTypeBrand]: T;
     constructor(ast: Ast, owner?: object);
-    /** Select an own field from an object or array; primitive properties are unsupported. */
-    get<K extends keyof T & (string | number)>(this: FlowExpression<object>, key: K): FlowExpression<T[K]>;
-    eq(value: T | FlowExpression<T>): FlowExpression<boolean>;
+    /** Select an own object field, array index, or array length. Missing values fail at runtime. */
+    get<K extends keyof T & keyof ExpressionFields<T> & (string | number)>(this: FlowExpression<object>, key: K): FlowExpression<T[K]>;
+    /** Compare matching scalar values; numbers must be finite at runtime. */
+    eq(this: FlowExpression<Scalar>, value: T | FlowExpression<T>): FlowExpression<boolean>;
     lt(this: FlowExpression<number>, value: number | FlowExpression<number>): FlowExpression<boolean>;
     gt(this: FlowExpression<number>, value: number | FlowExpression<number>): FlowExpression<boolean>;
     gte(this: FlowExpression<number>, value: number | FlowExpression<number>): FlowExpression<boolean>;

package/lib/flow/index.js

@@ -49,10 +49,11 @@ export class FlowExpression {
         freezeAst(ast);
         Object.freeze(this);
     }
-    /** Select an own field from an object or array; primitive properties are unsupported. */
+    /** Select an own object field, array index, or array length. Missing values fail at runtime. */
     get(key) {
         return expression({ op: "get", from: this.ast, key: String(key) }, [this]);
     }
+    /** Compare matching scalar values; numbers must be finite at runtime. */
     eq(value) {
         return operation("eq", [this, value]);
     }
@@ -214,7 +215,7 @@ function conditionRule(ast, requests, tasks) {
                     ? path.length === 3 && ["noul", "choice", "score"].includes(path[2])
                         ? path[1]
                         : path.slice(1).join(" ")
-                    : path.at(-1) ?? "Input",
+                    : (path.at(-1) ?? "Input"),
                 ...(base.op === "ref" && requests.has(base.id)
                     ? { stepId: base.id, path }
                     : base.op === "ref" && tasks.has(base.id)

package/lib/server/recorder.js

@@ -1,6 +1,7 @@
 import { AsyncLocalStorage } from "node:async_hooks";
 import { randomUUID } from "node:crypto";
 import { Image } from "@typesafe-ai/sdk";
+import { projectTraceCapture } from "../src/capture-view.js";
 // Whole field names only: tokenCount, sessionId, apiKeyName, etc. stay useful.
 // Keep the documented lists in docs/integration.md aligned with these policies.
 const credentialKeys = new Set([
@@ -227,14 +228,10 @@ export class JevRecorder {
                         captured = capture({ ...request, model: request.model ?? client.defaultModel }, warnings, this.options.redact);
                     }
                     catch {
-                        captured = {
-                            model: client.defaultModel,
-                            state: "[capture unavailable]",
-                            questions: {},
-                        };
+                        captured = null;
                         warnings.add("Input snapshot failed; request continues normally.");
                     }
-                    this.traces.set(id, {
+                    this.traces.set(id, projectTraceCapture({
                         version: 1,
                         id,
                         ...(typeof meta === "function" ? meta() : meta),
@@ -244,7 +241,7 @@ export class JevRecorder {
                         request: captured,
                         attempts: [],
                         captureWarnings: [...warnings],
-                    });
+                    }));
                     const trace = this.traces.get(id);
                     try {
                         this.flowContext.getStore()?.onTrace(id);
@@ -291,8 +288,13 @@ export class JevRecorder {
                                 t.durationMs = performance.now() - started;
                                 t.requestId =
                                     response.headers.get("x-typesafe-request-id") ?? undefined;
-                                t.result = result;
-                                t.captureWarnings = [...warnings];
+                                Object.assign(t, projectTraceCapture({
+                                    ...t,
+                                    result,
+                                    captureWarnings: [
+                                        ...new Set([...t.captureWarnings, ...warnings]),
+                                    ],
+                                }));
                             });
                         }, fail)
                             .catch(() => {

package/lib/src/CaptureFields.d.ts

@@ -0,0 +1,11 @@
+import type { Trace } from "./protocol.js";
+/** Missing paths come from shape checks, never from redaction marker strings. */
+export declare function CaptureFields({ trace, path, }: {
+    trace: Trace;
+    path: readonly string[];
+}): import("react").JSX.Element;
+/** A partial box has readable coordinates but cannot define an overlay. */
+export declare function PartialBox({ trace, name }: {
+    trace: Trace;
+    name: string;
+}): import("react").JSX.Element | null;

package/lib/src/CaptureFields.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { capturedValue, captureFieldUnavailable, unavailableCaptureFields, } from "./capture-view.js";
+const labels = {
+    request: "Request",
+    result: "Response",
+    questions: "Questions",
+    answers: "Answers",
+    score: "Score",
+    noul: "Probability of true",
+    confidence: "Confidence",
+    choice: "Choice",
+    probabilities: "Probabilities",
+    legend: "Legend",
+    box: "Box",
+    type: "Type",
+    model: "Model",
+    state: "Context",
+};
+const label = (parts) => parts
+    .map((part) => (Object.hasOwn(labels, part) ? labels[part] : part))
+    .join(" · ");
+/** Missing paths come from shape checks, never from redaction marker strings. */
+export function CaptureFields({ trace, path, }) {
+    const fields = captureFieldUnavailable(trace, path)
+        ? [path]
+        : unavailableCaptureFields(trace, path);
+    return (_jsx(_Fragment, { children: fields.map((field) => (_jsxs("p", { className: "muted", children: [label(field.slice(path.length).length
+                    ? field.slice(path.length)
+                    : path.slice(-1)), " ", "unavailable in this capture."] }, JSON.stringify(field)))) }));
+}
+/** A partial box has readable coordinates but cannot define an overlay. */
+export function PartialBox({ trace, name }) {
+    if (trace.result?.answers[name]?.box)
+        return null;
+    const value = capturedValue(trace, ["result", "answers", name, "box"]);
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return null;
+    const coordinates = Object.entries(value).flatMap(([key, value]) => typeof value === "number" && Number.isFinite(value)
+        ? [`${key} ${value.toFixed(2)}`]
+        : []);
+    return coordinates.length ? (_jsxs("p", { className: "muted", children: [coordinates.join(" · "), " \u00B7 Box overlay unavailable"] })) : null;
+}

package/lib/src/ChoiceProbabilities.d.ts

@@ -1,4 +1,6 @@
+import { type ReactNode } from "react";
 import type { AnswerView } from "./protocol.js";
-export declare function ChoiceProbabilities({ answer }: {
+export declare function ChoiceProbabilities({ answer, captureNotice, }: {
     answer: AnswerView;
+    captureNotice?: ReactNode;
 }): import("react").JSX.Element;

package/lib/src/ChoiceProbabilities.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-export function ChoiceProbabilities({ answer }) {
+export function ChoiceProbabilities({ answer, captureNotice, }) {
     const [search, setSearch] = useState("");
     const [page, setPage] = useState(0);
     const rows = useMemo(() => Object.entries(answer.probabilities ?? {}).sort((a, b) => b[1] - a[1]), [answer.probabilities]);
@@ -13,7 +13,7 @@ export function ChoiceProbabilities({ answer }) {
     return (_jsxs("div", { className: "lab-choice-browser", role: "region", "aria-label": "All Choice probabilities", "data-diagram-scroll": "", children: [_jsxs("div", { className: "lab-choice-controls", children: [_jsxs("label", { children: ["Search categories", _jsx("input", { autoFocus: true, type: "search", value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     setPage(0);
-                                } })] }), _jsxs("span", { role: "status", children: [filtered.length, " of ", rows.length, " categories \u00B7 highest probability first"] })] }), _jsxs("div", { className: "lab-choice-table-scroll", tabIndex: 0, "aria-label": "Probability table", children: [_jsxs("table", { children: [_jsxs("caption", { children: ["Captured probabilities. Values are not renormalized. Returned choice: ", answer.choice ?? "unavailable", "."] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "Probability" }), _jsx("th", { scope: "col", children: "Exact value (0\u20131)" })] }) }), _jsx("tbody", { children: filtered
+                                } })] }), _jsxs("span", { role: "status", children: [filtered.length, " of ", rows.length, " categories \u00B7 highest probability first"] })] }), _jsxs("div", { className: "lab-choice-table-scroll", tabIndex: 0, "aria-label": "Probability table", children: [_jsxs("table", { children: [_jsxs("caption", { children: [captureNotice, "Captured probabilities. Values are not renormalized. Returned choice: ", answer.choice ?? "unavailable", "."] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), _jsx("th", { scope: "col", children: "Probability" }), _jsx("th", { scope: "col", children: "Exact value (0\u20131)" })] }) }), _jsx("tbody", { children: filtered
                                     .slice(current * 20, (current + 1) * 20)
                                     .map(([label, value]) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [label, label === answer.choice && (_jsx("span", { className: "lab-choice-returned", children: "Returned choice" }))] }), _jsxs("td", { children: [Number((value * 100).toPrecision(6)), "%"] }), _jsx("td", { children: _jsx("code", { children: String(value) }) })] }, label))) })] }), !filtered.length && _jsx("p", { children: "No matching categories." })] }), _jsxs("div", { className: "lab-choice-pagination", children: [_jsx("button", { disabled: current === 0, onClick: () => setPage(current - 1), children: "Previous categories" }), _jsxs("span", { "aria-live": "polite", children: ["Page ", current + 1, " of ", pages] }), _jsx("button", { disabled: current + 1 >= pages, onClick: () => setPage(current + 1), children: "Next categories" })] })] }));
 }

package/lib/src/JevDevtools.d.ts

@@ -3,7 +3,7 @@ import type { Trace } from "./protocol.js";
 export declare const RequestDetail: import("react").MemoExoticComponent<({ trace, }: {
     trace?: Trace;
 }) => import("react").JSX.Element>;
-export declare function JevPanel({ traces, flows, connection, onClear, }: {
+export declare function JevPanel({ traces: incomingTraces, flows, connection, onClear, }: {
     traces: Trace[];
     flows?: FlowHistory;
     connection: string;

package/lib/src/JevDevtools.js

@@ -1,4 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaptureFields } from "./CaptureFields.js";
+import { capturedValue, captureFieldUnavailable, traceCaptureView, } from "./capture-view.js";
 import { emptyFlows } from "./flow-stream.js";
 import { lazy, memo, startTransition, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { TraceDiagram } from "./TraceDiagram.js";
@@ -18,24 +20,37 @@ const RequestRow = memo(function RequestRow({ trace, selected, onSelect, }) {
     return (_jsxs("button", { className: `request-row ${selected ? "selected" : ""}`, "aria-pressed": selected, onClick: () => onSelect(trace.id), children: [_jsx("span", { className: `status-dot ${trace.status}` }), _jsxs("span", { children: [_jsx("strong", { children: trace.label }), _jsxs("small", { children: [new Date(trace.startedAt).toLocaleTimeString(), " \u00B7 ", trace.source, " \u00B7", " ", ms(trace.durationMs)] })] }), _jsx("span", { className: "row-status", children: trace.status })] }));
 });
 export const RequestDetail = memo(function RequestDetail({ trace, }) {
+    trace = trace && traceCaptureView(trace);
+    const tokens = (field) => {
+        if (!trace)
+            return "—";
+        const value = capturedValue(trace, ["result", "usage", field]);
+        return typeof value === "number" && Number.isFinite(value)
+            ? value
+            : captureFieldUnavailable(trace, ["result", "usage", field])
+                ? "Unavailable"
+                : "—";
+    };
     // Keep tab selection across request switches and clear, as before. Local tab
     // changes no longer rerender the history list.
     const [tab, setTab] = useState("Flow");
-    return (_jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [trace.result?.usage
-                                            ? `${trace.result.usage.input_tokens} / ${trace.result.usage.output_tokens}`
-                                            : "—", _jsx("small", { children: "Tokens in / out" })] })] })] }), _jsxs("div", { className: "detail-meta", children: [_jsx("code", { children: trace.result?.model || trace.request.model }), _jsx("code", { children: trace.requestId ||
+    return (_jsx("section", { className: "request-detail", children: trace ? (_jsxs(_Fragment, { children: [_jsxs("header", { className: "detail-header", children: [_jsxs("div", { children: [_jsxs("span", { className: "eyebrow", children: [trace.source, " response \u00B7 ", trace.status] }), _jsx("h2", { children: trace.label })] }), _jsxs("div", { className: "metrics", children: [_jsxs("span", { children: [ms(trace.durationMs), _jsx("small", { children: "Total duration" })] }), _jsxs("span", { children: [trace.attempts.length, _jsx("small", { children: "Attempts" })] }), _jsxs("span", { children: [`${tokens("input_tokens")} / ${tokens("output_tokens")}`, _jsx("small", { children: "Tokens in / out" })] })] })] }), _jsxs("div", { className: "detail-meta", children: [_jsx("code", { children: trace.result?.model ||
+                                trace.request.model ||
+                                "Model unavailable in this capture" }), _jsx("code", { children: trace.requestId ||
                                 (trace.status === "pending"
                                     ? "Request ID pending"
-                                    : "No request ID") })] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => {
+                                    : "No request ID") }), ["request", "result"].map((section) => !captureFieldUnavailable(trace, [section]) &&
+                            captureFieldUnavailable(trace, [section, "model"]) ? (_jsxs("p", { className: "muted", children: [section === "request" ? "Request" : "Response", " model unavailable in this capture."] }, section)) : null)] }), _jsx("nav", { className: "detail-tabs", "aria-label": "Request views", children: ["Flow", "Questions", "Context", "Transport", "Raw"].map((name) => (_jsx("button", { "aria-pressed": tab === name, onClick: () => {
                             // Keep the current view while its chunk loads, but don't
                             // defer subsequent opens once the component is available.
                             if (name === "Questions" && !questionsLoaded)
                                 startTransition(() => setTab(name));
                             else
                                 setTab(name);
-                        }, children: name }, name))) }), _jsx("div", { className: `detail-body ${tab === "Flow" ? "detail-body-flow" : tab === "Questions" ? "detail-body-questions" : ""}`, children: _jsxs(Suspense, { fallback: _jsx("p", { className: "muted", role: "status", children: "Loading questions\u2026" }), children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" && (_jsx(Questions, { trace: trace }, trace.id)), tab === "Context" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "muted", children: "Captured before dispatch without changing SDK data. Known credential fields remain redacted; additional display masking follows the component prop. Captures are size limited." }), findImage(trace.request.state) && (_jsx("img", { className: "context-image", src: findImage(trace.request.state), alt: "Captured context" })), _jsx(JsonBlock, { value: trace.request.state }), trace.request.assets && (_jsx(JsonBlock, { value: trace.request.assets }))] })), tab === "Transport" && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "HTTP attempts" }), _jsx("p", { className: "muted", children: "Attempt duration ends at response headers. Total duration includes SDK processing and retry waits." }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Attempt" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Duration" })] }) }), _jsx("tbody", { children: trace.attempts.map((a) => (_jsxs("tr", { children: [_jsx("td", { children: a.number }), _jsx("td", { children: a.error || a.status || "Pending" }), _jsx("td", { children: ms(a.durationMs) })] }, a.number))) })] }), !trace.attempts.length && _jsx("p", { children: "No HTTP attempt recorded." })] })), tab === "Raw" && _jsx(JsonBlock, { value: trace })] }) })] })) : (_jsxs("div", { className: "empty-detail", children: [_jsx("span", { className: "empty-symbol", children: "\u21B3" }), _jsx("h2", { children: "Follow a Jev request" }), _jsxs("p", { children: ["Context, parallel questions, typed answers.", _jsx("br", {}), "Run a sample above to see the complete flow."] })] })) }));
+                        }, children: name }, name))) }), _jsx("div", { className: `detail-body ${tab === "Flow" ? "detail-body-flow" : tab === "Questions" ? "detail-body-questions" : ""}`, children: _jsxs(Suspense, { fallback: _jsx("p", { className: "muted", role: "status", children: "Loading questions\u2026" }), children: [trace.error && (_jsxs("div", { role: "alert", className: "error-banner", children: [_jsx("strong", { children: trace.error.name }), " ", trace.error.message] })), trace.captureWarnings.map((w) => (_jsx("p", { className: "warning", children: w }, w))), tab === "Flow" && _jsx(TraceDiagram, { trace: trace }, trace.id), tab === "Questions" && (_jsx(Questions, { trace: trace }, trace.id)), tab === "Context" && (_jsxs(_Fragment, { children: [_jsx("p", { className: "muted", children: "Captured before dispatch without changing SDK data. Known credential fields remain redacted; additional display masking follows the component prop. Captures are size limited." }), _jsx(CaptureFields, { trace: trace, path: ["request", "state"] }), !captureFieldUnavailable(trace, ["request", "state"]) && (_jsxs(_Fragment, { children: [findImage(trace.request.state) && (_jsx("img", { className: "context-image", src: findImage(trace.request.state), alt: "Captured context" })), _jsx(JsonBlock, { value: trace.request.state })] })), trace.request.assets && (_jsx(JsonBlock, { value: trace.request.assets }))] })), tab === "Transport" && (_jsxs(_Fragment, { children: [_jsx("h3", { children: "HTTP attempts" }), _jsx("p", { className: "muted", children: "Attempt duration ends at response headers. Total duration includes SDK processing and retry waits." }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Attempt" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Duration" })] }) }), _jsx("tbody", { children: trace.attempts.map((a) => (_jsxs("tr", { children: [_jsx("td", { children: a.number }), _jsx("td", { children: a.error || a.status || "Pending" }), _jsx("td", { children: ms(a.durationMs) })] }, a.number))) })] }), !trace.attempts.length && _jsx("p", { children: "No HTTP attempt recorded." })] })), tab === "Raw" && _jsx(JsonBlock, { value: trace })] }) })] })) : (_jsxs("div", { className: "empty-detail", children: [_jsx("span", { className: "empty-symbol", children: "\u21B3" }), _jsx("h2", { children: "Follow a Jev request" }), _jsxs("p", { children: ["Context, parallel questions, typed answers.", _jsx("br", {}), "Run a sample above to see the complete flow."] })] })) }));
 });
-export function JevPanel({ traces, flows = emptyFlows, connection, onClear, }) {
+export function JevPanel({ traces: incomingTraces, flows = emptyFlows, connection, onClear, }) {
+    const traces = useMemo(() => incomingTraces.map(traceCaptureView), [incomingTraces]);
     const [view, setView] = useState("requests");
     const [selectedRun, setSelectedRun] = useState();
     const run = flows.runs.find((r) => r.id === selectedRun) ?? flows.runs[0];

package/lib/src/Questions.js

@@ -1,14 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaptureFields, PartialBox } from "./CaptureFields.js";
+import { captureFieldUnavailable, captureQuestionEntries, capturedValue, traceCaptureView, } from "./capture-view.js";
 import { memo, useCallback, useEffect, useLayoutEffect, useId, useMemo, useRef, useState, } from "react";
 import { defaultRangeExtractor, measureElement, observeElementRect, useVirtualizer, } from "@tanstack/react-virtual";
 import { Answer, findImage, JsonBlock } from "./TraceContent.js";
-const QuestionContent = memo(function QuestionContent({ name, question, answer, image, legendOpen, onLegendChange, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx(JsonBlock, { value: question }), _jsx(Answer, { answer: answer, image: image, legendOpen: legendOpen, onLegendToggle: (open) => onLegendChange(name, open) })] }));
+const QuestionContent = memo(function QuestionContent({ trace, name, question, answer, image, legendOpen, onLegendChange, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx(CaptureFields, { trace: trace, path: ["request", "questions", name] }), _jsx(JsonBlock, { value: capturedValue(trace, ["request", "questions", name]) }), _jsx(CaptureFields, { trace: trace, path: ["result", "answers", name] }), _jsx(PartialBox, { trace: trace, name: name }), !captureFieldUnavailable(trace, ["result", "answers", name]) && (_jsx(Answer, { answer: answer, image: image, legendOpen: legendOpen, onLegendToggle: (open) => onLegendChange(name, open) }))] }));
 });
 /** Variable-height rows retain full answers; only offscreen DOM is omitted. */
 export function Questions({ trace }) {
+    trace = traceCaptureView(trace);
     const helpId = useId();
-    const entries = useMemo(() => Object.entries(trace.request.questions ?? {}).filter(([, q]) => q && typeof q === "object" && typeof q.type === "string"), [trace.request.questions]);
+    const entries = useMemo(() => captureQuestionEntries(trace), [trace]);
     const image = useMemo(() => findImage(trace.request.state), [trace.request.state]);
     const viewport = useRef(null);
     const sizes = useRef(new Map());
@@ -96,7 +99,9 @@ export function Questions({ trace }) {
     // Scroll-range updates must not rebuild the full question picker.
     const navigation = useMemo(() => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "questions-navigation", children: [_jsxs("label", { children: ["Jump to question", _jsx("select", { "aria-label": "Jump to question", value: Math.min(destination, entries.length - 1), onChange: (event) => goTo(Number(event.target.value)), children: entries.map(([name, q], index) => (_jsxs("option", { value: index, children: [index + 1, ". ", name, " \u00B7 ", q.type] }, name))) })] }), _jsx("button", { "aria-label": "Previous question", disabled: destination === 0, onClick: () => goTo(destination - 1), children: "Previous" }), _jsx("button", { "aria-label": "Next question", disabled: destination >= entries.length - 1, onClick: () => goTo(destination + 1), children: "Next" }), _jsxs("span", { children: [entries.length, " question", entries.length === 1 ? "" : "s"] })] }), _jsx("p", { className: "questions-help muted", id: helpId, children: "\u2191 / \u2193 previous / next \u00B7 Home / End first / last when the list is focused." })] })), [entries, destination, goTo, helpId]);
     if (!entries.length)
-        return _jsx("p", { className: "muted", children: "No questions available in this capture." });
+        return captureFieldUnavailable(trace, ["request", "questions"]) ? (_jsx(CaptureFields, { trace: trace, path: captureFieldUnavailable(trace, ["request"])
+                ? ["request"]
+                : ["request", "questions"] })) : (_jsx("p", { className: "muted", children: "No questions available in this capture." }));
     return (_jsxs("div", { className: "questions-list", children: [navigation, _jsx("div", { className: "questions-viewport", ref: viewport, tabIndex: 0, role: "region", "aria-label": "Questions and answers", "aria-describedby": helpId, onScroll: (event) => {
                     const offset = event.currentTarget.scrollTop;
                     const time = performance.now();
@@ -169,6 +174,6 @@ export function Questions({ trace }) {
                         const preview = seeking && focused !== item.index;
                         return (_jsx("div", { "data-index": item.index, "data-question-key": name, "data-preview": preview || undefined, style: preview
                                 ? { height: sizes.current.get(name) || 600 }
-                                : undefined, ref: virtualizer.measureElement, className: "questions-row", role: "listitem", "aria-posinset": item.index + 1, "aria-setsize": entries.length, children: _jsx("article", { className: "question-node standalone", tabIndex: -1, "aria-busy": preview || undefined, "aria-label": `Question ${item.index + 1}: ${name}`, children: preview ? (_jsxs("div", { className: "question-scroll-preview", children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx("p", { className: "muted", children: "Pause scrolling to inspect this answer." })] })) : (_jsx(QuestionContent, { name: name, question: question, answer: trace.result?.answers[name], image: image, legendOpen: !!legends.get(name), onLegendChange: onLegendChange })) }) }, item.key));
+                                : undefined, ref: virtualizer.measureElement, className: "questions-row", role: "listitem", "aria-posinset": item.index + 1, "aria-setsize": entries.length, children: _jsx("article", { className: "question-node standalone", tabIndex: -1, "aria-busy": preview || undefined, "aria-label": `Question ${item.index + 1}: ${name}`, children: preview ? (_jsxs("div", { className: "question-scroll-preview", children: [_jsxs("header", { children: [_jsx("h3", { children: name }), _jsx("span", { className: "type", children: question.type })] }), _jsx("p", { className: "muted", children: "Pause scrolling to inspect this answer." })] })) : (_jsx(QuestionContent, { trace: trace, name: name, question: question, answer: trace.result?.answers[name], image: image, legendOpen: !!legends.get(name), onLegendChange: onLegendChange })) }) }, item.key));
                     }) }) })] }));
 }