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.
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/backup_setup.test.mjs b/cmd/teploy-dash/frontend-test/backup_setup.test.mjs
index 7cf5382..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;
@@ -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/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/config_home.test.mjs b/cmd/teploy-dash/frontend-test/config_home.test.mjs
index de4bd93..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]);
@@ -263,7 +265,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/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/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/git_source_card.test.mjs b/cmd/teploy-dash/frontend-test/git_source_card.test.mjs
index db73081..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();
@@ -239,7 +243,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/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/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 51f732a..d39e45f 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,31 +125,92 @@ 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>']) {
-    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"'), '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');
+  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.
-  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;
-  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/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/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/nav_rework.test.mjs b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
new file mode 100644
index 0000000..061c46c
--- /dev/null
+++ b/cmd/teploy-dash/frontend-test/nav_rework.test.mjs
@@ -0,0 +1,178 @@
+// 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');
+
+// 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');
+}
+
+// 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');
+}
+
+// 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();
+  });
+}
+
+// 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');
+}
+
+// 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');
+}
+
+// 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');
+}
+
+// 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/resource_page.test.mjs b/cmd/teploy-dash/frontend-test/resource_page.test.mjs
index db66021..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' };
@@ -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 7acbe29..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('>Siblings</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-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-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/css/style.css b/cmd/teploy-dash/frontend/css/style.css
index 2e71a4f..73eab00 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; }
@@ -186,13 +192,20 @@ 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; }
 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); }
@@ -203,6 +216,36 @@ 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, .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); }
+
+/* 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, .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); }
+  .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); }
@@ -258,6 +301,11 @@ tbody tr: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); }
@@ -277,6 +325,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; }
@@ -294,15 +351,14 @@ tbody tr: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). */
@@ -318,17 +374,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));
@@ -453,7 +511,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) {
@@ -504,6 +562,49 @@ 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); }
+.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; }
+.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; }
+.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;
@@ -532,3 +633,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; 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; }
+  .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 1cf74b7..ad876af 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')">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="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')">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="#" :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 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,11 +127,130 @@
 <!-- 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" 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"
+           @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">
       <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>
@@ -148,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>
@@ -189,7 +292,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>
@@ -215,7 +318,7 @@ <h1 class="page-title">Home</h1>
                    @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">
@@ -252,7 +355,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>
@@ -263,7 +366,13 @@ <h1 class="page-title">Projects</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>
 
@@ -290,8 +399,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">
@@ -405,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 -->
@@ -419,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>
@@ -445,7 +564,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>
@@ -467,7 +586,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>
@@ -540,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>
@@ -562,7 +692,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">
@@ -578,15 +708,25 @@ <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
                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>
@@ -596,7 +736,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>
@@ -623,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. -->
@@ -657,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>
@@ -674,15 +828,15 @@ <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. -->
                 <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
@@ -757,7 +911,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>
@@ -798,7 +952,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>
@@ -810,13 +964,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>
@@ -830,7 +984,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>
@@ -849,13 +1003,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,
@@ -886,7 +1040,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>
@@ -902,6 +1056,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>
 
@@ -1140,7 +1306,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>
@@ -1174,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>
@@ -1352,8 +1521,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>
@@ -1372,7 +1541,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>
@@ -1433,7 +1602,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>
@@ -1490,7 +1659,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>
@@ -1562,7 +1731,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>
@@ -1744,7 +1913,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>
@@ -1759,20 +1928,24 @@ <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>
+                    <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 :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>
-                  <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>
@@ -1788,19 +1961,27 @@ <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>
           <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>
         </div>
       </div>
 
+      <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>
+        <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>
@@ -1818,12 +1999,12 @@ <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
            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 +2013,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 +2031,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 +2041,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 +2085,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 +2393,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 +2410,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 +2419,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,23 +2595,25 @@ <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>
             </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">
-                <table>
+                <table class="stack-table">
                   <thead>
                     <tr>
                       <th>Target</th>
