# Mock-only command dashboard shell notes

Session pattern from JARVIS Phase 4A: building a Vue/Vite/TypeScript shell over a mock-only FastAPI gateway while preserving strict safety boundaries.

## Durable patterns

- Keep the first frontend shell read-only and fixture-backed; test the API client separately before wiring live data into pages.
- Add frontend Make targets to root verification early: `dashboard-install-check`, `dashboard-test`, `dashboard-build`, and include test/build in `make verify` once dependencies exist.
- Use a Vite `server.strictPort = true` for fixed local-dev ports. Without strict ports, Vite may silently move to another port and browser QA can accidentally inspect a different app already occupying the intended port.
- Set TypeScript build configs to `noEmit: true` when using `vue-tsc -b`; otherwise `.js` or `.tsbuildinfo` artifacts can appear beside source files and pollute git status.
- Ignore `*.tsbuildinfo`; never commit Vite `dist/`, generated `.js` source twins, or local `node_modules/`.
- For Tailwind in a conservative Vite shell, either pin Tailwind 3 (`^3.4.x`) with classic `tailwindcss` PostCSS config or explicitly add/use `@tailwindcss/postcss` for Tailwind 4. Do not leave the broken Tailwind-4-as-PostCSS-plugin state.
- Extend repo safety scans to treat `.ts`, `.vue`, `.css`, `.html`, and `.cjs` as text, skip dependency/build dirs, and allowlist only explicit safety-test files that intentionally contain forbidden sentinel strings.

## Verification gates

- `npm test`
- `npm run build`
- backend tests if the UI depends on a local gateway contract
- repo safety scan after build, to prove generated artifacts are ignored/skipped and source is clean
- `git status --short` after build, specifically checking for `.tsbuildinfo`, generated JS twins, `dist/`, or `node_modules/`

## UX/safety assertions worth testing

- Home renders exactly/max four module cards and max five attention items.
- No tables or chart libraries in the first shell.
- Blocked MVP actions render as notices, not enabled buttons.
- Rendered UI text excludes forbidden field names and obvious secret/path sentinels.
- Desktop sidebar and mobile/iPad bottom navigation both exist.