Chat header: right-align the action cluster (ml-auto), matching WorkClaw

The cluster was absolute-centered (left-1/2 -translate-x-1/2), pinning it to
the header center. WorkClaw right-aligns it with ml-auto in normal flow.
Switched to: title back to min-w-0 flex-1, action cluster ml-auto in flow
(vertical centering via the header's items-center). Verified at 1440:
collapsed cluster is flush right (Computer ends at 1420 = px-5 from edge).
When the panel is open the cluster shifts left (md:mr-[168px]) so the
absolute device/Close overlay sits to its right with a clean gap (Computer
ends 1252, toggles 1296-1420) — no overlap.

86 unit + 31 functional E2E green.

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

frontend/src/components/chat/ChatHeader.tsx

@@ -41,17 +41,22 @@ export function ChatHeader({
         shape="squircle"
         online={agent.status === "online"}
       />
-      <div className="min-w-0 max-w-[34%]">
+      <div className="min-w-0 flex-1">
         <p className="truncate text-lg font-semibold text-neutral-200">
           {agent.name}
         </p>
         <p className="truncate text-sm text-[#7d7d7d]">{agent.job_title}</p>
       </div>
 
-      {/* Action cluster — centered, standalone group (measured): the
+      {/* Action cluster — right-aligned in flow (measured: ml-auto), the
           chipped action group (Slack / Sessions / New), a vertical
-          separator, then the coral Computer toggle. */}
+          separator, then the coral Computer toggle. When the panel is open
-      <div className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-2.5">
+          it shifts left to clear the absolute device/Close overlay. */}
+      <div
+        className={`ml-auto flex items-center gap-2.5 ${
+          panelOpen ? "md:mr-[168px]" : ""
+        }`}
+      >
         <div className="hidden items-center gap-3 md:flex">
           <button
             type="button"