Computer panel: absolute overlay in ALL states + proportional widths + rail collapse

The previous pass left 'full' as an in-flow flex sibling, so it fought the
chat for layout space and overlapped (chat crushed to a sliver, panel
relative on top). Now the panel is an absolute right-anchored overlay in
EVERY state (never in-flow) — the chat keeps full width and never reflows;
opening the panel just covers the right N%:
- phone  → md:w-[448px]
- tablet → md:w-[67%]   (≈ the measured 847px at 1440)
- full   → md:w-full    (covers everything right of the rail)
Transition is now plain transition-[width] on the absolute aside.

Rail collapse in full mode: LeftRail reads ?device, and when the panel is
open in 'full' it collapses 176→80px, icon-only — labels/credits/user-text
hidden (md+) via a group/rail data-collapsed flag, animated in parallel
with the panel via transition-[transform,width]. Verified at 1440: tablet
panel=847 rail=176, phone=448, full panel=1360 rail=80; chat composer.left
stays 472 in phone/tablet (no shift). 24px card inset + 32px radius kept
throughout.

86 unit + 31 functional E2E green.

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

frontend/src/components/shell/AgentRosterItem.tsx

@@ -49,7 +49,7 @@ export function AgentRosterItem({
           </span>
         </span>
         <span
-          className={`max-w-full truncate text-xs transition-colors duration-(--duration-normal) ease-app ${
+          className={`max-w-full truncate text-xs transition-colors duration-(--duration-normal) ease-app md:group-data-[collapsed=true]/rail:hidden ${
             active
               ? "text-foreground"
               : "text-muted-foreground group-hover:text-foreground"
@@ -58,12 +58,14 @@ export function AgentRosterItem({
           {agent.name}
         </span>
       </Link>
-      <AgentRowMenu
-        agentId={agent.id}
-        agentName={agent.name}
-        pinned={pinned}
-        onTogglePin={onTogglePin}
-      />
+      <div className="md:group-data-[collapsed=true]/rail:hidden">
+        <AgentRowMenu
+          agentId={agent.id}
+          agentName={agent.name}
+          pinned={pinned}
+          onTogglePin={onTogglePin}
+        />
+      </div>
     </div>
   );
 }