From a7cef6b66126bbf746457225f060f6be62d94e54 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 16:21:07 -0700
Subject: [PATCH 01/11] dash: fix console errors, undefined colours and owner
 placeholders

- cleanupPage and siblingsPage declare loading; guard the dismissed-by,
  sibling dashboard_url and cleanup detail.server reads that threw.
- Define --success, --success-bg, --warning, --danger and --bg-inset so
  chips stop rendering near-white on dark.
- Checkboxes inside .field keep their natural size; the Siblings probing
  consent line uses a neutral banner instead of the warning one.
- Backups cards get spacing; the Monitors header drops the unrelated CLI
  version chip.
- Public placeholders: git.example.com, example.com, shop-.
- New frontend-test/nav_rework.test.mjs holds the checks for this rework.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/nav_rework.test.mjs         | 43 +++++++++++++++++++
 cmd/teploy-dash/frontend/css/style.css        | 15 +++++++
 cmd/teploy-dash/frontend/index.html           | 36 +++++++---------
 cmd/teploy-dash/frontend/js/app.js            |  2 +
 4 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 cmd/teploy-dash/frontend-test/nav_rework.test.mjs

diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
new file mode 100644
index 0000000..f7bb1d6
--- /dev/null
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -0,0 +1,43 @@
+// Navigation and UI rework (2026-11-11): static checks over the shipped
+// frontend that keep the fixed defects fixed.
+//
+// Run: node cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const read = (p) => readFileSync(join(here, '../frontend', p), 'utf8');
+const html = read('index.html');
+const js = read('js/app.js');
+const css = read('css/style.css');
+const failures = [];
+const assert = (c, m) => { if (!c) failures.push(m); };
+
+// Every CSS variable the frontend reads is defined.
+{
+  const used = new Set([...(html + js + css).matchAll(/var\((--[a-z0-9-]+)/g)].map((m) => m[1]));
+  const defined = new Set([...css.matchAll(/^\s*(--[a-z0-9-]+):/gm)].map((m) => m[1]));
+  for (const v of used) assert(defined.has(v), `CSS variable ${v} is used but never defined`);
+}
+
+// No owner-specific addresses or product names in a public product.
+for (const bad of [/100\.108\.\d+\.\d+/, /akiroo/i, /fylun/i, /:49152/]) {
+  assert(!bad.test(html) && !bad.test(js), `owner-specific text ${bad} in the frontend`);
+}
+
+// Components whose templates read `loading` declare it.
+for (const name of ['cleanupPage', 'siblingsPage']) {
+  const start = js.indexOf(`Alpine.data('${name}'`);
+  assert(start >= 0 && /loading: true/.test(js.slice(start, start + 300)), `${name} declares loading`);
+}
+
+// Reads that used to throw on a missing object are guarded.
+assert(!html.includes("x-text=\"'dismissed by ' + f.dismissed.actor\""), 'dismissed-by read is guarded');
+assert(!/:href="c\.doc\.dashboard_url"/.test(html), 'sibling dashboard_url read is guarded');
+
+// Checkboxes inside form fields are not stretched into text-input boxes.
+assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'field checkboxes keep their natural size');
+
+if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
+console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 2e71a4f..6697f6c 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -20,6 +20,11 @@
   --green: #3fb950;
   --yellow: #d29922;
   --red: #f85149;
+  --success: var(--green);
+  --warning: var(--yellow);
+  --danger: var(--red);
+  --success-bg: rgba(63, 185, 80, 0.15);
+  --bg-inset: rgba(139, 148, 158, 0.15);
   --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
   --mono: var(--font);
   --radius: 8px;
@@ -163,6 +168,7 @@ a.nav-link:hover { background: var(--bg-card); }
 .form-group, .field { margin-bottom: 14px; }
 .form-label, .field label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 12px; font-weight: 500; }
 .form-input, .field input, .field select, .search-input, .log-controls input, .log-controls select { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; outline: none; background: var(--bg-input); color: var(--text); font-size: 13px; }
+.field input[type="checkbox"], .field input[type="radio"], .form-input[type="checkbox"] { width: auto; min-height: 0; padding: 0; }
 .form-input::placeholder, .field input::placeholder, .search-input::placeholder { color: var(--text-muted); opacity: .7; }
 .form-input:focus, .field input:focus, .field select:focus, .search-input:focus, .log-controls input:focus, .log-controls select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
 .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@@ -277,6 +283,15 @@ tbody tr:hover { background: var(--bg-card-hover); }
   background: var(--bg-card); color: var(--yellow);
   font-size: 12px; word-break: break-word;
 }
+/* A neutral setting line (not a warning): same shape as the stale banner,
+   muted colours. */
+.info-banner {
+  display: flex; margin-bottom: 16px; padding: 8px 14px; gap: 12px;
+  align-items: center; justify-content: space-between; flex-wrap: wrap;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-card); color: var(--text-secondary); font-size: 12px;
+}
+.backups-page .card { margin-bottom: 12px; cursor: default; }
 .empty-icon { margin-bottom: 12px; opacity: .4; }
 .loading, .spinner { display: none; }
 .back-link { display: inline-flex; margin-bottom: 14px; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; text-decoration: none; }
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index 1cf74b7..5cdfa9c 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -189,7 +189,7 @@ <h1 class="page-title">Home</h1>
               </div>
               <div class="form-group">
                 <label class="form-label">URL</label>
-                <input class="form-input" type="url" x-model="form.url" placeholder="http://100.108.123.49:49152">
+                <input class="form-input" type="url" x-model="form.url" placeholder="https://git.example.com">
               </div>
               <div class="form-group">
                 <label class="form-label">Description <span class="text-muted">(optional)</span></label>
@@ -290,8 +290,8 @@ <h2 class="section-title">Suggested groups</h2>
                 <div>
                   <p class="text-muted" style="margin: 0 0 12px 0; font-size: 13px;">
                     Apps that appear to belong together — they share a registrable domain
-                    (<span class="mono">akiroo.com</span>), or a name prefix when they publish no domain
-                    (<span class="mono">fylun-</span>). Accepting a suggestion uses the ordinary group
+                    (<span class="mono">example.com</span>), or a name prefix when they publish no domain
+                    (<span class="mono">shop-</span>). Accepting a suggestion uses the ordinary group
                     assignment (server-bound); nothing is grouped until you accept it.
                   </p>
                   <div class="table-wrap">
@@ -886,7 +886,7 @@ <h4 style="margin: 0 0 4px; font-size: 14px;" x-text="'Database actions - ' + ac
                             <div style="display: flex; align-items: center; gap: 8px;">
                               <strong x-text="act.label"></strong>
                               <span style="font-size: 11px; padding: 1px 6px; border-radius: 3px;"
-                                :style="act.supported ? 'background: var(--success-bg, #d8f0d8); color: var(--success, #2a7a2a);' : 'background: var(--bg-inset, #eee); color: var(--text-muted);'"
+                                :style="act.supported ? 'background: var(--success-bg); color: var(--success);' : 'background: var(--bg-inset); color: var(--text-muted);'"
                                 x-text="act.supported ? 'supported' : 'not available from dash'"></span>
                             </div>
                             <p style="margin: 6px 0 0; font-size: 13px;" x-text="act.blast_radius"></p>
@@ -1788,7 +1788,7 @@ <h1 class="page-title">Domains</h1>
        drill, one policy. Reads the cached fleet view; nothing probes a
        server on load. -->
   <template x-if="$store.router.page === 'backups'">
-    <div x-data="backupsPage">
+    <div x-data="backupsPage" class="backups-page">
       <div class="page-header">
         <div>
           <h1 class="page-title">Backups</h1>
@@ -2692,8 +2692,8 @@ <h1 class="page-title" x-text="detail ? detail.server : routeIdentity()"></h1>
             </div>
             <div class="header-actions" x-show="detail">
               <button class="btn btn-sm" @click="load()">Refresh</button>
-              <button class="btn btn-sm btn-primary" @click="runAudit(detail.server)" :disabled="auditBusy === detail.server || !!detail.live_audit || !cliSupported"
-                      x-text="auditBusy === detail.server ? 'Auditing…' : 'Re-run audit'"></button>
+              <button class="btn btn-sm btn-primary" @click="runAudit(detail.server)" :disabled="!detail || auditBusy === detail.server || !!detail.live_audit || !cliSupported"
+                      x-text="detail && auditBusy === detail.server ? 'Auditing…' : 'Re-run audit'"></button>
             </div>
           </div>
 
@@ -2803,7 +2803,7 @@ <h3 style="font-size: 15px; margin: 0;">Findings</h3>
                         <td>
                           <span x-text="f.evidence"></span>
                           <div class="text-muted" style="margin-top: 4px;" x-show="f.related && f.related.length" x-text="'related: ' + (f.related || []).join(', ')"></div>
-                          <div class="text-muted" style="margin-top: 4px;" x-show="f.dismissed" x-text="'dismissed by ' + f.dismissed.actor"></div>
+                          <div class="text-muted" style="margin-top: 4px;" x-show="f.dismissed" x-text="f.dismissed ? 'dismissed by ' + f.dismissed.actor : ''"></div>
                         </td>
                         <td>
                           <template x-if="f.remedy && f.remedy.runnable">
@@ -2895,7 +2895,7 @@ <h1 class="page-title">Siblings</h1>
            when an admin allows it. The A13 rule applies: an editor cannot
            flip this. -->
       <template x-if="!loading && cliSupported">
-        <div class="stale-banner" role="status" style="display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;">
+        <div class="info-banner" role="status">
           <span x-text="allowInternal
             ? 'Probing reaches internal addresses (tailnet/LAN) — matches where siblings usually run.'
             : 'Internal addresses (tailnet/LAN) are not probed — candidates there read “Blocked (internal)” until an admin allows it.'"></span>
@@ -2969,7 +2969,7 @@ <h3 class="section-title" style="font-size: 14px; margin-bottom: 6px;">Apps send
               </form>
 
               <template x-if="telemetryPlanError">
-                <p role="alert" style="color: var(--danger, #c0392b); margin: 8px 0; font-size: 13px;" x-text="telemetryPlanError"></p>
+                <p role="alert" style="color: var(--danger); margin: 8px 0; font-size: 13px;" x-text="telemetryPlanError"></p>
               </template>
 
               <!-- The plan: exactly what apply will do. Approving this is
@@ -3031,12 +3031,12 @@ <h2 class="section-title" style="margin-bottom: 8px;">Connect Observe</h2>
                 </div>
                 <div class="field" style="padding-bottom: 6px;">
                   <label style="display: flex; gap: 6px; align-items: center; font-weight: 400;">
-                    <input type="checkbox" x-model="connectForm.allow_internal"> allow internal
+                    <input type="checkbox" x-model="connectForm.allow_internal"> Allow an internal address
                   </label>
                 </div>
               </div>
               <template x-if="previewError">
-                <p role="alert" class="text-muted" style="color: var(--danger, #c0392b); margin: 8px 0;" x-text="previewError"></p>
+                <p role="alert" class="text-muted" style="color: var(--danger); margin: 8px 0;" x-text="previewError"></p>
               </template>
               <template x-if="previewDoc">
                 <div role="status" class="stale-banner" style="margin: 8px 0;">
@@ -3094,7 +3094,7 @@ <h2 class="section-title" style="margin-bottom: 8px;">Connect Observe</h2>
                   </td>
                   <td>
                     <div x-text="probeHint(c)"></div>
-                    <div class="text-muted mono" style="font-size: 12px;" x-show="c.doc && c.doc.dashboard_url"><a :href="c.doc.dashboard_url" target="_blank" rel="noopener" x-text="c.doc.dashboard_url"></a></div>
+                    <div class="text-muted mono" style="font-size: 12px;" x-show="c.doc && c.doc.dashboard_url"><a :href="c.doc ? c.doc.dashboard_url : null" target="_blank" rel="noopener" x-text="c.doc ? c.doc.dashboard_url : ''"></a></div>
                     <div class="text-muted" x-show="c.base_url && (!c.doc || !c.doc.dashboard_url)"><a :href="c.base_url" target="_blank" rel="noopener" x-text="c.base_url"></a></div>
                   </td>
                 </tr>
@@ -3174,10 +3174,6 @@ <h1 class="page-title">Uptime Monitors</h1>
               <p class="subtitle" x-text="monitors.length ? monitors.length + ' monitor' + (monitors.length !== 1 ? 's' : '') : 'No monitors configured'"></p>
             </div>
             <div class="header-actions">
-              <span class="cli-status" x-show="cliStatus">
-                <span class="dot" :class="cliStatus?.installed ? 'green' : 'gray'"></span>
-                CLI <span x-text="cliStatus?.version || 'not installed'"></span>
-              </span>
               <button class="btn btn-primary" @click="openCreate()">Add Monitor</button>
             </div>
           </div>
@@ -4037,7 +4033,7 @@ <h2 class="section-title" x-text="'Install ' + selected.name"></h2>
             ? 'Version pin: v' + selected.version + ' (verified against the catalog when you submit)'
             : 'This template is unversioned — the install uses the catalog\'s current revision.'"></p>
           <template x-if="selected.upgrade">
-            <div class="table-wrap" style="padding: 12px; margin-bottom: 12px; border-left: 3px solid var(--warning, #d08770);">
+            <div class="table-wrap" style="padding: 12px; margin-bottom: 12px; border-left: 3px solid var(--warning);">
               <p style="margin: 0; font-size: 13px;"><strong x-text="'Upgrade available: v' + selected.upgrade.from + ' -> v' + selected.upgrade.to"></strong></p>
               <p style="margin: 4px 0 0; font-size: 13px; color: var(--text-muted);" x-text="selected.upgrade.notes || 'See the template\'s upgrade notes.'"></p>
               <p x-show="selected.upgrade.backup_scope" style="margin: 4px 0 0; font-size: 13px; color: var(--text-muted);" x-text="'Backup before upgrading: ' + (selected.upgrade.backup_scope || '')"></p>
@@ -4082,9 +4078,9 @@ <h2 class="section-title" x-text="'Install ' + selected.name"></h2>
                 <span x-text="t.name"></span>
                 <!-- D05: version state is rendered, never guessed — an
                      unversioned catalog says "unversioned". -->
-                <span style="margin-left: 8px; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--bg-inset, #eee); color: var(--text-muted);"
+                <span style="margin-left: 8px; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--bg-inset); color: var(--text-muted);"
                   x-text="t.version_state === 'versioned' ? 'v' + t.version : 'unversioned'"></span>
-                <span x-show="t.upgrade" style="margin-left: 4px; font-size: 11px; color: var(--warning, #d08770);" x-text="t.upgrade ? 'upgrade to v' + t.upgrade.to : ''"></span>
+                <span x-show="t.upgrade" style="margin-left: 4px; font-size: 11px; color: var(--warning);" x-text="t.upgrade ? 'upgrade to v' + t.upgrade.to : ''"></span>
               </div>
               <div class="card-meta" x-text="t.description"></div>
               <div class="card-meta" x-show="t.installed" style="font-size: 12px;" x-text="t.installed ? ('installed on ' + t.installed.server + (t.installed.version ? ' (v' + t.installed.version + ')' : '')) : ''"></div>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index b5abe68..06e212b 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -4465,6 +4465,7 @@ document.addEventListener('alpine:init', () => {
   // run is a durable operation; the page shows the cached report with its
   // age while one runs.
   Alpine.data('cleanupPage', () => withAsyncLoad({
+    loading: true,
     rows: [],
     detail: null,
     cliSupported: true,
@@ -4673,6 +4674,7 @@ document.addEventListener('alpine:init', () => {
 
   // ── Siblings Page (Programme B: discovery + Observe connect) ──
   Alpine.data('siblingsPage', () => withAsyncLoad({
+    loading: true,
     servers: [],
     candidates: [],
     allowInternal: false,

From 252c98dbe0cdbfe87fb07aa05e60ac4c8efcfc97 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 16:24:22 -0700
Subject: [PATCH 02/11] dash: put app, server and Settings tabs in the URL

The router gains setTab(tab, fallback): the tab rides the query string as
?tab=<name>, the default tab is left out, and the change replaces the
history entry so arrow-keying across a tab strip does not fill history.
App detail, server detail and Settings read the tab on open and follow it
when the URL changes, so reload, shared links and Back into a page land
on the tab.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/tab_routes.test.mjs         | 56 +++++++++++++++++++
 cmd/teploy-dash/frontend/index.html           | 18 +++---
 cmd/teploy-dash/frontend/js/app.js            | 55 +++++++++++++++++-
 3 files changed, 118 insertions(+), 11 deletions(-)
 create mode 100644 cmd/teploy-dash/frontend-test/tab_routes.test.mjs

diff --git a/cmd/teploy-dash/frontend-test/tab_routes.test.mjs b/cmd/teploy-dash/frontend-test/tab_routes.test.mjs
new file mode 100644
index 0000000..c18dda8
--- /dev/null
+++ b/cmd/teploy-dash/frontend-test/tab_routes.test.mjs
@@ -0,0 +1,56 @@
+// Tabs are in the URL (?tab=): reload, links and Back land on the tab.
+//
+// Run: node cmd/teploy-dash/frontend-test/tab_routes.test.mjs
+import { harness, response } from './identity_harness.mjs';
+
+const failures = [];
+const assert = (c, m) => { if (!c) failures.push(m); };
+
+const h = harness('/');
+const replaced = [];
+globalThis.history.replaceState = (_, __, url) => { replaced.push(url); const [p, q] = url.split('?'); location.pathname = p; location.search = q ? '?' + q : ''; };
+const router = h.stores.router;
+const go = (path, search = '') => { location.pathname = path; location.search = search; router.restore(); };
+
+// The router reads ?tab= and writes it with replaceState, leaving the default out.
+go('/deployments/prod/web', '?tab=env');
+assert(router.page === 'app-detail' && router.params.tab === 'env', 'app ?tab=env is read');
+router.setTab('logs', 'general');
+assert(replaced.at(-1) === '/deployments/prod/web?tab=logs', 'setTab replaces the URL with the new tab: ' + replaced.at(-1));
+router.setTab('general', 'general');
+assert(replaced.at(-1) === '/deployments/prod/web' && !('tab' in router.params), 'the default tab is left out of the URL');
+
+// App detail: switchTab writes the URL; a URL tab drives the page.
+h.respond(() => response({}));
+go('/deployments/prod/web', '?tab=deploys');
+const app = h.page('appDetailPage');
+app.$dispatch = () => {};
+await app.init();
+await h.flush();
+assert(app.tab === 'deploys', 'app detail opens on the URL tab: ' + app.tab);
+await app.switchTab('env');
+assert(router.params.tab === 'env' && replaced.at(-1).endsWith('?tab=env'), 'app tab click writes the URL');
+
+// Server detail.
+go('/servers/prod', '?tab=proxy');
+const srv = h.page('serverDetailPage');
+await srv.init();
+await h.flush();
+assert(srv.tab === 'proxy', 'server detail opens on the URL tab: ' + srv.tab);
+await srv.switchTab('overview');
+assert(!('tab' in router.params), 'server overview leaves the tab out');
+
+// Settings.
+go('/settings', '?tab=links');
+const settings = h.page('settingsPage');
+const ready = settings.init();
+assert(settings.tab === 'links', 'settings opens on the URL tab');
+settings.setTab('account');
+assert(router.params.tab === 'account' && replaced.at(-1) === '/settings?tab=account', 'settings tab click writes the URL');
+go('/settings', '?tab=groups');
+await h.flush();
+assert(settings.tab === 'groups', 'settings follows the URL (Back, links)');
+await ready;
+
+if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
+console.log('tab_routes.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index 5cdfa9c..9e7528e 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -4235,15 +4235,15 @@ <h1 class="page-title">Settings</h1>
       </div>
 
       <div class="tabs">
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'servers' }" @click="tab = 'servers'">Servers</button>
-        <button class="tab" :class="{ active: tab === 'groups' }" @click="tab = 'groups'">Groups</button>
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'notifications' }" @click="tab = 'notifications'">Notifications</button>
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'registry' }" @click="tab = 'registry'">Registry</button>
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'mcp' }" @click="tab = 'mcp'">MCP</button>
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'users' }" @click="tab = 'users'">Users</button>
-        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'sso' }" @click="tab = 'sso'">SSO</button>
-        <button class="tab" :class="{ active: tab === 'links' }" @click="tab = 'links'">Links</button>
-        <button class="tab" :class="{ active: tab === 'account' }" @click="tab = 'account'">Account</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'servers' }" @click="setTab('servers')">Servers</button>
+        <button class="tab" :class="{ active: tab === 'groups' }" @click="setTab('groups')">Groups</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'notifications' }" @click="setTab('notifications')">Notifications</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'registry' }" @click="setTab('registry')">Registry</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'mcp' }" @click="setTab('mcp')">MCP</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'users' }" @click="setTab('users')">Users</button>
+        <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'sso' }" @click="setTab('sso')">SSO</button>
+        <button class="tab" :class="{ active: tab === 'links' }" @click="setTab('links')">Links</button>
+        <button class="tab" :class="{ active: tab === 'account' }" @click="setTab('account')">Account</button>
       </div>
 
       <template x-if="loading">
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 06e212b..3074126 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -326,6 +326,16 @@ function authCaps(me) {
   return Array.isArray(caps) ? caps : [];
 }
 
+// routeTab reads the ?tab= of a route's params: one of the page's tab names,
+// else the page's default tab.
+function routeTab(params, allowed, fallback) {
+  const t = params && params.tab;
+  return allowed.includes(t) ? t : fallback;
+}
+const APP_TABS = ['general', 'settings', 'repository', 'env', 'logs', 'deploys', 'releases', 'activity', 'backups', 'kv'];
+const SERVER_TABS = ['overview', 'proxy'];
+const SETTINGS_TABS = ['servers', 'groups', 'notifications', 'registry', 'mcp', 'users', 'sso', 'links', 'account'];
+
 // ── Alpine.js App ──
 document.addEventListener('alpine:init', () => {
   // ── Router Store ──
@@ -429,6 +439,18 @@ document.addEventListener('alpine:init', () => {
       this.page = page;
       this.params = params;
     },
+    // Tabs live in the URL as ?tab=<name> (the default tab is left out so
+    // canonical URLs stay clean). A tab change replaces the current history
+    // entry rather than pushing one: reload and shared links land on the tab,
+    // Back leaves the page, and arrow-keying across a tab strip does not fill
+    // the history.
+    setTab(tab, fallback) {
+      const params = { ...this.params };
+      if (!tab || tab === fallback) delete params.tab; else params.tab = tab;
+      if ((this.params.tab || '') === (params.tab || '')) return;
+      this.params = params;
+      history.replaceState({ page: this.page, params }, '', routeToURL(this.page, params));
+    },
   });
   Alpine.store('router').restore();
   window.addEventListener('popstate', () => Alpine.store('router').restore());
@@ -1136,6 +1158,13 @@ document.addEventListener('alpine:init', () => {
           this.reload();
         }
       });
+      // The tab follows the URL (reload, links, Back into the page).
+      this.tabEffect = Alpine.effect(() => {
+        const r = Alpine.store('router');
+        if (r.page !== 'app-detail' || !this.resource) return;
+        const t = routeTab(r.params, APP_TABS, 'general');
+        if (t !== this.tab) queueMicrotask(() => this.switchTab(t));
+      });
       await this.reload();
     },
 
@@ -1194,6 +1223,7 @@ document.addEventListener('alpine:init', () => {
 
     // F059: scrub secret-bearing state when the component unmounts.
     destroy() {
+      if (this.tabEffect) Alpine.release(this.tabEffect);
       this.kvValues = {};
       this.newEnvValue = '';
       this.newKvValue = '';
@@ -2182,6 +2212,7 @@ document.addEventListener('alpine:init', () => {
 
     async switchTab(t) {
       this.tab = t;
+      if (Alpine.store('router').page === 'app-detail') Alpine.store('router').setTab(t, 'general');
       if (t === 'env') await this.loadEnv();
       if (t === 'deploys') await this.loadLog();
       if (t === 'general') await this.loadAccessories();
@@ -2731,9 +2762,15 @@ document.addEventListener('alpine:init', () => {
         const identity = this.routeIdentity();
         if (identity !== this.boundIdentity) { this.boundIdentity = identity; this.bindRoute(); }
       });
+      this.tabEffect = Alpine.effect(() => {
+        const r = Alpine.store('router');
+        if (r.page !== 'server-detail' || !this.name) return;
+        const t = routeTab(r.params, SERVER_TABS, 'overview');
+        if (t !== this.tab) queueMicrotask(() => this.switchTab(t));
+      });
       await initialLoad;
     },
-    destroy() { this.destroyed = true; this.generation++; if (this.routeEffect) Alpine.release(this.routeEffect); this.status = null; this.proxy = null; },
+    destroy() { this.destroyed = true; this.generation++; if (this.routeEffect) Alpine.release(this.routeEffect); if (this.tabEffect) Alpine.release(this.tabEffect); this.status = null; this.proxy = null; },
     async bindRoute() {
       if (this.destroyed) return;
       this.generation++; this.name = this.routeIdentity(); this.status = null; this.proxy = null; this.tab = 'overview';
@@ -2753,6 +2790,7 @@ document.addEventListener('alpine:init', () => {
     async switchTab(t) {
       if (!this.current(this.generation)) return;
       this.tab = t;
+      Alpine.store('router').setTab(t, 'overview');
       if (t === 'proxy' && !this.proxy) await this.loadProxy();
     },
     async loadProxy() {
@@ -2808,9 +2846,22 @@ document.addEventListener('alpine:init', () => {
 
     isAdmin() { return (this.me && this.me.role) === 'admin'; },
 
+    setTab(t) {
+      this.tab = t;
+      if (Alpine.store('router').page === 'settings') Alpine.store('router').setTab(t, 'servers');
+    },
+
     async init() {
+      this.tab = routeTab(Alpine.store('router').params, SETTINGS_TABS, 'servers');
+      this.tabEffect = Alpine.effect(() => {
+        const r = Alpine.store('router');
+        if (r.page !== 'settings') return;
+        const t = routeTab(r.params, SETTINGS_TABS, 'servers');
+        if (t !== this.tab) this.tab = t;
+      });
       await this.loadAll();
     },
+    destroy() { if (this.tabEffect) Alpine.release(this.tabEffect); },
 
     async loadAll() {
       this.loading = true;
@@ -2839,7 +2890,7 @@ document.addEventListener('alpine:init', () => {
         // A non-admin can't see the admin tabs; if the default landed on one,
         // move to a tab they can use.
         if (!admin && ['servers', 'notifications', 'registry', 'mcp', 'users', 'sso'].includes(this.tab)) {
-          this.tab = 'groups';
+          this.setTab('groups');
         }
       } catch (e) {
         showToast(e.message, 'error');

From 54a5dfae92ace62ed00f0e208c5ee157e4dcfa2f Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 16:26:26 -0700
Subject: [PATCH 03/11] dash: relabel Fleet, Projects, Siblings, Sources; add
 /apps

- Fleet reads Servers, Projects reads Apps, Siblings reads Integrations,
  Sources reads Git sources; the app tab Activity reads History (the
  global page keeps Activity); the monitors page title reads Uptime.
- /apps is a new alias for the apps page.
- Cleanup's ok state reads "Audited" with the open warning count instead
  of "Clean bill" (ok means the audit completed, not that it is clean).
- Restore-test intervals read hourly/daily/weekly, else "every N h".

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/config_home.test.mjs        |  2 +-
 .../frontend-test/git_source_card.test.mjs    |  2 +-
 .../frontend-test/ia_routes.test.mjs          | 14 +++---
 .../frontend-test/nav_rework.test.mjs         | 24 ++++++++++
 .../frontend-test/siblings_page.test.mjs      |  2 +-
 cmd/teploy-dash/frontend/index.html           | 48 +++++++++----------
 cmd/teploy-dash/frontend/js/app.js            | 29 +++++++++--
 7 files changed, 85 insertions(+), 36 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/config_home.test.mjs b/cmd/teploy-dash/frontend-test/config_home.test.mjs
index de4bd93..e6784c0 100644
--- a/cmd/teploy-dash/frontend-test/config_home.test.mjs
+++ b/cmd/teploy-dash/frontend-test/config_home.test.mjs
@@ -263,7 +263,7 @@ function newPage() {
     `x-show="hasFeature('config_home')"`,
     `x-show="hasFeature('events')"`,
     'id="app-panel-settings"',
-    'id="app-panel-activity"',
+    'id="app-panel-history"',
     'Make editable here',
     'Deploy pending changes',
     'Settings edited in',
diff --git a/cmd/teploy-dash/frontend-test/git_source_card.test.mjs b/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
index db73081..05f2d26 100644
--- a/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
+++ b/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
@@ -239,7 +239,7 @@ function requestsFor(method, urlPart) {
   const html = readFileSync(join(here, '../frontend/index.html'), 'utf8');
   const tabStart = html.indexOf('id="app-tab-repository"');
   const panelStart = html.indexOf('id="app-panel-repository"');
-  const panelEnd = html.indexOf('id="app-panel-activity"');
+  const panelEnd = html.indexOf('id="app-panel-history"');
   assert(tabStart !== -1 && panelStart !== -1 && panelEnd > panelStart, 'repository tab/panel not found in index.html');
   const tabButton = html.slice(tabStart - 400, tabStart + 300);
   assert(tabButton.includes("hasFeature('git_source') && teployHome()"), 'tab must hide without the git-source token or on non-Teploy homes');
diff --git a/cmd/teploy-dash/frontend-test/ia_routes.test.mjs b/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
index 51f732a..0efd529 100644
--- a/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
+++ b/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
@@ -72,6 +72,7 @@ assert(!!router, 'router store was not registered');
     ['/operations/abc', 'operation-detail'],
     // task-named aliases deep-link to the same pages, with params.
     ['/projects', 'projects'],
+    ['/apps', 'projects'],
     ['/fleet', 'servers'],
     ['/fleet/prod', 'server-detail'],
     ['/activity', 'operations'],
@@ -124,21 +125,22 @@ assert(!!router, 'router store was not registered');
 //    semantics; page titles renamed.
 {
   const html = readFileSync(join(here, '../frontend/index.html'), 'utf8');
-  for (const label of ['>Projects</a>', '>Fleet</a>', '>Activity</a>', '>Monitors</a>', '>Domains</a>', '>Restore Tests</a>', '>Templates</a>', '>Settings</a>']) {
+  for (const label of ['>Apps</a>', '>Servers</a>', '>Activity</a>', '>Monitors</a>', '>Domains</a>', '>Restore Tests</a>', '>Templates</a>', '>Integrations</a>', '>Git sources</a>', '>Settings</a>']) {
     assert(html.includes(label), `nav must render ${label}`);
   }
   assert(!html.includes('>Deployments</a>'), 'nav must not render the old Deployments label');
   const seps = (html.match(/class="nav-sep"/g) || []).length;
   assert(seps === 2, `nav must render two group separators (found ${seps})`);
-  assert(html.includes('title="Groups, projects, and the apps deployed to them"'), 'Projects nav link must carry its task title');
-  assert(html.includes('title="Every server this dash manages'), 'Fleet nav link must carry its task title');
+  assert(html.includes('title="Groups, projects, and the apps deployed to them"'), 'Apps nav link must carry its task title');
+  assert(html.includes('title="Every server this dash manages'), 'Servers nav link must carry its task title');
   assert(html.includes('title="Operations started through dash'), 'Activity nav link must carry its task title');
   // Page titles follow the nav names.
-  assert(html.includes('<h1 class="page-title">Projects</h1>'), 'projects page title');
-  assert(html.includes('<h1 class="page-title">Fleet</h1>'), 'fleet page title');
+  assert(html.includes('<h1 class="page-title">Apps</h1>'), 'apps page title');
+  assert(html.includes('<h1 class="page-title">Servers</h1>'), 'servers page title');
+  assert(!/>(Projects|Fleet|Siblings|Sources)<\/(a|h1)>/.test(html), 'old labels Projects, Fleet, Siblings, Sources are gone');
   assert(html.includes('<h1 class="page-title">Activity</h1>'), 'activity page title');
   assert(!html.includes('&larr; Deployments</a>'), 'back-links must say Projects, not Deployments');
-  assert(html.includes('&larr; Projects</a>') && html.includes('&larr; Fleet</a>') && html.includes('&larr; Activity</a>'), 'back-links renamed');
+  assert(html.includes('&larr; Apps</a>') && html.includes('&larr; Servers</a>') && html.includes('&larr; Activity</a>'), 'back-links renamed');
   // Tab semantics on the resource page (app) and the server page.
   assert(html.includes('role="tablist"'), 'tabs render tablist semantics');
   const tabs = (html.match(/role="tab"/g) || []).length;
diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index f7bb1d6..323737a 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -39,5 +39,29 @@ assert(!/:href="c\.doc\.dashboard_url"/.test(html), 'sibling dashboard_url read
 // Checkboxes inside form fields are not stretched into text-input boxes.
 assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'field checkboxes keep their natural size');
 
+// Labels: common intervals read as words; an ok cleanup audit says Audited.
+{
+  const listeners = [];
+  globalThis.document = { addEventListener: (t, fn) => { if (t === 'alpine:init') listeners.push(fn); }, getElementById: () => null, documentElement: { setAttribute() {}, getAttribute: () => 'dark' } };
+  globalThis.window = { addEventListener() {}, dispatchEvent() {} };
+  globalThis.localStorage = { getItem: () => null, setItem() {} };
+  globalThis.history = { pushState() {}, replaceState() {} };
+  globalThis.location = { pathname: '/', search: '' };
+  globalThis.CustomEvent = class {};
+  const comps = {}, stores = {};
+  globalThis.Alpine = { data: (n, f) => { comps[n] = f; }, store: (n, d) => { if (d !== undefined) stores[n] = d; return stores[n]; }, effect() {} };
+  new Function(js + '\n;globalThis.__fi = formatInterval;')();
+  listeners.forEach((fn) => fn());
+  const fi = globalThis.__fi;
+  assert(fi(1) === 'hourly' && fi(24) === 'daily' && fi(168) === 'weekly' && fi(6) === 'every 6 h' && fi(48) === 'every 2 days', 'formatInterval names common intervals');
+  assert(!html.includes("'every ' + t.interval_hours + 'h'"), 'restore tests use formatInterval');
+  const cleanup = comps.cleanupPage();
+  assert(cleanup.auditLabel('ok', { warning: 2 }) === 'Audited — 2 warnings', 'ok audit with warnings says Audited and the count');
+  assert(cleanup.auditLabel('ok', {}) === 'Audited — no warnings', 'ok audit without warnings');
+  assert(!js.includes('Clean bill'), 'no "Clean bill" label');
+  assert(html.includes('>History</button>') && html.includes('id="app-panel-history"'), 'the app tab reads History');
+  assert(html.includes('<h1 class="page-title">Uptime</h1>'), 'monitors page title matches its tab');
+}
+
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend-test/siblings_page.test.mjs b/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
index 7acbe29..ebb98b9 100644
--- a/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
@@ -34,7 +34,7 @@ test('the /siblings route renders the page and the nav names it', async () => {
   assert.equal(h.stores.router.page, 'siblings');
   const html = h.readHTML();
   assert.ok(html.includes(`x-if="$store.router.page === 'siblings'"`));
-  assert.ok(html.includes('>Siblings</a>'));
+  assert.ok(html.includes('>Integrations</a>'));
   assert.ok(html.includes('x-data="siblingsPage"'));
 });
 
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index 9e7528e..c4560b9 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -70,18 +70,18 @@
       </div>
     </li>
     <li><a href="#" :class="{ active: $store.router.page === 'homepage' }" :aria-current="$store.router.page === 'homepage' ? 'page' : null" @click.prevent="$store.router.navigate('homepage')">Home</a></li>
-    <li><a href="#" title="Groups, projects, and the apps deployed to them" :class="{ active: ['projects', 'project-detail', 'app-detail'].includes($store.router.page) }" :aria-current="['projects', 'project-detail', 'app-detail'].includes($store.router.page) ? 'page' : null" @click.prevent="$store.router.navigate('projects')">Projects</a></li>
-    <li><a href="#" title="Every server this dash manages — health, host detail, routes" :class="{ active: $store.router.page === 'servers' || $store.router.page === 'server-detail' }" :aria-current="$store.router.page === 'servers' || $store.router.page === 'server-detail' ? 'page' : null" @click.prevent="$store.router.navigate('servers')">Fleet</a></li>
+    <li><a href="#" title="Groups, projects, and the apps deployed to them" :class="{ active: ['projects', 'project-detail', 'app-detail'].includes($store.router.page) }" :aria-current="['projects', 'project-detail', 'app-detail'].includes($store.router.page) ? 'page' : null" @click.prevent="$store.router.navigate('projects')">Apps</a></li>
+    <li><a href="#" title="Every server this dash manages — health, host detail, routes" :class="{ active: $store.router.page === 'servers' || $store.router.page === 'server-detail' }" :aria-current="$store.router.page === 'servers' || $store.router.page === 'server-detail' ? 'page' : null" @click.prevent="$store.router.navigate('servers')">Servers</a></li>
     <li><a href="#" title="Operations started through dash — deploys, rollbacks, removals, with live logs" :class="{ active: $store.router.page === 'operations' || $store.router.page === 'operation-detail' }" :aria-current="$store.router.page === 'operations' || $store.router.page === 'operation-detail' ? 'page' : null" @click.prevent="$store.router.navigate('operations')">Activity</a></li>
     <li class="nav-sep" aria-hidden="true"></li>
     <li><a href="#" :class="{ active: $store.router.page === 'monitors' || $store.router.page === 'monitor-detail' }" :aria-current="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail' ? 'page' : null" @click.prevent="$store.router.navigate('monitors')">Monitors</a></li>
     <li><a href="#" title="DNS, route, certificate and HTTP health for every domain" :class="{ active: $store.router.page === 'domains' }" :aria-current="$store.router.page === 'domains' ? 'page' : null" @click.prevent="$store.router.navigate('domains')">Domains</a></li>
     <li><a href="#" title="What is left over on each server — stale routes, old versions, reclaimable space — with the fix where one exists" :class="{ active: $store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail' }" :aria-current="$store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail' ? 'page' : null" @click.prevent="$store.router.navigate('cleanup')">Cleanup</a></li>
-    <li><a href="#" title="Teploy products on your servers — discovered, probed, and connected where you allow it" :class="{ active: $store.router.page === 'siblings' }" :aria-current="$store.router.page === 'siblings' ? 'page' : null" @click.prevent="$store.router.navigate('siblings')">Siblings</a></li>
-    <li><a href="#" title="Every database and volume across the fleet — coverage, encryption, restore tests" :class="{ active: $store.router.page === 'backups' }" :aria-current="$store.router.page === 'backups' ? 'page' : null" @click.prevent="$store.router.navigate('backups')">Backups</a></li>
+    <li><a href="#" title="Teploy products on your servers — discovered, probed, and connected where you allow it" :class="{ active: $store.router.page === 'siblings' }" :aria-current="$store.router.page === 'siblings' ? 'page' : null" @click.prevent="$store.router.navigate('siblings')">Integrations</a></li>
+    <li><a href="#" title="Every database and volume across your servers — coverage, encryption, restore tests" :class="{ active: $store.router.page === 'backups' }" :aria-current="$store.router.page === 'backups' ? 'page' : null" @click.prevent="$store.router.navigate('backups')">Backups</a></li>
     <li><a href="#" :class="{ active: $store.router.page === 'restore-tests' }" :aria-current="$store.router.page === 'restore-tests' ? 'page' : null" @click.prevent="$store.router.navigate('restore-tests')">Restore Tests</a></li>
     <li><a href="#" :class="{ active: $store.router.page === 'templates' }" :aria-current="$store.router.page === 'templates' ? 'page' : null" @click.prevent="$store.router.navigate('templates')">Templates</a></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'sources' }" @click.prevent="$store.router.navigate('sources')">Sources</a></li>
+    <li><a href="#" :class="{ active: $store.router.page === 'sources' }" @click.prevent="$store.router.navigate('sources')">Git sources</a></li>
     <li class="nav-sep" aria-hidden="true"></li>
     <li><a href="#" :class="{ active: $store.router.page === 'settings' }" :aria-current="$store.router.page === 'settings' ? 'page' : null" @click.prevent="$store.router.navigate('settings')">Settings</a></li>
   </ul>
@@ -252,7 +252,7 @@ <h1 class="page-title">Home</h1>
     <div x-data="projectsPage">
       <div class="page-header">
         <div>
-          <h1 class="page-title">Projects</h1>
+          <h1 class="page-title">Apps</h1>
           <p class="subtitle">Groups organize projects; projects hold the apps you deploy.</p>
           <p class="subtitle" x-show="!loading && fleetAge()" x-text="'Server state observed ' + fleetAge()"></p>
         </div>
@@ -445,7 +445,7 @@ <h2 class="section-title" x-text="group.name"></h2>
   <!-- ═══ Project Detail Page ═══ -->
   <template x-if="$store.router.page === 'project-detail'">
     <div x-data="projectDetailPage">
-      <a href="#" class="back-link" @click.prevent="$store.router.navigate('projects')">&larr; Projects</a>
+      <a href="#" class="back-link" @click.prevent="$store.router.navigate('projects')">&larr; Apps</a>
 
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
@@ -562,7 +562,7 @@ <h1 class="page-title" x-text="projectName"></h1>
         <a href="#" class="back-link" @click.prevent="$store.router.navigate('project-detail', { group: $store.router.params.fromGroup, project: $store.router.params.fromProject })">&larr; <span x-text="$store.router.params.fromProject"></span></a>
       </template>
       <template x-if="!$store.router.params.fromProject">
-        <a href="#" class="back-link" @click.prevent="$store.router.navigate('projects')">&larr; Projects</a>
+        <a href="#" class="back-link" @click.prevent="$store.router.navigate('projects')">&larr; Apps</a>
       </template>
 
       <template x-if="loading">
@@ -596,7 +596,7 @@ <h1 class="page-title" x-text="app.name"></h1>
             <button class="tab" :class="{ active: tab === 'logs' }" role="tab" id="app-tab-logs" aria-controls="app-panel-logs" :aria-selected="(tab === 'logs').toString()" :tabindex="tab === 'logs' ? 0 : -1" @focus="switchTab('logs')">Logs</button>
             <button class="tab" :class="{ active: tab === 'deploys' }" role="tab" id="app-tab-deploys" aria-controls="app-panel-deploys" :aria-selected="(tab === 'deploys').toString()" :tabindex="tab === 'deploys' ? 0 : -1" @focus="switchTab('deploys')">Deploys</button>
             <button class="tab" x-show="hasFeature('releases')" :class="{ active: tab === 'releases' }" role="tab" id="app-tab-releases" aria-controls="app-panel-releases" :aria-selected="(tab === 'releases').toString()" :tabindex="tab === 'releases' ? 0 : -1" @focus="switchTab('releases')">Releases</button>
-            <button class="tab" x-show="hasFeature('events')" :class="{ active: tab === 'activity' }" role="tab" id="app-tab-activity" aria-controls="app-panel-activity" :aria-selected="(tab === 'activity').toString()" :tabindex="tab === 'activity' ? 0 : -1" @focus="switchTab('activity')">Activity</button>
+            <button class="tab" x-show="hasFeature('events')" :class="{ active: tab === 'history' }" role="tab" id="app-tab-history" aria-controls="app-panel-history" :aria-selected="(tab === 'history').toString()" :tabindex="tab === 'history' ? 0 : -1" @focus="switchTab('history')">History</button>
             <button class="tab" x-show="hasFeature('backups')" :class="{ active: tab === 'backups' }" role="tab" id="app-tab-backups" aria-controls="app-panel-backups" :aria-selected="(tab === 'backups').toString()" :tabindex="tab === 'backups' ? 0 : -1" @focus="switchTab('backups')">Backups</button>
             <button class="tab" :class="{ active: tab === 'kv' }" role="tab" id="app-tab-kv" aria-controls="app-panel-kv" :aria-selected="(tab === 'kv').toString()" :tabindex="tab === 'kv' ? 0 : -1" @focus="switchTab('kv')">KV</button>
           </div>
@@ -1352,8 +1352,8 @@ <h2 class="section-title">Repository</h2>
           <!-- Activity Tab (server-authority P2): the app's server event
                history. Every client writes it — laptop CLI, CI, this
                dashboard — so a deploy from anywhere shows here. -->
-          <template x-if="tab === 'activity'">
-            <div role="tabpanel" id="app-panel-activity" aria-labelledby="app-tab-activity" tabindex="-1">
+          <template x-if="tab === 'history'">
+            <div role="tabpanel" id="app-panel-history" aria-labelledby="app-tab-history" tabindex="-1">
               <div class="section-header" style="margin-bottom: 12px;">
                 <span class="card-meta">Everything done to this app, from any client.</span>
                 <button class="btn btn-sm" @click="loadEvents()" :disabled="eventsLoading" x-text="eventsLoading ? 'Loading…' : 'Refresh'"></button>
@@ -1794,7 +1794,7 @@ <h1 class="page-title">Domains</h1>
           <h1 class="page-title">Backups</h1>
           <p class="subtitle" x-text="rows.length
             ? rows.length + ' target' + (rows.length !== 1 ? 's' : '') + ': ' + (countBy('covered') + countBy('adopted')) + ' covered, ' + countBy('failing') + ' failing, ' + countBy('stale') + ' stale, ' + countBy('uncovered') + ' uncovered'
-            : 'Every database and volume across the fleet — storage, encryption, restore tests'"></p>
+            : 'Every database and volume across your servers — storage, encryption, restore tests'"></p>
         </div>
         <div class="header-actions">
           <button class="btn btn-sm" @click="refresh()" x-text="'Read servers now'"></button>
@@ -1818,7 +1818,7 @@ <h1 class="page-title">Backups</h1>
       </template>
 
       <template x-if="!loading && view && view.sweep_error">
-        <div role="status" class="stale-banner" x-text="'The last fleet read did not finish: ' + view.sweep_error"></div>
+        <div role="status" class="stale-banner" x-text="'The last read of your servers did not finish: ' + view.sweep_error"></div>
       </template>
 
       <!-- Protect my data: where things stand, then the flow. Never forced, and the
@@ -2426,7 +2426,7 @@ <h2>Every target</h2>
               <span class="card-meta" x-text="'projected ' + bytesLabel(view.projected_bytes) + ' of storage at steady state'"></span>
             </div>
             <template x-if="rows.length === 0">
-              <div class="empty-state"><p x-text="view.last_sweep_at ? 'No databases or volumes found on your servers yet.' : 'The first fleet read has not finished; it runs shortly after Dash starts.'"></p></div>
+              <div class="empty-state"><p x-text="view.last_sweep_at ? 'No databases or volumes found on your servers yet.' : 'The first read of your servers has not finished; it runs shortly after Dash starts.'"></p></div>
             </template>
             <template x-if="rows.length > 0">
               <div class="table-wrap">
@@ -2654,7 +2654,7 @@ <h1 class="page-title">Cleanup</h1>
                       <td>
                         <span class="status-dot dot" :class="stateClass(row.state)"></span>
                         <a :href="'/cleanup/' + encodeURIComponent(row.server)" @click.prevent="openServer(row.server)" x-text="row.server"></a>
-                        <div class="text-muted" x-text="stateLabel(row.state) + (row.configured === false ? ' — no longer configured' : '')"></div>
+                        <div class="text-muted" x-text="auditLabel(row.state, row.counts) + (row.configured === false ? ' — no longer configured' : '')"></div>
                         <div class="text-muted" x-show="row.error" x-text="row.error"></div>
                       </td>
                       <td>
@@ -2688,7 +2688,7 @@ <h1 class="page-title">Cleanup</h1>
           <div class="page-header">
             <div>
               <h1 class="page-title" x-text="detail ? detail.server : routeIdentity()"></h1>
-              <p class="subtitle" x-text="detail ? stateLabel(detail.state) + (detail.audited_at ? ' — audited ' + ageLabel(detail.age_seconds) : '') : ''"></p>
+              <p class="subtitle" x-text="detail ? auditLabel(detail.state, detailCounts()) + (detail.audited_at ? ' — audited ' + ageLabel(detail.age_seconds) : '') : ''"></p>
             </div>
             <div class="header-actions" x-show="detail">
               <button class="btn btn-sm" @click="load()">Refresh</button>
@@ -2862,7 +2862,7 @@ <h2 id="cleanup-remedy-title">Fix <span x-text="confirmFinding ? kindLabel(confi
 
       <div class="page-header">
         <div>
-          <h1 class="page-title">Siblings</h1>
+          <h1 class="page-title">Integrations</h1>
           <p class="subtitle">Teploy products running on your servers, found by their labels and probed on their published ports. Nothing is connected until you confirm it.</p>
         </div>
         <div class="header-actions">
@@ -3018,7 +3018,7 @@ <h2 class="section-title" style="margin-bottom: 8px;">Connect Observe</h2>
               <p class="text-muted" style="margin: 0 0 12px 0; font-size: 13px;">
                 Create a service token in Observe, then paste it here. <a x-show="observeTokenURL()" :href="observeTokenURL()" target="_blank" rel="noopener">Open the filled-in form in Observe</a><span x-show="!observeTokenURL()">Enter the address below for a link to the filled-in form, or use Settings → Service Tokens with scopes <span class="mono">sites:create</span> and <span class="mono">keys:mint</span>.</span>
                 Dash never sees an Observe admin login, and nothing is written until you confirm this instance's identity.
-                <span x-show="observeHintData && observeHintData.available">A confirmed Observe was found on the fleet — its address is prefilled.</span>
+                <span x-show="observeHintData && observeHintData.available">A confirmed Observe was found on your servers — its address is prefilled.</span>
               </p>
               <div style="display: grid; grid-template-columns: 2fr 2fr auto; gap: 8px; align-items: end;">
                 <div class="field">
@@ -3170,7 +3170,7 @@ <h2 class="section-title" style="margin-top: 24px;">Server reads</h2>
         <div>
           <div class="page-header">
             <div>
-              <h1 class="page-title">Uptime Monitors</h1>
+              <h1 class="page-title">Uptime</h1>
               <p class="subtitle" x-text="monitors.length ? monitors.length + ' monitor' + (monitors.length !== 1 ? 's' : '') : 'No monitors configured'"></p>
             </div>
             <div class="header-actions">
@@ -3639,7 +3639,7 @@ <h1 class="page-title">Restore Tests</h1>
                 </div>
               </div>
               <div class="monitor-target">
-                <span x-text="'every ' + t.interval_hours + 'h'"></span>
+                <span x-text="formatInterval(t.interval_hours)"></span>
               </div>
               <div class="monitor-meta">
                 <template x-if="t.last_run_at && !t.last_run_at.startsWith('0001')">
@@ -3734,7 +3734,7 @@ <h2 id="restore-dialog-title">Add Restore Test</h2>
     <div x-data="serversPage">
       <div class="page-header">
         <div>
-          <h1 class="page-title">Fleet</h1>
+          <h1 class="page-title">Servers</h1>
           <p class="subtitle">Every server this dash manages. Unreachable hosts stay listed with their last-known state.</p>
         </div>
       </div>
@@ -3786,7 +3786,7 @@ <h1 class="page-title">Fleet</h1>
   <!-- ═══ Server Detail Page ═══ -->
   <template x-if="$store.router.page === 'server-detail'">
     <div x-data="serverDetailPage">
-      <a href="#" class="back-link" @click.prevent="$store.router.navigate('servers')">&larr; Fleet</a>
+      <a href="#" class="back-link" @click.prevent="$store.router.navigate('servers')">&larr; Servers</a>
 
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
@@ -3955,7 +3955,7 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
     <div x-data="sourcesPage">
       <div class="page-header">
         <div>
-          <h1 class="page-title">Sources</h1>
+          <h1 class="page-title">Git sources</h1>
           <p class="subtitle">Register a repository so dash can receive and verify its webhook pushes. Provider names select credentials configured by the operator.</p>
         </div>
         <div class="header-actions">
@@ -4642,7 +4642,7 @@ <h3 class="section-title" style="font-size: 14px; margin-top: 24px;">Dash heartb
           <div class="card" style="padding: 24px; margin-bottom: 16px;">
             <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">MCP access tokens</h3>
             <p style="font-size: 13px; color: var(--text-muted); margin-bottom: 20px;">
-              Let AI clients (Claude Code, Cursor, any MCP client) read fleet state and run deploy
+              Let AI clients (Claude Code, Cursor, any MCP client) read server and app state and run deploy
               actions through this dashboard. Every action goes through the teploy CLI — the same
               path as the buttons here — so there is no second source of truth. Endpoint:
               <code style="font-family: var(--mono);">POST /api/mcp</code> with the token as a Bearer header.
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 3074126..b45e43e 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -326,13 +326,21 @@ function authCaps(me) {
   return Array.isArray(caps) ? caps : [];
 }
 
+// formatInterval names common check intervals (hourly, daily, weekly) and
+// falls back to "every N h".
+function formatInterval(hours) {
+  const h = Number(hours);
+  if (!Number.isFinite(h) || h <= 0) return '';
+  return { 1: 'hourly', 24: 'daily', 168: 'weekly' }[h] || (h % 24 === 0 ? `every ${h / 24} days` : `every ${h} h`);
+}
+
 // routeTab reads the ?tab= of a route's params: one of the page's tab names,
 // else the page's default tab.
 function routeTab(params, allowed, fallback) {
   const t = params && params.tab;
   return allowed.includes(t) ? t : fallback;
 }
-const APP_TABS = ['general', 'settings', 'repository', 'env', 'logs', 'deploys', 'releases', 'activity', 'backups', 'kv'];
+const APP_TABS = ['general', 'settings', 'repository', 'env', 'logs', 'deploys', 'releases', 'history', 'backups', 'kv'];
 const SERVER_TABS = ['overview', 'proxy'];
 const SETTINGS_TABS = ['servers', 'groups', 'notifications', 'registry', 'mcp', 'users', 'sso', 'links', 'account'];
 
@@ -372,6 +380,7 @@ document.addEventListener('alpine:init', () => {
     { page: 'settings', path: '/settings' },
     // Task-named aliases (D07): same pages, task-meaningful paths.
     { page: 'projects', path: '/projects' },
+    { page: 'projects', path: '/apps' },
     { page: 'servers', path: '/fleet' },
     { page: 'server-detail', path: '/fleet/:name' },
     { page: 'operations', path: '/activity' },
@@ -2218,7 +2227,7 @@ document.addEventListener('alpine:init', () => {
       if (t === 'general') await this.loadAccessories();
       if (t === 'settings') await this.loadSettings();
       if (t === 'repository') await this.loadGitSource();
-      if (t === 'activity') await this.loadEvents();
+      if (t === 'history') await this.loadEvents();
       if (t === 'releases') await this.loadReleases();
       if (t === 'backups') await this.loadBackups();
       if (t === 'env' && this.hasFeature('secrets')) await this.loadSecrets();
@@ -4672,8 +4681,22 @@ document.addEventListener('alpine:init', () => {
       return findings.filter(f => f.dismissed);
     },
 
+    // An ok state means the audit completed, not that nothing was found:
+    // it reads "Audited" with the open warning count.
+    auditLabel(state, counts) {
+      if (state !== 'ok') return this.stateLabel(state);
+      const n = ((counts && counts.critical) || 0) + ((counts && counts.warning) || 0);
+      return n ? `Audited — ${n} warning${n === 1 ? '' : 's'}` : 'Audited — no warnings';
+    },
+    detailCounts() {
+      const counts = { critical: 0, warning: 0 };
+      for (const f of (this.detail && this.detail.findings) || []) {
+        if (!f.dismissed && (f.severity === 'critical' || f.severity === 'warning')) counts[f.severity]++;
+      }
+      return counts;
+    },
     stateLabel(state) {
-      return { ok: 'Clean bill', partial: 'Partially audited', unreachable: 'Unreachable', never: 'Not audited yet', stale: 'Report is stale' }[state] || state;
+      return { ok: 'Audited', partial: 'Partially audited', unreachable: 'Unreachable', never: 'Not audited yet', stale: 'Report is stale' }[state] || state;
     },
     stateClass(state) {
       return { ok: 'green', partial: 'yellow', unreachable: 'red', never: 'gray', stale: 'gray' }[state] || 'gray';

From e81eae61b5a57460da3186d28be45b6bb49a6bc6 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 16:49:40 -0700
Subject: [PATCH 04/11] dash: seven-item header; Monitoring, Servers, Apps,
 Backups, Settings tabs

The header is Home, Apps, Servers, Monitoring, Backups, Activity, then
Settings. Pages that had their own slot are now tabs, and every old URL
opens the page and tab it moved to:

- Monitoring: Uptime (/monitors), Domains (/domains), and a new Alerts tab
  (/alerts) holding incidents, silences and deliveries, which used to sit
  at the bottom of the monitors list, with a link to Settings >
  Notifications.
- Servers: Servers and Cleanup (/cleanup); a server's cleanup report is
  the Cleanup tab of its server page (/cleanup/:server opens it). The
  Servers page gains an Add server button that opens Settings > Servers.
- Apps: Apps and Templates (/templates); + Deploy offers "From an image"
  and "From a template".
- Backups: Coverage, Setup (the wizard and Advanced) and Restore tests
  (/restore-tests opens it), where the automatic and the hand-added tests
  are one table with an "Added by" column.
- Settings gains Integrations (/siblings) and Git sources (/sources).

Routes may carry fixed params, so an old path maps to a page and tab;
navigate() still accepts the old page names. The header was re-measured:
brand + seven destinations need 695px tightened and 857px with four
pinned icons, so the nav tightens below 1100px and collapses below 900px
(was 1400/1240). header_layout and ia_routes assert the new structure.
.table-wrap is positioned so sr-only header labels cannot widen a page.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/async_states.test.mjs       |    2 +-
 .../frontend-test/cleanup_page.test.mjs       |   13 +-
 .../frontend-test/domains_page.test.mjs       |    3 +-
 .../frontend-test/header_layout.test.mjs      |   16 +-
 .../frontend-test/ia_routes.test.mjs          |   76 +-
 .../frontend-test/monitor_routes.test.mjs     |    2 +-
 .../frontend-test/resource_page.test.mjs      |    2 +-
 .../frontend-test/restore_toggle.test.mjs     |    2 +-
 .../frontend-test/siblings_page.test.mjs      |    9 +-
 cmd/teploy-dash/frontend/css/style.css        |   43 +-
 cmd/teploy-dash/frontend/index.html           | 1594 +++++++++--------
 cmd/teploy-dash/frontend/js/app.js            |  109 +-
 12 files changed, 1039 insertions(+), 832 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/async_states.test.mjs b/cmd/teploy-dash/frontend-test/async_states.test.mjs
index 5118daf..d370229 100644
--- a/cmd/teploy-dash/frontend-test/async_states.test.mjs
+++ b/cmd/teploy-dash/frontend-test/async_states.test.mjs
@@ -281,7 +281,7 @@ const rawOk = (value) => () => ({
   // The empty states that used to paint on failure now gate on !loadFailed.
   for (const marker of [
     '!loading && !loadFailed && monitors.length === 0',
-    '!loading && !loadFailed && tests.length === 0',
+    '!loading && !loadFailed && restoreTestRows(automaticTests(), tests).length === 0',
     '!loading && !loadFailed && ops.length === 0',
     '!loading && !loadFailed && visibleItems.length === 0',
   ]) {
diff --git a/cmd/teploy-dash/frontend-test/cleanup_page.test.mjs b/cmd/teploy-dash/frontend-test/cleanup_page.test.mjs
index 05de112..9aaa094 100644
--- a/cmd/teploy-dash/frontend-test/cleanup_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/cleanup_page.test.mjs
@@ -27,9 +27,16 @@ test('the /cleanup route renders the page and the nav names it',async()=>{
   const h=harness('/cleanup');h.stores.router.restore();
   assert.equal(h.stores.router.page,'cleanup');
   const html=h.readHTML();
-  assert.ok(html.includes(`x-if="$store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail'"`));
-  assert.ok(html.includes('>Cleanup</a>'));
-  assert.ok(html.includes('x-data="cleanupPage"'));
+  assert.ok(html.includes(`x-if="$store.router.page === 'cleanup'"`));
+  // Cleanup is a tab of the Servers section, and a server's report is the
+  // Cleanup tab of its server page (/cleanup/:server still opens it).
+  assert.ok(h.stores.router.hubTabs.some(([page, label]) => page === 'cleanup' && label === 'Cleanup'));
+  assert.equal(h.stores.router.section, 'servers');
+  assert.equal((html.match(/x-data="cleanupPage"/g) || []).length, 2, 'the list page and the server tab');
+  assert.ok(html.includes(`x-if="tab === 'cleanup'"`));
+  const d = harness('/cleanup/prod'); d.stores.router.restore();
+  assert.equal(d.stores.router.page, 'server-detail');
+  assert.deepEqual({ ...d.stores.router.params }, { name: 'prod', tab: 'cleanup' });
 });
 
 test('fleet rows are honest: partial, never and unreachable never read clean',async()=>{
diff --git a/cmd/teploy-dash/frontend-test/domains_page.test.mjs b/cmd/teploy-dash/frontend-test/domains_page.test.mjs
index 1dbabd3..3a20980 100644
--- a/cmd/teploy-dash/frontend-test/domains_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/domains_page.test.mjs
@@ -12,7 +12,8 @@ test('the /domains route renders the page and the nav names it',async()=>{
  assert.equal(h.stores.router.page,'domains');
  const html=h.readHTML();
  assert.ok(html.includes(`x-if="$store.router.page === 'domains'"`));
- assert.ok(html.includes('>Domains</a>'));
+ assert.ok(h.stores.router.hubTabs.some(([page, label]) => page === 'domains' && label === 'Domains'));
+ assert.equal(h.stores.router.section, 'monitoring');
  assert.ok(html.includes('x-data="domainsPage"'));
 });
 
diff --git a/cmd/teploy-dash/frontend-test/header_layout.test.mjs b/cmd/teploy-dash/frontend-test/header_layout.test.mjs
index 6c6bb2b..b9083de 100644
--- a/cmd/teploy-dash/frontend-test/header_layout.test.mjs
+++ b/cmd/teploy-dash/frontend-test/header_layout.test.mjs
@@ -21,12 +21,16 @@ assert(menu.includes('class="nav-pins"') && menu.includes('x-data="navLinks"'),
 assert(/\.nav-pins \{ display: none; \}/.test(css), 'menu pins are hidden by default (desktop shows header icons)');
 assert(/@media \(max-width: 640px\)[\s\S]*\.nav-pins \{ display: block;/.test(css), 'menu pins show on phones');
 
-// The nav collapses before it can overflow: thirteen destinations do not fit
-// beside the brand below about 1200px (measured), so the toggle must take over
-// at a width above that, not at the 980px content breakpoint.
-const collapse = css.match(/@media \(max-width: (\d+)px\) \{\s*\.navbar \{[\s\S]*?\.nav-toggle \{ display: flex; \}/);
-assert(collapse && Number(collapse[1]) >= 1200, 'the nav collapses to the toggle at 1200px or wider');
-assert((menu.match(/<li><a /g) || []).length === 13, 'thirteen destinations: re-measure the collapse width when this changes');
+// The nav collapses before it can overflow. Measured 2026-11-11: brand + the
+// seven destinations need 695px tightened, 857px with four pinned icons (more
+// pins scroll in their strip), so the toggle takes over below 900px and the
+// nav tightens below 1100px.
+const collapse = css.match(/@media \(max-width: (\d+)px\) \{\s*\.navbar \{\s*min-height[^}]*\}\s*\.nav-toggle \{ display: flex; \}/);
+assert(collapse && Number(collapse[1]) === 899, 'the nav collapses to the toggle below 900px (measured)');
+const tighten = css.match(/@media \(max-width: (\d+)px\) \{\s*\.navbar \{ gap: 14px; \}/);
+assert(tighten && Number(tighten[1]) === 1099, 'the nav tightens below 1100px');
+const items = [...menu.matchAll(/<li><a [^>]*>([^<]+)<\/a><\/li>/g)].map((m) => m[1]);
+assert(items.join(',') === 'Home,Apps,Servers,Monitoring,Backups,Activity,Settings', 'seven destinations: re-measure the collapse width when this changes (' + items.join(',') + ')');
 
 // The theme store keeps toggle() and gains set().
 const listeners = [];
diff --git a/cmd/teploy-dash/frontend-test/ia_routes.test.mjs b/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
index 0efd529..d39e45f 100644
--- a/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
+++ b/cmd/teploy-dash/frontend-test/ia_routes.test.mjs
@@ -125,13 +125,15 @@ assert(!!router, 'router store was not registered');
 //    semantics; page titles renamed.
 {
   const html = readFileSync(join(here, '../frontend/index.html'), 'utf8');
-  for (const label of ['>Apps</a>', '>Servers</a>', '>Activity</a>', '>Monitors</a>', '>Domains</a>', '>Restore Tests</a>', '>Templates</a>', '>Integrations</a>', '>Git sources</a>', '>Settings</a>']) {
-    assert(html.includes(label), `nav must render ${label}`);
-  }
+  // Seven destinations: Home Apps Servers Monitoring Backups Activity | Settings.
+  const nav = html.slice(html.indexOf('id="primary-nav"'), html.indexOf('</ul>', html.indexOf('id="primary-nav"')));
+  const labels = [...nav.matchAll(/<li><a [^>]*>([^<]+)<\/a><\/li>/g)].map((m) => m[1]);
+  assert(JSON.stringify(labels) === JSON.stringify(['Home', 'Apps', 'Servers', 'Monitoring', 'Backups', 'Activity', 'Settings']), `nav destinations: ${labels.join(', ')}`);
   assert(!html.includes('>Deployments</a>'), 'nav must not render the old Deployments label');
-  const seps = (html.match(/class="nav-sep"/g) || []).length;
-  assert(seps === 2, `nav must render two group separators (found ${seps})`);
-  assert(html.includes('title="Groups, projects, and the apps deployed to them"'), 'Apps nav link must carry its task title');
+  const seps = (nav.match(/class="nav-sep"/g) || []).length;
+  assert(seps === 1, `nav must render one separator, before Settings (found ${seps})`);
+  assert((nav.match(/\$store\.router\.section === '/g) || []).length === 14, 'every destination is active (and aria-current) for its whole section');
+  assert(html.includes('title="Groups, projects, the apps deployed to them, and app templates"'), 'Apps nav link must carry its task title');
   assert(html.includes('title="Every server this dash manages'), 'Servers nav link must carry its task title');
   assert(html.includes('title="Operations started through dash'), 'Activity nav link must carry its task title');
   // Page titles follow the nav names.
@@ -144,13 +146,71 @@ assert(!!router, 'router store was not registered');
   // Tab semantics on the resource page (app) and the server page.
   assert(html.includes('role="tablist"'), 'tabs render tablist semantics');
   const tabs = (html.match(/role="tab"/g) || []).length;
-  assert(tabs === 12, `expected 12 role=tab buttons (10 app incl. capability-gated Settings, Activity, Releases, Backups and Repository + 2 server), found ${tabs}`);
+  assert(tabs === 16, `expected 16 role=tab buttons (10 app incl. capability-gated Settings, History, Releases, Backups and Repository + 3 server + 3 backups), found ${tabs}`);
   const panels = (html.match(/role="tabpanel"/g) || []).length;
-  assert(panels === 12, `expected 12 role=tabpanel containers, found ${panels}`);
+  assert(panels === 13, `expected 13 role=tabpanel containers (10 app + 3 server), found ${panels}`);
   assert(html.includes('aria-selected='), 'tabs expose aria-selected');
   assert(html.includes('@keydown.arrow-right.prevent='), 'tablist supports arrow-key navigation');
 }
 
+// 5. Pages that became tabs: the old URLs open the right page and tab, the
+//    old page names still navigate, and every page belongs to a section.
+{
+  const resolve = (pathname, search = '') => {
+    globalThis.location = { pathname, search };
+    router.restore();
+    return { page: router.page, params: { ...router.params }, section: router.section };
+  };
+  const cases = [
+    ['/', 'homepage', {}, 'home'],
+    ['/apps', 'projects', {}, 'apps'],
+    ['/templates', 'templates', {}, 'apps'],
+    ['/fleet', 'servers', {}, 'servers'],
+    ['/cleanup', 'cleanup', {}, 'servers'],
+    ['/cleanup/prod', 'server-detail', { name: 'prod', tab: 'cleanup' }, 'servers'],
+    ['/monitors', 'monitors', {}, 'monitoring'],
+    ['/monitors/m1', 'monitor-detail', { id: 'm1' }, 'monitoring'],
+    ['/domains', 'domains', {}, 'monitoring'],
+    ['/alerts', 'alerts', {}, 'monitoring'],
+    ['/backups', 'backups', {}, 'backups'],
+    ['/restore-tests', 'backups', { tab: 'restore-tests' }, 'backups'],
+    ['/activity', 'operations', {}, 'activity'],
+    ['/siblings', 'settings', { tab: 'integrations' }, 'settings'],
+    ['/sources', 'settings', { tab: 'git-sources' }, 'settings'],
+  ];
+  for (const [path, page, params, section] of cases) {
+    const got = resolve(path);
+    assert(got.page === page && JSON.stringify(got.params) === JSON.stringify(params) && got.section === section,
+      `${path} -> ${JSON.stringify(got)}, want ${page} ${JSON.stringify(params)} in ${section}`);
+  }
+  const tabbed = [
+    ['/settings', '?tab=notifications', 'settings', 'notifications'],
+    ['/backups', '?tab=setup', 'backups', 'setup'],
+    ['/servers/prod', '?tab=proxy', 'server-detail', 'proxy'],
+    ['/deployments/prod/web', '?tab=env', 'app-detail', 'env'],
+  ];
+  for (const [path, search, page, tab] of tabbed) {
+    const got = resolve(path, search);
+    assert(got.page === page && got.params.tab === tab, `${path}${search} -> ${got.page} tab ${got.params.tab}`);
+  }
+  pushed.length = 0;
+  for (const [name, params, url] of [
+    ['cleanup-detail', { server: 'prod' }, '/servers/prod?tab=cleanup'],
+    ['siblings', {}, '/settings?tab=integrations'],
+    ['sources', {}, '/settings?tab=git-sources'],
+    ['restore-tests', {}, '/backups?tab=restore-tests'],
+  ]) {
+    router.navigate(name, params);
+    assert(pushed.at(-1) === url, `navigate('${name}') pushed ${pushed.at(-1)}, want ${url}`);
+  }
+  const hub = (page) => { globalThis.location = { pathname: router.url(page), search: '' }; router.restore(); return (router.hubTabs || []).map((t) => t[1]).join(','); };
+  assert(hub('projects') === 'Apps,Templates', 'Apps hub tabs');
+  assert(hub('servers') === 'Servers,Cleanup', 'Servers hub tabs');
+  assert(hub('monitors') === 'Uptime,Domains,Alerts', 'Monitoring hub tabs');
+  resolve('/servers/prod');
+  assert(router.hubTabs === null, 'detail pages have no hub tabs');
+}
+
 if (failures.length) {
   console.error(`FAIL (${failures.length}):`);
   for (const f of failures) console.error('  - ' + f);
diff --git a/cmd/teploy-dash/frontend-test/monitor_routes.test.mjs b/cmd/teploy-dash/frontend-test/monitor_routes.test.mjs
index dd18639..e83ede0 100644
--- a/cmd/teploy-dash/frontend-test/monitor_routes.test.mjs
+++ b/cmd/teploy-dash/frontend-test/monitor_routes.test.mjs
@@ -34,7 +34,7 @@ test('an unknown monitor id is an error state with retry, not a blank page',asyn
  const p=h.page('monitorsPage');await p.init();
  assert.equal(p.selectedMonitor,null);assert.match(p.detailError,/gone/);
  const html=h.readHTML();
- assert.ok(html.includes(`x-if="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail'"`),'monitor-detail route must render the monitors component');
+ assert.ok(html.includes(`x-if="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail' || $store.router.page === 'alerts'"`),'monitor-detail route must render the monitors component');
  assert.ok(html.includes('x-if="detailId && !selectedMonitor"'),'deep-link loading/error state must render');
  p.destroy();
 });
diff --git a/cmd/teploy-dash/frontend-test/resource_page.test.mjs b/cmd/teploy-dash/frontend-test/resource_page.test.mjs
index db66021..2ff6da9 100644
--- a/cmd/teploy-dash/frontend-test/resource_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/resource_page.test.mjs
@@ -120,7 +120,7 @@ alpineInitListeners.forEach((fn) => fn());
   // And the templates render both surfaces.
   const html = readFileSync(join(here, '../frontend/index.html'), 'utf8');
   const monStart = html.indexOf('Monitors Page');
-  const monEnd = html.indexOf('Restore Tests Page');
+  const monEnd = html.indexOf('Servers Page');
   const monSection = html.slice(monStart, monEnd);
   assert(monStart !== -1 && monEnd > monStart, 'monitors section not found');
   assert(monSection.includes('deliveryWarns(m.delivery)'), 'monitor list renders the delivery warning chip');
diff --git a/cmd/teploy-dash/frontend-test/restore_toggle.test.mjs b/cmd/teploy-dash/frontend-test/restore_toggle.test.mjs
index 27b28d6..bd1975c 100644
--- a/cmd/teploy-dash/frontend-test/restore_toggle.test.mjs
+++ b/cmd/teploy-dash/frontend-test/restore_toggle.test.mjs
@@ -38,5 +38,5 @@ test('D09: real GET-shaped restore rows toggle both directions with only configu
   }
   assert.deepEqual(input, original, 'toggle must not mutate its GET input');
   const html = readFileSync(fileURLToPath(new URL('../frontend/index.html', import.meta.url)), 'utf8');
-  assert.ok(html.includes('toggleEnabled(t)'), 'restore cards invoke this method with their GET row');
+  assert.ok(html.includes('toggleEnabled(row.manual)'), 'restore cards invoke this method with their GET row');
 });
diff --git a/cmd/teploy-dash/frontend-test/siblings_page.test.mjs b/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
index ebb98b9..02291b8 100644
--- a/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/siblings_page.test.mjs
@@ -29,12 +29,13 @@ const body = (extra = {}) => ({
   ...extra,
 });
 
-test('the /siblings route renders the page and the nav names it', async () => {
+test('/siblings opens Settings > Integrations, which renders the page', async () => {
   const h = harness('/siblings'); h.stores.router.restore();
-  assert.equal(h.stores.router.page, 'siblings');
+  assert.equal(h.stores.router.page, 'settings');
+  assert.equal(h.stores.router.params.tab, 'integrations');
   const html = h.readHTML();
-  assert.ok(html.includes(`x-if="$store.router.page === 'siblings'"`));
-  assert.ok(html.includes('>Integrations</a>'));
+  assert.ok(html.includes(`x-if="tab === 'integrations'"`));
+  assert.ok(html.includes(`@click="setTab('integrations')">Integrations</button>`));
   assert.ok(html.includes('x-data="siblingsPage"'));
 });
 
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 6697f6c..9705502 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -192,7 +192,7 @@ a.nav-link:hover { background: var(--bg-card); }
 .status-value { margin-top: 4px; font-size: 16px; font-weight: 600; }
 .status-value.mono { font-family: var(--mono); font-size: 13px; }
 .stat-value { margin-bottom: 2px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
-.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
+.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
 table { width: 100%; border-collapse: collapse; font-size: 12px; }
 th { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 500; text-align: left; }
 td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
@@ -333,17 +333,19 @@ code { overflow-wrap: anywhere; }
 /* Nav toggle: only shown once the primary nav collapses into a panel. */
 .nav-toggle { display: none; }
 
-/* Responsive header: the thirteen destinations need about 1275px beside the
-   brand. Up to 1400px they tighten to about 1190px; below 1240px the nav
-   collapses into a drop-down panel opened from the header toggle. Raise both
-   when a destination is added. */
-@media (max-width: 1400px) {
+/* Responsive header (measured 2026-11-11): brand + the seven destinations
+   need 767px at full spacing and 695px tightened; four pinned icons add
+   about 160px (857px tightened), and further pins scroll sideways in their
+   strip. Below 1100px the nav tightens; below 900px it collapses into a
+   drop-down panel opened from the header toggle. Re-measure both when a
+   destination is added. */
+@media (max-width: 1099px) {
   .navbar { gap: 14px; }
   .navbar-nav { gap: 2px; }
   .navbar-nav a { padding: 5px 8px; }
 }
 
-@media (max-width: 1239px) {
+@media (max-width: 899px) {
   .navbar {
     min-height: 56px; gap: 10px;
     padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
@@ -519,6 +521,33 @@ code { overflow-wrap: anywhere; }
 .product-switcher a.ps-item:hover { background: var(--bg-card-hover); }
 .product-switcher .ps-item.current { color: var(--text-muted); cursor: default; }
 
+/* Small action menus (deploy entry, card actions). */
+.menu-wrap { position: relative; display: inline-flex; }
+.menu {
+  position: absolute; right: 0; top: 100%; margin-top: 5px; z-index: 60;
+  display: flex; min-width: 220px; flex-direction: column; padding: 4px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: 0 6px 24px rgba(1, 4, 9, .4);
+}
+.menu-item {
+  display: flex; padding: 8px 10px; flex-direction: column; align-items: flex-start; gap: 2px;
+  border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer;
+}
+.menu-item:hover, .menu-item:focus-visible { background: var(--bg-card-hover); }
+.menu-item.danger { color: var(--red); }
+.menu-note { color: var(--text-muted); font-size: 11px; }
+
+.btn-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.row-actions { text-align: right; white-space: nowrap; }
+
+/* Hub tabs: the page-level tab strip of Apps, Servers and Monitoring. */
+.hub-tabs { display: flex; margin: -8px 0 22px; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
+.hub-tabs::-webkit-scrollbar { display: none; }
+.hub-tab { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
+.hub-tab:hover { color: var(--text); }
+.hub-tab.active { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
+.subpage-title { font-size: 16px; font-weight: 600; }
+
 /* ── D03 onboarding preflight panel (deploy-form host readiness) ── */
 .preflight-panel {
   margin-top: 10px; padding: 12px 14px;
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index c4560b9..c9bd9ed 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -38,11 +38,11 @@
     </div>
   </div>
   </div>
-  <!-- Primary nav (D07 IA regroup): destinations grouped by task —
-       resource work (Projects, Fleet, Activity), then service operations
-       (Monitors, Restore Tests, Templates), then Settings. Labels name the
-       task; URLs are unchanged (aliases /projects /fleet /activity also
-       deep-link here). -->
+  <!-- Primary nav (2026-11 rework): seven destinations. Pages that used to
+       have their own header slot are tabs of these (Monitoring: Uptime,
+       Domains, Alerts; Servers: Cleanup; Apps: Templates; Backups: Restore
+       tests; Settings: Integrations, Git sources); their old URLs still
+       open the right page and tab. -->
   <ul class="navbar-nav" id="primary-nav" :class="{ open: menuOpen }" @click="if ($event.target.closest('a')) menuOpen = false">
     <!-- Phones: the header has no room for pinned links, so they open from
          the menu as named tiles (hidden on wider screens, where the header
@@ -69,21 +69,14 @@
         </template>
       </div>
     </li>
-    <li><a href="#" :class="{ active: $store.router.page === 'homepage' }" :aria-current="$store.router.page === 'homepage' ? 'page' : null" @click.prevent="$store.router.navigate('homepage')">Home</a></li>
-    <li><a href="#" title="Groups, projects, and the apps deployed to them" :class="{ active: ['projects', 'project-detail', 'app-detail'].includes($store.router.page) }" :aria-current="['projects', 'project-detail', 'app-detail'].includes($store.router.page) ? 'page' : null" @click.prevent="$store.router.navigate('projects')">Apps</a></li>
-    <li><a href="#" title="Every server this dash manages — health, host detail, routes" :class="{ active: $store.router.page === 'servers' || $store.router.page === 'server-detail' }" :aria-current="$store.router.page === 'servers' || $store.router.page === 'server-detail' ? 'page' : null" @click.prevent="$store.router.navigate('servers')">Servers</a></li>
-    <li><a href="#" title="Operations started through dash — deploys, rollbacks, removals, with live logs" :class="{ active: $store.router.page === 'operations' || $store.router.page === 'operation-detail' }" :aria-current="$store.router.page === 'operations' || $store.router.page === 'operation-detail' ? 'page' : null" @click.prevent="$store.router.navigate('operations')">Activity</a></li>
+    <li><a href="/" :class="{ active: $store.router.section === 'home' }" :aria-current="$store.router.section === 'home' ? 'page' : null" @click.prevent="$store.router.navigate('homepage')">Home</a></li>
+    <li><a href="/deployments" title="Groups, projects, the apps deployed to them, and app templates" :class="{ active: $store.router.section === 'apps' }" :aria-current="$store.router.section === 'apps' ? 'page' : null" @click.prevent="$store.router.navigate('projects')">Apps</a></li>
+    <li><a href="/servers" title="Every server this dash manages — health, host detail, routes, cleanup" :class="{ active: $store.router.section === 'servers' }" :aria-current="$store.router.section === 'servers' ? 'page' : null" @click.prevent="$store.router.navigate('servers')">Servers</a></li>
+    <li><a href="/monitors" title="Uptime monitors, domain health and alerts" :class="{ active: $store.router.section === 'monitoring' }" :aria-current="$store.router.section === 'monitoring' ? 'page' : null" @click.prevent="$store.router.navigate('monitors')">Monitoring</a></li>
+    <li><a href="/backups" title="Every database and volume across your servers — coverage, setup, restore tests" :class="{ active: $store.router.section === 'backups' }" :aria-current="$store.router.section === 'backups' ? 'page' : null" @click.prevent="$store.router.navigate('backups')">Backups</a></li>
+    <li><a href="/operations" title="Operations started through dash — deploys, rollbacks, removals, with live logs" :class="{ active: $store.router.section === 'activity' }" :aria-current="$store.router.section === 'activity' ? 'page' : null" @click.prevent="$store.router.navigate('operations')">Activity</a></li>
     <li class="nav-sep" aria-hidden="true"></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'monitors' || $store.router.page === 'monitor-detail' }" :aria-current="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail' ? 'page' : null" @click.prevent="$store.router.navigate('monitors')">Monitors</a></li>
-    <li><a href="#" title="DNS, route, certificate and HTTP health for every domain" :class="{ active: $store.router.page === 'domains' }" :aria-current="$store.router.page === 'domains' ? 'page' : null" @click.prevent="$store.router.navigate('domains')">Domains</a></li>
-    <li><a href="#" title="What is left over on each server — stale routes, old versions, reclaimable space — with the fix where one exists" :class="{ active: $store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail' }" :aria-current="$store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail' ? 'page' : null" @click.prevent="$store.router.navigate('cleanup')">Cleanup</a></li>
-    <li><a href="#" title="Teploy products on your servers — discovered, probed, and connected where you allow it" :class="{ active: $store.router.page === 'siblings' }" :aria-current="$store.router.page === 'siblings' ? 'page' : null" @click.prevent="$store.router.navigate('siblings')">Integrations</a></li>
-    <li><a href="#" title="Every database and volume across your servers — coverage, encryption, restore tests" :class="{ active: $store.router.page === 'backups' }" :aria-current="$store.router.page === 'backups' ? 'page' : null" @click.prevent="$store.router.navigate('backups')">Backups</a></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'restore-tests' }" :aria-current="$store.router.page === 'restore-tests' ? 'page' : null" @click.prevent="$store.router.navigate('restore-tests')">Restore Tests</a></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'templates' }" :aria-current="$store.router.page === 'templates' ? 'page' : null" @click.prevent="$store.router.navigate('templates')">Templates</a></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'sources' }" @click.prevent="$store.router.navigate('sources')">Git sources</a></li>
-    <li class="nav-sep" aria-hidden="true"></li>
-    <li><a href="#" :class="{ active: $store.router.page === 'settings' }" :aria-current="$store.router.page === 'settings' ? 'page' : null" @click.prevent="$store.router.navigate('settings')">Settings</a></li>
+    <li><a href="/settings" title="Servers, groups, notifications, integrations, git sources, users and your account" :class="{ active: $store.router.section === 'settings' }" :aria-current="$store.router.section === 'settings' ? 'page' : null" @click.prevent="$store.router.navigate('settings')">Settings</a></li>
   </ul>
   <div class="navbar-spacer"></div>
   <!-- Pinned service links. Same shortcut list as the Home grid; the ones
@@ -134,6 +127,18 @@
 <!-- Content -->
 <div class="content" id="main" tabindex="-1">
 
+  <!-- Hub tabs: Apps, Servers and Monitoring list pages share a tab strip;
+       each tab is its own page with its own URL. -->
+  <template x-if="$store.router.hubTabs">
+    <nav class="hub-tabs" aria-label="Section pages">
+      <template x-for="ht in $store.router.hubTabs" :key="ht[0]">
+        <a class="hub-tab" :href="$store.router.url(ht[0])" :class="{ active: $store.router.page === ht[0] }"
+           :aria-current="$store.router.page === ht[0] ? 'page' : null"
+           @click.prevent="$store.router.navigate(ht[0])" x-text="ht[1]"></a>
+      </template>
+    </nav>
+  </template>
+
   <!-- ═══ Homepage ═══ -->
   <template x-if="$store.router.page === 'homepage'">
     <div x-data="homepagePage">
@@ -263,7 +268,13 @@ <h1 class="page-title">Apps</h1>
           <button class="btn" @click="createGroup">+ Group</button>
           <!-- A first deploy must not require creating a group first: this
                deploys into Ungrouped, which can be organized later. -->
-          <button class="btn btn-primary" @click="openDeployForm('Ungrouped')">+ Deploy</button>
+          <div class="menu-wrap" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
+            <button class="btn btn-primary" @click="open = !open" aria-haspopup="menu" :aria-expanded="open">+ Deploy <span class="ps-caret" aria-hidden="true">&#9662;</span></button>
+            <div class="menu" role="menu" x-show="open" x-transition.opacity x-cloak>
+              <button class="menu-item" role="menuitem" @click="open = false; openDeployForm('Ungrouped')">From an image<span class="menu-note">a registry image you build</span></button>
+              <button class="menu-item" role="menuitem" @click="open = false; $store.router.navigate('templates')">From a template<span class="menu-note">a packaged app, e.g. Forgejo</span></button>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -467,7 +478,13 @@ <h1 class="page-title" x-text="projectName"></h1>
               <div class="card-meta" x-text="groupName"></div>
             </div>
             <div style="display: flex; gap: 8px;">
-              <button class="btn btn-primary" @click="openDeployForm()">+ Deploy</button>
+              <div class="menu-wrap" x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false">
+            <button class="btn btn-primary" @click="open = !open" aria-haspopup="menu" :aria-expanded="open">+ Deploy <span class="ps-caret" aria-hidden="true">&#9662;</span></button>
+            <div class="menu" role="menu" x-show="open" x-transition.opacity x-cloak>
+              <button class="menu-item" role="menuitem" @click="open = false; openDeployForm()">From an image<span class="menu-note">a registry image you build</span></button>
+              <button class="menu-item" role="menuitem" @click="open = false; $store.router.navigate('templates')">From a template<span class="menu-note">a packaged app, e.g. Forgejo</span></button>
+            </div>
+          </div>
               <button class="btn" @click="renameThisProject()">Rename</button>
               <button class="btn btn-danger" @click="deleteThisProject()">Delete Project</button>
             </div>
@@ -1801,6 +1818,14 @@ <h1 class="page-title">Backups</h1>
         </div>
       </div>
 
+      <div class="tabs tabs-scroll" role="tablist" aria-label="Backup sections"
+           @keydown.arrow-right.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.nextElementSibling?.focus()"
+           @keydown.arrow-left.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.previousElementSibling?.focus()">
+        <button class="tab" :class="{ active: tab === 'coverage' }" role="tab" id="bk-tab-coverage" :aria-selected="(tab === 'coverage').toString()" :tabindex="tab === 'coverage' ? 0 : -1" @click="setTab('coverage')" @focus="setTab('coverage')">Coverage</button>
+        <button class="tab" :class="{ active: tab === 'setup' }" role="tab" id="bk-tab-setup" :aria-selected="(tab === 'setup').toString()" :tabindex="tab === 'setup' ? 0 : -1" @click="setTab('setup')" @focus="setTab('setup')">Setup</button>
+        <button class="tab" :class="{ active: tab === 'restore-tests' }" role="tab" id="bk-tab-restore-tests" :aria-selected="(tab === 'restore-tests').toString()" :tabindex="tab === 'restore-tests' ? 0 : -1" @click="setTab('restore-tests')" @focus="setTab('restore-tests')">Restore tests</button>
+      </div>
+
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
       </template>
@@ -1823,7 +1848,7 @@ <h1 class="page-title">Backups</h1>
 
       <!-- Protect my data: where things stand, then the flow. Never forced, and the
            manual controls stay under Advanced below. -->
-      <template x-if="!loading && setupSupported()">
+      <template x-if="!loading && setupSupported() && tab !== 'restore-tests'">
         <div class="card setup-card" :class="view.setup.state === 'protected' ? '' : 'setup-card-todo'">
           <div class="setup-head">
             <div>
@@ -1832,9 +1857,9 @@ <h2 x-text="view.setup.headline"></h2>
               <p class="text-muted" x-show="view.setup.state === 'none'">Set up encrypted backups kept away from your servers. It takes a few minutes.</p>
             </div>
             <div class="header-actions">
-              <button class="btn btn-primary" x-show="!setupOpen && view.setup.state !== 'protected'" @click="openSetup()" x-text="view.setup.turned_on ? 'Continue' : 'Protect my data'"></button>
-              <button class="btn btn-sm" x-show="!setupOpen && view.setup.state === 'protected'" @click="openSetup()">Open setup</button>
-              <button class="btn btn-sm" x-show="setupOpen" @click="closeSetup()">Close</button>
+              <button class="btn btn-primary" x-show="!(setupOpen && tab === 'setup') && view.setup.state !== 'protected'" @click="setTab('setup'); openSetup()" x-text="view.setup.turned_on ? 'Continue' : 'Protect my data'"></button>
+              <button class="btn btn-sm" x-show="!(setupOpen && tab === 'setup') && view.setup.state === 'protected'" @click="setTab('setup'); openSetup()">Open setup</button>
+              <button class="btn btn-sm" x-show="setupOpen && tab === 'setup'" @click="closeSetup()">Close</button>
             </div>
           </div>
 
@@ -1850,7 +1875,7 @@ <h2 x-text="view.setup.headline"></h2>
                   <span class="text-muted" x-show="sv.run && sv.run.error" x-text="sv.run ? sv.run.error : ''"></span>
                   <span class="text-muted" x-show="sv.lifecycle === 'unknown'">Dash cannot recheck the bucket's cleanup rules with this server's key.</span>
                   <span class="text-muted" x-show="sv.lifecycle === 'absent'">Reading this bucket through S3 shows no cleanup rule for this server. Check it under Lifecycle Settings in the Backblaze console, because Dash set one up and this read may not show it.</span>
-                  <button class="btn btn-sm" x-show="sv.state === 'not_protected' || sv.state === 'all_skipped'" @click="openSetup(sv.server)">Back up this server</button>
+                  <button class="btn btn-sm" x-show="sv.state === 'not_protected' || sv.state === 'all_skipped'" @click="setTab('setup'); openSetup(sv.server)">Back up this server</button>
                   <button class="btn btn-sm" x-show="sv.state !== 'not_protected' && sv.key_name" @click="beginRetire(sv.server)">Retire…</button>
                   <button class="btn btn-sm" x-show="canBackUpNow(sv)" @click="backUpNow(sv.server)">Back up now</button>
                 </li>
@@ -1860,11 +1885,11 @@ <h2 x-text="view.setup.headline"></h2>
 
           <p class="setup-note" x-show="view.setup.configured && !view.setup.alerts_configured">
             Nothing will tell you if a backup fails until you add an alert.
-            <button class="btn btn-sm" @click="openSetupAt('alerts')">Add an alert</button>
+            <button class="btn btn-sm" @click="setTab('setup'); openSetupAt('alerts')">Add an alert</button>
           </p>
           <p class="setup-note" x-show="view.setup.turned_on && !view.setup.proof && !recovery.drill_passed_at">
             You have not yet proved your recovery key opens your backups.
-            <button class="btn btn-sm" @click="openSetupAt('prove')">Prove it</button>
+            <button class="btn btn-sm" @click="setTab('setup'); openSetupAt('prove')">Prove it</button>
           </p>
           <template x-for="name in view.setup.retired_keys || []" :key="name">
             <p class="setup-note">
@@ -1904,7 +1929,7 @@ <h3 x-text="'Retire ' + retireFor"></h3>
           </template>
 
           <!-- The flow -->
-          <template x-if="setupOpen">
+          <template x-if="setupOpen && tab === 'setup'">
             <div class="setup-flow">
               <ol class="setup-steps">
                 <template x-for="(s, i) in setupStepNames" :key="s.id">
@@ -2212,7 +2237,7 @@ <h3>Prove you can get your data back</h3>
 
       <!-- First-run checklist: storage → alert channel → recovery drill →
            first verified backup. Shown until complete, on a CLI too old for the flow. -->
-      <template x-if="!loading && checklist.length > 0 && !setupSupported()">
+      <template x-if="!loading && checklist.length > 0 && !setupSupported() && tab !== 'restore-tests'">
         <div class="card">
           <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem"><h2>Get protected</h2><span class="card-meta">Four steps, once</span></div>
           <ul style="list-style:none;padding:0;margin:0">
@@ -2229,7 +2254,7 @@ <h3>Prove you can get your data back</h3>
 
       <!-- The decrypt drill banner: a key (or storage) without a passed
            drill keeps this up. Deliberately not an alert. -->
-      <template x-if="!loading && recovery.banner && !setupSupported()">
+      <template x-if="!loading && recovery.banner && !setupSupported() && tab !== 'restore-tests'">
         <div role="status" class="stale-banner">
           <strong>Recovery is unproven.</strong>
           <span x-text="recovery.public_key
@@ -2238,11 +2263,11 @@ <h3>Prove you can get your data back</h3>
         </div>
       </template>
 
-      <template x-if="!loading && view && view.cli_supported">
+      <template x-if="!loading && view && view.cli_supported && tab !== 'restore-tests'">
         <div>
           <!-- Storage + recovery + policy: every manual control, as it always was. -->
-          <details class="setup-advanced" :open="!setupSupported()">
-          <summary>Advanced</summary>
+          <details class="setup-advanced" :open="!setupSupported()" x-show="tab === 'setup'">
+          <summary>Advanced <span class="text-muted" style="font-weight: 400;">— storage, recovery key and the backup policy, set by hand</span></summary>
           <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));margin-bottom:1rem">
             <div class="card">
               <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem">
@@ -2414,13 +2439,15 @@ <h2>One policy</h2>
           </details>
 
           <!-- Fleet rows -->
+          <div x-show="tab === 'coverage'">
           <template x-for="s in servers" :key="s.server">
             <template x-if="s.state !== 'ok' || serverNotes(s).length > 0">
               <div role="status" class="stale-banner" x-text="serverProblemLine(s) || (s.server + ': ' + serverNotes(s).join('; '))"></div>
             </template>
+          </div>
           </template>
 
-          <div class="card">
+          <div class="card" x-show="tab === 'coverage'">
             <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem">
               <h2>Every target</h2>
               <span class="card-meta" x-text="'projected ' + bytesLabel(view.projected_bytes) + ' of storage at steady state'"></span>
@@ -2522,49 +2549,8 @@ <h2>Every target</h2>
             </template>
           </div>
 
-          <!-- Automatic restore tests -->
-          <div class="card">
-            <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem">
-              <h2>Automatic restore tests</h2>
-              <span class="card-meta" x-text="tests.length + ' dash-owned, weekly, in the off-hours window'"></span>
-            </div>
-            <p class="text-muted">One per covered database: the latest backup is restored into a scratch container on its own server and proven usable. One test per server at a time, only inside the window, and only when the host has RAM and disk to spare.</p>
-            <template x-if="tests.length === 0">
-              <div class="empty-state"><p>None yet — they appear as the policy covers databases.</p></div>
-            </template>
-            <template x-if="tests.length > 0">
-              <div class="table-wrap">
-                <table>
-                  <thead><tr><th>Test</th><th>Engine</th><th>Next</th><th>Last run</th><th>History</th></tr></thead>
-                  <tbody>
-                    <template x-for="t in tests" :key="t.id">
-                      <tr>
-                        <td>
-                          <span class="mono" x-text="[t.server, t.app || t.accessory, t.database].filter(Boolean).join(' · ')"></span>
-                          <span class="text-muted" x-show="t.adopted"> adopted</span>
-                        </td>
-                        <td x-text="t.engine || '—'"></td>
-                        <td x-text="ageLabel(Math.round((Date.parse(t.next_due_at) - Date.now()) / 1000)).replace(' ago', '')"></td>
-                        <td>
-                          <template x-if="t.last_run">
-                            <span>
-                              <span class="dot" :class="t.last_run.ok ? 'green' : (t.last_run.skipped ? 'gray' : 'red')"></span>
-                              <span x-text="t.last_run.skipped ? t.last_run.skipped : (t.last_run.ok ? 'passed' : 'failed')"></span>
-                            </span>
-                          </template>
-                          <span class="text-muted" x-show="!t.last_run">not yet</span>
-                        </td>
-                        <td class="text-muted" x-text="t.history"></td>
-                      </tr>
-                    </template>
-                  </tbody>
-                </table>
-              </div>
-            </template>
-          </div>
-
           <!-- Migration off hand-written jobs (report-only): only when some are found. -->
-          <div class="card" x-show="hasHandwritten()">
+          <div class="card" x-show="hasHandwritten() && tab === 'coverage'">
             <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem"><h2>Retiring hand-written backup jobs</h2></div>
             <p class="text-muted" x-text="view.handwritten_rule"></p>
             <p class="text-muted">Dash cannot read a server's systemd timers and cron scripts (no CLI read for them yet), so the known job names are a checklist to confirm by hand:</p>
@@ -2577,7 +2563,7 @@ <h2>Automatic restore tests</h2>
           </div>
 
           <!-- Dash itself -->
-          <div class="card">
+          <div class="card" x-show="tab === 'coverage'">
             <div style="display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem"><h2>Dash itself</h2><span class="card-meta" x-text="view.self_backup.available ? 'backed up' : 'not backed up yet'"></span></div>
             <p x-text="view.self_backup.reason"></p>
             <p class="setup-warn" x-show="view.self_backup.warning" x-text="view.self_backup.warning"></p>
@@ -2585,13 +2571,147 @@ <h2>Automatic restore tests</h2>
           </div>
         </div>
       </template>
+
+      <!-- Restore tests tab (was the Restore Tests page; /restore-tests opens
+           it): the automatic, dash-owned tests and the ones added by hand,
+           in one table. -->
+      <template x-if="!loading && tab === 'restore-tests'">
+        <div x-data="restoreTestsPage">
+          <div class="page-header">
+            <div>
+              <h2 class="subpage-title">Restore tests</h2>
+              <p class="subtitle">A restore test restores a database's latest backup into a scratch container on its own server and proves it is usable. Automatic tests cover each database the policy backs up, weekly in the off-hours window; add one by hand for anything else.</p>
+            </div>
+            <div class="header-actions">
+              <button class="btn btn-primary" @click="showCreateDialog = true">Add restore test</button>
+            </div>
+          </div>
+
+          <template x-if="loading">
+            <div class="loading"><div class="spinner"></div></div>
+          </template>
+          <template x-if="!loading && loadFailed && !showingStale">
+            <div role="alert" class="stale-banner"><span x-text="'Could not load the tests added by hand: ' + loadError"></span> <button class="btn btn-sm" @click="loadTests()">Retry</button></div>
+          </template>
+          <template x-if="showingStale">
+            <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
+          </template>
+
+          <template x-if="!loading && restoreTestRows(automaticTests(), tests).length > 0">
+            <div class="table-wrap">
+              <table class="stack-table">
+                <thead><tr><th>Test</th><th>Added by</th><th>Schedule</th><th>Last result</th><th><span class="sr-only">Actions</span></th></tr></thead>
+                <tbody>
+                  <template x-for="row in restoreTestRows(automaticTests(), tests)" :key="row.key">
+                    <tr>
+                      <td data-label="Test">
+                        <span class="mono" x-text="row.label"></span>
+                        <span class="text-muted" x-show="row.engine" x-text="' ' + row.engine"></span>
+                        <span class="badge" x-show="row.manual && !row.manual.enabled" style="opacity: .6;">disabled</span>
+                      </td>
+                      <td data-label="Added by" x-text="row.addedBy"></td>
+                      <td data-label="Schedule">
+                        <template x-if="row.auto">
+                          <span x-text="'weekly' + (row.auto.next_due_at ? ', next in ' + ageLabel(Math.round((Date.parse(row.auto.next_due_at) - Date.now()) / 1000)).replace(' ago', '') : '')"></span>
+                        </template>
+                        <template x-if="row.manual">
+                          <span x-text="formatInterval(row.manual.interval_hours)"></span>
+                        </template>
+                      </td>
+                      <td data-label="Last result">
+                        <span class="dot" :class="{ ok: 'green', failed: 'red', skipped: 'gray', never: 'gray' }[row.state]"></span>
+                        <span x-text="row.lastText"></span>
+                        <template x-if="row.auto && row.auto.history">
+                          <div class="text-muted" x-text="'history ' + row.auto.history"></div>
+                        </template>
+                        <template x-if="row.manual && row.state !== 'never'">
+                          <div class="text-muted" x-text="[row.manual.last_date ? 'backup ' + row.manual.last_date : '', row.manual.last_metric, row.manual.last_duration_ms ? (row.manual.last_duration_ms / 1000).toFixed(1) + 's' : '', formatDate(row.manual.last_run_at)].filter(Boolean).join(' · ')"></div>
+                        </template>
+                        <template x-if="row.manual && !row.manual.last_ok && row.manual.last_detail">
+                          <div class="check-msg" x-text="row.manual.last_detail"></div>
+                        </template>
+                        <template x-if="row.manual && deliveryWarns(row.manual.delivery)">
+                          <span class="badge" style="background: var(--red); color: #fff; opacity: .9;" :title="(row.manual.delivery && row.manual.delivery.last_error) || ''" x-text="deliveryLabel(row.manual.delivery)"></span>
+                        </template>
+                      </td>
+                      <td class="row-actions">
+                        <template x-if="row.manual">
+                          <div class="btn-row">
+                            <button class="btn btn-sm" @click="runNow(row.manual)" :disabled="running === row.manual.id" x-text="running === row.manual.id ? 'Running…' : 'Run now'"></button>
+                            <button class="btn btn-sm" @click="toggleEnabled(row.manual)" x-text="row.manual.enabled ? 'Disable' : 'Enable'"></button>
+                            <button class="btn btn-sm btn-danger" @click="deleteTest(row.manual.id)">Delete</button>
+                          </div>
+                        </template>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </template>
+
+          <template x-if="!loading && !loadFailed && restoreTestRows(automaticTests(), tests).length === 0">
+            <div class="empty-state">
+              <p>No restore tests yet. Automatic ones appear as the backup policy covers databases; add one by hand for anything else.</p>
+            </div>
+          </template>
+
+      <!-- Create Restore Test Dialog (focus-trapped, Escape closes — A49/A58). -->
+      <div class="dialog-overlay" x-show="showCreateDialog" @click.self="showCreateDialog = false"
+           @keydown.tab="trapDialogFocus($event)"
+           @keydown.escape.window="showCreateDialog && closeDialog()" x-cloak>
+        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="restore-dialog-title"
+             tabindex="-1" x-effect="showCreateDialog && $nextTick(() => $el.focus())">
+          <h2 id="restore-dialog-title">Add Restore Test</h2>
+          <form @submit.prevent="createTest()">
+            <div class="field">
+              <label for="restore-server">Server</label>
+              <select id="restore-server" x-model="newTest.server" required>
+                <option value="" disabled>Select a server</option>
+                <template x-for="s in servers" :key="s.name">
+                  <option :value="s.name" x-text="s.name + ' (' + s.host + ')'"></option>
+                </template>
+              </select>
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="restore-app">App</label>
+                <input type="text" id="restore-app" x-model="newTest.app" placeholder="myapp" required>
+              </div>
+              <div class="field">
+                <label for="restore-accessory">Accessory</label>
+                <input type="text" id="restore-accessory" x-model="newTest.accessory" placeholder="postgres" required>
+              </div>
+            </div>
+            <p class="card-meta">The backup comes from the server's stored backup target — nothing to configure here.</p>
+            <div class="field">
+              <label for="restore-interval">Run Every</label>
+              <select id="restore-interval" x-model="newTest.interval_hours">
+                <option value="6">6 hours</option>
+                <option value="12">12 hours</option>
+                <option value="24" selected>24 hours</option>
+                <option value="168">7 days</option>
+              </select>
+            </div>
+            <div class="dialog-actions">
+              <button type="button" class="btn" @click="closeDialog()">Cancel</button>
+              <button type="submit" class="btn btn-primary" :disabled="creating">
+                <span x-show="!creating">Create</span>
+                <span x-show="creating">Creating...</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+        </div>
+      </template>
     </div>
   </template>
 
   <!-- Cleanup (Slice 6): what is left over on each server, from the CLI's
        read-only `server audit`. One component serves the fleet overview
        (/cleanup) and a server's report (/cleanup/:server), like monitors. -->
-  <template x-if="$store.router.page === 'cleanup' || $store.router.page === 'cleanup-detail'">
+  <template x-if="$store.router.page === 'cleanup'">
     <div x-data="cleanupPage">
 
       <!-- Fleet overview -->
@@ -2681,19 +2801,25 @@ <h1 class="page-title">Cleanup</h1>
         </div>
       </template>
 
-      <!-- One server's report -->
-      <template x-if="routeIdentity()">
+    </div>
+  </template>
+
+
+  <!-- One component serves the list (/monitors) and a monitor's detail
+       (/monitors/:id), so moving between them keeps the loaded list. -->
+  <template x-if="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail' || $store.router.page === 'alerts'">
+    <div x-data="monitorsPage">
+
+      <!-- Monitor List View (when no monitor is open) -->
+      <template x-if="!detailId && $store.router.page === 'monitors'">
         <div>
-          <a href="#" class="back-link" @click.prevent="$store.router.navigate('cleanup')">&larr; Cleanup</a>
           <div class="page-header">
             <div>
-              <h1 class="page-title" x-text="detail ? detail.server : routeIdentity()"></h1>
-              <p class="subtitle" x-text="detail ? auditLabel(detail.state, detailCounts()) + (detail.audited_at ? ' — audited ' + ageLabel(detail.age_seconds) : '') : ''"></p>
+              <h1 class="page-title">Uptime</h1>
+              <p class="subtitle" x-text="monitors.length ? monitors.length + ' monitor' + (monitors.length !== 1 ? 's' : '') : 'No monitors configured'"></p>
             </div>
-            <div class="header-actions" x-show="detail">
-              <button class="btn btn-sm" @click="load()">Refresh</button>
-              <button class="btn btn-sm btn-primary" @click="runAudit(detail.server)" :disabled="!detail || auditBusy === detail.server || !!detail.live_audit || !cliSupported"
-                      x-text="detail && auditBusy === detail.server ? 'Auditing…' : 'Re-run audit'"></button>
+            <div class="header-actions">
+              <button class="btn btn-primary" @click="openCreate()">Add Monitor</button>
             </div>
           </div>
 
@@ -2702,531 +2828,78 @@ <h1 class="page-title" x-text="detail ? detail.server : routeIdentity()"></h1>
           </template>
 
           <template x-if="!loading && loadFailed && !showingStale">
-            <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="load()">Retry</button></div>
+            <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="loadMonitors()">Retry</button></div>
           </template>
 
           <template x-if="showingStale">
-            <div role="status" class="stale-banner" x-text="'Showing the last report — the refresh failed: ' + loadError"></div>
-          </template>
-
-          <template x-if="!loading && !cliSupported">
-            <div role="status" class="stale-banner" x-text="note"></div>
-          </template>
-
-          <template x-if="detail && detail.state === 'unreachable'">
-            <div role="status" class="stale-banner" x-text="'The server could not be audited' + (detail.error ? ': ' + detail.error : '') + '. Nothing here says it is clean.'"></div>
-          </template>
-
-          <template x-if="detail && detail.state === 'partial'">
-            <div role="status" class="stale-banner">Part of the audit could not read its sources (below); the findings that depend on them are missing, not cleared.</div>
-          </template>
-
-          <template x-if="detail && detail.last_error">
-            <div role="status" class="stale-banner" x-text="detail.last_error + ' — the report below is the last good one.'"></div>
-          </template>
-
-          <template x-if="detail && detail.live_audit">
-            <div role="status" class="stale-banner">An audit is <span x-text="detail.live_audit.status"></span> — <a :href="'/operations/' + detail.live_audit.id">follow it</a>.</div>
-          </template>
-
-          <template x-if="finishedServers.includes(routeIdentity())">
-            <div role="status" class="stale-banner">A remedy finished here. <button class="btn btn-sm" style="margin-left: 8px;" @click="runAudit(routeIdentity())" :disabled="auditBusy === routeIdentity()" x-text="auditBusy === routeIdentity() ? 'Auditing…' : 'Re-audit now'"></button></div>
+            <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
           </template>
 
-          <template x-if="detail && detail.state === 'never'">
-            <div class="empty-state">
-              <p>This server has not been audited yet.</p>
-              <button class="btn btn-primary" @click="runAudit(detail.server)" :disabled="auditBusy === detail.server || !cliSupported" x-text="auditBusy === detail.server ? 'Auditing…' : 'Run the first audit'"></button>
+          <!-- Monitor List (also renders under a stale banner: earlier data
+               stays visible when a refresh fails — D07) -->
+          <template x-if="!loading && monitors.length > 0">
+            <div class="monitor-list">
+              <template x-for="m in monitors" :key="m.id">
+                <a class="monitor-card" :href="'/monitors/' + encodeURIComponent(m.id)" @click.prevent="selectMonitor(m.id)">
+                  <div class="monitor-header">
+                <div class="monitor-status">
+                  <span class="dot" :class="getMonitorDot(m)"></span>
+                  <span class="monitor-name" x-text="m.name"></span>
+                  <span class="monitor-type badge" x-text="m.type"></span>
+                  <!-- D08: a failing alert delivery warns at list level. -->
+                  <span class="badge" x-show="deliveryWarns(m.delivery)"
+                        style="background: transparent; border: 1px solid var(--yellow); color: var(--yellow);"
+                        :title="(m.delivery && m.delivery.last_error) || ''"
+                        x-text="deliveryLabel(m.delivery)"></span>
+                </div>
+                    <div class="monitor-uptime">
+                      <span class="uptime-pct" x-text="m.stats ? m.stats.uptime_percent.toFixed(1) + '%' : '--'"></span>
+                      <span class="uptime-label">24h uptime</span>
+                    </div>
+                  </div>
+                  <div class="monitor-target" x-text="m.target"></div>
+                  <div class="monitor-meta">
+                    <span x-text="'Every ' + formatInterval(m.interval)"></span>
+                    <span x-show="m.stats" x-text="m.stats ? 'Avg ' + fmtMs(m.stats.avg_response) : ''"></span>
+                  </div>
+                </a>
+              </template>
             </div>
           </template>
 
-          <template x-if="detail && detail.checks && detail.checks.length > 0">
-            <div style="margin-bottom: 20px;">
-              <h3 style="font-size: 15px; margin: 0 0 8px;">Checks</h3>
-              <div class="table-wrap">
-                <table>
-                  <thead><tr><th>Check</th><th>Status</th><th>Detail</th></tr></thead>
-                  <tbody>
-                    <template x-for="c in detail.checks" :key="c.name">
-                      <tr>
-                        <td x-text="c.name"></td>
-                        <td><span class="dot" :class="c.status === 'ok' ? 'green' : 'yellow'"></span> <span x-text="c.status === 'ok' ? 'ok' : 'unknown'"></span></td>
-                        <td class="text-muted" x-text="c.detail || (c.status === 'unknown' ? 'could not be read' : '')"></td>
-                      </tr>
-                    </template>
-                  </tbody>
-                </table>
+          <!-- Empty State -->
+          <template x-if="!loading && !loadFailed && monitors.length === 0">
+            <div class="empty-state">
+              <div class="empty-icon">
+                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
               </div>
+              <h3>No monitors yet</h3>
+              <p>Add your first uptime monitor to start tracking availability.</p>
+              <button class="btn btn-primary" @click="openCreate()">Add Monitor</button>
             </div>
           </template>
+        </div>
+      </template>
 
-          <template x-if="detail && detail.disk">
-            <div style="margin-bottom: 20px;">
-              <h3 style="font-size: 15px; margin: 0 0 8px;">Disk</h3>
-              <p class="card-meta" x-text="detail.disk.path + ': ' + fmtBytes(detail.disk.available_bytes) + ' available (' + detail.disk.used_percent + '% used)'"></p>
-              <div class="table-wrap" x-show="detail.disk.attribution && detail.disk.attribution.length">
-                <table>
-                  <thead><tr><th>Attribution</th><th>Size</th></tr></thead>
-                  <tbody>
-                    <template x-for="a in (detail.disk.attribution || [])" :key="a.name">
-                      <tr><td x-text="a.name"></td><td x-text="fmtBytes(a.size_bytes)"></td></tr>
-                    </template>
-                  </tbody>
-                </table>
-              </div>
+      <!-- Monitoring > Alerts: open incidents, held alerts, silences and
+           delivery history. Channels are configured in Settings. -->
+      <template x-if="$store.router.page === 'alerts'">
+        <div>
+          <div class="page-header">
+            <div>
+              <h1 class="page-title">Alerts</h1>
+              <p class="subtitle">Open incidents, held alerts, silences and what was sent. Where alerts go is set in <a href="/settings?tab=notifications" @click.prevent="$store.router.navigate('settings', { tab: 'notifications' })">Settings &rsaquo; Notifications</a>.</p>
             </div>
-          </template>
-
-          <template x-if="detail && detail.state !== 'never'">
-            <div>
-              <div class="section-header" style="margin-bottom: 12px;">
-                <h3 style="font-size: 15px; margin: 0;">Findings</h3>
-                <label class="checkbox-label" x-show="dismissedFindings.length > 0"><input type="checkbox" x-model="showDismissed"> Show dismissed (<span x-text="dismissedFindings.length"></span>)</label>
-              </div>
-              <template x-if="visibleFindings.length === 0">
-                <div class="empty-state"><p>No open findings<x-show="dismissedFindings.length"> — <span x-text="dismissedFindings.length"></span> dismissed</x-show>.</p></div>
-              </template>
-              <div class="table-wrap" x-show="visibleFindings.length > 0">
-                <table>
-                  <thead>
-                    <tr><th>Finding</th><th>Evidence</th><th style="width: 280px;"></th></tr>
-                  </thead>
-                  <tbody>
-                    <template x-for="f in visibleFindings" :key="f.id">
-                      <tr :class="f.dismissed ? 'text-muted' : ''">
-                        <td>
-                          <span class="dot" :class="severityClass(f.severity)"></span>
-                          <strong x-text="kindLabel(f.kind)"></strong>
-                          <div class="mono" style="font-size: 12px;" x-text="f.subject"></div>
-                          <div class="text-muted" x-show="f.size_bytes" x-text="f.size_bytes ? fmtBytes(f.size_bytes) : ''"></div>
-                        </td>
-                        <td>
-                          <span x-text="f.evidence"></span>
-                          <div class="text-muted" style="margin-top: 4px;" x-show="f.related && f.related.length" x-text="'related: ' + (f.related || []).join(', ')"></div>
-                          <div class="text-muted" style="margin-top: 4px;" x-show="f.dismissed" x-text="f.dismissed ? 'dismissed by ' + f.dismissed.actor : ''"></div>
-                        </td>
-                        <td>
-                          <template x-if="f.remedy && f.remedy.runnable">
-                            <button class="btn btn-sm" :class="f.remedy.destructive ? 'btn-danger' : ''" @click="openRemedy(f)" :disabled="remedyBusy"
-                                    :title="remedyLabel(f)" x-text="f.remedy.destructive ? 'Fix (destructive)…' : 'Fix'"></button>
-                          </template>
-                          <template x-if="f.remedy && f.remedy.available && !f.remedy.runnable">
-                            <div>
-                              <span class="badge">report-only here</span>
-                              <div class="text-muted" style="font-size: 12px;" x-text="f.remedy.note"></div>
-                            </div>
-                          </template>
-                          <template x-if="f.remedy && !f.remedy.available">
-                            <span class="text-muted" style="font-size: 12px;">report-only</span>
-                          </template>
-                          <button class="btn btn-sm" style="margin-left: 8px;" @click="f.dismissed ? undismiss(f) : dismiss(f)" x-text="f.dismissed ? 'Un-dismiss' : 'Dismiss'" title="Hide this finding; a fresh audit that proves it cleared retires the dismissal"></button>
-                        </td>
-                      </tr>
-                    </template>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </template>
-        </div>
-      </template>
-
-      <!-- Destructive remedy confirmation: type the finding's app or subject
-           name. The server enforces the match; this dialog is the prompt. -->
-      <div class="dialog-overlay" x-show="confirmFinding" @click.self="confirmFinding = null" @keydown.escape.window="confirmFinding && (confirmFinding = null)" x-cloak>
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="cleanup-remedy-title" tabindex="-1" x-effect="confirmFinding && $nextTick(() => $el.focus())">
-          <h2 id="cleanup-remedy-title">Fix <span x-text="confirmFinding ? kindLabel(confirmFinding.kind) : ''"></span>?</h2>
-          <template x-if="confirmFinding">
-            <form @submit.prevent="confirmRemedy()">
-              <p>This runs <span class="mono" x-text="remedyLabel(confirmFinding)"></span> — the fix the audit named. It is destructive: what it removes does not come back.</p>
-              <p class="text-muted" x-text="confirmFinding.evidence"></p>
-              <div class="field">
-                <label for="cleanup-remedy-confirm">Type <span class="mono" x-text="confirmName(confirmFinding)"></span> to confirm</label>
-                <input id="cleanup-remedy-confirm" type="text" class="form-input" x-model="confirmText" autocomplete="off">
-              </div>
-              <div class="dialog-actions">
-                <button type="button" class="btn" @click="confirmFinding = null">Cancel</button>
-                <button type="submit" class="btn btn-danger" :disabled="remedyBusy || confirmText !== confirmName(confirmFinding)" x-text="remedyBusy ? 'Starting…' : 'Run it'"></button>
-              </div>
-            </form>
-          </template>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <!-- Programme B: sibling products on the fleet — discovery evidence,
-       probe verdicts, and (for Observe only) the deep connect flow. -->
-  <template x-if="$store.router.page === 'siblings'">
-    <div x-data="siblingsPage">
-
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">Integrations</h1>
-          <p class="subtitle">Teploy products running on your servers, found by their labels and probed on their published ports. Nothing is connected until you confirm it.</p>
-        </div>
-        <div class="header-actions">
-          <button class="btn btn-sm" @click="load()">Refresh</button>
-          <button class="btn btn-sm btn-primary" @click="rescan()" :disabled="scanBusy || !cliSupported" x-text="scanBusy ? 'Scanning…' : 'Rescan now'" title="Reads each server's containers and probes the candidates — quick, read-only"></button>
-        </div>
-      </div>
-
-      <template x-if="loading">
-        <div class="loading"><div class="spinner"></div></div>
-      </template>
-
-      <template x-if="!loading && loadFailed && !showingStale">
-        <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="load()">Retry</button></div>
-      </template>
-
-      <template x-if="showingStale">
-        <div role="status" class="stale-banner" x-text="'Showing the last discovery — the refresh failed: ' + loadError"></div>
-      </template>
-
-      <template x-if="!loading && !cliSupported">
-        <div role="status" class="stale-banner" x-text="note"></div>
-      </template>
-
-      <template x-if="sweepError">
-        <div role="status" class="stale-banner" x-text="'The last sweep did not finish: ' + sweepError"></div>
-      </template>
-
-      <!-- Probing consent: internal addresses (tailnet, LAN) are probed only
-           when an admin allows it. The A13 rule applies: an editor cannot
-           flip this. -->
-      <template x-if="!loading && cliSupported">
-        <div class="info-banner" role="status">
-          <span x-text="allowInternal
-            ? 'Probing reaches internal addresses (tailnet/LAN) — matches where siblings usually run.'
-            : 'Internal addresses (tailnet/LAN) are not probed — candidates there read “Blocked (internal)” until an admin allows it.'"></span>
-          <button class="btn btn-sm" @click="setAllowInternal(!allowInternal)" :disabled="settingsBusy"
-                  x-text="settingsBusy ? 'Saving…' : (allowInternal ? 'Stop probing internal' : 'Allow probing internal')"></button>
-        </div>
-      </template>
-
-      <template x-if="!loading && !loadFailed && servers.length === 0">
-        <div class="empty-state"><p x-text="cliSupported ? 'No servers configured, or the first sweep has not run yet.' : 'Sibling discovery needs teploy ' + minCLI + ' on the dashboard host.'"></p></div>
-      </template>
-
-      <!-- Observe connect: the one sibling with a deep flow. The owner
-           confirms the instance identity from the discovery doc BEFORE any
-           token moves; dash re-checks it on every later write. -->
-      <template x-if="!loading && cliSupported">
-        <div style="border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 16px; margin-bottom: 16px;">
-          <template x-if="observeConnected && observeConnection">
-            <div>
-              <h2 class="section-title" style="margin-bottom: 8px;">Observe <span class="status-dot dot green"></span> connected</h2>
-              <p style="margin: 0 0 8px 0;">
-                <span x-text="observeConnection.base_url"></span>
-                <span class="text-muted"> — instance <span class="mono" x-text="observeConnection.instance_id.slice(0, 8) + '…'"></span>,
-                  <span x-text="observeConnection.version || 'version unknown'"></span>,
-                  token <span class="mono" x-text="observeConnection.token_fp"></span></span>
-              </p>
-              <p class="text-muted" style="margin: 0 0 8px 0; font-size: 13px;">
-                Per-app telemetry is opt-in, one app at a time, always shown as a plan first.
-                <a x-show="observeConnection.dashboard_url" :href="observeConnection.dashboard_url" target="_blank" rel="noopener">Open Observe</a>
-              </p>
-
-              <!-- Opted-in apps -->
-              <template x-if="telemetryApps.length > 0">
-                <div style="margin: 12px 0;">
-                  <h3 class="section-title" style="font-size: 14px; margin-bottom: 6px;">Apps sending telemetry</h3>
-                  <table style="width: 100%; font-size: 13px;">
-                    <tbody>
-                      <template x-for="entry in telemetryApps" :key="entry.server + '/' + entry.app">
-                        <tr>
-                          <td style="padding: 4px 8px 4px 0;"><span x-text="entry.app"></span> <span class="text-muted" x-text="'on ' + entry.server"></span></td>
-                          <td class="text-muted" style="padding: 4px 8px 4px 0;" x-text="envDisplay(entry)"></td>
-                          <td style="padding: 4px 0; text-align: right;">
-                            <button type="button" class="btn btn-sm" @click="openDisable(entry)" :disabled="disableBusy">Stop telemetry</button>
-                          </td>
-                        </tr>
-                      </template>
-                    </tbody>
-                  </table>
-                </div>
-              </template>
-
-              <!-- Opt-in: plan → approve → apply -->
-              <form @submit.prevent="planTelemetry()" style="margin-top: 8px; display: flex; gap: 8px; align-items: end; flex-wrap: wrap;">
-                <div class="field">
-                  <label for="telemetry-server">Server</label>
-                  <input id="telemetry-server" class="form-input" style="min-width: 140px;" x-model="telemetryForm.server" list="telemetry-servers" autocomplete="off" :disabled="telemetryBusy">
-                  <datalist id="telemetry-servers">
-                    <template x-for="a in [...new Set(fleetApps.map(a => a.server))]" :key="a"><option :value="a"></option></template>
-                  </datalist>
-                </div>
-                <div class="field">
-                  <label for="telemetry-app">App</label>
-                  <input id="telemetry-app" class="form-input" style="min-width: 180px;" x-model="telemetryForm.app" list="telemetry-apps" autocomplete="off" :disabled="telemetryBusy">
-                  <datalist id="telemetry-apps">
-                    <template x-for="a in appSuggestions" :key="a.server + '/' + a.app"><option :value="a.app"></option></template>
-                  </datalist>
-                </div>
-                <button type="submit" class="btn btn-sm" :disabled="telemetryBusy || !telemetryForm.server || !telemetryForm.app"
-                        x-text="telemetryBusy ? 'Planning…' : 'Plan telemetry'"></button>
-                <button type="button" class="btn btn-sm" @click="disconnectObserve()" :disabled="connectBusy" x-text="connectBusy ? 'Working…' : 'Disconnect'"></button>
-              </form>
-
-              <template x-if="telemetryPlanError">
-                <p role="alert" style="color: var(--danger); margin: 8px 0; font-size: 13px;" x-text="telemetryPlanError"></p>
-              </template>
-
-              <!-- The plan: exactly what apply will do. Approving this is
-                   consenting to these writes and the redeploy. -->
-              <template x-if="telemetryPlan">
-                <div role="dialog" aria-label="Telemetry plan" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-top: 10px;">
-                  <h3 class="section-title" style="font-size: 14px; margin-bottom: 6px;">Plan — <span x-text="telemetryPlan.app"></span> <span class="text-muted" x-text="'on ' + telemetryPlan.server"></span></h3>
-                  <ol style="margin: 0 0 8px 0; padding-left: 20px; font-size: 13px;">
-                    <li x-text="telemetryPlan.site_action"></li>
-                    <li>mint the telemetry key “<span class="mono" x-text="telemetryPlan.key_label"></span>” for that site</li>
-                    <li>write these environment variables and secrets:
-                      <table style="width: 100%; font-size: 12px; margin-top: 4px;">
-                        <tbody>
-                          <template x-for="w in telemetryPlan.env" :key="w.key">
-                            <tr>
-                              <td class="mono" style="padding: 1px 8px 1px 0;" x-text="w.key"></td>
-                              <td class="mono" style="padding: 1px 0;" :class="w.secret ? 'text-muted' : ''" x-text="w.value"></td>
-                            </tr>
-                          </template>
-                        </tbody>
-                      </table>
-                    </li>
-                    <li x-text="telemetryPlan.redeploy"></li>
-                  </ol>
-                  <p class="text-muted" style="margin: 0 0 8px 0; font-size: 12px;" x-show="telemetryPlan.rotation"
-                     x-text="telemetryPlan.rotation ? 'This replaces the previous opt-in (key ' + telemetryPlan.rotation.key_id + ') — a NEW key is minted; revoke the old one in Observe if nothing else uses it.' : ''"></p>
-                  <div style="display: flex; gap: 8px;">
-                    <button type="button" class="btn btn-sm btn-primary" @click="applyTelemetry()" :disabled="telemetryBusy"
-                            x-text="telemetryBusy ? 'Applying…' : 'Approve and apply'"></button>
-                    <button type="button" class="btn btn-sm" @click="telemetryPlan = null" :disabled="telemetryBusy">Cancel</button>
-                  </div>
-                </div>
-              </template>
-
-              <template x-if="telemetryApplied">
-                <div role="status" class="stale-banner" style="margin-top: 8px;">
-                  <span x-text="telemetryApplied.note"></span>
-                  <a :href="'/operations/' + (telemetryApplied.operation ? telemetryApplied.operation.id : '')">follow the redeploy</a>
-                </div>
-              </template>
-            </div>
-          </template>
-          <template x-if="!observeConnected">
-            <form @submit.prevent="previewDoc ? connectObserve() : previewObserve()">
-              <h2 class="section-title" style="margin-bottom: 8px;">Connect Observe</h2>
-              <p class="text-muted" style="margin: 0 0 12px 0; font-size: 13px;">
-                Create a service token in Observe, then paste it here. <a x-show="observeTokenURL()" :href="observeTokenURL()" target="_blank" rel="noopener">Open the filled-in form in Observe</a><span x-show="!observeTokenURL()">Enter the address below for a link to the filled-in form, or use Settings → Service Tokens with scopes <span class="mono">sites:create</span> and <span class="mono">keys:mint</span>.</span>
-                Dash never sees an Observe admin login, and nothing is written until you confirm this instance's identity.
-                <span x-show="observeHintData && observeHintData.available">A confirmed Observe was found on your servers — its address is prefilled.</span>
-              </p>
-              <div style="display: grid; grid-template-columns: 2fr 2fr auto; gap: 8px; align-items: end;">
-                <div class="field">
-                  <label for="observe-base">Observe address</label>
-                  <input id="observe-base" class="form-input" x-model="connectForm.base_url" placeholder="http://observe.tailnet-host:3000" autocomplete="off" :disabled="connectBusy">
-                </div>
-                <div class="field">
-                  <label for="observe-token">Service token</label>
-                  <input id="observe-token" class="form-input" type="password" x-model="connectForm.token" placeholder="obs_svc_…" autocomplete="off" :disabled="connectBusy || !previewDoc">
-                </div>
-                <div class="field" style="padding-bottom: 6px;">
-                  <label style="display: flex; gap: 6px; align-items: center; font-weight: 400;">
-                    <input type="checkbox" x-model="connectForm.allow_internal"> Allow an internal address
-                  </label>
-                </div>
-              </div>
-              <template x-if="previewError">
-                <p role="alert" class="text-muted" style="color: var(--danger); margin: 8px 0;" x-text="previewError"></p>
-              </template>
-              <template x-if="previewDoc">
-                <div role="status" class="stale-banner" style="margin: 8px 0;">
-                  <p style="margin: 0;">Discovery doc: <strong x-text="previewDoc.product"></strong>
-                    <span x-text="previewDoc.version || ''"></span>,
-                    instance <span class="mono" x-text="previewDoc.instance_id.slice(0, 8) + '…'"></span>
-                    (<span class="mono" x-text="previewDoc.instance_id"></span>)</p>
-                  <p style="margin: 4px 0 0 0;" class="text-muted"
-                     x-text="'dashboard ' + (previewDoc.dashboard_url || 'not published') + ' · ingest ' + (previewDoc.ingest_url || 'not published')"></p>
-                  <p style="margin: 4px 0 0 0;">Confirm this is the Observe you mean, then paste the token and connect.</p>
-                </div>
-              </template>
-              <div style="margin-top: 8px; display: flex; gap: 8px;">
-                <button type="button" class="btn btn-sm" @click="previewObserve()" :disabled="connectBusy || !connectForm.base_url"
-                        x-text="connectBusy ? 'Reading…' : (previewDoc ? 'Re-read' : 'Preview the instance')"></button>
-                <button type="submit" class="btn btn-sm btn-primary" x-show="previewDoc" :disabled="connectBusy || !connectForm.token"
-                        x-text="connectBusy ? 'Connecting…' : 'Connect this instance'"></button>
-              </div>
-            </form>
-          </template>
-        </div>
-      </template>
-
-      <!-- Candidates: one row per (server, product) with the probe verdict.
-           Honest unknowns stay unknown — nothing renders as “no siblings”
-           when a server was only partly read. -->
-      <template x-if="candidates.length > 0">
-        <div class="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>Product</th>
-                <th>Probe</th>
-                <th>Where</th>
-                <th>Evidence</th>
-              </tr>
-            </thead>
-            <tbody>
-              <template x-for="c in candidates" :key="c.server + '/' + c.product">
-                <tr>
-                  <td>
-                    <strong x-text="c.product"></strong>
-                    <span class="text-muted" x-show="c.label_version" x-text="c.label_version"></span>
-                    <div class="text-muted" x-show="!c.recognized" title="The CLI did not recognise this product label; it is shown as reported">unrecognised label</div>
-                  </td>
-                  <td>
-                    <span class="status-dot dot" :class="probeClass(c.state)"></span>
-                    <span x-text="probeLabel(c.state)"></span>
-                    <div class="text-muted" x-text="'probed ' + ageLabel(c.age_seconds)"></div>
-                  </td>
-                  <td>
-                    <div x-text="c.server"></div>
-                    <div class="text-muted mono" style="font-size: 12px;" x-text="(c.addresses || []).join(', ') || 'no published port'"></div>
-                    <div class="text-muted" x-show="c.container_state && c.container_state !== 'running'" x-text="'container ' + c.container_state"></div>
-                  </td>
-                  <td>
-                    <div x-text="probeHint(c)"></div>
-                    <div class="text-muted mono" style="font-size: 12px;" x-show="c.doc && c.doc.dashboard_url"><a :href="c.doc ? c.doc.dashboard_url : null" target="_blank" rel="noopener" x-text="c.doc ? c.doc.dashboard_url : ''"></a></div>
-                    <div class="text-muted" x-show="c.base_url && (!c.doc || !c.doc.dashboard_url)"><a :href="c.base_url" target="_blank" rel="noopener" x-text="c.base_url"></a></div>
-                  </td>
-                </tr>
-              </template>
-            </tbody>
-          </table>
-        </div>
-      </template>
-
-      <!-- Stopping telemetry: the dialog names exactly what goes, and that
-           the site and key live on in Observe until revoked there. -->
-      <div class="dialog-overlay" x-show="confirmDisable" @click.self="confirmDisable = null" @keydown.escape.window="confirmDisable && (confirmDisable = null)" x-cloak>
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="observe-disable-title" tabindex="-1" x-effect="confirmDisable && $nextTick(() => $el.focus())">
-          <h2 id="observe-disable-title">Stop telemetry for <span x-text="confirmDisable ? confirmDisable.app : ''"></span>?</h2>
-          <template x-if="confirmDisable">
-            <div>
-              <p>These environment variables and secrets come off the app:</p>
-              <p class="mono text-muted" style="font-size: 12px;" x-text="envDisplay(confirmDisable)"></p>
-              <p class="text-muted">A redeploy is queued so the app restarts without them. The site and the telemetry key stay in Observe — revoke the key there if you want it dead.</p>
-              <div class="dialog-actions">
-                <button type="button" class="btn" @click="confirmDisable = null">Keep it</button>
-                <button type="button" class="btn btn-danger" @click="disableTelemetry()" :disabled="disableBusy" x-text="disableBusy ? 'Stopping…' : 'Stop telemetry'"></button>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <!-- Per-server read state: which reports are complete, partial or
-           missing, with their age. -->
-      <template x-if="servers.length > 0">
-        <div>
-          <h2 class="section-title" style="margin-top: 24px;">Server reads</h2>
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th>Server</th>
-                  <th>Read</th>
-                  <th>Last report</th>
-                </tr>
-              </thead>
-              <tbody>
-                <template x-for="row in servers" :key="row.server">
-                  <tr>
-                    <td x-text="row.server"></td>
-                    <td>
-                      <span class="status-dot dot" :class="serverStateClass(row.state)"></span>
-                      <span x-text="serverStateLabel(row.state)"></span>
-                      <div class="text-muted" x-show="row.error" x-text="row.error"></div>
-                    </td>
-                    <td>
-                      <div x-text="ageLabel(row.age_seconds)"></div>
-                      <div class="text-muted" x-show="!row.checked_at">never completed</div>
-                    </td>
-                  </tr>
-                </template>
-              </tbody>
-            </table>
           </div>
-        </div>
-      </template>
-    </div>
-  </template>
-
-  <!-- One component serves the list (/monitors) and a monitor's detail
-       (/monitors/:id), so moving between them keeps the loaded list. -->
-  <template x-if="$store.router.page === 'monitors' || $store.router.page === 'monitor-detail'">
-    <div x-data="monitorsPage">
-
-      <!-- Monitor List View (when no monitor is open) -->
-      <template x-if="!detailId">
-        <div>
-          <div class="page-header">
-            <div>
-              <h1 class="page-title">Uptime</h1>
-              <p class="subtitle" x-text="monitors.length ? monitors.length + ' monitor' + (monitors.length !== 1 ? 's' : '') : 'No monitors configured'"></p>
-            </div>
-            <div class="header-actions">
-              <button class="btn btn-primary" @click="openCreate()">Add Monitor</button>
-            </div>
-          </div>
-
           <template x-if="loading">
             <div class="loading"><div class="spinner"></div></div>
           </template>
-
-          <template x-if="!loading && loadFailed && !showingStale">
-            <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="loadMonitors()">Retry</button></div>
-          </template>
-
-          <template x-if="showingStale">
-            <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
-          </template>
-
-          <!-- Monitor List (also renders under a stale banner: earlier data
-               stays visible when a refresh fails — D07) -->
-          <template x-if="!loading && monitors.length > 0">
-            <div class="monitor-list">
-              <template x-for="m in monitors" :key="m.id">
-                <a class="monitor-card" :href="'/monitors/' + encodeURIComponent(m.id)" @click.prevent="selectMonitor(m.id)">
-                  <div class="monitor-header">
-                <div class="monitor-status">
-                  <span class="dot" :class="getMonitorDot(m)"></span>
-                  <span class="monitor-name" x-text="m.name"></span>
-                  <span class="monitor-type badge" x-text="m.type"></span>
-                  <!-- D08: a failing alert delivery warns at list level. -->
-                  <span class="badge" x-show="deliveryWarns(m.delivery)"
-                        style="background: transparent; border: 1px solid var(--yellow); color: var(--yellow);"
-                        :title="(m.delivery && m.delivery.last_error) || ''"
-                        x-text="deliveryLabel(m.delivery)"></span>
-                </div>
-                    <div class="monitor-uptime">
-                      <span class="uptime-pct" x-text="m.stats ? m.stats.uptime_percent.toFixed(1) + '%' : '--'"></span>
-                      <span class="uptime-label">24h uptime</span>
-                    </div>
-                  </div>
-                  <div class="monitor-target" x-text="m.target"></div>
-                  <div class="monitor-meta">
-                    <span x-text="'Every ' + formatInterval(m.interval)"></span>
-                    <span x-show="m.stats" x-text="m.stats ? 'Avg ' + fmtMs(m.stats.avg_response) : ''"></span>
-                  </div>
-                </a>
-              </template>
-            </div>
-          </template>
-
           <!-- Alerts v2: open incidents, held alerts, silences and the
                recent delivery history (suppressed and dead-lettered too). -->
           <template x-if="!loading">
-            <div x-data="alertsPanel" class="section" style="margin-top: 24px;">
-              <h2>Alerts</h2>
+            <div x-data="alertsPanel">
               <template x-if="error"><div role="alert" class="card-meta" x-text="error"></div></template>
               <div class="table-wrap" style="padding: 12px 16px; margin-bottom: 12px;">
                 <strong>Open incidents</strong>
@@ -3312,19 +2985,6 @@ <h2>Alerts</h2>
             </div>
           </template>
 
-          <!-- Empty State -->
-          <template x-if="!loading && !loadFailed && monitors.length === 0">
-            <div class="empty-state">
-              <div class="empty-icon">
-                <svg width="48" height="48" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-                </svg>
-              </div>
-              <h3>No monitors yet</h3>
-              <p>Add your first uptime monitor to start tracking availability.</p>
-              <button class="btn btn-primary" @click="openCreate()">Add Monitor</button>
-            </div>
-          </template>
         </div>
       </template>
 
@@ -3594,141 +3254,6 @@ <h2 id="monitor-dialog-title" x-text="editingId ? 'Edit Monitor' : 'Add Monitor'
   </template>
 
 
-  <!-- ═══ Restore Tests Page ═══ -->
-  <template x-if="$store.router.page === 'restore-tests'">
-    <div x-data="restoreTestsPage">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">Restore Tests</h1>
-          <p class="subtitle" x-text="tests.length ? tests.length + ' scheduled verification' + (tests.length !== 1 ? 's' : '') : 'Prove backups restore — on a schedule'"></p>
-        </div>
-        <div class="header-actions">
-          <button class="btn btn-primary" @click="showCreateDialog = true">Add Restore Test</button>
-        </div>
-      </div>
-
-      <template x-if="loading">
-        <div class="loading"><div class="spinner"></div></div>
-      </template>
-
-      <template x-if="!loading && loadFailed && !showingStale">
-        <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="loadTests()">Retry</button></div>
-      </template>
-
-      <template x-if="showingStale">
-        <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
-      </template>
-
-      <template x-if="!loading && tests.length > 0">
-        <div class="monitor-list">
-          <template x-for="t in tests" :key="t.id">
-            <div class="monitor-card">
-              <div class="monitor-header">
-                <div class="monitor-status">
-                  <span class="dot" :class="badgeClass(t)"></span>
-                  <span class="monitor-name" x-text="t.app + '/' + t.accessory"></span>
-                  <span class="monitor-type badge" x-text="t.server"></span>
-                  <span class="badge" x-show="!t.enabled" style="opacity:0.6">disabled</span>
-                </div>
-                <div class="header-actions" style="display:flex; gap:8px;">
-                  <button class="btn" @click="runNow(t)" :disabled="running === t.id">
-                    <span x-text="running === t.id ? 'Running...' : 'Run Now'"></span>
-                  </button>
-                  <button class="btn" @click="toggleEnabled(t)" x-text="t.enabled ? 'Disable' : 'Enable'"></button>
-                  <button class="btn btn-danger" @click="deleteTest(t.id)">Delete</button>
-                </div>
-              </div>
-              <div class="monitor-target">
-                <span x-text="formatInterval(t.interval_hours)"></span>
-              </div>
-              <div class="monitor-meta">
-                <template x-if="t.last_run_at && !t.last_run_at.startsWith('0001')">
-                  <span>
-                    <strong x-text="t.last_ok ? 'OK' : 'FAILED'" :style="t.last_ok ? 'color:var(--green, #2da44e)' : 'color:var(--red, #cf222e)'"></strong>
-                    <span x-show="t.last_date" x-text="' — backup ' + t.last_date"></span>
-                    <span x-show="t.last_metric" x-text="' — ' + t.last_metric"></span>
-                    <span x-show="t.last_duration_ms" x-text="' — ' + (t.last_duration_ms / 1000).toFixed(1) + 's'"></span>
-                    <span x-text="' — ' + formatDate(t.last_run_at)"></span>
-                  </span>
-                </template>
-                <template x-if="!t.last_run_at || t.last_run_at.startsWith('0001')">
-                  <span>Never run</span>
-                </template>
-              </div>
-              <div class="monitor-meta" x-show="!t.last_ok && t.last_detail">
-                <span class="check-msg" x-text="t.last_detail"></span>
-              </div>
-              <!-- D08: a failing alert delivery for this test's verdict warns
-                   at card level, exactly like the monitors list. -->
-              <div class="monitor-meta" x-show="deliveryWarns(t.delivery)">
-                <span class="badge" style="background:var(--red, #cf222e);color:#fff;opacity:0.9"
-                      :title="(t.delivery && t.delivery.last_error) || ''"
-                      x-text="deliveryLabel(t.delivery)"></span>
-              </div>
-            </div>
-          </template>
-        </div>
-      </template>
-
-      <template x-if="!loading && !loadFailed && tests.length === 0">
-        <div class="empty-state">
-          <h3>No restore tests yet</h3>
-          <p>A restore test regularly restores an accessory's latest backup into a scratch container and verifies it's usable — so a backup that can't restore gets caught before you need it.</p>
-          <button class="btn btn-primary" @click="showCreateDialog = true">Add Restore Test</button>
-        </div>
-      </template>
-
-      <!-- Create Restore Test Dialog (focus-trapped, Escape closes — A49/A58). -->
-      <div class="dialog-overlay" x-show="showCreateDialog" @click.self="showCreateDialog = false"
-           @keydown.tab="trapDialogFocus($event)"
-           @keydown.escape.window="showCreateDialog && closeDialog()" x-cloak>
-        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="restore-dialog-title"
-             tabindex="-1" x-effect="showCreateDialog && $nextTick(() => $el.focus())">
-          <h2 id="restore-dialog-title">Add Restore Test</h2>
-          <form @submit.prevent="createTest()">
-            <div class="field">
-              <label for="restore-server">Server</label>
-              <select id="restore-server" x-model="newTest.server" required>
-                <option value="" disabled>Select a server</option>
-                <template x-for="s in servers" :key="s.name">
-                  <option :value="s.name" x-text="s.name + ' (' + s.host + ')'"></option>
-                </template>
-              </select>
-            </div>
-            <div class="field-row">
-              <div class="field">
-                <label for="restore-app">App</label>
-                <input type="text" id="restore-app" x-model="newTest.app" placeholder="myapp" required>
-              </div>
-              <div class="field">
-                <label for="restore-accessory">Accessory</label>
-                <input type="text" id="restore-accessory" x-model="newTest.accessory" placeholder="postgres" required>
-              </div>
-            </div>
-            <p class="card-meta">The backup comes from the server's stored backup target — nothing to configure here.</p>
-            <div class="field">
-              <label for="restore-interval">Run Every</label>
-              <select id="restore-interval" x-model="newTest.interval_hours">
-                <option value="6">6 hours</option>
-                <option value="12">12 hours</option>
-                <option value="24" selected>24 hours</option>
-                <option value="168">7 days</option>
-              </select>
-            </div>
-            <div class="dialog-actions">
-              <button type="button" class="btn" @click="closeDialog()">Cancel</button>
-              <button type="submit" class="btn btn-primary" :disabled="creating">
-                <span x-show="!creating">Create</span>
-                <span x-show="creating">Creating...</span>
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-    </div>
-  </template>
-
   <!-- ═══ Servers Page ═══ -->
   <template x-if="$store.router.page === 'servers'">
     <div x-data="serversPage">
@@ -3737,6 +3262,9 @@ <h2 id="restore-dialog-title">Add Restore Test</h2>
           <h1 class="page-title">Servers</h1>
           <p class="subtitle">Every server this dash manages. Unreachable hosts stay listed with their last-known state.</p>
         </div>
+        <div class="header-actions">
+          <button class="btn btn-primary" @click="$store.router.navigate('settings', { tab: 'servers', add: 'server' })">Add server</button>
+        </div>
       </div>
 
       <template x-if="loading">
@@ -3809,6 +3337,7 @@ <h1 class="page-title" x-text="status.name"></h1>
                @keydown.arrow-left.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.previousElementSibling?.focus()">
             <button class="tab" :class="{ active: tab === 'overview' }" role="tab" id="srv-tab-overview" aria-controls="srv-panel-overview" :aria-selected="(tab === 'overview').toString()" :tabindex="tab === 'overview' ? 0 : -1" @focus="switchTab('overview')">Overview</button>
             <button class="tab" :class="{ active: tab === 'proxy' }" role="tab" id="srv-tab-proxy" aria-controls="srv-panel-proxy" :aria-selected="(tab === 'proxy').toString()" :tabindex="tab === 'proxy' ? 0 : -1" @focus="switchTab('proxy')">Proxy</button>
+            <button class="tab" :class="{ active: tab === 'cleanup' }" role="tab" id="srv-tab-cleanup" aria-controls="srv-panel-cleanup" :aria-selected="(tab === 'cleanup').toString()" :tabindex="tab === 'cleanup' ? 0 : -1" @focus="switchTab('cleanup')">Cleanup</button>
           </div>
 
           <!-- Overview Tab -->
@@ -3933,68 +3462,201 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
                 </div>
               </template>
 
-              <template x-if="!proxy || proxy.routes.length === 0">
-                <div class="empty-state">
-                  <template x-if="proxy && proxy.running">
-                    <p>Caddy is running but no routes are configured. Deploy an app to add routes.</p>
-                  </template>
-                  <template x-if="!proxy || !proxy.running">
-                    <p>Caddy is not running. Run <code style="background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">teploy setup</code> to install it.</p>
-                  </template>
-                </div>
+              <template x-if="!proxy || proxy.routes.length === 0">
+                <div class="empty-state">
+                  <template x-if="proxy && proxy.running">
+                    <p>Caddy is running but no routes are configured. Deploy an app to add routes.</p>
+                  </template>
+                  <template x-if="!proxy || !proxy.running">
+                    <p>Caddy is not running. Run <code style="background: var(--bg-input); padding: 2px 6px; border-radius: 4px;">teploy setup</code> to install it.</p>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
+          <!-- Cleanup Tab: this server's audit report (was /cleanup/:server,
+               which still opens here). -->
+          <template x-if="tab === 'cleanup'">
+            <div role="tabpanel" id="srv-panel-cleanup" aria-labelledby="srv-tab-cleanup" tabindex="-1" x-data="cleanupPage">
+      <!-- One server's report -->
+      <template x-if="routeIdentity()">
+        <div>
+          <div class="page-header">
+            <div>
+              <h2 class="subpage-title">Cleanup</h2>
+              <p class="subtitle" x-text="detail ? auditLabel(detail.state, detailCounts()) + (detail.audited_at ? ' — audited ' + ageLabel(detail.age_seconds) : '') : ''"></p>
+            </div>
+            <div class="header-actions" x-show="detail">
+              <button class="btn btn-sm" @click="load()">Refresh</button>
+              <button class="btn btn-sm btn-primary" @click="runAudit(detail.server)" :disabled="!detail || auditBusy === detail.server || !!detail.live_audit || !cliSupported"
+                      x-text="detail && auditBusy === detail.server ? 'Auditing…' : 'Re-run audit'"></button>
+            </div>
+          </div>
+
+          <template x-if="loading">
+            <div class="loading"><div class="spinner"></div></div>
+          </template>
+
+          <template x-if="!loading && loadFailed && !showingStale">
+            <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="load()">Retry</button></div>
+          </template>
+
+          <template x-if="showingStale">
+            <div role="status" class="stale-banner" x-text="'Showing the last report — the refresh failed: ' + loadError"></div>
+          </template>
+
+          <template x-if="!loading && !cliSupported">
+            <div role="status" class="stale-banner" x-text="note"></div>
+          </template>
+
+          <template x-if="detail && detail.state === 'unreachable'">
+            <div role="status" class="stale-banner" x-text="'The server could not be audited' + (detail.error ? ': ' + detail.error : '') + '. Nothing here says it is clean.'"></div>
+          </template>
+
+          <template x-if="detail && detail.state === 'partial'">
+            <div role="status" class="stale-banner">Part of the audit could not read its sources (below); the findings that depend on them are missing, not cleared.</div>
+          </template>
+
+          <template x-if="detail && detail.last_error">
+            <div role="status" class="stale-banner" x-text="detail.last_error + ' — the report below is the last good one.'"></div>
+          </template>
+
+          <template x-if="detail && detail.live_audit">
+            <div role="status" class="stale-banner">An audit is <span x-text="detail.live_audit.status"></span> — <a :href="'/operations/' + detail.live_audit.id">follow it</a>.</div>
+          </template>
+
+          <template x-if="finishedServers.includes(routeIdentity())">
+            <div role="status" class="stale-banner">A remedy finished here. <button class="btn btn-sm" style="margin-left: 8px;" @click="runAudit(routeIdentity())" :disabled="auditBusy === routeIdentity()" x-text="auditBusy === routeIdentity() ? 'Auditing…' : 'Re-audit now'"></button></div>
+          </template>
+
+          <template x-if="detail && detail.state === 'never'">
+            <div class="empty-state">
+              <p>This server has not been audited yet.</p>
+              <button class="btn btn-primary" @click="runAudit(detail.server)" :disabled="auditBusy === detail.server || !cliSupported" x-text="auditBusy === detail.server ? 'Auditing…' : 'Run the first audit'"></button>
+            </div>
+          </template>
+
+          <template x-if="detail && detail.checks && detail.checks.length > 0">
+            <div style="margin-bottom: 20px;">
+              <h3 style="font-size: 15px; margin: 0 0 8px;">Checks</h3>
+              <div class="table-wrap">
+                <table>
+                  <thead><tr><th>Check</th><th>Status</th><th>Detail</th></tr></thead>
+                  <tbody>
+                    <template x-for="c in detail.checks" :key="c.name">
+                      <tr>
+                        <td x-text="c.name"></td>
+                        <td><span class="dot" :class="c.status === 'ok' ? 'green' : 'yellow'"></span> <span x-text="c.status === 'ok' ? 'ok' : 'unknown'"></span></td>
+                        <td class="text-muted" x-text="c.detail || (c.status === 'unknown' ? 'could not be read' : '')"></td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+
+          <template x-if="detail && detail.disk">
+            <div style="margin-bottom: 20px;">
+              <h3 style="font-size: 15px; margin: 0 0 8px;">Disk</h3>
+              <p class="card-meta" x-text="detail.disk.path + ': ' + fmtBytes(detail.disk.available_bytes) + ' available (' + detail.disk.used_percent + '% used)'"></p>
+              <div class="table-wrap" x-show="detail.disk.attribution && detail.disk.attribution.length">
+                <table>
+                  <thead><tr><th>Attribution</th><th>Size</th></tr></thead>
+                  <tbody>
+                    <template x-for="a in (detail.disk.attribution || [])" :key="a.name">
+                      <tr><td x-text="a.name"></td><td x-text="fmtBytes(a.size_bytes)"></td></tr>
+                    </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+
+          <template x-if="detail && detail.state !== 'never'">
+            <div>
+              <div class="section-header" style="margin-bottom: 12px;">
+                <h3 style="font-size: 15px; margin: 0;">Findings</h3>
+                <label class="checkbox-label" x-show="dismissedFindings.length > 0"><input type="checkbox" x-model="showDismissed"> Show dismissed (<span x-text="dismissedFindings.length"></span>)</label>
+              </div>
+              <template x-if="visibleFindings.length === 0">
+                <div class="empty-state"><p>No open findings<x-show="dismissedFindings.length"> — <span x-text="dismissedFindings.length"></span> dismissed</x-show>.</p></div>
               </template>
+              <div class="table-wrap" x-show="visibleFindings.length > 0">
+                <table>
+                  <thead>
+                    <tr><th>Finding</th><th>Evidence</th><th style="width: 280px;"></th></tr>
+                  </thead>
+                  <tbody>
+                    <template x-for="f in visibleFindings" :key="f.id">
+                      <tr :class="f.dismissed ? 'text-muted' : ''">
+                        <td>
+                          <span class="dot" :class="severityClass(f.severity)"></span>
+                          <strong x-text="kindLabel(f.kind)"></strong>
+                          <div class="mono" style="font-size: 12px;" x-text="f.subject"></div>
+                          <div class="text-muted" x-show="f.size_bytes" x-text="f.size_bytes ? fmtBytes(f.size_bytes) : ''"></div>
+                        </td>
+                        <td>
+                          <span x-text="f.evidence"></span>
+                          <div class="text-muted" style="margin-top: 4px;" x-show="f.related && f.related.length" x-text="'related: ' + (f.related || []).join(', ')"></div>
+                          <div class="text-muted" style="margin-top: 4px;" x-show="f.dismissed" x-text="f.dismissed ? 'dismissed by ' + f.dismissed.actor : ''"></div>
+                        </td>
+                        <td>
+                          <template x-if="f.remedy && f.remedy.runnable">
+                            <button class="btn btn-sm" :class="f.remedy.destructive ? 'btn-danger' : ''" @click="openRemedy(f)" :disabled="remedyBusy"
+                                    :title="remedyLabel(f)" x-text="f.remedy.destructive ? 'Fix (destructive)…' : 'Fix'"></button>
+                          </template>
+                          <template x-if="f.remedy && f.remedy.available && !f.remedy.runnable">
+                            <div>
+                              <span class="badge">report-only here</span>
+                              <div class="text-muted" style="font-size: 12px;" x-text="f.remedy.note"></div>
+                            </div>
+                          </template>
+                          <template x-if="f.remedy && !f.remedy.available">
+                            <span class="text-muted" style="font-size: 12px;">report-only</span>
+                          </template>
+                          <button class="btn btn-sm" style="margin-left: 8px;" @click="f.dismissed ? undismiss(f) : dismiss(f)" x-text="f.dismissed ? 'Un-dismiss' : 'Dismiss'" title="Hide this finding; a fresh audit that proves it cleared retires the dismissal"></button>
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </template>
         </div>
       </template>
-    </div>
-  </template>
 
-  <!-- ═══ Templates Page ═══ -->
-  <template x-if="$store.router.page === 'sources'">
-    <div x-data="sourcesPage">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">Git sources</h1>
-          <p class="subtitle">Register a repository so dash can receive and verify its webhook pushes. Provider names select credentials configured by the operator.</p>
-        </div>
-        <div class="header-actions">
-          <button class="btn" @click="load()" :disabled="loading">Refresh</button>
+      <!-- Destructive remedy confirmation: type the finding's app or subject
+           name. The server enforces the match; this dialog is the prompt. -->
+      <div class="dialog-overlay" x-show="confirmFinding" @click.self="confirmFinding = null" @keydown.escape.window="confirmFinding && (confirmFinding = null)" x-cloak>
+        <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="cleanup-remedy-title" tabindex="-1" x-effect="confirmFinding && $nextTick(() => $el.focus())">
+          <h2 id="cleanup-remedy-title">Fix <span x-text="confirmFinding ? kindLabel(confirmFinding.kind) : ''"></span>?</h2>
+          <template x-if="confirmFinding">
+            <form @submit.prevent="confirmRemedy()">
+              <p>This runs <span class="mono" x-text="remedyLabel(confirmFinding)"></span> — the fix the audit named. It is destructive: what it removes does not come back.</p>
+              <p class="text-muted" x-text="confirmFinding.evidence"></p>
+              <div class="field">
+                <label for="cleanup-remedy-confirm">Type <span class="mono" x-text="confirmName(confirmFinding)"></span> to confirm</label>
+                <input id="cleanup-remedy-confirm" type="text" class="form-input" x-model="confirmText" autocomplete="off">
+              </div>
+              <div class="dialog-actions">
+                <button type="button" class="btn" @click="confirmFinding = null">Cancel</button>
+                <button type="submit" class="btn btn-danger" :disabled="remedyBusy || confirmText !== confirmName(confirmFinding)" x-text="remedyBusy ? 'Starting…' : 'Run it'"></button>
+              </div>
+            </form>
+          </template>
         </div>
       </div>
-      <p role="alert" class="stale-banner" x-show="loadError" x-text="loadError"></p>
-      <p role="alert" class="stale-banner" x-show="error" x-text="error"></p>
-      <p class="text-muted" x-show="!loading && !loadError && sources.length === 0">No sources configured.</p>
-      <template x-for="src in sources" :key="src.id">
-        <div class="card source-card">
-          <button class="btn" @click="select(src.id)" :disabled="busy" x-text="src.display_name || src.clone_url"></button>
-          <span x-text="src.credential_verdict"></span><span x-text="src.degrade_reason || ''"></span>
+            </div>
+          </template>
         </div>
       </template>
-      <form @submit.prevent="create()" class="card source-form">
-        <h2 class="section-title">Add repository</h2>
-        <label class="field">Forge <select x-model="form.forge"><option>github</option><option>gitlab</option><option>forgejo</option><option>gitea</option><option>generic</option></select></label>
-        <label class="field">Clone URL <input type="url" required x-model="form.clone_url"></label>
-        <label class="field">Watched branch <input x-model="form.default_branch"></label>
-        <label class="field">Provider name <input required x-model="form.credential_ref" autocomplete="off"></label>
-        <label class="field">Display name <input x-model="form.display_name"></label>
-        <button type="submit" class="btn btn-primary" :disabled="busy">Add source</button>
-      </form>
-      <template x-if="selected">
-        <section class="card source-detail">
-          <h2 x-text="selected.display_name || selected.clone_url"></h2>
-          <p>Webhook URL: <code x-text="selected.webhook_url"></code></p>
-          <button class="btn btn-sm" @click="action('verify')" :disabled="busy">Verify credentials</button>
-          <button class="btn btn-sm" @click="action('rotate-secret')" :disabled="busy">Rotate webhook secret</button>
-          <div x-show="webhookSecret"><p>Save this webhook secret now. It is shown once.</p><code x-text="webhookSecret"></code><button class="btn btn-sm" @click="webhookSecret = ''">Hide</button></div>
-          <h3>Recent deliveries</h3>
-          <template x-for="delivery in selected.deliveries || []" :key="delivery.id + delivery.received_at"><p><code x-text="delivery.commit"></code> <span x-text="delivery.disposition"></span> <span x-text="delivery.reason"></span></p></template>
-          <p class="card-meta">Pushes to a repository an app builds from wake that app's server-side poll (which decides what deploys); every authenticated push is recorded here.</p>
-        </section>
-      </template>
     </div>
   </template>
 
+  <!-- ═══ Templates Page ═══ -->
+
   <template x-if="$store.router.page === 'templates'">
     <div x-data="templatesPage">
       <div class="page-header">
@@ -4243,9 +3905,361 @@ <h1 class="page-title">Settings</h1>
         <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'users' }" @click="setTab('users')">Users</button>
         <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'sso' }" @click="setTab('sso')">SSO</button>
         <button class="tab" :class="{ active: tab === 'links' }" @click="setTab('links')">Links</button>
+        <button class="tab" :class="{ active: tab === 'integrations' }" @click="setTab('integrations')">Integrations</button>
+        <button class="tab" :class="{ active: tab === 'git-sources' }" @click="setTab('git-sources')">Git sources</button>
         <button class="tab" :class="{ active: tab === 'account' }" @click="setTab('account')">Account</button>
       </div>
 
+      <!-- Integrations Tab (was the Siblings page; /siblings opens it):
+           Teploy products found on your servers, and the Observe connect flow. -->
+      <template x-if="tab === 'integrations'">
+        <div x-data="siblingsPage">
+
+          <div class="page-header">
+            <div>
+              <h2 class="subpage-title">Integrations</h2>
+              <p class="subtitle">Teploy products running on your servers, found by their labels and probed on their published ports. Nothing is connected until you confirm it.</p>
+            </div>
+            <div class="header-actions">
+              <button class="btn btn-sm" @click="load()">Refresh</button>
+              <button class="btn btn-sm btn-primary" @click="rescan()" :disabled="scanBusy || !cliSupported" x-text="scanBusy ? 'Scanning…' : 'Rescan now'" title="Reads each server's containers and probes the candidates — quick, read-only"></button>
+            </div>
+          </div>
+
+          <template x-if="loading">
+            <div class="loading"><div class="spinner"></div></div>
+          </template>
+
+          <template x-if="!loading && loadFailed && !showingStale">
+            <div role="alert" class="empty-state"><p x-text="loadError"></p><button class="btn btn-sm" @click="load()">Retry</button></div>
+          </template>
+
+          <template x-if="showingStale">
+            <div role="status" class="stale-banner" x-text="'Showing the last discovery — the refresh failed: ' + loadError"></div>
+          </template>
+
+          <template x-if="!loading && !cliSupported">
+            <div role="status" class="stale-banner" x-text="note"></div>
+          </template>
+
+          <template x-if="sweepError">
+            <div role="status" class="stale-banner" x-text="'The last sweep did not finish: ' + sweepError"></div>
+          </template>
+
+          <!-- Probing consent: internal addresses (tailnet, LAN) are probed only
+               when an admin allows it. The A13 rule applies: an editor cannot
+               flip this. -->
+          <template x-if="!loading && cliSupported">
+            <div class="info-banner" role="status">
+              <span x-text="allowInternal
+                ? 'Probing reaches internal addresses (tailnet/LAN) — matches where siblings usually run.'
+                : 'Internal addresses (tailnet/LAN) are not probed — candidates there read “Blocked (internal)” until an admin allows it.'"></span>
+              <button class="btn btn-sm" @click="setAllowInternal(!allowInternal)" :disabled="settingsBusy"
+                      x-text="settingsBusy ? 'Saving…' : (allowInternal ? 'Stop probing internal' : 'Allow probing internal')"></button>
+            </div>
+          </template>
+
+          <template x-if="!loading && !loadFailed && servers.length === 0">
+            <div class="empty-state"><p x-text="cliSupported ? 'No servers configured, or the first sweep has not run yet.' : 'Sibling discovery needs teploy ' + minCLI + ' on the dashboard host.'"></p></div>
+          </template>
+
+          <!-- Observe connect: the one sibling with a deep flow. The owner
+               confirms the instance identity from the discovery doc BEFORE any
+               token moves; dash re-checks it on every later write. -->
+          <template x-if="!loading && cliSupported">
+            <div style="border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 16px; margin-bottom: 16px;">
+              <template x-if="observeConnected && observeConnection">
+                <div>
+                  <h2 class="section-title" style="margin-bottom: 8px;">Observe <span class="status-dot dot green"></span> connected</h2>
+                  <p style="margin: 0 0 8px 0;">
+                    <span x-text="observeConnection.base_url"></span>
+                    <span class="text-muted"> — instance <span class="mono" x-text="observeConnection.instance_id.slice(0, 8) + '…'"></span>,
+                      <span x-text="observeConnection.version || 'version unknown'"></span>,
+                      token <span class="mono" x-text="observeConnection.token_fp"></span></span>
+                  </p>
+                  <p class="text-muted" style="margin: 0 0 8px 0; font-size: 13px;">
+                    Per-app telemetry is opt-in, one app at a time, always shown as a plan first.
+                    <a x-show="observeConnection.dashboard_url" :href="observeConnection.dashboard_url" target="_blank" rel="noopener">Open Observe</a>
+                  </p>
+
+                  <!-- Opted-in apps -->
+                  <template x-if="telemetryApps.length > 0">
+                    <div style="margin: 12px 0;">
+                      <h3 class="section-title" style="font-size: 14px; margin-bottom: 6px;">Apps sending telemetry</h3>
+                      <table style="width: 100%; font-size: 13px;">
+                        <tbody>
+                          <template x-for="entry in telemetryApps" :key="entry.server + '/' + entry.app">
+                            <tr>
+                              <td style="padding: 4px 8px 4px 0;"><span x-text="entry.app"></span> <span class="text-muted" x-text="'on ' + entry.server"></span></td>
+                              <td class="text-muted" style="padding: 4px 8px 4px 0;" x-text="envDisplay(entry)"></td>
+                              <td style="padding: 4px 0; text-align: right;">
+                                <button type="button" class="btn btn-sm" @click="openDisable(entry)" :disabled="disableBusy">Stop telemetry</button>
+                              </td>
+                            </tr>
+                          </template>
+                        </tbody>
+                      </table>
+                    </div>
+                  </template>
+
+                  <!-- Opt-in: plan → approve → apply -->
+                  <form @submit.prevent="planTelemetry()" style="margin-top: 8px; display: flex; gap: 8px; align-items: end; flex-wrap: wrap;">
+                    <div class="field">
+                      <label for="telemetry-server">Server</label>
+                      <input id="telemetry-server" class="form-input" style="min-width: 140px;" x-model="telemetryForm.server" list="telemetry-servers" autocomplete="off" :disabled="telemetryBusy">
+                      <datalist id="telemetry-servers">
+                        <template x-for="a in [...new Set(fleetApps.map(a => a.server))]" :key="a"><option :value="a"></option></template>
+                      </datalist>
+                    </div>
+                    <div class="field">
+                      <label for="telemetry-app">App</label>
+                      <input id="telemetry-app" class="form-input" style="min-width: 180px;" x-model="telemetryForm.app" list="telemetry-apps" autocomplete="off" :disabled="telemetryBusy">
+                      <datalist id="telemetry-apps">
+                        <template x-for="a in appSuggestions" :key="a.server + '/' + a.app"><option :value="a.app"></option></template>
+                      </datalist>
+                    </div>
+                    <button type="submit" class="btn btn-sm" :disabled="telemetryBusy || !telemetryForm.server || !telemetryForm.app"
+                            x-text="telemetryBusy ? 'Planning…' : 'Plan telemetry'"></button>
+                    <button type="button" class="btn btn-sm" @click="disconnectObserve()" :disabled="connectBusy" x-text="connectBusy ? 'Working…' : 'Disconnect'"></button>
+                  </form>
+
+                  <template x-if="telemetryPlanError">
+                    <p role="alert" style="color: var(--danger); margin: 8px 0; font-size: 13px;" x-text="telemetryPlanError"></p>
+                  </template>
+
+                  <!-- The plan: exactly what apply will do. Approving this is
+                       consenting to these writes and the redeploy. -->
+                  <template x-if="telemetryPlan">
+                    <div role="dialog" aria-label="Telemetry plan" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-top: 10px;">
+                      <h3 class="section-title" style="font-size: 14px; margin-bottom: 6px;">Plan — <span x-text="telemetryPlan.app"></span> <span class="text-muted" x-text="'on ' + telemetryPlan.server"></span></h3>
+                      <ol style="margin: 0 0 8px 0; padding-left: 20px; font-size: 13px;">
+                        <li x-text="telemetryPlan.site_action"></li>
+                        <li>mint the telemetry key “<span class="mono" x-text="telemetryPlan.key_label"></span>” for that site</li>
+                        <li>write these environment variables and secrets:
+                          <table style="width: 100%; font-size: 12px; margin-top: 4px;">
+                            <tbody>
+                              <template x-for="w in telemetryPlan.env" :key="w.key">
+                                <tr>
+                                  <td class="mono" style="padding: 1px 8px 1px 0;" x-text="w.key"></td>
+                                  <td class="mono" style="padding: 1px 0;" :class="w.secret ? 'text-muted' : ''" x-text="w.value"></td>
+                                </tr>
+                              </template>
+                            </tbody>
+                          </table>
+                        </li>
+                        <li x-text="telemetryPlan.redeploy"></li>
+                      </ol>
+                      <p class="text-muted" style="margin: 0 0 8px 0; font-size: 12px;" x-show="telemetryPlan.rotation"
+                         x-text="telemetryPlan.rotation ? 'This replaces the previous opt-in (key ' + telemetryPlan.rotation.key_id + ') — a NEW key is minted; revoke the old one in Observe if nothing else uses it.' : ''"></p>
+                      <div style="display: flex; gap: 8px;">
+                        <button type="button" class="btn btn-sm btn-primary" @click="applyTelemetry()" :disabled="telemetryBusy"
+                                x-text="telemetryBusy ? 'Applying…' : 'Approve and apply'"></button>
+                        <button type="button" class="btn btn-sm" @click="telemetryPlan = null" :disabled="telemetryBusy">Cancel</button>
+                      </div>
+                    </div>
+                  </template>
+
+                  <template x-if="telemetryApplied">
+                    <div role="status" class="stale-banner" style="margin-top: 8px;">
+                      <span x-text="telemetryApplied.note"></span>
+                      <a :href="'/operations/' + (telemetryApplied.operation ? telemetryApplied.operation.id : '')">follow the redeploy</a>
+                    </div>
+                  </template>
+                </div>
+              </template>
+              <template x-if="!observeConnected">
+                <form @submit.prevent="previewDoc ? connectObserve() : previewObserve()">
+                  <h2 class="section-title" style="margin-bottom: 8px;">Connect Observe</h2>
+                  <p class="text-muted" style="margin: 0 0 12px 0; font-size: 13px;">
+                    Create a service token in Observe, then paste it here. <a x-show="observeTokenURL()" :href="observeTokenURL()" target="_blank" rel="noopener">Open the filled-in form in Observe</a><span x-show="!observeTokenURL()">Enter the address below for a link to the filled-in form, or use Settings → Service Tokens with scopes <span class="mono">sites:create</span> and <span class="mono">keys:mint</span>.</span>
+                    Dash never sees an Observe admin login, and nothing is written until you confirm this instance's identity.
+                    <span x-show="observeHintData && observeHintData.available">A confirmed Observe was found on your servers — its address is prefilled.</span>
+                  </p>
+                  <div style="display: grid; grid-template-columns: 2fr 2fr auto; gap: 8px; align-items: end;">
+                    <div class="field">
+                      <label for="observe-base">Observe address</label>
+                      <input id="observe-base" class="form-input" x-model="connectForm.base_url" placeholder="http://observe.tailnet-host:3000" autocomplete="off" :disabled="connectBusy">
+                    </div>
+                    <div class="field">
+                      <label for="observe-token">Service token</label>
+                      <input id="observe-token" class="form-input" type="password" x-model="connectForm.token" placeholder="obs_svc_…" autocomplete="off" :disabled="connectBusy || !previewDoc">
+                    </div>
+                    <div class="field" style="padding-bottom: 6px;">
+                      <label style="display: flex; gap: 6px; align-items: center; font-weight: 400;">
+                        <input type="checkbox" x-model="connectForm.allow_internal"> Allow an internal address
+                      </label>
+                    </div>
+                  </div>
+                  <template x-if="previewError">
+                    <p role="alert" class="text-muted" style="color: var(--danger); margin: 8px 0;" x-text="previewError"></p>
+                  </template>
+                  <template x-if="previewDoc">
+                    <div role="status" class="stale-banner" style="margin: 8px 0;">
+                      <p style="margin: 0;">Discovery doc: <strong x-text="previewDoc.product"></strong>
+                        <span x-text="previewDoc.version || ''"></span>,
+                        instance <span class="mono" x-text="previewDoc.instance_id.slice(0, 8) + '…'"></span>
+                        (<span class="mono" x-text="previewDoc.instance_id"></span>)</p>
+                      <p style="margin: 4px 0 0 0;" class="text-muted"
+                         x-text="'dashboard ' + (previewDoc.dashboard_url || 'not published') + ' · ingest ' + (previewDoc.ingest_url || 'not published')"></p>
+                      <p style="margin: 4px 0 0 0;">Confirm this is the Observe you mean, then paste the token and connect.</p>
+                    </div>
+                  </template>
+                  <div style="margin-top: 8px; display: flex; gap: 8px;">
+                    <button type="button" class="btn btn-sm" @click="previewObserve()" :disabled="connectBusy || !connectForm.base_url"
+                            x-text="connectBusy ? 'Reading…' : (previewDoc ? 'Re-read' : 'Preview the instance')"></button>
+                    <button type="submit" class="btn btn-sm btn-primary" x-show="previewDoc" :disabled="connectBusy || !connectForm.token"
+                            x-text="connectBusy ? 'Connecting…' : 'Connect this instance'"></button>
+                  </div>
+                </form>
+              </template>
+            </div>
+          </template>
+
+          <!-- Candidates: one row per (server, product) with the probe verdict.
+               Honest unknowns stay unknown — nothing renders as “no siblings”
+               when a server was only partly read. -->
+          <template x-if="candidates.length > 0">
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Product</th>
+                    <th>Probe</th>
+                    <th>Where</th>
+                    <th>Evidence</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <template x-for="c in candidates" :key="c.server + '/' + c.product">
+                    <tr>
+                      <td>
+                        <strong x-text="c.product"></strong>
+                        <span class="text-muted" x-show="c.label_version" x-text="c.label_version"></span>
+                        <div class="text-muted" x-show="!c.recognized" title="The CLI did not recognise this product label; it is shown as reported">unrecognised label</div>
+                      </td>
+                      <td>
+                        <span class="status-dot dot" :class="probeClass(c.state)"></span>
+                        <span x-text="probeLabel(c.state)"></span>
+                        <div class="text-muted" x-text="'probed ' + ageLabel(c.age_seconds)"></div>
+                      </td>
+                      <td>
+                        <div x-text="c.server"></div>
+                        <div class="text-muted mono" style="font-size: 12px;" x-text="(c.addresses || []).join(', ') || 'no published port'"></div>
+                        <div class="text-muted" x-show="c.container_state && c.container_state !== 'running'" x-text="'container ' + c.container_state"></div>
+                      </td>
+                      <td>
+                        <div x-text="probeHint(c)"></div>
+                        <div class="text-muted mono" style="font-size: 12px;" x-show="c.doc && c.doc.dashboard_url"><a :href="c.doc ? c.doc.dashboard_url : null" target="_blank" rel="noopener" x-text="c.doc ? c.doc.dashboard_url : ''"></a></div>
+                        <div class="text-muted" x-show="c.base_url && (!c.doc || !c.doc.dashboard_url)"><a :href="c.base_url" target="_blank" rel="noopener" x-text="c.base_url"></a></div>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
+            </div>
+          </template>
+
+          <!-- Stopping telemetry: the dialog names exactly what goes, and that
+               the site and key live on in Observe until revoked there. -->
+          <div class="dialog-overlay" x-show="confirmDisable" @click.self="confirmDisable = null" @keydown.escape.window="confirmDisable && (confirmDisable = null)" x-cloak>
+            <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="observe-disable-title" tabindex="-1" x-effect="confirmDisable && $nextTick(() => $el.focus())">
+              <h2 id="observe-disable-title">Stop telemetry for <span x-text="confirmDisable ? confirmDisable.app : ''"></span>?</h2>
+              <template x-if="confirmDisable">
+                <div>
+                  <p>These environment variables and secrets come off the app:</p>
+                  <p class="mono text-muted" style="font-size: 12px;" x-text="envDisplay(confirmDisable)"></p>
+                  <p class="text-muted">A redeploy is queued so the app restarts without them. The site and the telemetry key stay in Observe — revoke the key there if you want it dead.</p>
+                  <div class="dialog-actions">
+                    <button type="button" class="btn" @click="confirmDisable = null">Keep it</button>
+                    <button type="button" class="btn btn-danger" @click="disableTelemetry()" :disabled="disableBusy" x-text="disableBusy ? 'Stopping…' : 'Stop telemetry'"></button>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <!-- Per-server read state: which reports are complete, partial or
+               missing, with their age. -->
+          <template x-if="servers.length > 0">
+            <div>
+              <h2 class="section-title" style="margin-top: 24px;">Server reads</h2>
+              <div class="table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Server</th>
+                      <th>Read</th>
+                      <th>Last report</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <template x-for="row in servers" :key="row.server">
+                      <tr>
+                        <td x-text="row.server"></td>
+                        <td>
+                          <span class="status-dot dot" :class="serverStateClass(row.state)"></span>
+                          <span x-text="serverStateLabel(row.state)"></span>
+                          <div class="text-muted" x-show="row.error" x-text="row.error"></div>
+                        </td>
+                        <td>
+                          <div x-text="ageLabel(row.age_seconds)"></div>
+                          <div class="text-muted" x-show="!row.checked_at">never completed</div>
+                        </td>
+                      </tr>
+                    </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <!-- Git sources Tab (was the Sources page; /sources opens it). -->
+      <template x-if="tab === 'git-sources'">
+        <div x-data="sourcesPage">
+          <div class="page-header">
+            <div>
+              <h2 class="subpage-title">Git sources</h2>
+              <p class="subtitle">Register a repository so dash can receive and verify its webhook pushes. Provider names select credentials configured by the operator.</p>
+            </div>
+            <div class="header-actions">
+              <button class="btn" @click="load()" :disabled="loading">Refresh</button>
+            </div>
+          </div>
+          <p role="alert" class="stale-banner" x-show="loadError" x-text="loadError"></p>
+          <p role="alert" class="stale-banner" x-show="error" x-text="error"></p>
+          <p class="text-muted" x-show="!loading && !loadError && sources.length === 0">No sources configured.</p>
+          <template x-for="src in sources" :key="src.id">
+            <div class="card source-card">
+              <button class="btn" @click="select(src.id)" :disabled="busy" x-text="src.display_name || src.clone_url"></button>
+              <span x-text="src.credential_verdict"></span><span x-text="src.degrade_reason || ''"></span>
+            </div>
+          </template>
+          <form @submit.prevent="create()" class="card source-form">
+            <h2 class="section-title">Add repository</h2>
+            <label class="field">Forge <select x-model="form.forge"><option>github</option><option>gitlab</option><option>forgejo</option><option>gitea</option><option>generic</option></select></label>
+            <label class="field">Clone URL <input type="url" required x-model="form.clone_url"></label>
+            <label class="field">Watched branch <input x-model="form.default_branch"></label>
+            <label class="field">Provider name <input required x-model="form.credential_ref" autocomplete="off"></label>
+            <label class="field">Display name <input x-model="form.display_name"></label>
+            <button type="submit" class="btn btn-primary" :disabled="busy">Add source</button>
+          </form>
+          <template x-if="selected">
+            <section class="card source-detail">
+              <h2 x-text="selected.display_name || selected.clone_url"></h2>
+              <p>Webhook URL: <code x-text="selected.webhook_url"></code></p>
+              <button class="btn btn-sm" @click="action('verify')" :disabled="busy">Verify credentials</button>
+              <button class="btn btn-sm" @click="action('rotate-secret')" :disabled="busy">Rotate webhook secret</button>
+              <div x-show="webhookSecret"><p>Save this webhook secret now. It is shown once.</p><code x-text="webhookSecret"></code><button class="btn btn-sm" @click="webhookSecret = ''">Hide</button></div>
+              <h3>Recent deliveries</h3>
+              <template x-for="delivery in selected.deliveries || []" :key="delivery.id + delivery.received_at"><p><code x-text="delivery.commit"></code> <span x-text="delivery.disposition"></span> <span x-text="delivery.reason"></span></p></template>
+              <p class="card-meta">Pushes to a repository an app builds from wake that app's server-side poll (which decides what deploys); every authenticated push is recorded here.</p>
+            </section>
+          </template>
+        </div>
+      </template>
+
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
       </template>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index b45e43e..a91418f 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -341,8 +341,60 @@ function routeTab(params, allowed, fallback) {
   return allowed.includes(t) ? t : fallback;
 }
 const APP_TABS = ['general', 'settings', 'repository', 'env', 'logs', 'deploys', 'releases', 'history', 'backups', 'kv'];
-const SERVER_TABS = ['overview', 'proxy'];
-const SETTINGS_TABS = ['servers', 'groups', 'notifications', 'registry', 'mcp', 'users', 'sso', 'links', 'account'];
+const SERVER_TABS = ['overview', 'proxy', 'cleanup'];
+const SETTINGS_TABS = ['servers', 'groups', 'notifications', 'registry', 'mcp', 'users', 'sso', 'links', 'integrations', 'git-sources', 'account'];
+const BACKUP_TABS = ['coverage', 'setup', 'restore-tests'];
+
+// Header destinations (2026-11 nav rework): Home, Apps, Servers, Monitoring,
+// Backups, Activity, then Settings. Every page belongs to one.
+const NAV_SECTIONS = {
+  'homepage': 'home',
+  'projects': 'apps', 'project-detail': 'apps', 'app-detail': 'apps', 'templates': 'apps',
+  'servers': 'servers', 'server-detail': 'servers', 'cleanup': 'servers',
+  'monitors': 'monitoring', 'monitor-detail': 'monitoring', 'domains': 'monitoring', 'alerts': 'monitoring',
+  'backups': 'backups',
+  'operations': 'activity', 'operation-detail': 'activity',
+  'settings': 'settings',
+};
+// Hub list pages that share a tab strip; each tab is its own page and URL.
+const HUB_APPS = [['projects', 'Apps'], ['templates', 'Templates']];
+const HUB_SERVERS = [['servers', 'Servers'], ['cleanup', 'Cleanup']];
+const HUB_MONITORING = [['monitors', 'Uptime'], ['domains', 'Domains'], ['alerts', 'Alerts']];
+const HUB_TABS = {
+  'projects': HUB_APPS, 'templates': HUB_APPS,
+  'servers': HUB_SERVERS, 'cleanup': HUB_SERVERS,
+  'monitors': HUB_MONITORING, 'domains': HUB_MONITORING, 'alerts': HUB_MONITORING,
+};
+
+// restoreTestRows merges the automatic (dash-owned, from /api/backups) and
+// hand-added (/api/restore-tests) restore tests into one list for the
+// Backups > Restore tests table.
+function restoreTestRows(automatic, manual) {
+  const rows = [];
+  for (const t of automatic || []) {
+    const last = t.last_run;
+    rows.push({
+      key: 'auto:' + t.id, auto: t, manual: null,
+      label: [t.server, t.app || t.accessory, t.database].filter(Boolean).join(' · '),
+      engine: t.engine || '',
+      addedBy: t.adopted ? 'Automatic (adopted)' : 'Automatic',
+      state: !last ? 'never' : last.skipped ? 'skipped' : last.ok ? 'ok' : 'failed',
+      lastText: !last ? 'not yet' : last.skipped ? last.skipped : last.ok ? 'passed' : 'failed',
+    });
+  }
+  for (const t of manual || []) {
+    const ran = t.last_run_at && !String(t.last_run_at).startsWith('0001');
+    rows.push({
+      key: 'manual:' + t.id, auto: null, manual: t,
+      label: [t.server, t.app + '/' + t.accessory].join(' · '),
+      engine: '',
+      addedBy: 'By hand',
+      state: !ran ? 'never' : t.last_ok ? 'ok' : 'failed',
+      lastText: !ran ? 'never run' : t.last_ok ? 'passed' : 'failed',
+    });
+  }
+  return rows;
+}
 
 // ── Alpine.js App ──
 document.addEventListener('alpine:init', () => {
@@ -366,13 +418,10 @@ document.addEventListener('alpine:init', () => {
     { page: 'monitors', path: '/monitors' },
     { page: 'monitor-detail', path: '/monitors/:id' },
     { page: 'domains', path: '/domains' },
+    { page: 'alerts', path: '/alerts' },
     { page: 'cleanup', path: '/cleanup' },
-    { page: 'cleanup-detail', path: '/cleanup/:server' },
-    { page: 'siblings', path: '/siblings' },
     { page: 'backups', path: '/backups' },
-    { page: 'restore-tests', path: '/restore-tests' },
     { page: 'templates', path: '/templates' },
-    { page: 'sources', path: '/sources' },
     { page: 'servers', path: '/servers' },
     { page: 'server-detail', path: '/servers/:name' },
     { page: 'operations', path: '/operations' },
@@ -385,7 +434,20 @@ document.addEventListener('alpine:init', () => {
     { page: 'server-detail', path: '/fleet/:name' },
     { page: 'operations', path: '/activity' },
     { page: 'operation-detail', path: '/activity/:id' },
+    // Pages that became tabs (2026-11 nav rework): the old URLs open the
+    // page and tab they moved to. `params` are fixed by the route.
+    { page: 'server-detail', path: '/cleanup/:name', params: { tab: 'cleanup' } },
+    { page: 'settings', path: '/siblings', params: { tab: 'integrations' } },
+    { page: 'settings', path: '/sources', params: { tab: 'git-sources' } },
+    { page: 'backups', path: '/restore-tests', params: { tab: 'restore-tests' } },
   ];
+  // Page names from before the rework, still accepted by navigate().
+  const MOVED_PAGES = {
+    'cleanup-detail': (p) => ['server-detail', { name: p.server || p.name, tab: 'cleanup' }],
+    'siblings': (p) => ['settings', { ...p, tab: 'integrations' }],
+    'sources': (p) => ['settings', { ...p, tab: 'git-sources' }],
+    'restore-tests': (p) => ['backups', { ...p, tab: 'restore-tests' }],
+  };
 
   function routeToURL(page, params) {
     const route = ROUTES.find(r => r.page === page);
@@ -425,6 +487,7 @@ document.addEventListener('alpine:init', () => {
         else if (want[i] !== have[i]) { ok = false; break; }
       }
       if (!ok) continue;
+      Object.assign(params, route.params || {});
       // Path-derived identifiers are authoritative: a conflicting query
       // parameter must not retarget the page onto another resource.
       for (const [k, v] of new URLSearchParams(search)) {
@@ -438,7 +501,13 @@ document.addEventListener('alpine:init', () => {
   Alpine.store('router', {
     page: 'homepage',
     params: {},
+    // The header destination the current page belongs to.
+    get section() { return NAV_SECTIONS[this.page] || ''; },
+    // The page-level tabs (each its own URL) shown above a hub's list pages.
+    get hubTabs() { return HUB_TABS[this.page] || null; },
+    url(page, params = {}) { return routeToURL(page, params); },
     navigate(page, params = {}) {
+      if (MOVED_PAGES[page]) [page, params] = MOVED_PAGES[page](params);
       this.page = page;
       this.params = params;
       history.pushState({ page, params }, '', routeToURL(page, params));
@@ -2380,7 +2449,7 @@ document.addEventListener('alpine:init', () => {
     formatWhen(iso) { return iso ? formatObservedAt(iso) : ''; },
 
     openRestoreTests() {
-      Alpine.store('router').navigate('restore-tests');
+      Alpine.store('router').navigate('backups', { tab: 'restore-tests' });
     },
 
     accessoryName(containerName) {
@@ -2901,6 +2970,10 @@ document.addEventListener('alpine:init', () => {
         if (!admin && ['servers', 'notifications', 'registry', 'mcp', 'users', 'sso'].includes(this.tab)) {
           this.setTab('groups');
         }
+        // Servers > Add server lands here with the add form focused.
+        if (admin && this.tab === 'servers' && Alpine.store('router').params.add === 'server') {
+          setTimeout(() => { const el = document.getElementById('new-server-name'); if (el) el.focus(); }, 0);
+        }
       } catch (e) {
         showToast(e.message, 'error');
       }
@@ -3217,6 +3290,7 @@ document.addEventListener('alpine:init', () => {
 
   // ── Templates Page ──
   Alpine.data('sourcesPage', () => withAsyncLoad({
+    loading: true,
     sources: [], selected: null, error: '', busy: false,
     generation: 0, listGeneration: 0, webhookSecret: '', destroyed: false,
     form: {forge: 'github', clone_url: '', default_branch: '', credential_ref: '', display_name: ''},
@@ -4279,6 +4353,7 @@ document.addEventListener('alpine:init', () => {
   // policy). Reads the slow sweep's cached view; Refresh asks for a new one.
   Alpine.data('backupsPage', () => withAsyncLoad({
     ...backupSetupComponent(),
+    tab: 'coverage',
     view: null,
     loading: true,
     refreshInterval: null,
@@ -4309,13 +4384,28 @@ document.addEventListener('alpine:init', () => {
     overrideFor: null,
     override: { cron: '0 3 * * *', keep_last: 0, max_age_days: 0 },
 
+    setTab(t) {
+      this.tab = t;
+      if (Alpine.store('router').page === 'backups') Alpine.store('router').setTab(t, 'coverage');
+    },
+    // The dash-owned tests from /api/backups, for the merged Restore tests table.
+    automaticTests() { return (this.view && this.view.tests) || []; },
+
     async init() {
+      this.tab = routeTab(Alpine.store('router').params, BACKUP_TABS, 'coverage');
+      this.tabEffect = Alpine.effect(() => {
+        const r = Alpine.store('router');
+        if (r.page !== 'backups') return;
+        const t = routeTab(r.params, BACKUP_TABS, 'coverage');
+        if (t !== this.tab) this.tab = t;
+      });
       await this.load();
       this.refreshInterval = setInterval(() => this.load(), 60000);
     },
 
     destroy() {
       clearInterval(this.refreshInterval);
+      if (this.tabEffect) Alpine.release(this.tabEffect);
       this._loadGeneration++;
     },
 
@@ -4547,7 +4637,8 @@ document.addEventListener('alpine:init', () => {
     detailId: '',
     _alive: false,
 
-    routeIdentity() { const r = Alpine.store('router'); return r.page === 'cleanup-detail' ? (r.params.server || '') : ''; },
+    // A server's report renders in the Cleanup tab of its server page.
+    routeIdentity() { const r = Alpine.store('router'); return r.page === 'server-detail' && r.params.tab === 'cleanup' ? (r.params.name || '') : ''; },
 
     async init() {
       this._alive = true;
@@ -4609,7 +4700,7 @@ document.addEventListener('alpine:init', () => {
       await this.load();
     },
 
-    openServer(server) { Alpine.store('router').navigate('cleanup-detail', { server }); },
+    openServer(server) { Alpine.store('router').navigate('server-detail', { name: server, tab: 'cleanup' }); },
 
     async runAudit(server) {
       this.auditBusy = server;

From 23978bc3923137ca46e4a33d875a61d710c481df Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 16:58:34 -0700
Subject: [PATCH 05/11] dash: Home becomes the status page

Home now opens on three status sections, each loading on its own from
the endpoints the other pages already read, with the shortcut grid kept
below (add, edit, drag unchanged):

- Needs attention: open incidents, unreachable servers, failing domains
  and certificate warnings, failing or uncovered backups, the "Protect my
  data" state (formerly a banner), and operations that failed in the last
  day. Each row links to its page. A source that failed to load is named
  with a Retry, so a failure never reads as "Nothing needs attention";
  that line carries the time of the oldest observation.
- Running now: operations in progress, linking to their live log.
- Servers: one row each with reachability, app count and disk.

Backend: /api/cleanup rows carry the root-disk line of each server's last
cached audit (path, available bytes, used percent; no attribution), so
Home and Servers show disk without opening every report. Test:
TestCleanupFleetRowCarriesDisk.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/backup_setup.test.mjs       |  30 ++--
 .../frontend-test/nav_rework.test.mjs         |  11 ++
 cmd/teploy-dash/frontend/css/style.css        |  28 ++++
 cmd/teploy-dash/frontend/index.html           | 118 ++++++++++++--
 cmd/teploy-dash/frontend/js/app.js            | 152 +++++++++++++++++-
 internal/server/cleanup.go                    |  12 ++
 internal/server/cleanup_test.go               |  32 ++++
 7 files changed, 355 insertions(+), 28 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/backup_setup.test.mjs b/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
index 7cf5382..95d3ea5 100644
--- a/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
+++ b/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
@@ -454,20 +454,26 @@ test('the hand-written-jobs list shows only when some are found', async () => {
 test('the home page says so until protected, and a failed read says nothing', async () => {
   const h = harness('/');
   let view = baseView();
-  h.respond(() => response(view));
-  const banner = h.components.protectBanner();
-  await banner.init();
-  assert.equal(banner.visible(), true);
+  const ok = (url) => url === '/api/backups' ? response(view) : response({});
+  h.respond(ok);
+  const home = h.components.homeStatus();
+  await home.init();
+  const protect = () => home.attention().find((r) => r.key === 'protect');
+  assert.ok(protect(), 'unprotected: the protect row shows');
   view = baseView({ state: 'protected' });
-  await banner.init();
-  assert.equal(banner.visible(), false);
+  await home.loadOne('backups');
+  assert.equal(protect(), undefined);
   view = baseView({ supported: false });
-  await banner.init();
-  assert.equal(banner.visible(), false);
-  h.respond(() => response({}, { status: 500 }));
-  await banner.init();
-  assert.equal(banner.visible(), false);
-  assert.ok(h.readHTML().includes('x-data="protectBanner"'));
+  await home.loadOne('backups');
+  assert.equal(protect(), undefined);
+  // A failed first read shows no protect row, and names backups as unchecked.
+  const fresh = h.components.homeStatus();
+  h.respond((url) => url === '/api/backups' ? response({}, { status: 500 }) : response({}));
+  await fresh.init();
+  assert.equal(fresh.attention().find((r) => r.key === 'protect'), undefined);
+  assert.ok(fresh.unchecked().some((s) => s.key === 'backups'), 'a failed backups read is named as unchecked');
+  home.destroy(); fresh.destroy();
+  assert.ok(h.readHTML().includes('x-data="homeStatus"'));
 });
 
 test('no emoji in the page, and the layout holds at phone width', () => {
diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index 323737a..23341ed 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -63,5 +63,16 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   assert(html.includes('<h1 class="page-title">Uptime</h1>'), 'monitors page title matches its tab');
 }
 
+// Home is the status page: needs attention, running now, servers, then the
+// shortcut grid; the protect banner is a row of the status, not a banner.
+{
+  const home = html.slice(html.indexOf("x-data=\"homepagePage\""), html.indexOf('Projects Page'));
+  for (const id of ['home-attention-title', 'home-running-title', 'home-servers-title']) assert(home.includes(`id="${id}"`), `home section ${id}`);
+  assert(home.includes('x-data="homeStatus"') && home.includes('>Shortcuts</h2>'), 'home keeps the shortcut grid below the status');
+  assert(home.indexOf('homeStatus') < home.indexOf('>Shortcuts</h2>'), 'status comes before shortcuts');
+  assert(!html.includes('x-data="protectBanner"'), 'the protect banner is a status row now');
+  assert(home.includes('unchecked()') && home.includes('Nothing needs attention'), 'a failed source is named, never read as nothing wrong');
+}
+
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 9705502..204c4e9 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -209,6 +209,34 @@ tbody tr:hover { background: var(--bg-card-hover); }
 .status-dot.stopped, .status-dot.offline, .dot.red, .ws-indicator.disconnected { background: var(--red); }
 .status-dot.unknown, .dot.yellow { background: var(--yellow); }
 .dot.gray { background: var(--text-muted); }
+.dot.blue { background: var(--accent); }
+.dot.pulse { animation: dot-pulse 1.4s ease-in-out infinite; }
+@keyframes dot-pulse { 50% { opacity: .35; } }
+.text-warn { color: var(--yellow); }
+
+/* Home status: rows that link to the page that owns them. */
+.home-status { display: flex; margin-bottom: 28px; flex-direction: column; gap: 22px; }
+.home-section-head { display: flex; margin-bottom: 8px; align-items: baseline; justify-content: space-between; gap: 12px; }
+.home-shortcuts-head { margin-bottom: 12px; align-items: center; }
+.home-asof, .home-more { font-size: 12px; }
+.home-more { color: var(--text-muted); text-decoration: none; }
+.home-more:hover { color: var(--accent); }
+.status-list { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
+.status-row { display: flex; min-height: 44px; padding: 9px 14px; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
+.status-row + .status-row { border-top: 1px solid var(--border); }
+a.status-row:hover { background: var(--bg-card-hover); }
+.status-row-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
+.status-row-title { font-size: 13px; overflow-wrap: anywhere; }
+.status-row-detail { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
+.status-row-meta { flex-shrink: 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
+.status-row-action { flex-shrink: 0; color: var(--accent); font-size: 12px; white-space: nowrap; }
+.status-row-facts { display: flex; flex-shrink: 0; gap: 14px; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } }
+@media (max-width: 640px) {
+  .status-row { flex-wrap: wrap; row-gap: 4px; }
+  .status-row-main { flex-basis: calc(100% - 20px); }
+  .status-row-meta, .status-row-action, .status-row-facts { margin-left: 19px; }
+}
 .monitor-list { display: flex; flex-direction: column; gap: 8px; }
 .monitor-card { display: block; color: inherit; text-decoration: none; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); cursor: pointer; }
 .monitor-card:hover { border-color: var(--text-muted); }
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index c9bd9ed..30feab6 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -143,7 +143,114 @@
   <template x-if="$store.router.page === 'homepage'">
     <div x-data="homepagePage">
       <div class="page-header">
-        <h1 class="page-title">Home</h1>
+        <div>
+          <h1 class="page-title">Home</h1>
+          <p class="subtitle">What needs you, what is running, and your servers.</p>
+        </div>
+      </div>
+
+      <!-- Status: each part loads on its own; an unchecked source is named,
+           never read as "nothing wrong". -->
+      <div x-data="homeStatus" class="home-status">
+        <template x-for="src in stale()" :key="src.key">
+          <div role="status" class="stale-banner" x-text="'Showing ' + src.label + ' from ' + formatObservedAt(src.loadedAt) + ' — refresh failed: ' + src.error"></div>
+        </template>
+
+        <section class="home-section" aria-labelledby="home-attention-title">
+          <div class="home-section-head">
+            <h2 id="home-attention-title" class="section-title">Needs attention</h2>
+            <span class="text-muted home-asof" x-show="oldestObservation()" :title="'Oldest observation: ' + formatObservedAt(oldestObservation())" x-text="'checked ' + relTime(oldestObservation())"></span>
+          </div>
+          <div class="status-list">
+            <template x-for="item in attention()" :key="item.key">
+              <a class="status-row" :href="item.href" @click="go(item.href, $event)">
+                <span class="dot" :class="item.level === 'bad' ? 'red' : 'yellow'"></span>
+                <span class="status-row-main">
+                  <span class="status-row-title" x-text="item.title"></span>
+                  <span class="status-row-detail" x-show="item.detail" x-text="item.detail"></span>
+                </span>
+                <span class="status-row-meta" x-show="item.at" :title="formatObservedAt(item.at)" x-text="(item.verb ? item.verb + ' ' : '') + relTime(item.at)"></span>
+                <span class="status-row-action" x-show="item.action" x-text="item.action"></span>
+              </a>
+            </template>
+            <template x-for="src in unchecked()" :key="'unchecked:' + src.key">
+              <div class="status-row status-row-static" role="alert">
+                <span class="dot gray"></span>
+                <span class="status-row-main">
+                  <span class="status-row-title" x-text="'Could not check ' + src.label"></span>
+                  <span class="status-row-detail" x-text="src.error"></span>
+                </span>
+                <button class="btn btn-sm" @click="loadOne(src.key)">Retry</button>
+              </div>
+            </template>
+            <template x-if="attention().length === 0 && unchecked().length === 0">
+              <div class="status-row status-row-static status-row-ok">
+                <span class="dot" :class="anyLoading() ? 'gray' : 'green'"></span>
+                <span class="status-row-main">
+                  <span class="status-row-title" x-text="anyLoading() ? 'Checking…' : 'Nothing needs attention'"></span>
+                  <span class="status-row-detail" x-show="!anyLoading() && oldestObservation()" :title="formatObservedAt(oldestObservation())" x-text="'As of ' + relTime(oldestObservation()) + ' (the oldest observation)'"></span>
+                </span>
+              </div>
+            </template>
+          </div>
+        </section>
+
+        <section class="home-section" aria-labelledby="home-running-title">
+          <div class="home-section-head">
+            <h2 id="home-running-title" class="section-title">Running now</h2>
+            <a href="/operations" class="home-more" @click="go('/operations', $event)">Activity</a>
+          </div>
+          <div class="status-list">
+            <template x-for="op in running()" :key="op.id">
+              <a class="status-row" :href="'/operations/' + encodeURIComponent(op.id)" @click="go('/operations/' + encodeURIComponent(op.id), $event)">
+                <span class="dot blue pulse"></span>
+                <span class="status-row-main">
+                  <span class="status-row-title" x-text="((op.request && op.request.kind) || 'operation') + ' ' + (op.target || '')"></span>
+                  <span class="status-row-detail" x-text="op.status.replace('_', ' ') + ' — open the live log'"></span>
+                </span>
+                <span class="status-row-meta" :title="formatObservedAt(op.started_at || op.created_at)" x-text="'started ' + relTime(op.started_at || op.created_at)"></span>
+              </a>
+            </template>
+            <template x-if="running().length === 0">
+              <div class="status-row status-row-static">
+                <span class="status-row-main"><span class="status-row-detail" x-text="sources.operations.loading ? 'Checking…' : (sources.operations.error && !sources.operations.data ? 'Operations could not be read.' : 'Nothing running.')"></span></span>
+              </div>
+            </template>
+          </div>
+        </section>
+
+        <section class="home-section" aria-labelledby="home-servers-title">
+          <div class="home-section-head">
+            <h2 id="home-servers-title" class="section-title">Servers</h2>
+            <a href="/servers" class="home-more" @click="go('/servers', $event)">All servers</a>
+          </div>
+          <div class="status-list">
+            <template x-for="sv in servers()" :key="sv.name">
+              <a class="status-row" :href="'/servers/' + encodeURIComponent(sv.name)" @click="go('/servers/' + encodeURIComponent(sv.name), $event)">
+                <span class="dot" :class="sv.error ? 'red' : (sv.freshness === 'fresh' ? 'green' : 'gray')"></span>
+                <span class="status-row-main">
+                  <span class="status-row-title" x-text="sv.name"></span>
+                  <span class="status-row-detail" x-text="sv.error ? 'unreachable' : (sv.freshness === 'fresh' ? 'reachable' : 'not read recently')"></span>
+                </span>
+                <span class="status-row-facts">
+                  <span x-text="sv.apps + ' app' + (sv.apps === 1 ? '' : 's')"></span>
+                  <span x-show="sv.audit && sv.audit.disk" :class="{ 'text-warn': sv.audit && sv.audit.disk && sv.audit.disk.used_percent >= 85 }" x-text="sv.audit && sv.audit.disk ? 'disk ' + sv.audit.disk.used_percent + '%' : ''"></span>
+                  <span x-show="!(sv.audit && sv.audit.disk)" class="text-muted" title="Disk use comes from the server's last cleanup audit">disk —</span>
+                </span>
+              </a>
+            </template>
+            <template x-if="servers().length === 0">
+              <div class="status-row status-row-static">
+                <span class="status-row-main"><span class="status-row-detail" x-text="sources.fleet.loading ? 'Checking…' : (sources.fleet.error && !sources.fleet.data ? 'Servers could not be read.' : 'No servers yet — add one in Settings.')"></span></span>
+              </div>
+            </template>
+          </div>
+        </section>
+      </div>
+
+      <!-- Shortcuts: the link grid (add, edit, drag to reorder). -->
+      <div class="home-section-head home-shortcuts-head">
+        <h2 class="section-title">Shortcuts</h2>
         <div style="display:flex;gap:8px;align-items:center;">
           <template x-if="editing">
             <button class="btn btn-primary btn-sm" @click="openAdd()">+ Add</button>
@@ -153,15 +260,6 @@ <h1 class="page-title">Home</h1>
         </div>
       </div>
 
-      <div x-data="protectBanner">
-        <template x-if="visible()">
-          <div class="stale-banner" role="status">
-            <strong x-text="setup.headline"></strong>
-            <a href="/backups" @click.prevent="$store.router.navigate('backups')" x-text="setup.state === 'none' ? 'Protect my data' : 'See backups'"></a>
-          </div>
-        </template>
-      </div>
-
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
       </template>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index a91418f..1da624f 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -261,6 +261,26 @@ function formatObservedAt(iso) {
   return isNaN(date.getTime()) ? String(iso) : date.toLocaleString();
 }
 
+// arr: a list from a response field, or empty when the field is missing or
+// not a list (a mis-shaped response must not break the page that reads it).
+function arr(v) { return Array.isArray(v) ? v : []; }
+
+// relTime renders a timestamp as relative time ("5 min ago", "in 3 h");
+// pair it with formatObservedAt in a title attribute for the exact time.
+function relTime(iso) {
+  const t = Date.parse(iso);
+  if (!iso || isNaN(t) || String(iso).startsWith('0001')) return '';
+  const diff = Math.round((Date.now() - t) / 1000);
+  const abs = Math.abs(diff);
+  let text;
+  if (abs < 45) text = 'just now';
+  else if (abs < 3600) text = Math.round(abs / 60) + ' min';
+  else if (abs < 86400) text = Math.round(abs / 3600) + ' h';
+  else text = Math.round(abs / 86400) + ' day' + (Math.round(abs / 86400) === 1 ? '' : 's');
+  if (text === 'just now') return text;
+  return diff >= 0 ? text + ' ago' : 'in ' + text;
+}
+
 // ── Accessibility helpers ──
 // trapDialogFocus keeps Tab/Shift+Tab inside an open dialog (A49/A58).
 // Attach with @keydown.tab on the dialog overlay; focus is kept within the
@@ -4595,15 +4615,135 @@ document.addEventListener('alpine:init', () => {
 
   // The home page's one line about backups. Viewers see it too; the page it links to
   // says what they can do. A failed read shows nothing rather than a false alarm.
-  Alpine.data('protectBanner', () => ({
-    setup: null,
+  // ── Home status (2026-11 rework) ──
+  // What needs attention, what is running, and each server — built only from
+  // the endpoints the other pages already read. Each source loads on its own
+  // and keeps the loading / error / stale conventions: a source that failed
+  // to load is named as unchecked, so a failure never reads as "nothing
+  // wrong", and a failed refresh keeps the earlier data under a stale line.
+  Alpine.data('homeStatus', () => ({
+    sources: {
+      incidents: { url: '/api/alerts/incidents', label: 'alerts', data: null, error: '', loading: true, loadedAt: null },
+      domains: { url: '/api/domains', label: 'domains', data: null, error: '', loading: true, loadedAt: null },
+      backups: { url: '/api/backups', label: 'backups', data: null, error: '', loading: true, loadedAt: null },
+      operations: { url: '/api/operations', label: 'operations', data: null, error: '', loading: true, loadedAt: null },
+      fleet: { url: '/api/fleet', label: 'servers', data: null, error: '', loading: true, loadedAt: null },
+      cleanup: { url: '/api/cleanup', label: 'cleanup reports', data: null, error: '', loading: true, loadedAt: null },
+    },
+    refreshTimer: null,
+    _alive: false,
+
     async init() {
+      this._alive = true;
+      this.refreshTimer = setInterval(() => { if (this._alive) this.loadAll(); }, 60000);
+      await this.loadAll();
+    },
+    destroy() { this._alive = false; clearInterval(this.refreshTimer); },
+    loadAll() { return Promise.all(Object.keys(this.sources).map((k) => this.loadOne(k))); },
+    async loadOne(key) {
+      const src = this.sources[key];
+      if (!src.data) src.loading = true;
       try {
-        const view = await api.get('/api/backups');
-        this.setup = (view && view.setup) || null;
-      } catch (e) { this.setup = null; }
+        const data = await api.get(src.url);
+        if (!this._alive) return;
+        src.data = data; src.error = ''; src.loadedAt = new Date().toISOString();
+      } catch (e) {
+        if (this._alive) src.error = e.message || String(e);
+      } finally {
+        if (this._alive) src.loading = false;
+      }
+    },
+
+    anyLoading() { return Object.values(this.sources).some((s) => s.loading); },
+    // Sources with no data at all because their load failed: unchecked.
+    unchecked() { return Object.entries(this.sources).filter(([, s]) => !s.loading && s.error && !s.data).map(([key, s]) => ({ key, ...s })); },
+    // Sources showing earlier data because the refresh failed.
+    stale() { return Object.entries(this.sources).filter(([, s]) => s.error && s.data).map(([key, s]) => ({ key, ...s })); },
+
+    // The oldest observation behind what is shown: the server sweep, the
+    // domain sweep, the backup read; live sources count as read when loaded.
+    oldestObservation() {
+      const times = [];
+      const f = this.sources.fleet.data, d = this.sources.domains.data, b = this.sources.backups.data;
+      if (f && f.collected_at && !String(f.collected_at).startsWith('0001')) times.push(f.collected_at);
+      if (d && d.last_sweep_at) times.push(d.last_sweep_at);
+      if (b && b.last_sweep_at) times.push(b.last_sweep_at);
+      for (const k of ['incidents', 'operations']) if (this.sources[k].loadedAt) times.push(this.sources[k].loadedAt);
+      const valid = times.map((t) => Date.parse(t)).filter((t) => !isNaN(t));
+      return valid.length ? new Date(Math.min(...valid)).toISOString() : '';
+    },
+
+    attention() {
+      const rows = [];
+      const inc = this.sources.incidents.data;
+      for (const i of arr(inc && inc.open)) {
+        rows.push({ key: 'inc:' + (i.key || i.id || i.name), level: i.severity === 'critical' ? 'bad' : 'warn',
+          title: i.name + (i.source === 'monitor' || i.source === 'heartbeat' || !i.source ? ' is down' : ''),
+          detail: i.message || 'open incident', at: i.started_at, verb: 'since',
+          href: i.path || '/alerts' });
+      }
+      const fleet = this.sources.fleet.data;
+      for (const sv of arr(fleet && fleet.servers)) {
+        if (!sv.error) continue;
+        rows.push({ key: 'srv:' + sv.server, level: 'bad', title: sv.server + ' is unreachable', detail: sv.error,
+          at: sv.last_success_at && !String(sv.last_success_at).startsWith('0001') ? sv.last_success_at : '', verb: 'last read',
+          href: '/servers/' + encodeURIComponent(sv.server) });
+      }
+      const dom = this.sources.domains.data;
+      for (const r of arr(dom && dom.rows)) {
+        const certWarn = r.cert && (r.cert.state === 'warn' || r.cert.state === 'fail');
+        if (r.overall !== 'fail' && !certWarn) continue;
+        rows.push({ key: 'dom:' + r.host, level: r.overall === 'fail' ? 'bad' : 'warn',
+          title: r.host + (r.overall === 'fail' ? ' is failing' + (r.first_failing ? ' at ' + r.first_failing.toUpperCase() : '') : ': certificate needs attention'),
+          detail: r.evidence || (r.cert && r.cert.detail) || '', at: '', href: '/domains' });
+      }
+      const bk = this.sources.backups.data;
+      const setup = bk && bk.setup;
+      if (setup && setup.supported && setup.state !== 'protected') {
+        rows.push({ key: 'protect', level: setup.state === 'none' ? 'warn' : 'bad', title: setup.headline || 'Your data is not fully protected',
+          detail: '', at: '', href: '/backups', action: setup.state === 'none' ? 'Protect my data' : 'See backups' });
+      }
+      for (const r of arr(bk && bk.rows)) {
+        if (r.state !== 'failing' && r.state !== 'uncovered') continue;
+        rows.push({ key: 'bk:' + r.server + '/' + r.name, level: r.state === 'failing' ? 'bad' : 'warn',
+          title: r.name + (r.state === 'failing' ? ' backup is failing' : ' is not backed up'),
+          detail: r.last_error || (r.app ? r.app + ' on ' + r.server : r.server), at: r.state === 'failing' ? r.last_good : '', verb: 'last good',
+          href: '/backups' });
+      }
+      const ops = this.sources.operations.data;
+      const dayAgo = Date.now() - 86400 * 1000;
+      for (const op of arr(ops)) {
+        if (op.status !== 'failed' && op.status !== 'interrupted') continue;
+        const at = Date.parse(op.finished_at || op.created_at);
+        if (isNaN(at) || at < dayAgo) continue;
+        rows.push({ key: 'op:' + op.id, level: 'bad', title: ((op.request && op.request.kind) || 'operation') + ' ' + (op.target || '') + ' ' + op.status,
+          detail: op.error || '', at: op.finished_at || op.created_at, verb: '', href: '/operations/' + encodeURIComponent(op.id) });
+      }
+      return rows;
+    },
+
+    running() {
+      const live = ['queued', 'running', 'cancel_requested', 'stopping'];
+      return arr(this.sources.operations.data).filter((op) => live.includes(op.status));
+    },
+
+    servers() {
+      const fleet = this.sources.fleet.data;
+      const cleanup = this.sources.cleanup.data;
+      const audits = {};
+      for (const row of arr(cleanup && cleanup.servers)) audits[row.server] = row;
+      return arr(fleet && fleet.servers).map((sv) => ({
+        name: sv.server, host: sv.host, error: sv.error || '', freshness: sv.freshness,
+        apps: arr(sv.apps).length, audit: audits[sv.server] || null,
+      }));
+    },
+
+    go(href, e) {
+      if (e && (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1)) return;
+      if (e) e.preventDefault();
+      history.pushState({}, '', href);
+      Alpine.store('router').restore();
     },
-    visible() { return !!(this.setup && this.setup.supported && this.setup.state !== 'protected'); },
   }));
 
   // ── Cleanup Page (Slice 6) ──
diff --git a/internal/server/cleanup.go b/internal/server/cleanup.go
index 9412dde..00ce9ad 100644
--- a/internal/server/cleanup.go
+++ b/internal/server/cleanup.go
@@ -469,9 +469,18 @@ type cleanupFleetRow struct {
 	Error         string                `json:"error,omitempty"`
 	ChecksUnknown int                   `json:"checks_unknown"`
 	Counts        cleanupCounts         `json:"counts"`
+	Disk          *cleanupDiskView      `json:"disk,omitempty"`
 	LiveAudit     *cleanupLiveAuditView `json:"live_audit,omitempty"`
 }
 
+// cleanupDiskView is the root-disk line of a server's last audit, so the
+// Home and Servers pages can show disk use without opening each report.
+type cleanupDiskView struct {
+	Path           string `json:"path"`
+	AvailableBytes uint64 `json:"available_bytes"`
+	UsedPercent    int    `json:"used_percent"`
+}
+
 // cleanupStaleAfter: a report older than this reads stale, not current. The
 // audit is operator-triggered (no background sweep), so there is no cadence
 // to derive this from; a week matches how long a leftover is plausible.
@@ -558,6 +567,9 @@ func (s *Server) cleanupFleetView(ctx context.Context, now time.Time) map[string
 				}
 				row.ChecksUnknown = countUnknownChecks(env)
 				row.Counts, _ = cleanupFleetCounts(env, c.snap.Dismissals[name])
+				if d := env.Disk; d != nil {
+					row.Disk = &cleanupDiskView{Path: d.Path, AvailableBytes: d.AvailableBytes, UsedPercent: d.UsedPercent}
+				}
 			}
 		}
 		rows = append(rows, row)
diff --git a/internal/server/cleanup_test.go b/internal/server/cleanup_test.go
index b1cdb92..436d7e0 100644
--- a/internal/server/cleanup_test.go
+++ b/internal/server/cleanup_test.go
@@ -230,6 +230,38 @@ func TestCleanupAuditRunHarvestsEnvelope(t *testing.T) {
 	}
 }
 
+// The fleet view carries each server's audited root-disk line (no
+// attribution), and leaves it out when the audit read no disk.
+func TestCleanupFleetRowCarriesDisk(t *testing.T) {
+	env := strings.Replace(auditEnvelopeJSON("ok", findingStaleRoute), `"disk": null`,
+		`"disk": {"path": "/", "available_bytes": 21000000000, "used_percent": 74, "attribution": [{"name": "docker images", "size_bytes": 31000000000}]}`, 1)
+	cs := newCleanupServer(t, env)
+	if op := runAudit(t, cs, "prod"); op.Status != operation.StatusSucceeded {
+		t.Fatalf("audit operation = %s (%s)", op.Status, op.Error)
+	}
+	waitCleanupRecord(t, cs, func(rec *cleanupServerRecord) bool { return rec.Envelope != nil })
+	_, fleet := call(t, cs.Server.handleCleanup, "GET", "/api/cleanup", "")
+	row := fleet["data"].(map[string]any)["servers"].([]any)[0].(map[string]any)
+	disk, ok := row["disk"].(map[string]any)
+	if !ok {
+		t.Fatalf("row has no disk: %v", row)
+	}
+	if disk["path"] != "/" || disk["used_percent"] != float64(74) || disk["available_bytes"] != float64(21000000000) {
+		t.Fatalf("disk = %v", disk)
+	}
+	if _, leaked := disk["attribution"]; leaked {
+		t.Fatalf("the fleet row must not carry the attribution: %v", disk)
+	}
+
+	bare := newCleanupServer(t, auditEnvelopeJSON("ok", findingStaleRoute))
+	runAudit(t, bare, "prod")
+	waitCleanupRecord(t, bare, func(rec *cleanupServerRecord) bool { return rec.Envelope != nil })
+	_, fleet = call(t, bare.Server.handleCleanup, "GET", "/api/cleanup", "")
+	if _, has := fleet["data"].(map[string]any)["servers"].([]any)[0].(map[string]any)["disk"]; has {
+		t.Fatal("an audit without a disk reading must not invent one")
+	}
+}
+
 // A failed re-audit keeps the last report and names the failure — a broken
 // SSH path never clears the page.
 func TestCleanupAuditFailureKeepsLastReport(t *testing.T) {

From 7711689bc2c9371fefd4c47d3dd88388f6cbc626 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 17:14:11 -0700
Subject: [PATCH 06/11] dash: one confirm dialog for every confirmation and
 question

Every browser confirm() (31) and prompt() (7) is replaced by one dialog
component, modelled on the Cleanup fix dialog (focus trapped, Escape and
the backdrop cancel, focus returns): askConfirm() for confirmations and
askForm() for questions that need an answer, with labelled fields. A
typed name gates removing an app, removing a server and resetting a git
watermark; the Cleanup destructive fix and backup restore keep their
existing typed-name dialogs. The confirm button is named by the action
(Remove, Delete, Roll back, ...) and is red for destructive ones.

- Remove app moves from beside Restart to a Danger section at the bottom
  of the app General tab; its confirm and the redirect question are one
  dialog.
- New project, new group, rename, and reset password ask in a dialog with
  form fields instead of prompt().
- The unlabelled 14px "x" on project and app cards becomes a named
  actions menu ("Actions for <name>") holding the same action; the
  shortcut remove button is named too.

Tests answer the dialog through frontend-test/dialog_bridge.mjs, which
routes it to their existing confirm/prompt stubs.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/backup_setup.test.mjs       |   4 +-
 .../frontend-test/config_home.test.mjs        |   2 +
 .../frontend-test/db_actions.test.mjs         |   5 +-
 .../frontend-test/dialog_bridge.mjs           |  29 +++
 .../frontend-test/git_source_card.test.mjs    |   8 +-
 .../frontend-test/group_identity.test.mjs     |   2 +-
 .../frontend-test/identity_harness.mjs        |   2 +
 .../frontend-test/nav_rework.test.mjs         |  40 ++++
 cmd/teploy-dash/frontend/css/style.css        |   8 +
 cmd/teploy-dash/frontend/index.html           |  85 +++++++--
 cmd/teploy-dash/frontend/js/app.js            | 177 +++++++++++++-----
 11 files changed, 300 insertions(+), 62 deletions(-)
 create mode 100644 cmd/teploy-dash/frontend-test/dialog_bridge.mjs

diff --git a/cmd/teploy-dash/frontend-test/backup_setup.test.mjs b/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
index 95d3ea5..504cd7f 100644
--- a/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
+++ b/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
@@ -206,11 +206,11 @@ test('closing with an unsaved key warns that its file is no use', async () => {
   p.recoveryGen = { publicKey: 'age1x', fileText: 'x', fileName: 'y' };
   const seen = [];
   globalThis.confirm = text => { seen.push(text); return false; };
-  p.closeSetup();
+  await p.closeSetup();
   assert.equal(p.setupOpen, true);
   assert.match(seen[0], /delete it/);
   globalThis.confirm = () => true;
-  p.closeSetup();
+  await p.closeSetup();
   assert.equal(p.setupOpen, false);
   assert.equal(p.recoveryGen, null);
   delete globalThis.confirm;
diff --git a/cmd/teploy-dash/frontend-test/config_home.test.mjs b/cmd/teploy-dash/frontend-test/config_home.test.mjs
index e6784c0..7eee176 100644
--- a/cmd/teploy-dash/frontend-test/config_home.test.mjs
+++ b/cmd/teploy-dash/frontend-test/config_home.test.mjs
@@ -6,6 +6,7 @@
 // gated on the CLI capability that provides it.
 //
 // Run: node cmd/teploy-dash/frontend-test/config_home.test.mjs
+import { bridgeDialogs } from './dialog_bridge.mjs';
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
@@ -61,6 +62,7 @@ globalThis.fetch = async (url, init = {}) => {
 
 new Function(readFileSync(join(here, '../frontend/js/app.js'), 'utf8'))();
 alpineInitListeners.forEach((fn) => fn());
+bridgeDialogs(stores);
 // app.js registers its own router store; record navigations on it.
 stores.router.params = { server: 'prod', name: 'web' };
 stores.router.navigate = (page, params) => navigations.push([page, params]);
diff --git a/cmd/teploy-dash/frontend-test/db_actions.test.mjs b/cmd/teploy-dash/frontend-test/db_actions.test.mjs
index 96a69c0..3393b16 100644
--- a/cmd/teploy-dash/frontend-test/db_actions.test.mjs
+++ b/cmd/teploy-dash/frontend-test/db_actions.test.mjs
@@ -8,6 +8,7 @@
 // API responses.
 //
 // Run: node cmd/teploy-dash/frontend-test/db_actions.test.mjs
+import { bridgeDialogs } from './dialog_bridge.mjs';
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
@@ -55,9 +56,11 @@ globalThis.fetch = async (url, init) => {
 };
 
 const components = {};
+const dialogStore = {};
+bridgeDialogs({ dialog: dialogStore });
 globalThis.Alpine = {
   data: (name, factory) => { components[name] = factory; },
-  store: () => ({ navigate() {}, restore() {}, params: { server: 'prod', name: 'web' }, page: 'app-detail' }),
+  store: (name) => name === 'dialog' ? dialogStore : ({ navigate() {}, restore() {}, params: { server: 'prod', name: 'web' }, page: 'app-detail' }),
   effect: (fn) => fn(),
 };
 
diff --git a/cmd/teploy-dash/frontend-test/dialog_bridge.mjs b/cmd/teploy-dash/frontend-test/dialog_bridge.mjs
new file mode 100644
index 0000000..5688c08
--- /dev/null
+++ b/cmd/teploy-dash/frontend-test/dialog_bridge.mjs
@@ -0,0 +1,29 @@
+// Test double for the confirm dialog store: routes askConfirm/askForm to the
+// test's globalThis.confirm / globalThis.prompt stubs, read at call time, so
+// a test answers the dialog the way it used to answer the browser one.
+// confirm gets "title\n\nmessage"; a typed-name dialog passes when prompt
+// returns the name; a form's first field takes prompt's answer.
+export function bridgeDialogs(stores) {
+  const dialog = stores.dialog;
+  if (!dialog) return;
+  dialog.opened = [];
+  dialog.open = (o) => {
+    dialog.opened.push(o);
+    const text = o.title + (o.message ? '\n\n' + o.message : '');
+    const fields = o.fields || [];
+    if (o.typed && typeof globalThis.prompt === 'function' && !fields.length) {
+      const typed = globalThis.prompt(text, '');
+      return Promise.resolve(o.kind === 'form' ? (typed === o.typed ? {} : null) : typed === o.typed);
+    }
+    if (o.kind === 'form' && typeof globalThis.prompt === 'function' && fields.length) {
+      const value = globalThis.prompt(text, fields[0].value ?? '');
+      if (value === null || value === undefined) return Promise.resolve(null);
+      const values = Object.fromEntries(fields.map((f) => [f.key, f.value ?? '']));
+      values[fields[0].key] = value;
+      return Promise.resolve(values);
+    }
+    const ok = typeof globalThis.confirm === 'function' ? !!globalThis.confirm(text) : true;
+    if (o.kind === 'form') return Promise.resolve(ok ? Object.fromEntries(fields.map((f) => [f.key, f.value ?? ''])) : null);
+    return Promise.resolve(ok);
+  };
+}
diff --git a/cmd/teploy-dash/frontend-test/git_source_card.test.mjs b/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
index 05f2d26..9f00c84 100644
--- a/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
+++ b/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
@@ -8,6 +8,7 @@
 // responses.
 //
 // Run: node cmd/teploy-dash/frontend-test/git_source_card.test.mjs
+import { bridgeDialogs } from './dialog_bridge.mjs';
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
@@ -58,9 +59,11 @@ globalThis.fetch = async (url, init) => {
 };
 
 const components = {};
+const dialogStore = {};
+bridgeDialogs({ dialog: dialogStore });
 globalThis.Alpine = {
   data: (name, factory) => { components[name] = factory; },
-  store: () => ({ navigate() {}, restore() {}, params: { server: 'prod', name: 'web' }, page: 'app-detail' }),
+  store: (name) => name === 'dialog' ? dialogStore : ({ navigate() {}, restore() {}, params: { server: 'prod', name: 'web' }, page: 'app-detail' }),
   effect: (fn) => fn(),
 };
 
@@ -201,7 +204,8 @@ function requestsFor(method, urlPart) {
   promptAnswer = 'main';
   await page.gitResetWatermark();
   assert(requestsFor('POST', '/apps/prod/web/source/reset-watermark').length === 0, 'a mistyped ref must not reset');
-  assert(lastToast && lastToast.includes('Type the ref'), `mistyped toast = ${lastToast}`);
+  const typedGate = dialogStore.opened.at(-1);
+  assert(typedGate && typedGate.typed === 'refs/heads/main' && typedGate.danger, 'the reset dialog is gated on typing the ref');
 
   promptAnswer = 'refs/heads/main';
   await page.gitResetWatermark();
diff --git a/cmd/teploy-dash/frontend-test/group_identity.test.mjs b/cmd/teploy-dash/frontend-test/group_identity.test.mjs
index 3de0276..f73caeb 100644
--- a/cmd/teploy-dash/frontend-test/group_identity.test.mjs
+++ b/cmd/teploy-dash/frontend-test/group_identity.test.mjs
@@ -73,7 +73,7 @@ test('D06: scoped deletion sends exact identity and legacy deletion cannot touch
   page.groups = [{ name: 'Mixed', apps: ['web'], server_apps: [{ server_id: prodID, app: 'web' }, {server_id: stageID, app: 'web'}] }];
   page.load = async () => {};
   h.respond(() => response({ status: 'unassigned' }));
-  const binding = h.readHTML().match(/@click.stop="(unassignFromGroup\([^"]+)"/)[1];
+  const binding = h.readHTML().match(/@click="open = false; (unassignFromGroup\([^"]+)"/)[1];
   const remove = app => new Function('page', 'group', 'app', `return page.${binding}`)(page, page.groups[0], app);
   await remove({ name: 'web', server: 'prod', server_id: prodID });
   assert.equal(h.requests.at(-1).url, `/api/groups/Mixed/apps/web?server_id=${prodID}`);
diff --git a/cmd/teploy-dash/frontend-test/identity_harness.mjs b/cmd/teploy-dash/frontend-test/identity_harness.mjs
index d7046ef..ba5bddd 100644
--- a/cmd/teploy-dash/frontend-test/identity_harness.mjs
+++ b/cmd/teploy-dash/frontend-test/identity_harness.mjs
@@ -4,6 +4,7 @@
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, join } from 'node:path';
+import { bridgeDialogs } from './dialog_bridge.mjs';
 
 export function harness(pathname = '/operations/A') {
   const root = process.env.DASH_FRONTEND_ROOT || join(dirname(fileURLToPath(import.meta.url)), '../frontend');
@@ -41,6 +42,7 @@ export function harness(pathname = '/operations/A') {
   };
   new Function(readFileSync(join(root, 'js/app.js'), 'utf8') + '\n;' + readFileSync(join(root, 'js/operations.js'), 'utf8'))();
   init.forEach(fn => fn());
+  bridgeDialogs(stores);
   return {
     components, stores, sources, requests, toasts, effects,
     readHTML: () => readFileSync(join(root, 'index.html'), 'utf8'),
diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index 23341ed..30ea7b9 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -74,5 +74,45 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   assert(home.includes('unchecked()') && home.includes('Nothing needs attention'), 'a failed source is named, never read as nothing wrong');
 }
 
+// One confirm dialog: no browser confirm() or prompt() is left.
+{
+  const strip = (src) => src.replace(/\/\/.*$/gm, '').replace(/<!--[\s\S]*?-->/g, '');
+  for (const [name, src] of [['js/app.js', js], ['index.html', html], ['js/operations.js', read('js/operations.js')]]) {
+    assert(!/(^|[^\w.$])confirm\(/.test(strip(src)), `${name} still calls confirm()`);
+    assert(!/(^|[^\w.$])prompt\(/.test(strip(src)), `${name} still calls prompt()`);
+  }
+  assert(html.includes('aria-labelledby="confirm-dialog-title"') && html.includes('$store.dialog.canSubmit()'), 'the shared dialog is rendered once');
+  const general = html.slice(html.indexOf('id="app-panel-general"'), html.indexOf('id="app-panel-env"'));
+  const buttons = general.slice(general.indexOf('class="btn-group"'), general.indexOf('</div>', general.indexOf('class="btn-group"')));
+  assert(!buttons.includes('removeApp()'), 'Remove is not beside Restart');
+  assert(general.includes('class="danger-zone"') && general.lastIndexOf('removeApp()') > general.indexOf('class="danger-zone"'), 'Remove sits in the Danger section');
+  for (const m of html.matchAll(/<button[^>]*>&times;<\/button>/g)) assert(m[0].includes(':aria-label='), 'every x button is named: ' + m[0].slice(0, 80));
+  assert((html.match(/:aria-label="'Actions for ' \+/g) || []).length === 3, 'card action menus are named');
+
+  const listeners = [];
+  globalThis.document = { addEventListener: (t, fn) => { if (t === 'alpine:init') listeners.push(fn); }, getElementById: () => null, documentElement: { setAttribute() {}, getAttribute: () => 'dark' } };
+  const stores = {};
+  globalThis.Alpine = { data() {}, store: (n, d) => { if (d !== undefined) stores[n] = d; return stores[n]; }, effect() {} };
+  new Function(js + '\n;globalThis.__q = questionDialog; globalThis.__ask = askConfirm; globalThis.__form = askForm;')();
+  listeners.forEach((fn) => fn());
+  const q = globalThis.__q('Remove secret K?\n\nContainers keep it.');
+  assert(q.title === 'Remove secret K?' && q.message === 'Containers keep it.' && q.danger && q.confirmLabel === 'Remove', 'a question splits into title, message and a verb label');
+  const d = stores.dialog;
+  const typed = globalThis.__ask({ title: 'Remove server x?', typed: 'x' });
+  assert(!d.canSubmit(), 'a typed-name dialog starts disabled');
+  d.typedValue = 'y'; assert(!d.canSubmit(), 'the wrong name keeps it disabled');
+  d.typedValue = 'x'; d.submit();
+  const form = globalThis.__form({ title: 'Rename', fields: [{ key: 'name', label: 'Name', value: 'a', required: true }] });
+  d.values.name = 'b'; d.submit();
+  const cancelled = globalThis.__ask('Delete it?');
+  d.cancel();
+  Promise.all([typed, form, cancelled]).then(([t, f, c]) => {
+    assert(t === true && f && f.name === 'b' && c === false, 'dialogs resolve confirm, form values and cancel');
+    finish();
+  });
+}
+
+function finish() {
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
+}
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 204c4e9..c11aaa8 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -292,6 +292,11 @@ a.status-row:hover { background: var(--bg-card-hover); }
 .dialog { width: 100%; max-width: 470px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
 .dialog h2 { margin-bottom: 18px; font-size: 16px; font-weight: 600; }
 .dialog-actions { display: flex; margin-top: 20px; justify-content: flex-end; gap: 8px; }
+.danger-zone { margin-top: 32px; }
+.danger-zone .section-title { margin-bottom: 8px; color: var(--red); }
+.danger-row { display: flex; padding: 14px 16px; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border: 1px solid var(--red); border-radius: var(--radius); background: var(--bg-card); }
+.danger-row .card-meta { max-width: 60ch; }
+.dialog-message { margin-bottom: 14px; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
 .toast-container { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
 .toast { min-width: 220px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 12px; }
 .toast.success { border-color: var(--green); color: var(--green); }
@@ -563,6 +568,9 @@ code { overflow-wrap: anywhere; }
 }
 .menu-item:hover, .menu-item:focus-visible { background: var(--bg-card-hover); }
 .menu-item.danger { color: var(--red); }
+.card-menu { position: absolute; top: 6px; right: 6px; }
+.card-menu-btn { width: 28px; height: 28px; color: var(--text-muted); }
+.card-menu .menu { min-width: 180px; }
 .menu-note { color: var(--text-muted); font-size: 11px; }
 
 .btn-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index 30feab6..e7747f7 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -318,7 +318,7 @@ <h2 class="section-title">Shortcuts</h2>
                    @click="editing ? openEdit(item) : window.open(item.url, '_blank', 'noopener')">
                 <!-- Remove × in top-right corner when editing -->
                 <template x-if="editing">
-                  <button class="homepage-card-remove" @click.stop="remove(item.id)" title="Remove">&times;</button>
+                  <button class="homepage-card-remove" @click.stop="remove(item.id)" :aria-label="'Remove shortcut ' + item.name" :title="'Remove shortcut ' + item.name">&times;</button>
                 </template>
                 <!-- Monochrome glyph, else favicon, else colored initials -->
                 <div class="homepage-card-icon-wrap">
@@ -514,9 +514,14 @@ <h2 class="section-title" x-text="group.name"></h2>
                       <span x-text="proj.name"></span>
                     </div>
                     <div class="card-meta" x-text="(proj.resolvedApps || []).length + ' app' + ((proj.resolvedApps || []).length !== 1 ? 's' : '')"></div>
-                    <button title="Delete project"
-                      @click.stop="deleteProject(group.name, proj.name)"
-                      style="position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: 14px; opacity: 0.6;">&times;</button>
+                    <div class="menu-wrap card-menu" x-data="{ open: false }" @click.stop @click.outside="open = false" @keydown.escape="open = false">
+                      <button class="icon-btn card-menu-btn" @click="open = !open" aria-haspopup="menu" :aria-expanded="open" :aria-label="'Actions for ' + proj.name" :title="'Actions for ' + proj.name">
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="8" cy="3" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="8" cy="13" r="1.4"/></svg>
+                      </button>
+                      <div class="menu" role="menu" x-show="open" x-cloak>
+                        <button class="menu-item danger" role="menuitem" @click="open = false; deleteProject(group.name, proj.name)">Delete project</button>
+                      </div>
+                    </div>
                   </div>
                 </template>
                 <!-- Direct app cards -->
@@ -528,9 +533,14 @@ <h2 class="section-title" x-text="group.name"></h2>
                     </div>
                     <div class="card-meta" x-text="app.server"></div>
                     <div class="card-hash" x-text="app.current_hash || app.status"></div>
-                    <button x-show="!group.system" title="Remove from group"
-                      @click.stop="unassignFromGroup(group.name, app)"
-                      style="position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: 14px; opacity: 0.6;">&times;</button>
+                    <div class="menu-wrap card-menu" x-show="!group.system" x-data="{ open: false }" @click.stop @click.outside="open = false" @keydown.escape="open = false">
+                      <button class="icon-btn card-menu-btn" @click="open = !open" aria-haspopup="menu" :aria-expanded="open" :aria-label="'Actions for ' + app.name" :title="'Actions for ' + app.name">
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="8" cy="3" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="8" cy="13" r="1.4"/></svg>
+                      </button>
+                      <div class="menu" role="menu" x-show="open" x-cloak>
+                        <button class="menu-item danger" role="menuitem" @click="open = false; unassignFromGroup(group.name, app)">Remove from group</button>
+                      </div>
+                    </div>
                   </div>
                 </template>
               </div>
@@ -655,9 +665,14 @@ <h1 class="page-title" x-text="projectName"></h1>
                 </div>
                 <div class="card-meta" x-text="app.server"></div>
                 <div class="card-hash" x-text="app.current_hash || app.status"></div>
-                <button title="Remove from project"
-                  @click.stop="unassignFromProject(app)"
-                  style="position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 6px; font-size: 14px; opacity: 0.6;">&times;</button>
+                <div class="menu-wrap card-menu" x-data="{ open: false }" @click.stop @click.outside="open = false" @keydown.escape="open = false">
+                      <button class="icon-btn card-menu-btn" @click="open = !open" aria-haspopup="menu" :aria-expanded="open" :aria-label="'Actions for ' + app.name" :title="'Actions for ' + app.name">
+                        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="8" cy="3" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="8" cy="13" r="1.4"/></svg>
+                      </button>
+                      <div class="menu" role="menu" x-show="open" x-cloak>
+                        <button class="menu-item danger" role="menuitem" @click="open = false; unassignFromProject(app)">Remove from project</button>
+                      </div>
+                    </div>
               </div>
             </template>
           </div>
@@ -797,7 +812,6 @@ <h1 class="page-title" x-text="app.name"></h1>
                 <button class="btn" x-show="hasFeature('redeploy')" @click="doAction('redeploy')" :disabled="actionLoading">Redeploy</button>
                 <button class="btn" @click="doAction(app.locked ? 'unlock' : 'lock')" :disabled="actionLoading" x-text="app.locked ? 'Unlock' : 'Lock'"></button>
                 <button class="btn" @click="doAction(app.maintenance ? 'maintenance/off' : 'maintenance/on')" :disabled="actionLoading" x-text="app.maintenance ? 'End Maintenance' : 'Maintenance'"></button>
-                <button class="btn btn-danger" @click="removeApp()" :disabled="actionLoading">Remove</button>
               </div>
 
               <!-- Recovery row (D07): rollback is above; these are the
@@ -1017,6 +1031,18 @@ <h4 style="margin: 0 0 4px; font-size: 14px;" x-text="'Database actions - ' + ac
                   </template>
                 </div>
               </template>
+              <!-- Danger: actions that cannot be undone, kept apart from the
+                   everyday controls above. -->
+              <section class="danger-zone" aria-labelledby="app-danger-title">
+                <h2 id="app-danger-title" class="section-title">Danger</h2>
+                <div class="danger-row">
+                  <div>
+                    <strong>Remove this app</strong>
+                    <p class="card-meta">Stops and removes its containers, its route and its deploy state. Volumes and accessory data are kept. You type the app's name to confirm.</p>
+                  </div>
+                  <button class="btn btn-danger" @click="removeApp()" :disabled="actionLoading">Remove app</button>
+                </div>
+              </section>
             </div>
           </template>
 
@@ -5142,6 +5168,43 @@ <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">Session</h3>
 </div>
 
 <!-- Toast Container -->
+<!-- The confirm dialog: every confirmation and question in the app opens
+     here (askConfirm / askForm in js/app.js). Same pattern as the Cleanup
+     fix dialog: focus trapped, Escape and the backdrop cancel, a typed name
+     gates destructive actions. -->
+<div class="dialog-overlay" x-data x-show="$store.dialog.current" x-cloak
+     @click.self="$store.dialog.cancel()"
+     @keydown.tab="trapDialogFocus($event)"
+     @keydown.escape.window="$store.dialog.current && $store.dialog.cancel()">
+  <template x-if="$store.dialog.current">
+    <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="confirm-dialog-title" aria-describedby="confirm-dialog-message" tabindex="-1"
+         x-init="$nextTick(() => ($el.querySelector('input, select, textarea') || $el.querySelector('[type=submit]') || $el).focus())">
+      <h2 id="confirm-dialog-title" x-text="$store.dialog.current.title"></h2>
+      <form @submit.prevent="$store.dialog.submit()">
+        <p id="confirm-dialog-message" class="dialog-message" x-show="$store.dialog.current.message" x-text="$store.dialog.current.message"></p>
+        <template x-for="f in $store.dialog.current.fields" :key="f.key">
+          <div class="field">
+            <label :for="'confirm-dialog-' + f.key" x-text="f.label"></label>
+            <input class="form-input" :id="'confirm-dialog-' + f.key" :type="f.type || 'text'" x-model="$store.dialog.values[f.key]"
+                   :placeholder="f.placeholder || ''" :required="!!f.required" :minlength="f.minLength || null" autocomplete="off">
+            <p class="card-meta" x-show="f.hint" x-text="f.hint"></p>
+          </div>
+        </template>
+        <template x-if="$store.dialog.current.typed">
+          <div class="field">
+            <label for="confirm-dialog-typed">Type <span class="mono" x-text="$store.dialog.current.typed"></span> to confirm</label>
+            <input id="confirm-dialog-typed" type="text" class="form-input" x-model="$store.dialog.typedValue" autocomplete="off" spellcheck="false">
+          </div>
+        </template>
+        <div class="dialog-actions">
+          <button type="button" class="btn" @click="$store.dialog.cancel()">Cancel</button>
+          <button type="submit" class="btn" :class="$store.dialog.current.danger ? 'btn-danger' : 'btn-primary'" :disabled="!$store.dialog.canSubmit()" x-text="$store.dialog.current.confirmLabel"></button>
+        </div>
+      </form>
+    </div>
+  </template>
+</div>
+
 <div id="toast-container" class="toast-container" role="status" aria-live="polite"></div>
 
 </body>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 1da624f..04bbcd1 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -281,6 +281,35 @@ function relTime(iso) {
   return diff >= 0 ? text + ' ago' : 'in ' + text;
 }
 
+// ── Confirm dialog (2026-11 rework) ──
+// One dialog for every confirmation and every question that used to be a
+// browser confirm() or prompt(). askConfirm resolves true/false; a `typed`
+// name must be typed exactly before the confirm button enables. askForm
+// shows labelled fields and resolves their values, or null when cancelled.
+//   askConfirm({ title, message, confirmLabel, danger, typed })
+//   askForm({ title, message, confirmLabel, danger, typed, fields: [{ key, label, value, type, placeholder, hint, required, minLength }] })
+function askConfirm(opts) {
+  if (typeof opts === 'string') opts = questionDialog(opts);
+  return Alpine.store('dialog').open({ ...opts, kind: 'confirm' });
+}
+// questionDialog turns a one-string question ("Remove x?\n\nWhat happens.")
+// into dialog options: the question is the title, the rest the message, and
+// the confirm button is named by the question's verb.
+function questionDialog(text) {
+  let title = String(text), message = '';
+  const para = title.indexOf('\n\n');
+  if (para > 0) { message = title.slice(para + 2); title = title.slice(0, para); }
+  else {
+    const q = title.indexOf('? ');
+    if (q > 0) { message = title.slice(q + 2); title = title.slice(0, q + 1); }
+  }
+  const verb = (title.match(/^(Sign out|Roll back|[A-Z][a-z]+)/) || [''])[0];
+  const labels = { Roll: 'Roll back', Edit: 'Switch', Poll: 'Poll now', Put: 'Start maintenance', Restore: 'Restore settings' };
+  const danger = /^(Delete|Remove|Revoke|Stop|Roll|Sign out|Restart|Reset)\b/.test(title);
+  return { title, message, confirmLabel: labels[verb] || verb || 'Confirm', danger };
+}
+function askForm(opts) { return Alpine.store('dialog').open({ ...opts, kind: 'form' }); }
+
 // ── Accessibility helpers ──
 // trapDialogFocus keeps Tab/Shift+Tab inside an open dialog (A49/A58).
 // Attach with @keydown.tab on the dialog overlay; focus is kept within the
@@ -553,6 +582,49 @@ document.addEventListener('alpine:init', () => {
   Alpine.store('router').restore();
   window.addEventListener('popstate', () => Alpine.store('router').restore());
 
+  Alpine.store('dialog', {
+    current: null,
+    values: {},
+    typedValue: '',
+    _resolve: null,
+    _returnFocus: null,
+    open(opts) {
+      if (this._resolve) this._finish(false);
+      this.current = { title: '', message: '', confirmLabel: 'Confirm', danger: false, typed: '', fields: [], ...opts };
+      this.values = {};
+      for (const f of this.current.fields) this.values[f.key] = f.value ?? '';
+      this.typedValue = '';
+      this._returnFocus = typeof document !== 'undefined' ? document.activeElement : null;
+      return new Promise((resolve) => { this._resolve = resolve; });
+    },
+    canSubmit() {
+      const c = this.current;
+      if (!c) return false;
+      if (c.typed && this.typedValue !== c.typed) return false;
+      for (const f of c.fields) {
+        const v = String(this.values[f.key] ?? '');
+        if (f.required && !v.trim()) return false;
+        if (f.minLength && v.length < f.minLength) return false;
+      }
+      return true;
+    },
+    submit() {
+      if (!this.canSubmit()) return;
+      this._finish(true);
+    },
+    cancel() { this._finish(false); },
+    _finish(ok) {
+      const c = this.current, resolve = this._resolve;
+      const result = c && c.kind === 'form' ? (ok ? { ...this.values } : null) : !!ok;
+      this.current = null;
+      this._resolve = null;
+      const back = this._returnFocus;
+      this._returnFocus = null;
+      if (back && typeof back.focus === 'function') setTimeout(() => back.focus(), 0);
+      if (resolve) resolve(result);
+    },
+  });
+
   // ── Service-link icons ──
   // Built-in monochrome glyphs, drawn in the current text colour so they flip
   // with the theme instead of relying on the site's favicon. Favicons are fine
@@ -895,7 +967,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async createProject(groupName) {
-      const name = prompt('Project name:');
+      const form = await askForm({ title: 'New project in ' + groupName, confirmLabel: 'Create project',
+        fields: [{ key: 'name', label: 'Project name', required: true, placeholder: 'storefront' }] });
+      const name = form && form.name.trim();
       if (!name) return;
       try {
         await api.post(`/api/groups/${encodeURIComponent(groupName)}/projects`, { name });
@@ -907,7 +981,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async createGroup() {
-      const name = prompt('Group name:');
+      const form = await askForm({ title: 'New group', confirmLabel: 'Create group',
+        fields: [{ key: 'name', label: 'Group name', required: true, placeholder: 'Shop', hint: 'Groups hold projects, and projects hold apps.' }] });
+      const name = form && form.name.trim();
       if (!name) return;
       try {
         await api.post('/api/groups', { name });
@@ -919,7 +995,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteProject(groupName, projectName) {
-      if (!confirm(`Delete project "${projectName}"? Apps inside remain in the group.`)) return;
+      if (!(await askConfirm(`Delete project "${projectName}"? Apps inside remain in the group.`))) return;
       try {
         await api.del(`/api/groups/${encodeURIComponent(groupName)}/projects/${encodeURIComponent(projectName)}`);
         showToast('Project deleted', 'success');
@@ -935,7 +1011,7 @@ document.addEventListener('alpine:init', () => {
       const refs = (group?.server_apps || []).filter(ref => ref.app === appName);
       const scoped = refs.some(ref => ref.server_id === app.server_id);
       const query = scoped ? `?server_id=${encodeURIComponent(app.server_id)}` : '?legacy=1';
-      if (!confirm(`Remove "${appName}" from group "${groupName}"?`)) return;
+      if (!(await askConfirm(`Remove "${appName}" from group "${groupName}"?`))) return;
       try {
         await api.del(`/api/groups/${encodeURIComponent(groupName)}/apps/${encodeURIComponent(appName)}${query}`);
         showToast('App removed from group', 'success');
@@ -1028,7 +1104,7 @@ document.addEventListener('alpine:init', () => {
       const project = (group?.projects || []).find(p => p.name === this.projectName);
       const scoped = (project?.server_apps || []).some(ref => ref.app === appName && ref.server_id === app.server_id);
       const query = scoped ? `?server_id=${encodeURIComponent(app.server_id)}` : '?legacy=1';
-      if (!confirm(`Remove "${appName}" from project "${this.projectName}"?`)) return;
+      if (!(await askConfirm(`Remove "${appName}" from project "${this.projectName}"?`))) return;
       try {
         await api.del(`/api/groups/${encodeURIComponent(groupName)}/projects/${encodeURIComponent(projectName)}/apps/${encodeURIComponent(appName)}${query}`);
         if (!this.current(generation)) return;
@@ -1042,7 +1118,7 @@ document.addEventListener('alpine:init', () => {
     async deleteThisProject() {
       const generation = this.generation, groupName = this.groupName, projectName = this.projectName;
       if (!this.current(generation)) return;
-      if (!confirm(`Delete project "${this.projectName}"? Apps remain in the group.`)) return;
+      if (!(await askConfirm(`Delete project "${this.projectName}"? Apps remain in the group.`))) return;
       try {
         await api.del(`/api/groups/${encodeURIComponent(groupName)}/projects/${encodeURIComponent(projectName)}`);
         if (!this.current(generation)) return;
@@ -1056,7 +1132,9 @@ document.addEventListener('alpine:init', () => {
     async renameThisProject() {
       const generation = this.generation, groupName = this.groupName, projectName = this.projectName;
       if (!this.current(generation)) return;
-      const name = prompt('Project name:', this.projectName);
+      const form = await askForm({ title: 'Rename project', confirmLabel: 'Rename',
+        fields: [{ key: 'name', label: 'Project name', value: this.projectName, required: true }] });
+      const name = form && form.name.trim();
       if (!name || name === this.projectName) return;
       try {
         await api.put(`/api/groups/${encodeURIComponent(groupName)}/projects/${encodeURIComponent(projectName)}`, { name });
@@ -1485,7 +1563,7 @@ document.addEventListener('alpine:init', () => {
 
     async restoreSettings(commit) {
       const target = this.resource;
-      if (!confirm(`Restore the settings from ${this.shortHash(commit)}?\n\nThey become the current settings as a new change; nothing is deployed until you deploy.`)) return;
+      if (!(await askConfirm(`Restore the settings from ${this.shortHash(commit)}?\n\nThey become the current settings as a new change; nothing is deployed until you deploy.`))) return;
       try {
         await api.post(`${this.appPath()}/config/restore`, { commit });
         if (this.resource !== target) return;
@@ -1498,7 +1576,7 @@ document.addEventListener('alpine:init', () => {
 
     async deployPending() {
       const target = this.resource;
-      if (!confirm(`Deploy ${target.name} on ${target.server} with its current settings?`)) return;
+      if (!(await askConfirm(`Deploy ${target.name} on ${target.server} with its current settings?`))) return;
       this.actionLoading = true;
       try {
         const op = await api.post(`${this.appPath()}/deploy`);
@@ -1514,7 +1592,7 @@ document.addEventListener('alpine:init', () => {
     // cannot, its refusal names the way forward.
     async makeEditableHere() {
       const target = this.resource;
-      if (!confirm(`Edit ${target.name}'s settings in Teploy from now on?\n\nTeploy rebuilds them from what is running, and only switches if that matches exactly. After this, deploys from the app's folder are refused until you switch back.`)) return;
+      if (!(await askConfirm(`Edit ${target.name}'s settings in Teploy from now on?\n\nTeploy rebuilds them from what is running, and only switches if that matches exactly. After this, deploys from the app's folder are refused until you switch back.`))) return;
       this.settingsSaving = true;
       try {
         await api.post(`${this.appPath()}/config/home`, { home: 'teploy' });
@@ -1531,7 +1609,7 @@ document.addEventListener('alpine:init', () => {
     // content offered as a teploy.yml download for the app's folder.
     async moveSettingsToFolder() {
       const target = this.resource;
-      if (!confirm(`Edit ${target.name}'s settings in a folder again?\n\nThe Teploy settings are kept in history and downloaded as teploy.yml; deploy from the folder that holds it from now on.`)) return;
+      if (!(await askConfirm(`Edit ${target.name}'s settings in a folder again?\n\nThe Teploy settings are kept in history and downloaded as teploy.yml; deploy from the folder that holds it from now on.`))) return;
       this.settingsSaving = true;
       try {
         const res = await api.post(`${this.appPath()}/config/home`, { home: 'folder' });
@@ -1618,7 +1696,7 @@ document.addEventListener('alpine:init', () => {
 
     async rollbackTo(rel) {
       const target = this.resource;
-      if (!confirm(`Roll ${target.name} on ${target.server} back to ${this.shortHash(rel.release)}?\n\nIt was deployed ${rel.deployed_at ? new Date(rel.deployed_at).toLocaleString() : '(date unknown)'}${rel.image ? ' from ' + rel.image : ''}. The running release is replaced by it.`)) return;
+      if (!(await askConfirm(`Roll ${target.name} on ${target.server} back to ${this.shortHash(rel.release)}?\n\nIt was deployed ${rel.deployed_at ? new Date(rel.deployed_at).toLocaleString() : '(date unknown)'}${rel.image ? ' from ' + rel.image : ''}. The running release is replaced by it.`))) return;
       this.actionLoading = true;
       try {
         const op = await api.post(`${this.appPath()}/rollback`, { to: rel.release });
@@ -1659,7 +1737,7 @@ document.addEventListener('alpine:init', () => {
 
     async deleteSecret(key) {
       const target = this.resource;
-      if (!confirm(`Remove secret ${key}?\n\nContainers keep the old value in their environment until the app is redeployed.`)) return;
+      if (!(await askConfirm(`Remove secret ${key}?\n\nContainers keep the old value in their environment until the app is redeployed.`))) return;
       try {
         await api.del(`${this.appPath()}/secrets/${encodeURIComponent(key)}`);
         if (this.resource !== target) return;
@@ -2049,7 +2127,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async delKv(key) {
-      if (!confirm(`Delete ${key}?\n\nThis KV store is shared — anything else using this accessory loses the key too.`)) return;
+      if (!(await askConfirm(`Delete ${key}?\n\nThis KV store is shared — anything else using this accessory loses the key too.`))) return;
       try {
         await api.del(`${this.appPath()}/kv${this.kvQuery({ key })}`);
         showToast('Key removed', 'success');
@@ -2238,7 +2316,7 @@ document.addEventListener('alpine:init', () => {
     async gitConfirmHostKeys() {
       const fingerprints = (this.gitHostKeys && this.gitHostKeys.host_key_fingerprints) || [];
       const question = `The forge's host keys are pinned:\n\n${fingerprints.join('\n')}\n\nVerify they match the fingerprints your forge publishes, then confirm to finish the connection.`;
-      if (!confirm(question)) return;
+      if (!(await askConfirm({ title: 'Check the forge host keys', message: question, confirmLabel: 'They match' }))) return;
       const target = this.resource;
       this.gitBusy = true;
       this.gitError = '';
@@ -2270,7 +2348,7 @@ document.addEventListener('alpine:init', () => {
     // polls immediately.
     async gitRetry() {
       const target = this.resource;
-      if (!confirm(`Poll ${target.name} now? A commit that exhausted its retry budget is polled again.`)) return;
+      if (!(await askConfirm(`Poll ${target.name} now? A commit that exhausted its retry budget is polled again.`))) return;
       this.gitBusy = true;
       this.gitError = '';
       try {
@@ -2289,11 +2367,10 @@ document.addEventListener('alpine:init', () => {
     async gitResetWatermark() {
       const ref = (this.gitShow && this.gitShow.trigger && this.gitShow.trigger.ref) || '';
       if (!ref) return;
-      const typed = prompt(`Reset the watermark for ${ref}?\n\nThe next poll admits the CURRENT head even if it does not descend from the last admitted commit (needed after a force-push). Type the ref to confirm:`, '');
-      if (typed === null || typed.trim() !== ref) {
-        if (typed !== null) showToast('Type the ref exactly to confirm', 'error');
-        return;
-      }
+      const ok = await askConfirm({ title: `Reset the watermark for ${ref}?`, typed: ref, danger: true, confirmLabel: 'Reset watermark',
+        message: 'The next poll admits the CURRENT head even if it does not descend from the last admitted commit (needed after a force-push).' });
+      if (!ok) return;
+      const typed = ref;
       const target = this.resource;
       this.gitBusy = true;
       this.gitError = '';
@@ -2349,7 +2426,7 @@ document.addEventListener('alpine:init', () => {
       // the page is displaying.
       if (!target || !this.app || this.app.name !== target.name || this.app.server !== target.server) return;
       const question = this.actionConfirmation(action);
-      if (question && !confirm(question)) return;
+      if (question && !(await askConfirm(question))) return;
       this.actionLoading = true;
       try {
         const result = await api.post(`${this.appPath()}/${action}`);
@@ -2374,9 +2451,14 @@ document.addEventListener('alpine:init', () => {
       // has not (yet) loaded, or no longer matches the route, must not
       // submit anything (A49).
       if (!this.app || this.app.name !== target.name || this.app.server !== target.server) return;
-      if (!confirm(`Remove ${target.name} from ${target.server}?\n\nThis stops and removes its containers, removes its route, and deletes its deploy state. Volumes and accessory data are preserved.`)) return;
-      const redirect = prompt('Optional: leave a permanent redirect to this URL (blank for none):', '');
-      if (redirect === null) return; // cancelled
+      const form = await askForm({
+        title: `Remove ${target.name} from ${target.server}?`,
+        message: 'This stops and removes its containers, removes its route, and deletes its deploy state. Volumes and accessory data are preserved.',
+        fields: [{ key: 'redirect', label: 'Redirect (optional)', type: 'url', placeholder: 'https://example.com', hint: 'Leave a permanent redirect to this URL in place of the app. Blank for none.' }],
+        typed: target.name, danger: true, confirmLabel: 'Remove app',
+      });
+      if (!form) return; // cancelled
+      const redirect = form.redirect || '';
       this.actionLoading = true;
       try {
         const op = await api.post(`/api/apps/${encodeURIComponent(target.server)}/${encodeURIComponent(target.name)}/remove`, { redirect: redirect.trim() });
@@ -2413,7 +2495,7 @@ document.addEventListener('alpine:init', () => {
 
     async deleteEnvVar(key) {
       if (this.envKeyLocked(key)) return; // read-only: owned by the source or the app's settings
-      if (!confirm(`Delete ${key}?`)) return;
+      if (!(await askConfirm(`Delete ${key}?`))) return;
       try {
         await api.del(`${this.appPath()}/env/${key}`);
         showToast('Env var removed', 'success');
@@ -2484,9 +2566,9 @@ document.addEventListener('alpine:init', () => {
     async accessoryAction(accessory, action) {
       const name = this.accessoryName(accessory.name);
       if (action === 'stop') {
-        if (!confirm(`Stop database ${name} on ${this.resource.server}?\n\nApps using ${name} lose their data connection until it is started again. In-flight queries abort. Persisted data is untouched.`)) return;
+        if (!(await askConfirm(`Stop database ${name} on ${this.resource.server}?\n\nApps using ${name} lose their data connection until it is started again. In-flight queries abort. Persisted data is untouched.`))) return;
       } else if (action === 'start') {
-        if (!confirm(`Start database ${name} on ${this.resource.server}?\n\nIt comes back empty-memory: connection pools and caches warm up from scratch. No data is changed.`)) return;
+        if (!(await askConfirm(`Start database ${name} on ${this.resource.server}?\n\nIt comes back empty-memory: connection pools and caches warm up from scratch. No data is changed.`))) return;
       }
       this.actionLoading = true;
       try {
@@ -2704,7 +2786,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteTest(id) {
-      if (!confirm('Delete this restore test?')) return;
+      if (!(await askConfirm('Delete this restore test?'))) return;
       try {
         await rawFetch.del('/api/restore-tests/' + id);
         await this.loadTests();
@@ -3028,7 +3110,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async resetUserPassword(username) {
-      const pw = prompt(`New password for ${username} (at least 8 characters):`);
+      const form = await askForm({ title: `New password for ${username}`, confirmLabel: 'Set password',
+        fields: [{ key: 'password', label: 'Password', type: 'password', required: true, minLength: 8, hint: 'At least 8 characters.' }] });
+      const pw = form && form.password;
       if (!pw) return;
       try {
         await api.post(`/api/users/${encodeURIComponent(username)}/password`, { password: pw });
@@ -3039,7 +3123,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteUser(username) {
-      if (!confirm(`Remove user ${username}? Any active sessions are ended immediately.`)) return;
+      if (!(await askConfirm(`Remove user ${username}? Any active sessions are ended immediately.`))) return;
       try {
         await api.del(`/api/users/${encodeURIComponent(username)}`);
         showToast('User removed', 'success');
@@ -3052,7 +3136,7 @@ document.addEventListener('alpine:init', () => {
     // A02 surface: durable session revocation — the epoch bump retires every
     // live session on its next request; the user simply signs in again.
     async revokeUserSessions(username) {
-      if (!confirm(`Sign out ${username} everywhere? Active sessions end on their next request.`)) return;
+      if (!(await askConfirm(`Sign out ${username} everywhere? Active sessions end on their next request.`))) return;
       try {
         await api.post(`/api/users/${encodeURIComponent(username)}/revoke-sessions`);
         showToast(`Sessions for ${username} revoked`, 'success');
@@ -3065,7 +3149,7 @@ document.addEventListener('alpine:init', () => {
     // pre-matrix permissions with its role's preset. The confirm is the
     // explicit act; the server applies it to live sessions immediately.
     async narrowToPreset(username) {
-      if (!confirm(`Narrow ${username} to its role's preset?\n\nPre-matrix permissions (including any env/KV value reads the old role allowed) are replaced by the preset for its current role. Active sessions pick up the change on their next request.`)) return;
+      if (!(await askConfirm(`Narrow ${username} to its role's preset?\n\nPre-matrix permissions (including any env/KV value reads the old role allowed) are replaced by the preset for its current role. Active sessions pick up the change on their next request.`))) return;
       try {
         await api.post(`/api/users/${encodeURIComponent(username)}/narrow-to-preset`);
         showToast(`${username} narrowed to preset`, 'success');
@@ -3093,7 +3177,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async revokeSSO(p) {
-      if (!confirm(`Sign out ${p.username || p.subject} everywhere? Active sessions end on their next request.`)) return;
+      if (!(await askConfirm(`Sign out ${p.username || p.subject} everywhere? Active sessions end on their next request.`))) return;
       try {
         await api.post('/api/sso/revoke', { subject: p.subject });
         showToast('SSO sessions revoked', 'success');
@@ -3130,7 +3214,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteMcpToken(id) {
-      if (!confirm('Revoke this token? Clients using it will lose access immediately.')) return;
+      if (!(await askConfirm('Revoke this token? Clients using it will lose access immediately.'))) return;
       try {
         await api.del(`/api/mcp-tokens/${encodeURIComponent(id)}`);
         this.createdMcpToken = '';
@@ -3158,7 +3242,8 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteServer(name) {
-      if (!confirm(`Remove server ${name}?`)) return;
+      if (!(await askConfirm({ title: `Remove server ${name}?`, typed: name, danger: true, confirmLabel: 'Remove server',
+        message: "This runs teploy server remove: the server leaves teploy's server list and Dash stops showing it." }))) return;
       try {
         await api.del(`/api/config/servers/${name}`);
         showToast('Server removed', 'success');
@@ -3181,7 +3266,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteGroup(name) {
-      if (!confirm(`Delete group ${name}?`)) return;
+      if (!(await askConfirm(`Delete group ${name}?`))) return;
       try {
         await api.del(`/api/groups/${encodeURIComponent(name)}`);
         showToast('Group deleted', 'success');
@@ -3192,7 +3277,9 @@ document.addEventListener('alpine:init', () => {
     },
 
     async renameGroup(oldName) {
-      const newName = prompt('New group name:', oldName);
+      const form = await askForm({ title: 'Rename group', confirmLabel: 'Rename',
+        fields: [{ key: 'name', label: 'Group name', value: oldName, required: true }] });
+      const newName = form && form.name.trim();
       if (!newName || newName === oldName) return;
       try {
         await api.put(`/api/groups/${encodeURIComponent(oldName)}`, { name: newName });
@@ -3267,7 +3354,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteRegistry(server) {
-      if (!confirm(`Remove registry ${server}?`)) return;
+      if (!(await askConfirm(`Remove registry ${server}?`))) return;
       try {
         await api.del(`/api/registries/${encodeURIComponent(server)}`);
         showToast('Registry removed', 'success');
@@ -3605,7 +3692,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteChannel(id) {
-      if (!confirm('Delete this alert channel?')) return;
+      if (!(await askConfirm('Delete this alert channel?'))) return;
       try {
         await api.del(`/api/notifications/channels/${encodeURIComponent(id)}`);
         showToast('Channel deleted', 'success');
@@ -3650,7 +3737,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteHeartbeat(id) {
-      if (!confirm('Remove this heartbeat receiver? It will alert when the pings stop, so pause or delete the check there too.')) return;
+      if (!(await askConfirm('Remove this heartbeat receiver? It will alert when the pings stop, so pause or delete the check there too.'))) return;
       try {
         await api.del(`/api/notifications/heartbeats/${encodeURIComponent(id)}`);
         await this.load();
@@ -3926,10 +4013,10 @@ document.addEventListener('alpine:init', () => {
         this.setupError = '';
         this.setupStep = step;
       },
-      closeSetup() {
+      async closeSetup() {
         // A key made and not saved opens nothing: its file must not be kept by mistake.
-        if (this.recoveryGen && typeof confirm === 'function' &&
-            !confirm('This recovery key was not saved to Dash, so no backup will use it. If you downloaded the file, it is no use: delete it. Close anyway?')) {
+        if (this.recoveryGen && !(await askConfirm({ title: 'Close without saving the recovery key?', danger: true, confirmLabel: 'Close anyway',
+          message: 'This recovery key was not saved to Dash, so no backup will use it. If you downloaded the file, it is no use: delete it.' }))) {
           return;
         }
         this.setupOpen = false;
@@ -5426,7 +5513,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     async deleteMonitor(id) {
-      if (!confirm('Delete this monitor?')) return;
+      if (!(await askConfirm('Delete this monitor?'))) return;
       try {
         await rawFetch.del('/api/monitors/' + id);
         if (this.detailId === id) this.openList();

From 84919006942f0e288c26c62b30fb3f1bb17d1a24 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 17:28:56 -0700
Subject: [PATCH 07/11] dash: monitor and operation dots show the current
 state; one date helper

- A monitor's dot was its 24-hour uptime: a monitor down right now could
  read green. It now reads the newest check (red when it failed or an
  incident is open, green when it passed, grey when paused or unchecked),
  with "Down now (checked 2 min ago)" as its label; the uptime percentage
  stays as text. Backend: GET /api/monitors carries each monitor's newest
  check as last_check. Test: TestMonitorListCarriesLastCheck.
- A running operation no longer shares the green dot of a succeeded one:
  in progress is a pulsing blue, canceled grey (Activity and operation
  detail).
- One date helper: relTime/ageText give relative text ("5 min ago",
  "in 3 h") and the x-time directive pairs it with the exact time in a
  title attribute. Every formatDate/formatWhen/ageLabel copy and the
  Activity times delegate to it; templates format no dates by hand.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/nav_rework.test.mjs         |  17 +++
 cmd/teploy-dash/frontend/css/style.css        |   8 +-
 cmd/teploy-dash/frontend/index.html           |  48 +++----
 cmd/teploy-dash/frontend/js/app.js            | 126 ++++++++++--------
 cmd/teploy-dash/frontend/js/operations.js     |   6 +-
 internal/server/monitors_test.go              |  41 ++++++
 internal/server/server.go                     |   6 +
 7 files changed, 169 insertions(+), 83 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index 30ea7b9..98063c8 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -112,6 +112,23 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   });
 }
 
+// One date helper: no locale date strings in templates; times go through
+// x-time or relTime with the exact time in a title.
+{
+  assert(!/toLocale(Date)?String\(\)/.test(html), 'templates format no dates by hand');
+  assert(js.includes("Alpine.directive('time'"), 'the x-time directive exists');
+  assert(!/new Date\(d\)\.toLocaleString\(\)/.test(js), 'components delegate formatDate to relTime');
+  const ageCopies = (js.match(/ageLabel\(seconds\) \{\n\s+return seconds === undefined \|\| seconds === null \? '(never|not checked)' : ageText\(seconds\);/g) || []).length;
+  assert(ageCopies === 4, 'every ageLabel delegates to ageText (' + ageCopies + ')');
+}
+
+// Monitor and operation dots show the current state.
+{
+  assert(js.includes('monitorState(m)') && js.includes("c.status === 'up' ? 'up' : 'down'"), 'the monitor dot reads the newest check');
+  assert(!/uptime_percent >= 99 \? 'green'/.test(js), 'the dot no longer derives from 24h uptime');
+  assert(!html.includes("running: op.status === 'running' || op.status === 'succeeded'"), 'a running operation is not painted like a succeeded one');
+}
+
 function finish() {
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index c11aaa8..88e1c44 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -209,7 +209,9 @@ tbody tr:hover { background: var(--bg-card-hover); }
 .status-dot.stopped, .status-dot.offline, .dot.red, .ws-indicator.disconnected { background: var(--red); }
 .status-dot.unknown, .dot.yellow { background: var(--yellow); }
 .dot.gray { background: var(--text-muted); }
-.dot.blue { background: var(--accent); }
+.dot.blue, .status-dot.active { background: var(--accent); }
+.status-dot.active { animation: dot-pulse 1.4s ease-in-out infinite; }
+.status-dot.idle { background: var(--text-muted); }
 .dot.pulse { animation: dot-pulse 1.4s ease-in-out infinite; }
 @keyframes dot-pulse { 50% { opacity: .35; } }
 .text-warn { color: var(--yellow); }
@@ -231,7 +233,7 @@ a.status-row:hover { background: var(--bg-card-hover); }
 .status-row-meta { flex-shrink: 0; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
 .status-row-action { flex-shrink: 0; color: var(--accent); font-size: 12px; white-space: nowrap; }
 .status-row-facts { display: flex; flex-shrink: 0; gap: 14px; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
-@media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } }
+@media (prefers-reduced-motion: reduce) { .dot.pulse, .status-dot.active { animation: none; } }
 @media (max-width: 640px) {
   .status-row { flex-wrap: wrap; row-gap: 4px; }
   .status-row-main { flex-basis: calc(100% - 20px); }
@@ -503,7 +505,7 @@ code { overflow-wrap: anywhere; }
 }
 
 @media (max-width: 400px) {
-  .stats-grid, .status-grid { grid-template-columns: minmax(0, 1fr); }
+  .stats-grid { grid-template-columns: minmax(0, 1fr); }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index e7747f7..3eab9c3 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -886,7 +886,7 @@ <h3 style="font-size: 15px;">Health</h3>
                         </tr>
                         <tr x-show="health.observed_at">
                           <td>Checked</td>
-                          <td class="card-meta" style="margin:0;" x-text="new Date(health.observed_at).toLocaleString()"></td>
+                          <td class="card-meta" style="margin:0;" x-time="health.observed_at"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -1281,7 +1281,7 @@ <h3 class="settings-section">History</h3>
                                 <span class="badge" x-show="c.commit === settings.applied_commit">running</span>
                                 <div class="card-meta" x-text="c.message"></div>
                               </td>
-                              <td x-text="formatWhen(c.date)"></td>
+                              <td x-time="c.date"></td>
                               <td x-text="c.author"></td>
                               <td>
                                 <button class="btn btn-sm" @click="viewSettingsAt(c.commit)">View</button>
@@ -1513,7 +1513,7 @@ <h2 class="section-title">Repository</h2>
                       <template x-for="ev in events" :key="ev.id || ev.seq">
                         <tr>
                           <td class="mono" x-text="ev.kind"></td>
-                          <td x-text="formatWhen(ev.ts)"></td>
+                          <td x-time="ev.ts"></td>
                           <td>
                             <span class="status-dot" :class="eventOutcomeClass(ev)" style="margin-right: 6px;"></span>
                             <span x-text="ev.outcome"></span>
@@ -1574,7 +1574,7 @@ <h2 class="section-title">Repository</h2>
                     <tbody>
                       <template x-for="entry in deployLog" :key="entry.ts">
                         <tr>
-                          <td x-text="new Date(entry.ts).toLocaleString()"></td>
+                          <td x-time="entry.ts"></td>
                           <td x-text="entry.type"></td>
                           <td style="font-family: var(--mono); font-size: 12px;" x-text="entry.hash || '-'"></td>
                           <td>
@@ -1631,7 +1631,7 @@ <h2 class="section-title">Repository</h2>
                             <span class="badge green" x-show="rel.current">current</span>
                             <div class="card-meta" x-show="!rel.current && !rel.rollback_available && rel.reason" x-text="rel.reason"></div>
                           </td>
-                          <td x-text="rel.deployed_at ? new Date(rel.deployed_at).toLocaleString() : '-'"></td>
+                          <td x-time="rel.deployed_at"></td>
                           <td style="font-family: var(--mono); font-size: 12px;" x-text="rel.image || '-'"></td>
                           <td class="card-meta" x-text="rel.actor || '-'"></td>
                           <td>
@@ -1703,7 +1703,7 @@ <h3 style="font-size: 15px; margin: 0 0 8px;">Backups</h3>
                             <td style="font-family: var(--mono); font-size: 12px;" x-text="b.id"></td>
                             <td x-text="backupKindLabel(b)"></td>
                             <td x-text="formatBytes(b.size_bytes)"></td>
-                            <td x-text="new Date(b.created_at).toLocaleString()"></td>
+                            <td x-time="b.created_at"></td>
                             <td>
                               <button x-show="canRestoreData() && b.restorable" class="btn btn-sm btn-danger" @click="openBackupRestore(b)">Restore</button>
                             </td>
@@ -1913,7 +1913,7 @@ <h1 class="page-title">Domains</h1>
                     <strong x-show="firstFailingLabel(row)" x-text="firstFailingLabel(row) + ': '"></strong>
                     <span x-text="row.evidence || ''"></span>
                   </td>
-                  <td class="text-muted" x-text="ageLabel(row.age_seconds)"></td>
+                  <td class="text-muted" data-label="Checked" x-text="ageLabel(row.age_seconds)"></td>
                 </tr>
               </template>
             </tbody>
@@ -2749,7 +2749,7 @@ <h2 class="subpage-title">Restore tests</h2>
                           <div class="text-muted" x-text="'history ' + row.auto.history"></div>
                         </template>
                         <template x-if="row.manual && row.state !== 'never'">
-                          <div class="text-muted" x-text="[row.manual.last_date ? 'backup ' + row.manual.last_date : '', row.manual.last_metric, row.manual.last_duration_ms ? (row.manual.last_duration_ms / 1000).toFixed(1) + 's' : '', formatDate(row.manual.last_run_at)].filter(Boolean).join(' · ')"></div>
+                          <div class="text-muted" x-text="[row.manual.last_date ? 'backup ' + row.manual.last_date : '', row.manual.last_metric, row.manual.last_duration_ms ? (row.manual.last_duration_ms / 1000).toFixed(1) + 's' : '', formatDate(row.manual.last_run_at)].filter(Boolean).join(' · ')" :title="formatObservedAt(row.manual.last_run_at)"></div>
                         </template>
                         <template x-if="row.manual && !row.manual.last_ok && row.manual.last_detail">
                           <div class="check-msg" x-text="row.manual.last_detail"></div>
@@ -2967,7 +2967,7 @@ <h1 class="page-title">Uptime</h1>
                 <a class="monitor-card" :href="'/monitors/' + encodeURIComponent(m.id)" @click.prevent="selectMonitor(m.id)">
                   <div class="monitor-header">
                 <div class="monitor-status">
-                  <span class="dot" :class="getMonitorDot(m)"></span>
+                  <span class="dot" :class="getMonitorDot(m)" role="img" :aria-label="monitorStateLabel(m)" :title="monitorStateLabel(m)"></span>
                   <span class="monitor-name" x-text="m.name"></span>
                   <span class="monitor-type badge" x-text="m.type"></span>
                   <!-- D08: a failing alert delivery warns at list level. -->
@@ -3032,7 +3032,7 @@ <h1 class="page-title">Alerts</h1>
                   <div style="margin-top: 6px; font-size: 13px;">
                     <span class="badge" :class="inc.severity === 'critical' ? 'red' : 'yellow'" x-text="inc.source"></span>
                     <span x-text="inc.name"></span>
-                    <span class="card-meta" x-text="' since ' + formatDate(inc.started_at) + (inc.notified ? '' : ' (not announced: no channel was configured)')"></span>
+                    <span class="card-meta" x-text="' since ' + formatDate(inc.started_at) + (inc.notified ? '' : ' (not announced: no channel was configured)')" :title="formatObservedAt(inc.started_at)"></span>
                     <div class="card-meta" style="margin: 2px 0 0; font-family: var(--mono);" x-show="inc.message" x-text="inc.message"></div>
                   </div>
                 </template>
@@ -3052,7 +3052,7 @@ <h1 class="page-title">Alerts</h1>
                 <template x-for="sl in silences" :key="sl.id">
                   <div style="display: flex; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 4px;">
                     <span x-text="silenceLabel(sl)"></span>
-                    <span class="card-meta" style="margin: 0;" x-text="'until ' + formatDate(sl.expires_at) + (sl.reason ? ' - ' + sl.reason : '') + (sl.created_by ? ' (' + sl.created_by + ')' : '')"></span>
+                    <span class="card-meta" style="margin: 0;" x-text="'ends ' + formatDate(sl.expires_at) + (sl.reason ? ' - ' + sl.reason : '') + (sl.created_by ? ' (' + sl.created_by + ')' : '')" :title="formatObservedAt(sl.expires_at)"></span>
                     <button class="btn btn-sm" @click="removeSilence(sl.id)">End</button>
                   </div>
                 </template>
@@ -3100,7 +3100,7 @@ <h1 class="page-title">Alerts</h1>
                   <div style="margin-top: 6px; font-size: 13px;">
                     <span class="badge" :class="deliveryClass(d.status)" x-text="d.status"></span>
                     <span x-text="kindText(d.kind) + ': ' + (d.rule_name || d.rule_id)"></span>
-                    <span class="card-meta" x-text="' ' + formatDate(d.created_at)"></span>
+                    <span class="card-meta" x-text="' ' + formatDate(d.created_at)" :title="formatObservedAt(d.created_at)"></span>
                     <div class="card-meta" style="margin: 2px 0 0;" x-show="d.note" x-text="d.note"></div>
                     <div class="card-meta" style="margin: 2px 0 0; font-family: var(--mono); word-break: break-word;" x-show="d.status !== 'delivered' && d.last_error" x-text="d.last_error"></div>
                   </div>
@@ -3211,17 +3211,17 @@ <h2>Alert delivery</h2>
                         x-text="selectedMonitor.delivery.status"></span>
                   <span x-text="'attempt ' + (selectedMonitor.delivery.attempts || 0)"></span>
                   <span class="card-meta" style="margin: 0;"
-                        x-text="'event: ' + selectedMonitor.delivery.event_status + ' at ' + formatDate(selectedMonitor.delivery.occurred_at)"></span>
+                        x-text="'event: ' + selectedMonitor.delivery.event_status + ', ' + formatDate(selectedMonitor.delivery.occurred_at)" :title="formatObservedAt(selectedMonitor.delivery.occurred_at)"></span>
                   <span class="card-meta" style="margin: 0;"
                         x-show="selectedMonitor.delivery.next_retry_at || selectedMonitor.delivery.next_attempt_at"
-                        x-text="'next retry: ' + formatDate(selectedMonitor.delivery.next_retry_at || selectedMonitor.delivery.next_attempt_at)"></span>
+                        x-text="'next retry: ' + formatDate(selectedMonitor.delivery.next_retry_at || selectedMonitor.delivery.next_attempt_at)" :title="formatObservedAt(selectedMonitor.delivery.next_retry_at || selectedMonitor.delivery.next_attempt_at)"></span>
                 </div>
                 <p x-show="selectedMonitor.delivery.last_error"
                    style="margin: 10px 0 0; color: var(--red); font-size: 12px; font-family: var(--mono); word-break: break-word;"
                    x-text="'last failure: ' + selectedMonitor.delivery.last_error"></p>
                 <p x-show="selectedMonitor.delivery.last_attempt_at"
                    class="card-meta" style="margin: 4px 0 0;"
-                   x-text="'last attempt: ' + formatDate(selectedMonitor.delivery.last_attempt_at)"></p>
+                   x-text="'last attempt: ' + formatDate(selectedMonitor.delivery.last_attempt_at)" :title="formatObservedAt(selectedMonitor.delivery.last_attempt_at)"></p>
               </div>
             </div>
           </template>
@@ -3236,7 +3236,7 @@ <h2>Recent Checks</h2>
                   <span class="check-status" x-text="check.status"></span>
                   <span class="check-code" x-show="check.status_code" x-text="check.status_code"></span>
                   <span class="check-time" x-text="fmtMs(check.response_time)"></span>
-                  <span class="check-date" x-text="formatDate(check.checked_at)"></span>
+                  <span class="check-date" x-time="check.checked_at"></span>
                   <span class="check-msg" x-show="check.message" x-text="check.message"></span>
                 </div>
               </template>
@@ -3930,13 +3930,13 @@ <h2 class="section-title" x-text="'Install ' + selected.name"></h2>
               <template x-for="op in ops" :key="op.id">
                 <tr style="cursor:pointer;" @click="open(op)">
                   <td>
-                    <span class="status-dot" :class="{ running: op.status === 'running' || op.status === 'succeeded', stopped: op.status === 'failed' || op.status === 'interrupted', unknown: op.status === 'queued' || op.status === 'canceled' }"></span>
+                    <span class="status-dot" :class="opDotClass(op.status)"></span>
                     <span x-text="op.status"></span>
                   </td>
                   <td style="font-family: var(--mono); font-size: 12px;" x-text="op.request.kind"></td>
                   <td x-text="op.target"></td>
                   <td x-text="op.attempt"></td>
-                  <td x-text="when(op.started_at || op.created_at)"></td>
+                  <td x-text="when(op.started_at || op.created_at)" :title="formatObservedAt(op.started_at || op.created_at)"></td>
                   <td x-text="duration(op)"></td>
                 </tr>
               </template>
@@ -3974,13 +3974,13 @@ <h1 class="page-title" x-text="op.request.kind + ' — ' + op.target"></h1>
             <div class="card">
               <div class="card-meta">Status</div>
               <div class="card-title">
-                <span class="status-dot" :class="{ running: op.status === 'running' || op.status === 'succeeded', stopped: op.status === 'failed' || op.status === 'interrupted', unknown: op.status === 'queued' || op.status === 'canceled' }"></span>
+                <span class="status-dot" :class="opDotClass(op.status)"></span>
                 <span x-text="op.status"></span>
               </div>
             </div>
             <div class="card">
               <div class="card-meta">Started</div>
-              <div class="card-title" style="font-size: 13px;" x-text="when(op.started_at)"></div>
+              <div class="card-title" style="font-size: 13px;" x-text="when(op.started_at)" :title="op.started_at ? formatObservedAt(op.started_at) : null"></div>
             </div>
             <div class="card">
               <div class="card-meta">Duration</div>
@@ -4686,7 +4686,7 @@ <h3 class="section-title" style="font-size: 14px; margin-top: 24px;">Dash heartb
                       <td class="card-meta" x-text="hb.url_hint"></td>
                       <td>
                         <span class="badge" :class="hb.last ? (hb.last.ok ? 'green' : 'red') : ''" x-text="hb.last ? (hb.last.ok ? 'ok' : 'failed') : 'not yet'"></span>
-                        <div class="card-meta" style="margin: 2px 0 0;" x-show="hb.last" x-text="hb.last ? (formatDate(hb.last.at) + (hb.last.error ? ' - ' + hb.last.error : '')) : ''"></div>
+                        <div class="card-meta" style="margin: 2px 0 0;" x-show="hb.last" x-text="hb.last ? (formatDate(hb.last.at) + (hb.last.error ? ' - ' + hb.last.error : '')) : ''" :title="hb.last ? formatObservedAt(hb.last.at) : null"></div>
                       </td>
                       <td style="display: flex; gap: 6px; justify-content: flex-end;">
                         <button class="btn btn-sm" @click="testHeartbeat(hb.id)">Ping now</button>
@@ -4818,8 +4818,8 @@ <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">MCP access to
                       <tr>
                         <td x-text="t.name"></td>
                         <td x-text="t.read_only ? 'Read-only' : 'Read + actions'"></td>
-                        <td style="font-size: 12px;" x-text="new Date(t.created_at).toLocaleDateString()"></td>
-                        <td style="font-size: 12px;" x-text="t.last_used && !t.last_used.startsWith('0001') ? new Date(t.last_used).toLocaleString() : 'never'"></td>
+                        <td style="font-size: 12px;" x-time="t.created_at"></td>
+                        <td style="font-size: 12px;" x-text="t.last_used && !t.last_used.startsWith('0001') ? relTime(t.last_used) : 'never'" :title="t.last_used && !t.last_used.startsWith('0001') ? formatObservedAt(t.last_used) : null"></td>
                         <td style="text-align: right;">
                           <button class="btn btn-sm btn-danger" @click="deleteMcpToken(t.id)">Revoke</button>
                         </td>
@@ -4976,7 +4976,7 @@ <h3 style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">Single sign-o
                                :title="p.subject" x-text="p.email || ssoSubjectTail(p.subject)"></div>
                         </td>
                         <td x-text="p.role"></td>
-                        <td style="font-size: 12px;" x-text="fmtDate(p.last_sign_in)"></td>
+                        <td style="font-size: 12px;" x-text="fmtDate(p.last_sign_in)" :title="p.last_sign_in && !String(p.last_sign_in).startsWith('0001') ? formatObservedAt(p.last_sign_in) : null"></td>
                         <td style="text-align: right;">
                           <button class="btn btn-sm btn-danger" @click="revokeSSO(p)">Revoke sessions</button>
                         </td>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 04bbcd1..983297f 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -261,24 +261,40 @@ function formatObservedAt(iso) {
   return isNaN(date.getTime()) ? String(iso) : date.toLocaleString();
 }
 
+// opDotClass colours an operation's status dot: in progress is a pulsing
+// blue (never the green of a finished success), succeeded green, failed or
+// interrupted red, canceled or otherwise settled grey.
+function opDotClass(status) {
+  if (['queued', 'running', 'cancel_requested', 'stopping'].includes(status)) return 'active';
+  if (status === 'succeeded') return 'running';
+  if (status === 'failed' || status === 'interrupted') return 'stopped';
+  return 'idle';
+}
+
 // arr: a list from a response field, or empty when the field is missing or
 // not a list (a mis-shaped response must not break the page that reads it).
 function arr(v) { return Array.isArray(v) ? v : []; }
 
-// relTime renders a timestamp as relative time ("5 min ago", "in 3 h");
-// pair it with formatObservedAt in a title attribute for the exact time.
+// The one date helper (2026-11 rework). Times read as relative text ("5 min
+// ago", "in 3 h") with the exact local time in a title attribute: in
+// templates, x-time="<iso>" does both; relTime / ageText give the text where
+// a time is part of a longer sentence.
+function ageText(seconds) {
+  const future = seconds < 0;
+  const abs = Math.abs(seconds);
+  if (abs < 90) return 'just now';
+  const minutes = Math.round(abs / 60);
+  let text;
+  if (minutes < 120) text = `${minutes} min`;
+  else if (minutes / 60 < 48) text = `${Math.round(minutes / 60)} h`;
+  else text = `${Math.round(minutes / 1440)} days`;
+  return future ? 'in ' + text : text + ' ago';
+}
 function relTime(iso) {
+  if (!iso || String(iso).startsWith('0001')) return '';
   const t = Date.parse(iso);
-  if (!iso || isNaN(t) || String(iso).startsWith('0001')) return '';
-  const diff = Math.round((Date.now() - t) / 1000);
-  const abs = Math.abs(diff);
-  let text;
-  if (abs < 45) text = 'just now';
-  else if (abs < 3600) text = Math.round(abs / 60) + ' min';
-  else if (abs < 86400) text = Math.round(abs / 3600) + ' h';
-  else text = Math.round(abs / 86400) + ' day' + (Math.round(abs / 86400) === 1 ? '' : 's');
-  if (text === 'just now') return text;
-  return diff >= 0 ? text + ' ago' : 'in ' + text;
+  if (isNaN(t)) return String(iso);
+  return ageText(Math.round((Date.now() - t) / 1000));
 }
 
 // ── Confirm dialog (2026-11 rework) ──
@@ -582,6 +598,17 @@ document.addEventListener('alpine:init', () => {
   Alpine.store('router').restore();
   window.addEventListener('popstate', () => Alpine.store('router').restore());
 
+  // x-time="<iso>": relative text, exact time on hover (the one date helper).
+  if (Alpine.directive) {
+    Alpine.directive('time', (el, { expression }, { effect, evaluateLater }) => {
+      const read = evaluateLater(expression);
+      effect(() => read((iso) => {
+        el.textContent = relTime(iso) || '—';
+        if (iso && !String(iso).startsWith('0001')) el.title = formatObservedAt(iso); else el.removeAttribute('title');
+      }));
+    });
+  }
+
   Alpine.store('dialog', {
     current: null,
     values: {},
@@ -2548,7 +2575,7 @@ document.addEventListener('alpine:init', () => {
       return h ? String(h).slice(0, 12) : '';
     },
 
-    formatWhen(iso) { return iso ? formatObservedAt(iso) : ''; },
+    formatWhen(iso) { return relTime(iso); },
 
     openRestoreTests() {
       Alpine.store('router').navigate('backups', { tab: 'restore-tests' });
@@ -2825,9 +2852,7 @@ document.addEventListener('alpine:init', () => {
       };
     },
 
-    formatDate(d) {
-      return new Date(d).toLocaleString();
-    },
+    formatDate(d) { return relTime(d); },
   }));
 
   // ── Servers Page ──
@@ -3195,7 +3220,7 @@ document.addEventListener('alpine:init', () => {
 
     fmtDate(d) {
       if (!d || String(d).startsWith('0001')) return 'never';
-      return new Date(d).toLocaleString();
+      return relTime(d);
     },
 
     async createMcpToken() {
@@ -3609,7 +3634,7 @@ document.addEventListener('alpine:init', () => {
     urlHelp(t) { return (CHANNEL_TYPES[t] || {}).help || ''; },
     credentialURL(t) { return t === 'slack' || t === 'discord'; },
     kindLabel(k) { return { incident_opened: 'opened', incident_repeat: 'reminders', incident_recovered: 'recovered' }[k] || k; },
-    formatDate(d) { return d ? new Date(d).toLocaleString() : ''; },
+    formatDate(d) { return relTime(d); },
 
     channelHealthText(ch) {
       const h = ch.health;
@@ -3787,7 +3812,7 @@ document.addEventListener('alpine:init', () => {
     },
     kindText(k) { return { incident_opened: 'Opened', incident_repeat: 'Reminder', incident_recovered: 'Recovered', summary: 'Summary', test: 'Test' }[k] || k; },
     deliveryClass(st) { return { delivered: 'green', pending: 'yellow', dead_lettered: 'red' }[st] || ''; },
-    formatDate(d) { return d ? new Date(d).toLocaleString() : ''; },
+    formatDate(d) { return relTime(d); },
 
     async addSilence() {
       const body = { scope: this.draft.scope, target: this.draft.scope === 'all' ? '' : (this.draft.target || '').trim(),
@@ -3883,13 +3908,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     ageLabel(seconds) {
-      if (seconds === undefined || seconds === null) return 'not checked';
-      if (seconds < 90) return 'just now';
-      const minutes = Math.round(seconds / 60);
-      if (minutes < 120) return `${minutes} min ago`;
-      const hours = Math.round(minutes / 60);
-      if (hours < 48) return `${hours} h ago`;
-      return `${Math.round(hours / 24)} days ago`;
+      return seconds === undefined || seconds === null ? 'not checked' : ageText(seconds);
     },
 
     serverProblem(s) {
@@ -4566,13 +4585,7 @@ document.addEventListener('alpine:init', () => {
     },
 
     ageLabel(seconds) {
-      if (seconds === undefined || seconds === null) return 'never';
-      if (seconds < 90) return 'just now';
-      const minutes = Math.round(seconds / 60);
-      if (minutes < 120) return `${minutes} min ago`;
-      const hours = Math.round(minutes / 60);
-      if (hours < 48) return `${hours} h ago`;
-      return `${Math.round(hours / 24)} days ago`;
+      return seconds === undefined || seconds === null ? 'never' : ageText(seconds);
     },
 
     bytesLabel(bytes) {
@@ -5045,13 +5058,7 @@ document.addEventListener('alpine:init', () => {
       return `${v >= 10 || u === 0 ? Math.round(v) : v.toFixed(1)} ${units[u]}`;
     },
     ageLabel(seconds) {
-      if (seconds === undefined || seconds === null) return 'never';
-      if (seconds < 90) return 'just now';
-      const minutes = Math.round(seconds / 60);
-      if (minutes < 120) return `${minutes} min ago`;
-      const hours = Math.round(minutes / 60);
-      if (hours < 48) return `${hours} h ago`;
-      return `${Math.round(hours / 24)} days ago`;
+      return seconds === undefined || seconds === null ? 'never' : ageText(seconds);
     },
     countsSummary(row) {
       const c = row.counts || {};
@@ -5332,19 +5339,16 @@ document.addEventListener('alpine:init', () => {
       return candidate.error || '';
     },
     ageLabel(seconds) {
-      if (seconds === undefined || seconds === null) return 'never';
-      if (seconds < 90) return 'just now';
-      const minutes = Math.round(seconds / 60);
-      if (minutes < 120) return `${minutes} min ago`;
-      const hours = Math.round(minutes / 60);
-      if (hours < 48) return `${hours} h ago`;
-      return `${Math.round(hours / 24)} days ago`;
+      return seconds === undefined || seconds === null ? 'never' : ageText(seconds);
     },
   }));
 
   // ── Monitors Page ──
   Alpine.data('monitorsPage', () => withAsyncLoad({
     monitors: [],
+    // Rule ids of monitors with an open incident (Alerts v2). Null when the
+    // incidents could not be read: the dot then falls back to the last check.
+    openIncidents: null,
     selectedMonitor: null,
     showCreateDialog: false,
     creating: false,
@@ -5442,9 +5446,13 @@ document.addEventListener('alpine:init', () => {
     async loadMonitors() {
       const generation = ++this._loadGeneration;
       try {
-        const data = await rawFetch.get('/api/monitors');
+        const [data, incidents] = await Promise.all([
+          rawFetch.get('/api/monitors'),
+          api.get('/api/alerts/incidents').catch(() => null),
+        ]);
         if (!this._alive || generation !== this._loadGeneration) return;
         this.monitors = data || [];
+        this.openIncidents = incidents ? arr(incidents.open).filter((i) => !i.source || i.source === 'monitor' || i.source === 'heartbeat').map((i) => i.rule_id) : null;
         this.loadError = null;
         this.loadedAt = new Date().toISOString();
       } catch (e) {
@@ -5632,9 +5640,23 @@ document.addEventListener('alpine:init', () => {
       return text + '.';
     },
 
+    // The dot is the CURRENT state: red while an incident is open or the
+    // newest check failed, green when the newest check passed, grey when
+    // paused or not checked yet. The 24h uptime stays as text beside it.
+    monitorState(m) {
+      if (m.enabled === false) return 'paused';
+      if (this.openIncidents && this.openIncidents.includes(m.id)) return 'down';
+      const c = m.last_check;
+      if (!c) return 'unknown';
+      return c.status === 'up' ? 'up' : 'down';
+    },
     getMonitorDot(m) {
-      if (!m.stats || m.stats.total_checks === 0) return 'gray';
-      return m.stats.uptime_percent >= 99 ? 'green' : m.stats.uptime_percent >= 95 ? 'yellow' : 'red';
+      return { up: 'green', down: 'red', paused: 'gray', unknown: 'gray' }[this.monitorState(m)];
+    },
+    monitorStateLabel(m) {
+      const c = m.last_check;
+      const when = c ? ' (checked ' + relTime(c.checked_at) + ')' : '';
+      return { up: 'Up now', down: 'Down now', paused: 'Paused', unknown: 'Not checked yet' }[this.monitorState(m)] + (this.monitorState(m) === 'paused' ? '' : when);
     },
 
     // ── Alert delivery status (D08) ──
@@ -5671,9 +5693,7 @@ document.addEventListener('alpine:init', () => {
       return Math.round(ns / 1000000) + 'ms';
     },
 
-    formatDate(d) {
-      return new Date(d).toLocaleString();
-    },
+    formatDate(d) { return relTime(d); },
   }));
 
   // ── Homepage ──
diff --git a/cmd/teploy-dash/frontend/js/operations.js b/cmd/teploy-dash/frontend/js/operations.js
index 9a9df9a..7b20f51 100644
--- a/cmd/teploy-dash/frontend/js/operations.js
+++ b/cmd/teploy-dash/frontend/js/operations.js
@@ -11,11 +11,11 @@ function opDuration(op) {
   return `${Math.floor(ms / 60000)}m ${Math.round((ms % 60000) / 1000)}s`;
 }
 
+// Operation times use the one date helper (relTime in app.js): relative
+// text here, the exact time in the title the templates set.
 function opWhen(iso) {
   if (!iso) return '—';
-  return new Date(iso).toLocaleString('en-US', {
-    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
-  });
+  return relTime(iso);
 }
 
 document.addEventListener('alpine:init', () => {
diff --git a/internal/server/monitors_test.go b/internal/server/monitors_test.go
index 542736a..6a0e968 100644
--- a/internal/server/monitors_test.go
+++ b/internal/server/monitors_test.go
@@ -1,9 +1,11 @@
 package server
 
 import (
+	"encoding/json"
 	"net/http/httptest"
 	"strings"
 	"testing"
+	"time"
 
 	"github.com/useteploy/teploy-dash/internal/store"
 )
@@ -111,3 +113,42 @@ func TestMonitorTCPTargetValidation(t *testing.T) {
 		t.Fatalf("valid tcp target: got %d, want 200 (%s)", w.Code, w.Body.String())
 	}
 }
+
+// The monitor list carries each monitor's newest check, so the list dot can
+// show the current state rather than the 24-hour uptime.
+func TestMonitorListCarriesLastCheck(t *testing.T) {
+	s := monitorsTestServer(t)
+	m := &store.Monitor{ID: "m1", Name: "M1", Type: "http", Target: "https://example.com", Interval: time.Minute, Timeout: 10 * time.Second, Enabled: true}
+	if err := s.store.SaveMonitor(m); err != nil {
+		t.Fatal(err)
+	}
+	now := time.Now().UTC().Truncate(time.Second)
+	for _, c := range []store.CheckResult{
+		{MonitorID: "m1", Status: "down", Message: "refused", CheckedAt: now, Incarnation: m.Incarnation},
+		{MonitorID: "m1", Status: "up", CheckedAt: now.Add(-time.Minute), Incarnation: m.Incarnation},
+	} {
+		if ok, err := s.store.SaveCheck(c); err != nil || !ok {
+			t.Fatalf("save check: %v %v", ok, err)
+		}
+	}
+	w := httptest.NewRecorder()
+	s.handleMonitors(w, httptest.NewRequest("GET", "/api/monitors", nil))
+	var list []map[string]any
+	if err := json.Unmarshal(w.Body.Bytes(), &list); err != nil || len(list) != 1 {
+		t.Fatalf("list = %s (%v)", w.Body.String(), err)
+	}
+	last, ok := list[0]["last_check"].(map[string]any)
+	if !ok || last["status"] != "down" || last["message"] != "refused" {
+		t.Fatalf("last_check = %v, want the newest (down) check", list[0]["last_check"])
+	}
+
+	fresh := monitorsTestServer(t)
+	if err := fresh.store.SaveMonitor(&store.Monitor{ID: "m2", Name: "M2", Type: "http", Target: "https://example.com", Interval: time.Minute, Timeout: 10 * time.Second}); err != nil {
+		t.Fatal(err)
+	}
+	w = httptest.NewRecorder()
+	fresh.handleMonitors(w, httptest.NewRequest("GET", "/api/monitors", nil))
+	if strings.Contains(w.Body.String(), "last_check") {
+		t.Fatalf("a monitor with no checks must not carry last_check: %s", w.Body.String())
+	}
+}
diff --git a/internal/server/server.go b/internal/server/server.go
index b04feab..3261d80 100644
--- a/internal/server/server.go
+++ b/internal/server/server.go
@@ -3856,6 +3856,9 @@ func (s *Server) handleMonitors(w http.ResponseWriter, r *http.Request) {
 			// Delivery exposes the monitor's last alert-delivery state (D08):
 			// pending/delivered/dead-lettered with the last failure.
 			Delivery *outbox.DeliveryStatus `json:"delivery,omitempty"`
+			// LastCheck is the newest check, so the list can show whether a
+			// monitor is down now (the 24h stats only say how it has been).
+			LastCheck *store.CheckResult `json:"last_check,omitempty"`
 		}
 
 		var result []monitorWithStats
@@ -3864,6 +3867,9 @@ func (s *Server) handleMonitors(w http.ResponseWriter, r *http.Request) {
 			mws := monitorWithStats{Monitor: m}
 			stats, _ := s.store.GetStats(m.ID, time.Now().Add(-24*time.Hour))
 			mws.Stats = stats
+			if last, err := s.store.GetChecks(m.ID, time.Time{}, 1); err == nil && len(last) > 0 {
+				mws.LastCheck = &last[0]
+			}
 			if s.outbox != nil {
 				mws.Delivery = s.outbox.LatestForMonitor(m.ID)
 			}

From c1075b3c3f61c25f372c076154d0d73903d09b5b Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 17:36:35 -0700
Subject: [PATCH 08/11] dash: phone layout for wide tables, status cards and
 tab strips

- Wide tables stack on phones (.stack-table): one block per row, the
  thing the row is about first, then the problem text, then the other
  cells with their column names. Applied to Domains (HTTP and "What is
  wrong" were cut off), Backups > Every target (everything after State
  was cut off), the merged restore tests, and the app's containers and
  accessories (Start/Stop were cut off).
- Status cards stay two to a row at 390px instead of one per row.
- Tab strips scroll sideways at every width and fade on the side that
  has more (x-scroll-hint), and the active tab scrolls into view; this
  covers the app's ten tabs, Settings, Backups and the hub tabs.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/nav_rework.test.mjs         | 13 ++++
 cmd/teploy-dash/frontend/css/style.css        | 34 +++++++++-
 cmd/teploy-dash/frontend/index.html           | 66 +++++++++----------
 cmd/teploy-dash/frontend/js/app.js            | 18 +++++
 4 files changed, 97 insertions(+), 34 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index 98063c8..34f0cbf 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -129,6 +129,19 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   assert(!html.includes("running: op.status === 'running' || op.status === 'succeeded'"), 'a running operation is not painted like a succeeded one');
 }
 
+// Phone layout: wide tables stack, status cards stay two-up, tab strips hint.
+{
+  assert(/@media \(max-width: 640px\) \{\s*\.table-wrap > table\.stack-table \{ display: block;/.test(css), 'stack-table rows become blocks on phones');
+  for (const marker of ['<th>What is wrong</th>', '<h2>Every target</h2>', '<!-- Accessories Table -->', '<th>Added by</th>']) {
+    const at = html.indexOf(marker);
+    assert(/<table class="stack-table"/.test(html.slice(Math.max(0, at - 1500), at + 1500)), `the table near ${marker} stacks on phones`);
+  }
+  assert(html.includes('class="stack-problem"') && html.includes("'stack-empty'"), 'the problem text leads a stacked row and empty ones drop');
+  assert(!/@media \(max-width: 400px\) \{\s*\.stats-grid, \.status-grid/.test(css), 'status cards stay two columns at phone width');
+  assert((html.match(/class="tabs[^"]*" x-scroll-hint/g) || []).length >= 4 && html.includes('class="hub-tabs" aria-label="Section pages" x-scroll-hint'), 'tab strips carry the scroll hint');
+  assert(js.includes("Alpine.directive('scroll-hint'") && css.includes('.more-right {'), 'the scroll hint fades the hidden side');
+}
+
 function finish() {
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 88e1c44..0ed4852 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -198,7 +198,14 @@ th { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--tex
 td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
 tr:last-child td { border-bottom: 0; }
 tbody tr:hover { background: var(--bg-card-hover); }
-.tabs { display: flex; margin: -4px 0 22px; gap: 4px; border-bottom: 1px solid var(--border); }
+.tabs { display: flex; margin: -4px 0 22px; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
+.tabs::-webkit-scrollbar { display: none; }
+.tab { flex: 0 0 auto; white-space: nowrap; }
+/* Scroll hint (x-scroll-hint): a tab strip that runs past its edge fades
+   out on that side, so hidden tabs read as "more this way". */
+.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
+.more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
+.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
 .tab { padding: 7px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 12px; }
 .tab:hover { color: var(--text); }
 .tab.active { border-bottom-color: var(--accent); color: var(--text); }
@@ -614,3 +621,28 @@ code { overflow-wrap: anywhere; }
 .preflight-check.check-fail.sev-warning .check-result { color: var(--yellow); }
 .preflight-check.check-unknown { border-left-color: var(--yellow); }
 .preflight-check.check-unknown .check-result { color: var(--yellow); }
+
+/* Phone tables (2026-11 rework): a .stack-table becomes one block per row.
+   The lead cell (what the row is) and the problem cell (what is wrong) come
+   first; other cells follow with their column name; .stack-inline cells sit
+   side by side; an empty problem cell is dropped. */
+@media (max-width: 640px) {
+  .table-wrap > table.stack-table { display: block; min-width: 0; }
+  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .stack-table tbody { display: block; }
+  .stack-table tr { display: flex; padding: 12px 14px; flex-wrap: wrap; gap: 4px 14px; border-top: 1px solid var(--border); }
+  .stack-table tbody tr:first-child { border-top: 0; }
+  .table-wrap > table.stack-table td, .table-wrap > table.stack-table td:first-child {
+    position: static; display: block; padding: 0; flex: 1 1 100%; min-width: 0;
+    min-width: 0; max-width: none; border: 0; box-shadow: none; background: none; white-space: normal; overflow-wrap: anywhere;
+  }
+  .table-wrap > table.stack-table tbody tr:hover td:first-child { background: none; }
+  .stack-table td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); font-size: 11px; }
+  .table-wrap > table.stack-table td.stack-inline { flex: 0 0 auto; }
+  .stack-table td.stack-lead { order: -2; }
+  .stack-table td.stack-lead > .mono:first-of-type, .stack-table td.stack-lead.mono { font-weight: 600; }
+  .stack-table td.stack-problem { order: -1; color: var(--text); }
+  .stack-table td.stack-empty { display: none; }
+  .table-wrap > table.stack-table td.row-actions { text-align: left; }
+  .stack-table .btn-row { justify-content: flex-start; }
+}
\ No newline at end of file
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index 3eab9c3..e7e20ca 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -130,7 +130,7 @@
   <!-- Hub tabs: Apps, Servers and Monitoring list pages share a tab strip;
        each tab is its own page with its own URL. -->
   <template x-if="$store.router.hubTabs">
-    <nav class="hub-tabs" aria-label="Section pages">
+    <nav class="hub-tabs" aria-label="Section pages" x-scroll-hint>
       <template x-for="ht in $store.router.hubTabs" :key="ht[0]">
         <a class="hub-tab" :href="$store.router.url(ht[0])" :class="{ active: $store.router.page === ht[0] }"
            :aria-current="$store.router.page === ht[0] ? 'page' : null"
@@ -716,7 +716,7 @@ <h1 class="page-title" x-text="app.name"></h1>
           <!-- Tabs. role=tablist/tab + aria-selected give screen readers the
                section semantics; Arrow Left/Right move between tabs (and
                activate, matching the click path). -->
-          <div class="tabs" role="tablist" aria-label="App sections"
+          <div class="tabs" x-scroll-hint role="tablist" aria-label="App sections"
                @keydown.arrow-right.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.nextElementSibling?.focus()"
                @keydown.arrow-left.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.previousElementSibling?.focus()">
             <button class="tab" :class="{ active: tab === 'general' }" role="tab" id="app-tab-general" aria-controls="app-panel-general" :aria-selected="(tab === 'general').toString()" :tabindex="tab === 'general' ? 0 : -1" @focus="switchTab('general')">General</button>
@@ -927,7 +927,7 @@ <h3 style="font-size: 15px;">Resources</h3>
                 <div>
                   <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
                   <div class="table-wrap">
-                    <table>
+                    <table class="stack-table">
                       <thead>
                         <tr>
                           <th>Name</th>
@@ -939,13 +939,13 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
                       <tbody>
                         <template x-for="c in app.containers" :key="c.ID">
                           <tr>
-                            <td style="font-family: var(--mono); font-size: 12px;" x-text="c.Name"></td>
-                            <td x-text="c.Image"></td>
-                            <td>
+                            <td class="stack-lead" style="font-family: var(--mono); font-size: 12px;" x-text="c.Name"></td>
+                            <td data-label="Image" x-text="c.Image"></td>
+                            <td class="stack-inline">
                               <span class="status-dot" :class="c.State === 'running' ? 'running' : 'stopped'" style="margin-right: 6px;"></span>
                               <span x-text="c.State"></span>
                             </td>
-                            <td x-text="c.Status"></td>
+                            <td class="stack-inline text-muted" x-text="c.Status"></td>
                           </tr>
                         </template>
                       </tbody>
@@ -959,7 +959,7 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
                 <div style="margin-top: 24px;">
                   <h3 style="margin-bottom: 12px; font-size: 15px;">Accessories</h3>
                   <div class="table-wrap">
-                    <table>
+                    <table class="stack-table">
                       <thead>
                         <tr>
                           <th>Name</th>
@@ -978,13 +978,13 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Accessories</h3>
                              "stopped". Correct on both ends, unwired in between. -->
                         <template x-for="a in accessories" :key="a.id">
                           <tr>
-                            <td style="font-family: var(--mono); font-size: 12px;" x-text="a.name"></td>
-                            <td x-text="a.image"></td>
-                            <td>
+                            <td class="stack-lead" style="font-family: var(--mono); font-size: 12px;" x-text="a.name"></td>
+                            <td data-label="Image" x-text="a.image"></td>
+                            <td class="stack-inline">
                               <span class="status-dot" :class="a.state === 'running' ? 'running' : 'stopped'" style="margin-right: 6px;"></span>
                               <span x-text="a.state"></span>
                             </td>
-                            <td>
+                            <td class="row-actions" style="text-align: left;">
                               <!-- D05: database actions are distinct operations with
                                    distinct confirmations — stop and start each state
                                    their own blast radius; the deeper classes (restart,
@@ -1885,7 +1885,7 @@ <h1 class="page-title">Domains</h1>
 
       <template x-if="!loading && visibleRows.length > 0">
         <div class="table-wrap">
-          <table>
+          <table class="stack-table">
             <thead>
               <tr>
                 <th>Domain</th>
@@ -1900,16 +1900,16 @@ <h1 class="page-title">Domains</h1>
             <tbody>
               <template x-for="row in visibleRows" :key="row.host">
                 <tr>
-                  <td>
+                  <td class="stack-lead">
                     <span class="status-dot dot" :class="dotClass(row.overall)"></span>
                     <span class="mono" x-text="row.host"></span>
                     <div class="text-muted" x-show="row.app || row.server" x-text="[row.app, row.server].filter(Boolean).join(' on ')"></div>
                   </td>
-                  <td :title="row.dns.detail" x-text="layerLabel(row.dns)"></td>
-                  <td :title="row.route.detail" x-text="layerLabel(row.route)"></td>
-                  <td :title="row.cert.detail" x-text="layerLabel(row.cert)"></td>
-                  <td :title="row.http.detail" x-text="layerLabel(row.http)"></td>
-                  <td>
+                  <td class="stack-inline" data-label="DNS" :title="row.dns.detail" x-text="layerLabel(row.dns)"></td>
+                  <td class="stack-inline" data-label="Route" :title="row.route.detail" x-text="layerLabel(row.route)"></td>
+                  <td class="stack-inline" data-label="Cert" :title="row.cert.detail" x-text="layerLabel(row.cert)"></td>
+                  <td class="stack-inline" data-label="HTTP" :title="row.http.detail" x-text="layerLabel(row.http)"></td>
+                  <td class="stack-problem" :class="{ 'stack-empty': !firstFailingLabel(row) && !row.evidence }">
                     <strong x-show="firstFailingLabel(row)" x-text="firstFailingLabel(row) + ': '"></strong>
                     <span x-text="row.evidence || ''"></span>
                   </td>
@@ -1942,7 +1942,7 @@ <h1 class="page-title">Backups</h1>
         </div>
       </div>
 
-      <div class="tabs tabs-scroll" role="tablist" aria-label="Backup sections"
+      <div class="tabs tabs-scroll" x-scroll-hint role="tablist" aria-label="Backup sections"
            @keydown.arrow-right.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.nextElementSibling?.focus()"
            @keydown.arrow-left.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.previousElementSibling?.focus()">
         <button class="tab" :class="{ active: tab === 'coverage' }" role="tab" id="bk-tab-coverage" :aria-selected="(tab === 'coverage').toString()" :tabindex="tab === 'coverage' ? 0 : -1" @click="setTab('coverage')" @focus="setTab('coverage')">Coverage</button>
@@ -2581,7 +2581,7 @@ <h2>Every target</h2>
             </template>
             <template x-if="rows.length > 0">
               <div class="table-wrap">
-                <table>
+                <table class="stack-table">
                   <thead>
                     <tr>
                       <th>Target</th>
@@ -2598,33 +2598,33 @@ <h2>Every target</h2>
                   <tbody>
                     <template x-for="row in rows" :key="row.server + '/' + row.name">
                       <tr>
-                        <td>
+                        <td class="stack-lead">
                           <span class="mono" x-text="row.name"></span>
                           <div class="text-muted" x-text="[row.app, row.server].filter(Boolean).join(' on ')"></div>
                           <div class="text-muted" x-show="row.uncovered_databases && row.uncovered_databases.length" x-text="'uncovered databases: ' + (row.uncovered_databases || []).join(', ')"></div>
                           <div class="text-muted" x-show="row.reason" x-text="row.reason"></div>
                         </td>
-                        <td x-text="row.engine || '—'"></td>
-                        <td>
+                        <td class="stack-inline" data-label="Engine" x-text="row.engine || '—'"></td>
+                        <td class="stack-problem">
                           <span class="dot" :class="coverageClass(row.state)"></span>
                           <span x-text="coverageLabel(row.state)"></span>
                           <span class="text-muted" x-show="row.own_schedule" title="This target has its own schedule; the policy leaves it alone"> own schedule</span>
                           <span class="text-muted" x-show="row.legacy_schedule" title="A pre-fleet-engine teploy cron line"> legacy</span>
                         </td>
-                        <td>
+                        <td data-label="Last good">
                           <span x-text="row.last_good ? ageLabel(row.last_good_age_seconds) : 'never'"></span>
                           <div class="text-muted" x-show="row.last_error" x-text="row.last_error"></div>
                         </td>
-                        <td x-text="bytesLabel(row.size_bytes)"></td>
-                        <td>
+                        <td class="stack-inline" data-label="Newest copy" x-text="bytesLabel(row.size_bytes)"></td>
+                        <td class="stack-inline" data-label="Encrypted">
                           <span class="dot" :class="row.encrypted ? 'green' : 'red'"></span>
                           <span x-text="row.encrypted ? 'yes' : 'no'"></span>
                         </td>
-                        <td>
+                        <td data-label="Restore test">
                           <span x-show="row.last_restore_test" x-text="!row.last_restore_test ? '' : (row.last_restore_test.ok ? 'passed ' : 'FAILED ') + ageLabel(Math.round((Date.now() - Date.parse(row.last_restore_test.at)) / 1000))"></span>
                           <span class="text-muted" x-show="!row.last_restore_test">never</span>
                         </td>
-                        <td x-show="hasHandwritten()">
+                        <td x-show="hasHandwritten()" data-label="Old job">
                           <template x-if="row.migration">
                             <span>
                               <span class="dot" :class="row.migration.ready ? 'green' : 'gray'"></span>
@@ -2728,7 +2728,7 @@ <h2 class="subpage-title">Restore tests</h2>
                 <tbody>
                   <template x-for="row in restoreTestRows(automaticTests(), tests)" :key="row.key">
                     <tr>
-                      <td data-label="Test">
+                      <td class="stack-lead">
                         <span class="mono" x-text="row.label"></span>
                         <span class="text-muted" x-show="row.engine" x-text="' ' + row.engine"></span>
                         <span class="badge" x-show="row.manual && !row.manual.enabled" style="opacity: .6;">disabled</span>
@@ -2742,7 +2742,7 @@ <h2 class="subpage-title">Restore tests</h2>
                           <span x-text="formatInterval(row.manual.interval_hours)"></span>
                         </template>
                       </td>
-                      <td data-label="Last result">
+                      <td class="stack-problem">
                         <span class="dot" :class="{ ok: 'green', failed: 'red', skipped: 'gray', never: 'gray' }[row.state]"></span>
                         <span x-text="row.lastText"></span>
                         <template x-if="row.auto && row.auto.history">
@@ -3456,7 +3456,7 @@ <h1 class="page-title" x-text="status.name"></h1>
           </div>
 
           <!-- Tabs (tablist semantics as on the app page). -->
-          <div class="tabs" role="tablist" aria-label="Server sections"
+          <div class="tabs" x-scroll-hint role="tablist" aria-label="Server sections"
                @keydown.arrow-right.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.nextElementSibling?.focus()"
                @keydown.arrow-left.prevent="$el.querySelector('[role=tab][aria-selected=true]')?.previousElementSibling?.focus()">
             <button class="tab" :class="{ active: tab === 'overview' }" role="tab" id="srv-tab-overview" aria-controls="srv-panel-overview" :aria-selected="(tab === 'overview').toString()" :tabindex="tab === 'overview' ? 0 : -1" @focus="switchTab('overview')">Overview</button>
@@ -4020,7 +4020,7 @@ <h1 class="page-title" x-text="op.request.kind + ' — ' + op.target"></h1>
         <h1 class="page-title">Settings</h1>
       </div>
 
-      <div class="tabs">
+      <div class="tabs" x-scroll-hint>
         <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'servers' }" @click="setTab('servers')">Servers</button>
         <button class="tab" :class="{ active: tab === 'groups' }" @click="setTab('groups')">Groups</button>
         <button x-show="isAdmin()" class="tab" :class="{ active: tab === 'notifications' }" @click="setTab('notifications')">Notifications</button>
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 983297f..10636c0 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -598,6 +598,24 @@ document.addEventListener('alpine:init', () => {
   Alpine.store('router').restore();
   window.addEventListener('popstate', () => Alpine.store('router').restore());
 
+  // x-scroll-hint on a horizontally scrolling strip: marks the sides that
+  // have more content (.more-left / .more-right), which the CSS fades.
+  if (Alpine.directive) {
+    Alpine.directive('scroll-hint', (el, _, { cleanup }) => {
+      const update = () => {
+        const max = el.scrollWidth - el.clientWidth;
+        el.classList.toggle('more-left', max > 1 && el.scrollLeft > 1);
+        el.classList.toggle('more-right', max > 1 && el.scrollLeft < max - 1);
+      };
+      el.addEventListener('scroll', update, { passive: true });
+      const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(update) : null;
+      if (ro) { ro.observe(el); for (const child of el.children) ro.observe(child); }
+      const active = el.querySelector('.active');
+      setTimeout(() => { if (active && active.scrollIntoView && el.scrollWidth > el.clientWidth) el.scrollLeft = Math.max(0, active.offsetLeft - 24); update(); }, 0);
+      cleanup(() => { el.removeEventListener('scroll', update); if (ro) ro.disconnect(); });
+    });
+  }
+
   // x-time="<iso>": relative text, exact time on hover (the one date helper).
   if (Alpine.directive) {
     Alpine.directive('time', (el, { expression }, { effect, evaluateLater }) => {

From 3a40926c64b35bcdecbcecd65f3fe83889db3dd6 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 17:47:21 -0700
Subject: [PATCH 09/11] dash: app General header and links between servers,
 apps, domains, monitors

App General tab:
- The running/stopped state sits beside the app name; the server and the
  domain are links under it (the domain no longer overflows a card).
- Start or Stop is shown by state (both when the state is unknown).
- Port, Locked and Maintenance fold from three cards into one line.
- Links to the app's uptime monitor and its domain-health row, with their
  current state (read from the cached monitor and domain lists).

Servers:
- Each card shows its app count, disk use and a cleanup line ("Audited,
  2 warnings (3 days ago)") that opens the server's Cleanup tab.
- Server detail's Overview lists the apps on that server (from the fleet
  sweep) and links to its cleanup report, Backups and Domains.
- Domain rows link to their app; a monitor's detail names and links the
  app it watches, and its card names it.

The remaining relative times (observed age, deployed, last successful
observation) use the shared date helper.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/nav_rework.test.mjs         |  16 +++
 .../frontend-test/resource_page.test.mjs      |   2 +-
 cmd/teploy-dash/frontend/css/style.css        |  13 ++
 cmd/teploy-dash/frontend/index.html           | 122 ++++++++++++++----
 cmd/teploy-dash/frontend/js/app.js            |  78 +++++++++--
 5 files changed, 194 insertions(+), 37 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index 34f0cbf..be50ef2 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -142,6 +142,22 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   assert(js.includes("Alpine.directive('scroll-hint'") && css.includes('.more-right {'), 'the scroll hint fades the hidden side');
 }
 
+// App General: state beside the name, links out, Start or Stop by state,
+// minor facts on one line. Servers, domains and monitors link both ways.
+{
+  const page = html.slice(html.indexOf("x-data=\"appDetailPage\""), html.indexOf('id="app-panel-env"'));
+  assert(page.includes('appState().label') && page.includes('class="state-pill"'), 'the app state sits beside its name');
+  assert(page.includes(':href="domainURL()"') && page.includes("navigate('server-detail', { name: app.server })"), 'domain and server are links');
+  assert(page.includes("appState().cls !== 'stopped'") && page.includes("appState().cls !== 'running'"), 'Start or Stop by state');
+  for (const label of ['<div class="status-label">Port</div>', '<div class="status-label">Locked</div>', '<div class="status-label">Maintenance</div>']) assert(!page.includes(label), 'folded into the facts line: ' + label);
+  assert(page.includes('related.monitor') && page.includes('related.domain'), 'links to the app monitor and domain row');
+  const servers = html.slice(html.indexOf('x-data="serversPage"'), html.indexOf('x-data="serverDetailPage"'));
+  assert(servers.includes('cleanupLine(s)') && servers.includes('diskOf(s)') && servers.includes('s.appCount'), 'server cards show apps, disk and cleanup');
+  assert(html.includes('<h2>On this server</h2>'), 'server detail links to its apps, cleanup, backups and domains');
+  assert(html.includes("navigate('app-detail', { server: row.server, name: row.app })"), 'domain rows link to the app');
+  assert(html.includes("navigate('app-detail', { server: selectedMonitor.monitor.server, name: selectedMonitor.monitor.app })"), 'a monitor links to its app');
+}
+
 function finish() {
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend-test/resource_page.test.mjs b/cmd/teploy-dash/frontend-test/resource_page.test.mjs
index 2ff6da9..594b996 100644
--- a/cmd/teploy-dash/frontend-test/resource_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/resource_page.test.mjs
@@ -67,7 +67,7 @@ alpineInitListeners.forEach((fn) => fn());
 
   page.app = { observed_at: minutesAgo(4), deployed_at: minutesAgo(90) };
   const age = page.observedAge();
-  assert(age === '4m ago', `observedAge = ${age}, want "4m ago"`);
+  assert(age === '4 min ago', `observedAge = ${age}, want "4 min ago"`);
   assert(page.lastChangeWhen().length > 0, 'lastChangeWhen renders a timestamp');
 
   page.app = { observed_at: '0001-01-01T00:00:00Z' };
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 0ed4852..d92b6cd 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -585,6 +585,19 @@ code { overflow-wrap: anywhere; }
 .btn-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
 .row-actions { text-align: right; white-space: nowrap; }
 
+/* App header: state beside the name, server and domain as links. */
+.app-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.state-pill { display: inline-flex; padding: 2px 9px; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: 12px; }
+.app-where a, .app-related a, .card-link, .quiet-link { color: var(--accent); text-decoration: none; }
+.app-where a:hover, .app-related a:hover, .card-link:hover, .quiet-link:hover { text-decoration: underline; }
+.app-where .mono { overflow-wrap: anywhere; }
+.app-facts { display: flex; margin: -12px 0 14px; flex-wrap: wrap; gap: 6px 18px; color: var(--text-secondary); font-size: 12px; }
+.app-facts a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
+.app-related { margin-top: 0; }
+.section .app-facts { margin: 0 0 12px; }
+.card-facts { display: flex; margin-top: 6px; gap: 12px; color: var(--text-secondary); font-size: 12px; }
+.card-link { display: inline-block; margin-top: 6px; font-size: 12px; }
+
 /* Hub tabs: the page-level tab strip of Apps, Servers and Monitoring. */
 .hub-tabs { display: flex; margin: -8px 0 22px; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
 .hub-tabs::-webkit-scrollbar { display: none; }
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index e7e20ca..f06c599 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -708,9 +708,19 @@ <h1 class="page-title" x-text="projectName"></h1>
           <template x-if="showingStale">
             <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
           </template>
-          <div class="page-header">
-            <h1 class="page-title" x-text="app.name"></h1>
-            <span class="card-meta" x-text="app.server"></span>
+          <div class="page-header app-header">
+            <div>
+              <div class="app-title-row">
+                <h1 class="page-title" x-text="app.name"></h1>
+                <span class="state-pill" :class="appState().cls"><span class="status-dot" :class="appState().cls"></span><span x-text="appState().label"></span></span>
+              </div>
+              <p class="subtitle app-where">
+                <span>on <a :href="'/servers/' + encodeURIComponent(app.server)" @click.prevent="$store.router.navigate('server-detail', { name: app.server })" x-text="app.server"></a></span>
+                <template x-if="app.domain">
+                  <span> · <a :href="domainURL()" target="_blank" rel="noopener" class="mono" x-text="app.domain"></a></span>
+                </template>
+              </p>
+            </div>
           </div>
 
           <!-- Tabs. role=tablist/tab + aria-selected give screen readers the
@@ -753,29 +763,13 @@ <h1 class="page-title" x-text="app.name"></h1>
                 </div>
                 <div class="status-item">
                   <div class="status-label">Deployed</div>
-                  <div class="status-value" style="font-size: 13px;" x-text="lastChangeWhen()"></div>
+                  <div class="status-value" style="font-size: 13px;" x-text="lastChangeWhen()" :title="app.deployed_at && !String(app.deployed_at).startsWith('0001') ? formatObservedAt(app.deployed_at) : null"></div>
                   <div class="card-meta" style="margin-top:4px;" x-text="observedAge() ? 'observed ' + observedAge() : 'observation age unknown'"></div>
                 </div>
-                <div class="status-item">
-                  <div class="status-label">Port</div>
-                  <div class="status-value mono" x-text="app.port || 'N/A'"></div>
-                </div>
                 <div class="status-item">
                   <div class="status-label">Containers</div>
                   <div class="status-value" x-text="containerCount()"></div>
                 </div>
-                <div class="status-item">
-                  <div class="status-label">Locked</div>
-                  <div class="status-value" x-text="app.locked ? 'Yes' : 'No'"></div>
-                </div>
-                <div class="status-item">
-                  <div class="status-label">Maintenance</div>
-                  <div class="status-value" x-text="app.maintenance ? 'On' : 'Off'"></div>
-                </div>
-                <div class="status-item">
-                  <div class="status-label">Domain</div>
-                  <div class="status-value mono" x-text="app.domain || 'N/A'"></div>
-                </div>
                 <!-- "Settings edited in" (spec §2.1): where this app's
                      configuration is changed. Only with a CLI that knows
                      config homes. -->
@@ -787,13 +781,43 @@ <h1 class="page-title" x-text="app.name"></h1>
                 </div>
               </div>
 
+              <!-- The minor facts on one line; the release and deploy above. -->
+              <p class="app-facts">
+                <span>Port <span class="mono" x-text="app.port || 'none'"></span></span>
+                <span :class="{ 'text-warn': app.locked }" x-text="app.locked ? 'Locked: deploys refused' : 'Not locked'"></span>
+                <span :class="{ 'text-warn': app.maintenance }" x-text="app.maintenance ? 'In maintenance' : 'Maintenance off'"></span>
+              </p>
+
+              <!-- Where else this app shows up: its uptime monitor and its
+                   domain-health row. -->
+              <p class="app-facts app-related">
+                <template x-if="related.monitor">
+                  <a :href="'/monitors/' + encodeURIComponent(related.monitor.id)" @click.prevent="$store.router.navigate('monitor-detail', { id: related.monitor.id })">
+                    <span class="dot" :class="related.monitor.last_check ? (related.monitor.last_check.status === 'up' ? 'green' : 'red') : 'gray'"></span>
+                    <span x-text="'Monitor: ' + (related.monitor.last_check ? (related.monitor.last_check.status === 'up' ? 'up' : 'down') : 'not checked yet')"></span>
+                  </a>
+                </template>
+                <template x-if="related.loaded && !related.monitor">
+                  <a href="/monitors" @click.prevent="$store.router.navigate('monitors')" x-text="related.monitorsRead ? 'No uptime monitor' : 'Uptime monitors'"></a>
+                </template>
+                <template x-if="related.domain">
+                  <a href="/domains" @click.prevent="$store.router.navigate('domains')">
+                    <span class="dot" :class="{ ok: 'green', warn: 'yellow', fail: 'red' }[related.domain.overall] || 'gray'"></span>
+                    <span x-text="'Domain health: ' + ({ ok: 'OK', warn: 'warning', fail: 'failing', unknown: 'unknown' }[related.domain.overall] || related.domain.overall)"></span>
+                  </a>
+                </template>
+                <template x-if="related.loaded && !related.domain && app.domain">
+                  <a href="/domains" @click.prevent="$store.router.navigate('domains')">Domain health</a>
+                </template>
+              </p>
+
               <!-- Partial observation errors (D07 misleading states): the
                    status payload carries per-scope errors (e.g. container
                    listing failed while routes read fine). They were dropped
                    entirely — a partially-blind read painted as complete. -->
               <template x-if="app.errors && app.errors.length > 0">
                 <div role="alert" class="stale-banner" style="margin-bottom: 20px;">
-                  <strong>Partial observation</strong> — status read at <span x-text="observedWhen()"></span> with errors:
+                  <strong>Partial observation</strong> — status read <span x-text="observedWhen()" :title="app.observed_at ? formatObservedAt(app.observed_at) : null"></span> with errors:
                   <ul style="margin: 6px 0 0 16px;">
                     <template x-for="(err, i) in app.errors" :key="i">
                       <li><span class="mono" style="font-size: 12px;" x-text="err.scope"></span>: <span x-text="err.message"></span></li>
@@ -804,8 +828,9 @@ <h1 class="page-title" x-text="app.name"></h1>
 
               <div class="btn-group" style="margin-bottom: 8px;">
                 <button class="btn" x-show="app.port" @click="doAction('restart')" :disabled="actionLoading">Restart</button>
-                <button class="btn" x-show="app.port" @click="doAction('stop')" :disabled="actionLoading">Stop</button>
-                <button class="btn" x-show="app.port" @click="doAction('start')" :disabled="actionLoading">Start</button>
+                <!-- Start or Stop by state; both when the state is unknown. -->
+                <button class="btn" x-show="app.port && appState().cls !== 'stopped'" @click="doAction('stop')" :disabled="actionLoading">Stop</button>
+                <button class="btn" x-show="app.port && appState().cls !== 'running'" @click="doAction('start')" :disabled="actionLoading">Start</button>
                 <button class="btn" @click="doAction('rollback')" :disabled="actionLoading">Rollback</button>
                 <!-- D5: redeploy the current release with env re-resolved —
                      how a secret or env edit reaches containers. -->
@@ -1903,7 +1928,11 @@ <h1 class="page-title">Domains</h1>
                   <td class="stack-lead">
                     <span class="status-dot dot" :class="dotClass(row.overall)"></span>
                     <span class="mono" x-text="row.host"></span>
-                    <div class="text-muted" x-show="row.app || row.server" x-text="[row.app, row.server].filter(Boolean).join(' on ')"></div>
+                    <div class="text-muted" x-show="row.app || row.server">
+                      <template x-if="row.app && row.server"><a class="quiet-link" :href="'/deployments/' + encodeURIComponent(row.server) + '/' + encodeURIComponent(row.app)" @click.prevent="$store.router.navigate('app-detail', { server: row.server, name: row.app })" x-text="row.app"></a></template>
+                      <template x-if="!(row.app && row.server)"><span x-text="row.app"></span></template>
+                      <span x-show="row.server" x-text="(row.app ? ' on ' : '') + row.server"></span>
+                    </div>
                   </td>
                   <td class="stack-inline" data-label="DNS" :title="row.dns.detail" x-text="layerLabel(row.dns)"></td>
                   <td class="stack-inline" data-label="Route" :title="row.route.detail" x-text="layerLabel(row.route)"></td>
@@ -2982,6 +3011,7 @@ <h1 class="page-title">Uptime</h1>
                     </div>
                   </div>
                   <div class="monitor-target" x-text="m.target"></div>
+                  <div class="monitor-meta" x-show="m.app"><span x-text="'app ' + m.app + (m.server ? ' on ' + m.server : '')"></span></div>
                   <div class="monitor-meta">
                     <span x-text="'Every ' + formatInterval(m.interval)"></span>
                     <span x-show="m.stats" x-text="m.stats ? 'Avg ' + fmtMs(m.stats.avg_response) : ''"></span>
@@ -3130,9 +3160,16 @@ <h1 class="page-title">Alerts</h1>
         <div>
           <div class="page-header">
             <div>
-              <a href="/monitors" class="back-link" @click.prevent="openList()">&larr; Monitors</a>
+              <a href="/monitors" class="back-link" @click.prevent="openList()">&larr; Uptime</a>
               <h1 class="page-title" x-text="selectedMonitor?.monitor?.name"></h1>
               <p class="subtitle" x-text="selectedMonitor?.monitor?.target"></p>
+              <template x-if="selectedMonitor?.monitor?.app">
+                <p class="subtitle">Watches
+                  <a x-show="selectedMonitor.monitor.server" :href="'/deployments/' + encodeURIComponent(selectedMonitor.monitor.server || '') + '/' + encodeURIComponent(selectedMonitor.monitor.app)" @click.prevent="$store.router.navigate('app-detail', { server: selectedMonitor.monitor.server, name: selectedMonitor.monitor.app })" x-text="selectedMonitor.monitor.app"></a>
+                  <span x-show="!selectedMonitor.monitor.server" x-text="selectedMonitor.monitor.app"></span>
+                  <span x-show="selectedMonitor.monitor.server" x-text="'on ' + selectedMonitor.monitor.server"></span>
+                </p>
+              </template>
             </div>
             <div class="header-actions" style="display: flex; gap: 8px; align-items: center;">
               <label style="display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer;">
@@ -3418,8 +3455,13 @@ <h1 class="page-title">Servers</h1>
                      fleet envelope is unavailable (s.freshness null). -->
                 <span class="freshness-chip" :class="s.freshness" x-show="s.freshness" x-text="freshnessLabel(s)"></span>
               </div>
-              <div class="card-meta" x-text="s.host"></div>
-              <div class="card-hash" x-text="s.role === 'lb' ? 'Load Balancer' : 'Standard'"></div>
+              <div class="card-meta" x-text="s.host + (s.role === 'lb' ? ' · load balancer' : '')"></div>
+              <div class="card-facts">
+                <span x-show="s.appCount !== null" x-text="s.appCount + ' app' + (s.appCount === 1 ? '' : 's')"></span>
+                <span x-show="diskOf(s)" :class="{ 'text-warn': diskOf(s) && diskOf(s).used_percent >= 85 }" x-text="diskOf(s) ? 'disk ' + diskOf(s).used_percent + '%' : ''"></span>
+              </div>
+              <a class="card-link" x-show="cleanupLine(s)" :href="'/servers/' + encodeURIComponent(s.name) + '?tab=cleanup'"
+                 @click.prevent.stop="$store.router.navigate('server-detail', { name: s.name, tab: 'cleanup' })" x-text="cleanupLine(s)"></a>
               <!-- D01: an unreachable server stays visible with its exact
                    error and its last-known state. -->
               <template x-if="s.error">
@@ -3478,6 +3520,7 @@ <h1 class="page-title" x-text="status.name"></h1>
                 </div>
               </div>
 
+
               <!-- Memory -->
               <div style="margin-bottom: 16px;">
                 <div style="display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px;">
@@ -3534,6 +3577,31 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
               <template x-if="!status.containers || status.containers.length === 0">
                 <div class="empty-state"><p>No containers running on this server.</p></div>
               </template>
+
+              <!-- On this server: its apps, and the cross-cutting pages
+                   filtered to it. -->
+              <div class="section" style="margin-top: 28px;">
+                <h2>On this server</h2>
+                <p class="app-facts">
+                  <a :href="'/servers/' + encodeURIComponent(name) + '?tab=cleanup'" @click.prevent="switchTab('cleanup')">Cleanup report</a>
+                  <a href="/backups" @click.prevent="$store.router.navigate('backups')">Backups</a>
+                  <a href="/domains" @click.prevent="$store.router.navigate('domains')">Domains</a>
+                </p>
+                <template x-if="apps === null && !appsError"><p class="card-meta">Reading apps…</p></template>
+                <template x-if="appsError"><p class="card-meta" x-text="'Apps could not be read: ' + appsError"></p></template>
+                <template x-if="apps && apps.length === 0"><p class="card-meta">No apps on this server yet.</p></template>
+                <template x-if="apps && apps.length > 0">
+                  <div class="status-list">
+                    <template x-for="a in apps" :key="a.name">
+                      <a class="status-row" :href="'/deployments/' + encodeURIComponent(name) + '/' + encodeURIComponent(a.name)" @click.prevent="$store.router.navigate('app-detail', { server: name, name: a.name })">
+                        <span class="status-dot" :class="a.status === 'running' ? 'running' : (a.status === 'stopped' ? 'stopped' : 'idle')"></span>
+                        <span class="status-row-main"><span class="status-row-title" x-text="a.name"></span><span class="status-row-detail mono" x-show="a.domain" x-text="a.domain"></span></span>
+                        <span class="status-row-meta" x-text="a.status || ''"></span>
+                      </a>
+                    </template>
+                  </div>
+                </template>
+              </div>
             </div>
           </template>
 
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 10636c0..5448928 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -1240,6 +1240,7 @@ document.addEventListener('alpine:init', () => {
   // ── App Detail Page ──
   Alpine.data('appDetailPage', () => withAsyncLoad({
     tab: 'general',
+    related: { loaded: false, monitor: null, domain: null },
     // resource is the IMMUTABLE identity this page was opened for (A49).
     // Every path and destructive action reads it — never the live router
     // params, which already point at the NEXT app the moment the user
@@ -1396,6 +1397,7 @@ document.addEventListener('alpine:init', () => {
     activateResource(params) {
       this.resource = Object.freeze({server: params.server, name: params.name});
       this.tab = 'general';
+      this.related = { loaded: false, monitor: null, domain: null };
       this.app = null;
       this.envVars = [];
       this.configAuthority = null;
@@ -1458,6 +1460,34 @@ document.addEventListener('alpine:init', () => {
       this.loadDrift();
       this.loadStats();
       this.loadConfigAuthority();
+      this.loadRelated();
+    },
+
+    // The app's monitor and domain-health row (cached reads, no SSH), for
+    // the links on the General tab. A failed read just leaves the plain
+    // page links; it never claims the app is healthy.
+    async loadRelated() {
+      const target = this.resource;
+      if (!target) return;
+      const [monitors, domains] = await Promise.all([
+        rawFetch.get('/api/monitors').catch(() => null),
+        api.get('/api/domains').catch(() => null),
+      ]);
+      if (this.resource !== target) return;
+      const monitor = arr(monitors).find((m) => m.app === target.name && (!m.server || m.server === target.server)) || null;
+      const domain = arr(domains && domains.rows).find((r) => r.app === target.name && (!r.server || r.server === target.server)) || null;
+      this.related = { loaded: true, monitor, domain, monitorsRead: !!monitors, domainsRead: !!domains };
+    },
+    // Running / stopped / unknown, from the observed status.
+    appState() {
+      const st = (this.app && this.app.status) || '';
+      if (st === 'running') return { cls: 'running', label: 'Running' };
+      if (['stopped', 'exited', 'dead', 'created'].includes(st)) return { cls: 'stopped', label: 'Stopped' };
+      return { cls: 'idle', label: st ? st.charAt(0).toUpperCase() + st.slice(1) : 'State unknown' };
+    },
+    domainURL() {
+      const d = this.app && this.app.domain;
+      return d ? (/^https?:\/\//.test(d) ? d : 'https://' + d) : '';
     },
 
     // The CLI's config-home answer for this app.
@@ -2567,17 +2597,13 @@ document.addEventListener('alpine:init', () => {
       if (!at || String(at).startsWith('0001')) return '';
       const ms = Date.now() - new Date(at).getTime();
       if (isNaN(ms) || ms < 0) return '';
-      const s = Math.floor(ms / 1000);
-      if (s < 60) return s + 's ago';
-      if (s < 3600) return Math.floor(s / 60) + 'm ago';
-      if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-      return Math.floor(s / 86400) + 'd ago';
+      return relTime(at);
     },
 
     observedWhen() {
       const at = this.app?.observed_at;
       if (!at || String(at).startsWith('0001')) return 'unknown';
-      return formatObservedAt(at);
+      return relTime(at);
     },
 
     // The most recent change line: when this release landed and what it
@@ -2586,7 +2612,7 @@ document.addEventListener('alpine:init', () => {
     lastChangeWhen() {
       const at = this.app?.deployed_at;
       if (!at || String(at).startsWith('0001')) return 'not recorded';
-      return formatObservedAt(at);
+      return relTime(at);
     },
 
     shortHash(h) {
@@ -2882,6 +2908,7 @@ document.addEventListener('alpine:init', () => {
   // cards render exactly as before, and /api/apps consumers are untouched.
   Alpine.data('serversPage', () => withAsyncLoad({
     servers: [],
+    audits: {},
     loading: true,
 
     async init() {
@@ -2900,7 +2927,11 @@ document.addEventListener('alpine:init', () => {
         // The fleet envelopes carry each server's truth; a failure here must
         // not take the page down (additive switch — D01): cards render
         // without freshness chrome instead.
-        const fleet = await api.get('/api/fleet').catch(() => null);
+        const [fleet, cleanup] = await Promise.all([
+          api.get('/api/fleet').catch(() => null),
+          api.get('/api/cleanup').catch(() => null),
+        ]);
+        this.audits = Object.fromEntries(arr(cleanup && cleanup.servers).map((row) => [row.server, row]));
         const observed = new Map(((fleet && fleet.servers) || []).map(env => [env.server, env]));
         const merged = (Array.isArray(raw) ? raw : Object.entries(raw).map(([name, s]) => ({ name, ...s })))
           .map(s => withObservation(s, observed.get(s.name)));
@@ -2925,6 +2956,20 @@ document.addEventListener('alpine:init', () => {
     freshnessLabel(s) {
       return ({ fresh: 'Fresh', stale: 'Stale', unknown: 'Unknown' })[s.freshness] || '';
     },
+    // The card's cleanup line, from the server's last cached audit.
+    cleanupLine(s) {
+      const a = (this.audits || {})[s.name];
+      if (!a) return '';
+      if (a.state === 'never') return 'Cleanup: not audited yet';
+      if (a.state === 'unreachable') return 'Cleanup: last audit could not reach it';
+      const n = ((a.counts && a.counts.critical) || 0) + ((a.counts && a.counts.warning) || 0);
+      const head = a.state === 'ok' ? 'Audited' : a.state === 'stale' ? 'Audit is stale' : 'Partly audited';
+      return 'Cleanup: ' + head + (n ? ', ' + n + ' warning' + (n === 1 ? '' : 's') : ', no warnings') + (a.age_seconds != null ? ' (' + ageText(a.age_seconds) + ')' : '');
+    },
+    diskOf(s) {
+      const a = (this.audits || {})[s.name];
+      return a && a.disk ? a.disk : null;
+    },
 
     // The dot reflects observation truth when the fleet answered, and the
     // legacy online flag otherwise.
@@ -2942,7 +2987,7 @@ document.addEventListener('alpine:init', () => {
       if (s.appCount !== null && s.appCount !== undefined) {
         parts.push(`${s.appCount} app${s.appCount === 1 ? '' : 's'} (last known)`);
       }
-      if (s.lastSuccessAt) parts.push(`last successful observation ${formatObservedAt(s.lastSuccessAt)}`);
+      if (s.lastSuccessAt) parts.push(`last successful observation ${relTime(s.lastSuccessAt)}`);
       else parts.push('never observed successfully');
       return parts.join(' — ');
     },
@@ -2974,6 +3019,8 @@ document.addEventListener('alpine:init', () => {
     proxy: null,
     tab: 'overview',
     loading: true,
+    apps: null,
+    appsError: '',
 
     name: '', generation: 0, destroyed: false,
     routeIdentity() { const r = Alpine.store('router'); return r.page === 'server-detail' ? r.params.name : ''; },
@@ -2999,10 +3046,23 @@ document.addEventListener('alpine:init', () => {
       this.generation++; this.name = this.routeIdentity(); this.status = null; this.proxy = null; this.tab = 'overview';
       if (this.name) await this.reload();
     },
+    // The apps the last fleet sweep saw on this server (cached, no SSH), for
+    // the "On this server" links. Null until read; a failed read says so.
+    async loadApps() {
+      const generation = this.generation, name = this.name;
+      try {
+        const fleet = await api.get('/api/fleet');
+        if (!this.current(generation)) return;
+        const env = arr(fleet && fleet.servers).find((e) => e.server === name);
+        this.apps = env ? arr(env.apps).map((a) => ({ name: a.app || a.name, status: a.status, domain: a.domain })) : [];
+        this.appsError = '';
+      } catch (e) { if (this.current(generation)) this.appsError = e.message; }
+    },
     async reload() {
       const generation = this.generation, name = this.name;
       if (!this.current(generation)) return;
       this.loading = true;
+      this.loadApps();
       try {
         const status = await api.get(`/api/servers/${encodeURIComponent(name)}/status`);
         if (!this.current(generation)) return;

From ddb08db8f0add3b53307f5529d9a1e2a6edb0eba Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 18:02:22 -0700
Subject: [PATCH 10/11] dash: Git sources rebuilt, with delete

The Sources page read as unfinished; as Settings > Git sources it is now:
- a table like the other pages (repository, forge, branch, credential
  state as a coloured dot with a readable label and the degrade reason);
- the selected source's detail above the add form, with the full webhook
  URL, verify and rotate actions, and recent deliveries as a table;
- a Delete action through the confirm dialog (DELETE /api/sources/{id},
  which the API already had);
- help text for "Provider name" (an entry in the source-provider file on
  the Dash host; Dash stores only the name);
- a link to it from each app's Repository tab.

Also: tab strips keep the active tab in view when it changes or when
hidden tabs appear, and stacked rows bold only the row's name.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../frontend-test/nav_rework.test.mjs         |  14 ++
 .../frontend-test/sources_page.test.mjs       |  15 ++
 cmd/teploy-dash/frontend/css/style.css        |  17 ++-
 cmd/teploy-dash/frontend/index.html           | 136 ++++++++++++++----
 cmd/teploy-dash/frontend/js/app.js            |  47 +++++-
 5 files changed, 191 insertions(+), 38 deletions(-)

diff --git a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
index be50ef2..061c46c 100644
--- a/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -158,6 +158,20 @@ assert(/\.field input\[type="checkbox"\][^{]*\{[^}]*width: auto/.test(css), 'fie
   assert(html.includes("navigate('app-detail', { server: selectedMonitor.monitor.server, name: selectedMonitor.monitor.app })"), 'a monitor links to its app');
 }
 
+// Git sources: a table with credential state, detail above the form, delete
+// through the confirm dialog, help for "Provider name", and a link from the
+// app's Repository tab.
+{
+  const tab = html.slice(html.indexOf('x-data="sourcesPage"'), html.indexOf('</form>', html.indexOf('x-data="sourcesPage"')));
+  assert(tab.includes('<table class="stack-table">') && tab.includes('verdictLabel(src.credential_verdict)'), 'sources list as a table with readable credential states');
+  assert(tab.indexOf('class="card source-detail"') < tab.indexOf('class="card source-form"'), 'the selected source sits above the add form');
+  assert(tab.includes('@click="remove(src)"') && js.includes('await api.del(`/api/sources/${encodeURIComponent(src.id)}`)'), 'a source can be deleted');
+  assert(tab.includes('TEPLOY_DASH_SOURCE_PROVIDERS'), 'Provider name is explained');
+  assert((html.match(/@submit\.prevent="create\(\)" class="card source-form"/g) || []).length === 1 && !html.includes('>Add repository</h2>'), 'one add form, the old one is gone');
+  const repo = html.slice(html.indexOf('id="app-panel-repository"'), html.indexOf('id="app-panel-repository"') + 600);
+  assert(repo.includes("navigate('settings', { tab: 'git-sources' })"), 'the Repository tab links to Git sources');
+}
+
 function finish() {
 if (failures.length) { console.error(`FAIL (${failures.length}):`); failures.forEach((f) => console.error('  - ' + f)); process.exit(1); }
 console.log('nav_rework.test: all assertions passed');
diff --git a/cmd/teploy-dash/frontend-test/sources_page.test.mjs b/cmd/teploy-dash/frontend-test/sources_page.test.mjs
index 3177904..294ea49 100644
--- a/cmd/teploy-dash/frontend-test/sources_page.test.mjs
+++ b/cmd/teploy-dash/frontend-test/sources_page.test.mjs
@@ -48,3 +48,18 @@ for(const kind of ['create','verify']) for(const phase of ['post','list','detail
   await pending;assert.equal(p.webhookSecret,'');assert.equal(p.selected?.id,change==='destroy'?undefined:'new');
  });
 }
+test('deleting a source asks first, then sends DELETE and closes its detail', async () => {
+ const h = sourceHarness(), p = h.page('sourcesPage');
+ h.respond((url, options) => options.method === 'DELETE' ? { status: 204, ok: true, headers: new Headers(), text: async () => '' } : response(url === '/api/sources' ? [] : { id: url.split('/').at(-1) }));
+ await p.select('s1');
+ globalThis.confirm = () => false;
+ await p.remove({ id: 's1', clone_url: 'https://git.example.com/a.git' });
+ assert.equal(h.requests.filter(r => r.method === 'DELETE').length, 0, 'cancel sends nothing');
+ assert.equal(h.stores.dialog.opened.at(-1).danger, true);
+ globalThis.confirm = () => true;
+ await p.remove({ id: 's1', clone_url: 'https://git.example.com/a.git' });
+ assert.deepEqual(h.requests.filter(r => r.method === 'DELETE').map(r => r.url), ['/api/sources/s1']);
+ assert.equal(p.selected, null);
+ delete globalThis.confirm;
+ p.destroy();
+});
diff --git a/cmd/teploy-dash/frontend/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index d92b6cd..73eab00 100644
--- a/cmd/teploy-dash/frontend/css/style.css
+++ b/cmd/teploy-dash/frontend/css/style.css
@@ -351,15 +351,14 @@ a.status-row:hover { background: var(--bg-card-hover); }
 .progress-fill.high { background: var(--red); }
 
 /* Sources page: plain labelled fields, stacked. */
-.source-form, .source-detail { margin-top: 16px; cursor: default; }
+.source-form, .source-detail { margin: 0 0 16px; padding: 16px; cursor: default; }
 .source-form:hover, .source-detail:hover { border-color: var(--border); }
 .source-form .section-title { margin-bottom: 12px; }
-.source-form .field { display: block; color: var(--text-muted); font-size: 12px; font-weight: 500; }
-.source-form .field input, .source-form .field select { display: block; margin-top: 5px; }
-.source-card { display: flex; margin-top: 8px; min-height: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
-.source-detail h2 { margin-bottom: 8px; font-size: 14px; overflow-wrap: anywhere; }
-.source-detail h3 { margin: 14px 0 6px; font-size: 12px; }
-.source-detail p { margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }
+.source-form .card-meta { margin-top: 4px; }
+.source-detail h3 { font-size: 14px; overflow-wrap: anywhere; }
+.source-detail .section-title { font-size: 12px; }
+.source-url { display: block; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); font-size: 12px; overflow-wrap: anywhere; }
+tr.row-selected td { background: var(--accent-soft); }
 code { overflow-wrap: anywhere; }
 
 /* Pinned links inside the phone menu (see the 640px block). */
@@ -652,8 +651,8 @@ code { overflow-wrap: anywhere; }
   .table-wrap > table.stack-table tbody tr:hover td:first-child { background: none; }
   .stack-table td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); font-size: 11px; }
   .table-wrap > table.stack-table td.stack-inline { flex: 0 0 auto; }
-  .stack-table td.stack-lead { order: -2; }
-  .stack-table td.stack-lead > .mono:first-of-type, .stack-table td.stack-lead.mono { font-weight: 600; }
+  .stack-table td.stack-lead { order: -2; font-weight: 600; }
+  .stack-table td.stack-lead div { font-weight: 400; }
   .stack-table td.stack-problem { order: -1; color: var(--text); }
   .stack-table td.stack-empty { display: none; }
   .table-wrap > table.stack-table td.row-actions { text-align: left; }
diff --git a/cmd/teploy-dash/frontend/index.html b/cmd/teploy-dash/frontend/index.html
index f06c599..ad876af 100644
--- a/cmd/teploy-dash/frontend/index.html
+++ b/cmd/teploy-dash/frontend/index.html
@@ -1340,6 +1340,9 @@ <h3 class="settings-section" style="margin: 0;" x-text="'Settings at ' + shortHa
                CLI or a folder-home app shows nothing here. -->
           <template x-if="tab === 'repository'">
             <div role="tabpanel" id="app-panel-repository" aria-labelledby="app-tab-repository" tabindex="-1">
+              <p class="app-facts app-related" style="margin: 0 0 14px;">
+                <a href="/settings?tab=git-sources" @click.prevent="$store.router.navigate('settings', { tab: 'git-sources' })">Git sources: registered repositories and their webhooks</a>
+              </p>
               <template x-if="gitShowLoading && !gitShow">
                 <div class="loading"><div class="spinner"></div></div>
               </template>
@@ -4413,42 +4416,123 @@ <h2 class="section-title" style="margin-top: 24px;">Server reads</h2>
           <div class="page-header">
             <div>
               <h2 class="subpage-title">Git sources</h2>
-              <p class="subtitle">Register a repository so dash can receive and verify its webhook pushes. Provider names select credentials configured by the operator.</p>
+              <p class="subtitle">Repositories Dash receives push webhooks from. A verified push wakes the apps that build from the repository; each app's own poll decides what deploys. Apps connect to a repository on their Repository tab.</p>
             </div>
             <div class="header-actions">
-              <button class="btn" @click="load()" :disabled="loading">Refresh</button>
+              <button class="btn btn-sm" @click="load()" :disabled="loading">Refresh</button>
             </div>
           </div>
-          <p role="alert" class="stale-banner" x-show="loadError" x-text="loadError"></p>
+          <template x-if="loading && !sources.length">
+            <div class="loading"><div class="spinner"></div></div>
+          </template>
+          <p role="alert" class="stale-banner" x-show="loadError" x-text="(sources.length ? 'Showing the last list — refresh failed: ' : 'Git sources could not be read: ') + loadError"></p>
           <p role="alert" class="stale-banner" x-show="error" x-text="error"></p>
-          <p class="text-muted" x-show="!loading && !loadError && sources.length === 0">No sources configured.</p>
-          <template x-for="src in sources" :key="src.id">
-            <div class="card source-card">
-              <button class="btn" @click="select(src.id)" :disabled="busy" x-text="src.display_name || src.clone_url"></button>
-              <span x-text="src.credential_verdict"></span><span x-text="src.degrade_reason || ''"></span>
+
+          <template x-if="!loading && !loadError && sources.length === 0">
+            <div class="empty-state"><p>No git sources yet. Add a repository below to receive its push webhooks.</p></div>
+          </template>
+          <template x-if="sources.length > 0">
+            <div class="table-wrap" style="margin-bottom: 20px;">
+              <table class="stack-table">
+                <thead><tr><th>Repository</th><th>Forge</th><th>Branch</th><th>Credentials</th><th><span class="sr-only">Actions</span></th></tr></thead>
+                <tbody>
+                  <template x-for="src in sources" :key="src.id">
+                    <tr :class="{ 'row-selected': selected && selected.id === src.id }">
+                      <td class="stack-lead">
+                        <span x-text="src.display_name || src.clone_url"></span>
+                        <div class="text-muted mono" x-show="src.display_name" x-text="src.clone_url"></div>
+                      </td>
+                      <td class="stack-inline" data-label="Forge" x-text="src.forge || '—'"></td>
+                      <td class="stack-inline mono" data-label="Branch" x-text="src.default_branch || 'default'"></td>
+                      <td class="stack-problem">
+                        <span class="dot" :class="verdictClass(src.credential_verdict)"></span>
+                        <span x-text="verdictLabel(src.credential_verdict)"></span>
+                        <div class="text-muted" x-show="src.degrade_reason" x-text="src.degrade_reason"></div>
+                      </td>
+                      <td class="row-actions">
+                        <div class="btn-row">
+                          <button class="btn btn-sm" @click="selected && selected.id === src.id ? (selected = null, webhookSecret = '') : select(src.id)" :disabled="busy" :aria-expanded="!!(selected && selected.id === src.id)" x-text="selected && selected.id === src.id ? 'Close' : 'Details'"></button>
+                          <button class="btn btn-sm btn-danger" @click="remove(src)" :disabled="busy">Delete</button>
+                        </div>
+                      </td>
+                    </tr>
+                  </template>
+                </tbody>
+              </table>
             </div>
           </template>
-          <form @submit.prevent="create()" class="card source-form">
-            <h2 class="section-title">Add repository</h2>
-            <label class="field">Forge <select x-model="form.forge"><option>github</option><option>gitlab</option><option>forgejo</option><option>gitea</option><option>generic</option></select></label>
-            <label class="field">Clone URL <input type="url" required x-model="form.clone_url"></label>
-            <label class="field">Watched branch <input x-model="form.default_branch"></label>
-            <label class="field">Provider name <input required x-model="form.credential_ref" autocomplete="off"></label>
-            <label class="field">Display name <input x-model="form.display_name"></label>
-            <button type="submit" class="btn btn-primary" :disabled="busy">Add source</button>
-          </form>
+
+          <!-- The selected source's detail, above the add form. -->
           <template x-if="selected">
-            <section class="card source-detail">
-              <h2 x-text="selected.display_name || selected.clone_url"></h2>
-              <p>Webhook URL: <code x-text="selected.webhook_url"></code></p>
-              <button class="btn btn-sm" @click="action('verify')" :disabled="busy">Verify credentials</button>
-              <button class="btn btn-sm" @click="action('rotate-secret')" :disabled="busy">Rotate webhook secret</button>
-              <div x-show="webhookSecret"><p>Save this webhook secret now. It is shown once.</p><code x-text="webhookSecret"></code><button class="btn btn-sm" @click="webhookSecret = ''">Hide</button></div>
-              <h3>Recent deliveries</h3>
-              <template x-for="delivery in selected.deliveries || []" :key="delivery.id + delivery.received_at"><p><code x-text="delivery.commit"></code> <span x-text="delivery.disposition"></span> <span x-text="delivery.reason"></span></p></template>
-              <p class="card-meta">Pushes to a repository an app builds from wake that app's server-side poll (which decides what deploys); every authenticated push is recorded here.</p>
+            <section class="card source-detail" aria-labelledby="source-detail-title">
+              <div class="home-section-head">
+                <h3 id="source-detail-title" x-text="selected.display_name || selected.clone_url"></h3>
+                <span class="text-muted" x-text="selected.forge"></span>
+              </div>
+              <div class="field">
+                <label>Webhook URL</label>
+                <code class="mono source-url" x-text="webhookAbsolute(selected.webhook_url)"></code>
+                <p class="card-meta">Add this as a push webhook on the forge, with the webhook secret Dash showed when the source was created or last rotated.</p>
+              </div>
+              <div x-show="webhookSecret" class="info-banner" role="status">
+                <span>Save this webhook secret now. It is shown once: <code class="mono" x-text="webhookSecret"></code></span>
+                <button class="btn btn-sm" @click="webhookSecret = ''">Hide</button>
+              </div>
+              <div class="btn-row" style="justify-content: flex-start; margin: 10px 0 16px;">
+                <button class="btn btn-sm" @click="action('verify')" :disabled="busy">Verify credentials</button>
+                <button class="btn btn-sm" @click="action('rotate-secret')" :disabled="busy">Rotate webhook secret</button>
+              </div>
+              <h3 class="section-title" style="margin-bottom: 8px;">Recent deliveries</h3>
+              <template x-if="!(selected.deliveries || []).length"><p class="card-meta">No pushes received yet.</p></template>
+              <template x-if="(selected.deliveries || []).length">
+                <div class="table-wrap">
+                  <table class="stack-table">
+                    <thead><tr><th>Received</th><th>Commit</th><th>Result</th></tr></thead>
+                    <tbody>
+                      <template x-for="delivery in selected.deliveries" :key="delivery.id + delivery.received_at">
+                        <tr>
+                          <td class="stack-lead" x-time="delivery.received_at"></td>
+                          <td class="stack-inline mono" data-label="Commit" x-text="(delivery.commit || '').slice(0, 12) || '—'"></td>
+                          <td class="stack-problem"><span x-text="delivery.disposition"></span> <span class="text-muted" x-show="delivery.reason" x-text="'— ' + delivery.reason"></span></td>
+                        </tr>
+                      </template>
+                    </tbody>
+                  </table>
+                </div>
+              </template>
+              <p class="card-meta" style="margin-top: 10px;">Every authenticated push is recorded here. A push to a repository an app builds from wakes that app's server-side poll, which decides what deploys.</p>
             </section>
           </template>
+
+          <form @submit.prevent="create()" class="card source-form" aria-labelledby="source-add-title">
+            <h3 id="source-add-title" class="section-title">Add a repository</h3>
+            <div class="field-row">
+              <div class="field">
+                <label for="source-forge">Forge</label>
+                <select id="source-forge" x-model="form.forge"><option>github</option><option>gitlab</option><option>forgejo</option><option>gitea</option><option>generic</option></select>
+              </div>
+              <div class="field">
+                <label for="source-branch">Watched branch</label>
+                <input id="source-branch" x-model="form.default_branch" placeholder="main">
+              </div>
+            </div>
+            <div class="field">
+              <label for="source-url">Clone URL</label>
+              <input id="source-url" type="url" required x-model="form.clone_url" placeholder="https://git.example.com/me/shop.git">
+            </div>
+            <div class="field-row">
+              <div class="field">
+                <label for="source-provider">Provider name</label>
+                <input id="source-provider" required x-model="form.credential_ref" autocomplete="off" placeholder="github-main">
+                <p class="card-meta">The name of an entry in the source-provider file on the Dash host (set by TEPLOY_DASH_SOURCE_PROVIDERS), which holds this forge's token or app credentials. Dash stores only the name, never a token.</p>
+              </div>
+              <div class="field">
+                <label for="source-display">Display name (optional)</label>
+                <input id="source-display" x-model="form.display_name" placeholder="shop">
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary" :disabled="busy">Add source</button>
+          </form>
         </div>
       </template>
 
diff --git a/cmd/teploy-dash/frontend/js/app.js b/cmd/teploy-dash/frontend/js/app.js
index 5448928..1980918 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -610,9 +610,22 @@ document.addEventListener('alpine:init', () => {
       el.addEventListener('scroll', update, { passive: true });
       const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(update) : null;
       if (ro) { ro.observe(el); for (const child of el.children) ro.observe(child); }
-      const active = el.querySelector('.active');
-      setTimeout(() => { if (active && active.scrollIntoView && el.scrollWidth > el.clientWidth) el.scrollLeft = Math.max(0, active.offsetLeft - 24); update(); }, 0);
-      cleanup(() => { el.removeEventListener('scroll', update); if (ro) ro.disconnect(); });
+      // Keep the active tab in view: on open (its class lands after this
+      // runs) and whenever the active tab changes.
+      let shown = null, shownAt = -1;
+      const reveal = () => {
+        const active = el.querySelector('.active');
+        if (active && (active !== shown || active.offsetLeft !== shownAt)) {
+          shown = active; shownAt = active.offsetLeft;
+          const left = active.offsetLeft - el.offsetLeft, right = left + active.offsetWidth;
+          if (left < el.scrollLeft || right > el.scrollLeft + el.clientWidth) el.scrollLeft = Math.max(0, left - 24);
+        }
+        update();
+      };
+      const mo = typeof MutationObserver === 'function' ? new MutationObserver(reveal) : null;
+      if (mo) mo.observe(el, { attributes: true, attributeFilter: ['class', 'style'], subtree: true, childList: true });
+      setTimeout(reveal, 0);
+      cleanup(() => { el.removeEventListener('scroll', update); if (ro) ro.disconnect(); if (mo) mo.disconnect(); });
     });
   }
 
@@ -3545,6 +3558,34 @@ document.addEventListener('alpine:init', () => {
       } catch (e) { if (this.alive(generation)) this.error = e.message; }
       finally { if (!this.destroyed) this.busy = false; }
     },
+    // Delete a registered source after the confirm dialog. Its webhook URL
+    // stops accepting pushes; apps keep their git settings.
+    async remove(src) {
+      if (this.destroyed || this.busy) return;
+      const label = src.display_name || src.clone_url;
+      if (!(await askConfirm({ title: `Delete the git source ${label}?`, danger: true, confirmLabel: 'Delete source',
+        message: 'Its webhook URL stops accepting pushes, so pushes no longer wake the apps that build from it. The repository itself is not touched.' }))) return;
+      this.busy = true; this.error = '';
+      try {
+        await api.del(`/api/sources/${encodeURIComponent(src.id)}`);
+        if (this.destroyed) return;
+        if (this.selected && this.selected.id === src.id) { this.selected = null; this.webhookSecret = ''; this.generation++; }
+        showToast('Git source deleted', 'success');
+        await this.load();
+      } catch (e) { if (!this.destroyed) this.error = e.message; }
+      finally { if (!this.destroyed) this.busy = false; }
+    },
+    verdictLabel(v) {
+      return { verified: 'Credentials verified', unverified: 'Not verified yet', degraded: 'Credentials failing', 'no-credential': 'No credentials' }[v] || v || '';
+    },
+    verdictClass(v) {
+      return { verified: 'green', unverified: 'gray', degraded: 'red', 'no-credential': 'yellow' }[v] || 'gray';
+    },
+    webhookAbsolute(url) {
+      if (!url || /^https?:/.test(url)) return url || '';
+      return (typeof location !== 'undefined' && location.origin ? location.origin : '') + url;
+    },
+
     async action(action) {
       if (this.destroyed || this.busy || !this.selected) return;
       this.busy = true; this.error = ''; this.webhookSecret = '';

From ba5af2624fe8711322dd8d79b8fc0089081be638 Mon Sep 17 00:00:00 2001
From: Tyler <53561637+im-tyler@users.noreply.github.com>
Date: Wed, 11 Nov 2026 18:10:06 -0700
Subject: [PATCH 11/11] docs: record the navigation and UI rework in
 AUDIT_OPEN.md

Co-Authored-By: Claude <noreply@anthropic.com>
---
 AUDIT_OPEN.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/AUDIT_OPEN.md b/AUDIT_OPEN.md
index 11074f4..7818a91 100644
--- a/AUDIT_OPEN.md
+++ b/AUDIT_OPEN.md
@@ -2577,3 +2577,26 @@ tests also pass under -race; node --check on all three shipped frontend
 bundles; node --test frontend suite 51/51 (baseline). Production code
 untouched (git diff: four _test.go files). No commits were made; the tree
 stays dirty for the orchestrator.
+
+## 2026-11-11 navigation and UI rework (branch nav-rework)
+
+Supersedes the D07 nav description above. The header is seven
+destinations — Home, Apps, Servers, Monitoring, Backups, Activity |
+Settings — and the pages that had their own slot are tabs: Monitoring
+(Uptime /monitors, Domains /domains, Alerts /alerts), Servers (Servers,
+Cleanup /cleanup; a server's report is its Cleanup tab), Apps (Apps,
+Templates), Backups (Coverage, Setup, Restore tests), Settings (+
+Integrations, Git sources). Every old URL and alias still resolves to the
+page and tab it moved to (ROUTES entries may carry fixed params); app,
+server, Backups and Settings tabs are in the URL as ?tab=. Home is a status
+page. One confirm dialog replaces every browser confirm()/prompt(). The
+nav collapses below 900px (re-measured; frontend-test/header_layout).
+Two small backend additions: /api/cleanup rows carry the audited disk
+line, /api/monitors carries each monitor's last_check.
+
+Left as they were, deliberately: the Cleanup destructive-fix and backup
+restore typed-name dialogs keep their own markup (same pattern as the
+shared dialog; their flows are covered by existing tests). The sources
+"UI surface" item under the webhook remainders above now has a table,
+detail, delete and delivery history; the per-forge freshness items stay
+open.