chordia-ui 3.9.0 → 3.9.2

package/src/components/performance/PerformanceDetailsPage.jsx

@@ -12,6 +12,7 @@ import {
   ChevronLeft,
   ChevronRight,
   TrendingUp,
+  TrendingDown,
   Lightbulb,
   ShieldCheck,
   FolderKanban,
@@ -19,6 +20,25 @@ import {
 } from "lucide-react";
 import DataTable2 from "../data/DataTable2";
 import { DateRangeButton } from "./PerformancePanel";
+import {
+  formatEightHourRangeEndpoints,
+  formatLocalDate,
+  getPresetWindowDates,
+} from "./performanceRangeFormat";
+import {
+  SPARK_DEFAULT_AREA,
+  SPARK_DEFAULT_LINE,
+  buildSparkPaths,
+  normalizeSparkPoints,
+} from "./performanceSparkline";
+import {
+  METRIC_PLACEHOLDER,
+  formatMetricDisplay,
+  hasChartData,
+  hasMeaningfulMetric,
+  resolveKpiTrend,
+  resolveTrend,
+} from "./performanceMetrics";
 
 // Color values resolve to CSS variables declared in `src/tokens/colors.css`.
 // Anything new added here MUST first be added to that file as a `--*` token.
@@ -48,6 +68,24 @@ const C = {
 const FONT_DISPLAY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
 const FONT_BODY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
 
+function TrendArrow({ direction = "up", color = C.muted }) {
+  const upPath =
+    "M12.4167 0.75H17.4167M17.4167 0.75V5.75M17.4167 0.75L10.3333 7.83333L6.16667 3.66667L0.75 9.08333";
+  const downPath =
+    "M12.4167 9.25H17.4167M17.4167 9.25V4.25M17.4167 9.25L10.3333 2.16667L6.16667 6.33333L0.75 0.91667";
+  return (
+    <svg width={18} height={9.5} viewBox="0 0 19 10" fill="none" style={{ flexShrink: 0 }}>
+      <path
+        d={direction === "up" ? upPath : downPath}
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 // MM/DD/YYYY in the viewer's local timezone — matches PerformancePanel's
 // `formatLocalDate`. Accepts Date instances or strings (e.g. "2026-03-16");
 // returns the input untouched if it can't be parsed.
@@ -68,42 +106,26 @@ function formatDisplayDate(input) {
   return str;
 }
 
-// Canned curve used when the caller doesn't supply real points. Kept around
-// so existing demos / fixtures don't visually regress.
-const SPARK_DEFAULT_LINE =
-  "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024";
-const SPARK_DEFAULT_AREA =
-  "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
-
-// Project a numeric series onto an SVG viewBox so we can draw a real line +
-// filled area. Returns `null` when there aren't enough usable values (so the
-// caller can fall back to the canned curve).
-function buildSparkPaths(points, vbW = 52, vbH = 36) {
-  if (!Array.isArray(points)) return null;
-  const numeric = points
-    .map((p) => Number(p))
-    .filter((n) => Number.isFinite(n));
-  if (numeric.length < 2) return null;
-  const min = Math.min(...numeric);
-  const max = Math.max(...numeric);
-  // Inset so the stroke doesn't clip and a flat line still draws horizontally.
-  const padY = 4;
-  const span = max - min || 1;
-  const usableH = vbH - padY * 2 - 4; // leave a little headroom at bottom too
-  const sx = (i) => (numeric.length === 1 ? 0 : (i / (numeric.length - 1)) * (vbW - 2)) + 1;
-  const sy = (v) => padY + (1 - (v - min) / span) * usableH;
-  let line = "";
-  for (let i = 0; i < numeric.length; i++) {
-    line += `${i === 0 ? "M" : "L"}${sx(i).toFixed(2)},${sy(numeric[i]).toFixed(2)}`;
-  }
-  const lastX = sx(numeric.length - 1);
-  const firstX = sx(0);
-  const area = `${line} L${lastX.toFixed(2)},${vbH} L${firstX.toFixed(2)},${vbH} Z`;
-  return { line, area };
-}
-
-function Sparkline({ trend = "up", points, width = 49.618, height = 35 }) {
+function Sparkline({ trend = "up", points, empty = false, width = 49.618, height = 35 }) {
   const id = React.useId();
+  if (empty) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox="0 0 52 36"
+        fill="none"
+        style={{ flexShrink: 0 }}
+      >
+        <path
+          d="M2,18 L50,18"
+          stroke={C.ink}
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    );
+  }
   const built = buildSparkPaths(points);
   const linePath = built ? built.line : SPARK_DEFAULT_LINE;
   const areaPath = built ? built.area : SPARK_DEFAULT_AREA;
@@ -156,17 +178,31 @@ function Sparkline({ trend = "up", points, width = 49.618, height = 35 }) {
 }
 
 function KpiCell({ value, label, sub, trend = "up", points }) {
+  const displayValue = formatMetricDisplay(value);
+  const hasData = hasMeaningfulMetric(value) || normalizeSparkPoints(points) != null;
+  const direction = resolveKpiTrend(trend, value, points);
   return (
     <div
       style={{
-        flex: 1,
         display: "flex",
         alignItems: "center",
+        justifyContent: "center",
         gap: 16,
         minWidth: 0,
       }}
     >
-      <Sparkline trend={trend} points={points} />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 4,
+          flexShrink: 0,
+          alignItems: "flex-end",
+        }}
+      >
+        <Sparkline trend={direction} points={points} empty={!hasData} />
+        {hasData ? <TrendArrow direction={direction} /> : null}
+      </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 6, minWidth: 0 }}>
         <div
           style={{
@@ -179,7 +215,7 @@ function KpiCell({ value, label, sub, trend = "up", points }) {
             whiteSpace: "nowrap",
           }}
         >
-          {value}
+          {displayValue}
         </div>
         <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
           <span
@@ -279,6 +315,7 @@ function CompassLineChart({
   // index of the marker to render filled (defaults to the last point)
   highlightIndex,
 }) {
+  const [hoveredPoint, setHoveredPoint] = React.useState(null);
   const width = 460;
   const height = 110;
   const hasData = Array.isArray(points) && points.length > 0;
@@ -360,7 +397,17 @@ function CompassLineChart({
   const minX = normalized[0][0];
   const maxX = normalized[normalized.length - 1][0];
   const xSpan = maxX - minX || 1;
-  const sx = (x) => ((x - minX) / xSpan) * width;
+  // Keep endpoints away from the SVG edge so first/last point markers don't clip.
+  const xPad = 8;
+  const innerWidth = Math.max(1, width - xPad * 2);
+  const sx = (x) => xPad + ((x - minX) / xSpan) * innerWidth;
+  const formatPointValue = (value) => {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return String(value ?? "");
+    const abs = Math.abs(n);
+    const decimals = abs >= 100 ? 0 : abs >= 10 ? 1 : 2;
+    return n.toFixed(decimals);
+  };
   const linePath = normalized
     .map(([x, y], i) => `${i === 0 ? "M" : "L"}${sx(x)},${y}`)
     .join(" ");
@@ -385,11 +432,50 @@ function CompassLineChart({
         ))}
       </div>
       <div style={{ flex: 1, position: "relative", minWidth: 0 }}>
+        {hoveredPoint && (
+          <div
+            style={{
+              position: "absolute",
+              left: `${hoveredPoint.xPct}%`,
+              top: `${hoveredPoint.yPct}%`,
+              transform: "translate(-50%, calc(-100% - 10px))",
+              pointerEvents: "none",
+              zIndex: 2,
+              background: C.black,
+              color: C.white,
+              borderRadius: 6,
+              minWidth: 60,
+              padding: "8px 10px",
+              boxShadow: "0 6px 16px rgba(0,0,0,0.18)",
+              fontFamily: FONT_BODY,
+              fontSize: 11,
+              lineHeight: 1.25,
+              whiteSpace: "nowrap",
+              textAlign: "left",
+            }}
+          >
+            <div>{hoveredPoint.label}</div>
+            <div style={{ fontWeight: 600 }}>{hoveredPoint.value}</div>
+            <div
+              style={{
+                position: "absolute",
+                left: "50%",
+                bottom: -5,
+                width: 10,
+                height: 10,
+                background: C.black,
+                transform: "translateX(-50%) rotate(45deg)",
+                borderRadius: 2,
+              }}
+            />
+          </div>
+        )}
         <svg
           width="100%"
           height={height + 14}
           viewBox={`0 0 ${width} ${height + 14}`}
           preserveAspectRatio="none"
+          onMouseLeave={() => setHoveredPoint(null)}
         >
           <defs>
             <linearGradient id={`area-${gradId}`} x1="0" y1="0" x2="0" y2="1">
@@ -432,6 +518,14 @@ function CompassLineChart({
                 stroke={C.black}
                 strokeWidth="1.5"
                 vectorEffect="non-scaling-stroke"
+                onMouseEnter={() => {
+                  setHoveredPoint({
+                    xPct: (sx(x) / width) * 100,
+                    yPct: (y / (height + 28)) * 100,
+                    label: allXLabels[i] || `Point ${i + 1}`,
+                    value: formatPointValue(dataPairs[i]?.[1]),
+                  });
+                }}
               />
             );
           })}
@@ -444,7 +538,8 @@ function CompassLineChart({
             fontFamily: FONT_BODY,
             fontSize: 10,
             color: C.neutral800,
-            marginTop: 6,
+            marginTop: 8,
+            marginBottom: 4,
             overflow: "hidden",
           }}
         >
@@ -458,6 +553,10 @@ function CompassLineChart({
 }
 
 function ChartCard({ title, value, delta, children }) {
+  const displayValue = formatMetricDisplay(value);
+  const showDelta = hasMeaningfulMetric(delta);
+  // Value line uses em-dash fallback; delta/trend icons stay hidden for placeholders.
+  const deltaTrend = showDelta ? resolveTrend("up", delta) : "up";
   return (
     <div
       style={{
@@ -494,8 +593,22 @@ function ChartCard({ title, value, delta, children }) {
             fontWeight: 600,
           }}
         >
-          <span style={{ fontSize: 20, color: C.black, lineHeight: 1 }}>{value}</span>
-          <span style={{ fontSize: 10, color: C.neutral300, lineHeight: 1 }}>{delta}</span>
+          <span style={{ fontSize: 20, color: C.black, lineHeight: 1 }}>{displayValue}</span>
+          {showDelta ? (
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 3,
+                fontSize: 10,
+                color: C.neutral300,
+                lineHeight: 1,
+              }}
+            >
+              <TrendArrow direction={deltaTrend} color={C.neutral300} />
+              {delta}
+            </span>
+          ) : null}
         </span>
       </div>
       <div style={{ flex: 1 }}>{children}</div>
@@ -611,7 +724,11 @@ function AccordionRow({
   defaultExpanded = false,
 }) {
   const [expanded, setExpanded] = React.useState(defaultExpanded);
-  const trailing = percent ?? delta ?? "";
+  const trailingRaw = percent ?? delta;
+  const showTrailing = hasMeaningfulMetric(trailingRaw);
+  const trailing = showTrailing ? String(trailingRaw) : METRIC_PLACEHOLDER;
+  const trailingTrend = showTrailing ? resolveTrend("up", trailing) : "up";
+  const TrendIcon = trailingTrend === "down" ? TrendingDown : TrendingUp;
   const rows = Array.isArray(bullets) ? bullets : [];
   // Outer container is a div so the bullet rows inside (which may hold
   // <a> links to the interaction detail page) aren't nested inside an
@@ -655,11 +772,21 @@ function AccordionRow({
           <div style={{ display: "flex", gap: 16 }}>
             <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
               <Phone size={12} color={C.ink} strokeWidth={1.75} />
-              <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink }}>{calls}</span>
+              <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink }}>{calls} calls</span>
             </div>
             <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
-              <TrendingUp size={12} color={C.ink} strokeWidth={1.75} />
-              <span style={{ fontFamily: FONT_BODY, fontSize: 12, color: C.ink }}>{trailing}</span>
+              {showTrailing ? (
+                <TrendIcon size={12} color={C.ink} strokeWidth={1.75} />
+              ) : null}
+              <span
+                style={{
+                  fontFamily: FONT_BODY,
+                  fontSize: 12,
+                  color: showTrailing ? C.ink : C.muted,
+                }}
+              >
+                {trailing}
+              </span>
             </div>
           </div>
         </div>
@@ -897,13 +1024,28 @@ export default function PerformanceDetailsPage({
   onSessionsVisibleColumnsChange,
 }) {
   const customRangeActive = !!(dateRange?.from && dateRange?.to);
+  // 8h label uses a rolling window (now − 8h), same as the list panel. Hosts
+  // often pass date-only startDate/endDate (midnight), which would render as
+  // "12:00 AM – 12:00 AM"; derive the range locally instead.
+  const eightHourRange = (() => {
+    if (customRangeActive || selectedWindow !== "8h") return null;
+    const range = getPresetWindowDates("8h");
+    return range ? formatEightHourRangeEndpoints(range.from, range.to) : null;
+  })();
+  const presetDateRange = (() => {
+    if (customRangeActive || selectedWindow === "8h") return null;
+    const range = getPresetWindowDates(selectedWindow);
+    if (!range) return null;
+    return {
+      from: formatLocalDate(range.from),
+      to: formatLocalDate(range.to),
+    };
+  })();
 
   // A chart card is only worth rendering when the host has something concrete
   // for it — either a headline value, a delta, or actual chart points. Without
   // that we'd ship empty frames with "No data" inside, which leaks library
   // demo copy. Hosts populate progressively; gallery passes everything.
-  const hasChartData = (c) =>
-    !!(c && (c.value || c.delta || (Array.isArray(c.points) && c.points.length > 0)));
   const showRow1 =
     hasChartData(baselineChart) || hasChartData(agentLiftChart) || hasChartData(scoreChart);
   const showRow2 = hasChartData(csatChart) || hasChartData(volumeChart);
@@ -1032,7 +1174,9 @@ export default function PerformanceDetailsPage({
                   lineHeight: 1.5,
                 }}
               >
-                {formatDisplayDate(startDate)}
+                {eightHourRange?.from ??
+                  presetDateRange?.from ??
+                  formatDisplayDate(startDate)}
               </span>
               <ArrowRight size={12} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
               <span
@@ -1043,7 +1187,9 @@ export default function PerformanceDetailsPage({
                   lineHeight: 1.5,
                 }}
               >
-                {formatDisplayDate(endDate)}
+                {eightHourRange?.to ??
+                  presetDateRange?.to ??
+                  formatDisplayDate(endDate)}
               </span>
             </div>
             <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
@@ -1085,33 +1231,42 @@ export default function PerformanceDetailsPage({
             borderRadius: 8,
             padding: 16,
             display: "flex",
-            gap: 24,
             alignItems: "center",
           }}
         >
-          <KpiCell
-            value={kpiBaseline.value}
-            label={kpiBaseline.label}
-            sub={kpiBaseline.sub}
-            trend={kpiBaseline.trend}
-            points={kpiBaseline.points}
-          />
-          <ArrowRight size={20} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
-          <KpiCell
-            value={kpiAgentLift.value}
-            label={kpiAgentLift.label}
-            sub={kpiAgentLift.sub}
-            trend={kpiAgentLift.trend}
-            points={kpiAgentLift.points}
-          />
-          <ArrowRight size={20} color={C.ink} strokeWidth={1.75} style={{ flexShrink: 0 }} />
-          <KpiCell
-            value={kpiScore.value}
-            label={kpiScore.label}
-            sub={kpiScore.sub}
-            trend={kpiScore.trend}
-            points={kpiScore.points}
-          />
+          {[
+            { key: "baseline", kpi: kpiBaseline },
+            { key: "agent-lift", kpi: kpiAgentLift },
+            { key: "score", kpi: kpiScore },
+          ].map((col, i) => (
+            <React.Fragment key={col.key}>
+              {i > 0 ? (
+                <ArrowRight
+                  size={20}
+                  color={C.ink}
+                  strokeWidth={1.75}
+                  style={{ flexShrink: 0, margin: "0 24px" }}
+                />
+              ) : null}
+              <div
+                style={{
+                  flex: 1,
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  minWidth: 0,
+                }}
+              >
+                <KpiCell
+                  value={col.kpi.value}
+                  label={col.kpi.label}
+                  sub={col.kpi.sub}
+                  trend={col.kpi.trend}
+                  points={col.kpi.points}
+                />
+              </div>
+            </React.Fragment>
+          ))}
         </div>
 
         {showRow1 && (
@@ -1179,7 +1334,7 @@ export default function PerformanceDetailsPage({
             </div>
           </div>
           <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
-            <SectionHeading icon={Lightbulb} title={guidanceTitle} iconColor={C.accentYellow} />
+            <SectionHeading icon={Lightbulb} title={guidanceTitle} iconColor={C.railCompliance} />
             <div style={{ display: "flex", flexDirection: "column", maxHeight: 480, overflowY: "auto" }}>
               {guidanceItems.map((item, i) => (
                 <AccordionRow key={i} {...item} />

package/src/components/performance/PerformancePanel.jsx

@@ -20,6 +20,17 @@ import {
 } from "lucide-react";
 import DataTable2 from "../data/DataTable2";
 import PerformanceDetailsPage from "./PerformanceDetailsPage";
+import {
+  RANGE_TO_MS,
+  computeWindowLabel,
+  formatLocalDate,
+} from "./performanceRangeFormat";
+import {
+  SPARK_DEFAULT_AREA,
+  SPARK_DEFAULT_LINE,
+  buildSparkPaths,
+  trendFromPoints,
+} from "./performanceSparkline";
 
 const EMPTY_STAT = { value: "", label: "", trend: "up" };
 
@@ -51,12 +62,12 @@ const C = {
 const FONT_DISPLAY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
 const FONT_BODY = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)";
 
-function Sparkline({ trend = "up", width = 49.618, height = 35 }) {
+function Sparkline({ trend = "up", points, width = 49.618, height = 35 }) {
   const id = React.useId();
-  const linePath =
-    "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024";
-  const areaPath =
-    "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
+  const built = buildSparkPaths(points);
+  const linePath = built ? built.line : SPARK_DEFAULT_LINE;
+  const areaPath = built ? built.area : SPARK_DEFAULT_AREA;
+  const direction = trendFromPoints(points) ?? trend;
   return (
     <svg
       width={width}
@@ -65,7 +76,7 @@ function Sparkline({ trend = "up", width = 49.618, height = 35 }) {
       fill="none"
       style={{
         flexShrink: 0,
-        transform: trend === "down" ? "scaleX(-1)" : undefined,
+        transform: !built && direction === "down" ? "scaleX(-1)" : undefined,
       }}
     >
       <defs>
@@ -95,12 +106,16 @@ function Sparkline({ trend = "up", width = 49.618, height = 35 }) {
         fill="none"
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeDasharray={trend === "down" ? "2 4" : undefined}
+        strokeDasharray={!built && direction === "down" ? "2 4" : undefined}
       />
     </svg>
   );
 }
 
+function resolveStatTrend(trend, points) {
+  return trendFromPoints(points) ?? (trend === "down" ? "down" : "up");
+}
+
 function TrendArrow({ direction = "up", color = C.muted }) {
   const upPath =
     "M12.4167 0.75H17.4167M17.4167 0.75V5.75M17.4167 0.75L10.3333 7.83333L6.16667 3.66667L0.75 9.08333";
@@ -119,7 +134,8 @@ function TrendArrow({ direction = "up", color = C.muted }) {
   );
 }
 
-function StatCard({ value, label, trend = "up", muted = false, beigeBg = false, style = {} }) {
+function StatCard({ value, label, trend = "up", points, muted = false, beigeBg = false, style = {} }) {
+  const direction = resolveStatTrend(trend, points);
   return (
     <div
       style={{
@@ -135,8 +151,8 @@ function StatCard({ value, label, trend = "up", muted = false, beigeBg = false,
       }}
     >
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
-        <Sparkline trend={trend} />
-        <TrendArrow direction={trend} />
+        <Sparkline trend={direction} points={points} />
+        <TrendArrow direction={direction} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
         <div
@@ -157,7 +173,8 @@ function StatCard({ value, label, trend = "up", muted = false, beigeBg = false,
   );
 }
 
-function StatSubCell({ value, label, trend = "up", withDivider = false }) {
+function StatSubCell({ value, label, trend = "up", points, withDivider = false }) {
+  const direction = resolveStatTrend(trend, points);
   return (
     <div
       style={{
@@ -171,8 +188,8 @@ function StatSubCell({ value, label, trend = "up", withDivider = false }) {
       }}
     >
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
-        <Sparkline trend={trend} />
-        <TrendArrow direction={trend} />
+        <Sparkline trend={direction} points={points} />
+        <TrendArrow direction={direction} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
         <div
@@ -517,30 +534,6 @@ const DEFAULT_RANGE_OPTIONS = [
   { id: "30d", label: "30d" },
 ];
 
-const RANGE_TO_MS = {
-  "8h": 8 * 60 * 60 * 1000,
-  "1d": 24 * 60 * 60 * 1000,
-  "7d": 7 * 24 * 60 * 60 * 1000,
-  "30d": 30 * 24 * 60 * 60 * 1000,
-};
-
-function formatLocalDate(date) {
-  // MM/DD/YYYY in the viewer's local timezone (toLocaleDateString uses local TZ by default).
-  return date.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "numeric",
-  });
-}
-
-function computeWindowLabel(windowId) {
-  const ms = RANGE_TO_MS[windowId];
-  if (!ms) return "";
-  const to = new Date();
-  const from = new Date(to.getTime() - ms);
-  return `${formatLocalDate(from)} – ${formatLocalDate(to)}`;
-}
-
 function SearchBar() {
   return (
     <div
@@ -1245,12 +1238,16 @@ export default function PerformancePanel({
         </div>
         <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
           {(() => {
-            // Custom range wins if active; otherwise the active chip drives
-            // the label (preserving the legacy `dateRangeLabel` override).
+            // Custom range wins if active; otherwise the active chip drives the
+            // label. Chip label wins over `dateRangeLabel` so hosts aren't stuck
+            // showing date-only strings for 8h when they pass a legacy override.
             const customLabel = customRangeActive
               ? `${formatLocalDate(effectiveDateRange.from)} – ${formatLocalDate(effectiveDateRange.to)}`
               : "";
-            const label = customLabel || dateRangeLabel || computeWindowLabel(selectedWindow);
+            const label =
+              customLabel ||
+              computeWindowLabel(selectedWindow) ||
+              dateRangeLabel;
             return label ? (
               <span
                 style={{
@@ -1289,8 +1286,8 @@ export default function PerformancePanel({
       </div>
 
       <div style={{ display: "flex", gap: 24 }}>
-        <StatCard value={volumeStat.value} label={volumeStat.label} trend={volumeStat.trend} style={{ width: 264, flexShrink: 0 }} />
-        <StatCard value={compassStat.value} label={compassStat.label} trend={compassStat.trend} style={{ width: 264, flexShrink: 0 }} />
+        <StatCard value={volumeStat.value} label={volumeStat.label} trend={volumeStat.trend} points={volumeStat.points} style={{ width: 264, flexShrink: 0 }} />
+        <StatCard value={compassStat.value} label={compassStat.label} trend={compassStat.trend} points={compassStat.points} style={{ width: 264, flexShrink: 0 }} />
         <div
           style={{
             flex: 1,
@@ -1304,9 +1301,9 @@ export default function PerformancePanel({
             boxSizing: "border-box",
           }}
         >
-          <StatSubCell value={baselineSubStat.value} label={baselineSubStat.label} trend={baselineSubStat.trend} />
-          <StatSubCell value={agentLiftSubStat.value} label={agentLiftSubStat.label} trend={agentLiftSubStat.trend} withDivider />
-          <StatSubCell value={scoreSubStat.value} label={scoreSubStat.label} trend={scoreSubStat.trend} withDivider />
+          <StatSubCell value={baselineSubStat.value} label={baselineSubStat.label} trend={baselineSubStat.trend} points={baselineSubStat.points} />
+          <StatSubCell value={agentLiftSubStat.value} label={agentLiftSubStat.label} trend={agentLiftSubStat.trend} points={agentLiftSubStat.points} withDivider />
+          <StatSubCell value={scoreSubStat.value} label={scoreSubStat.label} trend={scoreSubStat.trend} points={scoreSubStat.points} withDivider />
         </div>
       </div>
 

package/src/components/performance/index.js

@@ -1,3 +1,30 @@
 export { default as PerformancePanel, DEFAULT_AGENT_COLUMNS } from './PerformancePanel';
 export { default as PerformanceDetailsPage, DEFAULT_SESSION_COLUMNS } from './PerformanceDetailsPage';
 export { default as SupervisorSelect } from './SupervisorSelect';
+export {
+  computeWindowLabel,
+  formatEightHourWindowLabel,
+  formatEightHourRangeEndpoints,
+  formatLocalDate,
+  getPresetWindowDates,
+  RANGE_TO_MS,
+} from './performanceRangeFormat';
+export {
+  buildSparkPaths,
+  normalizeSparkPoints,
+  trendFromPoints,
+} from './performanceSparkline';
+export {
+  METRIC_PLACEHOLDER,
+  formatMetricDisplay,
+  hasChartData,
+  hasMeaningfulMetric,
+  isNullishMetric,
+  resolveKpiTrend,
+  resolveTrend,
+  trendFromSignedValue,
+} from './performanceMetrics';
+export {
+  extractTrendSeries,
+  mapPerformanceKpiStats,
+} from './performanceApiMap';