From c7e498fd9a7169fcbff49daf66d30fab02c35b74 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Wed, 7 Oct 2026 10:05:36 +0100
Subject: [PATCH 1/3] Lay out the Account page like the rest of the app

Rebuild the Account page from the Home page's status band and grouped rows:
a band with the signed-in email (or Sign in / Check your email while
signing in) and Sign out; rows for Settings sync and What syncs; and Delete
account in its own card with a danger-styled inline confirmation. Rows
whose choice is two buttons put them under the text. Behaviour, focus
handling and announcements are unchanged.

Refs #997

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/App.test.tsx                     |   2 +-
 src/settings/AccountSection.test.tsx |  16 ++-
 src/settings/AccountSection.tsx      | 169 +++++++++++++++++----------
 src/ui/app.css                       |  12 ++
 4 files changed, 131 insertions(+), 68 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 32587cea..f16d5827 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -621,7 +621,7 @@ describe("Switchify PC shell", () => {
       const entry = await (await sidebar()).findByRole("button", { name: /^Account, signed in/ });
       fireEvent.click(entry);
       expect(await screen.findByRole("heading", { name: "Account", level: 1 })).toBeInTheDocument();
-      expect(await screen.findByText(/Signed in as/)).toBeInTheDocument();
+      expect(await screen.findByRole("heading", { name: "me@example.com" })).toBeInTheDocument();
       expect(entry).toHaveAttribute("aria-current", "page");
       expect(screen.queryByRole("tablist", { name: "Settings sections" })).not.toBeInTheDocument();
     });
diff --git a/src/settings/AccountSection.test.tsx b/src/settings/AccountSection.test.tsx
index 3326417a..f106b40a 100644
--- a/src/settings/AccountSection.test.tsx
+++ b/src/settings/AccountSection.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { api } from "../api";
 import type { AccountView, SyncView } from "../types";
@@ -71,17 +71,20 @@ describe("AccountSection", () => {
       expect(await screen.findByText("Could not reach Switchify to sync settings.")).toBeInTheDocument();
     });
 
-    it("is hidden while confirming account deletion", async () => {
+    it("stays in its own row while deletion is confirmed in another", async () => {
       start(signedIn);
       await screen.findByRole("button", { name: "Sync now" });
       fireEvent.click(screen.getByRole("button", { name: "Delete account…" }));
-      expect(screen.queryByRole("button", { name: "Sync now" })).not.toBeInTheDocument();
+      const confirm = screen.getByRole("group", { name: "Confirm account deletion" });
+      expect(within(confirm).getByRole("button", { name: "Delete permanently" })).toBeInTheDocument();
+      expect(within(confirm).queryByRole("button", { name: "Sync now" })).not.toBeInTheDocument();
+      expect(within(screen.getByRole("region", { name: "Settings sync" })).getByRole("button", { name: "Sync now" })).toBeInTheDocument();
     });
   });
 
   it("says when accounts are unavailable in this build", async () => {
     start({ ...signedOut, available: false });
-    expect(await screen.findByText("Accounts are unavailable in this build.")).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { name: "Accounts are unavailable in this build" })).toBeInTheDocument();
     expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
   });
 
