refactor(frontend): migrate diff dialogs to Modal chrome (D-5) (#909)

* refactor(frontend): extend Modal size system with wide variant

Adds 'wide' (max-w-5xl w-[95vw]) to ModalSize for dialogs that render
Monaco DiffEditor side-by-side, which need ~1024px to display both panels
clearly. The existing 'xl' cap at max-w-xl (576px) is too narrow for that
use case.

* refactor(frontend): migrate ComposeDiffPreviewDialog to Modal chrome (D-5)

Replaces raw Dialog/DialogHeader/DialogFooter with Modal size="wide",
ModalHeader, and ModalFooter. Kicker carries the stack name and file type
context; title is the file name (accessible dialog name for tests). Footer
hint reuses the existing "ON DISK → UNSAVED" label via the hint prop.

* refactor(frontend): migrate GitSourceDiffDialog to Modal chrome (D-5)

Replaces Dialog + nested AlertDialog with Modal size="wide", ModalHeader,
ModalFooter, and ConfirmModal. Kicker is "GIT · PULL PREVIEW"; title is
the stack name. Short SHA moves to the sr-only description. The "Deploy
after apply" checkbox in the footer hint slot uses normal-case and
tracking-normal on the Label to prevent KICKER_CLASS uppercase/tracking
from being inherited. The overwrite confirmation uses ConfirmModal with
variant="destructive" (rose rail) since it replaces local file content.

frontend/src/components/ComposeDiffPreviewDialog.tsx

@@ -1,14 +1,7 @@
 import { Suspense } from 'react';
 import { DiffEditor } from '@/lib/monacoLoader';
-import { FileDiff, Loader2 } from 'lucide-react';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-} from '@/components/ui/dialog';
+import { Loader2 } from 'lucide-react';
+import { Modal, ModalHeader, ModalFooter } from '@/components/ui/modal';
 import { Button } from '@/components/ui/button';
 
 export interface ComposeDiffPreviewDialogProps {
@@ -39,65 +32,60 @@ export function ComposeDiffPreviewDialog({
   onConfirm,
 }: ComposeDiffPreviewDialogProps) {
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl w-[95vw] p-0 gap-0">
-        <DialogHeader className="px-6 pt-6 pb-4 border-b border-glass-border">
-          <DialogTitle className="flex items-center gap-2">
-            <FileDiff className="w-4 h-4" strokeWidth={1.5} />
-            <span>Review changes to {stackName}</span>
-            <span className="font-mono tabular-nums text-xs text-stat-subtitle">{fileName}</span>
-          </DialogTitle>
-          <DialogDescription className="sr-only">
-            Review the diff between on-disk content and unsaved editor changes before saving.
-          </DialogDescription>
-        </DialogHeader>
+    <Modal size="wide" open={open} onOpenChange={onOpenChange}>
+      <ModalHeader
+        kicker={`${stackName} · COMPOSE DIFF`}
+        title={fileName}
+        description="Review the diff between on-disk content and unsaved editor changes before saving."
+      />
 
-        <div className="px-6 pb-4 pt-3">
-          <div className="h-[55vh] border border-glass-border rounded-md overflow-hidden">
-            <Suspense fallback={<div className="w-full h-full" aria-busy="true" />}>
-              <DiffEditor
-                height="100%"
-                language={language}
-                theme={isDarkMode ? 'vs-dark' : 'vs'}
-                original={original}
-                modified={modified}
-                options={{
-                  readOnly: true,
-                  renderSideBySide: true,
-                  minimap: { enabled: false },
-                  scrollBeyondLastLine: false,
-                  fontFamily: "'Geist Mono', monospace",
-                  fontSize: 12,
-                }}
-              />
-            </Suspense>
-          </div>
+      <div className="px-6 pb-4 pt-3">
+        <div className="h-[55vh] border border-glass-border rounded-md overflow-hidden">
+          <Suspense fallback={<div className="w-full h-full" aria-busy="true" />}>
+            <DiffEditor
+              height="100%"
+              language={language}
+              theme={isDarkMode ? 'vs-dark' : 'vs'}
+              original={original}
+              modified={modified}
+              options={{
+                readOnly: true,
+                renderSideBySide: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                fontFamily: "'Geist Mono', monospace",
+                fontSize: 12,
+              }}
+            />
+          </Suspense>
         </div>
+      </div>
 
-        <DialogFooter className="px-6 py-4 border-t border-glass-border flex flex-row items-center justify-between sm:justify-between gap-4">
-          <span className="font-mono text-xs text-stat-subtitle">ON DISK → UNSAVED</span>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => onOpenChange(false)}
-              disabled={confirming}
-            >
-              Cancel
-            </Button>
-            <Button
-              size="sm"
-              onClick={() => onConfirm()}
-              disabled={confirming}
-            >
-              {confirming && (
-                <Loader2 className="w-4 h-4 mr-1.5 animate-spin" strokeWidth={1.5} />
-              )}
-              {actionLabel}
-            </Button>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      <ModalFooter
+        hint="ON DISK → UNSAVED"
+        secondary={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onOpenChange(false)}
+            disabled={confirming}
+          >
+            Cancel
+          </Button>
+        }
+        primary={
+          <Button
+            size="sm"
+            onClick={() => onConfirm()}
+            disabled={confirming}
+          >
+            {confirming && (
+              <Loader2 className="w-4 h-4 mr-1.5 animate-spin" strokeWidth={1.5} />
+            )}
+            {actionLabel}
+          </Button>
+        }
+      />
+    </Modal>
   );
 }