Restyle UI with a channel-strip console look and brand icon

Adds a pink/purple/blue SVG brand mark (favicon + header) and reworks
the visual language around the app's actual interaction - fader-driven
device control - via LED-style indicators, mono instrument readouts,
hairline-framed cards, console-tab nav, and an oscilloscope-style
session timeline. Leaves components/ui/* untouched, restyling only via
design tokens and the app's own composed components. Also fixes a
proxy.ts matcher gap that was gating /icon.svg behind auth.

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

components/control/ActuatorSlider.tsx

@@ -12,20 +12,17 @@ interface ActuatorSliderProps {
 
 export function ActuatorSlider({ actuator, value, transmitting, onChange }: ActuatorSliderProps) {
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="flex flex-col gap-2 rounded-md border border-border/70 bg-background/40 p-3">
       <div className="flex items-center justify-between text-xs">
-        <span className="font-medium text-foreground">{actuator.descriptor}</span>
-        <span className={transmitting ? "bp-gradient-text font-semibold" : "text-muted-foreground"}>
+        <span className="flex items-center gap-2 font-medium text-foreground">
+          <span className="bp-led" data-on={transmitting} aria-hidden />
+          {actuator.descriptor}
+        </span>
+        <span className="bp-readout text-sm text-muted-foreground data-[on=true]:text-primary" data-on={transmitting}>
           {Math.round(value * 100)}%
         </span>
       </div>
-      <Slider
-        value={[value * 100]}
-        min={0}
-        max={100}
-        step={1}
-        onValueChange={([v]) => onChange(v / 100)}
-      />
+      <Slider value={[value * 100]} min={0} max={100} step={1} onValueChange={([v]) => onChange(v / 100)} />
     </div>
   );
 }

components/control/DeviceCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ActuatorSlider } from "./ActuatorSlider";
 import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
@@ -22,13 +22,14 @@ export function DeviceCard({
 }: DeviceCardProps) {
   return (
     <Card className="bp-glass">
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>{device.displayName ?? device.name}</CardTitle>
+      <CardHeader className="flex flex-row items-center justify-between pb-3">
+        <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
         <Button variant="outline" size="sm" onClick={onStop}>
           Stop
         </Button>
       </CardHeader>
-      <CardContent className="flex flex-col gap-4">
+      <div className="bp-hairline mx-4" />
+      <CardContent className="flex flex-col gap-3 pt-3">
         {device.actuators.length === 0 ? (
           <p className="text-sm text-muted-foreground">No controllable actuators reported.</p>
         ) : (

components/devices/DevicesTable.tsx

@@ -66,8 +66,8 @@ export function DevicesTable({ devices }: { devices: DeviceRow[] }) {
             <TableCell>
               <DeviceNameCell device={d} />
             </TableCell>
-            <TableCell className="text-muted-foreground">{d.bleName}</TableCell>
-            <TableCell className="text-muted-foreground">
+            <TableCell className="bp-readout text-muted-foreground">{d.bleName}</TableCell>
+            <TableCell className="bp-readout text-muted-foreground">
               {d.lastConnectedAt ? new Date(d.lastConnectedAt).toLocaleString() : "Never"}
             </TableCell>
           </TableRow>

components/layout/BrandMark.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+
+interface BrandMarkProps {
+  size?: number;
+  className?: string;
+}
+
+/** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
+export function BrandMark({ size = 28, className }: BrandMarkProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0", className)}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="bpGradMark" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#ff6fb0" />
+          <stop offset="52%" stopColor="#b34bde" />
+          <stop offset="100%" stopColor="#4f7fe0" />
+        </linearGradient>
+      </defs>
+      <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
+      <path
+        d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+        fill="rgba(255,255,255,0.22)"
+      />
+      <polyline
+        points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1.7}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

components/layout/ConnectionStatus.tsx

@@ -8,15 +8,10 @@ export function ConnectionStatus() {
   const deviceCount = useButtplugStore((s) => Object.keys(s.devices).length);
 
   return (
-    <div className="flex items-center gap-2 rounded-full border border-border bg-card/60 px-3 py-1 text-xs">
-      <span
-        className={cn(
-          "size-2 rounded-full",
-          connected ? "bg-primary bp-pulse" : "bg-muted-foreground/50",
-        )}
-      />
-      <span className="text-muted-foreground">
-        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "Not connected"}
+    <div className="flex items-center gap-2 rounded-md border border-border bg-card/60 px-3 py-1 text-xs">
+      <span className={cn("bp-led", connected && "bp-pulse")} data-on={connected} aria-hidden />
+      <span className="bp-readout text-muted-foreground">
+        {connected ? `${deviceCount} device${deviceCount === 1 ? "" : "s"} connected` : "not connected"}
       </span>
     </div>
   );

components/layout/NavBar.tsx

@@ -7,6 +7,7 @@ import { Menu, Moon, Sun, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { ConnectionStatus } from "./ConnectionStatus";
+import { BrandMark } from "./BrandMark";
 import { cn } from "@/lib/utils";
 
 const LINKS = [
@@ -28,10 +29,10 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           href={link.href}
           onClick={onNavigate}
           className={cn(
-            "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
+            "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
             pathname === link.href
-              ? "bg-primary/15 text-primary"
-              : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground",
           )}
         >
           {link.label}
@@ -54,8 +55,9 @@ export function NavBar() {
   return (
     <header className="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur-lg">
       <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
-        <Link href="/" className="font-display bp-gradient-text mr-2 text-lg font-semibold">
-          sexy
+        <Link href="/" className="mr-2 flex items-center gap-2">
+          <BrandMark size={26} />
+          <span className="font-heading bp-gradient-text text-lg font-semibold">SEXY</span>
         </Link>
 
         <nav className="hidden items-center gap-1 md:flex">

components/recordings/RecordingsTable.tsx

@@ -64,11 +64,13 @@ export function RecordingsTable({ recordings }: { recordings: RecordingRow[] })
                 {r.name}
               </Link>
             </TableCell>
-            <TableCell>{formatDuration(r.durationMs)}</TableCell>
+            <TableCell className="bp-readout">{formatDuration(r.durationMs)}</TableCell>
             <TableCell>
-              <Badge variant="secondary">{r.playCount}</Badge>
+              <Badge variant="secondary" className="bp-readout">
+                {r.playCount}
+              </Badge>
             </TableCell>
-            <TableCell className="text-muted-foreground">
+            <TableCell className="bp-readout text-muted-foreground">
               {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
             </TableCell>
             <TableCell className="flex justify-end gap-1">

components/sessions/SessionTimelineChart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart";
 
 export interface TimelineRow {
@@ -46,27 +46,36 @@ export function SessionTimelineChart({ timeline }: { timeline: TimelineRow[] })
 
   return (
     <ChartContainer config={config} className="h-64 w-full">
-      <LineChart data={data}>
-        <CartesianGrid vertical={false} />
+      <AreaChart data={data}>
+        <defs>
+          {series.map(([sessionDeviceId]) => (
+            <linearGradient key={sessionDeviceId} id={`fill-${seriesKey(sessionDeviceId)}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={`var(--color-${seriesKey(sessionDeviceId)})`} stopOpacity={0.5} />
+              <stop offset="95%" stopColor={`var(--color-${seriesKey(sessionDeviceId)})`} stopOpacity={0.03} />
+            </linearGradient>
+          ))}
+        </defs>
+        <CartesianGrid vertical={false} stroke="var(--border)" />
         <XAxis
           dataKey="bucket"
           tickFormatter={(v: number) => `${Math.round(v / 1000)}s`}
           tickLine={false}
           axisLine={false}
+          className="bp-readout text-xs"
         />
-        <YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} />
+        <YAxis domain={[0, 100]} tickLine={false} axisLine={false} width={32} className="bp-readout text-xs" />
         <ChartTooltip content={<ChartTooltipContent />} />
         {series.map(([sessionDeviceId]) => (
-          <Line
+          <Area
             key={sessionDeviceId}
             type="monotone"
             dataKey={seriesKey(sessionDeviceId)}
             stroke={`var(--color-${seriesKey(sessionDeviceId)})`}
             strokeWidth={2}
-            dot={false}
+            fill={`url(#fill-${seriesKey(sessionDeviceId)})`}
           />
         ))}
-      </LineChart>
+      </AreaChart>
     </ChartContainer>
   );
 }

components/sessions/SessionsTable.tsx

@@ -68,8 +68,10 @@ export function SessionsTable({ sessions }: { sessions: SessionRow[] }) {
               <Badge variant={s.kind === "live" ? "default" : "secondary"}>{s.kind}</Badge>
             </TableCell>
             <TableCell className="text-muted-foreground">{s.status}</TableCell>
-            <TableCell className="text-muted-foreground">{new Date(s.startedAt).toLocaleString()}</TableCell>
-            <TableCell>{formatDuration(s.durationMs)}</TableCell>
+            <TableCell className="bp-readout text-muted-foreground">
+              {new Date(s.startedAt).toLocaleString()}
+            </TableCell>
+            <TableCell className="bp-readout">{formatDuration(s.durationMs)}</TableCell>
             <TableCell className="text-right">
               <Button variant="ghost" size="icon-sm" onClick={() => void handleDelete(s.id)} aria-label="Delete">
                 <Trash2 className="size-3.5" />

components/stats/DeviceUsageTable.tsx

@@ -30,10 +30,10 @@ export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
         {devices.map((d) => (
           <TableRow key={d.deviceId}>
             <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
-            <TableCell>{d.sessionCount}</TableCell>
-            <TableCell>{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
-            <TableCell>{d.commandCount}</TableCell>
-            <TableCell className="text-muted-foreground">
+            <TableCell className="bp-readout">{d.sessionCount}</TableCell>
+            <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
+            <TableCell className="bp-readout">{d.commandCount}</TableCell>
+            <TableCell className="bp-readout text-muted-foreground">
               {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
             </TableCell>
           </TableRow>

components/stats/RecordingLibraryStats.tsx

@@ -16,13 +16,13 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Recordings</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{stats.count}</CardContent>
+          <CardContent className="bp-readout text-3xl">{stats.count}</CardContent>
         </Card>
         <Card className="bp-glass">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Avg length</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">
+          <CardContent className="bp-readout text-3xl">
             {Math.round(stats.avgDurationMs / 1000)}s
           </CardContent>
         </Card>
@@ -30,7 +30,7 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Total plays</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{stats.totalPlayCount}</CardContent>
+          <CardContent className="bp-readout text-3xl">{stats.totalPlayCount}</CardContent>
         </Card>
       </div>
 
@@ -47,8 +47,8 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
             {stats.list.map((r) => (
               <TableRow key={r.id}>
                 <TableCell className="font-medium">{r.name}</TableCell>
-                <TableCell>{r.playCount}</TableCell>
-                <TableCell className="text-muted-foreground">
+                <TableCell className="bp-readout">{r.playCount}</TableCell>
+                <TableCell className="bp-readout text-muted-foreground">
                   {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
                 </TableCell>
               </TableRow>

components/stats/SessionsSummaryCards.tsx

@@ -23,19 +23,19 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Completed sessions</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{summary.count}</CardContent>
+          <CardContent className="bp-readout text-3xl">{summary.count}</CardContent>
         </Card>
         <Card className="bp-glass">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Total time</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
+          <CardContent className="bp-readout text-3xl">{formatHours(summary.totalDurationMs)}</CardContent>
         </Card>
         <Card className="bp-glass">
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Avg session length</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">
+          <CardContent className="bp-readout text-3xl">
             {Math.round(summary.avgDurationMs / 60_000)}m
           </CardContent>
         </Card>