@abstractframework/monitor-flow 0.1.0

package/README.md

@@ -0,0 +1,67 @@
+# @abstractuic/monitor-flow
+
+React components to inspect **agent execution cycles** (think → act → observe) from per-effect trace records.
+
+## What you get
+
+Authoritative exports live in `monitor-flow/src/index.ts`:
+
+- `AgentCyclesPanel` (+ types `TraceItem`, `TraceStep`)
+- `JsonViewer`
+- `build_agent_trace` (+ `LedgerRecordItem`, `StepRecordLike`)
+
+## Peer dependencies
+
+Declared in `monitor-flow/package.json`:
+
+- `react@^18`, `react-dom@^18`
+
+## Install
+
+- Workspace: add a dependency on `@abstractuic/monitor-flow`
+- npm (once published): `npm i @abstractuic/monitor-flow`
+
+## Expected data
+
+`AgentCyclesPanel` expects `TraceItem[]` (see `monitor-flow/src/AgentCyclesPanel.tsx`):
+
+```ts
+type TraceItem = {
+  id: string;
+  runId: string;
+  nodeId: string;
+  ts?: string;
+  status: string;
+  step: Record<string, unknown>;
+};
+```
+
+Cycles start whenever `step.effect.type === "llm_call"` (see the cycle builder in `monitor-flow/src/AgentCyclesPanel.tsx`).
+
+## Usage
+
+If you already have `TraceItem[]`, pass it directly:
+
+```tsx
+import { AgentCyclesPanel } from "@abstractuic/monitor-flow";
+
+<AgentCyclesPanel items={items} />;
+```
+
+If you have “ledger-like” records, adapt them with `build_agent_trace`:
+
+```tsx
+import { AgentCyclesPanel, build_agent_trace } from "@abstractuic/monitor-flow";
+
+const { items } = build_agent_trace(ledgerItems, { run_id: "run_123" });
+<AgentCyclesPanel items={items} />;
+```
+
+## Styling
+
+The panel imports `monitor-flow/src/agent_cycles.css` and uses shared UI token CSS variables where present (see `@abstractuic/ui-kit/src/theme.css`).
+
+## Related docs
+
+- Getting started: [`docs/getting-started.md`](../docs/getting-started.md)
+- Architecture: [`docs/architecture.md`](../docs/architecture.md)

package/dist/AgentCyclesPanel.d.ts

@@ -0,0 +1,20 @@
+import "./agent_cycles.css";
+export type TraceStep = Record<string, unknown>;
+export type TraceItem = {
+    id: string;
+    runId: string;
+    nodeId: string;
+    ts?: string;
+    status: string;
+    step: TraceStep;
+};
+export type AgentCyclesPanelProps = {
+    items: TraceItem[];
+    subRunId?: string | null;
+    title?: string;
+    subtitle?: string;
+    onOpenSubRun?: () => void;
+    defaultOpenLatest?: boolean;
+};
+export declare function AgentCyclesPanel({ items: items_in, subRunId, title, subtitle, onOpenSubRun, defaultOpenLatest }: AgentCyclesPanelProps): React.ReactElement | null;
+//# sourceMappingURL=AgentCyclesPanel.d.ts.map

package/dist/AgentCyclesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentCyclesPanel.d.ts","sourceRoot":"","sources":["../src/AgentCyclesPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAI5B,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AA8BF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA8gBF,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAwB,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA+JzK"}

package/dist/AgentCyclesPanel.js

