fix(desktop): mirror runtime import graph

Author: chen-ran

apps/desktop/AGENTS.md

@@ -138,11 +138,25 @@ typecheck.
 real `exports` field. So bundle behaviour is unchanged; only `vue-tsc`
 follows the stubs.
 
+The typecheck import graph must still mirror the runtime import graph. When
+desktop reuses workspace package exports, source files must import through
+the same public module specifiers that Vite bundles at runtime, and the
+renderer stubs must model that same surface. Do not paper over `vue-tsc`
+errors by swapping imports to aliases or private source paths unless both
+Vite and `tsconfig.web.json` intentionally resolve that specifier to the
+same module. A resolver mismatch can make one pipeline pass while the other
+fails, or make typecheck validate a different module than the one packaged
+at runtime.
+
 When you add a new `@memohai/web/*` import in the desktop renderer, add a
 matching `declare module` to `web-stubs.d.ts`. The wildcard
 `declare module '@memohai/web/*.vue'` already covers any `.vue` SFC reached
 through the wildcard `./*` export.
 
+When you import a new component directly from `@memohai/ui`, add that
+component to `ui-stubs.d.ts` as well. The package may export it correctly,
+but desktop's renderer typecheck only sees the stubbed surface.
+
 ## Multi-Window Lifecycle
 
 ### Main process (`src/main/index.ts`)
@@ -552,6 +566,14 @@ list to check.
 - **Update both `tsconfig.web.json` paths and `web-stubs.d.ts`** when adding
   a new `@memohai/web/foo` import. Forgetting the stub yields
   `TS2307: Cannot find module` even though the bundle works.
+- **Keep typecheck resolution and runtime resolution isomorphic.** Desktop
+  renderer code must import reused workspace modules through the same public
+  specifiers that Vite bundles at runtime, then model that surface in the
+  stubs. Do not mix in alternate aliases or private source paths unless both
+  Vite and `tsconfig.web.json` intentionally resolve them to the same target.
+- **Update `ui-stubs.d.ts` for direct `@memohai/ui` imports.** A component
+  exported by the real UI package still needs to exist in the desktop stub
+  if desktop imports it directly.
 - **Run `pnpm --filter @memohai/desktop typecheck` after every renderer
   change.** It's fast (only types desktop's own code thanks to the stubs)
   and catches the common drift cases (missing stub, wrong store/component

apps/desktop/src/renderer/src/settings/App.vue

@@ -56,7 +56,8 @@ const breadcrumbs = computed(() => {
     }
   }
   if (items.length > 0) {
-    items[items.length - 1].isLast = true
+    const lastItem = items[items.length - 1]
+    if (lastItem) lastItem.isLast = true
   }
   return items
 })

apps/desktop/src/renderer/src/settings/router.ts

@@ -1,4 +1,5 @@
-import { createRouter, createMemoryHistory, type RouteRecordRaw } from 'vue-router'
+import { h } from 'vue'
+import { createRouter, createMemoryHistory, RouterView, type RouteRecordRaw } from 'vue-router'
 import { SETTINGS_ROUTE_SPECS, SETTINGS_DEFAULT_PATH, type SettingsRouteSpec } from '../shared/settings-routes'
 
 // Settings-window router. Mirrors the path layout under `/settings/*` from
@@ -8,13 +9,17 @@ import { SETTINGS_ROUTE_SPECS, SETTINGS_DEFAULT_PATH, type SettingsRouteSpec } f
 // into `/settings/bots` (or whatever path the chat window asks for via the
 // `settings:navigate` IPC).
 
-const mapSpecToRoute = (spec: SettingsRouteSpec): RouteRecordRaw => ({
-  name: spec.name,
-  path: spec.path,
-  component: spec.loader,
-  meta: spec.meta,
-  children: spec.children?.map(mapSpecToRoute),
-})
+const mapSpecToRoute = (spec: SettingsRouteSpec): RouteRecordRaw => {
+  const route = {
+    path: spec.path,
+    component: spec.loader ?? { render: () => h(RouterView) },
+    ...(spec.name ? { name: spec.name } : {}),
+    ...(spec.meta ? { meta: spec.meta } : {}),
+    ...(spec.children ? { children: spec.children.map(mapSpecToRoute) } : {}),
+  } satisfies RouteRecordRaw
+
+  return route
+}
 
 const realRoutes: RouteRecordRaw[] = SETTINGS_ROUTE_SPECS.map(mapSpecToRoute)
 

apps/desktop/src/renderer/src/shared/settings-routes.ts

@@ -7,7 +7,7 @@
 // children — adding a new settings page to web means adding an entry here.
 
 import type { Component } from 'vue'