@@ -103,7 +106,8 @@ describe("AccountSection", () => {
     fireEvent.click(screen.getByRole("button", { name: "Sign in" }));
     expect(verify).toHaveBeenCalledWith("123456");
     await waitFor(() => expect(screen.getByRole("button", { name: "Sign out" })).toHaveFocus());
-    expect(screen.getByText(/Signed in as/)).toHaveTextContent("Signed in as me@example.com.");
+    expect(screen.getByRole("heading", { name: "me@example.com" })).toBeInTheDocument();
+    expect(screen.getByText(/^Signed in./)).toHaveTextContent("Signed in. It's the same account as Switchify on Android.");
   });
 
   it("shows a wrong-code error and keeps the code form", async () => {
@@ -136,7 +140,7 @@ describe("AccountSection", () => {
     const remove = vi.spyOn(api, "deleteAccount").mockResolvedValue(signedOut);
     fireEvent.click(await screen.findByRole("button", { name: "Delete account…" }));
     expect(remove).not.toHaveBeenCalled();
-    expect(screen.getByText(/removes it and its saved settings from every device/)).toBeInTheDocument();
+    expect(screen.getByText(/removes your account and its saved settings from every device/)).toBeInTheDocument();
     await waitFor(() => expect(screen.getByRole("button", { name: "Keep account" })).toHaveFocus());
     fireEvent.click(screen.getByRole("button", { name: "Keep account" }));
     await waitFor(() => expect(screen.getByRole("button", { name: "Delete account…" })).toHaveFocus());
diff --git a/src/settings/AccountSection.tsx b/src/settings/AccountSection.tsx
index 648e058b..edfbfb80 100644
--- a/src/settings/AccountSection.tsx
+++ b/src/settings/AccountSection.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState, type FormEvent } from "react";
+import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { CircleUserRound, ListChecks, LockKeyhole, MailCheck, RefreshCw, Trash2 } from "lucide-react";
 import { api } from "../api";
 import { Button, Input } from "../ui/controls";
 import type { AccountView, SyncView } from "../types";
-import { SettingGroup } from "./controls";
 
-const description = "The same account as Switchify on Android. We email you a code to sign in; there is no password.";
+const sameAccount = "It's the same account as Switchify on Android.";
+const whatSyncs = "Pointer, repeat, dwell and cursor settings; your switches and their keys; scanning and keyboard layout; switch profiles; and remote switches. Pairings, diagnostics and starting with your computer stay on each computer.";
 
 type FocusTarget = "email" | "code" | "signOut" | "deleteAccount" | "keepAccount";
 type Screen = "loading" | "unavailable" | "keychain" | "signedIn" | "pending" | "signedOut";
@@ -17,6 +18,26 @@ function screenOf(account: AccountView | null): Screen {
   return account.pendingEmail ? "pending" : "signedOut";
 }
 
+// The status band and grouped rows used on Home, so the page reads like the
+// rest of the app: a colour-and-shape cue (tick or mark) on the icon.
+function StatusIcon({ ok, children }: { ok?: boolean; children: ReactNode }) {
+  return <span className="status-icon" data-ok={ok} aria-hidden="true">{children}</span>;
+}
+
+function Band({ tone, ok, icon, title, children, action }: { tone: "ready" | "attention" | "neutral"; ok?: boolean; icon: ReactNode; title: ReactNode; children: ReactNode; action?: ReactNode }) {
+  return <section className="connection-band status-hero account-band" data-tone={tone} aria-labelledby="account-title">
+    <StatusIcon ok={ok}>{icon}</StatusIcon>
+    <div><h2 id="account-title">{title}</h2>{children}</div>
+    {action}
+  </section>;
+}
+
+function WhatSyncs() {
+  return <section className="status-list" aria-label="What syncs">
+    <article><StatusIcon><ListChecks size={19} /></StatusIcon><div><h3>What syncs</h3><p>{whatSyncs}</p></div></article>
+  </section>;
+}
+
 export function AccountSection() {
   const [account, setAccount] = useState<AccountView | null>(null);
   const [email, setEmail] = useState("");
@@ -108,69 +129,89 @@ export function AccountSection() {
     void run(() => api.verifySignInCode(code), () => "signOut").then((ok) => { if (ok) setCode(""); });
   };
 
-  if (!account) return <SettingGroup id="account" title="Switchify account" description={description}><p className="setting-note">Loading…</p></SettingGroup>;
+  if (!account) return <p className="setting-note">Loading…</p>;
 
   // Keyed by occurrence so the same message is announced again.
   const errorText = error && <span key={error.id} className="field-error" id="account-error" role="alert">{error.text}</span>;
   const errorProps = { "aria-invalid": Boolean(error), "aria-describedby": error ? "account-error" : undefined };
 
   if (!account.available) {
-    return <SettingGroup id="account" title="Switchify account" description={description}><p className="setting-note">Accounts are unavailable in this build.</p></SettingGroup>;
+    return <Band tone="neutral" icon={<CircleUserRound size={26} />} title="Accounts are unavailable in this build"><p>This build was made without account support.</p></Band>;
   }
 
   if (account.keychainUnavailable) {
-    return <SettingGroup id="account" title="Switchify account" description={description}><p ref={keychainRef} tabIndex={-1} className="setting-note" role="status">Your saved sign-in can't be read because this computer's keychain is locked or unavailable. Unlock it, then open this page again.</p></SettingGroup>;
+    return <Band tone="attention" ok={false} icon={<LockKeyhole size={26} />} title="Your keychain is locked">
+      <p ref={keychainRef} tabIndex={-1} role="status">Your saved sign-in can't be read because this computer's keychain is locked or unavailable. Unlock it, then open this page again.</p>
+    </Band>;
   }
 
   if (account.signedIn) {
-    return <SettingGroup id="account" title="Switchify account" description={description}>
-      <p className="setting-note" role="status">Signed in as <strong>{account.email}</strong>.</p>
-      {!confirmDelete && <SyncPanel />}
-      {confirmDelete
-        ? <div role="group" aria-label="Confirm account deletion">
-          <p className="setting-note">Deleting your account removes it and its saved settings from every device, including Switchify on Android. This cannot be undone.</p>
-          <div className="privacy-choice">
-            <Button className="secondary" aria-disabled={busy} onClick={() => void run(api.deleteAccount, afterSignOut).then((ok) => { if (ok) setConfirmDelete(false); })}>Delete permanently</Button>
-            <Button ref={keepRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setConfirmDelete(false); setFocusNext("deleteAccount"); }}>Keep account</Button>
-          </div>
-        </div>
-        : <div className="privacy-choice">
-          <Button ref={signOutRef} className="secondary" aria-disabled={busy} onClick={() => void run(api.signOut, afterSignOut)}>Sign out</Button>
-          <Button ref={deleteRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setError(null); setConfirmDelete(true); setFocusNext("keepAccount"); }}>Delete account…</Button>
-        </div>}
+    return <div className="account-page">
+      <Band tone="ready" ok icon={<CircleUserRound size={26} />} title={<span className="account-email">{account.email}</span>}
+        action={<Button ref={signOutRef} className="secondary" aria-disabled={busy} onClick={() => void run(api.signOut, afterSignOut)}>Sign out</Button>}>
+        <p role="status">Signed in. {sameAccount}</p>
+      </Band>
+      <section className="status-list" aria-label="Settings sync"><SyncRow /></section>
+      <WhatSyncs />
+      <section className="status-list" aria-label="Delete account">
+        {confirmDelete
+          ? <article className="stacked-row" role="group" aria-label="Confirm account deletion">
+            <StatusIcon ok={false}><Trash2 size={19} /></StatusIcon>
+            <div><h3>Delete your account?</h3><p>This removes your account and its saved settings from every device, including Switchify on Android. It cannot be undone.</p></div>
+            <div className="privacy-choice row-actions">
+              <Button className="primary danger" aria-disabled={busy} onClick={() => void run(api.deleteAccount, afterSignOut).then((ok) => { if (ok) setConfirmDelete(false); })}>Delete permanently</Button>
+              <Button ref={keepRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setConfirmDelete(false); setFocusNext("deleteAccount"); }}>Keep account</Button>
+            </div>
+          </article>
+          : <article>
+            <StatusIcon><Trash2 size={19} /></StatusIcon>
+            <div><h3>Delete account</h3><p>Remove your account and its saved settings from every device.</p></div>
+            <Button ref={deleteRef} className="secondary danger" aria-disabled={busy} onClick={() => { if (busy) return; setError(null); setConfirmDelete(true); setFocusNext("keepAccount"); }}>Delete account…</Button>
+          </article>}
+      </section>
       {errorText}
-    </SettingGroup>;
+    </div>;
   }
 
   if (account.pendingEmail) {
-    return <SettingGroup id="account" title="Switchify account" description={description}>
-      <form onSubmit={verifyCode} aria-busy={busy}>
-        <p className="setting-note" role="status">We sent a code to <strong>{account.pendingEmail}</strong>. It can take a minute to arrive.</p>
-        <label className="field"><span>Code from the email</span>
-          <Input ref={codeRef} value={code} inputMode="numeric" autoComplete="one-time-code" maxLength={12} readOnly={busy}
-            {...errorProps} onChange={(event) => setCode(event.target.value)} />
+    return <div className="account-page">
+      <Band tone="neutral" icon={<MailCheck size={26} />} title="Check your email">
+        <p role="status">We sent a code to <strong>{account.pendingEmail}</strong>. It can take a minute to arrive.</p>
+      </Band>
+      <section className="status-list" aria-label="Enter your code">
+        <form className="account-form" onSubmit={verifyCode} aria-busy={busy}>
+          <label className="field"><span>Code from the email</span>
+            <Input ref={codeRef} value={code} inputMode="numeric" autoComplete="one-time-code" maxLength={12} readOnly={busy}
+              {...errorProps} onChange={(event) => setCode(event.target.value)} />
+          </label>
+          {errorText}
+          <div className="privacy-choice">
+            <Button className="primary" type="submit" aria-disabled={busy || !code.trim()}>Sign in</Button>
+            <Button className="secondary" aria-disabled={busy} onClick={() => void run(api.cancelSignIn, () => "email")}>Use a different email</Button>
+          </div>
+        </form>
+      </section>
+    </div>;
+  }
+
+  return <div className="account-page">
+    <Band tone="neutral" icon={<CircleUserRound size={26} />} title="Sign in to sync your settings">
+      <p>{sameAccount} We email you a code to sign in; there is no password.</p>
+    </Band>
+    <section className="status-list" aria-label="Sign in">
+      <form className="account-form" onSubmit={requestCode} aria-busy={busy}>
+        <label className="field"><span>Email</span>
+          <Input ref={emailRef} type="email" value={email} autoComplete="email" maxLength={254} readOnly={busy}
+            {...errorProps} onChange={(event) => setEmail(event.target.value)} />
         </label>
         {errorText}
         <div className="privacy-choice">
-          <Button className="secondary" type="submit" aria-disabled={busy || !code.trim()}>Sign in</Button>
-          <Button className="secondary" aria-disabled={busy} onClick={() => void run(api.cancelSignIn, () => "email")}>Use a different email</Button>
+          <Button className="primary" type="submit" aria-disabled={busy || !email.trim()}>Email me a code</Button>
         </div>
       </form>
-    </SettingGroup>;
-  }
-
-  return <SettingGroup id="account" title="Switchify account" description={description}>
-    <form onSubmit={requestCode} aria-busy={busy}>
-      <label className="field"><span>Email</span>
-        <Input ref={emailRef} type="email" value={email} autoComplete="email" maxLength={254} readOnly={busy}
-          {...errorProps} onChange={(event) => setEmail(event.target.value)} />
-      </label>
-      {errorText}
-      <div className="privacy-choice">
-        <Button className="secondary" type="submit" aria-disabled={busy || !email.trim()}>Email me a code</Button>
-      </div>
-    </form>
-  </SettingGroup>;
+    </section>
+    <WhatSyncs />
+  </div>;
 }
 
 const syncText: Record<SyncView["status"], string> = {
@@ -182,8 +223,14 @@ const syncText: Record<SyncView["status"], string> = {
   error: "",
 };
 
-/** Sync status for the signed-in account, with the first-sync choice. */
-function SyncPanel() {
+function syncOk(status: SyncView["status"]): boolean | undefined {
+  if (status === "upToDate") return true;
+  if (status === "error" || status === "updateRequired" || status === "needsChoice") return false;
+  return undefined;
+}
+
+/** The settings sync row: status, last sync, Sync now or the first-sync choice. */
+function SyncRow() {
   const [sync, setSync] = useState<SyncView | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -231,21 +278,21 @@ function SyncPanel() {
     }
   };
 
-  if (!sync) return null;
-  const last = sync.lastSyncedAt ? new Date(sync.lastSyncedAt).toLocaleString([], { dateStyle: "medium", timeStyle: "short" }) : null;
-  const text = sync.message ?? syncText[sync.status];
-  return <div className="sync-panel" aria-busy={busy || sync.status === "syncing"}>
-    <p className="setting-note" role="status">
-      {text}{sync.status === "upToDate" && last && <> Last synced {last}.</>}
-    </p>
-    {sync.status === "needsChoice"
-      ? <div className="privacy-choice" role="group" aria-label="Choose which settings to keep">
+  const status = sync?.status ?? "off";
+  const last = sync?.lastSyncedAt ? new Date(sync.lastSyncedAt).toLocaleString([], { dateStyle: "medium", timeStyle: "short" }) : null;
+  const text = sync ? sync.message ?? syncText[status] : "Checking settings sync…";
+  return <article className={status === "needsChoice" ? "sync-row stacked-row" : "sync-row"} aria-busy={busy || status === "syncing"}>
+    <StatusIcon ok={sync ? syncOk(status) : undefined}><RefreshCw size={19} /></StatusIcon>
+    <div>
+      <h3>Settings sync</h3>
+      <p role="status">{text}{status === "upToDate" && last && <> Last synced {last}.</>}</p>
+      {error && <span className="field-error" role="alert">{error}</span>}
+    </div>
+    {sync && (status === "needsChoice"
+      ? <div className="privacy-choice row-actions" role="group" aria-label="Choose which settings to keep">
         <Button ref={firstChoiceRef} className="secondary" aria-disabled={busy} onClick={() => void run(() => api.resolveSettingsSync("cloud"), true)}>Use my account&apos;s settings</Button>
         <Button className="secondary" aria-disabled={busy} onClick={() => void run(() => api.resolveSettingsSync("local"), true)}>Keep this computer&apos;s settings</Button>
       </div>
-      : <div className="privacy-choice">
-        <Button ref={syncNowRef} className="secondary" aria-disabled={busy || sync.status === "syncing"} onClick={() => { if (sync.status !== "syncing") void run(api.syncSettingsNow); }}>Sync now</Button>
-      </div>}
-    {error && <span className="field-error" role="alert">{error}</span>}
-  </div>;
+      : <Button ref={syncNowRef} className="secondary" aria-disabled={busy || status === "syncing"} onClick={() => { if (status !== "syncing") void run(api.syncSettingsNow); }}>Sync now</Button>)}
+  </article>;
 }
diff --git a/src/ui/app.css b/src/ui/app.css
index 283cd4e3..377a8c68 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -688,3 +688,15 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
 }
 .sidebar-account-text { display: flex; flex-direction: column; min-width: 0; text-align: start; }
 .sidebar-account-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+
