Merge PR #1049: PAPER-03: Wire Paper shell (Sidebar + TopBar) into AppShell

PAPER-03: Wire Paper shell (Sidebar + TopBar) into AppShell

Author: Chris0Jeky

frontend/taskdeck-web/src/components/paper/PaperSidebar.vue

@@ -538,4 +538,10 @@ defineExpose({
     min-height: 44px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .paper-sidebar {
+    transition: none;
+  }
+}
 </style>

frontend/taskdeck-web/src/components/shell/AppShell.vue

@@ -337,4 +337,34 @@ onUnmounted(() => {
     overflow-x: hidden; /* mobile safeguard — prevents horizontal scroll from wide content */
   }
 }
+
+/* ─── Paper mode overrides ─── */
+.td-shell--paper {
+  background: var(--paper);
+}
+
+.td-shell--paper .td-content {
+  background: var(--paper);
+}
+
+@media (max-width: 640px) {
+  .td-shell--paper .td-mobile-topbar {
+    background: var(--paper-2);
+    border-bottom-color: var(--line);
+  }
+
+  .td-shell--paper .td-mobile-topbar__hamburger {
+    color: var(--ink);
+  }
+
+  .td-shell--paper .td-mobile-topbar__hamburger:hover {
+    background: var(--paper-card);
+  }
+
+  .td-shell--paper .td-mobile-topbar__title {
+    font-family: var(--serif);
+    font-weight: 500;
+    color: var(--ink-deep);
+  }
+}
 </style>

frontend/taskdeck-web/src/router/index.ts

@@ -15,6 +15,8 @@ declare module 'vue-router' {
     requiresShell?: boolean
     automationSurface?: string
     requiresFlag?: keyof FeatureFlags
+    /** Human-readable breadcrumb label for the Paper TopBar. */
+    breadcrumb?: string
   }
 }
 
