Merge pull request #1013 from Chris0Jeky/paper/04-home

Chris0Jeky · web-flow · commit 27d0d3c8f409 · 2026-04-25T19:44:31.000+01:00
PAPER-04 · Home / Reset surface
diff --git a/frontend/taskdeck-web/src/tests/views/HomeView.spec.ts b/frontend/taskdeck-web/src/tests/views/HomeView.spec.ts
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { reactive } from 'vue'
 import HomeView from '../../views/HomeView.vue'
+import { usePaperThemeStore } from '../../store/paperThemeStore'
 import type { HomeSummary, WorkspaceOnboarding } from '../../types/workspace'
 
 const routerMocks = vi.hoisted(() => ({
@@ -71,6 +72,7 @@ describe('HomeView', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     localStorage.clear()
+    usePaperThemeStore().mode = 'off'
     mockWorkspaceStore.onboarding = buildOnboarding()
     mockWorkspaceStore.homeLoading = false
     mockWorkspaceStore.homeError = null
@@ -127,6 +129,15 @@ describe('HomeView', () => {
     expect(mockWorkspaceStore.fetchHomeSummary).toHaveBeenCalledTimes(1)
   })
 
+  it('lets Paper Home own summary refreshes while the paper variant is active', async () => {
+    usePaperThemeStore().mode = 'paper'
+
+    mount(HomeView)
+    await waitForUi()
+
+    expect(mockWorkspaceStore.fetchHomeSummary).not.toHaveBeenCalled()
+  })
+
   it('renders setup loop, workload, and recent boards', async () => {
     const wrapper = mount(HomeView)
     await waitForUi()
diff --git a/frontend/taskdeck-web/src/tests/views/paper/PaperHomeView.spec.ts b/frontend/taskdeck-web/src/tests/views/paper/PaperHomeView.spec.ts
@@ -0,0 +1,279 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick, reactive } from 'vue'
+import PaperHomeView from '../../../views/paper/PaperHomeView.vue'
+import type { HomeSummary } from '../../../types/workspace'
+
+/**
+ * PaperHomeView — vitest coverage for greeting, queue rendering, empty
+ * state, capture dispatch guard, and ember-accent rules.
+ *
+ * The view reads from sessionStore, workspaceStore, captureStore, and
+ * vue-router; we mock all four with lightweight reactive stand-ins. The
+ * greeting is time-of-day sensitive, so each test pins the system clock
+ * with vi.useFakeTimers / setSystemTime.
+ */
+
+const routerMocks = vi.hoisted(() => ({
+  push: vi.fn(),
+}))
+
+const mockSessionStore = reactive({
+  username: 'daniel' as string | null,
+})
+
+const mockWorkspaceStore = reactive({
+  homeSummary: null as HomeSummary | null,
+  homeLoading: false,
+  homeError: null as string | null,
+  hasHomeSummary: false,
+  fetchHomeSummary: vi.fn<() => Promise<void>>(),
+})
+
+const mockCaptureStore = {
+  createItem: vi.fn(),
+}
+
+vi.mock('../../../store/sessionStore', () => ({
+  useSessionStore: () => mockSessionStore,
+}))
+
+vi.mock('../../../store/workspaceStore', () => ({
+  useWorkspaceStore: () => mockWorkspaceStore,
+}))
+
+vi.mock('../../../store/captureStore', () => ({
+  useCaptureStore: () => mockCaptureStore,
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: routerMocks.push }),
+}))
+
+function buildSummary(overrides?: Partial<HomeSummary>): HomeSummary {
+  return {
+    workspaceMode: 'guided',
+    isFirstRun: false,
+    onboarding: {
+      visibility: 'active',
+      isComplete: false,
+      currentStepId: null,
+      dismissedAt: null,
+      completedAt: null,
+      steps: [],
+    },
+    workload: {
+      capturesNeedingTriage: 0,
+      capturesInProgress: 0,
+      capturesReadyForFollowUp: 0,
+      proposalsPendingReview: 0,
+    },
+    boards: {
+      totalBoards: 0,
+      recentBoardsCount: 0,
+      recentBoards: [],
+    },
+    recommendedActions: [],
+    ...overrides,
+  }
+}
+
+describe('PaperHomeView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSessionStore.username = 'daniel'
+    mockWorkspaceStore.homeSummary = buildSummary()
+    mockWorkspaceStore.homeLoading = false
+    mockWorkspaceStore.homeError = null
+    mockWorkspaceStore.hasHomeSummary = true
+    mockWorkspaceStore.fetchHomeSummary.mockResolvedValue(undefined)
+    mockCaptureStore.createItem.mockReset()
+    mockCaptureStore.createItem.mockResolvedValue({ id: 'capture-1' })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('greeting period', () => {
+    it.each([
+      ['08:00 local', new Date(2026, 3, 25, 8, 0, 0), 'Good morning', 'morning'],
+      ['12:30 local', new Date(2026, 3, 25, 12, 30, 0), 'Good afternoon', 'afternoon'],
+      ['19:00 local', new Date(2026, 3, 25, 19, 0, 0), 'Good evening', 'evening'],
+    ])('picks %s', (_label, fixedNow, opener, period) => {
+      vi.useFakeTimers()
+      vi.setSystemTime(fixedNow as Date)
+
+      const wrapper = mount(PaperHomeView)
+      const greeting = wrapper.get('[data-testid="paper-home-greeting"]')
+      const eyebrow = wrapper.get('[data-testid="paper-home-period"]')
+
+      expect(greeting.text()).toContain(opener as string)
+      expect(greeting.text()).toContain('Daniel')
+      expect(eyebrow.text()).toContain(period as string)
+    })
+
+    it('falls back to "Hello" when no first name is available', () => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date(2026, 3, 25, 9, 0, 0))
+      mockSessionStore.username = null
+
+      const wrapper = mount(PaperHomeView)
+      const greeting = wrapper.get('[data-testid="paper-home-greeting"]')
+
+      expect(greeting.text()).toBe('Hello.')
+      expect(greeting.text()).not.toContain('Good morning')
+    })
+
+    it('supports Unicode first-name tokens', () => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date(2026, 3, 25, 9, 0, 0))
+      mockSessionStore.username = 'élodie.smith@example.test'
+
+      const wrapper = mount(PaperHomeView)
+
+      expect(wrapper.get('[data-testid="paper-home-greeting"]').text()).toContain('Élodie')
+    })
+
+    it('refreshes the greeting period while the view stays active', async () => {
+      vi.useFakeTimers()
+      vi.setSystemTime(new Date(2026, 3, 25, 11, 59, 30))
+
+      const wrapper = mount(PaperHomeView)
+      expect(wrapper.get('[data-testid="paper-home-period"]').text()).toContain('morning')
+
+      await vi.advanceTimersByTimeAsync(60_000)
+      await nextTick()
+
+      expect(wrapper.get('[data-testid="paper-home-period"]').text()).toContain('afternoon')
+    })
+  })
+
+  describe('queue cards', () => {
+    it('renders loading instead of an empty queue while summary is missing', () => {
+      mockWorkspaceStore.homeSummary = null
+      mockWorkspaceStore.hasHomeSummary = false
+      mockWorkspaceStore.homeLoading = true
+
+      const wrapper = mount(PaperHomeView)
+
+      expect(wrapper.find('[data-testid="paper-home-loading"]').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="paper-home-empty"]').exists()).toBe(false)
+      expect(wrapper.find('.paper-home__queue').exists()).toBe(false)
+    })
+
+    it('renders the store error instead of an empty queue when summary loading fails', () => {
+      mockWorkspaceStore.homeSummary = null
+      mockWorkspaceStore.hasHomeSummary = false
+      mockWorkspaceStore.homeError = 'Failed to load workspace summary'
+
+      const wrapper = mount(PaperHomeView)
+
+      expect(wrapper.find('[data-testid="paper-home-error"]').text()).toContain('Failed to load workspace summary')
+      expect(wrapper.find('[data-testid="paper-home-empty"]').exists()).toBe(false)
+      expect(wrapper.find('.paper-home__queue').exists()).toBe(false)
+    })
+
+    it('renders refresh errors even when a cached summary exists', () => {
+      mockWorkspaceStore.homeSummary = buildSummary({
+        workload: {
+          capturesNeedingTriage: 0,
+          capturesInProgress: 0,
+          capturesReadyForFollowUp: 0,
+          proposalsPendingReview: 0,
+        },
+      })
+      mockWorkspaceStore.hasHomeSummary = true
+      mockWorkspaceStore.homeError = 'Could not refresh workspace summary'
+
+      const wrapper = mount(PaperHomeView)
+
+      expect(wrapper.find('[data-testid="paper-home-error"]').text()).toContain('Could not refresh workspace summary')
+      expect(wrapper.find('[data-testid="paper-home-empty"]').exists()).toBe(false)
+      expect(wrapper.get('[data-testid="paper-home-lede"]').text()).toContain('Could not refresh workspace summary')
+    })
+
+    it('renders the empty state when nothing is queued', () => {
+      mockWorkspaceStore.homeSummary = buildSummary()
+      const wrapper = mount(PaperHomeView)
+
+      expect(wrapper.find('[data-testid="paper-home-empty"]').exists()).toBe(true)
+      expect(wrapper.find('[data-testid="paper-home-empty"]').text()).toContain('Nothing waiting')
+      expect(wrapper.find('[data-testid="paper-home-card-proposal"]').exists()).toBe(false)
+      expect(wrapper.find('[data-testid="paper-home-card-carryover"]').exists()).toBe(false)
+    })
+
+    it('only marks proposal entries with the ember halo, not carry-overs', () => {
+      mockWorkspaceStore.homeSummary = buildSummary({
+        workload: {
+          capturesNeedingTriage: 2,
+          capturesInProgress: 0,
+          capturesReadyForFollowUp: 0,
+          proposalsPendingReview: 1,
+        },
+        recommendedActions: [
+          {
+            actionId: 'review-proposals',
+            title: 'Review pending proposals',
+            description: 'One awaits decision.',
+            targetSurface: 'review',
+            attentionCount: 1,
+          },
+        ],
+      })
+
+      const wrapper = mount(PaperHomeView)
+      const proposalCards = wrapper.findAll('[data-testid="paper-home-card-proposal"]')
+      const carryoverCards = wrapper.findAll('[data-testid="paper-home-card-carryover"]')
+
+      expect(proposalCards).toHaveLength(1)
+      expect(carryoverCards.length).toBeGreaterThan(0)
+
+      // Proposals carry the ember halo; carry-overs do not.
+      expect(proposalCards[0].classes()).toContain('halo-ember')
+      carryoverCards.forEach((card) => {
+        expect(card.classes()).not.toContain('halo-ember')
+      })
+    })
+  })
+
+  describe('quick capture', () => {
+    it('cleans up the global capture shortcut listener on unmount', () => {
+      const addSpy = vi.spyOn(window, 'addEventListener')
+      const removeSpy = vi.spyOn(window, 'removeEventListener')
+
+      const wrapper = mount(PaperHomeView)
+      wrapper.unmount()
+
+      expect(addSpy).toHaveBeenCalledWith('keydown', expect.any(Function))
+      expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function))
+    })
+
+    it('does not dispatch on empty Enter', async () => {
+      const wrapper = mount(PaperHomeView)
+      const input = wrapper.get('[data-testid="paper-home-capture-input"]')
+
+      await input.setValue('   ')
+      await wrapper.get('form').trigger('submit.prevent')
+
+      expect(mockCaptureStore.createItem).not.toHaveBeenCalled()
+    })
+
+    it('dispatches a typed capture and refreshes the home summary on submit', async () => {
+      const wrapper = mount(PaperHomeView)
+      const input = wrapper.get('[data-testid="paper-home-capture-input"]')
+
+      await input.setValue('Refactor the queue store')
+      await wrapper.get('form').trigger('submit.prevent')
+      await Promise.resolve()
+
+      expect(mockCaptureStore.createItem).toHaveBeenCalledTimes(1)
+      expect(mockCaptureStore.createItem).toHaveBeenCalledWith({
+        boardId: null,
+        text: 'Refactor the queue store',
+        source: 'Typed',
+      })
+      expect(mockWorkspaceStore.fetchHomeSummary).toHaveBeenCalledTimes(1)
+    })
+  })
+})
diff --git a/frontend/taskdeck-web/src/views/HomeView.vue b/frontend/taskdeck-web/src/views/HomeView.vue
@@ -1,15 +1,55 @@
 <script setup lang="ts">
