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

app/(app)/control/page.tsx

@@ -4,7 +4,7 @@ export default function ControlPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Control</h1>
+        <h1 className="font-heading text-2xl font-semibold">Control</h1>
         <p className="text-sm text-muted-foreground">
           Scan for devices, connect, and control them live. Every command runs directly from your browser
           to the device over Web Bluetooth - the server never sees it in real time.

app/(app)/devices/page.tsx

@@ -10,7 +10,7 @@ export default async function DevicesPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Devices</h1>
+        <h1 className="font-heading text-2xl font-semibold">Devices</h1>
         <p className="text-sm text-muted-foreground">Devices seen across past sessions. Give them friendlier names.</p>
       </div>
       <Card className="bp-glass">

app/(app)/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { BrandMark } from "@/components/layout/BrandMark";
 import { listRecordings } from "@/lib/db/queries/recordings";
 import { listPlaySessions } from "@/lib/db/queries/play-sessions";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
@@ -23,7 +24,8 @@ export default async function DashboardPage() {
     <div className="flex flex-col gap-8">
       <Card className="bp-glass overflow-hidden">
         <CardContent className="flex flex-col items-start gap-4 py-8">
-          <h1 className="font-display bp-gradient-text text-3xl font-semibold">Welcome back</h1>
+          <BrandMark size={40} className="bp-pulse rounded-[9px]" />
+          <h1 className="font-heading bp-gradient-text text-3xl font-semibold">Welcome back</h1>
           <p className="max-w-xl text-sm text-muted-foreground">
             Scan for nearby devices, take control, and record sessions to replay later - all running
             directly from your browser over Web Bluetooth.
@@ -39,13 +41,13 @@ export default async function DashboardPage() {
           <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 play time</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">
+          <CardContent className="bp-readout text-3xl">
             {(summary.totalDurationMs / 3_600_000).toFixed(1)}h
           </CardContent>
         </Card>
@@ -53,7 +55,7 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle className="text-sm text-muted-foreground">Saved recordings</CardTitle>
           </CardHeader>
-          <CardContent className="font-display text-3xl">{recordings.length}</CardContent>
+          <CardContent className="bp-readout text-3xl">{recordings.length}</CardContent>
         </Card>
       </div>
 
@@ -62,18 +64,17 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle>Recent recordings</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-2">
+          <CardContent className="flex flex-col">
             {recentRecordings.length === 0 && (
               <p className="text-sm text-muted-foreground">Nothing saved yet.</p>
             )}
-            {recentRecordings.map((r) => (
-              <Link
-                key={r.id}
-                href={`/recordings/${r.id}`}
-                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
-              >
-                <span>{r.name}</span>
-                <span className="text-muted-foreground">{r.playCount} plays</span>
+            {recentRecordings.map((r, i) => (
+              <Link key={r.id} href={`/recordings/${r.id}`} className="group">
+                {i > 0 && <div className="bp-hairline" />}
+                <div className="flex items-center justify-between px-1 py-2 text-sm">
+                  <span className="group-hover:text-primary">{r.name}</span>
+                  <span className="bp-readout text-xs text-muted-foreground">{r.playCount} plays</span>
+                </div>
               </Link>
             ))}
           </CardContent>
@@ -83,16 +84,17 @@ export default async function DashboardPage() {
           <CardHeader>
             <CardTitle>Recent sessions</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-2">
+          <CardContent className="flex flex-col">
             {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
-            {recentSessions.map((s) => (
-              <Link
-                key={s.id}
-                href={`/sessions/${s.id}`}
-                className="flex items-center justify-between rounded-lg px-2 py-1.5 text-sm hover:bg-muted"
-              >
-                <span>{s.name ?? `Session #${s.id}`}</span>
-                <span className="text-muted-foreground">{new Date(s.startedAt).toLocaleDateString()}</span>
+            {recentSessions.map((s, i) => (
+              <Link key={s.id} href={`/sessions/${s.id}`} className="group">
+                {i > 0 && <div className="bp-hairline" />}
+                <div className="flex items-center justify-between px-1 py-2 text-sm">
+                  <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
+                  <span className="bp-readout text-xs text-muted-foreground">
+                    {new Date(s.startedAt).toLocaleDateString()}
+                  </span>
+                </div>
               </Link>
             ))}
           </CardContent>

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

@@ -23,7 +23,7 @@ export default async function RecordingDetailPage({ params }: { params: Promise<
     <div className="flex flex-col gap-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="font-display text-2xl font-semibold">{recording.name}</h1>
+          <h1 className="font-heading text-2xl font-semibold">{recording.name}</h1>
           {recording.description && <p className="text-sm text-muted-foreground">{recording.description}</p>}
         </div>
         <Button asChild>

app/(app)/recordings/[id]/replay/page.tsx

@@ -4,7 +4,7 @@ export default async function ReplayPage({ params }: { params: Promise<{ id: str
   const { id } = await params;
   return (
     <div className="flex flex-col gap-6">
-      <h1 className="font-display text-2xl font-semibold">Replay</h1>
+      <h1 className="font-heading text-2xl font-semibold">Replay</h1>
       <ReplayPlayerLoader recordingId={Number(id)} />
     </div>
   );

app/(app)/recordings/page.tsx

@@ -10,7 +10,7 @@ export default async function RecordingsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Recordings</h1>
+        <h1 className="font-heading text-2xl font-semibold">Recordings</h1>
         <p className="text-sm text-muted-foreground">Saved sessions you can replay against connected devices.</p>
       </div>
       <Card className="bp-glass">

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

@@ -21,7 +21,7 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
+        <h1 className="font-heading text-2xl font-semibold">{detail.session.name ?? `Session #${detail.session.id}`}</h1>
         <p className="text-sm text-muted-foreground">
           {detail.session.kind} · {detail.session.status} · {formatDuration(detail.session.durationMs)}
         </p>

app/(app)/sessions/page.tsx

@@ -10,7 +10,7 @@ export default async function SessionsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Sessions</h1>
+        <h1 className="font-heading text-2xl font-semibold">Sessions</h1>
         <p className="text-sm text-muted-foreground">History of live control and replay sessions.</p>
       </div>
       <Card className="bp-glass">

app/(app)/stats/page.tsx

@@ -20,7 +20,7 @@ export default async function StatsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div>
-        <h1 className="font-display text-2xl font-semibold">Stats</h1>
+        <h1 className="font-heading text-2xl font-semibold">Stats</h1>
         <p className="text-sm text-muted-foreground">Usage across sessions, devices, and your recording library.</p>
       </div>