@abstractframework/monitor-flow 0.1.0

package/dist/JsonViewer.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+function is_json_object(value) {
+    return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function is_json_array(value) {
+    return Array.isArray(value);
+}
+function try_parse_json_string(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return value;
+    if ((trimmed.startsWith("{") && trimmed.endsWith("}")) || (trimmed.startsWith("[") && trimmed.endsWith("]"))) {
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return value;
+        }
+    }
+    return value;
+}
+function copy_string_for_json(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+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 Token({ kind, children, }) {
+    return _jsx("span", { className: `json-token ${kind}`, children: children });
+}
+function render_primitive(value) {
+    if (value === null)
+        return _jsx(Token, { kind: "null", children: "null" });
+    if (typeof value === "string")
+        return _jsx(Token, { kind: "string", children: JSON.stringify(value) });
+    if (typeof value === "number")
+        return _jsx(Token, { kind: "number", children: String(value) });
+    if (typeof value === "boolean")
+        return _jsx(Token, { kind: "boolean", children: value ? "true" : "false" });
+    return _jsx(Token, { kind: "string", children: JSON.stringify(String(value)) });
+}
+function count_summary(value) {
+    if (is_json_array(value))
+        return value.length === 1 ? "1 item" : `${value.length} items`;
+    if (is_json_object(value))
+        return Object.keys(value).length === 1 ? "1 key" : `${Object.keys(value).length} keys`;
+    return "";
+}
+function JsonNode(props) {
+    const { label, value, depth, collapse_after_depth, trailing_comma } = props;
+    const indent_px = depth * 14;
+    const is_object = is_json_object(value);
+    const is_array = is_json_array(value);
+    const is_container = is_object || is_array;
+    const default_open = depth < collapse_after_depth;
+    const [open, set_open] = useState(default_open);
+    const prefix = label ? (_jsxs(_Fragment, { children: [_jsx(Token, { kind: "key", children: JSON.stringify(label) }), ": "] })) : null;
+    if (!is_container) {
+        return (_jsxs("div", { className: "json-viewer__line", style: { paddingLeft: indent_px }, children: [prefix, render_primitive(value), trailing_comma ? "," : ""] }));
+    }
+    const container_open = is_array ? "[" : "{";
+    const container_close = is_array ? "]" : "}";
+    const summary_text = count_summary(value);
+    const summary_value = open ? `${container_open}` : `${container_open}…${container_close}${summary_text ? `  (${summary_text})` : ""}`;
+    const entries = is_array
+        ? value.map((v, i) => ({ key: String(i), label: undefined, value: v }))
+        : Object.entries(value).map(([k, v]) => ({ key: k, label: k, value: v }));
+    return (_jsxs("details", { className: "json-viewer__details", open: open, onToggle: (e) => set_open(e.currentTarget.open), children: [_jsxs("summary", { className: "json-viewer__summary", style: { paddingLeft: indent_px }, children: [prefix, _jsx("span", { className: "json-viewer__caret", "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "json-viewer__punct", children: summary_value }), !open && trailing_comma ? _jsx("span", { className: "json-viewer__punct", children: "," }) : null] }), open ? (_jsx("div", { className: "json-viewer__children", children: entries.length === 0 ? (_jsxs("div", { className: "json-viewer__line", style: { paddingLeft: indent_px }, children: [_jsx("span", { className: "json-viewer__punct", children: container_close }), trailing_comma ? "," : ""] })) : (_jsxs(_Fragment, { children: [entries.map((e, idx) => {
+                            const is_last = idx === entries.length - 1;
+                            return (_jsx(JsonNode, { label: e.label, value: e.value, depth: depth + 1, collapse_after_depth: collapse_after_depth, trailing_comma: !is_last }, `${depth}:${label || "root"}:${e.key}`));
+                        }), _jsxs("div", { className: "json-viewer__line", style: { paddingLeft: indent_px }, children: [_jsx("span", { className: "json-viewer__punct", children: container_close }), trailing_comma ? "," : ""] })] })) })) : null] }));
+}
+export function JsonViewer(props) {
+    const { value, className, showCopy = true } = props;
+    const collapse_after_depth = Number.isFinite(props.collapseAfterDepth ?? NaN) ? Number(props.collapseAfterDepth) : 3;
+    const display_value = useMemo(() => {
+        if (typeof value === "string")
+            return try_parse_json_string(value);
+        return value;
+    }, [value]);
+    const copy_value = useMemo(() => copy_string_for_json(value), [value]);
+    const cls = ["json-viewer", "run-details-output", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: cls, children: [showCopy ? (_jsx("div", { className: "json-viewer__toolbar", children: _jsx("button", { type: "button", className: "modal-button json-viewer__copy", onClick: () => void copy_text(copy_value), children: "Copy" }) })) : null, _jsx("div", { className: "json-viewer__tree", role: "tree", "aria-label": "JSON viewer", children: _jsx(JsonNode, { value: display_value, depth: 0, collapse_after_depth: collapse_after_depth, trailing_comma: false }) })] }));
+}

