Bump to 0.8.2

Devices table's editable name field now matches the session
title/description underline style app-wide (hover/focus turn primary,
primary caret, default text color), and Devices moved before Stats in
the nav order.

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

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">
+    <div className="flex items-center gap-2">
-      <Input
+      <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

@@ -15,8 +15,8 @@ const LINKS = [
   { href: "/", label: "Dashboard" },
   { href: "/control", label: "Control" },
   { href: "/sessions", label: "Sessions" },
-  { href: "/stats", label: "Stats" },
   { href: "/devices", label: "Devices" },
+  { href: "/stats", label: "Stats" },
 ];
 
 function isActive(pathname: string, href: string): boolean {

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

package.json

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