-import { computed, onActivated, onMounted } from 'vue'
+import { computed, defineAsyncComponent, defineComponent, h, onActivated, onMounted } from 'vue'
 import WorkspaceSetupModal from '../components/workspace/WorkspaceSetupModal.vue'
 import WorkspaceHelpCallout from '../components/workspace/WorkspaceHelpCallout.vue'
 import { TdSkeleton } from '../components/ui'
 import { useWorkspaceOnboardingActions } from '../composables/useWorkspaceOnboardingActions'
 import { useWorkspaceStore } from '../store/workspaceStore'
+import { usePaperThemeStore } from '../store/paperThemeStore'
 import { usePerformanceMark } from '../composables/usePerformanceMark'
 import type { HomeRecommendedAction, WorkspaceOnboarding } from '../types/workspace'
 import { isClientOnboardingDemoBoardName } from '../utils/boardDemo'
 
+// Paper-skin variant is loaded lazily so the Obsidian path stays the
+// default code-split entry — only sessions that flip Paper on pay the
+// extra chunk.
+const PaperHomeAsyncLoading = defineComponent({
+  name: 'PaperHomeAsyncLoading',
+  setup: () => () =>
+    h(
+      'div',
+      {
+        class: 'td-home__skeleton',
+        role: 'status',
+        'aria-live': 'polite',
+      },
+      [h('span', { class: 'sr-only' }, 'Loading Paper Home...'), h('div', { class: 'td-panel td-home-card' }, 'Loading Paper Home...')],
+    ),
+})
+
+const PaperHomeAsyncError = defineComponent({
+  name: 'PaperHomeAsyncError',
+  setup: () => () =>
+    h(
+      'div',
+      {
+        class: 'td-alert td-alert--error',
+        role: 'alert',
+      },
+      'Paper Home could not be loaded. Refresh and try again.',
+    ),
+})
+
+const PaperHomeView = defineAsyncComponent({
+  loader: () => import('./paper/PaperHomeView.vue'),
+  loadingComponent: PaperHomeAsyncLoading,
+  errorComponent: PaperHomeAsyncError,
+  delay: 0,
+  timeout: 30000,
+})
+
 const workspace = useWorkspaceStore()
+const paperTheme = usePaperThemeStore()
 const homeLoadPerf = usePerformanceMark('home-load')
 
 const summary = computed(() => workspace.homeSummary)
@@ -104,7 +144,7 @@ function openBoard(boardId: string) {
 }
 
 function refreshHomeSummary() {
-  if (workspace.homeLoading) {
+  if (paperTheme.isOn || workspace.homeLoading) {
     return
   }
 
@@ -127,7 +167,8 @@ onActivated(refreshHomeSummary)
 </script>
 
 <template>
-  <div class="td-home" role="region" aria-label="Home workspace">
+  <PaperHomeView v-if="paperTheme.isOn" />
+  <div v-else class="td-home" role="region" aria-label="Home workspace">
     <header class="td-home__hero td-panel">
       <div class="td-home__hero-copy">
         <span class="td-home__eyebrow" aria-hidden="true">Workspace</span>
diff --git a/frontend/taskdeck-web/src/views/paper/PaperHomeView.vue b/frontend/taskdeck-web/src/views/paper/PaperHomeView.vue