@@ -2447,33 +2630,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>
@@ -2522,49 +2705,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 +2719,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 +2727,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 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>
+                      </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 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">
+                          <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(' · ')" :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>
+                        </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 -->
@@ -2654,7 +2930,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>
@@ -2681,19 +2957,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 ? stateLabel(detail.state) + (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="auditBusy === detail.server || !!detail.live_audit || !cliSupported"
-                      x-text="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,496 +2984,11 @@ <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>
-          </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="'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">Siblings</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="stale-banner" role="status" style="display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;">
-          <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, #c0392b); 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 the fleet — 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 internal
-                  </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>
-              </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.dashboard_url" target="_blank" rel="noopener" x-text="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 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>
-
-          <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>
+            <div role="status" class="stale-banner" x-text="staleBannerText()"></div>
           </template>
 
           <!-- Monitor List (also renders under a stale banner: earlier data
@@ -3202,7 +2999,7 @@ <h1 class="page-title">Uptime Monitors</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. -->
@@ -3217,6 +3014,7 @@ <h1 class="page-title">Uptime Monitors</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>
@@ -3226,11 +3024,39 @@ <h1 class="page-title">Uptime Monitors</h1>
             </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>
+
+      <!-- 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>
+          </div>
+          <template x-if="loading">
+            <div class="loading"><div class="spinner"></div></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>
@@ -3239,7 +3065,7 @@ <h2>Alerts</h2>
                   <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>
@@ -3259,7 +3085,7 @@ <h2>Alerts</h2>
                 <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>
@@ -3307,7 +3133,7 @@ <h2>Alerts</h2>
                   <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>
@@ -3316,19 +3142,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>
 
@@ -3350,9 +3163,16 @@ <h3>No monitors yet</h3>
         <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;">
@@ -3431,17 +3251,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>
@@ -3456,7 +3276,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>
@@ -3598,149 +3418,17 @@ <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="'every ' + t.interval_hours + 'h'"></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">
       <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 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">
@@ -3770,8 +3458,13 @@ <h1 class="page-title">Fleet</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">
@@ -3790,7 +3483,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>
@@ -3808,11 +3501,12 @@ <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>
             <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 -->
@@ -3829,6 +3523,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;">
@@ -3885,6 +3580,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>
 
@@ -3949,56 +3669,189 @@ <h3 style="margin-bottom: 12px; font-size: 15px;">Containers</h3>
               </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">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">
@@ -4037,7 +3890,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 +3935,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>
@@ -4148,13 +4001,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>
@@ -4192,13 +4045,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>
@@ -4238,18 +4091,451 @@ <h1 class="page-title" x-text="op.request.kind + ' — ' + op.target"></h1>
         <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>
+      <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>
+        <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 === '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">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 btn-sm" @click="load()" :disabled="loading">Refresh</button>
+            </div>
+          </div>
+          <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>
+
+          <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>
+
+          <!-- The selected source's detail, above the add form. -->
+          <template x-if="selected">
+            <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>
+
       <template x-if="loading">
         <div class="loading"><div class="spinner"></div></div>
       </template>
@@ -4552,7 +4838,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>
@@ -4646,7 +4932,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.
@@ -4684,8 +4970,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>
@@ -4842,7 +5128,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>
@@ -5034,6 +5320,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 b5abe68..1980918 100644
--- a/cmd/teploy-dash/frontend/js/app.js
+++ b/cmd/teploy-dash/frontend/js/app.js
@@ -261,6 +261,71 @@ 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 : []; }
+
+// 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 (isNaN(t)) return String(iso);
+  return ageText(Math.round((Date.now() - t) / 1000));
+}
+
+// ── 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
@@ -326,6 +391,76 @@ 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', 'history', 'backups', 'kv'];
+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', () => {
   // ── Router Store ──
@@ -348,13 +483,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' },
@@ -362,11 +494,25 @@ 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' },
     { 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);
@@ -406,6 +552,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)) {
@@ -419,7 +566,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));
@@ -429,10 +582,107 @@ 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());
 
