用途：为 Capsem 前端编写测试、执行类型检查，并在 Chrome DevTools MCP 中做视觉验证。技术栈为 Astro 7、Svelte 5（仅 runes）、Tailwind v4、Capsem 自有语义化 CSS 与 LayerChart v2。
主要能力与用法：测试文件放在 web/app/src/lib/tests/，使用 vitest。运行命令：cd web/app 后执行 pnpm run check（astro check + svelte-check 类型错误）、npx vitest run --coverage（带覆盖率的单元测试）、pnpm run build（生产构建，捕获开发模式遗漏的打包问题）。三者均包含在 just test 中。生产构建重要，因为 Tailwind v4 的 Vite 插件可能在 SSR 模块图中遗漏 client:only 组件，global.css 的 @source 指令必须显式包含 .svelte 与 .ts 文件。
Mock 模式：当 window.TAURI_INTERNALS 缺失（浏览器经 just dev ui）时，api.ts 自动把 IPC 调用切换为 mock.ts 的假数据，设置数据来自 mock-settings.generated.ts（由构建器从 config/settings/ui-metadata.generated.json 自动生成），因此无需 VM 即可测试完整 UI。该生成文件由 build_system/scripts/build/generate_schema.py 生成，经 just exec 与 just test 的 _generate-settings recipe 运行，禁止手工编辑。
视觉验证：每次 UI 变更都必须用 Chrome DevTools MCP 验证。流程：启动 just dev ui，navigate_page 到 http://localhost:5173，list_console_messages types=["error","warn"] 应为零，导航到受影响视图并 take_screenshot 确认渲染，多视图变更需截图全部视图，之后再次检查控制台。Settings 视图需逐节点击（AI Providers、Repositories、Security、VM、Appearance），确认 68 个叶子设置齐全、开关联动、API key 显隐、VM 资源显示 min_content_sessions、主题切换、lint 警告内联显示。改动 TOML 或生成的 mock 数据后需运行 just _generate-settings 并重新截图核对。
颜色规则：蓝色（info）表示正向（允许、运行、正常），UI 外壳不用绿色；紫色（secondary）表示负向（拒绝、停止、错误），UI 外壳不用红色；xterm 的终端仿真绿色除外。
注意事项：vm-state-changed 负载是 { state, trigger } 对象而非字符串；动态 Svelte 组件用 <svelte:component this={item.icon} />；语义主题位于 src/styles/capsem-theme.css，测试须拒绝任何 Preline 包、node_modules/preline 扫描、上游 CSS 导入、JS 插件、data-hs-* 属性或 HSStaticMethods 使用。Svelte 5 模式见 references/svelte5.md 与 @sveltejs/mcp CLI。