feat: promote/sync/rebuild UI, operations page, bidirectional sync, lifecyc...

Matthias Nott

2026-02-22 7d94ec0d18b46893e23680cf8438109a34cc2a10

 static/index.html
..
..
@@ -5,7 +5,7 @@
5
5
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
   <title>OPS Dashboard</title>
7
7
   <script src="https://cdn.tailwindcss.com"></script>
8
-  <link rel="stylesheet" href="/static/css/style.css">
8
+  <link rel="stylesheet" href="/static/css/style.css?v=10">
9
9
   <style>
10
10
     body { background: #0f172a; color: #e2e8f0; margin: 0; }
11
11
     #app { display: flex; min-height: 100vh; }
..
..
@@ -79,13 +79,13 @@
79
79
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
80
80
         Backups
81
81
       </a>
82
+      <a class="sidebar-link" data-page="operations" onclick="showPage('operations')">
83
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
84
+        Operations
85
+      </a>
82
86
       <a class="sidebar-link" data-page="system" onclick="showPage('system')">
83
87
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
84
88
         System
85
-      </a>
86
-      <a class="sidebar-link" data-page="restore" onclick="showPage('restore')">
87
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
88
-        Restore
89
89
       </a>
90
90
     </nav>
91
91
     <div class="sidebar-footer" id="sidebar-footer">
..
..
@@ -139,6 +139,83 @@
139
139
   </div>
140
140
 </div>
141
141
 
142
-<script src="/static/js/app.js?v=4"></script>
142
+<!-- Restore Modal -->
143
+<div id="restore-modal" class="modal-overlay" style="display:none;" onclick="if(event.target===this)closeRestoreModal()">
144
+  <div class="modal-box" style="max-width:640px;">
145
+    <div class="modal-header">
146
+      <span style="font-weight:600;color:#f3f4f6;">Restore Backup</span>
147
+      <button onclick="closeRestoreModal()" style="background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer;">&times;</button>
148
+    </div>
149
+    <div class="modal-body">
150
+      <!-- Info rows -->
151
+      <div class="restore-info-row">
152
+        <span class="restore-info-label">Target</span>
153
+        <span class="restore-info-value" id="restore-modal-project"></span>
154
+      </div>
155
+      <div class="restore-info-row" id="restore-source-row">
156
+        <span class="restore-info-label">Source</span>
157
+        <span class="restore-info-value" id="restore-modal-source"></span>
158
+      </div>
159
+      <div id="restore-source-selector" style="display:none;margin-bottom:0.625rem;">
160
+        <div style="display:flex;align-items:baseline;gap:0.75rem;font-size:0.875rem;">
161
+          <span class="restore-info-label">Source</span>
162
+          <label style="display:flex;align-items:center;gap:0.375rem;color:#d1d5db;cursor:pointer;">
163
+            <input type="radio" name="restore-source" value="local" checked style="accent-color:#3b82f6;"> Local
164
+          </label>
165
+          <label style="display:flex;align-items:center;gap:0.375rem;color:#d1d5db;cursor:pointer;">
166
+            <input type="radio" name="restore-source" value="offsite" style="accent-color:#3b82f6;"> Offsite
167
+          </label>
168
+        </div>
169
+      </div>
170
+      <div class="restore-info-row" style="margin-bottom:1rem;">
171
+        <span class="restore-info-label">Backup</span>
172
+        <span class="restore-info-value mono" id="restore-modal-name" style="font-size:0.8125rem;word-break:break-all;"></span>
173
+      </div>
174
+
175
+<!-- Restore mode selector -->      <div style="margin-bottom:1rem;">        <div style="font-size:0.8125rem;font-weight:500;color:#9ca3af;margin-bottom:0.5rem;">Restore Mode</div>        <div style="display:flex;gap:1rem;">          <label style="display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:#d1d5db;cursor:pointer;">            <input type="radio" name="restore-mode" value="full" checked style="accent-color:#3b82f6;"> Full          </label>          <label style="display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:#d1d5db;cursor:pointer;">            <input type="radio" name="restore-mode" value="db" style="accent-color:#3b82f6;"> Database only          </label>          <label style="display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;color:#d1d5db;cursor:pointer;">            <input type="radio" name="restore-mode" value="wp" style="accent-color:#3b82f6;"> WP-Content only          </label>        </div>      </div>      <!-- Dry run checkbox -->      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:#d1d5db;cursor:pointer;margin-bottom:1rem;">        <input type="checkbox" id="restore-dry-run" checked style="width:1rem;height:1rem;accent-color:#3b82f6;">        Dry run (preview only — no changes made)      </label>      <!-- Warning -->
176
+      <div style="background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);border-radius:0.5rem;padding:0.75rem 1rem;font-size:0.8125rem;color:#fca5a5;margin-bottom:1rem;">
177
+        Warning: a real restore will stop services, replace data, and restart containers.
178
+        Always run a dry run first.
179
+      </div>
180
+
181
+      <!-- SSE output (shown after start) -->
182
+      <div id="restore-modal-output" style="display:none;">
183
+        <div style="font-size:0.8125rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Output</div>
184
+        <div id="restore-modal-terminal" class="terminal" style="max-height:300px;"></div>
185
+      </div>
186
+    </div>
187
+    <div class="modal-footer">
188
+      <button class="btn btn-ghost btn-sm" onclick="closeRestoreModal()">Cancel</button>
189
+      <button id="restore-start-btn" class="btn btn-danger btn-sm" onclick="startRestore()">Start Restore</button>
190
+    </div>
191
+  </div>
192
+</div>
193
+
194
+<!-- Operations Modal -->
195
+<div id="ops-modal" class="modal-overlay" style="display:none;" onclick="if(event.target===this)closeOpsModal()">
196
+  <div class="modal-box" style="max-width:700px;">
197
+    <div class="modal-header">
198
+      <span id="ops-modal-title" style="font-weight:600;color:#f3f4f6;">Operation</span>
199
+      <button onclick="closeOpsModal()" style="background:none;border:none;color:#9ca3af;font-size:1.25rem;cursor:pointer;">&times;</button>
200
+    </div>
201
+    <div class="modal-body">
202
+      <div id="ops-modal-info" style="margin-bottom:1rem;"></div>
203
+      <label id="ops-dry-run-row" style="display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:#d1d5db;cursor:pointer;margin-bottom:1rem;">
204
+        <input type="checkbox" id="ops-dry-run" checked style="width:1rem;height:1rem;accent-color:#3b82f6;">
205
+        Dry run (preview only)
206
+      </label>
207
+      <div id="ops-modal-output" style="display:none;">
208
+        <div style="font-size:0.8125rem;font-weight:500;color:#9ca3af;margin-bottom:0.375rem;">Output</div>
209
+        <div id="ops-modal-terminal" class="terminal" style="max-height:350px;"></div>
210
+      </div>
211
+    </div>
212
+    <div class="modal-footer">
213
+      <button class="btn btn-ghost btn-sm" onclick="closeOpsModal()">Cancel</button>
214
+      <button id="ops-start-btn" class="btn btn-primary btn-sm" onclick="startOperation()">Start</button>
215
+    </div>
216
+  </div>
217
+</div>
218
+
219
+<script src="/static/js/app.js?v=12"></script>
143
220
 </body>
144
221
 </html>