@tangle-network/charts 0.21.10 → 0.21.11

package/dist/react/flow-waterfall.css

@@ -30,7 +30,8 @@
   /* Root agent neutral, then five agent hues. Each passes 3:1 against both surfaces as a mark. */
   --fw-h0: light-dark(#6c6f84, #a3a6bb);
   --fw-h1: light-dark(#4b55d6, #8f96ff);
-  --fw-h2: light-dark(#c3570f, #f2913f);
+  /* No warm hue among the agents: amber is kept for the slowest and red for failure. */
+  --fw-h2: light-dark(#3d8a52, #6fcb8a);
   --fw-h3: light-dark(#0b87a0, #35c2db);
   --fw-h4: light-dark(#b0418a, #dc72bb);
   --fw-h5: light-dark(#6d44c7, #ab8cf7);
@@ -249,7 +250,7 @@
 /* Muted agents (the default): one quiet tone for every agent bar, its steps and handoffs; the slowest agent alone takes amber, and
    failure keeps its red glyph, so color only ever means state. */
 .fw-root.fw-fill-muted .fw-view-agents [data-tone] { --tone: var(--fw-h0); }
-.fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest], .fw-root.fw-fill-muted .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
+.fw-root:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest], .fw-root:is(.fw-fill-muted, .fw-fill-agent) .fw-view-agents .fw-row[data-slowest] [data-tone] { --tone: var(--fw-amber); }
 .fw-root [data-outcome="ok"], .fw-root [data-outcome="ok"] [data-tone] { --tone: var(--fw-ok); }
 .fw-root [data-outcome="failed"], .fw-root [data-outcome="failed"] [data-tone] { --tone: var(--fw-failed); }
 .fw-root [data-outcome="warn"], .fw-root [data-outcome="warn"] [data-tone] { --tone: var(--fw-amber); }
@@ -260,6 +261,9 @@
 .fw-root .fw-legends .fw-legend { margin: 0; }
 .fw-root .fw-kinds { margin: 0; padding: 0; justify-content: flex-start; color: var(--fw-muted); }
 .fw-root .fw-kinds .fw-swatch-model { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-model); }
+/* With per-agent hues the key shows kind as shade, as the bars do: darker for a model call, lighter for a tool call. */
+.fw-root.fw-fill-agent .fw-kinds .fw-swatch-model { background: color-mix(in oklab, var(--fw-text) 58%, var(--fw-surface)); }
+.fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: color-mix(in oklab, var(--fw-text) 24%, var(--fw-surface)); }
 .fw-root .fw-kinds .fw-swatch-tool { width: 12px; height: 8px; border-radius: 2px; background: var(--fw-kind-tool); }
 .fw-root .fw-kinds .fw-swatch-wait { width: 12px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--fw-text) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-text) 18%, transparent); }
 .fw-root .fw-kinds .fw-swatch-handoff { width: 10px; height: 8px; border-left: 1.5px solid var(--fw-muted); border-bottom: 1.5px solid var(--fw-muted); border-bottom-left-radius: 3px; }
@@ -274,13 +278,14 @@
 .fw-root .fw-view-agents .fw-seg { pointer-events: auto; }
 .fw-root .fw-seg-model { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }
 .fw-root .fw-seg-tool { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }
-/* In the agent view a step's kind owns its color, strong on both themes; the agent's outcome stays on its lane tint, dot and end label. */
-.fw-root .fw-view-agents .fw-seg-model { background: var(--fw-kind-model); box-shadow: none; }
-.fw-root .fw-view-agents .fw-seg-tool { background: var(--fw-kind-tool); box-shadow: none; }
+/* Without per-agent hues (muted or outcome fill), a step's kind owns its color; with them, kind is the darker and lighter shade of the
+   agent's own hue (the rules above), so each agent stays one color. */
+.fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-model { background: var(--fw-kind-model); box-shadow: none; }
+.fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents .fw-seg-tool { background: var(--fw-kind-tool); box-shadow: none; }
 .fw-root .fw-view-agents .fw-seg-tool { container-type: inline-size; justify-content: flex-start; }
-.fw-root .fw-seg-name { padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 11px; line-height: 16px; font-weight: 600; color: light-dark(#fff, #06222b); pointer-events: none; }
+.fw-root .fw-seg-name { padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 16px; font-weight: 600; color: light-dark(#fff, #06222b); pointer-events: none; }
 @container (max-width: 56px) { .fw-root .fw-seg-name { display: none; } }
-.fw-root .fw-view-agents .fw-seg-alt.fw-seg-model, .fw-root .fw-view-agents .fw-seg-alt.fw-seg-tool { filter: brightness(.88); }
+.fw-root:is(.fw-fill-muted, .fw-fill-outcome) .fw-view-agents :is(.fw-seg-alt.fw-seg-model, .fw-seg-alt.fw-seg-tool) { filter: brightness(.88); }
 .fw-root .fw-seg-failed { background: color-mix(in oklab, var(--fw-failed) 18%, var(--fw-surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 70%, transparent); color: var(--fw-failed); }
 /* In the agent view a failed turn draws like any turn; the agent's own failure shows once, by its name and its end label. */
 .fw-root .fw-view-agents .fw-seg-failed { background: var(--dim); box-shadow: inset 0 0 0 1px var(--dim-line); }

package/dist/react/index.d.ts

@@ -399,9 +399,9 @@ interface FlowWaterfallProps {
   markers?: FlowMarker[];
   /** The time the reader moved to, in trace ms; `null` when following live or showing the whole trace. */
   onTimeChange?: (t: number | null) => void;
-  /** What an agent bar's color means. Default: `outcome` when any agent carries one, so bars match the outcome legend, else `muted`.
-   * `muted`: every agent one quiet tone, color spent on state only (red for failure, amber for the slowest). `agent`: each agent its
-   * own hue, shared by its steps and handoffs. `outcome`: the bar takes its outcome's color. */
+  /** What an agent bar's color means. `agent` (default): each agent or family its own muted hue across dot, bar and handoffs, with
+   * model and tool steps as darker and lighter shades of it; the outcome stays on the row dot and amber marks the slowest (blind round
+   * 25: global step hues made agents blur together). `muted`: one quiet tone, color on state only. `outcome`: the bar takes its outcome. */
   agentFill?: 'muted' | 'outcome' | 'agent';
   /** One line beside the title saying what the run was for, such as its goal. */
   description?: string;

package/dist/react/index.js

@@ -4496,7 +4496,7 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	const [laneElement, setLaneElement] = useState(null);
 	const observedTotal = Number.isFinite(trace.totalMs) && trace.totalMs >= 0 ? trace.totalMs : 0;
 	const isLive = live ?? trace.spans.some(spanRunning);
-	const agentFill = fillProp ?? (trace.spans.some((span) => span.kind === "pipeline" && span.outcome) ? "outcome" : "muted");
+	const agentFill = fillProp ?? "agent";
 	const dataEnd = useMemo(() => Math.max(observedTotal, ...trace.spans.map((span) => Number.isFinite(span.endMs) ? span.endMs : 0)), [trace, observedTotal]);
 	const trackPx = Math.max(40, laneWidth - LANE_PAD - Math.min(END_LABEL_GUTTER[view], laneWidth * .3));
 	useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.21.10",
+  "version": "0.21.11",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",