pmaxhogan
diff --git a/‎ui/src/App.vue‎
Lines changed: 48 additions & 30 deletions b/‎ui/src/App.vue‎
Lines changed: 48 additions & 30 deletions
diff --git a/‎ui/src/__tests__/app-shell.test.ts‎
Lines changed: 62 additions & 3 deletions b/‎ui/src/__tests__/app-shell.test.ts‎
Lines changed: 62 additions & 3 deletions
diff --git a/‎ui/src/__tests__/global-progress-bar.test.ts‎
Lines changed: 23 additions & 0 deletions b/‎ui/src/__tests__/global-progress-bar.test.ts‎
Lines changed: 23 additions & 0 deletions
diff --git a/‎ui/src/__tests__/settings-components.test.ts‎
Lines changed: 61 additions & 0 deletions b/‎ui/src/__tests__/settings-components.test.ts‎
Lines changed: 61 additions & 0 deletions
diff --git a/‎ui/src/components/GlobalProgressBar.vue‎
Lines changed: 34 additions & 8 deletions b/‎ui/src/components/GlobalProgressBar.vue‎
Lines changed: 34 additions & 8 deletions
diff --git a/‎ui/src/locales/en-US.json‎
Lines changed: 1 addition & 2 deletions b/‎ui/src/locales/en-US.json‎
Lines changed: 1 addition & 2 deletions
@@ -16,11 +16,11 @@ import { useUpdaterStore } from "./stores/updater";
 // menu + deep links navigate the same router.
 //
 // UI-CORE IA fix: the top nav is the SHELL-level information architecture and
-// lists only the four primary surfaces - Activity | Settings | Restore | About.
-// Accounts / Sources / Rules are NOT top-nav items: they are subtabs INSIDE the
-// Settings page (the only place they live), so the "Settings" item lights up for
-// any of /settings, /accounts, /sources, /rules. Teal is the shell accent (brand
-// wordmark + active/hover link states).
+// lists only the three primary surfaces - Activity | Restore | Settings.
+// Accounts / Sources / Rules / About are NOT top-nav items: they are subtabs
+// INSIDE the Settings page (the only place they live), so the "Settings" item
+// lights up for any of /settings, /accounts, /sources, /rules, /about. Teal is
+// the shell accent (brand wordmark + active/hover link states).
 const { t } = useI18n();
 const route = useRoute();
 
@@ -86,18 +86,19 @@ onMounted(async () => {
 });
 
 // The top-nav surfaces. `match` is the set of route paths for which the item is
-// the ACTIVE one; Settings owns its three subtab routes so it stays lit while the
+// the ACTIVE one; Settings owns its four subtab routes so it stays lit while the
 // user is on any of them. A path is active when it equals a match path or is
 // nested under it (so /restore/:sourceId keeps Restore active).
