From c5eebebaa7f8e0dcdaf865d55a2129b4ada4d576 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Mon, 5 Oct 2026 18:06:30 +1100
Subject: [PATCH] feat(identity): add account and authentication app layouts

---
 app/app.vue                                   |  12 +-
 app/pages/cli/authorize.vue                   |   4 +-
 app/pages/collections/new.vue                 |   4 +-
 app/pages/me/cli-tokens/new.vue               |   4 +-
 app/pages/me/devices.vue                      |   4 +-
 layers/identity/app/layouts/account.vue       | 109 ++++++++++++++
 layers/identity/app/layouts/auth.vue          |  19 +++
 layers/identity/app/pages/login.vue           |   8 +-
 layers/identity/app/pages/me/index.vue        | 138 +++++-------------
 .../app/pages/onboarding/discover.vue         |   4 +-
 .../identity/app/pages/onboarding/email.vue   |   4 +-
 layers/marketing/app/pages/developers.vue     |   4 +-
 test/unit/email-form-submit.test.ts           |   2 +-
 test/unit/me-watchlist.test.ts                |  51 +++++--
 14 files changed, 232 insertions(+), 135 deletions(-)
 create mode 100644 layers/identity/app/layouts/account.vue
 create mode 100644 layers/identity/app/layouts/auth.vue

diff --git a/app/app.vue b/app/app.vue
index b5fec817..efa0b8ad 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -10,7 +10,7 @@ const mobileNavigationOpen = ref(false)
 const mobileNavigation = useTemplateRef('mobileNavigation')
 const mobileNavigationToggle = useTemplateRef('mobileNavigationToggle')
 const route = useRoute()
-const isAdminLayout = computed(() => route.meta.layout === 'admin')
+const hasAppLayout = computed(() => !!route.meta.layout)
 
 const { enabled: kbdEnabled } = useKeyboardShortcuts()
 const skillSearch = useSkillSearch()