@@ -96,52 +98,52 @@ const router = createRouter({
       path: '/workspace/home',
       name: 'workspace-home',
       component: HomeView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Home' },
     },
     {
       path: '/workspace/today',
       name: 'workspace-today',
       component: TodayView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Today' },
     },
     {
       path: '/workspace/boards',
       name: 'workspace-boards',
       component: BoardsListView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Boards' },
     },
     {
       path: '/workspace/boards/:id',
       name: 'workspace-board',
       component: BoardView,
       props: true,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Board' },
     },
 
     // Activity routes
     {
       path: '/workspace/activity',
       name: 'workspace-activity',
       component: ActivityView,
-      meta: { requiresShell: true, requiresFlag: 'newActivity' },
+      meta: { requiresShell: true, requiresFlag: 'newActivity', breadcrumb: 'Activity' },
     },
     {
       path: '/workspace/activity/board/:boardId',
       name: 'workspace-activity-board',
       component: ActivityView,
-      meta: { requiresShell: true, requiresFlag: 'newActivity' },
+      meta: { requiresShell: true, requiresFlag: 'newActivity', breadcrumb: 'Activity' },
     },
     {
       path: '/workspace/activity/entity/:entityType/:entityId',
       name: 'workspace-activity-entity',
       component: ActivityView,
-      meta: { requiresShell: true, requiresFlag: 'newActivity' },
+      meta: { requiresShell: true, requiresFlag: 'newActivity', breadcrumb: 'Activity' },
     },
     {
       path: '/workspace/activity/user',
       name: 'workspace-activity-user',
       component: ActivityView,
-      meta: { requiresShell: true, requiresFlag: 'newActivity' },
+      meta: { requiresShell: true, requiresFlag: 'newActivity', breadcrumb: 'Activity' },
     },
     {
       path: '/workspace/activity/user/:userId',
@@ -153,23 +155,23 @@ const router = createRouter({
       path: '/workspace/metrics',
       name: 'workspace-metrics',
       component: MetricsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Metrics' },
     },
 
     // Integrations route
     {
       path: '/workspace/integrations',
       name: 'workspace-integrations',
       component: IntegrationsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Integrations' },
     },
 
     // Calendar/timeline planning route
     {
       path: '/workspace/calendar',
       name: 'workspace-calendar',
       component: CalendarView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Calendar' },
     },
 
     // Automation routes
@@ -185,13 +187,13 @@ const router = createRouter({
       path: '/workspace/automations/queue',
       name: 'workspace-automations-queue',
       component: AutomationQueueView,
-      meta: { requiresShell: true, automationSurface: 'queue', requiresFlag: 'newAutomation' },
+      meta: { requiresShell: true, automationSurface: 'queue', requiresFlag: 'newAutomation', breadcrumb: 'Queue' },
     },
     {
       path: '/workspace/review',
       name: 'workspace-review',
       component: ReviewView,
-      meta: { requiresShell: true, automationSurface: 'review', requiresFlag: 'newAutomation' },
+      meta: { requiresShell: true, automationSurface: 'review', requiresFlag: 'newAutomation', breadcrumb: 'Review' },
     },
     {
       path: '/workspace/automations/proposals',
@@ -205,35 +207,35 @@ const router = createRouter({
       path: '/workspace/automations/chat',
       name: 'workspace-automations-chat',
       component: AutomationChatView,
-      meta: { requiresShell: true, requiresFlag: 'newAutomation' },
+      meta: { requiresShell: true, requiresFlag: 'newAutomation', breadcrumb: 'Chat' },
     },
 
     // Ops routes
     {
       path: '/workspace/ops/cli',
       name: 'workspace-ops-cli',
       component: OpsConsoleView,
-      meta: { requiresShell: true, requiresFlag: 'newOps' },
+      meta: { requiresShell: true, requiresFlag: 'newOps', breadcrumb: 'Ops' },
     },
     {
       path: '/workspace/ops/endpoints',
       name: 'workspace-ops-endpoints',
       component: OpsConsoleView,
-      meta: { requiresShell: true, requiresFlag: 'newOps' },
+      meta: { requiresShell: true, requiresFlag: 'newOps', breadcrumb: 'Endpoints' },
     },
     {
       path: '/workspace/ops/logs',
       name: 'workspace-ops-logs',
       component: OpsConsoleView,
-      meta: { requiresShell: true, requiresFlag: 'newOps' },
+      meta: { requiresShell: true, requiresFlag: 'newOps', breadcrumb: 'Logs' },
     },
 
     // Settings routes
     {
       path: '/workspace/settings/profile',
       name: 'workspace-settings-profile',
       component: ProfileSettingsView,
-      meta: { requiresShell: true, requiresFlag: 'newAuth' },
+      meta: { requiresShell: true, requiresFlag: 'newAuth', breadcrumb: 'Profile' },
     },
     {
       path: '/workspace/settings/access/:boardId?',
@@ -242,85 +244,85 @@ const router = createRouter({
       props: (route) => ({
         boardId: typeof route.params.boardId === 'string' ? route.params.boardId : null,
       }),
-      meta: { requiresShell: true, requiresFlag: 'newAccess' },
+      meta: { requiresShell: true, requiresFlag: 'newAccess', breadcrumb: 'Access' },
     },
     {
       path: '/workspace/settings/export-import',
       name: 'workspace-settings-export-import',
       component: ExportImportView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Export & Import' },
     },
     {
       path: '/workspace/settings/preferences',
       name: 'workspace-settings-preferences',
       component: NotificationPreferencesView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Preferences' },
     },
     {
       path: '/workspace/settings/api-keys',
       name: 'workspace-settings-api-keys',
       component: ApiKeySettingsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'API Keys' },
     },
 
     // Archive route
     {
       path: '/workspace/archive',
       name: 'workspace-archive',
       component: ArchiveView,
-      meta: { requiresShell: true, requiresFlag: 'newArchive' },
+      meta: { requiresShell: true, requiresFlag: 'newArchive', breadcrumb: 'Archive' },
     },
     {
       path: '/workspace/views',
       name: 'workspace-views',
       component: SavedViewsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Views' },
     },
     {
       path: '/workspace/views/:viewId',
       name: 'workspace-views-detail',
       component: SavedViewsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Views' },
     },
     {
       path: '/workspace/inbox',
       name: 'workspace-inbox',
       component: InboxView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Inbox' },
     },
     {
       path: '/workspace/notifications',
       name: 'workspace-notifications',
       component: NotificationInboxView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Notifications' },
     },
 
     // Agent surfaces (visible in agent workspace mode)
     {
       path: '/workspace/agents',
       name: 'workspace-agents',
       component: AgentsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Agents' },
     },
     {
       path: '/workspace/agents/:agentId/runs',
       name: 'workspace-agent-runs',
       component: AgentRunsView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Runs' },
     },
     {
       path: '/workspace/agents/:agentId/runs/:runId',
       name: 'workspace-agent-run-detail',
       component: AgentRunDetailView,
-      meta: { requiresShell: true },
+      meta: { requiresShell: true, breadcrumb: 'Run Detail' },
     },
 
     // Internal dev tooling (trace replay + scenario editor)
     {
       path: '/workspace/dev-tools',
       name: 'workspace-dev-tools',
       component: DevToolsView,
-      meta: { requiresShell: true, requiresFlag: 'devTools' },
+      meta: { requiresShell: true, requiresFlag: 'devTools', breadcrumb: 'Dev Tools' },
     },
   ],
 })

frontend/taskdeck-web/src/tests/components/AppShell.paperVariant.spec.ts

@@ -178,4 +178,56 @@ describe('AppShell — paper variant routing', () => {
 
     expect(wrapper.find('.paper-sidebar--mobile-open').exists()).toBe(true)
   })
+
+  it('does not render both sidebars simultaneously when toggling paper mode', () => {
+    // Paper on: only Paper sidebar
+    mockPaperTheme.mode = 'paper'
+    mockPaperTheme.isOn = true
+    mockPaperTheme.activeClass = 'paper'
+    wrapper = mountShell()
+    expect(wrapper.find('[data-paper-sidebar]').exists()).toBe(true)
+    expect(wrapper.find('.td-sidebar').exists()).toBe(false)
+
+    wrapper.unmount()
+
+    // Paper off: only Obsidian sidebar
+    mockPaperTheme.mode = 'off'
+    mockPaperTheme.isOn = false
+    mockPaperTheme.activeClass = null
+    wrapper = mountShell()
+    expect(wrapper.find('.td-sidebar').exists()).toBe(true)
+    expect(wrapper.find('[data-paper-sidebar]').exists()).toBe(false)
+  })
+
+  it('wires the Paper sidebar open-shortcuts event to the keyboard help overlay', async () => {
+    mockPaperTheme.mode = 'paper'
+    mockPaperTheme.isOn = true
+    mockPaperTheme.activeClass = 'paper'
+    wrapper = mountShell()
+
+    // The Shortcuts pseudo-link in the Paper sidebar triggers the overlay
+    const shortcutsLink = wrapper.findAll('a.paper-sidebar__item')
+      .find((l) => l.text().includes('Shortcuts'))
+    expect(shortcutsLink).toBeDefined()
+    await shortcutsLink?.trigger('click')
+    await wrapper.vm.$nextTick()
+    // Verify the overlay is now visible via its prop — not just present in the DOM
+    const overlay = wrapper.findComponent({ name: 'PaperShortcutsOverlay' })
+    expect(overlay.exists()).toBe(true)
+    expect(overlay.props('visible')).toBe(true)
+  })
+
+  it('wires the Paper sidebar logout to session store', async () => {
+    mockPaperTheme.mode = 'paper'
+    mockPaperTheme.isOn = true
+    mockPaperTheme.activeClass = 'paper'
+    wrapper = mountShell()
+
+    const logoutLink = wrapper.findAll('a.paper-sidebar__item')
+      .find((l) => l.text().includes('Logout'))
+    await logoutLink?.trigger('click')
+
+    expect(mockSession.logout).toHaveBeenCalledTimes(1)
+    expect(mockRouter.push).toHaveBeenCalledWith('/login')
+  })
 })

frontend/taskdeck-web/src/tests/components/paper/PaperSidebar.spec.ts

@@ -225,6 +225,38 @@ describe('PaperSidebar', () => {
     expect(exposed.availableNavItems.some((item) => item.path.startsWith('#'))).toBe(false)
   })
 
+  it('renders the inbox badge with the · prefix when inboxBadgeCount > 0', () => {
+    mockWorkspace.inboxBadgeCount = 5
+    const wrapper = mountSidebar()
+    const badges = wrapper.findAll('.paper-sidebar__badge')
+    const inboxBadge = badges.find((b) => b.text().includes('5'))
+    expect(inboxBadge?.text()).toMatch(/·\s*5/)
+    expect(inboxBadge?.attributes('aria-label')).toBe('Inbox: 5 pending')
+  })
+
+  it('renders sidebar groups with data-group attributes for styling hooks', () => {
+    const wrapper = mountSidebar()
+    expect(wrapper.find('[data-group="primary"]').exists()).toBe(true)
+    expect(wrapper.find('[data-group="workbench"]').exists()).toBe(true)
+    expect(wrapper.find('[data-group="meta"]').exists()).toBe(true)
+  })
+
+  it('renders mono glyphs for sidebar items', () => {
+    const wrapper = mountSidebar()
+    const glyphs = wrapper.findAll('.paper-sidebar__glyph')
+    // Glyphs are single-letter mono characters
+    expect(glyphs.length).toBeGreaterThan(0)
+    expect(glyphs[0].text()).toHaveLength(1)
+  })
+
+  it('applies muted styling to meta group items', () => {
+    const wrapper = mountSidebar()
+    const metaGroup = wrapper.find('[data-group="meta"]')
+    expect(metaGroup.classes()).toContain('paper-sidebar__group--muted')
+    const metaItems = metaGroup.findAll('.paper-sidebar__item--muted')
+    expect(metaItems.length).toBeGreaterThan(0)
+  })
+
   it('exposes and closes the mobile menu controls', async () => {
     const wrapper = mountSidebar()
     const exposed = wrapper.vm as unknown as {