8a1dd58c83
- lib/mitre.ts: shared types (MitreTactic, Technique, Subtechnique, MitreTag kind/id/external_id/name) + TanStack query keys. - components/MitreTagPicker.tsx: three-column controlled picker (tactic → technique → subtechnique), multi-select with chip-removal, autocomplete on each column, ARIA labels for screen readers. Returns MitreTag[] via value/onChange — drop-in for M5 template forms. - pages/MitrePage.tsx: status card (version, source URL, last_sync), admin- gated Trigger Sync button with success/error alerts, picker showcase, JSON preview of the current selection. - Layout adds MITRE nav link for any logged-in user; App.tsx adds the /mitre route under RequireAuth. HomePage roadmap bumped to next: M5 templates. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Metamorph frontend
Vite + React 18 + TypeScript + TailwindCSS. Design tokens from ../tasks/design.md are in tailwind.config.ts.
Local dev
npm install
npm run dev # http://localhost:5173 (proxies /api/* to http://localhost:8000)
Build
npm run build # outputs to dist/
npm run preview # serves dist/ on http://localhost:8080
Quality
npm run typecheck
npm run lint
npm run format
Layout
src/
├── App.tsx # M0 home page (health check + design tokens demo)
├── main.tsx
├── index.css # Tailwind base + tinted-accent utilities
├── components/ui/ # RTOps design primitives: Card, Tag, SectionHeader, FlowNode, Button
├── lib/
│ ├── api.ts # fetch wrapper (M2 will replace with auth-aware client)
│ └── cn.ts # classnames + ACCENTS palette
└── vite-env.d.ts