Open deploy progress immediately and improve delete row glass overlay.

Track in-progress deploys in the client store so the progress modal opens on click without waiting for the applications list refetch. Show deleting state as a blurred glass overlay on table rows and service cards instead of replacing row content. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-25 23:34:24 +03:30
parent dc9830383b
commit 1ade52825c
11 changed files with 266 additions and 59 deletions
@@ -9,7 +9,12 @@ import type { Application, AppLifecycleStatus, ApplicationMigrationEvent, Applic
 import { Search, X, Package, Hexagon, User, Database, Box, AlertTriangle, Clock, ArrowRightLeft, RefreshCw } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
 import { DeleteButtonLabel } from '@/components/delete-button-label';
-import { DeletingCardOverlay, DeletingTableRowCell, deletingResourceMessage } from '@/components/deleting-overlay';
+import {
+  DeletingCardOverlay,
+  DeletingTableRowOverlay,
+  deletingResourceMessage,
+  deletingRowContentClass,
+} from '@/components/deleting-overlay';
 import { TruncatedText } from '@/components/truncated-text';
 import { useDebounce } from '@/hooks/useDebounce';
 import { useApplicationDelete } from '@/lib/use-application-delete';
@@ -311,16 +316,9 @@ export default function AdminAppsPage() {
                  return (
                    <tr
                      key={app.id}
-                      className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'bg-gray-50' : ''}`}
+                      className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'relative bg-gray-50/80' : ''}`}
                    >
-                      {rowDeleting ? (
-                        <DeletingTableRowCell
-                          colSpan={8}
-                          message={deletingResourceMessage('application', app.name)}
-                        />
-                      ) : (
-                        <>
-                      <td className="px-6 py-4 min-w-[300px]">
+                      <td className={`px-6 py-4 min-w-[300px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-[300px] group">
                          <div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
                            <Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
@@ -333,7 +331,7 @@ export default function AdminAppsPage() {
                          </div>
                        </Link>
                      </td>
-                      <td className="px-6 py-4 max-w-[200px]">
+                      <td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {app.user ? (
                          <div className="min-w-0">
                            <TruncatedText className="text-sm font-medium text-gray-900">
@@ -346,12 +344,12 @@ export default function AdminAppsPage() {
                          <TruncatedText className="text-xs text-gray-400 font-mono">{app.userId}</TruncatedText>
                        )}
                      </td>
-                      <td className="px-6 py-4 max-w-[120px] text-sm text-gray-600 capitalize">
+                      <td className={`px-6 py-4 max-w-[120px] text-sm text-gray-600 capitalize ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span className={`badge max-w-full truncate ${statusColors[latestStatus] || 'badge-gray'}`} title={latestStatus}>
                          {latestStatus}
                        </span>
                      </td>
-                      <td className="px-6 py-4 max-w-[180px]">
+                      <td className={`px-6 py-4 max-w-[180px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span
                          className={`inline-flex max-w-full items-center gap-1 truncate px-2 py-1 rounded-full text-xs font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}
                          title={lifecycleLabels[lifecycle] || lifecycle}
@@ -365,7 +363,7 @@ export default function AdminAppsPage() {
                          </TruncatedText>
                        )}
                      </td>
-                      <td className="px-6 py-4 max-w-[200px]">
+                      <td className={`px-6 py-4 max-w-[200px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {assignedCluster ? (
                          <div className="min-w-0">
                            <TruncatedText className="text-sm font-medium text-gray-900">{assignedCluster.name}</TruncatedText>
@@ -382,7 +380,7 @@ export default function AdminAppsPage() {
                          <TruncatedText className="text-xs text-gray-400">Not assigned</TruncatedText>
                        )}
                      </td>
-                      <td className="px-6 py-4 max-w-[140px]">
+                      <td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {latestMigration ? (
                          <span
                            className={`badge text-xs capitalize max-w-full truncate ${migrationStatusBadgeClass(latestMigration.status)}`}
@@ -394,7 +392,7 @@ export default function AdminAppsPage() {
                          <span className="text-xs text-gray-400">—</span>
                        )}
                      </td>
-                      <td className="px-6 py-4 max-w-[140px]">
+                      <td className={`px-6 py-4 max-w-[140px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {app.billingCycle && (
                          <span
                            className="badge badge-purple text-xs max-w-full truncate"
@@ -411,7 +409,7 @@ export default function AdminAppsPage() {
                          <TruncatedText className="text-xs text-gray-400">No plan</TruncatedText>
                        )}
                      </td>
-                      <td className="px-6 py-4 text-right">
+                      <td className={`px-6 py-4 text-right ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <div className="flex flex-wrap items-center justify-end gap-1.5">
                          <Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
                            View
@@ -441,7 +439,11 @@ export default function AdminAppsPage() {
                          </button>
                        </div>
                      </td>
-                        </>
+                      {rowDeleting && (
+                        <DeletingTableRowOverlay
+                          colSpan={8}
+                          message={deletingResourceMessage('application', app.name)}
+                        />
                      )}
                    </tr>
                  );
@@ -467,6 +469,7 @@ export default function AdminAppsPage() {
                  {cardDeleting && (
                    <DeletingCardOverlay message={deletingResourceMessage('application', app.name)} />
                  )}
+                  <div className={cardDeleting ? deletingRowContentClass : undefined}>
                  <div className="flex items-start justify-between gap-3">
                    <Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 min-w-0 flex-1">
                      <div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center shrink-0">
@@ -571,6 +574,7 @@ export default function AdminAppsPage() {
                    </button>
                  </div>
                  </div>
+                </div>
              );
            })}
          </div>
@@ -15,6 +15,8 @@ import { useApplicationDelete } from '@/lib/use-application-delete';
 import { isApplicationProduct, isManagedProduct } from '@/lib/product-type';
 import { useConfirm } from '@/components/confirm-modal';
 import { useAuthStore } from '@/lib/store';
+import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';

 /** Matches backend multipart limit for POST /applications/:id/upload */
 const MAX_SOURCE_ARCHIVE_BYTES = 10 * 1024 ** 3;
@@ -82,6 +84,7 @@ export default function AppDetailPage() {
  const params = useParams();
  const router = useRouter();
  const queryClient = useQueryClient();
+  const { notifyDeployStarted } = useDeployProgressActions();
  const confirm = useConfirm();
  const appId = params.id as string;
  const user = useAuthStore((s) => s.user);
@@ -545,11 +548,17 @@ export default function AppDetailPage() {

  const deployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/deploy`),
+    onMutate: () => {
+      notifyDeployStarted(appId, app?.name);
+    },
    onSuccess: () => {
      invalidateAll();
      toast.success('Deployment triggered!');
    },
-    onError: () => toast.error('Failed to trigger deployment'),
+    onError: () => {
+      useDeployProgressStore.getState().stopTracking(appId);
+      toast.error('Failed to trigger deployment');
+    },
  });

  const stopMutation = useMutation({
@@ -581,11 +590,17 @@ export default function AppDetailPage() {

  const redeployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${appId}/redeploy`),
+    onMutate: () => {
+      notifyDeployStarted(appId, app?.name);
+    },
    onSuccess: () => {
      invalidateAll();
      toast.success('Redeploy started');
    },
-    onError: () => toast.error('Failed to trigger redeploy'),
+    onError: () => {
+      useDeployProgressStore.getState().stopTracking(appId);
+      toast.error('Failed to trigger redeploy');
+    },
  });

  const { deleteApplication, isAnyDeleting } = useApplicationDelete({
@@ -7,7 +7,11 @@ import type { Application } from '@/types';
 import { Rocket, Package, Hexagon, Database, Box, AlertTriangle, Clock } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
 import { DeleteButtonLabel } from '@/components/delete-button-label';
-import { DeletingTableRowCell, deletingResourceMessage } from '@/components/deleting-overlay';
+import {
+  DeletingTableRowOverlay,
+  deletingResourceMessage,
+  deletingRowContentClass,
+} from '@/components/deleting-overlay';
 import { filterApplications } from '@/lib/product-type';
 import { useApplicationDelete } from '@/lib/use-application-delete';

@@ -132,16 +136,9 @@ export default function AppsPage() {
                  return (
                    <tr
                      key={app.id}
-                      className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'bg-gray-50' : ''}`}
+                      className={`hover:bg-gray-50/50 transition-colors ${lifecycle === 'suspended' ? 'bg-amber-50/30' : lifecycle === 'pending_deletion' ? 'bg-red-50/30' : ''} ${rowDeleting ? 'relative bg-gray-50/80' : ''}`}
                    >
-                      {rowDeleting ? (
-                        <DeletingTableRowCell
-                          colSpan={6}
-                          message={deletingResourceMessage('application', app.name)}
-                        />
-                      ) : (
-                        <>
-                      <td className="px-6 py-4 min-w-[300px]">
+                      <td className={`px-6 py-4 min-w-[300px] ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 group min-w-[300px]">
                          <div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
                            <Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : app.runtime === 'wordpress' ? 'text-blue-600' : 'text-orange-500'}`} />
@@ -149,17 +146,17 @@ export default function AppsPage() {
                          <span className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">{app.name}</span>
                        </Link>
                      </td>
-                      <td className="px-6 py-4 text-sm text-gray-600 capitalize">{app.runtime}</td>
-                      <td className="px-6 py-4">
+                      <td className={`px-6 py-4 text-sm text-gray-600 capitalize ${rowDeleting ? deletingRowContentClass : ''}`}>{app.runtime}</td>
+                      <td className={`px-6 py-4 ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span className={`badge ${statusColors[latestStatus] || 'badge-gray'}`}>{latestStatus}</span>
                      </td>
-                      <td className="px-6 py-4">
+                      <td className={`px-6 py-4 ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold ${lifecycleColors[lifecycle] || 'text-gray-500 bg-gray-100'}`}>
                          {lifecycle === 'suspended' && <AlertTriangle className="w-3 h-3" />}
                          {lifecycleLabels[lifecycle] || lifecycle}
                        </span>
                      </td>
-                      <td className="px-6 py-4">
+                      <td className={`px-6 py-4 ${rowDeleting ? deletingRowContentClass : ''}`}>
                        {app.planExpiresAt ? (
                          <span className={`inline-flex items-center gap-1 text-xs font-medium ${expiry.urgent ? 'text-red-600' : 'text-gray-600'}`}>
                            <Clock className="w-3 h-3" />
@@ -169,7 +166,7 @@ export default function AppsPage() {
                          <span className="text-xs text-gray-400">No plan</span>
                        )}
                      </td>
-                      <td className="px-6 py-4 text-right">
+                      <td className={`px-6 py-4 text-right ${rowDeleting ? deletingRowContentClass : ''}`}>
                        <div className="flex items-center justify-end gap-2">
                          <Link href={`/dashboard/apps/${app.id}`} className="btn-ghost text-xs px-3 py-1.5">
                            View
@@ -192,7 +189,11 @@ export default function AppsPage() {
                          </button>
                        </div>
                      </td>
-                        </>
+                      {rowDeleting && (
+                        <DeletingTableRowOverlay
+                          colSpan={6}
+                          message={deletingResourceMessage('application', app.name)}
+                        />
                      )}
                    </tr>
                  );
@@ -6,6 +6,8 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { parseDotenv } from '@/lib/parseDotenv';
 import { useAuthStore } from '@/lib/store';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';
+import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
 import { toast } from 'react-toastify';
 import type {
  CreateApplicationDto,
@@ -216,7 +218,17 @@ function minGiToFitFileBytes(bytes: number): number {

 export default function DeployPage() {
  const router = useRouter();
+  const { notifyDeployStarted } = useDeployProgressActions();
  const user = useAuthStore((s) => s.user);
+
+  const triggerAppDeploy = async (appId: string, appName?: string) => {
+    notifyDeployStarted(appId, appName);
+    try {
+      await api.post(`/deployments/applications/${appId}/deploy`);
+    } catch {
+      useDeployProgressStore.getState().stopTracking(appId);
+    }
+  };
  const isAdmin = user?.role === 'admin';
  const [step, setStep] = useState(0);
  const [form, setForm] = useState<CreateApplicationDto>({
@@ -429,7 +441,7 @@ export default function DeployPage() {
    onSuccess: (res) => {
      setDeployStage('deploying');
      toast.success('Payment successful! Deploying...');
-      api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
+      void triggerAppDeploy(res.data.id, res.data.name);
      setDeployStage('done');
      router.push(`/dashboard/apps/${res.data.id}`);
    },
@@ -511,7 +523,7 @@ export default function DeployPage() {
    onSuccess: (res) => {
      setDeployStage('deploying');
      toast.success('Payment successful! Deploying...');
-      api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
+      void triggerAppDeploy(res.data.id, res.data.name);
      setDeployStage('done');
      router.push(`/dashboard/apps/${res.data.id}`);
    },
@@ -566,7 +578,7 @@ export default function DeployPage() {
    onSuccess: (res) => {
      setDeployStage('deploying');
      toast.success('Application created! Triggering deployment...');
-      api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
+      void triggerAppDeploy(res.data.id, res.data.name);
      setDeployStage('done');
      router.push(`/dashboard/apps/${res.data.id}`);
    },
@@ -34,6 +34,8 @@ import {
 import { useConfirm } from '@/components/confirm-modal';
 import { DeletingModal } from '@/components/deleting-modal';
 import { useApplicationDelete } from '@/lib/use-application-delete';
+import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';
 import { ServiceExternalAccessPanel } from '@/components/service-external-access-panel';
 import { WorkloadLogsPanel } from '@/components/workload-logs-panel';
 import { ManagedServiceResourcesPanel } from '@/components/managed-service-resources-panel';
@@ -62,6 +64,7 @@ export default function ManagedServiceDetailPage() {
  const params = useParams();
  const router = useRouter();
  const queryClient = useQueryClient();
+  const { notifyDeployStarted } = useDeployProgressActions();
  const confirm = useConfirm();
  const serviceId = params.id as string;

@@ -114,22 +117,34 @@ export default function ManagedServiceDetailPage() {

  const deployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${serviceId}/deploy`),
+    onMutate: () => {
+      notifyDeployStarted(serviceId, app?.name);
+    },
    onSuccess: () => {
      toast.success('Provisioning started');
      queryClient.invalidateQueries({ queryKey: ['deployments', serviceId] });
      queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+    },
+    onError: () => {
+      useDeployProgressStore.getState().stopTracking(serviceId);
+      toast.error('Failed to start provisioning');
    },
-    onError: () => toast.error('Failed to start provisioning'),
  });

  const redeployMutation = useMutation({
    mutationFn: () => api.post(`/deployments/applications/${serviceId}/redeploy`),
+    onMutate: () => {
+      notifyDeployStarted(serviceId, app?.name);
+    },
    onSuccess: () => {
      toast.success('Re-provisioning started');
      queryClient.invalidateQueries({ queryKey: ['deployments', serviceId] });
      queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
    },
    onError: (err: unknown) => {
+      useDeployProgressStore.getState().stopTracking(serviceId);
      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      toast.error(msg || 'Failed to re-provision service');
    },
@@ -15,6 +15,8 @@ import type {
  ProductType,
 } from '@/types';
 import { optionalDefaultsFromCatalog } from '@/lib/optional-service-defaults';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';
+import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
 import {
  ManagedDatabaseConfig,
  validateDbDumpStorage,
@@ -38,6 +40,7 @@ type ServiceKind = 'managed_database' | 'managed_redis' | 'managed_rabbitmq';
 const steps = ['Service type', 'Configuration', 'Review & pay'];

 export default function NewManagedServicePage() {
+  const { notifyDeployStarted } = useDeployProgressActions();
  const router = useRouter();
  const [step, setStep] = useState(0);
  const [kind, setKind] = useState<ServiceKind | null>(null);
@@ -171,9 +174,15 @@ export default function NewManagedServicePage() {
    return payload;
  };

-  const finishDeploy = async (appId: string) => {
+  const finishDeploy = async (appId: string, appName?: string) => {
    setDeployStage('deploying');
+    notifyDeployStarted(appId, appName);
+    try {
      await api.post(`/deployments/applications/${appId}/deploy`);
+    } catch {
+      useDeployProgressStore.getState().stopTracking(appId);
+      throw new Error('Deploy failed');
+    }
    setDeployStage('done');
    toast.success('Service provisioned successfully');
    router.push(`/dashboard/services/${appId}`);
@@ -206,7 +215,7 @@ export default function NewManagedServicePage() {
      return appId;
    },
    onSuccess: (appId) =>
-      finishDeploy(appId).catch(() => {
+      finishDeploy(appId, form.name).catch(() => {
        setDeployStage('error');
        toast.error('Payment succeeded but deployment failed');
      }),
@@ -242,7 +251,7 @@ export default function NewManagedServicePage() {
      return appId;
    },
    onSuccess: (appId) =>
-      finishDeploy(appId).catch(() => {
+      finishDeploy(appId, form.name).catch(() => {
        setDeployStage('error');
        toast.error('Payment succeeded but deployment failed');
      }),
@@ -8,7 +8,11 @@ import { managedServiceTypeLabel } from '@/lib/optional-service-defaults';
 import { Database, Plus, AlertTriangle, Clock } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
 import { DeleteButtonLabel } from '@/components/delete-button-label';
-import { DeletingCardOverlay, deletingResourceMessage } from '@/components/deleting-overlay';
+import {
+  DeletingCardOverlay,
+  deletingResourceMessage,
+  deletingRowContentClass,
+} from '@/components/deleting-overlay';
 import { filterManagedServices } from '@/lib/product-type';
 import { useApplicationDelete } from '@/lib/use-application-delete';

@@ -130,6 +134,9 @@ export default function ServicesPage() {
                {cardDeleting && (
                  <DeletingCardOverlay message={deletingResourceMessage('service', svc.name)} />
                )}
+                <div
+                  className={`flex flex-col sm:flex-row sm:items-center gap-4 flex-1 w-full min-w-0 ${cardDeleting ? deletingRowContentClass : ''}`}
+                >
                <Link href={`/dashboard/services/${svc.id}`} className="flex items-center gap-3 flex-1 min-w-0 group">
                  <div className="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center shrink-0">
                    <Database className="w-5 h-5 text-indigo-600" />
@@ -174,6 +181,7 @@ export default function ServicesPage() {
                  </button>
                </div>
                </div>
+              </div>
            );
          })}
        </div>
@@ -12,8 +12,18 @@ export function deletingResourceMessage(
  return name ? `Deleting “${name}”…` : 'Deleting application…';
 }

-/** Single table cell spanning the full row — content centered in the row. */
-export function DeletingTableRowCell({
+/** Applied to row cells under the glass overlay so content stays visible but blurred. */
+export const deletingRowContentClass =
+  'opacity-45 blur-[2px] pointer-events-none select-none transition-[filter,opacity] duration-200';
+
+const glassPanelClass =
+  'flex min-h-[52px] h-full w-full items-center justify-center gap-2 bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50';
+
+/**
+ * Glass overlay on a table row. Parent `<tr>` must be `relative`; render all `<td>` cells first,
+ * then this as the last child while deleting.
+ */
+export function DeletingTableRowOverlay({
  colSpan,
  message = 'Deleting…',
 }: {
@@ -21,8 +31,13 @@ export function DeletingTableRowCell({
  message?: string;
 }) {
  return (
-    <td colSpan={colSpan} className="px-6 py-4 bg-white/80 backdrop-blur-sm" aria-live="polite" aria-busy="true">
-      <div className="flex min-h-[52px] w-full items-center justify-center gap-2 text-sm font-semibold text-gray-800">
+    <td
+      colSpan={colSpan}
+      className="!absolute inset-0 z-10 border-0 p-0 m-0 h-full w-full max-w-none bg-transparent"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      <div className={glassPanelClass}>
        <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
        <span>{message}</span>
      </div>
@@ -30,11 +45,22 @@ export function DeletingTableRowCell({
  );
 }

-/** Full-card overlay while delete is in progress. Parent must be `relative`. */
+/** @deprecated Use DeletingTableRowOverlay on top of visible row cells */
+export function DeletingTableRowCell({
+  colSpan,
+  message = 'Deleting…',
+}: {
+  colSpan: number;
+  message?: string;
+}) {
+  return <DeletingTableRowOverlay colSpan={colSpan} message={message} />;
+}
+
+/** Full-card glass overlay while delete is in progress. Parent must be `relative`. */
 export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: string }) {
  return (
    <div
-      className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/75 backdrop-blur-sm text-sm font-semibold text-gray-800"
+      className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50"
      aria-live="polite"
      aria-busy="true"
    >
@@ -12,26 +12,57 @@ import { filterApplications, filterManagedServices } from '@/lib/product-type';
 import { BuildProgressModal, type BuildProgress } from '@/components/build-progress-modal';
 import { DeploymentProgressBar } from '@/components/deployment-progress-bar';

+function stubAppFromTrack(appId: string, appName: string): Application {
+  return {
+    id: appId,
+    name: appName,
+    runtime: 'nodejs',
+    databaseType: 'none',
+    cpuRequest: '',
+    cpuLimit: '',
+    memoryRequest: '',
+    memoryLimit: '',
+    replicas: 1,
+    port: 3000,
+    userId: '',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deployments: [
+      {
+        id: `pending-${appId}`,
+        status: 'building',
+        imageTag: '',
+        applicationId: appId,
+        triggeredBy: 'user',
+        createdAt: new Date().toISOString(),
+      },
+    ],
+  } as Application;
+}
+
 export function DeploymentProgressManager() {
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  const pathname = usePathname();
-  const { minimized, focusedAppId, minimize, expand } = useDeployProgressStore();
+  const { minimized, focusedAppId, tracked, minimize, expand, stopTracking } =
+    useDeployProgressStore();

-  const refetchWhileDeploying = (list: Application[] | undefined) =>
-    getAppsInProgress(list ?? []).length > 0 ? 3000 : false;
+  const pollAppsList = (list: Application[] | undefined) => {
+    const pending = useDeployProgressStore.getState().tracked.length;
+    return getAppsInProgress(list ?? []).length > 0 || pending > 0 ? 3000 : false;
+  };

  const { data: appsList = [] } = useQuery<Application[]>({
    queryKey: ['applications', 'application'],
    queryFn: () => api.get('/applications', { params: { productType: 'application' } }).then((r) => r.data),
    enabled: isAuthenticated,
-    refetchInterval: (query) => refetchWhileDeploying(query.state.data),
+    refetchInterval: (query) => pollAppsList(query.state.data),
  });

  const { data: servicesList = [] } = useQuery<Application[]>({
    queryKey: ['applications', 'managed'],
    queryFn: () => api.get('/applications', { params: { productType: 'managed' } }).then((r) => r.data),
    enabled: isAuthenticated,
-    refetchInterval: (query) => refetchWhileDeploying(query.state.data),
+    refetchInterval: (query) => pollAppsList(query.state.data),
  });

  const allResources = useMemo(
@@ -39,7 +70,21 @@ export function DeploymentProgressManager() {
    [appsList, servicesList],
  );

-  const deployingApps = useMemo(() => getAppsInProgress(allResources), [allResources]);
+  const deployingFromList = useMemo(() => getAppsInProgress(allResources), [allResources]);
+
+  const deployingApps = useMemo(() => {
+    const byId = new Map<string, Application>();
+    for (const app of deployingFromList) {
+      byId.set(app.id, app);
+    }
+    for (const t of tracked) {
+      if (!byId.has(t.appId)) {
+        const fromList = allResources.find((a) => a.id === t.appId);
+        byId.set(t.appId, fromList ?? stubAppFromTrack(t.appId, t.appName));
+      }
+    }
+    return Array.from(byId.values());
+  }, [deployingFromList, tracked, allResources]);

  const progressQueries = useQueries({
    queries: deployingApps.map((app) => ({
@@ -50,6 +95,7 @@ export function DeploymentProgressManager() {
          .then((r) => r.data.progress),
      refetchInterval: 1500,
      placeholderData: keepPreviousData,
+      enabled: isAuthenticated,
    })),
  });

@@ -66,7 +112,7 @@ export function DeploymentProgressManager() {

  useEffect(() => {
    if (deployingApps.length === 0) {
-      useDeployProgressStore.setState({ minimized: false, focusedAppId: null });
+      useDeployProgressStore.setState({ minimized: false, focusedAppId: null, tracked: [] });
    }
  }, [deployingApps.length]);

@@ -80,12 +126,25 @@ export function DeploymentProgressManager() {
    useDeployProgressStore.setState({ focusedAppId: preferred });
  }, [activeItems, routeAppId]);

+  useEffect(() => {
+    for (const { app, progress } of activeItems) {
+      if (!progress) continue;
+      if (progress.phase === 'done' || progress.phase === 'failed' || progress.phase === 'cancelled') {
+        const stillBuilding = deployingFromList.some((a) => a.id === app.id);
+        if (!stillBuilding) {
+          stopTracking(app.id);
+        }
+      }
+    }
+  }, [activeItems, deployingFromList, stopTracking]);
+
  const focusedItem =
    activeItems.find((item) => item.app.id === focusedAppId) ?? activeItems[0];

  const focusedProgress =
    focusedItem?.progress ??
-    ({ phase: 'building', percent: 0, message: 'Loading progress…' } satisfies BuildProgress);
+    ({ phase: 'building', percent: 0, message: 'Starting deployment…' } satisfies BuildProgress);
+
  const showModal =
    !minimized &&
    !!focusedItem &&
@@ -2,9 +2,19 @@

 import { create } from 'zustand';

+export type TrackedDeploy = {
+  appId: string;
+  appName: string;
+  startedAt: number;
+};
+
 interface DeployProgressState {
  minimized: boolean;
  focusedAppId: string | null;
+  /** Optimistic deploy tracking — modal opens before applications list refetches */
+  tracked: TrackedDeploy[];
+  startDeploy: (appId: string, appName?: string) => void;
+  stopTracking: (appId: string) => void;
  minimize: (appId: string) => void;
  expand: (appId?: string) => void;
 }
@@ -12,6 +22,25 @@ interface DeployProgressState {
 export const useDeployProgressStore = create<DeployProgressState>((set) => ({
  minimized: false,
  focusedAppId: null,
+  tracked: [],
+  startDeploy: (appId, appName) =>
+    set((state) => ({
+      minimized: false,
+      focusedAppId: appId,
+      tracked: [
+        ...state.tracked.filter((t) => t.appId !== appId),
+        { appId, appName: appName?.trim() || 'Application', startedAt: Date.now() },
+      ],
+    })),
+  stopTracking: (appId) =>
+    set((state) => {
+      const tracked = state.tracked.filter((t) => t.appId !== appId);
+      const focusedAppId =
+        state.focusedAppId === appId
+          ? tracked[0]?.appId ?? null
+          : state.focusedAppId;
+      return { tracked, focusedAppId };
+    }),
  minimize: (appId) => set({ minimized: true, focusedAppId: appId }),
  expand: (appId) =>
    set((state) => ({
@@ -0,0 +1,29 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import api from '@/lib/api';
+import type { BuildProgress } from '@/components/build-progress-modal';
+import { useDeployProgressStore } from '@/lib/deploy-progress-store';
+
+/** Open deploy progress UI immediately and warm build-progress cache. */
+export function useDeployProgressActions() {
+  const queryClient = useQueryClient();
+  const startDeploy = useDeployProgressStore((s) => s.startDeploy);
+
+  const notifyDeployStarted = (appId: string, appName?: string) => {
+    startDeploy(appId, appName);
+    void queryClient.invalidateQueries({ queryKey: ['applications'] });
+    void queryClient.invalidateQueries({ queryKey: ['application', appId] });
+    void queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
+    void queryClient.prefetchQuery({
+      queryKey: ['build-progress', appId],
+      queryFn: () =>
+        api
+          .get<{ progress: BuildProgress | null }>(`/deployments/applications/${appId}/build-progress`)
+          .then((r) => r.data.progress),
+      staleTime: 0,
+    });
+  };
+
+  return { notifyDeployStarted };
+}