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