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/shell/AgentRosterItem.tsx

@@ -1,53 +1,69 @@
+"use client";
+
 import Link from "next/link";
 
 import type { Agent } from "@/lib/api/schemas";
 import { Avatar } from "@/components/ui/Avatar";
+import { AgentRowMenu } from "./AgentRowMenu";
 
-/** One claw in the rail stack (measured): 48px squircle avatar with a 2px
- *  coral ring when its chat is open, name beneath, online dot. */
+/** One claw in the rail stack (measured): 58px squircle avatar with a 2px
+ *  coral ring when its chat is open, name beneath, online dot, and a
+ *  hover-revealed ⋯ menu (Pin / Settings). */
 export function AgentRosterItem({
   agent,
   active = false,
+  pinned = false,
+  onTogglePin = () => {},
 }: {
   agent: Agent;
   active?: boolean;
+  pinned?: boolean;
+  onTogglePin?: (id: string) => void;
 }) {
   return (
-    <Link
-      href={`/claws/${agent.id}`}
-      aria-current={active ? "page" : undefined}
-      className="group flex w-full flex-col items-center gap-1 py-1.5"
-    >
-      <span
-        className={`rounded-[19px] p-0.5 transition-colors duration-(--duration-normal) ease-app ${
-          active ? "ring-2 ring-coral" : ""
-        }`}
+    <div className="group relative flex flex-col items-center">
+      <Link
+        href={`/claws/${agent.id}`}
+        aria-current={active ? "page" : undefined}
+        className="flex w-full flex-col items-center gap-1"
       >
-        <span className="relative inline-flex">
-          <Avatar
-            name={agent.name}
-            accent={agent.accent}
-            size="rail"
-            shape="squircle"
-          />
-          {agent.status === "online" && (
-            <span
-              role="status"
-              aria-label={`${agent.name} is online`}
-              className="absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-background bg-green-500"
+        <span
+          className={`rounded-[22px] p-0.5 transition-colors duration-(--duration-normal) ease-app ${
+            active ? "ring-2 ring-coral" : ""
+          }`}
+        >
+          <span className="relative inline-flex">
+            <Avatar
+              name={agent.name}
+              accent={agent.accent}
+              size="rail"
+              shape="squircle"
             />
-          )}
+            {agent.status === "online" && (
+              <span
+                role="status"
+                aria-label={`${agent.name} is online`}
+                className="absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-background bg-green-500"
+              />
+            )}
+          </span>
         </span>
-      </span>
-      <span
-        className={`max-w-full truncate text-xs transition-colors duration-(--duration-normal) ease-app ${
-          active
-            ? "text-foreground"
-            : "text-muted-foreground group-hover:text-foreground"
-        }`}
-      >
-        {agent.name}
-      </span>
-    </Link>
+        <span
+          className={`max-w-full truncate text-xs transition-colors duration-(--duration-normal) ease-app ${
+            active
+              ? "text-foreground"
+              : "text-muted-foreground group-hover:text-foreground"
+          }`}
+        >
+          {agent.name}
+        </span>
+      </Link>
+      <AgentRowMenu
+        agentId={agent.id}
+        agentName={agent.name}
+        pinned={pinned}
+        onTogglePin={onTogglePin}
+      />
+    </div>
   );
 }