@tangle-network/charts 2.0.13 → 2.0.15

package/dist/graph-style-fealnLLn.js

@@ -0,0 +1,356 @@
+import { D as statusMeta, m as quietGap } from "./flow-waterfall-model-DvrgPLGS.js";
+import { Component, useEffect, useLayoutEffect, useState, useSyncExternalStore } from "react";
+//#region src/react/agent-graph/format.ts
+/**
+* Display formatters for the workflow graph's live run-state chips. Pure and
+* dependency-free so they can be unit-tested without rendering the graph.
+*/
+/** Human-readable duration: `850ms`, `4.2s`, `1m30s`. Undefined for an absent,
+*  non-finite, or negative input (e.g. clock skew) so the caller renders no
+*  chip rather than a confusing `-5ms`. */
+function fmtDuration(ms) {
+	if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return void 0;
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	const s = ms / 1e3;
+	if (s < 60) return `${s.toFixed(1)}s`;
+	const totalSeconds = Math.round(s);
+	return `${Math.floor(totalSeconds / 60)}m${totalSeconds % 60}s`;
+}
+/** Human-readable USD cost: `$0`, `$0.0032` (sub-cent, 4dp), `$1.20`. Undefined
+*  for an absent, non-finite, or negative input — a cost is a billing amount, so
+*  a negative value is bad data, not a refund to render. */
+function fmtCost(usd) {
+	if (usd === void 0 || !Number.isFinite(usd) || usd < 0) return void 0;
+	if (usd === 0) return "$0";
+	return usd < .01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
+}
+/** Bound host-supplied preview/error text to a fixed length (with an ellipsis)
+*  before it reaches the DOM, so an oversized payload can't bloat the node tree —
+*  the card only ever shows a short preview, and CSS clamping is visual only.
+*  Truncation is code-point aware: it never slices through a surrogate pair (which
+*  would leave a lone surrogate that renders as the replacement character). */
+function clampPreview(text, max = 200) {
+	if (text.length <= max) return text;
+	const lastCode = text.charCodeAt(max - 1);
+	const end = lastCode >= 55296 && lastCode <= 56319 ? max - 1 : max;
+	return `${text.slice(0, end)}…`;
+}
+/** Human-readable token usage: `1200/340 tok`. Undefined when neither side is a
+*  finite, non-negative count, so the caller renders no chip; an invalid side
+*  (negative / NaN / absent) shows as 0 rather than leaking `-5/NaN tok`. */
+function fmtTokens(input, output) {
+	const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
+	const i = valid(input);
+	const o = valid(output);
+	if (i === void 0 && o === void 0) return void 0;
+	return `${i ?? 0}/${o ?? 0} tok`;
+}
+/** A token total in a few characters: `840 tok`, `12.4k tok`, `1.2M tok`.
+*  Undefined for an absent, non-finite or negative count. */
+function fmtTokenTotal(tokens) {
+	if (tokens == null || !Number.isFinite(tokens) || tokens < 0) return void 0;
+	if (tokens < 1e3) return `${Math.round(tokens)} tok`;
+	if (tokens < 1e6) return `${(tokens / 1e3).toFixed(tokens < 1e4 ? 1 : 0)}k tok`;
+	return `${(tokens / 1e6).toFixed(1)}M tok`;
+}
+function fmtEventTime(at, now, frozen = false) {
+	if (at == null || !Number.isFinite(at)) return "—";
+	if (frozen) return new Date(at).toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	const seconds = Math.max(0, Math.floor((now - at) / 1e3));
+	return seconds < 5 ? "now" : seconds < 60 ? `${seconds}s` : seconds < 3600 ? `${Math.floor(seconds / 60)}m` : `${Math.floor(seconds / 3600)}h`;
+}
+//#endregion
+//#region src/react/agent-graph/run-ui-state.ts
+const listeners = /* @__PURE__ */ new Set();
+let clock = Date.now();
+let timer;
+function tick() {
+	clock = Date.now();
+	for (const listener of listeners) listener();
+	timer = setTimeout(tick, 1e3 - Date.now() % 1e3);
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	if (listeners.size === 1) tick();
+	return () => {
+		listeners.delete(listener);
+		if (!listeners.size) clearTimeout(timer);
+	};
+}
+const noSubscribe = () => () => {};
+function useRunNow(fixed) {
+	const now = useSyncExternalStore(fixed === void 0 ? subscribe : noSubscribe, () => fixed ?? clock, () => fixed ?? 0);
+	return fixed ?? now;
+}
+const motionQuery = () => typeof matchMedia === "undefined" ? null : matchMedia("(prefers-reduced-motion: reduce)");
+const subscribeMotion = (listener) => {
+	const query = motionQuery();
+	query?.addEventListener("change", listener);
+	return () => query?.removeEventListener("change", listener);
+};
+function useMotionAllowed() {
+	return useSyncExternalStore(subscribeMotion, () => motionQuery()?.matches === false, () => false);
+}
+function tokenMilliseconds(token, element) {
+	if (typeof document === "undefined") return 0;
+	const value = getComputedStyle(element ?? document.documentElement).getPropertyValue(token).trim();
+	return (parseFloat(value) || 0) * (value.endsWith("ms") ? 1 : 1e3);
+}
+const ambientStyle = { animation: "tangle-breathe var(--motion-ambient) infinite" };
+/** The document timeline is the page's epoch, including marks mounted later. */
+function syncAmbient(event) {
+	for (const animation of event.currentTarget.getAnimations()) if (animation.animationName === "tangle-breathe") animation.startTime = 0;
+}
+function activityTiming(agent) {
+	const times = Number.isFinite(agent.lastActivityAt) && Number.isFinite(agent.medianEventGapMs) && agent.medianEventGapMs >= 0 ? [] : (agent.events ?? []).flatMap((e) => e.at != null && Number.isFinite(e.at) ? [e.at] : []).sort((a, b) => a - b);
+	const last = Number.isFinite(agent.lastActivityAt) ? agent.lastActivityAt : times.at(-1);
+	const gaps = times.slice(1).map((time, i) => time - times[i]).sort((a, b) => a - b);
+	const middle = Math.floor(gaps.length / 2);
+	return {
+		lastActivityAt: last,
+		medianEventGapMs: Number.isFinite(agent.medianEventGapMs) && agent.medianEventGapMs >= 0 ? agent.medianEventGapMs : gaps.length ? gaps.length % 2 ? gaps[middle] : (gaps[middle - 1] + gaps[middle]) / 2 : 0
+	};
+}
+function agentQuietActivity(agent, now) {
+	if (agent.status !== "running") return null;
+	const { lastActivityAt, medianEventGapMs } = activityTiming(agent);
+	if (lastActivityAt == null || !Number.isFinite(lastActivityAt)) return null;
+	const { quietMs, quiet } = quietGap(lastActivityAt, medianEventGapMs, now);
+	return quiet ? {
+		quietMs,
+		label: `Quiet ${Math.floor(quietMs / 6e4)}m`
+	} : null;
+}
+/** Attention is finite and state changes work without animation completion. */
+function useAttention(ref, status) {
+	const allowed = useMotionAllowed();
+	useEffect(() => {
+		const element = ref.current;
+		if (!element || !allowed || status !== "needs-you" && status !== "failed") return;
+		const token = statusMeta(status).token;
+		const duration = tokenMilliseconds("--duration-ambient", element) * (status === "needs-you" ? .45 : .3);
+		element.dataset.attn = status;
+		const shadow = getComputedStyle(element).boxShadow;
+		const resting = shadow === "none" ? "" : `, ${shadow}`;
+		const animation = element.animate([{ boxShadow: `0 0 0 0 color-mix(in srgb, var(${token}) 40%, transparent)${resting}` }, { boxShadow: `0 0 0 6px transparent${resting}` }], {
+			duration,
+			iterations: status === "needs-you" ? 2 : 1,
+			easing: getComputedStyle(element).getPropertyValue("--ease-exit").trim() || "ease-out"
+		});
+		const end = setTimeout(() => {
+			delete element.dataset.attn;
+		}, duration * (status === "needs-you" ? 2 : 1));
+		return () => {
+			animation.cancel();
+			clearTimeout(end);
+			delete element.dataset.attn;
+		};
+	}, [
+		ref,
+		status,
+		allowed
+	]);
+}
+//#endregion
+//#region src/react/agent-graph/graph-lazy.tsx
+function retryImport(factory, retries = 2, delayMs = 350) {
+	return factory().catch((err) => {
+		if (retries <= 0) throw err;
+		return new Promise((resolve, reject) => {
+			setTimeout(() => retryImport(factory, retries - 1, delayMs).then(resolve, reject), delayMs);
+		});
+	});
+}
+var GraphErrorBoundary = class extends Component {
+	state = { hasError: false };
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	render() {
+		return this.state.hasError ? this.props.fallback : this.props.children;
+	}
+};
+//#endregion
+//#region src/react/agent-graph/elk-loader.ts
+/** One ELK instance per page. `null` once loading failed, so a host without
+*  the peer pays for one failed import, not one per render. */
+let elkInstance;
+function loadElk() {
+	elkInstance ??= import("elkjs/lib/elk.bundled.js").then((mod) => {
+		const Elk = mod.default;
+		return new Elk();
+	}).catch(() => null);
+	return elkInstance;
+}
+//#endregion
+//#region src/react/agent-graph/naming.ts
+/**
+* Human-facing naming for workflow nodes. A definition addresses things by
+* machine identifier — an action kind (`agent.run`), a hub action path
+* (`github.pulls.reviews.create`), a profile slug (`pr-reviewer`) — and showing
+* those verbatim on a node makes the graph read like a config file. These turn
+* an identifier into the label a person would say out loud.
+*
+* Pure and dependency-free so the naming rules are unit-testable without the
+* YAML parser or a render.
+*/
+/** Identifier fragments that read as an initialism, so they are upper-cased
+*  whole rather than sentence-cased into "Pr" / "Api". */
+const ACRONYMS = /* @__PURE__ */ new Set([
+	"ai",
+	"api",
+	"cd",
+	"ci",
+	"cli",
+	"cpu",
+	"css",
+	"csv",
+	"db",
+	"dns",
+	"gpu",
+	"html",
+	"http",
+	"https",
+	"id",
+	"io",
+	"ip",
+	"json",
+	"llm",
+	"mcp",
+	"ml",
+	"pr",
+	"qa",
+	"sdk",
+	"sla",
+	"sql",
+	"ssh",
+	"ui",
+	"url",
+	"uuid",
+	"vm",
+	"yaml"
+]);
+/** Split a machine identifier into its words, on separators and camelCase humps. */
+function words(id) {
+	return id.replace(/[._\-/]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").trim().split(/\s+/).filter(Boolean);
+}
+/**
+* Humanize a machine identifier: `pr-reviewer` → "PR reviewer", `sandbox.spawn`
+* → "Sandbox spawn", `postMessage` → "Post message". Known initialisms are
+* upper-cased wherever they appear; `lead` picks the case of the rest.
+*
+*  - `sentence` (default): "Create issue comment" — a label or a title.
+*  - `lower`: "create issue comment" — a fragment that sits INSIDE a phrase
+*    ("On pull request"), where a capital would read as a new sentence. An
+*    initialism still wins: `ci_run_completed` → "CI run completed", never
+*    "cI run completed".
+*  - `title`: "Google Sheets" — a brand/proper name.
+*
+* An identifier that carries no word characters is returned verbatim rather than
+* blanked.
+*/
+function humanizeIdentifier(id, lead = "sentence") {
+	const parts = words(id);
+	if (parts.length === 0) return id;
+	return parts.map((word, i) => {
+		const lower = word.toLowerCase();
+		if (ACRONYMS.has(lower)) return lower.toUpperCase();
+		const capitalized = lower.charAt(0).toUpperCase() + lower.slice(1);
+		if (lead === "title") return capitalized;
+		if (i > 0) return lower;
+		return lead === "lower" ? lower : capitalized;
+	}).join(" ");
+}
+/** A model slug without its provider prefix (`anthropic/claude-sonnet-5` →
+*  `claude-sonnet-5`) — the vendor is noise on a card whose width is the scarce
+*  resource, and the full slug stays in the node's config for the detail view. */
+function shortModel(model) {
+	const slash = model.lastIndexOf("/");
+	return slash === -1 ? model : model.slice(slash + 1);
+}
+/** The charset a hub action path is made of (mirrors the server's path schema:
+*  `<provider>.<action…>`, letters/digits/`_`/`-` per segment). A value that
+*  isn't one — most importantly a `${…}` mapping expression, which also contains
+*  dots — must not be split into a bogus provider (whose brand logo we'd then go
+*  and fetch). */
+const ACTION_PATH = /^[a-z0-9_-]+(\.[a-z0-9_-]+)+$/i;
+/** Split a hub action path into provider / resource / operation. Null when the
+*  value isn't a dotted path (a `${…}` expression, or a bare word), so callers
+*  fall back to showing it verbatim instead of inventing structure. */
+function parseActionPath(path) {
+	if (!ACTION_PATH.test(path.trim())) return null;
+	const [provider, ...rest] = path.trim().split(".");
+	return {
+		provider,
+		operation: rest[rest.length - 1],
+		resource: rest.length > 1 ? rest.slice(0, -1).join(".") : void 0
+	};
+}
+/**
+* The operation label for an action path, in n8n's `operation: resource` shape:
+* `github.pulls.reviews.create` → "create: pulls.reviews", `slack.postMessage`
+* → "post message". The provider names the node itself (its title + logo), so
+* it is deliberately absent here. A path we can't split is shown verbatim.
+*/
+function actionPathLabel(path) {
+	const parts = parseActionPath(path);
+	if (!parts) return path;
+	const operation = humanizeIdentifier(parts.operation, "lower");
+	return parts.resource ? `${operation}: ${parts.resource}` : operation;
+}
+//#endregion
+//#region src/react/agent-graph/canvas-theme.ts
+/** Motion is opt-OUT, so it is only used where the reader's preference can be
+*  read and says nothing against it. Somewhere without `matchMedia` cannot say
+*  a reader tolerates movement, so it gets none. */
+function motionAllowed() {
+	return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === false;
+}
+/** React Flow adds its own .light/.dark class below the graph wrapper. Read
+* that wrapper's inherited scheme so a nested WorkspaceLayout theme wins over
+* the page root without React Flow's class influencing the answer. */
+function currentColorMode(anchor) {
+	if (typeof document === "undefined" || typeof window === "undefined") return "light";
+	const scheme = window.getComputedStyle(anchor ?? document.documentElement).colorScheme;
+	if (scheme.startsWith("dark")) return "dark";
+	if (scheme.startsWith("light")) return "light";
+	return (anchor ?? document.documentElement).closest(".dark") ? "dark" : "light";
+}
+function useColorMode(wrapperRef, hasGraph) {
+	const [mode, setMode] = useState(() => currentColorMode(null));
+	useLayoutEffect(() => {
+		const anchor = hasGraph ? wrapperRef.current : null;
+		const update = () => setMode(currentColorMode(anchor));
+		update();
+		const observer = new MutationObserver(update);
+		for (let el = anchor ?? document.documentElement; el; el = el.parentElement) observer.observe(el, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"data-theme",
+				"data-sandbox-theme",
+				"style"
+			]
+		});
+		return () => observer.disconnect();
+	}, [wrapperRef, hasGraph]);
+	return mode;
+}
+/** Selection preserves the status border and stays quieter than failure or a response request. */
+const SELECTION_OUTLINE = {
+	outline: "1px solid hsl(var(--foreground) / .45)",
+	outlineOffset: 2
+};
+//#endregion
+//#region src/react/agent-graph/graph-style.ts
+const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.08)";
+const RESTING_BORDER = "hsl(var(--foreground) / 0.14)";
+function edgeColor(status) {
+	return status === "failed" || status === "waiting" ? `var(${statusMeta(status === "waiting" ? "needs-you" : "failed").token})` : "color-mix(in srgb, hsl(var(--muted-foreground)) 80%, transparent)";
+}
+//#endregion
+export { fmtCost as C, fmtTokens as D, fmtTokenTotal as E, clampPreview as S, fmtEventTime as T, syncAmbient as _, motionAllowed as a, useMotionAllowed as b, humanizeIdentifier as c, loadElk as d, GraphErrorBoundary as f, ambientStyle as g, agentQuietActivity as h, SELECTION_OUTLINE as i, parseActionPath as l, activityTiming as m, RESTING_SHADOW as n, useColorMode as o, retryImport as p, edgeColor as r, actionPathLabel as s, RESTING_BORDER as t, shortModel as u, tokenMilliseconds as v, fmtDuration as w, useRunNow as x, useAttention as y };

