From b93e61bbad27a526c07bb4ddb4b027e670241d08 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 5 Oct 2026 13:36:50 +1100
Subject: [PATCH 1/2] fix(auth): preserve login intent and polish account
 screens

---
 app/pages/collections/new.vue                 |  39 +++---
 app/pages/me/cli-tokens/new.vue               |   6 +-
 app/pages/me/devices.vue                      |   5 +-
 .../identity/app/components/HeaderAccount.vue |  23 +--
 layers/identity/app/composables/useAuth.ts    |  23 ++-
 layers/identity/app/pages/login.vue           |  13 +-
 layers/identity/app/pages/me/index.vue        |  59 +++++---
 .../app/pages/onboarding/discover.vue         |  24 +++-
 .../identity/app/pages/onboarding/email.vue   |  33 +++--
 .../server/routes/auth/cli-prepare.get.ts     |  23 +--
 .../identity/server/routes/auth/github.get.ts |  68 ++++++---
 layers/marketing/content/pages/privacy.md     |   2 +-
 test/unit/github-login-intent.test.ts         | 131 ++++++++++++++++++
 test/unit/login-interactions.test.ts          |  91 ++++++++++++
 test/unit/me-watchlist.test.ts                |  46 +++++-
 15 files changed, 463 insertions(+), 123 deletions(-)
 create mode 100644 test/unit/github-login-intent.test.ts
 create mode 100644 test/unit/login-interactions.test.ts

diff --git a/app/pages/collections/new.vue b/app/pages/collections/new.vue
index cd5c5ef7..7bbdb487 100644
--- a/app/pages/collections/new.vue
+++ b/app/pages/collections/new.vue
@@ -66,7 +66,7 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
   >
     <h1
       id="new-collection-heading"
-      class="font-mono text-2xl font-medium tracking-tight"
+      class="text-2xl font-semibold tracking-tight"
     >
       Publish a collection
     </h1>
@@ -76,16 +76,15 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
 
     <div
       v-if="!isAuthenticated"
-      class="mt-6 rounded-lg border border-default p-6 text-center"
+      class="mt-6 rounded-lg border border-default p-4"
     >
-      <UIcon name="i-lucide-github" class="mx-auto size-6 text-muted" aria-hidden="true" />
-      <p class="mt-3 text-sm">
+      <p class="text-sm">
         Sign in with GitHub to publish.
       </p>
       <UButton
         :to="githubLoginHref"
         external
-        class="mt-4"
+        class="mt-4 min-h-11"
         size="sm"
         label="Continue with GitHub"
         icon="i-lucide-github"
@@ -98,19 +97,19 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
       @submit.prevent="submit"
     >
       <div>
-        <label for="name" class="text-xs uppercase tracking-wide text-muted">Name</label>
+        <label for="name" class="font-mono text-sm text-muted">Name</label>
         <input
           id="name"
           v-model="name"
           required
           maxlength="120"
-          class="mt-1 w-full rounded border border-default bg-default px-3 py-2 font-mono text-sm"
+          class="mt-2 min-h-11 w-full rounded-lg border border-default bg-default px-3 py-2 font-mono text-sm"
           placeholder="My Stack"
         >
       </div>
 
       <div>
-        <label for="slug" class="text-xs uppercase tracking-wide text-muted">Slug</label>
+        <label for="slug" class="font-mono text-sm text-muted">Slug</label>
         <div class="mt-1 flex items-center gap-2">
           <span class="font-mono text-xs text-muted">/@{{ user?.login }}/</span>
           <input
@@ -118,33 +117,34 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
             v-model="slug"
             required
             pattern="[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?"
-            class="flex-1 rounded border border-default bg-default px-3 py-2 font-mono text-sm"
+            class="min-h-11 min-w-0 flex-1 rounded-lg border border-default bg-default px-3 py-2 font-mono text-sm"
             placeholder="my-stack"
           >
         </div>
       </div>
 
       <div>
-        <label for="preamble" class="text-xs uppercase tracking-wide text-muted">Preamble (optional)</label>
+        <label for="preamble" class="font-mono text-sm text-muted">Preamble (optional)</label>
         <textarea
           id="preamble"
           v-model="preamble"
           rows="4"
           maxlength="4000"
-          class="mt-1 w-full rounded border border-default bg-default px-3 py-2 text-sm"
+          class="mt-2 w-full rounded-lg border border-default bg-default px-3 py-2 text-sm"
           placeholder="A few sentences on what this collection is for."
         />
       </div>
 
       <div>
         <div class="flex items-center justify-between">
-          <span class="text-xs uppercase tracking-wide text-muted">Skills</span>
+          <span class="font-mono text-sm text-muted">Skills</span>
           <UButton
             size="xs"
             color="neutral"
             variant="outline"
             icon="i-lucide-plus"
             label="Add"
+            class="min-h-11"
             @click="addSkill"
           />
         </div>
@@ -152,23 +152,25 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
           <li
             v-for="(s, i) in skills"
             :key="i"
-            class="flex items-center gap-2"
+            class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.5fr)_auto]"
           >
             <input
               v-model="s.owner"
               placeholder="owner"
-              class="w-32 rounded border border-default bg-default px-2 py-1 font-mono text-xs"
+              aria-label="Owner"
+              class="min-h-11 min-w-0 rounded-lg border border-default bg-default px-3 py-2 font-mono text-sm"
             >
-            <span class="font-mono text-xs text-muted">/</span>
             <input
               v-model="s.repo"
               placeholder="repo"
-              class="w-40 rounded border border-default bg-default px-2 py-1 font-mono text-xs"
+              aria-label="Repository"
+              class="min-h-11 min-w-0 rounded-lg border border-default bg-default px-3 py-2 font-mono text-sm"
             >
             <input
               v-model="s.reason"
               placeholder="Why this skill? (optional)"
-              class="flex-1 rounded border border-default bg-default px-2 py-1 text-xs"
+              aria-label="Reason (optional)"
+              class="col-span-3 row-start-2 min-h-11 min-w-0 rounded-lg border border-default bg-default px-3 py-2 text-sm sm:col-span-1 sm:row-auto"
             >
             <UButton
               size="xs"
@@ -176,6 +178,7 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
               variant="ghost"
               icon="i-lucide-x"
               aria-label="Remove skill"
+              class="min-h-11 min-w-11 justify-center"
               @click="removeSkill(i)"
             />
           </li>
@@ -197,12 +200,14 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
           variant="ghost"
           size="sm"
           label="Cancel"
+          class="min-h-11"
         />
         <UButton
           :loading="submitting"
           type="submit"
           size="sm"
           label="Publish"
+          class="min-h-11"
           trailing-icon="i-lucide-arrow-right"
         />
       </div>
diff --git a/app/pages/me/cli-tokens/new.vue b/app/pages/me/cli-tokens/new.vue
index ac81239d..c0766217 100644
--- a/app/pages/me/cli-tokens/new.vue
+++ b/app/pages/me/cli-tokens/new.vue
@@ -27,8 +27,9 @@ useSeoMeta({ title: 'New token', robots: 'noindex' })
 
 <template>
   <section class="mx-auto max-w-xl px-4 pt-12 pb-16 sm:px-6 md:pt-16">
