fix(ui): theme the ScrollArea scrollbar to match the app

DESIGN.md

@@ -800,6 +800,14 @@ second outline to a rail that already sits in the gutter.
 </div>
 ```
 
+There are two scroll controls and they must look like one. `themed-scrollbar` is
+the native-scrolling variant above; a Radix `ScrollArea`
+(`components/ui/scroll-area.tsx`) draws its own bar instead, because a surface
+that needs to read or set scroll position (the chat transcript) cannot use a
+plain overflow container. The primitive's bar is deliberately the same control:
+8px track, a 4px `--muted-foreground` pill that darkens to `--foreground` on
+hover. Change them together, never one without the other.
+
 ### Panel header
 
 Implementation: `components/ui/panel-header.tsx`.

src/renderer/src/components/ui/scroll-area.tsx

@@ -38,13 +38,17 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       'flex touch-none select-none transition-colors',
-      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      // 8px track and a 4px painted pill, the same geometry `.themed-scrollbar`
+      // draws with `border: 2px solid transparent; background-clip: content-box`.
+      // The two scroll surfaces must not drift: a Radix `ScrollArea` and an
+      // `overflow-y-auto themed-scrollbar` are the same control to the reader.
+      orientation === 'vertical' && 'h-full w-2',
+      orientation === 'horizontal' && 'h-2 flex-col',
       className
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full border-2 border-transparent bg-clip-content bg-muted-foreground hover:bg-foreground" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ))
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName