snapshot: preserve backup UX, remote target setup, and docs updates

backend/workflows/static/workflows/css/admin_tools.css

@@ -1,10 +1,12 @@
 body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #0f172a; padding: 20px; }
+[hidden] { display: none !important; }
 .shell { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid #d8e3f0; border-radius: 14px; padding: 16px; }
 h1 { margin: 12px 0 6px; color: #000078; }
 .sub { margin: 0 0 12px; color: #54657c; }
 .app-messages { margin-bottom: 12px; }
 .card { border: 1px solid #d8e3f0; border-radius: 12px; background: #fbfdff; padding: 12px; margin-bottom: 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 .grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px; }
+.backup-grid { grid-template-columns: minmax(280px, 720px); }
 label { display: block; margin-bottom: 4px; font-size: 12px; color: #334155; font-weight: 700; }
 input, select, textarea { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 9px; background: #fff; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

backend/workflows/static/workflows/css/app_chrome.css

@@ -191,6 +191,77 @@
   display: none;
 }
 
+.action-progress-modal[hidden] {
+  display: none;
+}
+
+.action-progress-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1190;
+}
+
+.action-progress-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(16, 32, 57, 0.34);
+  backdrop-filter: blur(5px);
+  animation: confirmFadeIn var(--motion-base) var(--motion-ease);
+}
+
+.action-progress-panel {
+  position: relative;
+  width: min(520px, calc(100% - 32px));
+  margin: min(16vh, 120px) auto 0;
+  padding: 22px;
+  border: 1px solid rgba(217, 227, 238, 0.94);
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.97));
+  box-shadow: 0 26px 64px rgba(18, 34, 56, 0.20);
+  animation: confirmPopIn var(--motion-slow) var(--motion-ease);
+}
+
+.action-progress-kicker {
+  margin: 0 0 8px;
+  color: #5a6d87;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.action-progress-title {
+  margin: 0 0 8px;
+  color: #16315b;
+  font-size: 24px;
+  letter-spacing: -0.03em;
+}
+
+.action-progress-copy {
+  margin: 0 0 16px;
+  color: #5a6d87;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.action-progress-track {
+  overflow: hidden;
+  position: relative;
+  height: 12px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #dce6f2, #d1dce9);
+  box-shadow: inset 0 1px 2px rgba(16, 32, 57, 0.10);
+}
+
+.action-progress-bar {
+  width: 40%;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #000078, #3b70ea);
+  box-shadow: 0 0 18px rgba(59, 112, 234, 0.28);
+  animation: actionProgressSlide 1.05s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+
 .confirm-modal {
   position: fixed;
   inset: 0;
@@ -259,6 +330,11 @@ body.confirm-open {
   }
 }
 
+@keyframes actionProgressSlide {
+  0% { transform: translateX(-120%); }
+  100% { transform: translateX(270%); }
+}
+
 @media (prefers-reduced-motion: reduce) {
   :root {
     --motion-fast: 1ms;

backend/workflows/static/workflows/js/action_progress.js

@@ -0,0 +1,35 @@
+(function () {
+  const modal = document.getElementById('app-action-progress');
+  const title = document.getElementById('app-action-progress-title');
+  const copy = document.getElementById('app-action-progress-copy');
+  if (!modal || !title || !copy) return;
+
+  function showProgress(source) {
+    const nextTitle = source?.dataset?.progressTitle;
+    const nextCopy = source?.dataset?.progressCopy;
+    if (nextTitle) title.textContent = nextTitle;
+    if (nextCopy) copy.textContent = nextCopy;
+    modal.hidden = false;
+    modal.setAttribute('aria-hidden', 'false');
+    document.body.classList.add('confirm-open');
+  }
+
+  window.AppActionProgress = {
+    show: showProgress,
+  };
+
+  document.addEventListener('submit', function (event) {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement)) return;
+
+    const submitter = event.submitter;
+    if (submitter?.dataset?.progressTitle || submitter?.dataset?.progressCopy) {
+      showProgress(submitter);
+      return;
+    }
+
+    if (form.dataset.progressTitle || form.dataset.progressCopy) {
+      showProgress(form);
+    }
+  });
+})();

backend/workflows/static/workflows/js/confirm_dialog.js

@@ -58,6 +58,9 @@
     open(message).then(function (confirmed) {
       if (!confirmed) return;
       form.dataset.confirmBypass = '1';
+      if (window.AppActionProgress && (form.dataset.progressTitle || form.dataset.progressCopy)) {
+        window.AppActionProgress.show(form);
+      }
       if (typeof form.requestSubmit === 'function') {
         form.requestSubmit();
       } else {
@@ -79,6 +82,9 @@
     open(button.dataset.confirm).then(function (confirmed) {
       if (!confirmed) return;
       button.dataset.confirmBypass = '1';
+      if (window.AppActionProgress && (button.dataset.progressTitle || button.dataset.progressCopy || form.dataset.progressTitle || form.dataset.progressCopy)) {
+        window.AppActionProgress.show(button.dataset.progressTitle || button.dataset.progressCopy ? button : form);
+      }
       if (typeof form.requestSubmit === 'function') {
         form.requestSubmit(button);
       } else {