+    <UButton to="/me/devices" label="Devices and tokens" icon="i-lucide-arrow-left" color="neutral" variant="link" class="mb-4 min-h-11 px-0" />
     <header class="border-b border-default pb-6">
-      <h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">
+      <h1 class="text-2xl font-semibold tracking-tight sm:text-3xl">
         New token
       </h1>
       <p class="mt-3 text-base leading-relaxed text-muted">
@@ -38,7 +39,7 @@ useSeoMeta({ title: 'New token', robots: 'noindex' })
 
     <UForm v-if="state._tag !== 'created'" :schema="schema" :state="form" class="mt-6 space-y-5" @submit="createToken">
       <UFormField label="Label" name="label" description="Choose a name you can recognise when you revoke it." required>
-        <UInput v-model="form.label" placeholder="API script" maxlength="80" autocomplete="off" :disabled="state._tag === 'creating'" class="w-full" />
+        <UInput v-model="form.label" placeholder="API script" maxlength="80" autocomplete="off" :disabled="state._tag === 'creating'" :ui="{ base: 'min-h-11' }" class="w-full" />
       </UFormField>
       <UFormField label="Expiry" name="ttl">
         <USelect
@@ -49,6 +50,7 @@ useSeoMeta({ title: 'New token', robots: 'noindex' })
             { label: '365 days', value: '365' },
           ]"
           :disabled="state._tag === 'creating'"
+          :ui="{ base: 'min-h-11' }"
           class="w-full"
         />
       </UFormField>
diff --git a/app/pages/me/devices.vue b/app/pages/me/devices.vue
index 418f2843..22c365b6 100644
--- a/app/pages/me/devices.vue
+++ b/app/pages/me/devices.vue
@@ -70,10 +70,11 @@ useSeoMeta({ title: 'Devices and tokens', robots: 'noindex' })
 </script>
 
 <template>
-  <section class="mx-auto max-w-3xl px-4 pt-10 pb-16 sm:px-6 md:pt-14">
+  <section class="mx-auto max-w-5xl px-4 pt-10 pb-16 sm:px-6 md:pt-14">
+    <UButton to="/me" label="Your skills" icon="i-lucide-arrow-left" color="neutral" variant="link" class="mb-4 min-h-11 px-0" />
     <header class="flex flex-col gap-5 border-b border-default pb-7 sm:flex-row sm:items-end sm:justify-between">
       <div>
-        <h1 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+        <h1 class="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
           Devices and tokens
         </h1>
         <p class="mt-3 max-w-xl text-base leading-relaxed text-muted text-pretty">
diff --git a/layers/identity/app/components/HeaderAccount.vue b/layers/identity/app/components/HeaderAccount.vue
index 07ec462f..413f4e8a 100644
--- a/layers/identity/app/components/HeaderAccount.vue
+++ b/layers/identity/app/components/HeaderAccount.vue
@@ -15,14 +15,17 @@ const { variant = 'bar' } = defineProps<{
   variant?: 'bar' | 'menu'
 }>()
 
-const { state, logout } = useAuth()
+const { state, logout, isLoading } = useAuth()
+
+const route = useRoute()
+const signInTo = computed(() => route.path === '/login' ? route.fullPath : { path: '/login', query: { return_to: route.fullPath } })
 
 const accountItems = computed<DropdownMenuItem[]>(() => {
   if (state.value._tag !== 'signed-in')
     return []
   return [
     { label: `@${state.value.user.login}`, icon: 'i-lucide-user', to: '/me' },
-    { label: 'Sign out', icon: 'i-lucide-log-out', onSelect: () => { void logout() } },
+    { label: 'Sign out', disabled: isLoading.value, icon: 'i-lucide-log-out', onSelect: () => { void logout() } },
   ]
 })
 </script>
@@ -39,7 +42,7 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
     />
     <UButton
       v-else-if="state._tag === 'anonymous'"
-      to="/login"
+      :to="signInTo"
       label="Sign in"
       icon="i-lucide-github"
       color="neutral"
@@ -60,13 +63,12 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
         class="size-11 justify-center p-0"
         :aria-label="`Signed in as @${state.user.login}`"
       >
-        <img
+        <UAvatar
           :src="githubAvatarProxyUrl(state.user.login, 64)"
-          alt=""
-          width="28"
-          height="28"
-          class="size-7 rounded-full"
-        >
+          :alt="state.user.login"
+          size="xs"
+          class="size-7"
+        />
       </UButton>
     </LazyUDropdownMenu>
   </div>
@@ -82,7 +84,7 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
     />
     <UButton
       v-else-if="state._tag === 'anonymous'"
-      to="/login"
+      :to="signInTo"
       label="Sign in"
       icon="i-lucide-github"
       color="neutral"
@@ -107,6 +109,7 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
         variant="ghost"
         block
         class="min-h-11 justify-start"
+        :loading="isLoading"
         @click="() => { void logout() }"
       />
     </template>
