Bump to 0.9.6

- Themed scrollbar: thumb/track colors follow --border/--muted-foreground
  so the scrollbar matches light/dark instead of the OS default

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BuWtppPBizG2NQRa31FCRa

app/(app)/devices/page.tsx

@@ -24,7 +24,7 @@ export default async function DevicesPage({
       </div>
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">Known devices</CardTitle>
+          <CardTitle className="text-sm">Known devices</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
           <DevicesTable devices={devices} />

app/(app)/page.tsx

@@ -18,7 +18,7 @@ export default async function DashboardPage() {
   return (
     <div className="flex flex-col gap-8">
       <Card className="bp-glass overflow-hidden">
-        <CardContent className="flex flex-col items-start gap-4 py-8">
+        <CardContent className="flex flex-col items-start gap-4 py-4">
           <BrandMark size={48} animated className="rounded-[9px]" />
           <h1 className="font-heading text-3xl font-semibold">Welcome back</h1>
           <p className="max-w-xl text-sm text-muted-foreground">
@@ -56,7 +56,7 @@ export default async function DashboardPage() {
 
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">Recent sessions</CardTitle>
+          <CardTitle className="text-sm">Recent sessions</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
           <SessionsTable sessions={recentSessions} />

app/(app)/sessions/[id]/page.tsx

@@ -72,7 +72,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
 
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">Intensity timeline</CardTitle>
+          <CardTitle className="text-sm">Intensity timeline</CardTitle>
         </CardHeader>
         <CardContent>
           <SessionTimelineChart timeline={timeline} />
@@ -81,7 +81,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
 
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">Devices</CardTitle>
+          <CardTitle className="text-sm">Devices</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-1">
           {detail.devices.map((d) => (

app/(app)/sessions/page.tsx

@@ -24,7 +24,7 @@ export default async function SessionsPage({
       </div>
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">History</CardTitle>
+          <CardTitle className="text-sm">History</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-3">
           <SessionsTable sessions={sessions} />

app/globals.css

@@ -134,6 +134,29 @@
     }
 }
 
+/* Themed scrollbar - follows --border/--muted-foreground so it swaps with
+   light/dark like everything else, instead of the OS-default bar. */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) transparent;
+}
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-foreground);
+}
+
 /* Animated signature-sweep background - sits behind everything; cards use
    .bp-glass (translucent + blurred) so it shines through instead of being
    fully hidden behind an opaque card surface. */
@@ -181,23 +204,15 @@ body {
 }
 
 /* Console-module surface: translucent + blurred so the animated background
-   sweep shines through, with a hairline border and soft inset top highlight. */
+   sweep shines through. Card's own default ring (components/ui/card.tsx:
+   `ring-1 ring-foreground/10`) still shows - ring-accent recolors it to the
+   accent token instead of resetting it. border-accent is currently a no-op
+   (neither Card nor this rule sets a border-width utility to give it a
+   border to color). */
 .bp-glass {
+  @apply shadow-xs ring-accent border-accent;
   background: color-mix(in srgb, var(--card) 55%, transparent);
   backdrop-filter: blur(20px) saturate(150%);
-  border: 1px solid var(--border);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    background-color 0.2s ease;
-}
-.bp-glass:hover {
-  background: color-mix(in srgb, var(--card) 62%, transparent);
-  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
-    0 10px 30px -14px rgba(0, 0, 0, 0.45);
 }
 
 /* Illuminated indicator dot - reused on connection status and per-actuator

components/control/ButtplugConsole.tsx

@@ -22,6 +22,8 @@ import { DeviceCard } from "./DeviceCard";
 import { RecordControls } from "./RecordControls";
 import { NameSessionDialog } from "./NameSessionDialog";
 import { Card, CardContent } from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Info } from "lucide-react";
 
 interface ActiveSession {
   id: number;
@@ -240,12 +242,13 @@ export function ButtplugConsole() {
       {storeError && <p className="text-sm text-destructive">{storeError}</p>}
 
       {Object.keys(devices).length === 0 ? (
-        <Card className="bp-glass">
+        <Alert className="bp-glass">
-          <CardContent className="text-sm text-muted-foreground">
+          <Info />
-            No devices connected yet. Scan to discover nearby toys, then select one from your browser&apos;s
+          <AlertTitle>No devices connected yet</AlertTitle>
-            pairing prompt.
+          <AlertDescription>
-          </CardContent>
+            Scan to discover nearby toys, then select one from your browser&apos;s pairing prompt.
-        </Card>
+          </AlertDescription>
+        </Alert>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2">
           {Object.values(devices).map((device) => (

components/layout/NavBar.tsx

@@ -4,48 +4,106 @@ import { useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
-import { Menu, Moon, Sun, LogOut } from "lucide-react";
+import { Moon, Sun, LogOut, Gauge, SlidersHorizontal, ListMusic, Bluetooth, BarChart3 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "@/components/ui/sheet";
 import { ConnectionStatus } from "./ConnectionStatus";
 import { BrandMark } from "./BrandMark";
 import { cn } from "@/lib/utils";
 
 const LINKS = [
-  { href: "/", label: "Dashboard" },
+  { href: "/", label: "Dashboard", icon: Gauge },
-  { href: "/control", label: "Control" },
+  { href: "/control", label: "Control", icon: SlidersHorizontal },
-  { href: "/sessions", label: "Sessions" },
+  { href: "/sessions", label: "Sessions", icon: ListMusic },
-  { href: "/devices", label: "Devices" },
+  { href: "/devices", label: "Devices", icon: Bluetooth },
-  { href: "/stats", label: "Stats" },
+  { href: "/stats", label: "Stats", icon: BarChart3 },
 ];
 
 function isActive(pathname: string, href: string): boolean {
   return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
 }
 
+/** Desktop tab strip - borderless chips; the active tab lights up with a
+ * primary-tinted fill, matching the drawer rows' active treatment. */
 function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   return (
     <>
-      {LINKS.map((link) => (
+      {LINKS.map((link) => {
+        const active = isActive(pathname, link.href);
+        return (
           <Link
             key={link.href}
             href={link.href}
             onClick={onNavigate}
             className={cn(
-            "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
+              "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
-            isActive(pathname, link.href)
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:text-foreground",
-              ? "border-primary text-foreground"
-              : "border-transparent text-muted-foreground hover:text-foreground",
             )}
           >
+            <link.icon className={cn("size-3.5", active && "text-primary")} />
             {link.label}
           </Link>
-      ))}
+        );
+      })}
     </>
   );
 }
 
+/** Drawer rows for the mobile menu - icon + label, styled as tappable
+ * console rows rather than the desktop tab strip's underline treatment. */
+function MobileNavLinks({ onNavigate }: { onNavigate: () => void }) {
+  const pathname = usePathname();
+  return (
+    <>
+      {LINKS.map((link) => {
+        const active = isActive(pathname, link.href);
+        return (
+          <Link
+            key={link.href}
+            href={link.href}
+            onClick={onNavigate}
+            className={cn(
+              "flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium transition-colors",
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            )}
+          >
+            <link.icon className={cn("size-4 shrink-0", active && "text-primary")} />
+            {link.label}
+          </Link>
+        );
+      })}
+    </>
+  );
+}
+
+/** Hamburger that morphs into an X - the top/bottom bars rotate into place
+ * and the middle bar collapses, rather than a straight icon swap. */
+function MenuToggleIcon({ open }: { open: boolean }) {
+  return (
+    <span className="relative flex size-4 shrink-0 flex-col items-center justify-center" aria-hidden>
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
+          open ? "translate-y-0 rotate-45" : "-translate-y-[5px] rotate-0",
+        )}
+      />
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-all duration-200 ease-out motion-reduce:transition-none",
+          open ? "scale-x-0 opacity-0" : "scale-x-100 opacity-100",
+        )}
+      />
+      <span
+        className={cn(
+          "absolute h-0.5 w-4 rounded-full bg-current transition-transform duration-300 ease-out motion-reduce:transition-none",
+          open ? "translate-y-0 -rotate-45" : "translate-y-[5px] rotate-0",
+        )}
+      />
+    </span>
+  );
+}
+
 export function NavBar() {
   const { theme, setTheme } = useTheme();
   const router = useRouter();
@@ -65,12 +123,14 @@ export function NavBar() {
           <span className="font-heading text-lg font-semibold">Sexy</span>
         </Link>
 
-        <nav className="hidden items-center gap-1 md:flex">
+        <nav className="hidden items-center gap-1.5 md:flex">
           <NavLinks />
         </nav>
 
         <div className="ml-auto flex items-center gap-2">
           <ConnectionStatus />
+
+          <div className="hidden items-center gap-2 md:flex">
             <Button
               variant="ghost"
               size="icon"
@@ -83,18 +143,53 @@ export function NavBar() {
             <Button variant="ghost" size="icon" aria-label="Log out" onClick={handleLogout}>
               <LogOut className="size-4" />
             </Button>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="md:hidden"
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            onClick={() => setMenuOpen((open) => !open)}
+          >
+            <MenuToggleIcon open={menuOpen} />
+          </Button>
 
           <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
-            <SheetTrigger asChild>
+            <SheetContent side="right" className="w-72 gap-0 p-0">
-              <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
+              <div className="flex items-center gap-2 px-4 pt-4 pb-3">
-                <Menu className="size-4" />
+                <BrandMark size={24} animated />
-              </Button>
+                <SheetTitle className="font-heading text-lg font-semibold">Sexy</SheetTitle>
-            </SheetTrigger>
+              </div>
-            <SheetContent side="right" className="w-64">
+              <SheetDescription className="px-4 pb-3 text-xs">
-              <SheetTitle className="px-4 pt-4">Menu</SheetTitle>
+                Jump to another page or manage your session.
-              <nav className="flex flex-col gap-1 p-4">
+              </SheetDescription>
-                <NavLinks onNavigate={() => setMenuOpen(false)} />
+              <div className="bp-hairline" />
+
+              <nav className="flex flex-1 flex-col gap-1 p-3">
+                <MobileNavLinks onNavigate={() => setMenuOpen(false)} />
               </nav>
+
+              <div className="bp-hairline" />
+              <div className="flex flex-col gap-1 p-3">
+                <button
+                  type="button"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+                >
+                  <Sun className="hidden size-4 dark:block" />
+                  <Moon className="block size-4 dark:hidden" />
+                  {theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleLogout()}
+                  className="flex items-center gap-3 rounded-lg px-3 py-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+                >
+                  <LogOut className="size-4" />
+                  Log out
+                </button>
+              </div>
             </SheetContent>
           </Sheet>
         </div>

components/sessions/ReplayPlayer.tsx

@@ -11,7 +11,8 @@ import { disconnectAll, getButtplugClientHandle, getDevice, startScanning, stopS
 import { SessionPlayer, type SessionEventRow } from "@/lib/buttplug/player";
 import { useButtplugStore } from "@/lib/buttplug/store";
 import type { ActuatorInfo, ReplayDeviceSlot } from "@/lib/buttplug/types";
-import { Pause, Play } from "lucide-react";
+import { Info, Pause, Play } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 interface ReplayDataResponse {
   session: {
@@ -163,12 +164,13 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
           </div>
 
           {connectedDevices.length === 0 && (
-            <Card className="bp-glass">
+            <Alert className="bp-glass">
-              <CardContent className="text-sm text-muted-foreground">
+              <Info />
-                No devices connected yet. Scan to discover nearby toys, then match them to this session&apos;s
+              <AlertTitle>No devices connected yet</AlertTitle>
-                original device slots.
+              <AlertDescription>
-              </CardContent>
+                Scan to discover nearby toys, then match them to this session&apos;s original device slots.
-            </Card>
+              </AlertDescription>
+            </Alert>
           )}
         </>
       ) : (

components/sessions/SessionTimelineChart.tsx

@@ -64,7 +64,29 @@ export function SessionTimelineChart({ timeline }: { timeline: TimelineRow[] })
           className="bp-readout text-xs"
         />
         <YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} className="bp-readout text-xs" />
-        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              formatter={(value, name) => {
+                const itemConfig = config[name as string];
+                return (
+                  <>
+                    <div
+                      className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
+                      style={{ backgroundColor: itemConfig?.color }}
+                    />
+                    <div className="flex flex-1 items-center justify-between gap-4 leading-none">
+                      <span className="text-muted-foreground">{itemConfig?.label ?? name}</span>
+                      <span className="bp-readout font-medium text-foreground">
+                        {typeof value === "number" ? value.toLocaleString() : String(value)}
+                      </span>
+                    </div>
+                  </>
+                );
+              }}
+            />
+          }
+        />
         {series.map(([sessionDeviceId]) => (
           <Area
             key={sessionDeviceId}

components/stats/DeviceUsageTable.tsx

@@ -16,7 +16,7 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
     return (
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle className="text-base">Device usage</CardTitle>
+          <CardTitle className="text-sm">Device usage</CardTitle>
         </CardHeader>
         <CardContent className="text-sm text-muted-foreground">No device activity yet.</CardContent>
       </Card>
@@ -26,7 +26,7 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
   return (
     <Card className="bp-glass">
       <CardHeader>
-        <CardTitle className="text-base">Device usage</CardTitle>
+        <CardTitle className="text-sm">Device usage</CardTitle>
       </CardHeader>
       <CardContent>
         <Table>

components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sexy",
-  "version": "0.8.2",
+  "version": "0.9.6",
   "private": true,
   "scripts": {
     "dev": "next dev",