From a0d2e4651036bb428cc5ce4b87201eae034f237a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 12 Dec 2025 13:21:54 +0000
Subject: [PATCH] fix(ui): Show single-point sparkline as horizontal line

When there's only 1 day of AI usage data, the sparkline was invisible
because a single point draws at x=0 with no width. Now draws a
horizontal line across the full width so users can see the value.

This happens when AI has just been enabled and there's only one
day of recorded usage so far.
---
 frontend-modern/src/components/AI/AICostDashboard.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/AI/AICostDashboard.tsx b/frontend-modern/src/components/AI/AICostDashboard.tsx
index 3a1a28b..dae6d65 100644
--- a/frontend-modern/src/components/AI/AICostDashboard.tsx
+++ b/frontend-modern/src/components/AI/AICostDashboard.tsx
@@ -34,7 +34,14 @@ const TinySparkline: Component<{
     const max = Math.max(...values, 0);
     const safeMax = max <= 0 ? 1 : max;
 
-    const xStep = values.length <= 1 ? 0 : w / (values.length - 1);
+    // For single point, draw a horizontal line across the middle
+    if (values.length === 1) {
+      const y = h - (Math.max(0, values[0]) / safeMax) * h;
+      // Draw a short horizontal line to make the single point visible
+      return `M0,${y.toFixed(2)} L${w.toFixed(2)},${y.toFixed(2)}`;
+    }
+
+    const xStep = w / (values.length - 1);
     let d = '';
     values.forEach((v, idx) => {
       const x = idx * xStep;