From 6c432a1f8789b909da5a150a9cbaf39e20e7b3b2 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:01:46 +0100
Subject: [PATCH 01/12] feat(paper): add AppearanceSettingsView with
 off/paper/paper-night/auto theme toggle

---
 .../src/views/AppearanceSettingsView.vue      | 136 ++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 frontend/taskdeck-web/src/views/AppearanceSettingsView.vue

diff --git a/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
new file mode 100644
index 000000000..13706fb54
--- /dev/null
+++ b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { usePaperThemeStore, type PaperMode } from '../store/paperThemeStore'
+
+const paperTheme = usePaperThemeStore()
+
+interface ThemeOption {
+  mode: PaperMode
+  label: string
+  hint: string
+}
+
+// Single source of truth for the four selectable modes. `off` is the Legacy
+// (Obsidian) escape hatch: it removes the Paper body class so AppShell renders
+// the classic `.td-*` shell, not just a light palette.
+const options: ThemeOption[] = [
+  {
+    mode: 'off',
+    label: 'Off (Legacy / Obsidian)',
+    hint: 'The original Obsidian shell. Choosing this returns the whole interface to Legacy, not just the colours.',
+  },
+  {
+    mode: 'paper',
+    label: 'Paper (Light)',
+    hint: 'The canonical Paper theme — cream paper, ink, and a single ember accent.',
+  },
+  {
+    mode: 'paper-night',
+    label: 'Paper Night (Dark)',
+    hint: 'Paper after dark — the same layout in a low-light palette.',
+  },
+  {
+    mode: 'auto',
+    label: 'Auto (match system)',
+    hint: 'Follows your operating system’s light/dark preference and updates live when it changes.',
+  },
+]
+
+const activeMode = computed(() => paperTheme.mode)
+const activeHint = computed(
+  () => options.find((option) => option.mode === activeMode.value)?.hint ?? '',
+)
+
+function selectMode(mode: PaperMode) {
+  // Pure UI: the store persists to localStorage and re-applies the body class.
+  paperTheme.setMode(mode)
+}
+</script>
+
+<template>
+  <div class="td-appearance-settings">
+    <h1 class="td-page-title">Appearance</h1>
+    <p class="td-description">
+      Choose how Taskdeck looks. Paper is the canonical theme; Off keeps the original Legacy (Obsidian) shell.
+    </p>
+
+    <section class="td-panel">
+      <div class="td-section-title">Theme</div>
+      <div class="td-theme-segments" role="group" aria-label="Theme">
+        <button
+          v-for="option in options"
+          :key="option.mode"
+          type="button"
+          class="td-theme-segment"
+          :class="{ 'td-theme-segment--active': activeMode === option.mode }"
+          :aria-pressed="activeMode === option.mode"
+          @click="selectMode(option.mode)"
+        >
+          {{ option.label }}
+        </button>
+      </div>
+      <p class="td-theme-hint">{{ activeHint }}</p>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.td-appearance-settings {
+  max-width: 640px;
+}
+
+.td-description {
+  color: var(--td-text-secondary);
+  margin-bottom: var(--td-space-4);
+}
+
+.td-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--td-space-3);
+  background: var(--td-surface-primary);
+  border: 1px solid var(--td-border-default);
+  border-radius: var(--td-radius-lg);
+  padding: var(--td-space-5);
+}
+
+.td-section-title {
+  font-weight: 700;
+  color: var(--td-text-primary);
+}
+
+.td-theme-segments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--td-space-2);
+}
+
+.td-theme-segment {
+  flex: 1 1 auto;
+  min-width: 140px;
+  padding: var(--td-space-2) var(--td-space-3);
+  border-radius: var(--td-radius-md);
+  border: 1px solid var(--td-border-default);
+  background: var(--td-surface-primary);
+  color: var(--td-text-secondary);
+  cursor: pointer;
+  font: inherit;
+}
+
+.td-theme-segment:hover {
+  border-color: var(--td-color-primary);
+}
+
+.td-theme-segment--active {
+  background: var(--td-color-primary);
+  color: var(--td-text-inverse);
+  border-color: var(--td-color-primary);
+  font-weight: 600;
+}
+
+.td-theme-hint {
+  color: var(--td-text-secondary);
+  margin: 0;
+  min-height: 1.25rem;
+}
+</style>

From 3358798b456473090ad27eb6349ba91e51ec6304 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:01:46 +0100
Subject: [PATCH 02/12] feat(paper): route /workspace/settings/appearance to
 AppearanceSettingsView

