ui-svelte: add prompt processing histogram (#705)

Activities page shows histograms for prompt processing and token generation times. 

Fix: #691
Fix: #703

ui-svelte/src/lib/histogram.test.ts

@@ -52,14 +52,14 @@ describe("calculateHistogramData", () => {
       const values = Array.from({ length: 100 }, (_, i) => i);
       const result = calculateHistogramData(values);
       expect(result).not.toBeNull();
-      expect(result!.bins.length).toBe(20);
+      expect(result!.bins.length).toBe(8);
       const binSum = result!.bins.reduce((s, b) => s + b, 0);
       expect(binSum).toBe(100);
     });
 
     it("places values in correct bins", () => {
       const values = [1, 1, 1, 5, 5, 9, 9, 9];
-      const result = calculateHistogramData(values, { minBins: 3, maxBins: 3, binScaling: 1 });
+      const result = calculateHistogramData(values, { minBins: 3, maxBins: 3 });
       expect(result).not.toBeNull();
       expect(result!.bins.length).toBe(3);
       expect(result!.bins.reduce((s, b) => s + b, 0)).toBe(8);
@@ -114,27 +114,31 @@ describe("calculateHistogramData", () => {
 
   describe("bin count adaptation", () => {
     it("uses minimum bins for small datasets", () => {
-      const values = Array.from({ length: 20 }, (_, i) => i);
+      // n=8: sturges=4, clamped up to minBins=5
+      const values = Array.from({ length: 8 }, (_, i) => i);
       const result = calculateHistogramData(values);
-      expect(result!.bins.length).toBe(10);
+      expect(result!.bins.length).toBe(5);
     });
 
     it("scales bins with dataset size", () => {
+      // n=100: sturges=8
       const values = Array.from({ length: 100 }, (_, i) => i);
       const result = calculateHistogramData(values);
-      expect(result!.bins.length).toBe(20);
+      expect(result!.bins.length).toBe(8);
     });
 
     it("caps bins at maximum", () => {
-      const values = Array.from({ length: 200 }, (_, i) => i);
-      const result = calculateHistogramData(values);
-      expect(result!.bins.length).toBe(30);
+      // n=1000: sturges=11, clamped down to maxBins=10
+      const values = Array.from({ length: 1000 }, (_, i) => i);
+      const result = calculateHistogramData(values, { minBins: 5, maxBins: 10 });
+      expect(result!.bins.length).toBe(10);
     });
 
     it("respects custom options", () => {
+      // n=100: sturges=8, within [minBins=5, maxBins=10]
       const values = Array.from({ length: 100 }, (_, i) => i);
-      const result = calculateHistogramData(values, { minBins: 5, maxBins: 10, binScaling: 2 });
-      expect(result!.bins.length).toBe(10);
+      const result = calculateHistogramData(values, { minBins: 5, maxBins: 10 });
+      expect(result!.bins.length).toBe(8);
     });
   });
 

ui-svelte/src/lib/histogram.ts

@@ -3,13 +3,11 @@ import type { HistogramData } from "./types";
 export interface HistogramOptions {
   minBins?: number;
   maxBins?: number;
-  binScaling?: number;
 }
 
 const DEFAULT_OPTIONS: HistogramOptions = {
-  minBins: 10,
-  maxBins: 30,
-  binScaling: 5,
+  minBins: 5,
+  maxBins: 20,
 };
 
 function percentile(sorted: number[], p: number): number {
@@ -50,8 +48,9 @@ export function calculateHistogramData(
     };
   }
 
-  const { minBins = 10, maxBins = 30, binScaling = 5 } = options;
-  const binCount = Math.min(maxBins, Math.max(minBins, Math.floor(values.length / binScaling)));
+  const { minBins = 5, maxBins = 20 } = options;
+  const sturges = Math.ceil(Math.log2(values.length)) + 1;
+  const binCount = Math.min(maxBins, Math.max(minBins, sturges));
   const binSize = (max - min) / binCount;
 
   const bins = new Array(binCount).fill(0);