Bump to 0.9.4

- SessionTimelineChart: adds explicit gap between the tooltip's device
  label and its value via a custom formatter, instead of relying on
  justify-between's leftover-space spacing, which collapsed to zero in
  the narrow single-item tooltip

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

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">

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

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SessionTimelineChart } from "@/components/sessions/SessionTimelineChart";
 import { SessionTitleEditor } from "@/components/sessions/SessionTitleEditor";
 import { SessionDescriptionEditor } from "@/components/sessions/SessionDescriptionEditor";
+import { SessionDeleteButton } from "@/components/sessions/SessionDeleteButton";
 import { STATUS_VARIANT } from "@/components/sessions/session-status";
 import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
@@ -65,6 +66,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
               </Link>
             </Button>
           )}
+          <SessionDeleteButton sessionId={detail.session.id} sessionName={detail.session.name} />
         </div>
       </div>
 

app/globals.css

@@ -181,23 +181,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">
-          <CardContent className="py-6 text-sm text-muted-foreground">
-            No devices connected yet. Scan to discover nearby toys, then select one from your browser&apos;s
-            pairing prompt.
-          </CardContent>
-        </Card>
+        <Alert className="bp-glass">
+          <Info />
+          <AlertTitle>No devices connected yet</AlertTitle>
+          <AlertDescription>
+            Scan to discover nearby toys, then select one from your browser&apos;s pairing prompt.
+          </AlertDescription>
+        </Alert>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2">
           {Object.values(devices).map((device) => (

components/devices/DevicesTable.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Input } from "@/components/ui/input";
 import { Check, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
@@ -55,23 +54,23 @@ function DeviceNameCell({ device }: { device: DeviceRow }) {
   }, [status]);
 
   return (
-    <div className="relative w-48">
-      <Input
+    <div className="flex items-center gap-2">
+      <input
         value={value}
         onChange={(e) => setValue(e.target.value)}
-        className="h-8 pr-8"
         aria-label="Device display name"
+        className="max-w-48 min-w-0 border-b-2 border-transparent bg-transparent text-sm font-medium text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary [field-sizing:content]"
       />
-      <div className="pointer-events-none absolute inset-y-0 right-2 flex w-3.5 items-center justify-center">
+      <div className="relative flex size-4 shrink-0 items-center justify-center">
         <Loader2
           className={cn(
-            "absolute size-3.5 animate-spin text-muted-foreground transition-opacity",
+            "absolute size-4 animate-spin text-muted-foreground transition-opacity",
             status === "saving" ? "opacity-100" : "opacity-0",
           )}
         />
         <Check
           className={cn(
-            "absolute size-3.5 text-primary transition-opacity",
+            "absolute size-4 text-primary transition-opacity",
             status === "saved" ? "opacity-100" : "opacity-0",
           )}
         />

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: "/control", label: "Control" },
-  { href: "/sessions", label: "Sessions" },
-  { href: "/stats", label: "Stats" },
-  { href: "/devices", label: "Devices" },
+  { href: "/", label: "Dashboard", icon: Gauge },
+  { href: "/control", label: "Control", icon: SlidersHorizontal },
+  { href: "/sessions", label: "Sessions", icon: ListMusic },
+  { href: "/devices", label: "Devices", icon: Bluetooth },
+  { 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",
-            isActive(pathname, link.href)
-              ? "border-primary text-foreground"
-              : "border-transparent text-muted-foreground hover:text-foreground",
+              "flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors",
+              active ? "bg-primary/10 text-foreground" : "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>
-              <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
-                <Menu className="size-4" />
-              </Button>
-            </SheetTrigger>
-            <SheetContent side="right" className="w-64">
-              <SheetTitle className="px-4 pt-4">Menu</SheetTitle>
-              <nav className="flex flex-col gap-1 p-4">
-                <NavLinks onNavigate={() => setMenuOpen(false)} />
+            <SheetContent side="right" className="w-72 gap-0 p-0">
+              <div className="flex items-center gap-2 px-4 pt-4 pb-3">
+                <BrandMark size={24} animated />
+                <SheetTitle className="font-heading text-lg font-semibold">Sexy</SheetTitle>
+              </div>
+              <SheetDescription className="px-4 pb-3 text-xs">
+                Jump to another page or manage your session.
+              </SheetDescription>
+              <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,17 +164,18 @@ export function ReplayPlayer({ sessionId }: { sessionId: number }) {
           </div>
 
           {connectedDevices.length === 0 && (
-            <Card className="bp-glass">
-              <CardContent className="py-6 text-sm text-muted-foreground">
-                No devices connected yet. Scan to discover nearby toys, then match them to this session&apos;s
-                original device slots.
-              </CardContent>
-            </Card>
+            <Alert className="bp-glass">
+              <Info />
+              <AlertTitle>No devices connected yet</AlertTitle>
+              <AlertDescription>
+                Scan to discover nearby toys, then match them to this session&apos;s original device slots.
+              </AlertDescription>
+            </Alert>
           )}
         </>
       ) : (
         <Card className="bp-glass">
-          <CardContent className="flex flex-col gap-3 py-6">
+          <CardContent className="flex flex-col gap-3">
             {replayTargets.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {replayTargets.map((t) => (

components/sessions/SessionDeleteButton.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Trash2 } from "lucide-react";
+import { toast } from "sonner";
+
+export function SessionDeleteButton({ sessionId, sessionName }: { sessionId: number; sessionName: string | null }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  async function handleDelete() {
+    setDeleting(true);
+    const res = await fetch(`/api/sessions/${sessionId}`, { method: "DELETE" });
+    setDeleting(false);
+    if (res.ok) {
+      toast.success("Session deleted");
+      router.push("/sessions");
+      router.refresh();
+    } else {
+      toast.error("Could not delete session");
+    }
+  }
+
+  return (
+    <>
+      <Button variant="ghost" size="icon-sm" onClick={() => setOpen(true)} aria-label="Delete session">
+        <Trash2 className="size-4" />
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete session?</DialogTitle>
+            <DialogDescription>
+              This permanently deletes{" "}
+              <span className="font-medium text-foreground">{sessionName ?? `Session #${sessionId}`}</span> and all
+              of its recorded events. This can&apos;t be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+              {deleting ? "Deleting..." : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

components/sessions/SessionDescriptionEditor.tsx

@@ -60,7 +60,7 @@ export function SessionDescriptionEditor({
         placeholder="Add a description..."
         aria-label="Session description"
         rows={1}
-        className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-border focus:border-b-foreground/40 focus:text-foreground sm:max-w-xl [field-sizing:content]"
+        className="max-w-full min-w-0 resize-none border-b-2 border-transparent bg-transparent text-sm text-muted-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/60 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
       />
       <div className="relative mt-0.5 flex size-4 shrink-0 items-center justify-center">
         <Loader2

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/sessions/SessionTitleEditor.tsx

@@ -52,7 +52,7 @@ export function SessionTitleEditor({ sessionId, initialName }: { sessionId: numb
         onChange={(e) => setValue(e.target.value)}
         placeholder={`Session #${sessionId}`}
         aria-label="Session name"
-        className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-border focus:border-b-foreground/40 sm:max-w-xl [field-sizing:content]"
+        className="max-w-full min-w-0 border-b-2 border-transparent bg-transparent font-heading text-2xl font-semibold text-foreground caret-primary outline-none transition-colors placeholder:text-muted-foreground/70 hover:border-b-primary focus:border-b-primary sm:max-w-xl [field-sizing:content]"
       />
       <div className="relative flex size-4 shrink-0 items-center justify-center">
         <Loader2

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.0",
+  "version": "0.9.4",
   "private": true,
   "scripts": {
     "dev": "next dev",