@tangle-network/charts 0.21.18 → 0.21.20

package/dist/react/flow-waterfall.css

@@ -272,8 +272,8 @@
 .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-fill-agent .fw-kinds .fw-swatch-model { background: light-dark(oklch(0.50 0 0), oklch(0.72 0 0)); }
+.fw-root.fw-fill-agent .fw-kinds .fw-swatch-tool { background: light-dark(oklch(0.80 0 0), oklch(0.46 0 0)); }
 .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; }
@@ -287,33 +287,34 @@
 .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); }
-/* 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. */
+/* Without per-agent hues (muted or outcome fill), a step's kind owns its color; with them, kind is a fixed lightness on the agent's own
+   hue (the rules below), 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; }
-/* Per-agent hues at full saturation (blind round 26: muted per-agent bars "blur together", "wash out on white"): kind is a darker or
-   lighter step of the agent's own saturated hue; waiting stays the only pale fill. Light theme sits one step softer (round 27: the
-   saturated light bars read "heavy"). */
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(color-mix(in oklab, var(--tone) 88%, var(--fw-text)), var(--tone)); box-shadow: none; }
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-tool { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: none; }
-/* A failed turn is still the agent's work: it keeps the agent's saturated hue, and the red cross on the ending turn says it failed. */
-.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { background: light-dark(color-mix(in oklab, var(--tone) 84%, var(--fw-surface)), color-mix(in oklab, var(--tone) 72%, var(--fw-text))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
-.fw-root .fw-view-agents .fw-seg { container-type: inline-size; justify-content: flex-start; gap: 4px; white-space: nowrap; font-size: 12px; line-height: 16px; color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+/* Per-agent hues: a step's kind is a fixed lightness on its agent's hue, the same for every hue, so kind reads by lightness
+   against the surface and never contradicts the key (critique P0 #4: dark tool steps were lighter than model steps, and the
+   step varied with hue). Model is the stronger step on either surface; chroma is capped at 0.10, never raised, so a neutral (the root's grey) stays
+   neutral instead of taking a red cast from its undefined hue. */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-model { background: light-dark(oklch(from var(--tone) 0.50 min(c, 0.10) h), oklch(from var(--tone) 0.72 min(c, 0.10) h)); box-shadow: none; }
+.fw-root.fw-fill-agent .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { background: light-dark(oklch(from var(--tone) 0.80 min(c, 0.10) h), oklch(from var(--tone) 0.46 min(c, 0.10) h)); box-shadow: none; }
+/* A failed turn is still the agent's work: it keeps the agent's hue, and the red cross on the ending turn says it failed. */
+.fw-root.fw-fill-agent .fw-view-agents .fw-seg-failed { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fw-failed) 55%, transparent); }
+.fw-root .fw-view-agents .fw-seg { container-type: inline-size; justify-content: flex-start; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--fw-seg-ink); }
+/* Label ink holds 4.5:1 on its fill: the model step is dark on light and bright on dark, the tool step the reverse, so ink flips
+   with it: page-light on L 0.50 and L 0.46, page-dark on L 0.72 and L 0.80. */
+.fw-root .fw-view-agents .fw-seg-model { --fw-seg-ink: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents :is(.fw-seg-tool, .fw-seg-failed) { --fw-seg-ink: var(--fw-text); }
 .fw-root .fw-view-agents .fw-seg > * { pointer-events: none; }
-/* The inset is the first part's margin, not the segment's padding, so a short step keeps its true width (padding set a 12 px floor). */
-.fw-root .fw-view-agents .fw-seg > :first-child { margin-left: 6px; }
-.fw-root .fw-seg-icon { display: inline-flex; flex: none; }
+/* One line, 6 px in from each end; a part that does not fit whole wraps to the hidden second line, so trailing parts drop first. */
+.fw-root .fw-seg-label { flex: 1; min-width: 0; height: 16px; margin: 0 6px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; overflow: hidden; }
+.fw-root .fw-seg-label > * { flex: none; height: 16px; display: inline-flex; align-items: center; }
 .fw-root .fw-seg-icon svg { width: 12px; height: 12px; stroke-width: 1.75; }
-.fw-root .fw-seg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
-.fw-root .fw-seg-chip { flex: none; padding: 0 4px; border-radius: var(--radius-pill); background: color-mix(in oklab, currentColor 24%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; }
-.fw-root .fw-seg-meta { flex: none; opacity: .85; font-variant-numeric: tabular-nums; }
-/* A narrowing step drops its cost first, then its duration, then its name and count, then its icon. */
-@container (max-width: 180px) { .fw-root .fw-seg-cost { display: none; } }
-@container (max-width: 96px) { .fw-root .fw-seg-meta { display: none; } }
-@container (max-width: 56px) { .fw-root :is(.fw-seg-name, .fw-seg-chip) { display: none; } }
-@container (max-width: 24px) { .fw-root :is(.fw-seg-icon, .fw-view-agents .fw-seg .fw-glyph) { display: none; } }
+.fw-root .fw-seg-name { font-weight: 600; }
+.fw-root .fw-seg-chip { padding: 0 4px; border-radius: var(--radius-pill); background: color-mix(in oklab, currentColor 18%, transparent); font-weight: 600; font-variant-numeric: tabular-nums; }
+.fw-root .fw-seg-meta { font-variant-numeric: tabular-nums; }
+@container (max-width: 24px) { .fw-root :is(.fw-seg-label, .fw-view-agents .fw-seg .fw-glyph) { display: none; } }
 /* Fail and retry read as filled chips inside the bar, red and amber, as the references draw them. */
-.fw-root .fw-view-agents .fw-seg .fw-glyph { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--fw-failed); color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
+.fw-root .fw-view-agents .fw-seg .fw-glyph { flex: none; margin-left: 6px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--fw-failed); color: light-dark(var(--fw-surface), hsl(var(--hsl-background))); }
 .fw-root .fw-view-agents .fw-seg .fw-glyph[data-glyph="retry"] { background: var(--fw-amber); }
 .fw-root .fw-view-agents .fw-seg .fw-glyph svg { width: 9px; height: 9px; stroke-width: 2.5; }
 .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); }

