Reduce chart grid noise: subtle dashed Y-grid only, no X-grid or ticks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/components/charts/DurationHistogram.tsx

@@ -51,15 +51,19 @@ export function DurationHistogram({ buckets }: DurationHistogramProps) {
       axes: [
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { show: false },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
+          gap: 8,
           values: (_, ticks) => ticks.map((v) => `${Math.round(v)}ms`),
         },
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
           size: 40,
+          gap: 8,
         },
       ],
       series: [

ui/src/components/charts/LatencyHeatmap.tsx

@@ -43,14 +43,18 @@ export function LatencyHeatmap({ buckets }: LatencyHeatmapProps) {
       axes: [
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { show: false },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
+          gap: 8,
         },
         {
           stroke: chartColors.axis,
-          grid: { stroke: chartColors.grid, width: 1 },
+          grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
+          ticks: { show: false },
           font: '11px JetBrains Mono, monospace',
           size: 50,
+          gap: 8,
           values: (_, ticks) => ticks.map((v) => `${Math.round(v)}ms`),
         },
       ],

ui/src/components/charts/theme.ts

@@ -8,7 +8,7 @@ export const chartColors = {
   green: '#10b981',
   blue: '#3b82f6',
   purple: '#a855f7',
-  grid: 'rgba(30, 45, 61, 0.5)',
+  grid: 'rgba(30, 45, 61, 0.18)',
   axis: '#4a5e7a',
   text: '#8b9cb6',
   bg: '#111827',
@@ -36,16 +36,18 @@ export function baseOpts(width: number, height: number): Partial<uPlot.Options>
     axes: [
       {
         stroke: chartColors.axis,
-        grid: { stroke: chartColors.grid, width: 1 },
+        grid: { show: false },
-        ticks: { stroke: chartColors.grid, width: 1 },
+        ticks: { show: false },
         font: '11px JetBrains Mono, monospace',
+        gap: 8,
       },
       {
         stroke: chartColors.axis,
-        grid: { stroke: chartColors.grid, width: 1 },
+        grid: { stroke: chartColors.grid, width: 1, dash: [2, 4] },
-        ticks: { stroke: chartColors.grid, width: 1 },
+        ticks: { show: false },
         font: '11px JetBrains Mono, monospace',
         size: 50,
+        gap: 8,
       },
     ],
   };