From bc1077c722371b246bf0c02c6598a368d285d317 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Wed, 6 May 2026 20:20:27 -0400
Subject: [PATCH] refactor(frontend): migrate Blueprint dialogs to Modal chrome
 (#954)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Final phase E pass over the experimental blueprint surfaces (gated by
SENCHO_EXPERIMENTAL).

- BlueprintDetail's destructive delete dialog -> Modal +
  ModalDestructiveHeader. Kicker BLUEPRINT · DELETE · IRREVERSIBLE.
  Keeps the type-to-confirm input pattern in the body and uses a
  destructive-variant Button as the primary footer action
- DeploymentsTab's New Blueprint editor -> Modal + ModalHeader.
  Kicker BLUEPRINTS · NEW. The wide editor sits inside ModalBody;
  cancel/submit live inside the BlueprintEditor itself
---
 .../components/blueprints/BlueprintDetail.tsx | 44 +++++++++----------
 .../components/blueprints/DeploymentsTab.tsx  | 25 +++++------
 2 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/blueprints/BlueprintDetail.tsx b/frontend/src/components/blueprints/BlueprintDetail.tsx
index 7977330b..f2a2a2a4 100644
--- a/frontend/src/components/blueprints/BlueprintDetail.tsx
+++ b/frontend/src/components/blueprints/BlueprintDetail.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react';
 import { ChevronLeft, MoreHorizontal, Pencil, Play, Trash2 } from 'lucide-react';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Modal, ModalDestructiveHeader, ModalBody, ModalFooter } from '@/components/ui/modal';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -321,20 +321,16 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
                     />
                 )}
                 {blueprint && (
-                    <Dialog open={deleteOpen} onOpenChange={(o) => { if (!o) { setDeleteOpen(false); setDeleteConfirmText(''); } }}>
-                        <DialogContent className="sm:max-w-md">
-                            <DialogHeader>
-                                <div className="flex items-center gap-2 text-brand font-mono text-[10px] uppercase tracking-[0.2em]">
-                                    <span className="inline-block w-1 h-3 bg-destructive" />
-                                    Delete blueprint
-                                </div>
-                                <DialogTitle className="font-serif italic text-xl tracking-[-0.01em]">
-                                    Permanently delete {blueprint.name}?
-                                </DialogTitle>
-                                <DialogDescription>
-                                    Stateless deployments will be withdrawn first. Stateful deployments must be withdrawn explicitly through the deployment table before delete; the API will refuse otherwise.
-                                </DialogDescription>
-                            </DialogHeader>
+                    <Modal open={deleteOpen} onOpenChange={(o) => { if (!o) { setDeleteOpen(false); setDeleteConfirmText(''); } }} size="md">
+                        <ModalDestructiveHeader
+                            kicker="BLUEPRINT · DELETE · IRREVERSIBLE"
+                            title={`Delete ${blueprint.name}`}
+                            description="Stateless deployments will be withdrawn first. Stateful deployments must be withdrawn explicitly through the deployment table before delete; the API will refuse otherwise."
+                        />
+                        <ModalBody>
+                            <p className="text-sm text-stat-subtitle">
+                                Stateless deployments will be withdrawn first. Stateful deployments must be withdrawn explicitly through the deployment table before delete.
+                            </p>
                             <div className="space-y-2">
                                 <p className="text-xs text-stat-subtitle leading-relaxed">
                                     Type <span className="font-mono text-stat-value">{blueprint.name}</span> to confirm.
@@ -347,21 +343,25 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
                                     disabled={submitting}
                                 />
                             </div>
-                            <DialogFooter>
-                                <Button variant="outline" onClick={() => { setDeleteOpen(false); setDeleteConfirmText(''); }} disabled={submitting}>
+                        </ModalBody>
+                        <ModalFooter
+                            secondary={
+                                <Button variant="outline" size="sm" onClick={() => { setDeleteOpen(false); setDeleteConfirmText(''); }} disabled={submitting}>
                                     Cancel
                                 </Button>
+                            }
+                            primary={
                                 <Button
-                                    variant="outline"
-                                    className="text-destructive border-destructive/40 hover:bg-destructive/10"
+                                    variant="destructive"
+                                    size="sm"
                                     disabled={!deleteTypedOk || submitting}
                                     onClick={performDelete}
                                 >
                                     Delete blueprint
                                 </Button>
-                            </DialogFooter>
-                        </DialogContent>
-                    </Dialog>
+                            }
+                        />
+                    </Modal>
                 )}
             </SheetContent>
         </Sheet>
diff --git a/frontend/src/components/blueprints/DeploymentsTab.tsx b/frontend/src/components/blueprints/DeploymentsTab.tsx
index 3738241a..559b20ca 100644
--- a/frontend/src/components/blueprints/DeploymentsTab.tsx
+++ b/frontend/src/components/blueprints/DeploymentsTab.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import {
-    Dialog, DialogContent, DialogHeader, DialogTitle,
-} from '@/components/ui/dialog';
+import { Modal, ModalHeader, ModalBody } from '@/components/ui/modal';
 import { toast } from '@/components/ui/toast-store';
 import {
     type BlueprintListItem,
@@ -117,16 +115,13 @@ export function DeploymentsTab() {
                 />
             )}
 
-            <Dialog open={createOpen} onOpenChange={setCreateOpen}>
-                <DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
-                    <DialogHeader>
-                        <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon">
-                            New Blueprint
-                        </span>
-                        <DialogTitle className="font-serif italic text-xl tracking-[-0.01em]">
-                            Declare a fleet-wide compose template
-                        </DialogTitle>
-                    </DialogHeader>
+            <Modal open={createOpen} onOpenChange={setCreateOpen} className="max-w-3xl max-h-[85vh] overflow-y-auto">
+                <ModalHeader
+                    kicker="BLUEPRINTS · NEW"
+                    title="Declare a fleet-wide compose template"
+                    description="Create a blueprint that can be deployed across the fleet."
+                />
+                <ModalBody>
                     <BlueprintEditor
                         mode="create"
                         distinctLabels={distinctLabels}
@@ -134,8 +129,8 @@ export function DeploymentsTab() {
                         onSubmit={handleCreate}
                         submitting={submitting}
                     />
-                </DialogContent>
-            </Dialog>
+                </ModalBody>
+            </Modal>
         </div>
     );
 }