@@ -0,0 +1,548 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import "./agent_cycles.css";
+import { JsonViewer } from "./JsonViewer";
+import { Markdown } from "./Markdown";
+async function copy_text(text) {
+    const value = String(text || "");
+    if (!value)
+        return;
+    try {
+        await navigator.clipboard.writeText(value);
+    }
+    catch {
+        const el = document.createElement("textarea");
+        el.value = value;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand("copy");
+        document.body.removeChild(el);
+    }
+}
+function as_record(value) {
+    if (!value || typeof value !== "object")
+        return null;
+    return value;
+}
+function clamp_inline(text, max_len) {
+    const value = String(text || "").replace(/\s+/g, " ").trim();
+    if (!value)
+        return "";
+    if (value.length <= max_len)
+        return value;
+    return `${value.slice(0, Math.max(0, max_len - 1)).trimEnd()}…`;
+}
+function as_llm_message(value) {
+    const obj = as_record(value);
+    if (!obj)
+        return null;
+    const role = typeof obj.role === "string" ? String(obj.role).trim() : "";
+    const content = typeof obj.content === "string" ? String(obj.content) : "";
+    if (!role || content === "")
+        return null;
+    const name = typeof obj.name === "string" ? String(obj.name).trim() : "";
+    return { role, content, name: name || undefined };
+}
+function as_llm_messages(value) {
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return null;
+        const out = [];
+        for (const item of value) {
+            const msg = as_llm_message(item);
+            if (!msg)
+                return null;
+            out.push(msg);
+        }
+        return out;
+    }
+    const single = as_llm_message(value);
+    return single ? [single] : null;
+}
+function try_parse_json_container(text) {
+    const trimmed = String(text || "").trim();
+    if (!trimmed)
+        return null;
+    const starts = trimmed[0];
+    const ends = trimmed[trimmed.length - 1];
+    const looks_like_container = (starts === "{" && ends === "}") || (starts === "[" && ends === "]");
+    if (!looks_like_container)
+        return null;
+    try {
+        const parsed = JSON.parse(trimmed);
+        if (parsed && typeof parsed === "object")
+            return parsed;
+        if (Array.isArray(parsed))
+            return parsed;
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+function looks_like_markdown(text) {
+    const s = String(text || "");
+    if (!s.trim())
+        return false;
+    if (s.includes("```"))
+        return true;
+    if (/\n\s*#{1,3}\s+/.test(s))
+        return true;
+    if (/\n\s*[-*]\s+/.test(s))
+        return true;
+    if (/\n\s*\d+[\.\)]\s+/.test(s))
+        return true;
+    if (s.includes("**"))
+        return true;
+    if (s.includes("`"))
+        return true;
+    return false;
+}
+function AutoText({ text }) {
+    const raw = String(text || "");
+    const parsed = try_parse_json_container(raw);
+    if (parsed !== null)
+        return _jsx(JsonViewer, { value: parsed });
+    const trimmed = raw.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+        return _jsx("pre", { className: "run-details-output", children: raw || "(none)" });
+    }
+    if (raw.includes("\n") || looks_like_markdown(raw)) {
+        return (_jsx("div", { className: "run-details-output", children: _jsx(Markdown, { text: raw }) }));
+    }
+    return _jsx("pre", { className: "run-details-output", children: raw || "(none)" });
+}
+function AutoValue({ value }) {
+    if (value == null)
+        return _jsx("pre", { className: "run-details-output", children: "(none)" });
+    const messages = as_llm_messages(value);
+    if (messages) {
+        return (_jsx("div", { className: "mf-msg-list", children: messages.map((m, idx) => (_jsxs("div", { className: "mf-msg", children: [_jsxs("div", { className: "mf-msg-meta", children: [_jsx("span", { className: `mf-msg-role ${m.role}`, children: m.role }), m.name ? _jsx("span", { className: "mf-msg-name", children: m.name }) : null] }), _jsx("div", { className: "mf-msg-content", children: _jsx(AutoText, { text: m.content }) })] }, `${m.role}:${idx}`))) }));
+    }
+    if (typeof value === "string")
+        return _jsx(AutoText, { text: value });
+    return _jsx(JsonViewer, { value: value });
+}
+function effect_of(step) {
+    const effect = step.effect;
+    if (!effect || typeof effect !== "object")
+        return null;
+    return effect;
+}
+function effect_type_of(step) {
+    const effect = effect_of(step);
+    const t = effect && typeof effect.type === "string" ? effect.type : "";
+    return t || "effect";
+}
+function payload_of(step) {
+    const effect = effect_of(step);
+    const payload = effect?.payload;
+    if (!payload || typeof payload !== "object")
+        return null;
+    return payload;
+}
+function result_of(step) {
+    const r = step.result;
+    if (!r || typeof r !== "object")
+        return null;
+    return r;
+}
+function tool_results_for_step(step) {
+    const t = effect_type_of(step);
+    if (t !== "tool_calls")
+        return [];
+    const res = result_of(step);
+    const raw = res && Array.isArray(res.results) ? res.results : null;
+    if (!raw)
+        return [];
+    const out = [];
+    for (const r of raw) {
+        const ro = as_record(r);
+        if (!ro)
+            continue;
+        const name = typeof ro.name === "string" ? ro.name.trim() : "";
+        if (!name)
+            continue;
+        out.push({
+            call_id: typeof ro.call_id === "string" ? ro.call_id : undefined,
+            name,
+            success: Boolean(ro.success),
+            output: ro.output,
+            error: ro.error,
+        });
+    }
+    return out;
+}
+function tool_calls_for_step(step) {
+    const t = effect_type_of(step);
+    if (t !== "tool_calls")
+        return [];
+    const payload = payload_of(step);
+    const raw = payload && Array.isArray(payload.tool_calls) ? payload.tool_calls : null;
+    if (!raw)
+        return [];
+    const out = [];
+    for (const c of raw) {
+        const co = as_record(c);
+        if (!co)
+            continue;
+        const name = typeof co.name === "string" ? co.name.trim() : "";
+        if (!name)
+            continue;
+        const args = as_record(co.args) || as_record(co.arguments) || {};
+        out.push({
+            call_id: typeof co.call_id === "string" ? co.call_id : undefined,
+            name,
+            args,
+        });
+    }
+    return out;
+}
+function error_text_of(step) {
+    const err = step.error;
+    if (typeof err === "string")
+        return err.trim();
+    const ro = as_record(err);
+    if (ro) {
+        const msg = typeof ro.message === "string" ? ro.message.trim() : "";
+        const stack = typeof ro.stack === "string" ? ro.stack.trim() : "";
+        return msg || stack || "";
+    }
+    return "";
+}
+function reasoning_text_of_result(res) {
+    if (!res)
+        return "";
+    const raw = res.reasoning;
+    if (typeof raw === "string")
+        return raw.trim();
+    const rr = as_record(raw);
+    const txt = rr && typeof rr.text === "string" ? rr.text.trim() : "";
+    return txt;
+}
+function preview_for_step(step) {
+    const t = effect_type_of(step);
+    const payload = payload_of(step);
+    const res = result_of(step);
+    const clamp = (text, max_len) => {
+        const value = String(text || "").replace(/\s+/g, " ").trim();
+        if (!value)
+            return "";
+        if (value.length <= max_len)
+            return value;
+        return `${value.slice(0, Math.max(0, max_len - 1)).trimEnd()}…`;
+    };
+    if (t === "llm_call") {
+        const content = res?.content;
+        const text = typeof content === "string" ? content.replace(/\s+/g, " ").trim() : "";
+        const reasoning = reasoning_text_of_result(res);
+        const tool_calls = Array.isArray(res?.tool_calls) ? res.tool_calls : null;
+        const has_tool_calls = Boolean(tool_calls && tool_calls.length > 0);
+        const preferred = has_tool_calls ? reasoning || text : text || reasoning;
+        return clamp(preferred, 220);
+    }
+    if (t === "tool_calls") {
+        const results = res && Array.isArray(res.results) ? res.results : null;
+        if (!results)
+            return "";
+        const failed = results.filter((r) => as_record(r)?.success === false);
+        if (failed.length > 0)
+            return `${failed.length} tool call(s) failed`;
+        return `${results.length} tool call(s) executed`;
+    }
+    if (t === "ask_user") {
+        const prompt = payload && typeof payload.prompt === "string" ? String(payload.prompt).trim() : "";
+        return prompt;
+    }
+    return "";
+}
+function effective_status_for_item(item) {
+    const status = typeof item.status === "string" ? item.status : "unknown";
+    if (status === "failed")
+        return "failed";
+    const errs = error_text_of(item.step);
+    if (errs)
+        return "failed";
+    return status;
+}
+function combine_status(items) {
+    const statuses = items.map((i) => effective_status_for_item(i));
+    if (statuses.some((s) => s === "failed"))
+        return "failed";
+    if (statuses.some((s) => s === "waiting"))
+        return "waiting";
+    if (statuses.some((s) => s === "running"))
+        return "running";
+    return "completed";
+}
+function visible_tabs(tabs) {
+    return tabs.filter((t) => !t.hidden);
+}
+function tabs_for_step(step) {
+    const t = effect_type_of(step);
+    const errs = error_text_of(step);
+    if (t === "llm_call") {
+        return visible_tabs([
+            { id: "system", label: "System" },
+            { id: "user", label: "User" },
+            { id: "tools", label: "Tools" },
+            { id: "response", label: "Response" },
+            { id: "reasoning", label: "Reasoning" },
+            { id: "errors", label: "Errors", hidden: !errs },
+            { id: "raw", label: "Raw" },
+        ]);
+    }
+    if (t === "tool_calls") {
+        return visible_tabs([
+            { id: "tools", label: "Tools" },
+            { id: "errors", label: "Errors", hidden: !errs },
+            { id: "raw", label: "Raw" },
+        ]);
+    }
+    return visible_tabs([
+        { id: "errors", label: "Errors", hidden: !errs },
+        { id: "raw", label: "Raw" },
+    ]);
+}
+function default_tab_for_step(step) {
+    const t = effect_type_of(step);
+    if (t === "llm_call")
+        return "user";
+    if (t === "tool_calls")
+        return "tools";
+    if (error_text_of(step))
+        return "errors";
+    return "raw";
+}
+function tool_defs_from_think_step(step) {
+    const out = new Map();
+    const payload = payload_of(step);
+    const tools = payload && Array.isArray(payload.tools) ? payload.tools : null;
+    if (!tools)
+        return out;
+    for (const t of tools) {
+        const to = as_record(t);
+        if (!to)
+            continue;
+        const name = typeof to.name === "string" ? to.name.trim() : "";
+        if (!name)
+            continue;
+        const params = Array.isArray(to.parameters) ? to.parameters : [];
+        const args = params
+            .map((p) => {
+            const po = as_record(p);
+            const id = po && typeof po.id === "string" ? po.id.trim() : "";
+            return id || "";
+        })
+            .filter(Boolean);
+        out.set(name, args);
+    }
+    return out;
+}
+function format_tool_signature(name, args, param_order) {
+    const keys = Object.keys(args || {});
+    const ordered = param_order && param_order.length ? param_order.filter((k) => keys.includes(k)) : [];
+    const rest = keys.filter((k) => !ordered.includes(k)).sort();
+    const all = [...ordered, ...rest];
+    const parts = all.slice(0, 5).map((k) => {
+        const v = args[k];
+        if (typeof v === "string")
+            return `${k}=${JSON.stringify(clamp_inline(v, 42))}`;
+        if (typeof v === "number" || typeof v === "boolean")
+            return `${k}=${String(v)}`;
+        if (v == null)
+            return `${k}=null`;
+        return `${k}=${clamp_inline(JSON.stringify(v), 42)}`;
+    });
+    return `${name}(${parts.join(", ")}${all.length > 5 ? ", …" : ""})`;
+}
+function trace_step_time_label(item) {
+    const ts = item.ts ? String(item.ts) : "";
+    if (!ts)
+        return "";
+    try {
+        const d = new Date(ts);
+        const s = Number.isFinite(d.getTime()) ? d.toLocaleTimeString() : "";
+        return s;
+    }
+    catch {
+        return "";
+    }
+}
+function TraceStepCard({ item, label, toolDefs }) {
+    const step = item.step;
+    const kind = effect_type_of(step);
+    const tabs = tabs_for_step(step);
+    const default_tab = default_tab_for_step(step);
+    const [tab, set_tab] = useState(default_tab);
+    const payload = payload_of(step);
+    const res = result_of(step);
+    const errs = error_text_of(step);
+    const time_label = trace_step_time_label(item);
+    const node = item.nodeId ? String(item.nodeId) : "";
+    const run = item.runId ? String(item.runId) : "";
+    const tool_calls = kind === "tool_calls" ? tool_calls_for_step(step) : [];
+    const tool_results = kind === "tool_calls" ? tool_results_for_step(step) : [];
+    const tool_sigs = tool_calls.map((tc) => format_tool_signature(tc.name, tc.args, toolDefs.get(tc.name) || null));
+    const output_for_tab = () => {
+        if (tab === "raw")
+            return step;
+        if (tab === "errors")
+            return errs || null;
+        if (kind === "llm_call") {
+            const p = payload || {};
+            const system_prompt = typeof p.system_prompt === "string" ? String(p.system_prompt) : "";
+            const prompt = typeof p.prompt === "string" ? String(p.prompt) : "";
+            // Prefer the *effective* provider-visible message list when available (includes runtime injections
+            // like session attachments + tool activity). Fall back to the raw payload.
+            const meta = as_record(res?.metadata);
+            const obs = meta ? as_record(meta._runtime_observability) : null;
+            const obs_kwargs = obs ? as_record(obs.llm_generate_kwargs) : null;
+            const obs_messages = obs_kwargs && Array.isArray(obs_kwargs.messages) ? obs_kwargs.messages : null;
+            const preq = meta ? as_record(meta._provider_request) : null;
+            const preq_payload = preq ? as_record(preq.payload) : null;
+            const preq_messages = preq_payload && Array.isArray(preq_payload.messages) ? preq_payload.messages : null;
+            const raw_payload_messages = Array.isArray(p.messages) ? p.messages : [];
+            const raw_messages = obs_messages || preq_messages || raw_payload_messages;
+            const system = raw_messages.filter((m) => String(m?.role || "").trim() === "system");
+            // "User" tab is strictly the user prompt/messages (never assistant/tool output).
+            const user = raw_messages.filter((m) => String(m?.role || "").trim() === "user");
+            if (tab === "system") {
+                const out = [];
+                const sp = system_prompt.trim();
+                const dup_system_prompt = Boolean(sp) &&
+                    system.some((m) => typeof m?.content === "string" && String(m.content).trim() === sp);
+                if (sp && !dup_system_prompt)
+                    out.push({ role: "system", name: "system_prompt", content: system_prompt });
+                out.push(...system);
+                return out;
+            }
+            if (tab === "user") {
+                const out = [];
+                const pr = prompt.trim();
+                const dup_prompt = Boolean(pr) &&
+                    user.some((m) => typeof m?.content === "string" && String(m.content).trim() === pr);
+                if (pr && !dup_prompt)
+                    out.push({ role: "user", name: "prompt", content: prompt });
+                out.push(...user);
+                return out;
+            }
+            if (tab === "tools")
+                return p.tools || [];
+            if (tab === "response") {
+                const content = res?.content;
+                if (typeof content === "string" && content.trim())
+                    return content;
+                const out = res?.output;
+                if (out !== undefined)
+                    return out;
+                const tool_calls = Array.isArray(res?.tool_calls) ? res.tool_calls : null;
+                if (tool_calls && tool_calls.length)
+                    return { tool_calls };
+                return res;
+            }
+            if (tab === "reasoning")
+                return reasoning_text_of_result(res) || null;
+        }
+        if (kind === "tool_calls") {
+            if (tab === "tools")
+                return { tool_calls, tool_signatures: tool_sigs, results: tool_results };
+        }
+        return step;
+    };
+    const output = output_for_tab();
+    const preview = preview_for_step(step);
+    const status = effective_status_for_item(item);
+    const badge = status === "completed" ? "OK" : status === "failed" ? "ERROR" : status === "waiting" ? "WAITING" : status.toUpperCase();
+    return (_jsxs("details", { className: `agent-trace-entry ${status}`, open: false, children: [_jsxs("summary", { className: "agent-trace-summary", children: [_jsx("span", { className: `agent-trace-status ${status}`, children: badge }), _jsx("span", { className: "agent-cycle-stage", children: label }), _jsx("span", { className: "agent-trace-kind", children: kind }), time_label ? _jsx("span", { className: "agent-trace-node", children: time_label }) : null, node ? _jsx("span", { className: "agent-trace-node", children: node }) : null, run ? _jsx("span", { className: "agent-trace-run", children: run }) : null] }), preview ? _jsx("div", { className: "agent-trace-preview", children: preview }) : null, _jsxs("div", { className: "agent-trace-body", children: [_jsx("div", { className: "agent-trace-tabs", children: tabs.map((t) => (_jsx("button", { type: "button", className: `agent-trace-tab ${t.id === tab ? "active" : ""}`, onClick: () => set_tab(t.id), children: t.label }, t.id))) }), _jsx(AutoValue, { value: output })] })] }));
+}
+function ObserveCard({ acts }) {
+    const all = acts.flatMap((a) => tool_results_for_step(a.step));
+    const failed = all.filter((r) => r.success === false);
+    const header = failed.length ? `${failed.length} error(s)` : all.length ? `${all.length} tool result(s)` : "(none)";
+    const status = failed.length ? "failed" : "completed";
+    return (_jsxs("details", { className: `agent-trace-entry ${status}`, open: false, children: [_jsxs("summary", { className: "agent-trace-summary", children: [_jsx("span", { className: `agent-trace-status ${status}`, children: failed.length ? "ERROR" : "OK" }), _jsx("span", { className: "agent-cycle-stage", children: "observe" }), _jsx("span", { className: "agent-trace-kind", children: "OBSERVATIONS" }), _jsx("span", { className: "agent-trace-preview-inline", children: header })] }), _jsx("div", { className: "agent-observe-body", children: all.length === 0 ? (_jsx("div", { className: "agent-observe-empty", children: "(no tool results)" })) : (_jsx("div", { className: "agent-observe-results", children: all.map((r, idx) => {
+                        const st = r.success ? "completed" : "failed";
+                        const badge = r.success ? "OK" : "ERROR";
+                        const output = r.success ? r.output : r.error ?? r.output;
+                        return (_jsxs("details", { className: `agent-observe-result ${st}`, open: false, children: [_jsxs("summary", { className: "agent-observe-summary", children: [_jsx("span", { className: `agent-trace-status ${st}`, children: badge }), _jsx("span", { className: "agent-observe-name", children: r.name }), r.call_id ? _jsx("span", { className: "agent-observe-callid", children: r.call_id }) : null] }), _jsx(AutoValue, { value: output })] }, `${r.name}:${r.call_id || ""}:${idx}`));
+                    }) })) })] }));
+}
+export function AgentCyclesPanel({ items: items_in, subRunId, title, subtitle, onOpenSubRun, defaultOpenLatest = true }) {
+    const items = useMemo(() => {
+        const next = Array.isArray(items_in) ? items_in.slice() : [];
+        next.sort((a, b) => {
+            const ta = a.ts ? new Date(a.ts).getTime() : NaN;
+            const tb = b.ts ? new Date(b.ts).getTime() : NaN;
+            if (Number.isFinite(ta) && Number.isFinite(tb))
+                return ta - tb;
+            return 0;
+        });
+        return next;
+    }, [items_in]);
+    const cycles = useMemo(() => {
+        const out = [];
+        let current = null;
+        let idx = 0;
+        for (const item of items) {
+            const kind = effect_type_of(item.step);
+            if (kind === "llm_call") {
+                idx += 1;
+                current = {
+                    id: `cycle:${item.runId}:${idx}:${item.ts || ""}`,
+                    index: idx,
+                    items: [item],
+                    think: item,
+                    acts: [],
+                    others: [],
+                    status: effective_status_for_item(item),
+                    ts: item.ts,
+                };
+                out.push(current);
+                continue;
+            }
+            if (!current) {
+                idx += 1;
+                current = {
+                    id: `cycle:${item.runId}:${idx}:${item.ts || ""}`,
+                    index: idx,
+                    items: [],
+                    think: null,
+                    acts: [],
+                    others: [],
+                    status: effective_status_for_item(item),
+                    ts: item.ts,
+                };
+                out.push(current);
+            }
+            current.items.push(item);
+            if (kind === "tool_calls")
+                current.acts.push(item);
+            else
+                current.others.push(item);
+            current.status = combine_status(current.items);
+        }
+        return out;
+    }, [items]);
+    const title_text = typeof title === "string" && title.trim() ? title.trim() : "Agent calls";
+    const subtitle_text = typeof subtitle === "string" && subtitle.trim() ? subtitle.trim() : "Live per-effect trace (LLM/tool calls).";
+    const sub_run_id = typeof subRunId === "string" ? subRunId.trim() : "";
+    return (_jsxs("div", { className: "agent-trace-panel", children: [_jsxs("div", { className: "agent-trace-header", children: [_jsx("div", { className: "agent-trace-title", children: title_text }), _jsxs("div", { className: "agent-trace-subtitle", children: [subtitle_text, sub_run_id ? (_jsxs("span", { className: "agent-trace-subrun", children: [" ", "sub_run_id: ", sub_run_id, _jsx("button", { type: "button", className: "agent-trace-copy", onClick: (e) => {
+                                            e.stopPropagation();
+                                            void copy_text(sub_run_id);
+                                        }, title: `Copy sub_run_id: ${sub_run_id}`, "aria-label": "Copy sub run id", children: "\u29C9" }), onOpenSubRun ? (_jsx("button", { type: "button", className: "agent-trace-open", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onOpenSubRun();
+                                        }, title: "Open sub-run", children: "Open" })) : null] })) : null] })] }), items.length === 0 ? (_jsx("div", { className: "agent-trace-empty", children: "No trace entries yet." })) : (_jsxs("div", { className: "agent-cycle-list", children: [_jsxs("div", { className: "agent-cycle-meta", children: [cycles.length, " cycle(s)"] }), cycles.map((c) => {
+                        const status_raw = c.status;
+                        const status_label = status_raw === "completed" ? "OK" : status_raw === "failed" ? "ERROR" : status_raw === "waiting" ? "WAITING" : status_raw.toUpperCase();
+                        const status_icon = status_raw === "completed" ? "✓" : status_raw === "failed" ? "✗" : "";
+                        const status_text = status_icon ? `${status_icon} ${status_label}` : status_label;
+                        const think_preview = c.think ? preview_for_step(c.think.step) : "";
+                        const tool_defs = c.think ? tool_defs_from_think_step(c.think.step) : new Map();
+                        const cycle_tool_calls = c.acts.flatMap((a) => tool_calls_for_step(a.step));
+                        const cycle_tool_sigs = cycle_tool_calls.map((tc) => format_tool_signature(tc.name, tc.args, tool_defs.get(tc.name) || null));
+                        const open_by_default = defaultOpenLatest && c.index === cycles.length;
+                        return (_jsxs("details", { className: `agent-cycle ${status_raw}`, open: open_by_default, children: [_jsxs("summary", { className: "agent-cycle-summary", children: [_jsx("span", { className: `agent-trace-status ${status_raw}`, children: status_text }), _jsx("span", { className: "agent-cycle-label", children: "cycle" }), _jsxs("span", { className: "agent-cycle-index", children: ["#", c.index] }), cycle_tool_sigs.length ? (_jsxs("span", { className: "agent-trace-badges", children: [cycle_tool_sigs.slice(0, 3).map((sig) => (_jsx("span", { className: "run-metric-badge metric-tool", title: sig, children: clamp_inline(sig, 62) }, sig))), cycle_tool_sigs.length > 3 ? _jsxs("span", { className: "run-metric-badge metric-tool", children: ["+", cycle_tool_sigs.length - 3] }) : null] })) : null, _jsx("span", { className: "agent-cycle-spacer" }), think_preview ? _jsx("span", { className: "agent-cycle-preview", children: think_preview }) : null] }), _jsxs("div", { className: "agent-cycle-body", children: [c.think ? _jsx(TraceStepCard, { item: c.think, label: "think", toolDefs: tool_defs }) : null, c.acts.map((a) => (_jsx(TraceStepCard, { item: a, label: "act", toolDefs: tool_defs }, a.id))), _jsx(ObserveCard, { acts: c.acts }), c.others.length ? (_jsxs("div", { className: "agent-cycle-others", children: [_jsx("div", { className: "agent-cycle-others-title", children: "other" }), c.others.map((o) => (_jsx(TraceStepCard, { item: o, label: "other", toolDefs: tool_defs }, o.id)))] })) : null] })] }, c.id));
+                    })] }))] }));
+}

package/dist/JsonViewer.d.ts

@@ -0,0 +1,7 @@
+export declare function JsonViewer(props: {
+    value: unknown;
+    className?: string;
+    collapseAfterDepth?: number;
+    showCopy?: boolean;
+}): React.ReactElement;
+//# sourceMappingURL=JsonViewer.d.ts.map

package/dist/JsonViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonViewer.d.ts","sourceRoot":"","sources":["../src/JsonViewer.tsx"],"names":[],"mappings":"AAkKA,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CA2B7I"}