---
 frontend/taskdeck-web/src/router/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/taskdeck-web/src/router/index.ts b/frontend/taskdeck-web/src/router/index.ts
index 125c7480e..072cc8053 100644
--- a/frontend/taskdeck-web/src/router/index.ts
+++ b/frontend/taskdeck-web/src/router/index.ts
@@ -34,6 +34,7 @@ const ExportImportView = () => import('../views/ExportImportView.vue')
 const ArchiveView = () => import('../views/ArchiveView.vue')
 const NotificationInboxView = () => import('../views/NotificationInboxView.vue')
 const NotificationPreferencesView = () => import('../views/NotificationPreferencesView.vue')
+const AppearanceSettingsView = () => import('../views/AppearanceSettingsView.vue')
 const InboxView = () => import('../views/InboxView.vue')
 const HomeView = () => import('../views/HomeView.vue')
 const TodayView = () => import('../views/TodayView.vue')
@@ -276,6 +277,12 @@ const router = createRouter({
       component: NotificationPreferencesView,
       meta: { requiresShell: true, breadcrumb: 'Preferences' },
     },
+    {
+      path: '/workspace/settings/appearance',
+      name: 'workspace-settings-appearance',
+      component: AppearanceSettingsView,
+      meta: { requiresShell: true, breadcrumb: 'Appearance' },
+    },
     {
       path: '/workspace/settings/api-keys',
       name: 'workspace-settings-api-keys',

From 07debb23520d6eb0403eca8a0ae4fb0a482d1db4 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:01:46 +0100
Subject: [PATCH 03/12] feat(paper): link Appearance settings from the Legacy
 ShellSidebar

---
 .../taskdeck-web/src/components/shell/ShellSidebar.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index ce93f2a65..1d27efda2 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -248,6 +248,16 @@ const navCatalog: NavItem[] = [
     secondaryModes: ['guided', 'agent'],
     keywords: 'preferences notifications',
   },
+  {
+    id: 'appearance',
+    label: 'Appearance',
+    icon: 'T',
+    path: '/workspace/settings/appearance',
+    flag: null,
+    primaryModes: ['workbench'],
+    secondaryModes: ['guided', 'agent'],
+    keywords: 'appearance theme paper night dark light obsidian legacy',
+  },
   {
     id: 'access',
     label: 'Access',

From 8b9769acdeaa908dbcee03f2340e002356368c33 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:01:46 +0100
Subject: [PATCH 04/12] feat(paper): link Appearance settings from the
 PaperSidebar meta nav

---
 frontend/taskdeck-web/src/components/paper/PaperSidebar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue b/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
index f97668d66..8bd9534b8 100644
--- a/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
+++ b/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
@@ -92,6 +92,7 @@ const metaItems: PaperNavItem[] = [
   { id: 'settings', label: 'Settings', glyph: 'S', path: '/workspace/settings/profile', flag: 'newAuth', workbenchBypassesFlag: true, keywords: 'settings profile password account' },
   { id: 'api-keys', label: 'API Keys', glyph: 'K', path: '/workspace/settings/api-keys', keywords: 'api keys mcp tokens authentication' },
   { id: 'preferences', label: 'Preferences', glyph: 'P', path: '/workspace/settings/preferences', keywords: 'preferences notifications' },
+  { id: 'appearance', label: 'Appearance', glyph: 'T', path: '/workspace/settings/appearance', keywords: 'appearance theme paper night dark light obsidian legacy' },
   { id: 'shortcuts', label: 'Shortcuts', glyph: '?', path: '#shortcuts' },
   { id: 'logout', label: 'Logout', glyph: '→', path: '#logout' },
 ]

From 45245374a05369cc23a64365cc80e79c8b8cc3b4 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:01:47 +0100
Subject: [PATCH 05/12] test(paper): cover AppearanceSettingsView theme toggle
 (render, aria-pressed, setMode, auto, off-restores-legacy)

---
 .../views/AppearanceSettingsView.spec.ts      | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts

diff --git a/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts b/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts
new file mode 100644
index 000000000..67c0f5c4b
--- /dev/null
+++ b/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts
@@ -0,0 +1,80 @@
+import { beforeEach, afterEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import AppearanceSettingsView from '../../views/AppearanceSettingsView.vue'
+import { usePaperThemeStore } from '../../store/paperThemeStore'
+
+const STORAGE_KEY = 'td.paper.mode'
+
+function segmentByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  return wrapper
+    .findAll('.td-theme-segment')
+    .find((b) => b.text().includes(label))
+}
+
+describe('AppearanceSettingsView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    window.localStorage.clear()
+    document.body.classList.remove('paper', 'paper-night')
+  })
+
+  afterEach(() => {
+    document.body.classList.remove('paper', 'paper-night')
+  })
+
+  it('renders all four theme options', () => {
+    const wrapper = mount(AppearanceSettingsView)
+    const labels = wrapper.findAll('.td-theme-segment').map((b) => b.text())
+    expect(labels).toHaveLength(4)
+    expect(labels.some((l) => l.includes('Off (Legacy / Obsidian)'))).toBe(true)
+    expect(labels.some((l) => l.includes('Paper (Light)'))).toBe(true)
+    expect(labels.some((l) => l.includes('Paper Night (Dark)'))).toBe(true)
+    expect(labels.some((l) => l.includes('Auto (match system)'))).toBe(true)
+  })
+
+  it('reflects the current mode via aria-pressed (default off)', () => {
+    const wrapper = mount(AppearanceSettingsView)
+    expect(segmentByLabel(wrapper, 'Off (Legacy / Obsidian)')?.attributes('aria-pressed')).toBe('true')
+    expect(segmentByLabel(wrapper, 'Paper (Light)')?.attributes('aria-pressed')).toBe('false')
+    expect(segmentByLabel(wrapper, 'Auto (match system)')?.attributes('aria-pressed')).toBe('false')
+  })
+
+  it('selecting a mode calls setMode and persists to localStorage', async () => {
+    const wrapper = mount(AppearanceSettingsView)
+    const store = usePaperThemeStore()
+
+    await segmentByLabel(wrapper, 'Paper Night (Dark)')?.trigger('click')
+
+    expect(store.mode).toBe('paper-night')
+    expect(window.localStorage.getItem(STORAGE_KEY)).toBe('paper-night')
+    expect(document.body.classList.contains('paper-night')).toBe(true)
+    expect(segmentByLabel(wrapper, 'Paper Night (Dark)')?.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('Auto stays Auto (does not collapse to the resolved class)', async () => {
+    const wrapper = mount(AppearanceSettingsView)
+    const store = usePaperThemeStore()
+
+    await segmentByLabel(wrapper, 'Auto (match system)')?.trigger('click')
+
+    expect(store.mode).toBe('auto')
+    expect(window.localStorage.getItem(STORAGE_KEY)).toBe('auto')
+    expect(segmentByLabel(wrapper, 'Auto (match system)')?.attributes('aria-pressed')).toBe('true')
+  })
+
+  it('Off restores Legacy (no paper body class, store off)', async () => {
+    const wrapper = mount(AppearanceSettingsView)
+    const store = usePaperThemeStore()
+
+    await segmentByLabel(wrapper, 'Paper (Light)')?.trigger('click')
+    expect(store.isOn).toBe(true)
+
+    await segmentByLabel(wrapper, 'Off (Legacy / Obsidian)')?.trigger('click')
+
+    expect(store.mode).toBe('off')
+    expect(store.isOn).toBe(false)
+    expect(document.body.classList.contains('paper')).toBe(false)
+    expect(document.body.classList.contains('paper-night')).toBe(false)
+  })
+})

From cd43ba696c1ac3003371ccab4911274e9e915224 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:12:54 +0100
Subject: [PATCH 06/12] =?UTF-8?q?fix(paper):=20a11y=20+=20clarity=20on=20A?=
 =?UTF-8?q?ppearanceSettingsView=20=E2=80=94=20aria-labelledby,=20data-mod?=
 =?UTF-8?q?e=20hook,=20Legacy-token=20note=20(review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/AppearanceSettingsView.vue       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
index 13706fb54..72d8399e2 100644
--- a/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
+++ b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
@@ -55,14 +55,21 @@ function selectMode(mode: PaperMode) {
     </p>
 
     <section class="td-panel">
-      <div class="td-section-title">Theme</div>
-      <div class="td-theme-segments" role="group" aria-label="Theme">
+      <div id="td-appearance-theme-label" class="td-section-title">Theme</div>
+      <!--
+        Single-select segmented control. Kept as <button> + aria-pressed to match
+        the project-wide convention (PaperStyleGuideView, Today/Review rails, etc.
+        all use aria-pressed; no role="radiogroup" exists anywhere in the app). The
+        group is labelled by the visible "Theme" heading via aria-labelledby.
+      -->
+      <div class="td-theme-segments" role="group" aria-labelledby="td-appearance-theme-label">
         <button
           v-for="option in options"
           :key="option.mode"
           type="button"
           class="td-theme-segment"
           :class="{ 'td-theme-segment--active': activeMode === option.mode }"
+          :data-mode="option.mode"
           :aria-pressed="activeMode === option.mode"
           @click="selectMode(option.mode)"
         >
@@ -75,6 +82,13 @@ function selectMode(mode: PaperMode) {
 </template>
 
 <style scoped>
+/*
+ * Intentionally styled with the Legacy/Obsidian --td-* design tokens, matching
+ * every other /workspace/settings/* view. Paper does not redefine --td-*, so
+ * inside the Paper shell this panel renders in the Obsidian palette (readable,
+ * just not Paper-skinned) until the settings surfaces are Paper-tokenized in a
+ * later archive-pivot wave. Deliberately not re-skinned in this slice.
+ */
 .td-appearance-settings {
   max-width: 640px;
 }

From c425d11e4f1ece89e68d7a5b5407703fb5558c6f Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:12:54 +0100
Subject: [PATCH 07/12] =?UTF-8?q?fix(paper):=20give=20Appearance=20a=20dis?=
 =?UTF-8?q?tinct=20glyph=20'E'=20(was=20'T',=20collided=20with=20Today)=20?=
 =?UTF-8?q?=E2=80=94=20PaperSidebar=20(review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/taskdeck-web/src/components/paper/PaperSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue b/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
index 8bd9534b8..27547258e 100644
--- a/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
+++ b/frontend/taskdeck-web/src/components/paper/PaperSidebar.vue
@@ -92,7 +92,7 @@ const metaItems: PaperNavItem[] = [
   { id: 'settings', label: 'Settings', glyph: 'S', path: '/workspace/settings/profile', flag: 'newAuth', workbenchBypassesFlag: true, keywords: 'settings profile password account' },
   { id: 'api-keys', label: 'API Keys', glyph: 'K', path: '/workspace/settings/api-keys', keywords: 'api keys mcp tokens authentication' },
   { id: 'preferences', label: 'Preferences', glyph: 'P', path: '/workspace/settings/preferences', keywords: 'preferences notifications' },
-  { id: 'appearance', label: 'Appearance', glyph: 'T', path: '/workspace/settings/appearance', keywords: 'appearance theme paper night dark light obsidian legacy' },
+  { id: 'appearance', label: 'Appearance', glyph: 'E', path: '/workspace/settings/appearance', keywords: 'appearance theme paper night dark light obsidian legacy' },
   { id: 'shortcuts', label: 'Shortcuts', glyph: '?', path: '#shortcuts' },
   { id: 'logout', label: 'Logout', glyph: '→', path: '#logout' },
 ]

From 2e6775ec1bacd5bc3117279abd0d93310e9cf34b Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:12:54 +0100
Subject: [PATCH 08/12] =?UTF-8?q?fix(paper):=20give=20Appearance=20a=20dis?=
 =?UTF-8?q?tinct=20icon=20'E'=20(was=20'T',=20collided=20with=20Today)=20?=
 =?UTF-8?q?=E2=80=94=20ShellSidebar=20(review)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/taskdeck-web/src/components/shell/ShellSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index 1d27efda2..9400c10b2 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -251,7 +251,7 @@ const navCatalog: NavItem[] = [
   {
     id: 'appearance',
     label: 'Appearance',
-    icon: 'T',
+    icon: 'E',
     path: '/workspace/settings/appearance',
     flag: null,
     primaryModes: ['workbench'],

From 4a1d06bf2efb32cf3352758e9c0373e28e644554 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:12:55 +0100
Subject: [PATCH 09/12] test(paper): select theme segments by data-mode hook,
 not label substring (review)

---
 .../views/AppearanceSettingsView.spec.ts      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts b/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts
index 67c0f5c4b..85f1224b2 100644
--- a/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts
+++ b/frontend/taskdeck-web/src/tests/views/AppearanceSettingsView.spec.ts
@@ -6,10 +6,10 @@ import { usePaperThemeStore } from '../../store/paperThemeStore'
 
 const STORAGE_KEY = 'td.paper.mode'
 
-function segmentByLabel(wrapper: ReturnType<typeof mount>, label: string) {
-  return wrapper
-    .findAll('.td-theme-segment')
-    .find((b) => b.text().includes(label))
+// Select by the stable data-mode hook rather than label text, so the tests are
+// resilient to label wording changes.
+function segmentByMode(wrapper: ReturnType<typeof mount>, mode: string) {
+  return wrapper.find(`[data-mode="${mode}"]`)
 }
 
 describe('AppearanceSettingsView', () => {
@@ -35,42 +35,42 @@ describe('AppearanceSettingsView', () => {
 
   it('reflects the current mode via aria-pressed (default off)', () => {
     const wrapper = mount(AppearanceSettingsView)
-    expect(segmentByLabel(wrapper, 'Off (Legacy / Obsidian)')?.attributes('aria-pressed')).toBe('true')
-    expect(segmentByLabel(wrapper, 'Paper (Light)')?.attributes('aria-pressed')).toBe('false')
-    expect(segmentByLabel(wrapper, 'Auto (match system)')?.attributes('aria-pressed')).toBe('false')
+    expect(segmentByMode(wrapper, 'off').attributes('aria-pressed')).toBe('true')
+    expect(segmentByMode(wrapper, 'paper').attributes('aria-pressed')).toBe('false')
+    expect(segmentByMode(wrapper, 'auto').attributes('aria-pressed')).toBe('false')
   })
 
   it('selecting a mode calls setMode and persists to localStorage', async () => {
     const wrapper = mount(AppearanceSettingsView)
     const store = usePaperThemeStore()
 
-    await segmentByLabel(wrapper, 'Paper Night (Dark)')?.trigger('click')
+    await segmentByMode(wrapper, 'paper-night').trigger('click')
 
     expect(store.mode).toBe('paper-night')
     expect(window.localStorage.getItem(STORAGE_KEY)).toBe('paper-night')
     expect(document.body.classList.contains('paper-night')).toBe(true)
-    expect(segmentByLabel(wrapper, 'Paper Night (Dark)')?.attributes('aria-pressed')).toBe('true')
+    expect(segmentByMode(wrapper, 'paper-night').attributes('aria-pressed')).toBe('true')
   })
 
   it('Auto stays Auto (does not collapse to the resolved class)', async () => {
     const wrapper = mount(AppearanceSettingsView)
     const store = usePaperThemeStore()
 
-    await segmentByLabel(wrapper, 'Auto (match system)')?.trigger('click')
+    await segmentByMode(wrapper, 'auto').trigger('click')
 
     expect(store.mode).toBe('auto')
     expect(window.localStorage.getItem(STORAGE_KEY)).toBe('auto')
-    expect(segmentByLabel(wrapper, 'Auto (match system)')?.attributes('aria-pressed')).toBe('true')
+    expect(segmentByMode(wrapper, 'auto').attributes('aria-pressed')).toBe('true')
   })
 
   it('Off restores Legacy (no paper body class, store off)', async () => {
     const wrapper = mount(AppearanceSettingsView)
     const store = usePaperThemeStore()
 
-    await segmentByLabel(wrapper, 'Paper (Light)')?.trigger('click')
+    await segmentByMode(wrapper, 'paper').trigger('click')
     expect(store.isOn).toBe(true)
 
-    await segmentByLabel(wrapper, 'Off (Legacy / Obsidian)')?.trigger('click')
+    await segmentByMode(wrapper, 'off').trigger('click')
 
     expect(store.mode).toBe('off')
     expect(store.isOn).toBe(false)

From 33a08ecab6361f8240a94be64ced448722004b0e Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:18:55 +0100
Subject: [PATCH 10/12] fix(paper): grid layout for even segment wrapping +
 explicit focus-visible ring (Gemini)

---
 .../src/views/AppearanceSettingsView.vue            | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
index 72d8399e2..eab477cb3 100644
--- a/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
+++ b/frontend/taskdeck-web/src/views/AppearanceSettingsView.vue
@@ -114,14 +114,14 @@ function selectMode(mode: PaperMode) {
 }
 
 .td-theme-segments {
-  display: flex;
-  flex-wrap: wrap;
+  /* Grid (not flex-wrap) so segments keep equal widths and wrap cleanly
+     instead of stretching a lone item to full width on the next row. */
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: var(--td-space-2);
 }
 
 .td-theme-segment {
-  flex: 1 1 auto;
-  min-width: 140px;
   padding: var(--td-space-2) var(--td-space-3);
   border-radius: var(--td-radius-md);
   border: 1px solid var(--td-border-default);
@@ -135,6 +135,11 @@ function selectMode(mode: PaperMode) {
   border-color: var(--td-color-primary);
 }
 
+.td-theme-segment:focus-visible {
+  outline: none;
+  box-shadow: var(--td-focus-ring);
+}
+
 .td-theme-segment--active {
   background: var(--td-color-primary);
   color: var(--td-text-inverse);

From 91338efe23e7540a0d7c0b0be8becc0d9eb973a6 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:18:55 +0100
Subject: [PATCH 11/12] fix(paper): add visible Appearance link to Legacy
 ShellSidebar footer so default-off users can discover Paper (Codex) + scope
 Settings active-match to /profile

---
 .../src/components/shell/ShellSidebar.vue       | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
index 9400c10b2..a25f03a23 100644
--- a/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
+++ b/frontend/taskdeck-web/src/components/shell/ShellSidebar.vue
@@ -415,13 +415,26 @@ defineExpose({
         v-if="featureFlags.isEnabled('newAuth')"
         to="/workspace/settings/profile"
         class="td-nav-item td-nav-item--secondary"
-        :class="{ 'td-nav-item--active': isActiveRoute('/workspace/settings') }"
-        :aria-current="isActiveRoute('/workspace/settings') ? 'page' : undefined"
+        :class="{ 'td-nav-item--active': isActiveRoute('/workspace/settings/profile') }"
+        :aria-current="isActiveRoute('/workspace/settings/profile') ? 'page' : undefined"
         @click="closeMobileMenu"
       >
         <span class="td-nav-item__icon">S</span>
         <span v-if="!sidebarCollapsed" class="td-nav-item__label">Settings</span>
       </router-link>
+      <!-- Appearance/theme is the one settings page worth a visible link: it is
+           the only way for a default-'off' user to discover Paper from the
+           Legacy shell (the rest of the settings cluster stays Ctrl+K-only). -->
+      <router-link
+        to="/workspace/settings/appearance"
+        class="td-nav-item td-nav-item--secondary"
+        :class="{ 'td-nav-item--active': isActiveRoute('/workspace/settings/appearance') }"
+        :aria-current="isActiveRoute('/workspace/settings/appearance') ? 'page' : undefined"
+        @click="closeMobileMenu"
+      >
+        <span class="td-nav-item__icon">E</span>
+        <span v-if="!sidebarCollapsed" class="td-nav-item__label">Appearance</span>
+      </router-link>
     </nav>
 
     <div class="td-sidebar__footer">

From 0460582a1cdf61d242ea369d945cecdbbb886b12 Mon Sep 17 00:00:00 2001
From: Chris0Jeky <jeky.tck@gmail.com>
Date: Sat, 13 Jun 2026 18:18:55 +0100
Subject: [PATCH 12/12] test(paper): cover the footer Appearance link (renders
 + href + ungated by newAuth)

---
 .../src/tests/components/ShellSidebar.spec.ts   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/taskdeck-web/src/tests/components/ShellSidebar.spec.ts b/frontend/taskdeck-web/src/tests/components/ShellSidebar.spec.ts
index aad9a6779..d0ef56be2 100644
--- a/frontend/taskdeck-web/src/tests/components/ShellSidebar.spec.ts
+++ b/frontend/taskdeck-web/src/tests/components/ShellSidebar.spec.ts
@@ -78,6 +78,23 @@ describe('ShellSidebar', () => {
     expect(wrapper.text()).toContain('Settings')
   })
 
+  it('renders a visible Appearance link in the footer pointing at the theme settings', () => {
+    const wrapper = mountSidebar({
+      stub: { template: '<a :data-to="to"><slot /></a>', props: ['to'] },
+    })
+    const appearanceLink = wrapper.findAll('a').find((a) => a.text().includes('Appearance'))
+    expect(appearanceLink).toBeTruthy()
+    expect(appearanceLink!.attributes('data-to')).toBe('/workspace/settings/appearance')
+  })
+
+  it('keeps the Appearance link visible even when newAuth is disabled (theme is auth-independent)', () => {
+    mockFeatureFlags.isEnabled = vi.fn((flag: string) => flag !== 'newAuth')
+    const wrapper = mountSidebar()
+    expect(wrapper.text()).toContain('Appearance')
+    // The Settings (profile) link is gated on newAuth; Appearance is not.
+    expect(wrapper.text()).not.toContain('Settings')
+  })
+
   it('does not show demoted items (Metrics, Activity, Ops, etc.) in the sidebar', () => {
     const wrapper = mountSidebar()
     // These items were demoted from sidebar and are now command-palette-only