Left rail restructure + Computer panel as a right-anchored overlay

PART 2 — panel positioning (the 'pushes the chat left' root cause):
DevicePanel was an in-flow flex sibling, so opening it consumed width and
shoved the chat. Now phone/tablet anchor it as an ABSOLUTE right-edge
overlay (md:absolute right-0 top-0 h-full z-30, w-[448px]/w-[550px]) so
the chat keeps full width and does NOT reflow; only 'full' stays in-flow
(grow-[4]) and lets the chat shrink. The chat row is now relative; the
aside is pointer-events-none with the screen card pointer-events-auto so
the header toggles/close stay clickable under the overlay's transparent
top padding. Verified live: composer.left is identical (472px) panel
open vs closed in tablet — the chat no longer shifts.

PART 1 — left rail:
- Logo in its own 80px header row as a 48px black rounded-2xl brand tile
  with a coral PawPrint mark (our placeholder logo) + sr-only 'clawmates'.
- Agent tiles bumped to 58px (Avatar 'rail' size + rounded-[20px]
  squircle), centered, gap-1, 2px coral active ring (rounded-[22px]).
- Hover-revealed ⋯ menu per agent row (new AgentRowMenu): a 176px #1A1A1A
  popover with Pin + Settings rows (coral 15px icons, 14px labels), closes
  on outside-click/Escape. Pin pins the claw to the top of the rail
  (persisted in localStorage, client-side); Settings deep-links to that
  claw's Computer → Settings (the claw redirect now forwards ?app=).

86 unit + 31 functional E2E green.

Co-Authored-By: Claude Fable 5 <[email protected]>

frontend/src/components/ui/Avatar.tsx

@@ -13,7 +13,7 @@ const SIZES = {
   sm: "size-6 text-xxs",
   md: "size-8 text-xs",
   lg: "size-16 text-xl",
-  rail: "size-12 text-base" /* 48px claw rail tile */,
+  rail: "size-[58px] text-xl" /* 58px claw rail tile */,
   chat: "size-[50px] text-base" /* assistant message avatar */,
   header: "size-[58px] text-2xl" /* chat-header identity */,
   welcome: "size-[126px] text-4xl" /* empty-state hero */,
@@ -22,6 +22,7 @@ const SIZES = {
 /* Squircle radius scales with the tile so big avatars read as rounded as
    the 48px rail tile (a flat 17px looks square at 126px). */
 const SQUIRCLE_RADIUS: Partial<Record<keyof typeof SIZES, string>> = {
+  rail: "rounded-[20px]",
   header: "rounded-[20px]",
   welcome: "rounded-[40px]",
 };