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