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/components/TokenHistogram.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
   import type { HistogramData } from "../lib/types";
 
-  let { data }: { data: HistogramData } = $props();
+  let {
+    data,
+    unit = "tokens/sec",
+    colorClass = "text-blue-500 dark:text-blue-400",
+  }: {
+    data: HistogramData;
+    unit?: string;
+    colorClass?: string;
+  } = $props();
 
-  const height = 55;
-  const padding = { top: 5, right: 45, bottom: 15, left: 45 };
+  const height = 250;
+  const padding = { top: 30, right: 20, bottom: 40, left: 75 };
   const viewBoxWidth = 1200;
   const chartWidth = viewBoxWidth - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
@@ -31,6 +39,24 @@
       opacity="0.3"
     />
 
+    <!-- Y-axis ticks and labels -->
+    {#each [0, 0.5, 1] as fraction}
+      {@const tickCount = Math.round(maxCount * fraction)}
+      {@const tickY = height - padding.bottom - fraction * chartHeight}
+      <line
+        x1={padding.left - 8}
+        y1={tickY}
+        x2={padding.left}
+        y2={tickY}
+        stroke="currentColor"
+        stroke-width="1"
+        opacity="0.4"
+      />
+      <text x={padding.left - 10} y={tickY + 10} font-size="26" fill="currentColor" opacity="0.8" text-anchor="end">
+        {tickCount}
+      </text>
+    {/each}
+
     <!-- X-axis -->
     <line
       x1={padding.left}
@@ -57,9 +83,9 @@
           height={barHeight}
           fill="currentColor"
           opacity="0.6"
-          class="text-blue-500 dark:text-blue-400 hover:opacity-90 transition-opacity cursor-pointer"
+          class="{colorClass} hover:opacity-90 transition-opacity cursor-pointer"
         />
-        <title>{`${binStart.toFixed(1)} - ${binEnd.toFixed(1)} tokens/sec\nCount: ${count}`}</title>
+        <title>{`${binStart.toFixed(1)} - ${binEnd.toFixed(1)} ${unit}\nCount: ${count}`}</title>
       </g>
     {/each}
 
@@ -101,13 +127,19 @@
     />
 
     <!-- X-axis labels -->
-    <text x={padding.left} y={height - 5} font-size="10" fill="currentColor" opacity="0.6" text-anchor="start">
+    <text x={padding.left} y={height - 8} font-size="26" fill="currentColor" opacity="0.8" text-anchor="start">
       {data.min.toFixed(1)}
     </text>
 
-    <text x={viewBoxWidth - padding.right} y={height - 5} font-size="10" fill="currentColor" opacity="0.6" text-anchor="end">
+    <text
+      x={viewBoxWidth - padding.right}
+      y={height - 8}
+      font-size="26"
+      fill="currentColor"
+      opacity="0.8"
+      text-anchor="end"
+    >
       {data.max.toFixed(1)}
     </text>
-
   </svg>
 </div>