+  // 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); }
+      // 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(); });
+    });
+  }
+
+  // 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: {},
+    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
@@ -775,7 +1025,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 });
@@ -787,7 +1039,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 });
@@ -799,7 +1053,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');
@@ -815,7 +1069,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');
@@ -908,7 +1162,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;
@@ -922,7 +1176,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;
@@ -936,7 +1190,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 });
@@ -997,6 +1253,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
@@ -1136,6 +1393,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();
     },
 
@@ -1146,6 +1410,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;
@@ -1194,6 +1459,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 = '';
@@ -1207,6 +1473,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.
@@ -1357,7 +1651,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;
@@ -1370,7 +1664,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`);
@@ -1386,7 +1680,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' });
@@ -1403,7 +1697,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' });
@@ -1490,7 +1784,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 });
@@ -1531,7 +1825,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;
@@ -1921,7 +2215,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');
@@ -2110,7 +2404,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 = '';
@@ -2142,7 +2436,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 {
@@ -2161,11 +2455,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 = '';
@@ -2182,12 +2475,13 @@ 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();
       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();
@@ -2220,7 +2514,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}`);
@@ -2245,9 +2539,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() });
@@ -2284,7 +2583,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');
@@ -2311,17 +2610,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
@@ -2330,17 +2625,17 @@ 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) {
       return h ? String(h).slice(0, 12) : '';
     },
 
-    formatWhen(iso) { return iso ? formatObservedAt(iso) : ''; },
+    formatWhen(iso) { return relTime(iso); },
 
     openRestoreTests() {
-      Alpine.store('router').navigate('restore-tests');
+      Alpine.store('router').navigate('backups', { tab: 'restore-tests' });
     },
 
     accessoryName(containerName) {
@@ -2355,9 +2650,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 {
@@ -2575,7 +2870,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();
@@ -2614,9 +2909,7 @@ document.addEventListener('alpine:init', () => {
       };
     },
 
-    formatDate(d) {
-      return new Date(d).toLocaleString();
-    },
+    formatDate(d) { return relTime(d); },
   }));
 
   // ── Servers Page ──
@@ -2628,6 +2921,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() {
@@ -2646,7 +2940,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)));
@@ -2671,6 +2969,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.
@@ -2688,7 +3000,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(' — ');
     },
@@ -2720,6 +3032,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 : ''; },
@@ -2731,18 +3045,37 @@ 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';
       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;
@@ -2753,6 +3086,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 +3142,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 +3186,11 @@ 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');
+        }
+        // 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');
@@ -2875,7 +3226,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 });
@@ -2886,7 +3239,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');
@@ -2899,7 +3252,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');
@@ -2912,7 +3265,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');
@@ -2940,7 +3293,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');
@@ -2958,7 +3311,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() {
@@ -2977,7 +3330,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 = '';
@@ -3005,7 +3358,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');
@@ -3028,7 +3382,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');
@@ -3039,7 +3393,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 });
@@ -3114,7 +3470,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');
@@ -3157,6 +3513,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: ''},
@@ -3201,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 = '';
@@ -3368,7 +3753,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;
@@ -3451,7 +3836,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');
@@ -3496,7 +3881,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();
@@ -3546,7 +3931,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(),
@@ -3642,13 +4027,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) {
@@ -3772,10 +4151,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;
@@ -4219,6 +4598,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,
@@ -4249,13 +4629,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++;
     },
 
@@ -4309,13 +4704,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) {
@@ -4445,15 +4834,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) ──
@@ -4465,6 +4974,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,
@@ -4486,7 +4996,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;
@@ -4548,7 +5059,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;
@@ -4620,8 +5131,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';
@@ -4652,13 +5177,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 || {};
@@ -4673,6 +5192,7 @@ document.addEventListener('alpine:init', () => {
 
   // ── Siblings Page (Programme B: discovery + Observe connect) ──
   Alpine.data('siblingsPage', () => withAsyncLoad({
+    loading: true,
     servers: [],
     candidates: [],
     allowInternal: false,
@@ -4938,19 +5458,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,
@@ -5048,9 +5565,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) {
@@ -5119,7 +5640,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();
@@ -5238,9 +5759,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) ──
@@ -5277,9 +5812,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/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) {
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)
 			}