@abstractframework/monitor-flow 0.1.0 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-# @abstractuic/monitor-flow
+# @abstractframework/monitor-flow
 
 React components to inspect **agent execution cycles** (think → act → observe) from per-effect trace records.
 
@@ -18,8 +18,8 @@ Declared in `monitor-flow/package.json`:
 
 ## Install
 
-- Workspace: add a dependency on `@abstractuic/monitor-flow`
-- npm (once published): `npm i @abstractuic/monitor-flow`
+- Workspace: add a dependency on `@abstractframework/monitor-flow`
+- npm (once published): `npm i @abstractframework/monitor-flow`
 
 ## Expected data
 
@@ -43,7 +43,7 @@ Cycles start whenever `step.effect.type === "llm_call"` (see the cycle builder i
 If you already have `TraceItem[]`, pass it directly:
 
 ```tsx
-import { AgentCyclesPanel } from "@abstractuic/monitor-flow";
+import { AgentCyclesPanel } from "@abstractframework/monitor-flow";
 
 <AgentCyclesPanel items={items} />;
 ```
@@ -51,7 +51,7 @@ import { AgentCyclesPanel } from "@abstractuic/monitor-flow";
 If you have “ledger-like” records, adapt them with `build_agent_trace`:
 
 ```tsx
-import { AgentCyclesPanel, build_agent_trace } from "@abstractuic/monitor-flow";
+import { AgentCyclesPanel, build_agent_trace } from "@abstractframework/monitor-flow";
 
 const { items } = build_agent_trace(ledgerItems, { run_id: "run_123" });
 <AgentCyclesPanel items={items} />;
@@ -59,9 +59,13 @@ const { items } = build_agent_trace(ledgerItems, { run_id: "run_123" });
 
 ## 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`).
+Import CSS in your app entrypoint (recommended):
+
+- `import "@abstractframework/monitor-flow/agent_cycles.css";`
+- `import "@abstractframework/ui-kit/theme.css";` (shared tokens)
 
 ## Related docs
 
 - Getting started: [`docs/getting-started.md`](../docs/getting-started.md)
+- API reference: [`docs/api.md`](../docs/api.md)
 - Architecture: [`docs/architecture.md`](../docs/architecture.md)

package/dist/AgentCyclesPanel.d.ts.map

@@ -1 +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"}
+{"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;AA6hBF,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,CAgKzK"}

package/dist/AgentCyclesPanel.js

@@ -369,12 +369,13 @@ function trace_step_time_label(item) {
         return "";
     }
 }
-function TraceStepCard({ item, label, toolDefs }) {
+function TraceStepCard({ item, label, toolDefs, defaultOpen = false, }) {
     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 [is_open, set_is_open] = useState(Boolean(defaultOpen));
     const payload = payload_of(step);
     const res = result_of(step);
     const errs = error_text_of(step);
@@ -454,7 +455,7 @@ function TraceStepCard({ item, label, toolDefs }) {
     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 })] })] }));
+    return (_jsxs("details", { className: `agent-trace-entry ${status}`, open: is_open, onToggle: (e) => set_is_open(e.currentTarget.open), 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));
@@ -543,6 +544,9 @@ export function AgentCyclesPanel({ items: items_in, subRunId, title, subtitle, o
                         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));
+                        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, defaultOpen: open_by_default }) : 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) => {
+                                                    const open_other_by_default = open_by_default && effect_type_of(o.step) === "answer_user";
+                                                    return _jsx(TraceStepCard, { item: o, label: "other", toolDefs: tool_defs, defaultOpen: open_other_by_default }, o.id);
+                                                })] })) : null] })] }, c.id));
                     })] }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstractframework/monitor-flow",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Shared flow/agent monitoring UI components for AbstractFramework (used by AbstractFlow and AbstractObserver).",
   "type": "module",
   "author": "Laurent-Philippe Albou",
@@ -45,6 +45,8 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "typescript": "^5.3.3"