feat: complete catalog fleet management workflow

frontend/src/shell/PiManagement.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CheckCircle2, CircleAlert, ClipboardCheck, FlaskConical, LoaderCircle, ScrollText, X } from "lucide-react";
+import { CheckCircle2, CircleAlert, ClipboardCheck, FlaskConical, LoaderCircle, ScrollText } from "lucide-react";
 import {
   asPiManagementApiError,
   getPiManagementLogs,
@@ -12,7 +12,7 @@ import {
   type PiManagementOptions,
 } from "../api/pi-management";
 import { Button } from "../components/ui/button";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../components/ui/dialog";
+import { WorkAreaPanel } from "./WorkAreaPanel";
 
 const fieldClass = "h-9 w-full rounded-md border border-input bg-background px-2.5 text-sm shadow-xs outline-none focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:opacity-60";
 
@@ -416,16 +416,17 @@ export function PiManagement({ open, onClose }: { open: boolean; onClose: () =>
   const unavailable = statusQuery.isError || optionsQuery.isError;
 
   return (
-    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose(); }}>
-      <DialogContent showCloseButton={false} className="max-h-[calc(100vh-6rem)] max-w-[min(94vw,58rem)] overflow-y-auto p-0 sm:max-w-[min(94vw,58rem)]">
-        <DialogHeader className="border-b border-border/70 px-5 pb-4 pt-5 pr-12">
-          <p className="thot-label">Installation controls</p>
-          <DialogTitle>Pi management</DialogTitle>
-          <DialogDescription>Review the bundled runtime, set safe defaults, and test the saved provider configuration.</DialogDescription>
-          <PiPlatformInstructions />
-        </DialogHeader>
-        <Button aria-label="Close Pi management" className="absolute right-2 top-2" size="icon-sm" variant="ghost" onClick={onClose}><X /></Button>
-        <div className="max-h-[calc(100vh-11rem)] overflow-y-auto px-5 py-5">
+    <WorkAreaPanel
+      open={open}
+      ariaLabel="Pi management"
+      eyebrow="Installation controls"
+      title="Pi management"
+      description="Review the bundled runtime, set safe defaults, and test the saved provider configuration."
+      onClose={onClose}
+      closeLabel="Close Pi management"
+    >
+        <PiPlatformInstructions />
+        <div className="mt-5">
           {forbidden ? (
             <div role="alert" aria-label="Pi management unavailable" className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm">
               <p className="font-semibold">Pi management is not permitted</p>
@@ -527,7 +528,6 @@ export function PiManagement({ open, onClose }: { open: boolean; onClose: () =>
             </div>
           )}
         </div>
-      </DialogContent>
-    </Dialog>
+    </WorkAreaPanel>
   );
 }