+// Restore sits before Settings: it is a primary user-facing surface, whereas
+// Settings is the configuration drawer and reads last in the row.
 const navLinks = [
   { to: "/activity", label: "nav.activity", match: ["/activity"] },
+  { to: "/restore", label: "nav.restore", match: ["/restore"] },
   {
     to: "/settings",
     label: "nav.settings",
-    match: ["/settings", "/accounts", "/sources", "/rules"],
+    match: ["/settings", "/accounts", "/sources", "/rules", "/about"],
   },
-  { to: "/restore", label: "nav.restore", match: ["/restore"] },
-  { to: "/about", label: "nav.about", match: ["/about"] },
 ] as const;
 
 function isActive(matches: readonly string[]): boolean {
@@ -115,28 +116,45 @@ const NAV_LINK_ACTIVE = "text-teal-700 dark:text-teal-300 font-semibold";
 
 <template>
   <div class="min-h-screen flex flex-col">
-    <GlobalProgressBar />
-    <PausedBanner />
-    <nav
-      class="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-zinc-200 bg-white px-6 py-3 text-sm dark:border-zinc-800 dark:bg-zinc-900"
-      :aria-label="t('nav.primary')"
-    >
-      <RouterLink
-        to="/activity"
-        class="mr-2 text-base font-bold tracking-tight text-teal-700 transition-colors hover:text-teal-600 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500 dark:text-teal-300 dark:hover:text-teal-200"
-      >
-        {{ t("app.name") }}
-      </RouterLink>
-      <RouterLink
-        v-for="link in navLinks"
-        :key="link.to"
-        :to="link.to"
-        :class="[NAV_LINK_BASE, isActive(link.match) ? NAV_LINK_ACTIVE : NAV_LINK_INACTIVE]"
-        :aria-current="isActive(link.match) ? 'page' : undefined"
+    <!-- The shell chrome - progress bar, paused banner, nav - is ONE sticky
+         block pinned to the top of the viewport, so none of it can be scrolled
+         out of the way on a long view (a 10k-row Activity list used to hide the
+         running-backup bar entirely). Sticky rather than fixed: a sticky element
+         keeps its space in normal flow, so nothing needs a compensating top
+         padding and the layout is byte-identical to before at scroll 0.
+         Deliberately NOT the other option (making <main> the scroll container):
+         `useVirtualList` windows the Restore browser off WINDOW scroll +
+         `window.innerHeight`, so moving the scroll into an inner element would
+         stop its scroll events firing and freeze the list on its first window.
+         z-30 clears page content and Restore's `sticky bottom-0 z-10` action
+         bar while staying under the z-50 modal overlays. The explicit surface
+         color matters: PausedBanner's dark-mode fill is semi-transparent
+         (`bg-amber-950/40`), so it needs an opaque backdrop of its own or
+         scrolled content would show through it. -->
+    <header class="sticky top-0 z-30 bg-zinc-50 dark:bg-zinc-950" data-testid="app-header">
+      <GlobalProgressBar />
+      <PausedBanner />
+      <nav
+        class="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-zinc-200 bg-white px-6 py-3 text-sm dark:border-zinc-800 dark:bg-zinc-900"
+        :aria-label="t('nav.primary')"
       >
-        {{ t(link.label) }}
-      </RouterLink>
-    </nav>
+        <RouterLink
+          to="/activity"
+          class="mr-2 text-base font-bold tracking-tight text-teal-700 transition-colors hover:text-teal-600 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500 dark:text-teal-300 dark:hover:text-teal-200"
+        >
+          {{ t("app.name") }}
+        </RouterLink>
+        <RouterLink
+          v-for="link in navLinks"
+          :key="link.to"
+          :to="link.to"
+          :class="[NAV_LINK_BASE, isActive(link.match) ? NAV_LINK_ACTIVE : NAV_LINK_INACTIVE]"
+          :aria-current="isActive(link.match) ? 'page' : undefined"
+        >
+          {{ t(link.label) }}
+        </RouterLink>
+      </nav>
+    </header>
     <main class="flex-1 p-6">
       <RouterView />
     </main>
 
@@ -31,6 +31,8 @@ vi.mock("@tauri-apps/api/event", () => ({
 }));
 
 import App from "../App.vue";
+import GlobalProgressBar from "../components/GlobalProgressBar.vue";
+import PausedBanner from "../components/PausedBanner.vue";
 import { i18n } from "../i18n";
 import { createAppRouter } from "../router";
 
@@ -78,12 +80,37 @@ async function mountAppAt(path: string) {
 }
 
 describe("App shell", () => {
-  it("renders the top nav with the app wordmark and all four primary surfaces", async () => {
+  it("renders the top nav with the app wordmark and all three primary surfaces", async () => {
     const wrapper = await mountAppAt("/activity");
     expect(wrapper.find("nav").exists()).toBe(true);
     const links = wrapper.findAll("nav a");
-    // Wordmark + Activity | Settings | Restore | About.
-    expect(links.length).toBe(5);
+    // Wordmark + Activity | Restore | Settings. About is no longer a top-nav
+    // surface - it is a subtab inside Settings.
+    expect(links.length).toBe(4);
+    expect(links.map((l) => l.attributes("href"))).toEqual([
+      "/activity",
+      "/activity",
+      "/restore",
+      "/settings",
+    ]);
+  });
+
+  it("orders Restore before Settings in the nav", async () => {
+    const wrapper = await mountAppAt("/activity");
+    const hrefs = wrapper.findAll("nav a").map((l) => l.attributes("href"));
+    expect(hrefs.indexOf("/restore")).toBeLessThan(hrefs.indexOf("/settings"));
+  });
+
+  it("offers no top-nav About link (it moved into Settings)", async () => {
+    const wrapper = await mountAppAt("/activity");
+    expect(wrapper.find('nav a[href="/about"]').exists()).toBe(false);
+  });
+
+  // /about still resolves - it renders the Settings view's About tab - so the
+  // Settings nav item must stay lit there, exactly as it does for /accounts.
+  it("keeps Settings active on /about, which now renders the About subtab", async () => {
+    const wrapper = await mountAppAt("/about");
+    expect(wrapper.find('a[href="/settings"]').attributes("aria-current")).toBe("page");
   });
 
   it("marks the Activity link active (and no other) when on /activity", async () => {
@@ -106,6 +133,38 @@ describe("App shell", () => {
     expect(restoreLink.attributes("aria-current")).toBe("page");
   });
 
+  // The shell chrome must not be scrollable out of the way: on a long view (a
+  // 10k-row Activity list) the running-backup progress bar used to disappear off
+  // the top. Progress bar + paused banner + nav are one sticky block, so all
+  // three pin together and the document stays the scroll container (which
+  // `useVirtualList` depends on - it windows off window scroll).
+  it("pins the progress bar, paused banner and nav in one sticky header", async () => {
+    const wrapper = await mountAppAt("/activity");
+    const header = wrapper.get('[data-testid="app-header"]');
+
+    expect(header.classes()).toContain("sticky");
+    expect(header.classes()).toContain("top-0");
+    // Above page content and Restore's `sticky bottom-0 z-10` bar, below modals.
+    expect(header.classes()).toContain("z-30");
+    // All three pieces of chrome live INSIDE it (so none can scroll away alone).
+    expect(header.findComponent(GlobalProgressBar).exists()).toBe(true);
+    expect(header.findComponent(PausedBanner).exists()).toBe(true);
+    expect(header.find("nav").exists()).toBe(true);
+  });
+
+  // Sticky, not fixed, and no inner scroll container: the header keeps its space
+  // in normal flow, so the shell needs no compensating top padding and there is
+  // exactly one scrollbar (the document's).
+  it("leaves the document as the only scroll container", async () => {
+    const wrapper = await mountAppAt("/activity");
+    const root = wrapper.get('[data-testid="app-header"]').element.parentElement!;
+
+    expect(root.className).not.toContain("overflow");
+    const main = wrapper.get("main");
+    expect(main.classes()).not.toContain("overflow-y-auto");
+    expect(main.classes().some((c) => c.startsWith("pt-"))).toBe(false);
+  });
+
   it("subscribes + hydrates the updater, progress and pause stores on boot", async () => {
     await mountAppAt("/activity");
     // Three updater events (available, download_progress, downloaded) + the
 
@@ -121,6 +121,29 @@ describe("GlobalProgressBar", () => {
     expect(wrapper.find(INDETERMINATE).exists()).toBe(true);
   });
 
+  // The scan phase must never LOOK like a finished bar. The sweep segment is a
+  // partial-width element carrying no inline width, so nothing about it can
+  // render as a full determinate fill; the determinate branch (the only thing
+  // that sets an inline width) is absent entirely.
+  //
+  // Only the template half of that guarantee is unit-testable: the scoped
+  // `prefers-reduced-motion` fallback is plain CSS, which jsdom does not apply.
+  // Keeping the width in a Tailwind class on the element (rather than something
+  // the media query stretches to 100%) is what makes the partial width hold in
+  // BOTH motion modes.
+  it("renders the scan sweep as a partial-width segment with no inline width", async () => {
+    const { store, wrapper } = mountBar();
+    store.ingest(perAccount("a", scanning(120)));
+    await wrapper.vm.$nextTick();
+
+    const sweep = wrapper.find('[data-testid="global-progress-indeterminate"]');
+    expect(sweep.exists()).toBe(true);
+    expect(sweep.classes()).toContain("w-2/5");
+    expect(sweep.attributes("style")).toBeUndefined();
+    // No determinate fill alongside it (that branch is the one with a width).
+    expect(wrapper.find(BAR).findAll("div[style]").length).toBe(0);
+  });
+
   // The "Run now looks dead during the scan" fix: the bar carries a visible
   // phase readout, and the scan phase streams a live file count into it. Before
   // this, every pre-upload phase rendered the same bare "Backing up..." on a
 
@@ -1891,3 +1891,64 @@ describe("Settings Rules tab", () => {
     expect(wrapper.find('[data-testid="telemetry-preview-modal"]').exists()).toBe(false);
   });
 });
+
+// About moved out of the top nav and into the Settings sub-bar as a fourth tab.
+// /about still resolves (the router points it at THIS view with `tab: "about"`),
+// so these cover the new branch: the tab is offered, it is the active one on
+// that route, and it renders the real About surface rather than the Rules form.
+describe("Settings About tab", () => {
+  function aboutTab(wrapper: ReturnType<typeof mount>) {
+    return wrapper
+      .findAll("nav button")
+      .find((b) => b.text() === i18n.global.t("settings.tabs.about"));
+  }
+
+  it("offers About as a subtab alongside Accounts / Sources / Rules", async () => {
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "list_accounts") return Promise.resolve([]);
+      return Promise.resolve(undefined);
+    });
+    const wrapper = mount(Settings, { props: { tab: "accounts" }, global: globalMountOptions });
+    await flushPromises();
+
+    const labels = wrapper.findAll("nav button").map((b) => b.text());
+    expect(labels).toEqual([
+      i18n.global.t("settings.tabs.accounts"),
+      i18n.global.t("settings.tabs.sources"),
+      i18n.global.t("settings.tabs.rules"),
+      i18n.global.t("settings.tabs.about"),
+    ]);
+  });
+
+  it("navigates to /about when the About subtab is clicked", async () => {
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "list_accounts") return Promise.resolve([]);
+      return Promise.resolve(undefined);
+    });
+    const wrapper = mount(Settings, { props: { tab: "accounts" }, global: globalMountOptions });
+    await flushPromises();
+
+    await aboutTab(wrapper)!.trigger("click");
+    expect(pushMock).toHaveBeenCalledWith("/about");
+  });
+
+  it("renders the About surface (not the Rules form) with the tab marked active", async () => {
+    invokeMock.mockImplementation((cmd: string) => {
+      if (cmd === "get_settings") return Promise.resolve(makeSettings());
+      if (cmd === "get_update_channel") return Promise.resolve("stable");
+      if (cmd === "list_releases") return Promise.resolve([]);
+      return Promise.resolve(undefined);
+    });
+
+    const wrapper = mount(Settings, { props: { tab: "about" }, global: globalMountOptions });
+    await flushPromises();
+
+    expect(aboutTab(wrapper)!.classes()).toContain("border-teal-600");
+    // The About surface's own controls are present...
+    expect(wrapper.find('[data-testid="channel-select"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="check-updates"]').exists()).toBe(true);
+    expect(wrapper.text()).toContain(i18n.global.t("about.updatesTitle"));
+    // ...and the Rules form is not rendered in its place.
+    expect(wrapper.find('[data-testid="rules-form"]').exists()).toBe(false);
+  });
+});
@@ -91,10 +91,13 @@ const label = computed<string>(() => {
           :style="{ width: `${widthPct}%` }"
         ></div>
         <!-- Indeterminate: a teal sliver sweeping across while a run is active but
-             has no measurable total yet (scan / plan / verify). -->
+             has no measurable total yet (scan / plan / verify). It is always a
+             PARTIAL width so it can never be mistaken for a finished bar, and
+             rounded so it reads as a travelling pill rather than a fill edge. -->
         <div
           v-else
-          class="global-progress__indeterminate absolute inset-y-0 left-0 w-2/5 bg-teal-600 dark:bg-teal-400"
+          class="global-progress__indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full bg-teal-600 dark:bg-teal-400"
+          data-testid="global-progress-indeterminate"
         ></div>
       </div>
       <!-- Phase readout. `aria-live="polite"` so a screen reader hears the phase
@@ -113,8 +116,14 @@ const label = computed<string>(() => {
 </template>
 
 <style scoped>
+/* Transform-only sweep so the compositor can run it off the main thread - a
+   scan that is hammering the disk must never make the one thing telling the
+   user "we are working" stutter. The segment is 40% of the track and the
+   keyframes are in percentages OF THAT segment, so it enters from fully
+   off-track on the left and exits fully off-track on the right. */
 .global-progress__indeterminate {
-  animation: driven-progress-indeterminate 1.3s ease-in-out infinite;
+  animation: driven-progress-indeterminate 1.2s ease-in-out infinite;
+  will-change: transform;
 }
 
 @keyframes driven-progress-indeterminate {
@@ -126,6 +135,17 @@ const label = computed<string>(() => {
   }
 }
 
+/* Reduced-motion fallback (below) - a slow, gentle fade in place. */
+@keyframes driven-progress-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
 .driven-progress-fade-enter-active,
 .driven-progress-fade-leave-active {
   transition: opacity 200ms ease;
@@ -136,13 +156,19 @@ const label = computed<string>(() => {
   opacity: 0;
 }
 
-/* Respect reduced-motion: drop the sweep animation and show a steady partial
-   bar so the indeterminate state is still visibly "working". */
+/* Respect reduced-motion: drop the travelling sweep for a gentle fade in place.
+   The segment MUST stay partial-width here. The previous fallback stretched it
+   to `width: 100%`, which rendered a solid full-width teal line - visually
+   indistinguishable from a completed determinate fill. That is what a scan
+   looked like for anyone with OS animations turned off (Windows' "Show
+   animations in Windows" maps to prefers-reduced-motion: reduce), so the bar
+   read as "finished" for the entire scan. A partial bar can never be mistaken
+   for 100%, and the opacity pulse still says "working" without moving anything
+   across the screen. */
 @media (prefers-reduced-motion: reduce) {
   .global-progress__indeterminate {
-    animation: none;
-    width: 100%;
-    opacity: 0.6;
+    animation: driven-progress-pulse 2.4s ease-in-out infinite;
+    will-change: opacity;
   }
 }
 </style>
@@ -14,8 +14,7 @@
     "accounts": "Accounts",
     "sources": "Sources",
     "rules": "Rules",
-    "restore": "Restore",
-    "about": "About"
+    "restore": "Restore"
   },
   "progress": {
     "backingUp": "Backing up...",