package/dist/Markdown.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function Markdown({ text, className }: {
+    text: string;
+    className?: string;
+}): React.ReactElement;
+//# sourceMappingURL=Markdown.d.ts.map

package/dist/Markdown.d.ts.map

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

package/dist/Markdown.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+function render_inline(text) {
+    const out = [];
+    const s = String(text ?? "");
+    let i = 0;
+    let buf = "";
+    const flush = () => {
+        if (!buf)
+            return;
+        out.push(buf);
+        buf = "";
+    };
+    while (i < s.length) {
+        const ch = s[i];
+        if (ch === "`") {
+            const j = s.indexOf("`", i + 1);
+            if (j !== -1) {
+                flush();
+                out.push(_jsx("code", { children: s.slice(i + 1, j) }, `code:${i}`));
+                i = j + 1;
+                continue;
+            }
+        }
+        if (ch === "*" && s[i + 1] === "*") {
+            const j = s.indexOf("**", i + 2);
+            if (j !== -1) {
+                flush();
+                out.push(_jsx("strong", { children: s.slice(i + 2, j) }, `bold:${i}`));
+                i = j + 2;
+                continue;
+            }
+        }
+        buf += ch;
+        i += 1;
+    }
+    flush();
+    return out;
+}
+function normalize_lines(text) {
+    const s = String(text ?? "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    return s.split("\n");
+}
+export function Markdown({ text, className }) {
+    const lines = normalize_lines(text);
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const raw = lines[i];
+        const line = String(raw ?? "");
+        if (!line.trim()) {
+            i += 1;
+            continue;
+        }
+        if (line.trim().startsWith("```")) {
+            const fence = line.trim();
+            const lang = fence.replace(/```/g, "").trim();
+            const code_lines = [];
+            i += 1;
+            while (i < lines.length && !String(lines[i] ?? "").trim().startsWith("```")) {
+                code_lines.push(String(lines[i] ?? ""));
+                i += 1;
+            }
+            if (i < lines.length)
+                i += 1;
+            const code = code_lines.join("\n");
+            blocks.push(_jsx("pre", { className: "mf-md_pre", children: _jsx("code", { className: lang ? `language-${lang}` : undefined, children: code }) }, `pre:${i}`));
+            continue;
+        }
+        const heading_m = line.match(/^(#{1,3})\s+(.*)$/);
+        if (heading_m) {
+            const level = heading_m[1].length;
+            const content = heading_m[2] || "";
+            const nodes = render_inline(content);
+            if (level === 1)
+                blocks.push(_jsx("h1", { children: nodes }, `h1:${i}`));
+            else if (level === 2)
+                blocks.push(_jsx("h2", { children: nodes }, `h2:${i}`));
+            else
+                blocks.push(_jsx("h3", { children: nodes }, `h3:${i}`));
+            i += 1;
+            continue;
+        }
+        const is_bullet = (s) => {
+            const t = s.trimStart();
+            return t.startsWith("- ") || t.startsWith("* ");
+        };
+        if (is_bullet(line)) {
+            const items = [];
+            while (i < lines.length && is_bullet(String(lines[i] ?? ""))) {
+                const t = String(lines[i] ?? "").trimStart();
+                items.push(t.slice(2));
+                i += 1;
+            }
+            blocks.push(_jsx("ul", { className: "mf-md_ul", children: items.map((it, idx) => (_jsx("li", { children: render_inline(it) }, `li:${i}:${idx}`))) }, `ul:${i}`));
+            continue;
+        }
+        const para_lines = [];
+        while (i < lines.length && String(lines[i] ?? "").trim()) {
+            para_lines.push(String(lines[i] ?? ""));
+            i += 1;
+        }
+        blocks.push(_jsx("p", { className: "mf-md_p", children: para_lines.map((pl, idx) => (_jsxs(React.Fragment, { children: [render_inline(pl), idx < para_lines.length - 1 ? _jsx("br", {}) : null] }, `pl:${i}:${idx}`))) }, `p:${i}`));
+    }
+    const cls = ["mf-md", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: cls, children: blocks });
+}

package/dist/agent_cycles_adapter.d.ts

@@ -0,0 +1,27 @@
+import type { TraceItem } from "./AgentCyclesPanel";
+export type StepRecordLike = {
+    run_id?: string | null;
+    step_id?: string | null;
+    node_id?: string | null;
+    status?: string | null;
+    effect?: {
+        type?: string | null;
+    } | null;
+    started_at?: string | null;
+    ended_at?: string | null;
+};
+export type LedgerRecordItem<T extends StepRecordLike = StepRecordLike> = {
+    run_id: string;
+    cursor: number;
+    record: T;
+};
+export type AgentTraceBuildResult = {
+    run_id: string;
+    node_id: string;
+    items: TraceItem[];
+};
+export declare function build_agent_trace(items: LedgerRecordItem[], opts: {
+    run_id: string;
+    node_id?: string | null;
+}): AgentTraceBuildResult;
+//# sourceMappingURL=agent_cycles_adapter.d.ts.map

package/dist/agent_cycles_adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent_cycles_adapter.d.ts","sourceRoot":"","sources":["../src/agent_cycles_adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,oBAAoB,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,IAAI;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,CAAC;AAqEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,EAAE,EAAE,IAAI,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG,qBAAqB,CAmDrI"}

package/dist/agent_cycles_adapter.js

@@ -0,0 +1,107 @@
+function as_string(value) {
+    return typeof value === "string" ? value.trim() : "";
+}
+function run_id_of(item) {
+    return as_string(item.run_id) || as_string(item.record?.run_id);
+}
+function node_id_of(rec) {
+    return as_string(rec?.node_id);
+}
+const AGENT_STAGE_SUFFIXES = new Set(["reason", "act", "observe", "thought", "think"]);
+function node_group_id(node_id) {
+    const s = as_string(node_id);
+    if (!s.includes("::"))
+        return s;
+    const parts = s.split("::");
+    if (parts.length < 2)
+        return s;
+    const last = String(parts[parts.length - 1] || "").trim().toLowerCase();
+    if (!AGENT_STAGE_SUFFIXES.has(last))
+        return s;
+    return parts.slice(0, -1).join("::");
+}
+function effect_type_of(rec) {
+    return as_string(rec?.effect?.type);
+}
+function status_of(rec) {
+    return as_string(rec?.status) || "unknown";
+}
+function step_id_of(rec) {
+    return as_string(rec?.step_id);
+}
+function ts_of(rec) {
+    return as_string(rec?.ended_at) || as_string(rec?.started_at);
+}
+function pick_best_node_group_id(records) {
+    const llm = new Map();
+    const tools = new Map();
+    for (const r of records) {
+        const nid = node_group_id(node_id_of(r));
+        if (!nid)
+            continue;
+        const t = effect_type_of(r);
+        if (t === "llm_call")
+            llm.set(nid, (llm.get(nid) || 0) + 1);
+        else if (t === "tool_calls")
+            tools.set(nid, (tools.get(nid) || 0) + 1);
+    }
+    const best_of = (m) => {
+        let best = "";
+        let best_count = -1;
+        for (const [k, v] of m) {
+            if (v > best_count) {
+                best = k;
+                best_count = v;
+            }
+        }
+        return best;
+    };
+    return best_of(llm) || best_of(tools) || "";
+}
+export function build_agent_trace(items, opts) {
+    const run_id = as_string(opts.run_id);
+    if (!run_id)
+        return { run_id: "", node_id: "", items: [] };
+    const raw = (Array.isArray(items) ? items : [])
+        .filter((x) => x && x.record && run_id_of(x) === run_id)
+        .map((x) => ({ cursor: x.cursor, record: x.record }))
+        .sort((a, b) => (a.cursor || 0) - (b.cursor || 0));
+    const records = raw.map((x) => x.record);
+    const requested_node_id = node_group_id(as_string(opts.node_id));
+    const node_id = requested_node_id || pick_best_node_group_id(records);
+    const INTERESTING = new Set(["llm_call", "tool_calls", "ask_user", "answer_user"]);
+    let filtered = raw.filter((x) => INTERESTING.has(effect_type_of(x.record)));
+    // Only filter by node_id when explicitly requested by the caller.
+    // Auto-picking a dominant node group is useful for labeling, but filtering can
+    // accidentally drop tool_calls when workflows split LLM/tool nodes.
+    if (requested_node_id)
+        filtered = filtered.filter((x) => node_group_id(node_id_of(x.record)) === requested_node_id);
+    const by_step_id = new Map();
+    const passthrough = [];
+    for (const item of filtered) {
+        const sid = step_id_of(item.record);
+        if (!sid) {
+            passthrough.push(item);
+            continue;
+        }
+        const prev = by_step_id.get(sid);
+        if (!prev || (item.cursor || 0) > (prev.cursor || 0))
+            by_step_id.set(sid, item);
+    }
+    const deduped = [...passthrough, ...Array.from(by_step_id.values())].sort((a, b) => (a.cursor || 0) - (b.cursor || 0));
+    const out = deduped.map((x) => {
+        const rec = x.record;
+        const nodeId = node_id_of(rec) || "(node?)";
+        const ts = ts_of(rec);
+        const sid = step_id_of(rec);
+        return {
+            id: `ledger:${run_id}:${x.cursor}:${sid || ""}`,
+            runId: run_id,
+            nodeId,
+            ts: ts || undefined,
+            status: status_of(rec),
+            step: rec,
+        };
+    });
+    return { run_id, node_id, items: out };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { AgentCyclesPanel, type AgentCyclesPanelProps, type TraceItem, type TraceStep } from "./AgentCyclesPanel";
+export { JsonViewer } from "./JsonViewer";
+export { build_agent_trace, type AgentTraceBuildResult, type LedgerRecordItem, type StepRecordLike } from "./agent_cycles_adapter";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAClH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { AgentCyclesPanel } from "./AgentCyclesPanel";
+export { JsonViewer } from "./JsonViewer";
+export { build_agent_trace } from "./agent_cycles_adapter";

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@abstractframework/monitor-flow",
+  "version": "0.1.0",
+  "description": "Shared flow/agent monitoring UI components for AbstractFramework (used by AbstractFlow and AbstractObserver).",
+  "type": "module",
+  "author": "Laurent-Philippe Albou",
+  "license": "MIT",
+  "keywords": [
+    "abstractframework",
+    "flow",
+    "agent",
+    "observability",
+    "ui",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lpalbou/AbstractUIC.git",
+    "directory": "monitor-flow"
+  },
+  "homepage": "https://github.com/lpalbou/AbstractUIC#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./agent_cycles.css": "./src/agent_cycles.css"
+  },
+  "files": [
+    "dist",
+    "src/agent_cycles.css",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}