@@ -102,7 +102,7 @@ watch(() => route.fullPath, () => {
     <!-- Route change announcements for screen readers -->
     <NuxtRouteAnnouncer />
 
-    <NuxtLayout v-if="isAdminLayout">
+    <NuxtLayout v-if="hasAppLayout">
       <NuxtPage />
     </NuxtLayout>
 
@@ -294,10 +294,10 @@ watch(() => route.fullPath, () => {
           />
         </template>
       </UFooter>
-
-      <ClientOnly>
-        <KeyboardShortcutsModal v-model:open="shortcutsModalOpen" />
-      </ClientOnly>
     </template>
+
+    <ClientOnly>
+      <KeyboardShortcutsModal v-model:open="shortcutsModalOpen" />
+    </ClientOnly>
   </UApp>
 </template>
diff --git a/app/pages/cli/authorize.vue b/app/pages/cli/authorize.vue
index 1eca51e4..53b7c283 100644
--- a/app/pages/cli/authorize.vue
+++ b/app/pages/cli/authorize.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-definePageMeta({ middleware: ['session'] })
+definePageMeta({ layout: 'auth', middleware: ['session'] })
 
 const route = useRoute()
 const { loggedIn } = useUserSession()
@@ -98,7 +98,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <section class="mx-auto max-w-lg px-4 sm:px-6 pt-16 pb-12 md:pt-24">
+  <section class="mx-auto w-full max-w-lg">
     <div class="rounded-lg border border-default p-6 sm:p-8">
       <div class="flex items-start gap-3">
         <UIcon name="i-lucide-terminal" class="mt-1 size-6 text-primary" aria-hidden="true" />
diff --git a/app/pages/collections/new.vue b/app/pages/collections/new.vue
index 7bbdb487..26b29f7a 100644
--- a/app/pages/collections/new.vue
+++ b/app/pages/collections/new.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-definePageMeta({ middleware: ['session'] })
+definePageMeta({ layout: 'account', middleware: ['session'] })
 
 const route = useRoute()
 const { isAuthenticated, user, loginUrl } = useAuth()
@@ -61,7 +61,7 @@ const githubLoginHref = computed(() => loginUrl({ returnTo: route.fullPath }))
 
 <template>
   <section
-    class="mx-auto max-w-2xl px-4 sm:px-6 pt-12 pb-16"
+    class="mx-auto max-w-2xl py-6 sm:py-8"
     aria-labelledby="new-collection-heading"
   >
     <h1
diff --git a/app/pages/me/cli-tokens/new.vue b/app/pages/me/cli-tokens/new.vue
index c0766217..4dd18f8e 100644
--- a/app/pages/me/cli-tokens/new.vue
+++ b/app/pages/me/cli-tokens/new.vue
@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { useTokenCreation } from '#layers/identity/app/composables/useTokenCreation'
 import SetupSnippet from '#layers/marketing/app/components/_SetupSnippet.vue'
 
-definePageMeta({ middleware: ['auth'] })
+definePageMeta({ layout: 'account', middleware: ['auth'] })
 
 const schema = z.object({
   label: z.string().trim().min(1, 'Enter a token label.').max(80, 'Use 80 characters or fewer.'),
@@ -26,7 +26,7 @@ useSeoMeta({ title: 'New token', robots: 'noindex' })
 </script>
 
 <template>
-  <section class="mx-auto max-w-xl px-4 pt-12 pb-16 sm:px-6 md:pt-16">
+  <section class="mx-auto max-w-xl py-6 sm:py-8">
     <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-2xl font-semibold tracking-tight sm:text-3xl">
diff --git a/app/pages/me/devices.vue b/app/pages/me/devices.vue
index 22c365b6..53bb3154 100644
--- a/app/pages/me/devices.vue
+++ b/app/pages/me/devices.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-definePageMeta({ middleware: ['auth'] })
+definePageMeta({ layout: 'account', middleware: ['auth'] })
 
 interface Device {
   id: number
@@ -70,7 +70,7 @@ useSeoMeta({ title: 'Devices and tokens', robots: 'noindex' })
 </script>
 
 <template>
-  <section class="mx-auto max-w-5xl px-4 pt-10 pb-16 sm:px-6 md:pt-14">
+  <section class="mx-auto max-w-5xl py-6 sm:py-8">
     <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>
diff --git a/layers/identity/app/layouts/account.vue b/layers/identity/app/layouts/account.vue
new file mode 100644
index 00000000..c05c48ce
--- /dev/null
+++ b/layers/identity/app/layouts/account.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const route = useRoute()
+const { state, logout, isLoading } = useAuth()
+const navigationOpen = ref(false)
+const navigationToggle = useTemplateRef<{ $el: HTMLButtonElement }>('navigationToggle')
+
+function restoreNavigationFocus(event: Event) {
+  event.preventDefault()
+  navigationToggle.value?.$el.focus()
+}
+
+const navigation = computed<NavigationMenuItem[]>(() => [
+  { label: 'Your skills', icon: 'i-lucide-heart', to: '/me', active: route.path === '/me' && !['email', 'repositories', 'account'].includes(String(route.query.view)) },
+  { label: 'Repository coverage', icon: 'i-lucide-git-fork', to: '/me?view=repositories', active: route.path === '/me' && route.query.view === 'repositories' },
+  { label: 'Email updates', icon: 'i-lucide-mail', to: '/me?view=email', active: route.path === '/me' && route.query.view === 'email' },
+  { label: 'Set up your agent', icon: 'i-lucide-plug', to: '/developers', active: route.path === '/developers' },
+  { label: 'Devices and tokens', icon: 'i-lucide-terminal', to: '/me/devices', active: route.path.startsWith('/me/devices') || route.path.startsWith('/me/cli-tokens') },
+  { label: 'Account', icon: 'i-lucide-settings', to: '/me?view=account', active: route.path === '/me' && route.query.view === 'account' },
+])
+
+const collectionNavigation = computed<NavigationMenuItem[]>(() => [
+  { label: 'Publish a collection', icon: 'i-lucide-folder-plus', to: '/collections/new', active: route.path === '/collections/new' },
+  ...(state.value._tag === 'signed-in'
+    ? [{ label: 'View profile', icon: 'i-lucide-user-round', to: `/@${state.value.user.login}` }]
+    : []),
+])
+</script>
+
+<template>
+  <UDashboardGroup unit="rem" :persistent="false" storage-key="skilld-account">
+    <UDashboardSidebar
+      v-model:open="navigationOpen"
+      :default-size="16"
+      :min-size="16"
+      :max-size="16"
+      :toggle="false"
+      class="bg-muted/40"
+      :menu="{
+        title: 'Account',
+        description: 'Your skills and account tools',
+        content: { onCloseAutoFocus: restoreNavigationFocus },
+      }"
+      :ui="{ header: 'px-4', body: 'gap-6 px-3 py-5', footer: 'border-t border-default p-3', content: 'w-80 max-w-[calc(100vw-3rem)] border-r border-default shadow-none' }"
+    >
+      <template #header>
+        <NuxtLink to="/" aria-label="skilld, home" class="flex min-h-11 items-center rounded-lg">
+          <AppLogo />
+        </NuxtLink>
+        <UButton v-if="navigationOpen" icon="i-lucide-x" aria-label="Close menu" color="neutral" variant="ghost" class="ml-auto min-h-11 min-w-11 lg:hidden" @click="navigationOpen = false" />
+      </template>
+
+      <div class="space-y-6">
+        <UNavigationMenu
+          aria-label="Account"
+          :items="navigation"
+          orientation="vertical"
+          :ui="{ link: 'min-h-11 font-mono text-sm', linkLabel: 'whitespace-normal' }"
+        />
+        <USeparator />
+        <UNavigationMenu
+          aria-label="Collections"
+          :items="collectionNavigation"
+          orientation="vertical"
+          :ui="{ link: 'min-h-11 font-mono text-sm', linkLabel: 'whitespace-normal' }"
+        />
+      </div>
+
+      <UButton to="/skills" label="Find skills" icon="i-lucide-arrow-up-right" color="neutral" variant="ghost" class="mt-auto min-h-11 justify-start" />
+
+      <template #footer>
+        <div :aria-busy="state._tag === 'pending'">
+          <USkeleton v-if="state._tag === 'pending'" class="h-11 w-full" />
+          <template v-else-if="state._tag === 'signed-in'">
+            <NuxtLink :to="`/@${state.user.login}`" class="flex min-h-11 items-center gap-2 rounded-lg px-2 font-mono text-sm hover:bg-elevated">
+              <UIcon name="i-lucide-user-round" class="size-5 shrink-0 text-muted" aria-hidden="true" />
+              <span class="truncate">@{{ state.user.login }}</span>
+            </NuxtLink>
+            <UButton label="Sign out" icon="i-lucide-log-out" color="neutral" variant="ghost" class="min-h-11 w-full justify-start" :loading="isLoading" @click="logout()" />
+          </template>
+          <UButton v-else :to="{ path: '/login', query: { return_to: route.fullPath } }" label="Sign in" icon="i-lucide-github" color="neutral" variant="outline" class="min-h-11 w-full justify-center" />
+        </div>
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardPanel :ui="{ body: 'p-0' }">
+      <template #header>
+        <UDashboardNavbar :toggle="false">
+          <template #left>
+            <UButton ref="navigationToggle" icon="i-lucide-menu" aria-label="Open menu" aria-haspopup="dialog" color="neutral" variant="ghost" class="min-h-11 min-w-11 lg:hidden" :aria-expanded="navigationOpen" @click="navigationOpen = true" />
+            <NuxtLink to="/me" class="flex min-h-11 items-center font-mono text-sm text-muted hover:text-default">
+              skilld
+            </NuxtLink>
+          </template>
+          <template #right>
+            <SkillSearchTrigger />
+            <UColorModeButton color="neutral" variant="ghost" class="min-h-11 min-w-11" />
+          </template>
+        </UDashboardNavbar>
+      </template>
+      <template #body>
+        <main id="main-content" tabindex="-1" class="min-w-0 px-4 pb-12 sm:px-6 lg:px-8">
+          <slot />
+        </main>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>
diff --git a/layers/identity/app/layouts/auth.vue b/layers/identity/app/layouts/auth.vue
new file mode 100644
index 00000000..5f99dfcc
--- /dev/null
+++ b/layers/identity/app/layouts/auth.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex min-h-dvh flex-col bg-muted/40">
+    <header class="flex items-center justify-between gap-4 px-4 py-3 sm:px-6">
+      <NuxtLink to="/" class="flex min-h-11 items-center gap-2 rounded-lg font-mono text-sm text-muted hover:text-default">
+        <UIcon name="i-lucide-arrow-left" class="size-4" aria-hidden="true" />
+        skilld.dev
+      </NuxtLink>
+      <UColorModeButton color="neutral" variant="ghost" class="min-h-11 min-w-11" />
+    </header>
+    <main id="main-content" tabindex="-1" class="flex flex-1 flex-col items-center justify-center px-4 pt-6 pb-16 sm:px-6">
+      <NuxtLink to="/" aria-label="skilld, home" class="mb-8 flex min-h-11 items-center rounded-lg">
+        <AppLogo />
+      </NuxtLink>
+      <div class="w-full max-w-2xl">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/layers/identity/app/pages/login.vue b/layers/identity/app/pages/login.vue
index 87e68925..0abf02bc 100644
--- a/layers/identity/app/pages/login.vue
+++ b/layers/identity/app/pages/login.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { parseReturnTo } from '#shared/return-to'
 
-definePageMeta({ middleware: ['session'] })
+definePageMeta({ layout: 'auth', middleware: ['session'] })
 
 const route = useRoute()
 const { loginUrl } = useAuth()
@@ -26,12 +26,12 @@ useSeoMeta({
 </script>
 
 <template>
-  <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">
+  <section class="mx-auto w-full max-w-md">
+    <div class="rounded-lg border border-default bg-default p-6 sm:p-8">
       <h1 class="text-2xl font-semibold tracking-tight">
         Sign in to skilld
       </h1>
-      <p class="mt-2 text-sm text-muted leading-relaxed">
+      <p class="mt-3 text-base text-muted leading-relaxed">
         Like skills, build collections, and get the weekly: changes to your skills, plus what devs are talking about. We ask for your public profile and email address.
       </p>
       <div class="mt-5">
diff --git a/layers/identity/app/pages/me/index.vue b/layers/identity/app/pages/me/index.vue
index c0f6a712..2e89bb5f 100644
--- a/layers/identity/app/pages/me/index.vue
+++ b/layers/identity/app/pages/me/index.vue
@@ -8,13 +8,11 @@ import type {
   IdentitySubscriptionRef,
 } from '../../../shared/contracts/account'
 import type { StarsSyncResponse } from '../../utils/sync-starred-repos'
-import { avatarProxyUrl } from '#shared/image-proxy'
 import { accountDeletionConfirmed } from '../../../shared/contracts/account'
-import AgentSetupCard from '../../components/_AgentSetupCard.vue'
 import { identityAccountQueries, identityAccountQueryOptions } from '../../queries/account'
 import { syncStarredRepos } from '../../utils/sync-starred-repos'
 
-definePageMeta({ middleware: ['auth'] })
+definePageMeta({ layout: 'account', middleware: ['auth'] })
 
 interface LikedSkill {
   owner: string
@@ -160,12 +158,16 @@ function sourceDescription(source: string): string {
   return 'Added to your digest'
 }
 
-useSeoMeta({ title: 'Your dashboard', robots: 'noindex' })
-
 const route = useRoute()
+const view = computed(() => {
+  const value = route.query.view
+  return value === 'email' || value === 'repositories' || value === 'account' ? value : 'skills'
+})
+const viewTitle = computed(() => ({ skills: 'Your skills', email: 'Email updates', repositories: 'Repository coverage', account: 'Account' })[view.value])
+useSeoMeta({ title: viewTitle, robots: 'noindex' })
 const toast = useToast()
 async function clearWelcomeQuery() {
-  await navigateTo({ path: route.path, query: {} }, { replace: true })
+  await navigateTo({ path: route.path, query: { ...route.query, welcome: undefined } }, { replace: true })
 }
 onMounted(() => {
   if (route.query.welcome === '1') {
@@ -243,7 +245,7 @@ async function deleteAccount() {
 </script>
 
 <template>
-  <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">
+  <section v-if="!me" class="mx-auto w-full max-w-4xl py-6 sm:py-8">
     <div class="editorial-state" :role="accountError ? 'alert' : 'status'">
       <h1 class="text-2xl font-semibold">
         {{ accountError ? 'Could not load your account' : 'Loading your account' }}
@@ -251,47 +253,13 @@ async function deleteAccount() {
       <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"
-          :src="avatarProxyUrl(me.avatar)"
-          alt=""
-          width="56"
-          height="56"
-          class="size-14 shrink-0 rounded-full border border-default bg-muted"
-          fetchpriority="high"
-        >
-        <div class="min-w-0">
-          <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">
-            @{{ me.login }}
-          </p>
-        </div>
-      </div>
-      <div class="flex flex-wrap gap-2">
-        <UButton
-          :to="`/@${me?.login}`"
-          class="min-h-11"
-          color="neutral"
-          variant="outline"
-          icon="i-lucide-user-round"
-          label="View profile"
-        />
-        <UButton
-          to="/skills"
-          class="min-h-11"
-          icon="i-lucide-search"
-          label="Find skills"
-        />
-      </div>
-    </header>
+  <section v-else class="mx-auto w-full max-w-4xl py-6 sm:py-8">
+    <h1 v-if="view !== 'skills'" class="mb-8 text-2xl font-semibold tracking-tight sm:text-3xl">
+      {{ viewTitle }}
+    </h1>
 
-    <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">
+    <div class="min-w-0 space-y-8">
+      <div v-if="view === 'skills'" 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>
@@ -302,9 +270,12 @@ async function deleteAccount() {
                 Like a skill to keep it here. We track meaningful changes and include them in your digest.
               </p>
             </div>
-            <p class="shrink-0 font-mono text-sm tabular-nums text-muted">
-              {{ likedSkills.length }} {{ likedSkills.length === 1 ? 'skill' : 'skills' }}
-            </p>
+            <div class="flex shrink-0 flex-wrap items-center gap-4">
+              <p class="font-mono text-sm tabular-nums text-muted">
+                {{ likedSkills.length }} {{ likedSkills.length === 1 ? 'skill' : 'skills' }}
+              </p>
+              <UButton to="/skills" label="Find skills" icon="i-lucide-search" class="min-h-11" />
+            </div>
           </div>
 
           <div v-if="likesLoading" class="editorial-state mt-6 flex flex-col items-start justify-center" role="status">
@@ -352,7 +323,7 @@ async function deleteAccount() {
                 <span v-if="skill.description" class="mt-2 max-w-3xl line-clamp-2 text-sm leading-relaxed text-muted text-pretty">
                   {{ skill.description }}
                 </span>
-                <span class="mt-3 inline-flex items-center gap-1.5 font-mono text-xs text-muted">
+                <span class="mt-3 inline-flex items-center gap-1.5 font-mono text-sm text-muted">
                   <UIcon name="i-lucide-activity" class="size-3.5 text-primary" aria-hidden="true" />
                   Watching for changes
                 </span>
@@ -383,21 +354,15 @@ async function deleteAccount() {
         </section>
       </div>
 
-      <aside class="min-w-0 space-y-6 lg:border-l lg:border-default lg:pl-6" aria-label="Skill delivery settings">
-        <AgentSetupCard />
-
-        <section>
-          <h2 class="text-lg font-semibold">
-            Email updates
-          </h2>
-
+      <div class="min-w-0 space-y-8">
+        <section v-if="view === 'email'">
           <div class="mt-5 border-y border-default">
             <div class="flex items-start justify-between gap-4 py-4">
               <div>
                 <p class="text-sm font-medium">
                   Weekly email
                 </p>
-                <p class="mt-1 text-xs leading-relaxed text-muted">
+                <p class="mt-1 text-sm leading-relaxed text-muted">
                   New trending Skills every Monday. A Skill can return after 60 days.
                 </p>
               </div>
@@ -409,7 +374,7 @@ async function deleteAccount() {
                 <p class="text-sm font-medium">
                   Monthly digest
                 </p>
-                <p class="mt-1 text-xs leading-relaxed text-muted">
+                <p class="mt-1 text-sm leading-relaxed text-muted">
                   Changes to liked Skills and watched Repositories on the first day of each month.
                 </p>
               </div>
@@ -453,7 +418,7 @@ async function deleteAccount() {
                   >
                   <span>
                     Send me the weekly email
-                    <span class="mt-0.5 block text-xs text-muted">Distinct trending Skills each Monday.</span>
+                    <span class="mt-0.5 block text-sm text-muted">Distinct trending Skills each Monday.</span>
                   </span>
                 </label>
                 <label class="flex min-h-11 items-start gap-3 text-sm">
@@ -464,7 +429,7 @@ async function deleteAccount() {
                   >
                   <span>
                     Send me the monthly digest
-                    <span class="mt-0.5 block text-xs text-muted">Liked Skills and watched Repositories that changed.</span>
+                    <span class="mt-0.5 block text-sm text-muted">Liked Skills and watched Repositories that changed.</span>
                   </span>
                 </label>
                 <UButton
@@ -479,7 +444,7 @@ async function deleteAccount() {
           </div>
         </section>
 
-        <section aria-labelledby="privacy-heading">
+        <section v-if="view === 'account'" aria-labelledby="privacy-heading">
           <h2 id="privacy-heading" class="text-lg font-semibold">
             Privacy
           </h2>
@@ -517,14 +482,11 @@ async function deleteAccount() {
           </div>
         </section>
 
-        <section>
-          <h2 class="text-lg font-semibold">
-            Repository coverage
-          </h2>
+        <section v-if="view === 'repositories'">
           <p class="mt-2 text-sm leading-relaxed text-muted">
             {{ watchedRepositoryCount }} {{ watchedRepositoryCount === 1 ? 'repository supports' : 'repositories support' }} your skill updates.
           </p>
-          <p class="mt-2 text-xs leading-relaxed text-muted">
+          <p class="mt-2 text-sm leading-relaxed text-muted">
             Last GitHub import: {{ fmtDate(me?.stars_synced_at) }}
           </p>
           <UButton
@@ -546,11 +508,7 @@ async function deleteAccount() {
           <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" />
-            </summary>
+          <div v-else-if="subs?.items.length" class="mt-5 border-y border-default">
             <ul class="list-none border-t border-default p-0">
               <li
                 v-for="source in subs.items"
@@ -558,10 +516,10 @@ async function deleteAccount() {
                 class="flex min-w-0 items-center gap-2 border-b border-default py-3 last:border-b-0"
               >
                 <div class="min-w-0 flex-1">
-                  <NuxtLink :to="repoHubPath(source.owner, source.repo)" class="flex min-h-11 items-center truncate font-mono text-xs hover:text-primary">
+                  <NuxtLink :to="repoHubPath(source.owner, source.repo)" class="flex min-h-11 items-center truncate font-mono text-sm hover:text-primary">
                     {{ source.owner }}/{{ source.repo }}
                   </NuxtLink>
-                  <p class="mt-1 text-xs text-muted">
+                  <p class="mt-1 text-sm text-muted">
                     {{ sourceDescription(source.source) }}
                   </p>
                 </div>
@@ -578,35 +536,13 @@ async function deleteAccount() {
                 />
               </li>
             </ul>
-          </details>
+          </div>
           <div v-else class="mt-5 border-y border-default py-4 text-sm text-muted">
             Add a skill to start watching its source.
           </div>
         </section>
 
-        <nav class="border-t border-default pt-6" aria-label="Account tools">
-          <h2 class="mb-3 text-lg font-semibold">
-            Account
-          </h2>
-          <UButton
-            to="/me/devices"
-            color="neutral"
-            variant="ghost"
-            icon="i-lucide-terminal"
-            label="Devices and tokens"
-            class="min-h-11"
-          />
-          <UButton
-            to="/developers"
-            color="neutral"
-            variant="ghost"
-            icon="i-lucide-code-xml"
-            label="Developers"
-            class="min-h-11"
-          />
-        </nav>
-
-        <section class="border-t border-default pt-6" aria-labelledby="delete-account-heading">
+        <section v-if="view === 'account'" class="border-t border-default pt-6" aria-labelledby="delete-account-heading">
           <h2 id="delete-account-heading" class="text-lg font-semibold">
             Delete account
           </h2>
@@ -625,7 +561,7 @@ async function deleteAccount() {
             @click="deleteDialogOpen = true"
           />
         </section>
-      </aside>
+      </div>
     </div>
 
     <UModal
diff --git a/layers/identity/app/pages/onboarding/discover.vue b/layers/identity/app/pages/onboarding/discover.vue
index 7830c15c..116a5e27 100644
--- a/layers/identity/app/pages/onboarding/discover.vue
+++ b/layers/identity/app/pages/onboarding/discover.vue
@@ -2,7 +2,7 @@
 import type { StarsSyncResponse } from '../../utils/sync-starred-repos'
 import { syncStarredRepos } from '../../utils/sync-starred-repos'
 
-definePageMeta({ middleware: ['auth'] })
+definePageMeta({ layout: 'auth', middleware: ['auth'] })
 
 const { user } = useUserSession()
 
@@ -108,7 +108,7 @@ useSeoMeta({ title: 'Discover skills', robots: 'noindex' })
 </script>
 
 <template>
-  <section class="mx-auto max-w-2xl px-4 sm:px-6 pt-8 pb-12 md:pt-12">
+  <section class="mx-auto w-full max-w-2xl">
     <OnboardingSteps :step="1" />
     <h1 class="mt-6 text-2xl font-semibold tracking-tight">
       Watch what you've already starred
diff --git a/layers/identity/app/pages/onboarding/email.vue b/layers/identity/app/pages/onboarding/email.vue
index a60f2021..7adb9698 100644
--- a/layers/identity/app/pages/onboarding/email.vue
+++ b/layers/identity/app/pages/onboarding/email.vue
@@ -2,7 +2,7 @@
 import type { IdentityEmailPatchBody, IdentityMutationResponse } from '../../../shared/contracts/account'
 import { identityAccountQueries, identityAccountQueryOptions } from '../../queries/account'
 
-definePageMeta({ middleware: ['auth'] })
+definePageMeta({ layout: 'auth', middleware: ['auth'] })
 
 const { data: me, error: accountError, status: accountStatus, refresh: retryAccount } = await useNuxtRpcQuery(identityAccountQueries.me(), identityAccountQueryOptions)
 const { fetchSession } = useAuth()
@@ -59,7 +59,7 @@ useSeoMeta({ title: 'Email opt-in', robots: 'noindex' })
 </script>
 
 <template>
-  <section class="mx-auto max-w-md px-4 sm:px-6 pt-8 pb-12 md:pt-12">
+  <section class="mx-auto w-full max-w-md">
     <OnboardingSteps :step="2" />
     <h1 class="mt-6 text-2xl font-semibold tracking-tight">
       Email
diff --git a/layers/marketing/app/pages/developers.vue b/layers/marketing/app/pages/developers.vue
index a8891c0f..bbdd2b3a 100644
--- a/layers/marketing/app/pages/developers.vue
+++ b/layers/marketing/app/pages/developers.vue
@@ -18,6 +18,8 @@ import {
 } from '../utils/developer-setup'
 import { pageRobots } from '../utils/page-admissions'
 
+definePageMeta({ layout: 'account' })
+
 const route = useRoute()
 const mode = computed(() => {
   const parsed = setupModeSchema.safeParse(route.query.setup)
@@ -53,7 +55,7 @@ const uiClass = 'font-medium text-default'
 </script>
 
 <template>
-  <div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 md:py-16">
+  <div class="mx-auto w-full max-w-3xl py-6 sm:py-8">
     <header>
       <h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">
         Developers
diff --git a/test/unit/email-form-submit.test.ts b/test/unit/email-form-submit.test.ts
index 499d6e79..7968cc58 100644
--- a/test/unit/email-form-submit.test.ts
+++ b/test/unit/email-form-submit.test.ts
@@ -49,7 +49,7 @@ beforeEach(() => {
 
 describe.each(screens)('$name email submission', ({ component, form: selector }) => {
   async function mountForm() {
-    const wrapper = await mountSuspended(component, { attachTo: document.body })
+    const wrapper = await mountSuspended(component, { attachTo: document.body, route: component === Account ? '/me?view=email' : '/onboarding/email' })
     if (component === Account)
       await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
     return { wrapper, form: wrapper.get(selector) }
diff --git a/test/unit/me-watchlist.test.ts b/test/unit/me-watchlist.test.ts
index 2caf8adf..33da9667 100644
--- a/test/unit/me-watchlist.test.ts
+++ b/test/unit/me-watchlist.test.ts
@@ -137,9 +137,10 @@ mockNuxtImport('useActionFailure', () => {
   return () => () => vi.fn()
 })
 
-async function mountPage() {
+async function mountPage(view: 'skills' | 'email' | 'repositories' | 'account' = 'skills') {
   return await mountSuspended(
     await import('../../layers/identity/app/pages/me/index.vue').then(module => module.default),
+    { route: view === 'skills' ? '/' : `/?view=${view}` },
   )
 }
 
@@ -224,19 +225,19 @@ describe('account skill watchlist', () => {
   it('recovers account settings after the initial account load fails', async () => {
     account.value = undefined
     accountError.value = new Error('offline')
-    const wrapper = await mountPage()
+    const wrapper = await mountPage('email')
     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')
+    expect(wrapper.get('h1').text()).toBe('Email updates')
     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()
+    const wrapper = await mountPage('repositories')
     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')
@@ -249,17 +250,47 @@ describe('account skill watchlist', () => {
     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.text()).not.toContain('Weekly email')
+    expect(wrapper.text()).not.toContain('Delete account')
+  })
+
+  it('switches account views without mixing their controls', async () => {
+    const wrapper = await mountPage()
+    const router = wrapper.vm.$router
+
+    await router.push('/?view=account')
+    await flushPromises()
+    expect(wrapper.get('h1').text()).toBe('Account')
+    expect(wrapper.text()).toContain('Privacy')
+    expect(wrapper.text()).toContain('Delete account')
+    expect(wrapper.text()).not.toContain('Weekly email')
+    expect(wrapper.text()).not.toContain('Build full-stack Vue applications with Nuxt.')
+
+    await router.push('/?view=email')
+    await flushPromises()
+    expect(wrapper.get('h1').text()).toBe('Email updates')
+    expect(wrapper.text()).toContain('Weekly email')
+    expect(wrapper.text()).not.toContain('Delete account')
+
+    await router.push('/?view=unknown')
+    await flushPromises()
+    expect(wrapper.get('h1').text()).toBe('Your skills')
+    expect(wrapper.text()).not.toContain('Privacy')
+    wrapper.unmount()
   })
 
-  it('removes the final skill and its derived source from the rendered page', async () => {
+  it('removes the final skill and updates repository coverage', async () => {
     const wrapper = await mountPage()
 
     await wrapper.get('button[aria-label="Remove nuxt from your skills"]').trigger('click')
     await flushPromises()
 
     expect(wrapper.text()).toContain('Add your first skill')
+    const router = wrapper.vm.$router
+    await router.push('/?view=repositories')
+    await flushPromises()
     expect(wrapper.text()).toContain('Add a skill to start watching its source.')
-    expect(wrapper.text()).not.toContain('View repositories')
+    expect(wrapper.text()).not.toContain('antfu/skills')
   })
 
   it('disables skill removal while the request is pending', async () => {
@@ -277,7 +308,7 @@ describe('account skill watchlist', () => {
   })
 
   it('refreshes the visible account timestamp after syncing GitHub stars', async () => {
-    const wrapper = await mountPage()
+    const wrapper = await mountPage('repositories')
     const before = paragraphWithText(wrapper, 'Last GitHub import:').text()
 
     await buttonWithText(wrapper, 'Import stars again').trigger('click')
@@ -300,7 +331,7 @@ describe('account skill watchlist', () => {
 
   it('shows separate email choices and disables saving while pending', async () => {
     releaseEmailSave = () => {}
-    const wrapper = await mountPage()
+    const wrapper = await mountPage('email')
     expect(wrapper.text()).toContain('Weekly email')
     expect(wrapper.text()).toContain('Monthly digest')
     await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
@@ -316,7 +347,7 @@ describe('account skill watchlist', () => {
   })
 
   it('connects the email address label to its textbox', async () => {
-    const wrapper = await mountPage()
+    const wrapper = await mountPage('email')
     document.body.append(wrapper.element)
     await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
     const input = wrapper.get('input[type="email"]').element as HTMLInputElement
@@ -327,7 +358,7 @@ describe('account skill watchlist', () => {
   })
 
   it('saves the weekly email and monthly digest as separate choices', async () => {
-    const wrapper = await mountPage()
+    const wrapper = await mountPage('email')
     await wrapper.get('button[aria-controls="email-settings-form"]').trigger('click')
     const labels = wrapper.findAll('label')
     const weekly = labels.find(label => label.text().includes('weekly email'))