diff --git a/layers/identity/app/composables/useAuth.ts b/layers/identity/app/composables/useAuth.ts
index 1a34d64e..df08f73f 100644
--- a/layers/identity/app/composables/useAuth.ts
+++ b/layers/identity/app/composables/useAuth.ts
@@ -17,18 +17,31 @@ export type AuthState
 
 // Backed by nuxt-auth-utils useUserSession().
 export function useAuth() {
-  const { ready, loggedIn, user, clear, fetch: fetchSession } = useUserSession()
+  const { ready, loggedIn, user, session, fetch: fetchSession } = useUserSession()
   const state = computed<AuthState>(() => {
     if (!ready.value)
       return { _tag: 'pending' }
     return user.value ? { _tag: 'signed-in', user: user.value } : { _tag: 'anonymous' }
   })
   const isAuthenticated = computed(() => loggedIn.value)
-  const isLoading = ref(false)
+  const isLoading = useState('auth:logging-out', () => false)
+  const toast = useToast()
   async function logout() {
-    await $fetch('/api/auth/logout', { method: 'POST' })
-    await clear()
-    await navigateTo('/')
+    if (isLoading.value)
+      return
+    isLoading.value = true
+    const result = await $fetch('/api/auth/logout', { method: 'POST', retry: false })
+      .then(() => ({ _tag: 'ok' as const }))
+      .catch((cause: unknown) => ({ _tag: 'err' as const, cause }))
+    isLoading.value = false
+    if (result._tag === 'err') {
+      console.warn('[logout]', result.cause)
+      toast.add({ title: 'Could not sign out', description: 'Check your connection and try again.', color: 'error' })
+      return
+    }
+    session.value = null
+    removeNuxtQueries()
+    await navigateTo('/', { external: true })
   }
   function loginUrl(opts: { returnTo?: string, action?: string } = {}): string {
     const params = new URLSearchParams()
diff --git a/layers/identity/app/pages/login.vue b/layers/identity/app/pages/login.vue
index 247230b9..87e68925 100644
--- a/layers/identity/app/pages/login.vue
+++ b/layers/identity/app/pages/login.vue
@@ -26,10 +26,9 @@ useSeoMeta({
 </script>
 
 <template>
-  <section class="mx-auto max-w-md px-4 sm:px-6 pt-16 pb-12 md:pt-24">
-    <div class="rounded-lg border border-default p-6 sm:p-8 text-center">
-      <UIcon name="i-lucide-github" class="mx-auto size-8 text-muted" aria-hidden="true" />
-      <h1 class="mt-3 font-mono text-lg font-medium">
+  <section class="mx-auto max-w-md px-4 sm:px-6 pt-10 pb-12 md:pt-16">
+    <div class="rounded-lg border border-default p-4 sm:p-5">
+      <h1 class="text-2xl font-semibold tracking-tight">
         Sign in to skilld
       </h1>
       <p class="mt-2 text-sm text-muted leading-relaxed">
@@ -42,13 +41,15 @@ useSeoMeta({
           label="Continue with GitHub"
           icon="i-lucide-github"
           trailing-icon="i-lucide-arrow-right"
-          size="sm"
+          size="md"
+          class="min-h-11"
           block
         />
       </div>
       <p
         v-if="error"
-        class="mt-3 text-xs text-error"
+        class="mt-4 text-sm text-error"
+        role="alert"
       >
         Couldn't complete sign-in. Try again.
       </p>
diff --git a/layers/identity/app/pages/me/index.vue b/layers/identity/app/pages/me/index.vue
index bb57dc9f..aa002510 100644
--- a/layers/identity/app/pages/me/index.vue
+++ b/layers/identity/app/pages/me/index.vue
@@ -26,8 +26,8 @@ interface LikedSkill {
   registryPath: string
 }
 
-const { data: me } = await useNuxtRpcQuery(identityAccountQueries.me(), identityAccountQueryOptions)
-const { data: subs } = await useNuxtRpcQuery(identityAccountQueries.subscriptions(), identityAccountQueryOptions)
+const { data: me, error: accountError, status: accountStatus, refresh: retryAccount } = await useNuxtRpcQuery(identityAccountQueries.me(), identityAccountQueryOptions)
+const { data: subs, error: subscriptionsError, status: subscriptionsStatus, refresh: retrySubscriptions } = await useNuxtRpcQuery(identityAccountQueries.subscriptions(), identityAccountQueryOptions)
 const {
   data: likes,
   error: likesError,
@@ -124,12 +124,19 @@ const emailForm = reactive({
   email_opt_in: !!me.value?.email_opt_in,
   weekly_opt_in: me.value?.weekly_opt_in ?? true,
 })
+watch(showEmail, (open) => {
+  if (open && me.value) {
+    emailForm.digest_email = me.value.digest_email ?? me.value.email ?? ''
+    emailForm.email_opt_in = me.value.email_opt_in
+    emailForm.weekly_opt_in = me.value.weekly_opt_in
+  }
+})
 const emailMissingAddress = computed(() =>
   (emailForm.email_opt_in || emailForm.weekly_opt_in)
   && !/^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/.test(emailForm.digest_email.trim()),
 )
 async function saveEmail() {
-  if (emailMissingAddress.value)
+  if (emailMissingAddress.value || saveEmailMutation.pending.value)
     return
   const saved = await saveEmailMutation.mutateSafe({ ...emailForm })
   if (saved._tag === 'ok')
@@ -236,8 +243,16 @@ async function deleteAccount() {
 </script>
 
 <template>
-  <section class="mx-auto max-w-7xl px-4 pt-8 pb-16 sm:px-6 md:pt-12 md:pb-20">
-    <header class="flex flex-col gap-5 border-b border-default pb-8 sm:flex-row sm:items-center sm:justify-between">
+  <section v-if="!me" class="mx-auto max-w-5xl px-4 pt-8 pb-16 sm:px-6 md:pt-12 md:pb-20">
+    <div class="editorial-state" :role="accountError ? 'alert' : 'status'">
+      <h1 class="text-2xl font-semibold">
+        {{ accountError ? 'Could not load your account' : 'Loading your account' }}
+      </h1>
+      <UButton v-if="accountError" label="Retry" color="neutral" variant="outline" class="mt-4 min-h-11" :loading="accountStatus === 'pending'" @click="retryAccount()" />
+    </div>
+  </section>
+  <section v-else class="mx-auto max-w-5xl px-4 pt-8 pb-16 sm:px-6 md:pt-12 md:pb-20">
+    <header class="flex flex-col gap-5 border-b border-default pb-5 sm:flex-row sm:items-center sm:justify-between">
       <div class="flex min-w-0 items-center gap-4">
         <img
           v-if="me?.avatar"
@@ -249,10 +264,7 @@ async function deleteAccount() {
           fetchpriority="high"
         >
         <div class="min-w-0">
-          <p class="section-label">
-            Your skilld
-          </p>
-          <p class="mt-1 truncate text-lg font-semibold">
+          <p class="truncate text-lg font-semibold">
             {{ me?.name || `@${me?.login}` }}
           </p>
           <p v-if="me?.name" class="truncate font-mono text-xs text-muted">
@@ -278,12 +290,12 @@ async function deleteAccount() {
       </div>
     </header>
 
-    <div class="mt-10 grid min-w-0 gap-12 lg:grid-cols-[minmax(0,1fr)_22rem] lg:gap-16">
+    <div class="mt-6 grid min-w-0 gap-8 lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-8">
       <div class="min-w-0">
         <section aria-label="Your skills">
           <div class="flex flex-col gap-5 border-b border-default pb-6 sm:flex-row sm:items-end sm:justify-between">
             <div>
-              <h1 class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+              <h1 class="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
                 Your skills
               </h1>
               <p class="mt-3 max-w-2xl text-base leading-relaxed text-muted text-pretty">
@@ -295,7 +307,7 @@ async function deleteAccount() {
             </p>
           </div>
 
-          <div v-if="likesLoading" class="editorial-state mt-6 flex flex-col items-start justify-center">
+          <div v-if="likesLoading" class="editorial-state mt-6 flex flex-col items-start justify-center" role="status">
             <UIcon name="i-lucide-loader-circle" class="size-5 animate-spin text-muted" aria-hidden="true" />
             <h2 class="mt-4 text-lg font-semibold">
               Loading your skills
@@ -371,7 +383,7 @@ async function deleteAccount() {
         </section>
       </div>
 
-      <aside class="min-w-0 space-y-10 lg:border-l lg:border-default lg:pl-8" aria-label="Skill delivery settings">
+      <aside class="min-w-0 space-y-6 lg:border-l lg:border-default lg:pl-6" aria-label="Skill delivery settings">
         <AgentSetupCard />
 
         <section>
@@ -421,7 +433,7 @@ async function deleteAccount() {
                 aria-controls="email-settings-form"
                 @click="showEmail = !showEmail"
               />
-              <div v-show="showEmail" id="email-settings-form" class="mt-4 space-y-4">
+              <form v-show="showEmail" id="email-settings-form" class="mt-4 space-y-4" @submit.prevent="saveEmail">
                 <UFormField label="Email address" name="email" :error="emailMissingAddress ? 'Add a valid email address, or turn off both emails.' : undefined">
                   <UInput
                     v-model="emailForm.digest_email"
@@ -459,9 +471,9 @@ async function deleteAccount() {
                   label="Save email settings"
                   :disabled="emailMissingAddress"
                   :loading="saveEmailMutation.pending.value"
-                  @click="saveEmail"
+                  type="submit"
                 />
-              </div>
+              </form>
             </div>
           </div>
         </section>
@@ -524,7 +536,16 @@ async function deleteAccount() {
             @click="sync"
           />
 
-          <details v-if="subs?.items.length" class="mt-5 border-y border-default">
+          <div v-if="subscriptionsError" class="mt-4" role="alert">
+            <p class="text-sm text-error">
+              Could not load watched Repositories. Try again.
+            </p>
+            <UButton label="Retry" color="neutral" variant="outline" class="mt-3 min-h-11" :loading="subscriptionsStatus === 'pending'" @click="retrySubscriptions()" />
+          </div>
+          <p v-else-if="subscriptionsStatus === 'pending' && !subs" class="mt-4 text-sm text-muted" role="status">
+            Loading watched Repositories
+          </p>
+          <details v-else-if="subs?.items.length" class="mt-5 border-y border-default">
             <summary class="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 py-3 font-mono text-xs">
               View repositories
               <UIcon name="i-lucide-chevron-down" class="size-4 text-muted" aria-hidden="true" />
@@ -563,9 +584,9 @@ async function deleteAccount() {
         </section>
 
         <nav class="border-t border-default pt-6" aria-label="Account tools">
-          <p class="section-label mb-3">
+          <h2 class="mb-3 text-lg font-semibold">
             Account
-          </p>
+          </h2>
           <UButton
             to="/me/devices"
             color="neutral"
diff --git a/layers/identity/app/pages/onboarding/discover.vue b/layers/identity/app/pages/onboarding/discover.vue
index 24f6cab6..e77a504e 100644
--- a/layers/identity/app/pages/onboarding/discover.vue
+++ b/layers/identity/app/pages/onboarding/discover.vue
@@ -19,7 +19,7 @@ interface StarredRepo {
   watching: boolean
   skills: Skill[]
 }
-const { data, refresh, status } = await useFetch<{ items: StarredRepo[], syncedAt: number | null }>('/api/me/starred')
+const { data, refresh, status, error } = await useFetch<{ items: StarredRepo[], syncedAt: number | null }>('/api/me/starred')
 
 const skillItems = computed(() => (data.value?.items ?? []).filter(r => r.hasSkill))
 const totalSkills = computed(() => skillItems.value.reduce((n, r) => n + r.skills.length, 0))
@@ -84,6 +84,8 @@ const actionFailed = useActionFailure()
 
 const submitting = ref(false)
 async function watchSelected() {
+  if (submitting.value || syncing.value)
+    return
   if (!selected.value.size) {
     await navigateTo('/onboarding/email')
     return
@@ -93,12 +95,13 @@ async function watchSelected() {
     const [owner, repo] = k.split('/')
     return { owner, repo }
   })
-  await $fetch('/api/me/subscriptions', {
+  const saved = await $fetch('/api/me/subscriptions', {
     method: 'POST',
     body: { source: 'star-import', repos },
   }).catch(actionFailed('start watching those repos'))
   submitting.value = false
-  await navigateTo('/onboarding/email')
+  if (saved)
+    await navigateTo('/onboarding/email')
 }
 
 useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
@@ -107,7 +110,7 @@ useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
 <template>
   <section class="mx-auto max-w-2xl px-4 sm:px-6 pt-8 pb-12 md:pt-12">
     <OnboardingSteps :step="1" />
-    <h1 class="mt-6 font-mono text-2xl font-medium">
+    <h1 class="mt-6 text-2xl font-semibold tracking-tight">
       Watch what you've already starred
     </h1>
     <p class="mt-2 text-sm text-muted">
@@ -144,7 +147,13 @@ useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
     <div v-if="status === 'pending' || (syncing && !skillItems.length)" class="mt-6 text-sm text-muted">
       Loading your stars...
     </div>
-    <div v-else-if="!skillItems.length" class="mt-6 rounded-lg border border-default p-6 text-sm text-muted">
+    <div v-else-if="error" class="editorial-state mt-6" role="alert">
+      <p class="text-sm text-error">
+        Could not load your stars. Check your connection and try again.
+      </p>
+      <UButton label="Retry" color="neutral" variant="outline" class="mt-4 min-h-11" @click="refresh()" />
+    </div>
+    <div v-else-if="!skillItems.length" class="mt-6 rounded-lg border border-default p-4 text-sm text-muted">
       <template v-if="!data?.syncedAt">
         No star import yet. Click <strong>Import stars</strong> above, or
       </template>
@@ -163,7 +172,7 @@ useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
         <button
           v-if="selectableItems.length"
           type="button"
-          class="text-xs text-muted hover:text-default underline"
+          class="min-h-11 font-mono text-sm text-muted hover:text-default underline"
           @click="toggleAll"
         >
           {{ allSelected ? 'Deselect all' : 'Select all' }}
@@ -210,11 +219,12 @@ useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
     </template>
 
     <div class="mt-8 flex items-center justify-between">
-      <NuxtLink to="/onboarding/email" class="text-sm text-muted hover:text-default underline">
+      <NuxtLink to="/onboarding/email" class="inline-flex min-h-11 items-center font-mono text-sm text-muted hover:text-default underline">
         Skip
       </NuxtLink>
       <UButton
         :loading="submitting"
+        :disabled="syncing"
         :label="selected.size ? `Watch ${selected.size}` : 'Continue'"
         trailing-icon="i-lucide-arrow-right"
         size="sm"
diff --git a/layers/identity/app/pages/onboarding/email.vue b/layers/identity/app/pages/onboarding/email.vue
index bb3e4923..6f9a79de 100644
--- a/layers/identity/app/pages/onboarding/email.vue
+++ b/layers/identity/app/pages/onboarding/email.vue
@@ -4,10 +4,14 @@ import { identityAccountQueries, identityAccountQueryOptions } from '../../queri
 
 definePageMeta({ middleware: ['auth'] })
 
-const { data: me } = await useNuxtRpcQuery(identityAccountQueries.me(), identityAccountQueryOptions)
+const { data: me, error: accountError, status: accountStatus, refresh: retryAccount } = await useNuxtRpcQuery(identityAccountQueries.me(), identityAccountQueryOptions)
 const { fetchSession } = useAuth()
 
 const email = ref(me.value?.digest_email || me.value?.email || '')
+watch(me, (account, previous) => {
+  if (account && !previous)
+    email.value = account.digest_email || account.email || ''
+})
 const optIn = ref(true)
 const weeklyOptIn = ref(true)
 
@@ -33,7 +37,7 @@ const missingAddress = computed(() => (optIn.value || weeklyOptIn.value)
 
 const submitting = computed(() => saveEmailMutation.pending.value || finishOnboardingMutation.pending.value)
 async function finish() {
-  if (missingAddress.value)
+  if (!me.value || missingAddress.value || submitting.value)
     return
   const saved = await saveEmailMutation.mutateSafe({
     digest_email: email.value,
@@ -57,23 +61,31 @@ useSeoMeta({ title: 'Email opt-in', robots: 'noindex' })
 <template>
   <section class="mx-auto max-w-md px-4 sm:px-6 pt-8 pb-12 md:pt-12">
     <OnboardingSteps :step="2" />
-    <h1 class="mt-6 font-mono text-2xl font-medium">
+    <h1 class="mt-6 text-2xl font-semibold tracking-tight">
       Email
     </h1>
     <p class="mt-2 text-sm text-muted">
       Choose which useful updates reach your inbox. You can change this later.
     </p>
 
-    <div class="mt-6 space-y-4">
+    <div v-if="!me" class="editorial-state mt-6" :role="accountError ? 'alert' : 'status'">
+      <p class="text-sm" :class="accountError ? 'text-error' : 'text-muted'">
+        {{ accountError ? 'Could not load your account. Try again.' : 'Loading your account' }}
+      </p>
+      <UButton v-if="accountError" label="Retry" color="neutral" variant="outline" class="mt-4 min-h-11" :loading="accountStatus === 'pending'" @click="retryAccount()" />
+    </div>
+    <form v-else id="email-onboarding-form" class="mt-6 space-y-4" @submit.prevent="finish">
       <div>
-        <label for="email" class="text-xs uppercase tracking-wide text-muted">Email address</label>
+        <label for="email" class="font-mono text-sm text-muted">Email address</label>
         <input
           id="email"
           v-model="email"
           type="email"
           :aria-invalid="missingAddress"
           :aria-describedby="missingAddress ? 'email-error' : undefined"
-          class="mt-1 w-full rounded border border-default bg-default px-2 py-1 font-mono text-sm"
+          autocomplete="email"
+          :disabled="submitting"
+          class="mt-2 min-h-11 w-full rounded-lg border border-default bg-default px-3 py-2 font-mono text-sm focus-visible:outline-2 focus-visible:outline-primary"
         >
         <p v-if="missingAddress" id="email-error" class="mt-1 text-xs text-error">
           Add an email address, or turn off both emails.
@@ -97,7 +109,7 @@ useSeoMeta({ title: 'Email opt-in', robots: 'noindex' })
       <p v-if="!optIn && !weeklyOptIn" class="rounded-lg border border-default bg-elevated/50 p-3 text-xs text-muted">
         You won't receive any emails. You can opt in later from your dashboard.
       </p>
-    </div>
+    </form>
 
     <div class="mt-8 flex items-center justify-between">
       <UButton
@@ -105,16 +117,19 @@ useSeoMeta({ title: 'Email opt-in', robots: 'noindex' })
         label="Back"
         leading-icon="i-lucide-arrow-left"
         size="sm"
+        class="min-h-11"
         color="neutral"
         variant="ghost"
       />
       <UButton
         :loading="submitting"
-        :disabled="missingAddress"
+        :disabled="!me || missingAddress"
         label="Finish"
         trailing-icon="i-lucide-check"
         size="sm"
-        @click="finish"
+        class="min-h-11"
+        type="submit"
+        form="email-onboarding-form"
       />
     </div>
   </section>
diff --git a/layers/identity/server/routes/auth/cli-prepare.get.ts b/layers/identity/server/routes/auth/cli-prepare.get.ts
index 50792d51..b2d7e5e2 100644
--- a/layers/identity/server/routes/auth/cli-prepare.get.ts
+++ b/layers/identity/server/routes/auth/cli-prepare.get.ts
@@ -1,24 +1,7 @@
-/**
- * Pre-OAuth bounce that preserves `return_to` across the GitHub redirect.
- *
- * nuxt-auth-utils' `defineOAuthGitHubEventHandler` drops query params on the
- * way to GitHub, so the CLI's loopback target (`/cli/authorize?challenge=…`)
- * is lost by the time `onSuccess` fires. Stash it in a 10-minute cookie and
- * `auth/github.get.ts:onSuccess` reads it back.
- */
 import { parseReturnTo } from '#shared/return-to'
 
+// Browser and CLI sign-in share the same sealed intent through GitHub.
 export default defineEventHandler((event) => {
-  const query = getQuery(event)
-  const returnTo = parseReturnTo(query.return_to)
-
-  setCookie(event, 'cli_return_to', returnTo, {
-    httpOnly: true,
-    sameSite: 'lax',
-    secure: true,
-    maxAge: 600,
-    path: '/',
-  })
-
-  return sendRedirect(event, '/auth/github')
+  const returnTo = parseReturnTo(getQuery(event).return_to)
+  return sendRedirect(event, `/auth/github?return_to=${encodeURIComponent(returnTo)}`)
 })
diff --git a/layers/identity/server/routes/auth/github.get.ts b/layers/identity/server/routes/auth/github.get.ts
index b6890a0e..70af369b 100644
--- a/layers/identity/server/routes/auth/github.get.ts
+++ b/layers/identity/server/routes/auth/github.get.ts
@@ -1,3 +1,5 @@
+import type { H3Event } from 'h3'
+import { useSession } from 'h3'
 import { z } from 'zod'
 import { parseReturnTo } from '#shared/return-to'
 import { fetchVerifiedPrimaryEmail } from '../../utils/github-emails'
@@ -25,7 +27,7 @@ const githubTokensSchema = z.object({
   }
 })
 
-export default defineOAuthGitHubEventHandler({
+const githubHandler = defineOAuthGitHubEventHandler({
   config: {
     emailRequired: false,
   },
@@ -84,6 +86,13 @@ export default defineOAuthGitHubEventHandler({
         void scanPromise
     }
 
+    const intent = await loginIntentSession(event)
+    const action = typeof intent.data.action === 'string' ? intent.data.action : ''
+    const returnTo = parseReturnTo(intent.data.returnTo, '')
+
+    if (action.startsWith('watch-') || action.startsWith('like-'))
+      await handleWatchAction(event, row.id, action, returnTo)
+
     await setUserSession(event, {
       user: {
         id: row.id,
@@ -96,20 +105,7 @@ export default defineOAuthGitHubEventHandler({
       loggedInAt: Math.floor(Date.now() / 1000),
     })
 
-    const query = getQuery(event)
-    const action = typeof query.action === 'string' ? query.action : ''
-    const queryReturnTo = typeof query.return_to === 'string' ? parseReturnTo(query.return_to, '') : ''
-
-    // CLI flow stashes the (longer) return_to in a cookie because OAuth round-
-    // trips drop query params. Cookie takes priority over the query string.
-    const cookieReturnTo = getCookie(event, 'cli_return_to')
-    const returnTo = cookieReturnTo ? parseReturnTo(cookieReturnTo, queryReturnTo) : queryReturnTo
-
-    if (cookieReturnTo)
-      deleteCookie(event, 'cli_return_to', { path: '/' })
-
-    if (action.startsWith('watch-') || action.startsWith('like-'))
-      await handleWatchAction(event, row.id, action, returnTo)
+    await intent.clear()
 
     if (returnTo)
       return sendRedirect(event, returnTo)
@@ -119,8 +115,42 @@ export default defineOAuthGitHubEventHandler({
 
     return sendRedirect(event, '/me')
   },
-  onError(event) {
-    emitOperationalEvent(createWideEvent({ operation: 'github-oauth', outcome: 'failed' }), 'error')
-    return sendRedirect(event, '/login?error=oauth')
-  },
+  onError: loginFailed,
+})
+
+async function loginFailed(event: H3Event) {
+  emitOperationalEvent(createWideEvent({ operation: 'github-oauth', outcome: 'failed' }), 'error')
+  const intent = await loginIntentSession(event)
+  const params = new URLSearchParams({ error: 'oauth' })
+  const returnTo = parseReturnTo(intent.data.returnTo, '')
+  if (returnTo)
+    params.set('return_to', returnTo)
+  if (typeof intent.data.action === 'string' && intent.data.action)
+    params.set('action', intent.data.action)
+  await intent.clear()
+  return sendRedirect(event, `/login?${params}`)
+}
+
+// Seal browser intent separately from identity. GitHub returns only code and state.
+function loginIntentSession(event: H3Event) {
+  const config = useRuntimeConfig(event)
+  return useSession<{ returnTo: string, action: string }>(event, {
+    name: 'skilld-login-intent',
+    password: process.env.NUXT_SESSION_PASSWORD || config.session.password,
+    maxAge: 600,
+    cookie: { httpOnly: true, sameSite: 'lax', secure: !import.meta.dev, path: '/' },
+  })
+}
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  if (!query.code && !query.error && !query.state) {
+    const intent = await loginIntentSession(event)
+    const action = ['like-skill', 'watch-skill', 'watch-collection'].includes(String(query.action))
+      ? String(query.action)
+      : ''
+    await intent.update({ returnTo: parseReturnTo(query.return_to, ''), action })
+  }
+  // Provider network failures can throw before the OAuth error callback runs.
+  return githubHandler(event).catch(() => loginFailed(event))
 })
diff --git a/layers/marketing/content/pages/privacy.md b/layers/marketing/content/pages/privacy.md
index 85a1db3e..ab7c1dab 100644
--- a/layers/marketing/content/pages/privacy.md
+++ b/layers/marketing/content/pages/privacy.md
@@ -54,7 +54,7 @@ skilld.dev sets these cookies and no others:
 - `nuxt-session` keeps you signed in. skilld.dev sets it only when you sign in. It holds your account ID, login, name, and avatar URL, encrypted. It ends when you close your browser.
 - `__nkpv` records which version of the site your browser loaded, so an update does not break an open page. It lasts 7 days.
 - `nuxt-auth-state` protects the GitHub sign-in step against forged requests. It lasts 10 minutes.
-- `cli_return_to` returns you to the CLI sign-in page after you sign in with GitHub. It lasts 10 minutes.
+- `skilld-login-intent` keeps your return page and pending Like or Watch action during GitHub sign-in. It is encrypted and lasts 10 minutes.
 - `agent_setup_dismissed` remembers that you closed the Agent setup card on your account page. It lasts 180 days.
 
 ### Your browser
diff --git a/test/unit/github-login-intent.test.ts b/test/unit/github-login-intent.test.ts
new file mode 100644
index 00000000..6560b32d
--- /dev/null
+++ b/test/unit/github-login-intent.test.ts
@@ -0,0 +1,131 @@
+import type { H3Event } from 'h3'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  session: vi.fn(),
+  upsert: vi.fn(),
+  replay: vi.fn(),
+  scan: vi.fn(),
+  email: vi.fn(),
+  establish: vi.fn(),
+}))
+vi.mock('h3', async importOriginal => ({ ...await importOriginal<typeof import('h3')>(), useSession: mocks.session }))
+vi.mock('../../layers/identity/server/utils/users', () => ({ upsertUserFromGithub: mocks.upsert }))
+vi.mock('../../layers/identity/server/utils/watch-actions', () => ({ handleWatchAction: mocks.replay }))
+vi.mock('../../layers/identity/server/utils/scan-owned-repos', () => ({ scanOwnedRepos: mocks.scan, ownedRepoScanWarning: () => false }))
+vi.mock('../../layers/identity/server/utils/github-emails', () => ({ fetchVerifiedPrimaryEmail: mocks.email }))
+
+// Simulate GitHub's callback: it carries code and state, never our query fields.
+describe('gitHub browser login round trip', () => {
+  let handler: (event: H3Event) => Promise<unknown>
+  let query: Record<string, string>
+  let intent: Record<string, unknown>
+  let failure: boolean
+  let providerFailure: boolean
+  const clearIntent = vi.fn(async () => {
+    intent = {}
+  })
+  const event = { context: { platform: { env: {} } } } as unknown as H3Event
+
+  beforeEach(async () => {
+    vi.resetModules()
+    vi.clearAllMocks()
+    query = {}
+    intent = {}
+    failure = false
+    providerFailure = false
+    mocks.upsert.mockResolvedValue({ id: 1, github_id: 1, login: 'octocat', onboarded_at: 1 })
+    mocks.replay.mockResolvedValue(undefined)
+    vi.stubGlobal('getQuery', () => query)
+    vi.stubGlobal('getCookie', () => undefined)
+    vi.stubGlobal('deleteCookie', vi.fn())
+    vi.stubGlobal('defineEventHandler', (fn: unknown) => fn)
+    vi.stubGlobal('setUserSession', mocks.establish)
+    vi.stubGlobal('useRuntimeConfig', () => ({ session: { password: 'x'.repeat(32) } }))
+    vi.stubGlobal('emitOperationalEvent', vi.fn())
+    vi.stubGlobal('createWideEvent', vi.fn())
+    vi.stubGlobal('sendRedirect', (_event: unknown, target: string) => target)
+    mocks.session.mockImplementation(async () => ({
+      get data() { return intent },
+      update: async (data: Record<string, unknown>) => { intent = data },
+      clear: clearIntent,
+    }))
+    vi.stubGlobal('defineOAuthGitHubEventHandler', (options: {
+      onSuccess: (event: H3Event, result: unknown) => Promise<unknown>
+      onError: (event: H3Event) => Promise<unknown>
+    }) => async (event: H3Event) => {
+      if (providerFailure)
+        throw new Error('GitHub is unavailable')
+      if (failure)
+        return options.onError(event)
+      if (!query.code)
+        return 'https://github.com/login/oauth/authorize'
+      return options.onSuccess(event, {
+        user: { id: 1, login: 'octocat', email: 'octocat@example.com' },
+        tokens: { access_token: 'github-token' },
+      })
+    })
+    handler = (await import('../../layers/identity/server/routes/auth/github.get')).default as typeof handler
+  })
+
+  it('returns to the starting page and replays the pending like', async () => {
+    query = { return_to: '/gh/nuxt/ui/motion?from=search#run', action: 'like-skill' }
+    await handler(event)
+    query = { code: 'github-code', state: 'valid-state' }
+    expect(await handler(event)).toBe('/gh/nuxt/ui/motion?from=search#run')
+    expect(mocks.replay).toHaveBeenCalledWith(event, 1, 'like-skill', '/gh/nuxt/ui/motion?from=search#run')
+    expect(clearIntent).toHaveBeenCalled()
+  })
+
+  it('keeps the starting action when GitHub sign-in fails', async () => {
+    query = { return_to: '/@octocat/tools', action: 'watch-collection' }
+    await handler(event)
+    query = { error: 'access_denied', state: 'valid-state' }
+    failure = true
+    const target = new URL(String(await handler(event)), 'https://skilld.dev')
+    expect(target.pathname).toBe('/login')
+    expect(target.searchParams.get('return_to')).toBe('/@octocat/tools')
+    expect(target.searchParams.get('action')).toBe('watch-collection')
+    expect(target.searchParams.get('error')).toBe('oauth')
+    expect(mocks.replay).not.toHaveBeenCalled()
+  })
+
+  it('returns a retry link when the provider request throws', async () => {
+    query = { return_to: '/skills', action: 'like-skill' }
+    await handler(event)
+    query = { code: 'github-code', state: 'valid-state' }
+    providerFailure = true
+    const target = new URL(String(await handler(event)), 'https://skilld.dev')
+    expect(target.searchParams.get('return_to')).toBe('/skills')
+    expect(target.searchParams.get('error')).toBe('oauth')
+  })
+
+  it('preserves the CLI authorization challenge through GitHub', async () => {
+    query = { return_to: '/cli/authorize?challenge=challenge-value&port=8080' }
+    await handler(event)
+    query = { code: 'github-code', state: 'valid-state' }
+    expect(await handler(event)).toBe('/cli/authorize?challenge=challenge-value&port=8080')
+    expect(mocks.replay).not.toHaveBeenCalled()
+  })
+
+  it('keeps failed action replay retryable before establishing identity', async () => {
+    query = { return_to: '/gh/nuxt/ui/motion', action: 'like-skill' }
+    await handler(event)
+    query = { code: 'github-code', state: 'valid-state' }
+    mocks.replay.mockRejectedValue(new Error('Database is unavailable'))
+    const target = new URL(String(await handler(event)), 'https://skilld.dev')
+    expect(target.searchParams.get('return_to')).toBe('/gh/nuxt/ui/motion')
+    expect(target.searchParams.get('action')).toBe('like-skill')
+    expect(mocks.establish).not.toHaveBeenCalled()
+  })
+
+  it('rejects an external destination and does not reuse an old intent', async () => {
+    query = { return_to: '/gh/nuxt/ui/motion', action: 'like-skill' }
+    await handler(event)
+    query = { return_to: '//evil.example', action: 'unknown-action' }
+    await handler(event)
+    query = { code: 'github-code', state: 'valid-state' }
+    expect(await handler(event)).toBe('/me')
+    expect(mocks.replay).not.toHaveBeenCalled()
+  })
+})
diff --git a/test/unit/login-interactions.test.ts b/test/unit/login-interactions.test.ts
new file mode 100644
index 00000000..9f5949d5
--- /dev/null
+++ b/test/unit/login-interactions.test.ts
@@ -0,0 +1,91 @@
+import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
+import { flushPromises } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+import { useAuth } from '../../layers/identity/app/composables/useAuth'
+import Discover from '../../layers/identity/app/pages/onboarding/discover.vue'
+
+const mocks = vi.hoisted(() => ({ navigate: vi.fn(), fetch: vi.fn(), toast: vi.fn(), remove: vi.fn(), failure: vi.fn(() => null) }))
+const session = ref<{ user: { login: string } } | null>({ user: { login: 'octocat' } })
+const stars = ref({ syncedAt: 1, items: [{ owner: 'nuxt', repo: 'ui', hasSkill: true, watching: false, skills: [{ name: 'motion', displayName: 'motion', slug: 'motion' }] }] })
+mockNuxtImport('$fetch', () => mocks.fetch)
+mockNuxtImport('navigateTo', () => mocks.navigate)
+mockNuxtImport('useToast', () => () => ({ add: mocks.toast }))
+mockNuxtImport('removeNuxtQueries', () => mocks.remove)
+mockNuxtImport('useActionFailure', () => () => () => mocks.failure)
+mockNuxtImport('useUserSession', () => () => ({
+  ready: ref(true),
+  loggedIn: ref(true),
+  user: ref({ login: 'octocat' }),
+  session,
+  fetch: vi.fn(),
+}))
+mockNuxtImport('useFetch', () => () => ({ data: stars, status: ref('success'), error: ref(), refresh: vi.fn() }))
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  session.value = { user: { login: 'octocat' } }
+})
+
+describe('onboarding watch save', () => {
+  it('keeps the selections and stays on discovery when the save fails', async () => {
+    mocks.fetch.mockRejectedValue(new Error('offline'))
+    const wrapper = await mountSuspended(Discover, { global: { stubs: { OwnedSkillsPrompt: true } } })
+    await flushPromises()
+    await wrapper.findAll('button').find(button => button.text().includes('Watch 1'))!.trigger('click')
+    await flushPromises()
+    expect(mocks.failure).toHaveBeenCalled()
+    expect(mocks.navigate).not.toHaveBeenCalled()
+    expect((wrapper.get('input[type="checkbox"]').element as HTMLInputElement).checked).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('advances only after the watch save succeeds', async () => {
+    mocks.fetch.mockResolvedValue({ ok: true })
+    const wrapper = await mountSuspended(Discover, { global: { stubs: { OwnedSkillsPrompt: true } } })
+    await flushPromises()
+    await wrapper.findAll('button').find(button => button.text().includes('Watch 1'))!.trigger('click')
+    await flushPromises()
+    expect(mocks.navigate).toHaveBeenCalledWith('/onboarding/email')
+    wrapper.unmount()
+  })
+})
+
+describe('sign out', () => {
+  async function mountAuth() {
+    let auth: ReturnType<typeof useAuth>
+    const wrapper = await mountSuspended(defineComponent({ setup() {
+      auth = useAuth()
+      return () => h('div')
+    } }))
+    return { auth: auth!, wrapper }
+  }
+
+  it('keeps the session and shows feedback when sign out fails', async () => {
+    mocks.fetch.mockRejectedValue(new Error('offline'))
+    const { auth, wrapper } = await mountAuth()
+    await auth.logout()
+    expect(session.value?.user.login).toBe('octocat')
+    expect(mocks.toast).toHaveBeenCalledWith(expect.objectContaining({ title: 'Could not sign out' }))
+    expect(mocks.navigate).not.toHaveBeenCalled()
+    expect(auth.isLoading.value).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('sends one request, clears private data, and returns home', async () => {
+    let resolve: (value: unknown) => void
+    mocks.fetch.mockImplementation(() => new Promise((done) => {
+      resolve = done
+    }))
+    const { auth, wrapper } = await mountAuth()
+    const pending = auth.logout()
+    await auth.logout()
+    expect(mocks.fetch).toHaveBeenCalledTimes(1)
+    resolve!({ ok: true })
+    await pending
+    expect(session.value).toBeNull()
+    expect(mocks.remove).toHaveBeenCalled()
+    expect(mocks.navigate).toHaveBeenCalledWith('/', { external: true })
+    wrapper.unmount()
+  })
+})
diff --git a/test/unit/me-watchlist.test.ts b/test/unit/me-watchlist.test.ts
index b0037ad6..4c3feb0a 100644
--- a/test/unit/me-watchlist.test.ts
+++ b/test/unit/me-watchlist.test.ts
@@ -30,7 +30,14 @@ function likedSkillFixture() {
   }
 }
 
-const account = ref(accountFixture())
+const account = ref<ReturnType<typeof accountFixture> | undefined>(accountFixture())
+const accountError = ref<Error>()
+const subscriptionsError = ref<Error>()
+const retryAccount = vi.fn(async () => {
+  account.value = accountFixture()
+  accountError.value = undefined
+})
+const retrySubscriptions = vi.fn()
 const subscriptions = ref({ items: [{ owner: 'antfu', repo: 'skills', source: 'like' }] })
 const likes = ref<{ items: ReturnType<typeof likedSkillFixture>[] } | undefined>({ items: [likedSkillFixture()] })
 const likesError = ref<Error | undefined>()
@@ -61,11 +68,13 @@ mockNuxtImport('useNuxtRpcQuery', () => {
   return () => {
     queryCall += 1
     if (queryCall % 2 === 1)
-      return { data: account }
+      return { data: account, error: accountError, status: ref('success'), refresh: retryAccount }
     return {
       data: subscriptions,
+      error: subscriptionsError,
+      status: ref('success'),
       // `staleTime: static` can return the existing value from a direct refresh.
-      refresh: vi.fn().mockResolvedValue(undefined),
+      refresh: retrySubscriptions,
     }
   }
 })
@@ -151,6 +160,10 @@ function paragraphWithText(wrapper: Awaited<ReturnType<typeof mountPage>>, text:
 describe('account skill watchlist', () => {
   beforeEach(() => {
     queryCall = 0
+    accountError.value = undefined
+    subscriptionsError.value = undefined
+    retryAccount.mockClear()
+    retrySubscriptions.mockClear()
     releaseDelete = undefined
     releaseEmailSave = undefined
     serverAccount = accountFixture()
@@ -208,13 +221,34 @@ describe('account skill watchlist', () => {
     vi.unstubAllGlobals()
   })
 
+  it('recovers account settings after the initial account load fails', async () => {
+    account.value = undefined
+    accountError.value = new Error('offline')
+    const wrapper = await mountPage()
+    expect(wrapper.text()).toContain('Could not load your account')
+    expect(wrapper.text()).not.toContain('No email set')
+    await buttonWithText(wrapper, 'Retry').trigger('click')
+    await flushPromises()
+    expect(wrapper.get('h1').text()).toBe('Your skills')
+    await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
+    expect((wrapper.get('input[type="email"]').element as HTMLInputElement).value).toBe('harlan@example.com')
+  })
+
+  it('shows watched repository failures instead of an empty collection', async () => {
+    subscriptionsError.value = new Error('offline')
+    const wrapper = await mountPage()
+    expect(wrapper.text()).toContain('Could not load watched Repositories')
+    expect(wrapper.text()).not.toContain('Add a skill to start watching its source.')
+    await buttonWithText(wrapper, 'Retry').trigger('click')
+    expect(retrySubscriptions).toHaveBeenCalled()
+  })
+
   it('makes liked skills the primary account content', async () => {
     const wrapper = await mountPage()
 
     expect(wrapper.get('h1').text()).toBe('Your skills')
     expect(wrapper.get('[aria-label="Your skills"]').text()).toContain('nuxt')
     expect(wrapper.get('[aria-label="Your skills"]').text()).toContain('Build full-stack Vue applications with Nuxt.')
-    expect(wrapper.get('section').classes()).toContain('max-w-7xl')
   })
 
   it('removes the final skill and its derived source from the rendered page', async () => {
@@ -272,7 +306,7 @@ describe('account skill watchlist', () => {
     await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
     const save = buttonWithText(wrapper, 'Save email settings')
 
-    await save.trigger('click')
+    await wrapper.get('#email-settings-form').trigger('submit')
     await nextTick()
     const disabledWhilePending = save.attributes('disabled') !== undefined
     releaseEmailSave()
@@ -292,7 +326,7 @@ describe('account skill watchlist', () => {
 
     await weekly.get('input').setValue(false)
     await monthly.get('input').setValue(false)
-    await buttonWithText(wrapper, 'Save email settings').trigger('click')
+    await wrapper.get('#email-settings-form').trigger('submit')
     await flushPromises()
 
     expect(executeRpc).toHaveBeenCalledWith(

From ec23c6add6d7e80543530544d0cebdb5fa1ddd22 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 5 Oct 2026 13:47:01 +1100
Subject: [PATCH 2/2] fix(auth): mount account avatar after hydration

---
 .../identity/app/components/HeaderAccount.vue | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/layers/identity/app/components/HeaderAccount.vue b/layers/identity/app/components/HeaderAccount.vue
index 413f4e8a..3d802afd 100644
--- a/layers/identity/app/components/HeaderAccount.vue
+++ b/layers/identity/app/components/HeaderAccount.vue
@@ -63,12 +63,20 @@ const accountItems = computed<DropdownMenuItem[]>(() => {
         class="size-11 justify-center p-0"
         :aria-label="`Signed in as @${state.user.login}`"
       >
-        <UAvatar
-          :src="githubAvatarProxyUrl(state.user.login, 64)"
-          :alt="state.user.login"
-          size="xs"
-          class="size-7"
-        />
+        <!-- Mount after hydration so an early image failure reaches the fallback. -->
+        <ClientOnly>
+          <UAvatar
+            :src="githubAvatarProxyUrl(state.user.login, 64)"
+            :alt="state.user.login"
+            size="xs"
+            class="size-7"
+          />
+          <template #fallback>
+            <span class="inline-flex size-7 items-center justify-center rounded-full bg-elevated text-xs">
+              {{ state.user.login.charAt(0) }}
+            </span>
+          </template>
+        </ClientOnly>
       </UButton>
     </LazyUDropdownMenu>
   </div>