package/dist/react/index.js

@@ -3396,32 +3396,35 @@ function Segment({ mark, events, agentView, ending }) {
 			className: "fw-glyph",
 			"data-glyph": glyph,
 			children: glyph === "fail" ? /* @__PURE__ */ jsx(FailGlyph, {}) : /* @__PURE__ */ jsx(RetryGlyph, {})
-		}), agentView && /* @__PURE__ */ jsxs(Fragment, { children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "fw-seg-icon",
-				"aria-hidden": true,
-				children: /* @__PURE__ */ jsx(KindGlyph, {
-					kind: model ? "model" : "tool",
-					name: mark.tool ?? mark.name
-				})
-			}),
-			name && /* @__PURE__ */ jsx("span", {
-				className: "fw-seg-name",
-				children: name
-			}),
-			mark.count > 1 && /* @__PURE__ */ jsxs("span", {
-				className: "fw-seg-chip",
-				children: ["×", mark.count]
-			}),
-			duration && /* @__PURE__ */ jsx("span", {
-				className: "fw-seg-meta",
-				children: duration
-			}),
-			mark.costUsd ? /* @__PURE__ */ jsx("span", {
-				className: "fw-seg-meta fw-seg-cost",
-				children: formatCost(mark.costUsd)
-			}) : null
-		] })]
+		}), agentView && /* @__PURE__ */ jsxs("span", {
+			className: "fw-seg-label",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "fw-seg-icon",
+					"aria-hidden": true,
+					children: /* @__PURE__ */ jsx(KindGlyph, {
+						kind: model ? "model" : "tool",
+						name: mark.tool ?? mark.name
+					})
+				}),
+				name && /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-name",
+					children: name
+				}),
+				mark.count > 1 && /* @__PURE__ */ jsxs("span", {
+					className: "fw-seg-chip",
+					children: ["×", mark.count]
+				}),
+				duration && /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-meta",
+					children: duration
+				}),
+				mark.costUsd ? /* @__PURE__ */ jsx("span", {
+					className: "fw-seg-meta",
+					children: formatCost(mark.costUsd)
+				}) : null
+			]
+		})]
 	});
 }
 /** A span the clock is inside: it grows live, or playback has not reached its end. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.21.18",
+  "version": "0.21.20",
   "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",