@tangle-network/charts 2.0.13 → 2.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/AgentGraphCanvas-B74GN1o6.js +1184 -0
- package/dist/elk-loader-CrLO557o.d.ts +268 -0
- package/dist/flow-trace-DRluIYw8.js +10 -0
- package/dist/flow-waterfall-model-DvrgPLGS.js +4747 -0
- package/dist/graph-style-fealnLLn.js +356 -0
- package/dist/index.js +2 -1
- package/dist/latest-events-iiWwpIck.js +491 -0
- package/dist/motion-DILryczn.js +7 -0
- package/dist/react/agent-graph/index.d.ts +157 -0
- package/dist/react/agent-graph/index.js +1191 -0
- package/dist/react/agent-graph/presentation.d.ts +8 -0
- package/dist/react/agent-graph/presentation.js +3 -0
- package/dist/react/agent-graph.css +1800 -0
- package/dist/react/flow-waterfall.css +10 -13
- package/dist/react/index.js +93 -4821
- package/dist/{flow-trace-k097Ukvs.js → timeline-B7c-cede.js} +1 -10
- package/package.json +37 -7
|
@@ -0,0 +1,268 @@
|
|
|
1
|
+
import { AnimationEvent, CSSProperties, Component, ReactNode, RefObject } from "react";
|
|
2
|
+
import { ColorMode } from "@xyflow/react";
|
|
3
|
+
import { ELK } from "elkjs/lib/elk-api";
|
|
4
|
+
//#region src/react/agent-graph/agent-graph-layout.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Stable desktop geometry for AgentGraph. Spawn edges determine the tree and
|
|
7
|
+
* packed leaf groups; message and delegation edges never move cards.
|
|
8
|
+
* ELK lays out candidate column counts; a row-per-depth fallback keeps the
|
|
9
|
+
* graph usable without that optional peer. Narrow containers use Canvas's list.
|
|
10
|
+
*/
|
|
11
|
+
type AgentGraphStatus = "running" | "waiting" |
|
|
12
|
+
/** Blocked on a person: drawn amber, named in the header. */
|
|
13
|
+
"needs-you" | "succeeded" | "failed" | "stopped" | "idle" | "unknown";
|
|
14
|
+
interface AgentGraphNode {
|
|
15
|
+
id: string;
|
|
16
|
+
/** The agent's name, e.g. "root", "memscale". */
|
|
17
|
+
label: string;
|
|
18
|
+
/** What it was started as, e.g. "manager", "v6-battery". */
|
|
19
|
+
role?: string | null;
|
|
20
|
+
/** The coding harness it runs in, e.g. "opencode", "claude-code", "codex". */
|
|
21
|
+
harness?: string | null;
|
|
22
|
+
/** The model it runs, e.g. "glm-5.3-flash"; its brand mark identifies the card. */
|
|
23
|
+
model?: string | null;
|
|
24
|
+
status: AgentGraphStatus;
|
|
25
|
+
/** What it is doing now, or did last — one line. */
|
|
26
|
+
turn?: string | null;
|
|
27
|
+
costUsd?: number | null;
|
|
28
|
+
tokens?: number | null;
|
|
29
|
+
/** Recorded metrics with units; retained in pointer and keyboard detail cards. */
|
|
30
|
+
facts?: readonly {
|
|
31
|
+
label: string;
|
|
32
|
+
value: string;
|
|
33
|
+
}[];
|
|
34
|
+
/** Live cards: what it is doing now, from its real state; the card carries it as `data-activity` for hosts to style. */
|
|
35
|
+
activity?: AgentGraphActivity | null;
|
|
36
|
+
/** Live cards: its latest tool calls or events, oldest first; the card shows the last three. */
|
|
37
|
+
events?: readonly AgentGraphEvent[] | null;
|
|
38
|
+
/** Recorded activity and full-stream median, when the visible event tail is bounded. Epoch milliseconds. */
|
|
39
|
+
lastActivityAt?: number;
|
|
40
|
+
/** Median interval between recorded events, in milliseconds. */
|
|
41
|
+
medianEventGapMs?: number;
|
|
42
|
+
/** Live cards: the reasoning effort it runs at, e.g. "high". */
|
|
43
|
+
effort?: string | null;
|
|
44
|
+
/** Live cards: epoch ms it was spawned, for its time alive. */
|
|
45
|
+
startedAt?: number | null;
|
|
46
|
+
/** Live cards: commits it shipped. */
|
|
47
|
+
commits?: number | null;
|
|
48
|
+
/** Live cards: a settled agent's result in its compact row, e.g. "rc2 · 14 commits". */
|
|
49
|
+
result?: string | null;
|
|
50
|
+
}
|
|
51
|
+
type AgentGraphActivity = "thinking" | "reading" | "building" | "proving" | "writing" | "waiting" | "restarting";
|
|
52
|
+
interface AgentGraphEvent {
|
|
53
|
+
id: string;
|
|
54
|
+
/** One line, e.g. "bash cargo test -p prover". */
|
|
55
|
+
label: string;
|
|
56
|
+
at?: number;
|
|
57
|
+
}
|
|
58
|
+
type AgentGraphEdgeKind = "spawn" | "message" | "delegation";
|
|
59
|
+
interface AgentGraphEdge {
|
|
60
|
+
from: string;
|
|
61
|
+
to: string;
|
|
62
|
+
kind: AgentGraphEdgeKind;
|
|
63
|
+
/** How many times it happened; a badge shows counts above one. */
|
|
64
|
+
count?: number;
|
|
65
|
+
label?: string;
|
|
66
|
+
}
|
|
67
|
+
type AgentGraphDirection = "TB" | "LR";
|
|
68
|
+
/** Every agent card's size. Fixed, so a status or turn update never moves a card. */
|
|
69
|
+
declare const AGENT_CARD: {
|
|
70
|
+
readonly width: 240;
|
|
71
|
+
readonly height: 88;
|
|
72
|
+
};
|
|
73
|
+
/** A live card: room for the header, a two-line thinking line and the last three events. Fixed for the same reason. */
|
|
74
|
+
declare const LIVE_AGENT_CARD: {
|
|
75
|
+
readonly width: 296;
|
|
76
|
+
readonly height: 164;
|
|
77
|
+
};
|
|
78
|
+
type CardSize = {
|
|
79
|
+
readonly width: number;
|
|
80
|
+
readonly height: number;
|
|
81
|
+
};
|
|
82
|
+
/** A parent with at least this many leaf workers draws them as a grid. */
|
|
83
|
+
declare const GRID_MIN_LEAVES = 4;
|
|
84
|
+
/** The manager stays with its workers instead of reserving an otherwise empty tree layer. */
|
|
85
|
+
declare const FRAME_CAPTION = 80;
|
|
86
|
+
/** A parent's leaf workers, drawn as one grid in one frame. */
|
|
87
|
+
interface AgentLeafGroup {
|
|
88
|
+
id: string;
|
|
89
|
+
parentId: string;
|
|
90
|
+
memberIds: readonly string[];
|
|
91
|
+
}
|
|
92
|
+
/** The run's tree as the layout reads it: valid, de-duplicated spawn edges and
|
|
93
|
+
* the leaf groups they produce. */
|
|
94
|
+
interface AgentTopology {
|
|
95
|
+
/** Changes only when the tree does, never on a status update. */
|
|
96
|
+
key: string;
|
|
97
|
+
agentIds: readonly string[];
|
|
98
|
+
spawns: readonly {
|
|
99
|
+
from: string;
|
|
100
|
+
to: string;
|
|
101
|
+
}[];
|
|
102
|
+
groups: readonly AgentLeafGroup[];
|
|
103
|
+
/** Agent id → the group drawing it, for grouped agents only. */
|
|
104
|
+
groupOf: ReadonlyMap<string, string>;
|
|
105
|
+
}
|
|
106
|
+
declare function buildAgentTopology(nodes: readonly AgentGraphNode[], edges: readonly AgentGraphEdge[]): AgentTopology;
|
|
107
|
+
interface AgentFrame {
|
|
108
|
+
group: AgentLeafGroup;
|
|
109
|
+
x: number;
|
|
110
|
+
y: number;
|
|
111
|
+
width: number;
|
|
112
|
+
height: number;
|
|
113
|
+
collapsed?: boolean;
|
|
114
|
+
}
|
|
115
|
+
interface AgentLayout {
|
|
116
|
+
/** The grid column count this layout was made with. */
|
|
117
|
+
columns: number;
|
|
118
|
+
/** Top-left corner of every agent card. */
|
|
119
|
+
positions: ReadonlyMap<string, {
|
|
120
|
+
x: number;
|
|
121
|
+
y: number;
|
|
122
|
+
}>;
|
|
123
|
+
frames: readonly AgentFrame[];
|
|
124
|
+
width: number;
|
|
125
|
+
height: number;
|
|
126
|
+
}
|
|
127
|
+
/** Lay the run out with every grid `columns` wide. */
|
|
128
|
+
declare function layoutAgents(topology: AgentTopology, direction: AgentGraphDirection, columns: number, card?: CardSize, collapsed?: ReadonlySet<string>): Promise<AgentLayout>;
|
|
129
|
+
//#endregion
|
|
130
|
+
//#region src/react/agent-graph/format.d.ts
|
|
131
|
+
/**
|
|
132
|
+
* Display formatters for the workflow graph's live run-state chips. Pure and
|
|
133
|
+
* dependency-free so they can be unit-tested without rendering the graph.
|
|
134
|
+
*/
|
|
135
|
+
/** Human-readable duration: `850ms`, `4.2s`, `1m30s`. Undefined for an absent,
|
|
136
|
+
* non-finite, or negative input (e.g. clock skew) so the caller renders no
|
|
137
|
+
* chip rather than a confusing `-5ms`. */
|
|
138
|
+
declare function fmtDuration(ms: number | undefined): string | undefined;
|
|
139
|
+
/** Human-readable USD cost: `$0`, `$0.0032` (sub-cent, 4dp), `$1.20`. Undefined
|
|
140
|
+
* for an absent, non-finite, or negative input — a cost is a billing amount, so
|
|
141
|
+
* a negative value is bad data, not a refund to render. */
|
|
142
|
+
declare function fmtCost(usd: number | undefined): string | undefined;
|
|
143
|
+
/** Bound host-supplied preview/error text to a fixed length (with an ellipsis)
|
|
144
|
+
* before it reaches the DOM, so an oversized payload can't bloat the node tree —
|
|
145
|
+
* the card only ever shows a short preview, and CSS clamping is visual only.
|
|
146
|
+
* Truncation is code-point aware: it never slices through a surrogate pair (which
|
|
147
|
+
* would leave a lone surrogate that renders as the replacement character). */
|
|
148
|
+
declare function clampPreview(text: string, max?: number): string;
|
|
149
|
+
/** Human-readable token usage: `1200/340 tok`. Undefined when neither side is a
|
|
150
|
+
* finite, non-negative count, so the caller renders no chip; an invalid side
|
|
151
|
+
* (negative / NaN / absent) shows as 0 rather than leaking `-5/NaN tok`. */
|
|
152
|
+
declare function fmtTokens(input: number | undefined, output: number | undefined): string | undefined;
|
|
153
|
+
/** A token total in a few characters: `840 tok`, `12.4k tok`, `1.2M tok`.
|
|
154
|
+
* Undefined for an absent, non-finite or negative count. */
|
|
155
|
+
declare function fmtTokenTotal(tokens: number | null | undefined): string | undefined;
|
|
156
|
+
declare function fmtEventTime(at: number | undefined, now: number, frozen?: boolean): string;
|
|
157
|
+
//#endregion
|
|
158
|
+
//#region src/react/agent-graph/naming.d.ts
|
|
159
|
+
/**
|
|
160
|
+
* Human-facing naming for workflow nodes. A definition addresses things by
|
|
161
|
+
* machine identifier — an action kind (`agent.run`), a hub action path
|
|
162
|
+
* (`github.pulls.reviews.create`), a profile slug (`pr-reviewer`) — and showing
|
|
163
|
+
* those verbatim on a node makes the graph read like a config file. These turn
|
|
164
|
+
* an identifier into the label a person would say out loud.
|
|
165
|
+
*
|
|
166
|
+
* Pure and dependency-free so the naming rules are unit-testable without the
|
|
167
|
+
* YAML parser or a render.
|
|
168
|
+
*/
|
|
169
|
+
/** How the first word of a humanized identifier is cased. An initialism is
|
|
170
|
+
* ALWAYS upper-cased whichever is chosen — that is the whole point of the table
|
|
171
|
+
* above, and `.toLowerCase()`ing the result afterwards silently undoes it
|
|
172
|
+
* ("List API keys" → "list api keys"). */
|
|
173
|
+
type LeadCase = "sentence" | "lower" | "title";
|
|
174
|
+
/**
|
|
175
|
+
* Humanize a machine identifier: `pr-reviewer` → "PR reviewer", `sandbox.spawn`
|
|
176
|
+
* → "Sandbox spawn", `postMessage` → "Post message". Known initialisms are
|
|
177
|
+
* upper-cased wherever they appear; `lead` picks the case of the rest.
|
|
178
|
+
*
|
|
179
|
+
* - `sentence` (default): "Create issue comment" — a label or a title.
|
|
180
|
+
* - `lower`: "create issue comment" — a fragment that sits INSIDE a phrase
|
|
181
|
+
* ("On pull request"), where a capital would read as a new sentence. An
|
|
182
|
+
* initialism still wins: `ci_run_completed` → "CI run completed", never
|
|
183
|
+
* "cI run completed".
|
|
184
|
+
* - `title`: "Google Sheets" — a brand/proper name.
|
|
185
|
+
*
|
|
186
|
+
* An identifier that carries no word characters is returned verbatim rather than
|
|
187
|
+
* blanked.
|
|
188
|
+
*/
|
|
189
|
+
declare function humanizeIdentifier(id: string, lead?: LeadCase): string;
|
|
190
|
+
/** A model slug without its provider prefix (`anthropic/claude-sonnet-5` →
|
|
191
|
+
* `claude-sonnet-5`) — the vendor is noise on a card whose width is the scarce
|
|
192
|
+
* resource, and the full slug stays in the node's config for the detail view. */
|
|
193
|
+
declare function shortModel(model: string): string;
|
|
194
|
+
/** The parts of a hub action path (`<provider>.<resource…>.<operation>`). */
|
|
195
|
+
interface ActionPathParts {
|
|
196
|
+
/** The connector the action runs against (`github`). */
|
|
197
|
+
provider: string;
|
|
198
|
+
/** The trailing verb (`create`). */
|
|
199
|
+
operation: string;
|
|
200
|
+
/** Everything between provider and operation (`pulls.reviews`), when present —
|
|
201
|
+
* a two-segment path (`slack.postMessage`) has no resource. */
|
|
202
|
+
resource?: string;
|
|
203
|
+
}
|
|
204
|
+
/** Split a hub action path into provider / resource / operation. Null when the
|
|
205
|
+
* value isn't a dotted path (a `${…}` expression, or a bare word), so callers
|
|
206
|
+
* fall back to showing it verbatim instead of inventing structure. */
|
|
207
|
+
declare function parseActionPath(path: string): ActionPathParts | null;
|
|
208
|
+
/**
|
|
209
|
+
* The operation label for an action path, in n8n's `operation: resource` shape:
|
|
210
|
+
* `github.pulls.reviews.create` → "create: pulls.reviews", `slack.postMessage`
|
|
211
|
+
* → "post message". The provider names the node itself (its title + logo), so
|
|
212
|
+
* it is deliberately absent here. A path we can't split is shown verbatim.
|
|
213
|
+
*/
|
|
214
|
+
declare function actionPathLabel(path: string): string;
|
|
215
|
+
//#endregion
|
|
216
|
+
//#region src/react/agent-graph/run-ui-state.d.ts
|
|
217
|
+
declare function useRunNow(fixed?: number): number;
|
|
218
|
+
declare function useMotionAllowed(): boolean;
|
|
219
|
+
declare function tokenMilliseconds(token: string, element?: Element | null): number;
|
|
220
|
+
declare const ambientStyle: CSSProperties;
|
|
221
|
+
/** The document timeline is the page's epoch, including marks mounted later. */
|
|
222
|
+
declare function syncAmbient(event: AnimationEvent<HTMLElement | SVGElement>): void;
|
|
223
|
+
declare function activityTiming(agent: Pick<AgentGraphNode, "events" | "lastActivityAt" | "medianEventGapMs">): {
|
|
224
|
+
lastActivityAt: number | undefined;
|
|
225
|
+
medianEventGapMs: number;
|
|
226
|
+
};
|
|
227
|
+
declare function agentQuietActivity(agent: AgentGraphNode, now: number): {
|
|
228
|
+
quietMs: number;
|
|
229
|
+
label: string;
|
|
230
|
+
} | null;
|
|
231
|
+
/** Attention is finite and state changes work without animation completion. */
|
|
232
|
+
declare function useAttention(ref: RefObject<HTMLElement | null>, status: string): void;
|
|
233
|
+
//#endregion
|
|
234
|
+
//#region src/react/agent-graph/canvas-theme.d.ts
|
|
235
|
+
/** Motion is opt-OUT, so it is only used where the reader's preference can be
|
|
236
|
+
* read and says nothing against it. Somewhere without `matchMedia` cannot say
|
|
237
|
+
* a reader tolerates movement, so it gets none. */
|
|
238
|
+
declare function motionAllowed(): boolean;
|
|
239
|
+
declare function useColorMode(wrapperRef: RefObject<HTMLDivElement | null>, hasGraph: boolean): ColorMode;
|
|
240
|
+
/** Selection preserves the status border and stays quieter than failure or a response request. */
|
|
241
|
+
declare const SELECTION_OUTLINE: CSSProperties;
|
|
242
|
+
//#endregion
|
|
243
|
+
//#region src/react/agent-graph/graph-style.d.ts
|
|
244
|
+
declare const RESTING_SHADOW = "inset 0 1px 0 hsl(var(--foreground) / 0.06), 0 1px 3px hsl(var(--shadow-color) / 0.08)";
|
|
245
|
+
declare const RESTING_BORDER = "hsl(var(--foreground) / 0.14)";
|
|
246
|
+
declare function edgeColor(status: string | undefined): string;
|
|
247
|
+
//#endregion
|
|
248
|
+
//#region src/react/agent-graph/graph-lazy.d.ts
|
|
249
|
+
declare function retryImport<T>(factory: () => Promise<T>, retries?: number, delayMs?: number): Promise<T>;
|
|
250
|
+
declare class GraphErrorBoundary extends Component<{
|
|
251
|
+
fallback: ReactNode;
|
|
252
|
+
children: ReactNode;
|
|
253
|
+
}, {
|
|
254
|
+
hasError: boolean;
|
|
255
|
+
}> {
|
|
256
|
+
state: {
|
|
257
|
+
hasError: boolean;
|
|
258
|
+
};
|
|
259
|
+
static getDerivedStateFromError(): {
|
|
260
|
+
hasError: boolean;
|
|
261
|
+
};
|
|
262
|
+
render(): ReactNode;
|
|
263
|
+
}
|
|
264
|
+
//#endregion
|
|
265
|
+
//#region src/react/agent-graph/elk-loader.d.ts
|
|
266
|
+
declare function loadElk(): Promise<ELK | null>;
|
|
267
|
+
//#endregion
|
|
268
|
+
export { AGENT_CARD as A, AgentLeafGroup as B, shortModel as C, fmtEventTime as D, fmtDuration as E, AgentGraphEdgeKind as F, LIVE_AGENT_CARD as G, CardSize as H, AgentGraphEvent as I, buildAgentTopology as K, AgentGraphNode as L, AgentGraphActivity as M, AgentGraphDirection as N, fmtTokenTotal as O, AgentGraphEdge as P, AgentGraphStatus as R, parseActionPath as S, fmtCost as T, FRAME_CAPTION as U, AgentTopology as V, GRID_MIN_LEAVES as W, useRunNow as _, RESTING_SHADOW as a, actionPathLabel as b, motionAllowed as c, agentQuietActivity as d, ambientStyle as f, useMotionAllowed as g, useAttention as h, RESTING_BORDER as i, AgentFrame as j, fmtTokens as k, useColorMode as l, tokenMilliseconds as m, GraphErrorBoundary as n, edgeColor as o, syncAmbient as p, layoutAgents as q, retryImport as r, SELECTION_OUTLINE as s, loadElk as t, activityTiming as u, ActionPathParts as v, clampPreview as w, humanizeIdentifier as x, LeadCase as y, AgentLayout as z };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
//#region src/flow-trace.ts
|
|
2
|
+
/** Internal quantity boundaries shared by construction, aggregation and presentation. */
|
|
3
|
+
const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
|
|
4
|
+
const reportedCount = (value) => typeof value === "number" && Number.isSafeInteger(value) && value >= 0 ? value : void 0;
|
|
5
|
+
function sumReportedCounts(values) {
|
|
6
|
+
if (!values.length || values.some((value) => reportedCount(value) === void 0)) return void 0;
|
|
7
|
+
return reportedCount(values.reduce((sum, value) => sum + value, 0));
|
|
8
|
+
}
|
|
9
|
+
//#endregion
|
|
10
|
+
export { reportedCount as n, sumReportedCounts as r, finiteNumber as t };
|