-import { i18nRef } from '@/i18n'
+import { i18nRef } from '@memohai/web/i18n'
 
 export interface SettingsRouteSpec {
   name?: string
@@ -27,92 +27,92 @@ export const SETTINGS_ROUTE_SPECS: SettingsRouteSpec[] = [
       {
         name: 'bots',
         path: '',
-        loader: () => import('@/pages/bots/index.vue'),
+        loader: () => import('@memohai/web/pages/bots/index.vue'),
       },
       {
         name: 'bot-new',
         path: 'new',
-        loader: () => import('@/pages/bots/new.vue'),
+        loader: () => import('@memohai/web/pages/bots/new.vue'),
         meta: { breadcrumb: i18nRef('bots.createBot') }
       },
       {
         name: 'bot-detail',
         path: ':botId',
-        loader: () => import('@/pages/bots/detail.vue'),
+        loader: () => import('@memohai/web/pages/bots/detail.vue'),
         meta: { breadcrumb: (route: { params: { botId?: string } }) => route.params.botId }
       },
     ]
   },
   {
     name: 'providers',
     path: '/settings/providers',
-    loader: () => import('@/pages/providers/index.vue'),
+    loader: () => import('@memohai/web/pages/providers/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.providers') }
   },
   {
     name: 'web-search',
     path: '/settings/web-search',
-    loader: () => import('@/pages/web-search/index.vue'),
+    loader: () => import('@memohai/web/pages/web-search/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.webSearch') }
   },
   {
     name: 'memory',
     path: '/settings/memory',
-    loader: () => import('@/pages/memory/index.vue'),
+    loader: () => import('@memohai/web/pages/memory/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.memory') }
   },
   {
     name: 'speech',
     path: '/settings/speech',
-    loader: () => import('@/pages/speech/index.vue'),
+    loader: () => import('@memohai/web/pages/speech/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.speech') }
   },
   {
     name: 'transcription',
     path: '/settings/transcription',
-    loader: () => import('@/pages/transcription/index.vue'),
+    loader: () => import('@memohai/web/pages/transcription/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.transcription') }
   },
   {
     name: 'email',
     path: '/settings/email',
-    loader: () => import('@/pages/email/index.vue'),
+    loader: () => import('@memohai/web/pages/email/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.email') }
   },
   {
     name: 'usage',
     path: '/settings/usage',
-    loader: () => import('@/pages/usage/index.vue'),
+    loader: () => import('@memohai/web/pages/usage/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.usage') }
   },
   {
     name: 'appearance',
     path: '/settings/appearance',
-    loader: () => import('@/pages/appearance/index.vue'),
+    loader: () => import('@memohai/web/pages/appearance/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.appearance') }
   },
   {
     name: 'profile',
     path: '/settings/profile',
-    loader: () => import('@/pages/profile/index.vue'),
+    loader: () => import('@memohai/web/pages/profile/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.profile') }
   },
   {
     name: 'platform',
     path: '/settings/platform',
-    loader: () => import('@/pages/platform/index.vue'),
+    loader: () => import('@memohai/web/pages/platform/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.platform') }
   },
   {
     name: 'supermarket',
     path: '/settings/supermarket',
-    loader: () => import('@/pages/supermarket/index.vue'),
+    loader: () => import('@memohai/web/pages/supermarket/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.supermarket') }
   },
   {
     name: 'about',
     path: '/settings/about',
-    loader: () => import('@/pages/about/index.vue'),
+    loader: () => import('@memohai/web/pages/about/index.vue'),
     meta: { breadcrumb: i18nRef('sidebar.about') }
   },
 ]

apps/desktop/src/renderer/types/ui-stubs.d.ts

@@ -22,6 +22,12 @@ declare module '@memohai/ui' {
   export const AvatarFallback: LooseComponent
   export const AvatarImage: LooseComponent
   export const Badge: LooseComponent
+  export const Breadcrumb: LooseComponent
+  export const BreadcrumbItem: LooseComponent
+  export const BreadcrumbLink: LooseComponent
+  export const BreadcrumbList: LooseComponent
+  export const BreadcrumbPage: LooseComponent
+  export const BreadcrumbSeparator: LooseComponent
   export const Button: LooseComponent
   export const Card: LooseComponent
   export const CardHeader: LooseComponent

apps/desktop/src/renderer/types/web-stubs.d.ts

@@ -17,8 +17,10 @@ declare module '@memohai/web/router' {
 
 declare module '@memohai/web/i18n' {
   import type { I18n } from 'vue-i18n'
+  import type { ComputedRef } from 'vue'
   const i18n: I18n
   export default i18n
+  export function i18nRef(key: string): ComputedRef<string>
 }
 
 declare module '@memohai/web/api-client' {