@railtownai/railtracks-visualizer 0.0.74 → 0.0.75

package/dist/cjs/index.js

@@ -13119,7 +13119,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$H = [
+const __iconNode$G = [
     [
         "path",
         {
@@ -13135,9 +13135,9 @@ const __iconNode$H = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$H);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$G);
 
-const __iconNode$G = [
+const __iconNode$F = [
     [
         "path",
         {
@@ -13153,9 +13153,9 @@ const __iconNode$G = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$G);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$F);
 
-const __iconNode$F = [
+const __iconNode$E = [
     [
         "circle",
         {
@@ -13175,9 +13175,9 @@ const __iconNode$F = [
         }
     ]
 ];
-const Blend = createLucideIcon("blend", __iconNode$F);
+const Blend = createLucideIcon("blend", __iconNode$E);
 
-const __iconNode$E = [
+const __iconNode$D = [
     [
         "path",
         {
@@ -13225,9 +13225,9 @@ const __iconNode$E = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$E);
+const Bot = createLucideIcon("bot", __iconNode$D);
 
-const __iconNode$D = [
+const __iconNode$C = [
     [
         "path",
         {
@@ -13261,9 +13261,9 @@ const __iconNode$D = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$D);
+const Calendar = createLucideIcon("calendar", __iconNode$C);
 
-const __iconNode$C = [
+const __iconNode$B = [
     [
         "path",
         {
@@ -13320,9 +13320,9 @@ const __iconNode$C = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$C);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$B);
 
-const __iconNode$B = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -13331,9 +13331,9 @@ const __iconNode$B = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$B);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$A);
 
-const __iconNode$A = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -13342,9 +13342,9 @@ const __iconNode$A = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$A);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$z);
 
-const __iconNode$z = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13360,9 +13360,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$z);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$y);
 
-const __iconNode$y = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13378,9 +13378,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$y);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$x);
 
-const __iconNode$x = [
+const __iconNode$w = [
     [
         "circle",
         {
@@ -13411,9 +13411,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$x);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$w);
 
-const __iconNode$w = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13429,9 +13429,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$w);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$v);
 
-const __iconNode$v = [
+const __iconNode$u = [
     [
         "circle",
         {
@@ -13449,9 +13449,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$v);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$u);
 
-const __iconNode$u = [
+const __iconNode$t = [
     [
         "circle",
         {
@@ -13476,27 +13476,7 @@ const __iconNode$u = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$u);
-
-const __iconNode$t = [
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            key: "1mglay"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M8 12h8",
-            key: "1wcyev"
-        }
-    ]
-];
-const CircleMinus = createLucideIcon("circle-minus", __iconNode$t);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$t);
 
 const __iconNode$s = [
     [
@@ -121068,11 +121048,14 @@ const STATUS_ICON_SIZE = 12;
     partial: Blend,
     unclassified: null
 };
-/** Short word shown on the collapsed accordion row. */ const STATUS_CHIP_LABEL = {
+/**
+ * Short word shown on the collapsed accordion row. Unclassified carries none, for the same reason
+ * it carries no icon: the chip would state a verdict the category does not have.
+ */ const STATUS_CHIP_LABEL = {
     pass: "Pass",
     fail: "Fail",
     partial: "Partial",
-    unclassified: "Unclassified"
+    unclassified: null
 };
 /** The neutral outlined treatment: unclassified categories, not-gated metrics, and zero counts. */ function outlinedPalette(theme) {
     return {
@@ -121107,10 +121090,11 @@ function statusPalette(theme, status) {
     }
 }
 /**
- * Failure rate, formatted the way the notification formats it: an exact 0%/100% only when exact,
- * so a single failure out of two hundred does not round down to a clean "0% failed".
- */ function formatFailureRate(failureCount, scoredCount) {
-    const exact = failureCount * 100 / scoredCount;
+ * Pass rate — the share of scored runs that did *not* fail, so it reads with the ratio beside it
+ * rather than against it. An exact 0%/100% only when exact, so a single failure out of two hundred
+ * does not round up to a clean "100% passed".
+ */ function formatPassRate(failureCount, scoredCount) {
+    const exact = (scoredCount - failureCount) * 100 / scoredCount;
     const rounded = Math.round(exact);
     if (rounded === 0 && exact > 0) return "<1%";
     if (rounded === 100 && exact < 100) return ">99%";
@@ -121202,22 +121186,28 @@ const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     }, "Reasoning · ", metricName), node.reasoning));
 };
 /**
- * The metric's verdict, beside its name. The ratio's leading number is what did *not* fail,
- * which folds partials in with the passes — the same reading the notification prints.
+ * The metric's verdict, beside its name: the status icon, then the pass ratio and rate. The ratio's
+ * leading number is what did *not* fail, which folds partials in with the passes, and the percentage
+ * is that same number as a share — the complement of the failure rate the notification prints.
+ *
+ * The verdict is carried by the icon and its colour alone; spelling it out beside a ratio that
+ * already says the same thing only crowded the header. It stays in the tooltip and the accessible
+ * name so nothing is lost to a reader who cannot resolve the icon.
+ *
+ * Renders nothing for a metric that is not gated, or that has nothing scored yet. Neither has a
+ * ratio to state, and a placeholder pill standing in for the absent verdict only invited the
+ * definitional zero failures of a not-gated metric to be read as an earned pass.
  */ const VerdictPill = ({ metric })=>{
     const { theme } = useTheme$1();
     const { verdict, scoredCount, failureCount } = metric;
-    const palette = verdict === "failed" ? statusPalette(theme, "fail") : verdict === "passed" ? statusPalette(theme, "pass") : outlinedPalette(theme);
-    const VerdictIcon = verdict === "failed" ? CircleX : verdict === "passed" ? CircleCheck : CircleMinus;
-    const text = verdict === "failed" ? "Failed" : verdict === "passed" ? "Passed" : "Not gated";
-    // Nothing scored yet, and a passing metric, both show the pill without a failure percentage.
-    let rate;
-    if (scoredCount > 0 && verdict === "failed") {
-        rate = `${scoredCount - failureCount}/${scoredCount} · ${formatFailureRate(failureCount, scoredCount)}`;
-    } else if (scoredCount > 0 && verdict === "passed") {
-        rate = `${scoredCount}/${scoredCount}`;
-    }
+    if (verdict === "notGated" || scoredCount === 0) return null;
+    const failed = verdict === "failed";
+    const palette = statusPalette(theme, failed ? "fail" : "pass");
+    const VerdictIcon = failed ? CircleX : CircleCheck;
+    const verdictLabel = failed ? "Failed" : "Passed";
+    const rate = `${scoredCount - failureCount}/${scoredCount} · ${formatPassRate(failureCount, scoredCount)}`;
     return /*#__PURE__*/ React.createElement("span", {
+        title: verdictLabel,
         style: {
             display: "inline-flex",
             alignItems: "center",
@@ -121225,32 +121215,25 @@ const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
             padding: "3px 9px",
             borderRadius: 6,
             fontSize: 11.5,
-            fontWeight: 700,
-            letterSpacing: 0.6,
-            textTransform: "uppercase",
+            letterSpacing: 0.2,
             background: palette.bg,
             color: palette.color,
             border: `1px solid ${palette.border}`
         }
     }, /*#__PURE__*/ React.createElement(VerdictIcon, {
         size: STATUS_ICON_SIZE,
-        "aria-hidden": true,
+        role: "img",
+        "aria-label": verdictLabel,
         style: {
             flexShrink: 0
         }
-    }), text, rate && /*#__PURE__*/ React.createElement("span", {
-        style: {
-            fontWeight: 400,
-            letterSpacing: 0.2,
-            opacity: 0.9,
-            textTransform: "none"
-        }
-    }, rate));
+    }), rate);
 };
 const LabelPanelHeader = ({ label })=>{
     const { theme } = useTheme$1();
     const isEmpty = label.count === 0;
     const palette = statusPalette(theme, label.status);
+    const chipLabel = STATUS_CHIP_LABEL[label.status];
     // A zero-count row keeps its status colour but reads as inactive, matching its disabled state.
     const dotColor = label.status === "unclassified" ? theme.colors.mutedForeground : palette.color;
     return /*#__PURE__*/ React.createElement("div", {
@@ -121274,7 +121257,7 @@ const LabelPanelHeader = ({ label })=>{
             fontWeight: 600,
             color: palette.color
         }
-    }, label.labelName), /*#__PURE__*/ React.createElement("span", {
+    }, label.labelName), chipLabel && /*#__PURE__*/ React.createElement("span", {
         style: {
             fontSize: 10,
             letterSpacing: 0.8,
@@ -121286,7 +121269,7 @@ const LabelPanelHeader = ({ label })=>{
             color: palette.color,
             border: `1px solid ${palette.border}`
         }
-    }, STATUS_CHIP_LABEL[label.status]), /*#__PURE__*/ React.createElement("span", {
+    }, chipLabel), /*#__PURE__*/ React.createElement("span", {
         style: {
             marginLeft: "auto",
             fontSize: 12,

package/dist/esm/index.js

@@ -13098,7 +13098,7 @@ const createLucideIcon = (iconName, iconNode)=>{
     return Component;
 };
 
-const __iconNode$H = [
+const __iconNode$G = [
     [
         "path",
         {
@@ -13114,9 +13114,9 @@ const __iconNode$H = [
         }
     ]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$H);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$G);
 
-const __iconNode$G = [
+const __iconNode$F = [
     [
         "path",
         {
@@ -13132,9 +13132,9 @@ const __iconNode$G = [
         }
     ]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$G);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$F);
 
-const __iconNode$F = [
+const __iconNode$E = [
     [
         "circle",
         {
@@ -13154,9 +13154,9 @@ const __iconNode$F = [
         }
     ]
 ];
-const Blend = createLucideIcon("blend", __iconNode$F);
+const Blend = createLucideIcon("blend", __iconNode$E);
 
-const __iconNode$E = [
+const __iconNode$D = [
     [
         "path",
         {
@@ -13204,9 +13204,9 @@ const __iconNode$E = [
         }
     ]
 ];
-const Bot = createLucideIcon("bot", __iconNode$E);
+const Bot = createLucideIcon("bot", __iconNode$D);
 
-const __iconNode$D = [
+const __iconNode$C = [
     [
         "path",
         {
@@ -13240,9 +13240,9 @@ const __iconNode$D = [
         }
     ]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$D);
+const Calendar = createLucideIcon("calendar", __iconNode$C);
 
-const __iconNode$C = [
+const __iconNode$B = [
     [
         "path",
         {
@@ -13299,9 +13299,9 @@ const __iconNode$C = [
         }
     ]
 ];
-const ChartNetwork = createLucideIcon("chart-network", __iconNode$C);
+const ChartNetwork = createLucideIcon("chart-network", __iconNode$B);
 
-const __iconNode$B = [
+const __iconNode$A = [
     [
         "path",
         {
@@ -13310,9 +13310,9 @@ const __iconNode$B = [
         }
     ]
 ];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$B);
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$A);
 
-const __iconNode$A = [
+const __iconNode$z = [
     [
         "path",
         {
@@ -13321,9 +13321,9 @@ const __iconNode$A = [
         }
     ]
 ];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$A);
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$z);
 
-const __iconNode$z = [
+const __iconNode$y = [
     [
         "path",
         {
@@ -13339,9 +13339,9 @@ const __iconNode$z = [
         }
     ]
 ];
-const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$z);
+const ChevronsDown = createLucideIcon("chevrons-down", __iconNode$y);
 
-const __iconNode$y = [
+const __iconNode$x = [
     [
         "path",
         {
@@ -13357,9 +13357,9 @@ const __iconNode$y = [
         }
     ]
 ];
-const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$y);
+const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$x);
 
-const __iconNode$x = [
+const __iconNode$w = [
     [
         "circle",
         {
@@ -13390,9 +13390,9 @@ const __iconNode$x = [
         }
     ]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$x);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$w);
 
-const __iconNode$w = [
+const __iconNode$v = [
     [
         "path",
         {
@@ -13408,9 +13408,9 @@ const __iconNode$w = [
         }
     ]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$w);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$v);
 
-const __iconNode$v = [
+const __iconNode$u = [
     [
         "circle",
         {
@@ -13428,9 +13428,9 @@ const __iconNode$v = [
         }
     ]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$v);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$u);
 
-const __iconNode$u = [
+const __iconNode$t = [
     [
         "circle",
         {
@@ -13455,27 +13455,7 @@ const __iconNode$u = [
         }
     ]
 ];
-const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$u);
-
-const __iconNode$t = [
-    [
-        "circle",
-        {
-            cx: "12",
-            cy: "12",
-            r: "10",
-            key: "1mglay"
-        }
-    ],
-    [
-        "path",
-        {
-            d: "M8 12h8",
-            key: "1wcyev"
-        }
-    ]
-];
-const CircleMinus = createLucideIcon("circle-minus", __iconNode$t);
+const CircleDollarSign = createLucideIcon("circle-dollar-sign", __iconNode$t);
 
 const __iconNode$s = [
     [
@@ -121047,11 +121027,14 @@ const STATUS_ICON_SIZE = 12;
     partial: Blend,
     unclassified: null
 };
-/** Short word shown on the collapsed accordion row. */ const STATUS_CHIP_LABEL = {
+/**
+ * Short word shown on the collapsed accordion row. Unclassified carries none, for the same reason
+ * it carries no icon: the chip would state a verdict the category does not have.
+ */ const STATUS_CHIP_LABEL = {
     pass: "Pass",
     fail: "Fail",
     partial: "Partial",
-    unclassified: "Unclassified"
+    unclassified: null
 };
 /** The neutral outlined treatment: unclassified categories, not-gated metrics, and zero counts. */ function outlinedPalette(theme) {
     return {
@@ -121086,10 +121069,11 @@ function statusPalette(theme, status) {
     }
 }
 /**
- * Failure rate, formatted the way the notification formats it: an exact 0%/100% only when exact,
- * so a single failure out of two hundred does not round down to a clean "0% failed".
- */ function formatFailureRate(failureCount, scoredCount) {
-    const exact = failureCount * 100 / scoredCount;
+ * Pass rate — the share of scored runs that did *not* fail, so it reads with the ratio beside it
+ * rather than against it. An exact 0%/100% only when exact, so a single failure out of two hundred
+ * does not round up to a clean "100% passed".
+ */ function formatPassRate(failureCount, scoredCount) {
+    const exact = (scoredCount - failureCount) * 100 / scoredCount;
     const rounded = Math.round(exact);
     if (rounded === 0 && exact > 0) return "<1%";
     if (rounded === 100 && exact < 100) return ">99%";
@@ -121181,22 +121165,28 @@ const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
     }, "Reasoning · ", metricName), node.reasoning));
 };
 /**
- * The metric's verdict, beside its name. The ratio's leading number is what did *not* fail,
- * which folds partials in with the passes — the same reading the notification prints.
+ * The metric's verdict, beside its name: the status icon, then the pass ratio and rate. The ratio's
+ * leading number is what did *not* fail, which folds partials in with the passes, and the percentage
+ * is that same number as a share — the complement of the failure rate the notification prints.
+ *
+ * The verdict is carried by the icon and its colour alone; spelling it out beside a ratio that
+ * already says the same thing only crowded the header. It stays in the tooltip and the accessible
+ * name so nothing is lost to a reader who cannot resolve the icon.
+ *
+ * Renders nothing for a metric that is not gated, or that has nothing scored yet. Neither has a
+ * ratio to state, and a placeholder pill standing in for the absent verdict only invited the
+ * definitional zero failures of a not-gated metric to be read as an earned pass.
  */ const VerdictPill = ({ metric })=>{
     const { theme } = useTheme$1();
     const { verdict, scoredCount, failureCount } = metric;
-    const palette = verdict === "failed" ? statusPalette(theme, "fail") : verdict === "passed" ? statusPalette(theme, "pass") : outlinedPalette(theme);
-    const VerdictIcon = verdict === "failed" ? CircleX : verdict === "passed" ? CircleCheck : CircleMinus;
-    const text = verdict === "failed" ? "Failed" : verdict === "passed" ? "Passed" : "Not gated";
-    // Nothing scored yet, and a passing metric, both show the pill without a failure percentage.
-    let rate;
-    if (scoredCount > 0 && verdict === "failed") {
-        rate = `${scoredCount - failureCount}/${scoredCount} · ${formatFailureRate(failureCount, scoredCount)}`;
-    } else if (scoredCount > 0 && verdict === "passed") {
-        rate = `${scoredCount}/${scoredCount}`;
-    }
+    if (verdict === "notGated" || scoredCount === 0) return null;
+    const failed = verdict === "failed";
+    const palette = statusPalette(theme, failed ? "fail" : "pass");
+    const VerdictIcon = failed ? CircleX : CircleCheck;
+    const verdictLabel = failed ? "Failed" : "Passed";
+    const rate = `${scoredCount - failureCount}/${scoredCount} · ${formatPassRate(failureCount, scoredCount)}`;
     return /*#__PURE__*/ React__default.createElement("span", {
+        title: verdictLabel,
         style: {
             display: "inline-flex",
             alignItems: "center",
@@ -121204,32 +121194,25 @@ const NodeRow$1 = ({ node, metricName, onAgentNodeClick, onOpenVisualizer })=>{
             padding: "3px 9px",
             borderRadius: 6,
             fontSize: 11.5,
-            fontWeight: 700,
-            letterSpacing: 0.6,
-            textTransform: "uppercase",
+            letterSpacing: 0.2,
             background: palette.bg,
             color: palette.color,
             border: `1px solid ${palette.border}`
         }
     }, /*#__PURE__*/ React__default.createElement(VerdictIcon, {
         size: STATUS_ICON_SIZE,
-        "aria-hidden": true,
+        role: "img",
+        "aria-label": verdictLabel,
         style: {
             flexShrink: 0
         }
-    }), text, rate && /*#__PURE__*/ React__default.createElement("span", {
-        style: {
-            fontWeight: 400,
-            letterSpacing: 0.2,
-            opacity: 0.9,
-            textTransform: "none"
-        }
-    }, rate));
+    }), rate);
 };
 const LabelPanelHeader = ({ label })=>{
     const { theme } = useTheme$1();
     const isEmpty = label.count === 0;
     const palette = statusPalette(theme, label.status);
+    const chipLabel = STATUS_CHIP_LABEL[label.status];
     // A zero-count row keeps its status colour but reads as inactive, matching its disabled state.
     const dotColor = label.status === "unclassified" ? theme.colors.mutedForeground : palette.color;
     return /*#__PURE__*/ React__default.createElement("div", {
@@ -121253,7 +121236,7 @@ const LabelPanelHeader = ({ label })=>{
             fontWeight: 600,
             color: palette.color
         }
-    }, label.labelName), /*#__PURE__*/ React__default.createElement("span", {
+    }, label.labelName), chipLabel && /*#__PURE__*/ React__default.createElement("span", {
         style: {
             fontSize: 10,
             letterSpacing: 0.8,
@@ -121265,7 +121248,7 @@ const LabelPanelHeader = ({ label })=>{
             color: palette.color,
             border: `1px solid ${palette.border}`
         }
-    }, STATUS_CHIP_LABEL[label.status]), /*#__PURE__*/ React__default.createElement("span", {
+    }, chipLabel), /*#__PURE__*/ React__default.createElement("span", {
         style: {
             marginLeft: "auto",
             fontSize: 12,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for Railtracks agentic flows",