package/dist/index.js

@@ -1,4 +1,5 @@
-import { $ as rect, A as intervalGap, B as tierSummary, C as isRefusal, D as drawable, E as costText, F as pts, G as MARKER_SHAPES, H as usd, I as rateDataGap, K as circle, L as rateIntervalGap, M as kn, N as pct, O as duration, P as perPass, Q as polyline, R as rateOrder, T as TIERS_BEST_FIRST, U as usdTick, V as tierTotal, W as table, X as line, Y as hbar, Z as markerPath, _ as drawMarks, a as CHECKER_HUES, at as esc, b as groupRowHeight, c as OUTCOME_COLORS, ct as plural, d as checkerColor, dt as wrap, et as svgRoot, f as EVENTS_READ, g as drawGroups, h as drawBands, i as timeline, it as capitalize, j as intervalName, k as estimateNote, l as OUTCOME_ORDER, lt as textBlock, m as MARK_VERDICTS, n as reportedCount, nt as titled, o as ENDING_COLORS, ot as fitLines, q as hatch, r as sumReportedCounts, rt as wideWidth, s as ENDING_ORDER, st as listJoin, t as finiteNumber, tt as text, u as checkerClass, ut as textWidth, v as eventsGap, w as METHOD_NAME, x as markLabelRows, y as eventsTable, z as tierAtLeast } from "./flow-trace-k097Ukvs.js";
+import { $ as titled, A as pct, B as usdTick, C as costText, D as intervalGap, E as estimateNote, F as rateOrder, H as MARKER_SHAPES, I as tierAtLeast, J as markerPath, K as hbar, L as tierSummary, M as pts, N as rateDataGap, O as intervalName, P as rateIntervalGap, Q as text, R as tierTotal, S as TIERS_BEST_FIRST, T as duration, U as circle, V as table, W as hatch, X as rect, Y as polyline, Z as svgRoot, _ as groupRowHeight, a as OUTCOME_COLORS, at as plural, b as isRefusal, c as checkerColor, ct as wrap, d as MARK_VERDICTS, et as wideWidth, f as drawBands, g as eventsTable, h as eventsGap, i as ENDING_ORDER, it as listJoin, j as perPass, k as kn, l as EVENTS_READ, m as drawMarks, n as CHECKER_HUES, nt as esc, o as OUTCOME_ORDER, ot as textBlock, p as drawGroups, q as line, r as ENDING_COLORS, rt as fitLines, s as checkerClass, st as textWidth, t as timeline, tt as capitalize, v as markLabelRows, w as drawable, x as METHOD_NAME, z as usd } from "./timeline-B7c-cede.js";
+import { n as reportedCount, r as sumReportedCounts, t as finiteNumber } from "./flow-trace-DRluIYw8.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.