+/* Account page: the Home status band and grouped rows. */
+.account-page { display: grid; gap: 16px; }
+.account-page > .connection-band + .status-list { margin-top: 8px; }
+.account-page .status-list + .status-list { margin-top: 0; }
+.account-band h2 .account-email { overflow-wrap: anywhere; }
+.account-form { display: grid; gap: 16px; padding: 20px; }
+.account-form .field { max-width: 32rem; }
+/* Rows whose choice is two buttons put them under the text, so the text
+   keeps its width instead of wrapping beside them. */
+.status-list > article.stacked-row { grid-auto-flow: row; }
+.status-list > article.stacked-row > .row-actions { grid-column: 2; justify-self: start; }

From 1e15642f3e5f20c550ec79d7e395dc827be2cd07 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Wed, 7 Oct 2026 10:10:52 +0100
Subject: [PATCH 2/3] Keep account errors beside their buttons and quieter

Address review on the Account page layout:
- A failed Sign out shows its error in the band beside the button, and a
  failed delete inside the confirmation; once off the signed-in screen the
  error joins the form, so it is never off screen or orphaned.
- The sync status becomes a live region only once it is known, so opening
  the page does not announce a placeholder change.
- Single-row cards are plain lists rather than regions repeating their
  heading.
- StatusIcon is shared from ui/controls with Home.
- The keychain band says "Can't read your saved sign-in" (locked or
  unavailable), and What syncs lists setup progress and diagnostics sharing
  as staying on each computer.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/App.tsx                          |  6 +--
 src/settings/AccountSection.test.tsx | 20 +++++++++-
 src/settings/AccountSection.tsx      | 56 +++++++++++++++-------------
 src/ui/controls.tsx                  |  5 +++
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f2856859..f73760a0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Select } from "./ui/controls";
+import { Button, Input, Select, StatusIcon } from "./ui/controls";
 import { Demonstration, DemonstrationProvider } from "./help/Demonstration";
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import {
@@ -67,10 +67,6 @@ function NavButton({ active, icon, children, onClick }: { active: boolean; icon:
   return <Button className="nav-button" data-active={active} aria-current={active ? "page" : undefined} onClick={onClick}>{icon}<span>{children}</span></Button>;
 }
 
-// `ok` omitted marks a row that has no state to report, only a subject.
-function StatusIcon({ ok, children }: { ok?: boolean; children: ReactNode }) {
-  return <span className="status-icon" data-ok={ok} aria-hidden="true">{children}</span>;
-}
 
 function AccessibilityCopy({ state, detailed = false }: { state: AppState; detailed?: boolean }) {
   if (state.accessibility === "granted") return <p>Ready</p>;
diff --git a/src/settings/AccountSection.test.tsx b/src/settings/AccountSection.test.tsx
index f106b40a..000b31d0 100644
--- a/src/settings/AccountSection.test.tsx
+++ b/src/settings/AccountSection.test.tsx
@@ -78,7 +78,7 @@ describe("AccountSection", () => {
       const confirm = screen.getByRole("group", { name: "Confirm account deletion" });
       expect(within(confirm).getByRole("button", { name: "Delete permanently" })).toBeInTheDocument();
       expect(within(confirm).queryByRole("button", { name: "Sync now" })).not.toBeInTheDocument();
-      expect(within(screen.getByRole("region", { name: "Settings sync" })).getByRole("button", { name: "Sync now" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Sync now" })).toBeInTheDocument();
     });
   });
 
@@ -245,6 +245,24 @@ describe("AccountSection", () => {
     expect(screen.queryByLabelText("Email")).not.toBeInTheDocument();
   });
 
+  it("shows a sign-out failure beside Sign out", async () => {
+    start(signedIn);
+    vi.spyOn(api, "signOut").mockRejectedValue("Could not reach Switchify.");
+    fireEvent.click(await screen.findByRole("button", { name: "Sign out" }));
+    const alert = await screen.findByRole("alert");
+    expect(alert).toHaveTextContent("Could not reach Switchify.");
+    expect(alert.closest("section")).toContainElement(screen.getByRole("button", { name: "Sign out" }));
+  });
+
+  it("shows a delete failure inside the confirmation", async () => {
+    start(signedIn);
+    vi.spyOn(api, "deleteAccount").mockRejectedValue("Could not delete the account. Try again.");
+    fireEvent.click(await screen.findByRole("button", { name: "Delete account…" }));
+    fireEvent.click(screen.getByRole("button", { name: "Delete permanently" }));
+    const confirm = screen.getByRole("group", { name: "Confirm account deletion" });
+    expect(await within(confirm).findByRole("alert")).toHaveTextContent("Could not delete the account.");
+  });
+
   it("follows account changes from the backend", async () => {
     let receive: (view: AccountView) => void = () => undefined;
     vi.spyOn(api, "account").mockResolvedValue(signedOut);
diff --git a/src/settings/AccountSection.tsx b/src/settings/AccountSection.tsx
index edfbfb80..0de4c278 100644
--- a/src/settings/AccountSection.tsx
+++ b/src/settings/AccountSection.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { CircleUserRound, ListChecks, LockKeyhole, MailCheck, RefreshCw, Trash2 } from "lucide-react";
 import { api } from "../api";
-import { Button, Input } from "../ui/controls";
+import { Button, Input, StatusIcon } from "../ui/controls";
 import type { AccountView, SyncView } from "../types";
 
 const sameAccount = "It's the same account as Switchify on Android.";
-const whatSyncs = "Pointer, repeat, dwell and cursor settings; your switches and their keys; scanning and keyboard layout; switch profiles; and remote switches. Pairings, diagnostics and starting with your computer stay on each computer.";
+const whatSyncs = "Pointer, repeat, dwell and cursor settings; your switches and their keys; scanning and keyboard layout; your switch profiles; and remote switches. Pairings, diagnostics sharing, setup progress and starting with your computer stay on each computer.";
 
 type FocusTarget = "email" | "code" | "signOut" | "deleteAccount" | "keepAccount";
 type Screen = "loading" | "unavailable" | "keychain" | "signedIn" | "pending" | "signedOut";
@@ -19,11 +19,7 @@ function screenOf(account: AccountView | null): Screen {
 }
 
 // The status band and grouped rows used on Home, so the page reads like the
-// rest of the app: a colour-and-shape cue (tick or mark) on the icon.
-function StatusIcon({ ok, children }: { ok?: boolean; children: ReactNode }) {
-  return <span className="status-icon" data-ok={ok} aria-hidden="true">{children}</span>;
-}
-
+// rest of the app.
 function Band({ tone, ok, icon, title, children, action }: { tone: "ready" | "attention" | "neutral"; ok?: boolean; icon: ReactNode; title: ReactNode; children: ReactNode; action?: ReactNode }) {
   return <section className="connection-band status-hero account-band" data-tone={tone} aria-labelledby="account-title">
     <StatusIcon ok={ok}>{icon}</StatusIcon>
@@ -33,16 +29,19 @@ function Band({ tone, ok, icon, title, children, action }: { tone: "ready" | "at
 }
 
 function WhatSyncs() {
-  return <section className="status-list" aria-label="What syncs">
+  return <div className="status-list">
     <article><StatusIcon><ListChecks size={19} /></StatusIcon><div><h3>What syncs</h3><p>{whatSyncs}</p></div></article>
-  </section>;
+  </div>;
 }
 
 export function AccountSection() {
   const [account, setAccount] = useState<AccountView | null>(null);
   const [email, setEmail] = useState("");
   const [code, setCode] = useState("");
-  const [error, setError] = useState<{ text: string; id: number } | null>(null);
+  // Where an error is shown: beside the control that failed, so it is seen
+  // by whoever pressed it, not off screen at the bottom of the page.
+  type ErrorPlace = "form" | "signOut" | "delete";
+  const [error, setError] = useState<{ text: string; id: number; place: ErrorPlace } | null>(null);
   const [busy, setBusy] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   // Set only by the user's own actions, so opening the page never moves focus.
@@ -100,7 +99,7 @@ export function AccountSection() {
 
   // Controls stay enabled while busy so focus is never dropped to the page;
   // repeated presses are ignored instead.
-  const run = async (action: () => Promise<AccountView>, next: (view: AccountView) => FocusTarget | null) => {
+  const run = async (action: () => Promise<AccountView>, next: (view: AccountView) => FocusTarget | null, place: ErrorPlace = "form") => {
     if (busy) return false;
     setBusy(true);
     setError(null);
@@ -110,7 +109,7 @@ export function AccountSection() {
       setFocusNext(next(view));
       return true;
     } catch (failure) {
-      setError({ text: failure instanceof Error ? failure.message : String(failure), id: Date.now() });
+      setError({ text: failure instanceof Error ? failure.message : String(failure), id: Date.now(), place });
       return false;
     } finally {
       setBusy(false);
@@ -132,7 +131,10 @@ export function AccountSection() {
   if (!account) return <p className="setting-note">Loading…</p>;
 
   // Keyed by occurrence so the same message is announced again.
-  const errorText = error && <span key={error.id} className="field-error" id="account-error" role="alert">{error.text}</span>;
+  // Off the signed-in screen (e.g. a session rejected mid-delete) the
+  // failed control is gone, so the error joins the form that replaced it.
+  const errorAt = (place: ErrorPlace) => error && (account.signedIn ? error.place : "form") === place && <span key={error.id} className="field-error" id="account-error" role="alert">{error.text}</span>;
+  const errorText = errorAt("form");
   const errorProps = { "aria-invalid": Boolean(error), "aria-describedby": error ? "account-error" : undefined };
 
   if (!account.available) {
@@ -140,7 +142,7 @@ export function AccountSection() {
   }
 
   if (account.keychainUnavailable) {
-    return <Band tone="attention" ok={false} icon={<LockKeyhole size={26} />} title="Your keychain is locked">
+    return <Band tone="attention" ok={false} icon={<LockKeyhole size={26} />} title="Can't read your saved sign-in">
       <p ref={keychainRef} tabIndex={-1} role="status">Your saved sign-in can't be read because this computer's keychain is locked or unavailable. Unlock it, then open this page again.</p>
     </Band>;
   }
@@ -148,18 +150,19 @@ export function AccountSection() {
   if (account.signedIn) {
     return <div className="account-page">
       <Band tone="ready" ok icon={<CircleUserRound size={26} />} title={<span className="account-email">{account.email}</span>}
-        action={<Button ref={signOutRef} className="secondary" aria-disabled={busy} onClick={() => void run(api.signOut, afterSignOut)}>Sign out</Button>}>
+        action={<Button ref={signOutRef} className="secondary" aria-disabled={busy} onClick={() => void run(api.signOut, afterSignOut, "signOut")}>Sign out</Button>}>
         <p role="status">Signed in. {sameAccount}</p>
+        {errorAt("signOut")}
       </Band>
-      <section className="status-list" aria-label="Settings sync"><SyncRow /></section>
+      <div className="status-list"><SyncRow /></div>
       <WhatSyncs />
-      <section className="status-list" aria-label="Delete account">
+      <div className="status-list">
         {confirmDelete
           ? <article className="stacked-row" role="group" aria-label="Confirm account deletion">
             <StatusIcon ok={false}><Trash2 size={19} /></StatusIcon>
-            <div><h3>Delete your account?</h3><p>This removes your account and its saved settings from every device, including Switchify on Android. It cannot be undone.</p></div>
+            <div><h3>Delete your account?</h3><p>This removes your account and its saved settings from every device, including Switchify on Android. It cannot be undone.</p>{errorAt("delete")}</div>
             <div className="privacy-choice row-actions">
-              <Button className="primary danger" aria-disabled={busy} onClick={() => void run(api.deleteAccount, afterSignOut).then((ok) => { if (ok) setConfirmDelete(false); })}>Delete permanently</Button>
+              <Button className="primary danger" aria-disabled={busy} onClick={() => void run(api.deleteAccount, afterSignOut, "delete").then((ok) => { if (ok) setConfirmDelete(false); })}>Delete permanently</Button>
               <Button ref={keepRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setConfirmDelete(false); setFocusNext("deleteAccount"); }}>Keep account</Button>
             </div>
           </article>
@@ -168,8 +171,7 @@ export function AccountSection() {
             <div><h3>Delete account</h3><p>Remove your account and its saved settings from every device.</p></div>
             <Button ref={deleteRef} className="secondary danger" aria-disabled={busy} onClick={() => { if (busy) return; setError(null); setConfirmDelete(true); setFocusNext("keepAccount"); }}>Delete account…</Button>
           </article>}
-      </section>
-      {errorText}
+      </div>
     </div>;
   }
 
@@ -178,7 +180,7 @@ export function AccountSection() {
       <Band tone="neutral" icon={<MailCheck size={26} />} title="Check your email">
         <p role="status">We sent a code to <strong>{account.pendingEmail}</strong>. It can take a minute to arrive.</p>
       </Band>
-      <section className="status-list" aria-label="Enter your code">
+      <div className="status-list">
         <form className="account-form" onSubmit={verifyCode} aria-busy={busy}>
           <label className="field"><span>Code from the email</span>
             <Input ref={codeRef} value={code} inputMode="numeric" autoComplete="one-time-code" maxLength={12} readOnly={busy}
@@ -190,7 +192,7 @@ export function AccountSection() {
             <Button className="secondary" aria-disabled={busy} onClick={() => void run(api.cancelSignIn, () => "email")}>Use a different email</Button>
           </div>
         </form>
-      </section>
+      </div>
     </div>;
   }
 
@@ -198,7 +200,7 @@ export function AccountSection() {
     <Band tone="neutral" icon={<CircleUserRound size={26} />} title="Sign in to sync your settings">
       <p>{sameAccount} We email you a code to sign in; there is no password.</p>
     </Band>
-    <section className="status-list" aria-label="Sign in">
+    <div className="status-list">
       <form className="account-form" onSubmit={requestCode} aria-busy={busy}>
         <label className="field"><span>Email</span>
           <Input ref={emailRef} type="email" value={email} autoComplete="email" maxLength={254} readOnly={busy}
@@ -209,7 +211,7 @@ export function AccountSection() {
           <Button className="primary" type="submit" aria-disabled={busy || !email.trim()}>Email me a code</Button>
         </div>
       </form>
-    </section>
+    </div>
     <WhatSyncs />
   </div>;
 }
@@ -285,7 +287,9 @@ function SyncRow() {
     <StatusIcon ok={sync ? syncOk(status) : undefined}><RefreshCw size={19} /></StatusIcon>
     <div>
       <h3>Settings sync</h3>
-      <p role="status">{text}{status === "upToDate" && last && <> Last synced {last}.</>}</p>
+      {sync
+        ? <p role="status">{text}{status === "upToDate" && last && <> Last synced {last}.</>}</p>
+        : <p>{text}</p>}
       {error && <span className="field-error" role="alert">{error}</span>}
     </div>
     {sync && (status === "needsChoice"
diff --git a/src/ui/controls.tsx b/src/ui/controls.tsx
index b19b6848..ff30d686 100644
--- a/src/ui/controls.tsx
+++ b/src/ui/controls.tsx
@@ -6,6 +6,11 @@ const classes = (...names: (string | false)[]) => names.filter(Boolean).join(" "
 export function Button({ className = "", type = "button", ...props }: ComponentProps<"button">) {
   return <button type={type} className={classes("btn", className)} {...props} />;
 }
+// A status tile: green with a tick when done, amber with a mark when
+// something needs doing; `ok` omitted marks a row with only a subject.
+export function StatusIcon({ ok, children }: { ok?: boolean; children: ReactNode }) {
+  return <span className="status-icon" data-ok={ok} aria-hidden="true">{children}</span>;
+}
 export function Input({ className = "", type, ...props }: ComponentProps<"input">) {
   const visible = type !== "checkbox" && type !== "radio" && type !== "hidden";
   return <input type={type} className={classes(visible && "field-control", className)} {...props} />;

From 6da8377e531a34864687880ea91dfefcf91a1ff0 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Wed, 7 Oct 2026 10:12:58 +0100
Subject: [PATCH 3/3] Clear a cancelled delete error and test the quieter sync
 status

Keep account now clears a failed delete's error so it cannot resurface in
the sign-in form later. Tests cover the keychain band title and that the
sync status is not a live region until it is known. Remove a stray blank
line in App.tsx.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/App.tsx                          |  1 -
 src/settings/AccountSection.test.tsx | 16 +++++++++++++++-
 src/settings/AccountSection.tsx      |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f73760a0..138b163b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -67,7 +67,6 @@ function NavButton({ active, icon, children, onClick }: { active: boolean; icon:
   return <Button className="nav-button" data-active={active} aria-current={active ? "page" : undefined} onClick={onClick}>{icon}<span>{children}</span></Button>;
 }
 
-
 function AccessibilityCopy({ state, detailed = false }: { state: AppState; detailed?: boolean }) {
   if (state.accessibility === "granted") return <p>Ready</p>;
   if (state.accessibility === "unavailable") return <p>Unavailable on this system</p>;
diff --git a/src/settings/AccountSection.test.tsx b/src/settings/AccountSection.test.tsx
index 000b31d0..621fb3e3 100644
--- a/src/settings/AccountSection.test.tsx
+++ b/src/settings/AccountSection.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { api } from "../api";
 import type { AccountView, SyncView } from "../types";
@@ -59,6 +59,19 @@ describe("AccountSection", () => {
       expect(await screen.findByText(/saved by a newer Switchify PC/)).toBeInTheDocument();
     });
 
+    it("announces the sync status only once it is known", async () => {
+      vi.spyOn(api, "account").mockResolvedValue(signedIn);
+      vi.spyOn(api, "onAccount").mockResolvedValue(() => undefined);
+      let resolve: (view: SyncView) => void = () => undefined;
+      vi.spyOn(api, "settingsSync").mockImplementation(() => new Promise((done) => { resolve = done; }));
+      vi.spyOn(api, "onSettingsSync").mockResolvedValue(() => undefined);
+      render(<AccountSection />);
+      const placeholder = await screen.findByText("Checking settings sync…");
+      expect(placeholder).not.toHaveAttribute("role", "status");
+      act(() => resolve({ status: "upToDate", lastSyncedAt: null, message: null }));
+      expect(await screen.findByText("Settings are up to date.")).toHaveAttribute("role", "status");
+    });
+
     it("follows sync changes from the backend", async () => {
       let receive: (view: SyncView) => void = () => undefined;
       vi.spyOn(api, "account").mockResolvedValue(signedIn);
@@ -241,6 +254,7 @@ describe("AccountSection", () => {
 
   it("explains a locked keychain instead of offering sign-in", async () => {
     start({ ...signedOut, keychainUnavailable: true });
+    expect(await screen.findByRole("heading", { name: "Can't read your saved sign-in" })).toBeInTheDocument();
     expect(await screen.findByText(/keychain is locked or unavailable/)).toBeInTheDocument();
     expect(screen.queryByLabelText("Email")).not.toBeInTheDocument();
   });
diff --git a/src/settings/AccountSection.tsx b/src/settings/AccountSection.tsx
index 0de4c278..eb411262 100644
--- a/src/settings/AccountSection.tsx
+++ b/src/settings/AccountSection.tsx
@@ -163,7 +163,7 @@ export function AccountSection() {
             <div><h3>Delete your account?</h3><p>This removes your account and its saved settings from every device, including Switchify on Android. It cannot be undone.</p>{errorAt("delete")}</div>
             <div className="privacy-choice row-actions">
               <Button className="primary danger" aria-disabled={busy} onClick={() => void run(api.deleteAccount, afterSignOut, "delete").then((ok) => { if (ok) setConfirmDelete(false); })}>Delete permanently</Button>
-              <Button ref={keepRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setConfirmDelete(false); setFocusNext("deleteAccount"); }}>Keep account</Button>
+              <Button ref={keepRef} className="secondary" aria-disabled={busy} onClick={() => { if (busy) return; setError(null); setConfirmDelete(false); setFocusNext("deleteAccount"); }}>Keep account</Button>
             </div>
           </article>
           : <article>