Docs, ticks, working app

webapp/src/components/LogTimeline.tsx

@@ -28,7 +28,7 @@ export function LogTimeline({
     const rect = containerRef.current?.getBoundingClientRect()
     if (!rect) return domainStart
     const ratio = Math.min(1, Math.max(0, (x - rect.left) / rect.width))
-    return domainStart + ratio * domainSpan
+    return Math.round(domainStart + ratio * domainSpan)
   }
 
   function handleMouseDown(e: React.MouseEvent) {
@@ -57,18 +57,18 @@ export function LogTimeline({
     : null
 
   return (
-    <div className="border-b border-neutral-800 p-3">
-      <div className="mb-1 flex items-center justify-between text-xs text-neutral-500">
+    <div className="border-b border-border p-3">
+      <div className="mb-1 flex items-center justify-between text-xs text-text-subtle">
         <span>Timeline</span>
         {range && (
-          <button className="underline hover:text-neutral-300" onClick={() => onSelectRange(null)}>
+          <button className="underline hover:text-text-secondary" onClick={() => onSelectRange(null)}>
             Clear selection
           </button>
         )}
       </div>
       <div
         ref={containerRef}
-        className="relative h-24 w-full cursor-crosshair select-none rounded bg-neutral-900"
+        className="relative h-24 w-full cursor-crosshair select-none rounded bg-surface-1"
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
@@ -81,7 +81,7 @@ export function LogTimeline({
           {buckets.map((b) => (
             <div
               key={b.start_ms}
-              className="min-w-[2px] flex-1 rounded-t bg-sky-500/70"
+              className="min-w-[2px] flex-1 rounded-t bg-accent/70"
               style={{ height: `${(b.count / maxCount) * 100}%` }}
               title={`${new Date(b.start_ms).toLocaleTimeString()} — ${b.count}`}
             />
@@ -89,7 +89,7 @@ export function LogTimeline({
         </div>
         {selRect && (
           <div
-            className="pointer-events-none absolute top-0 h-full border border-sky-400 bg-sky-400/20"
+            className="pointer-events-none absolute top-0 h-full border border-accent bg-accent/20"
             style={{ left: selRect.left - (containerRef.current?.getBoundingClientRect().left ?? 0), width: selRect.width }}
           />
         )}