feat(m0): bootstrap repo, design system, compose stack

- Repo scaffolding: .gitignore, .env.example, Makefile, docker-compose.yml,
  README.md, CHANGELOG.md, pre-commit config.
- Three-service stack: api (Flask 3), db (postgres:16-alpine), front (nginx
  serving the Vite bundle). Named volumes metamorph_db + metamorph_evidence.
- Backend skeleton: Flask app factory, JSON structured logging on stdout,
  GET /api/v1/health, multi-stage Dockerfile, pyproject.toml driven by uv,
  Pydantic Settings with secret guard rails (refuses to boot in non-dev with
  placeholders), APP_ENV gating.
- Frontend skeleton: Vite + React 18 + TypeScript strict + TailwindCSS, RTOps
  design tokens from tasks/design.md, self-hosted JetBrains Mono / IBM Plex
  Sans via @fontsource, base UI primitives (Card/Tag/SectionHeader/FlowNode/
  Button), home page wired to /api/v1/health.
- Engine-agnostic Makefile: auto-detects docker or podman, picks the matching
  compose driver. Targets: up/down/build/rebuild/dev/lint/fmt/test/migrate/
  seed-mitre/print-install-token/e2e/inspect-health.
- Playwright suite: e2e/tests/m0-smoke.spec.ts (8 tests) + HTML + JUnit
  reports + traces on retry.
- Docs: tasks/spec.md (finalized after Q&A), tasks/design.md, tasks/todo.md
  (14 milestones), tasks/testing-m0.md, tasks/lessons.md.

DoD: make up + make health + make e2e all pass on podman 5.x (Fedora) and
docker. TLS terminated by external reverse proxy (spec §6 NF-network).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -0,0 +1,85 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+
+import { Layout } from '@/components/Layout';
+import { RequireAdmin } from '@/components/RequireAdmin';
+import { RequireAuth } from '@/components/RequireAuth';
+import { AdminGroupsPage } from '@/pages/AdminGroupsPage';
+import { AdminInvitationsPage } from '@/pages/AdminInvitationsPage';
+import { AdminUsersPage } from '@/pages/AdminUsersPage';
+import { HomePage } from '@/pages/HomePage';
+import { LoginPage } from '@/pages/LoginPage';
+import { ProfilePage } from '@/pages/ProfilePage';
+import { RegisterPage } from '@/pages/RegisterPage';
+import { SetupPage } from '@/pages/SetupPage';
+import { AuthContext, useProvideAuth } from '@/lib/auth';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: 30_000,
+    },
+  },
+});
+
+function AuthProvider({ children }: { children: React.ReactNode }) {
+  const auth = useProvideAuth();
+  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AuthProvider>
+          <Routes>
+            <Route element={<Layout />}>
+              <Route path="/login" element={<LoginPage />} />
+              <Route path="/setup" element={<SetupPage />} />
+              <Route path="/register" element={<RegisterPage />} />
+              {/* Home page stays public — it's an ops dashboard, not sensitive. */}
+              <Route path="/" element={<HomePage />} />
+              <Route
+                path="/profile"
+                element={
+                  <RequireAuth>
+                    <ProfilePage />
+                  </RequireAuth>
+                }
+              />
+              <Route
+                path="/admin/users"
+                element={
+                  <RequireAdmin>
+                    <AdminUsersPage />
+                  </RequireAdmin>
+                }
+              />
+              <Route
+                path="/admin/groups"
+                element={
+                  <RequireAdmin>
+                    <AdminGroupsPage />
+                  </RequireAdmin>
+                }
+              />
+              <Route
+                path="/admin/invitations"
+                element={
+                  <RequireAdmin>
+                    <AdminInvitationsPage />
+                  </RequireAdmin>
+                }
+              />
+              <Route path="*" element={<Navigate to="/" replace />} />
+            </Route>
+          </Routes>
+        </AuthProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,45 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  accent?: Accent;
+  variant?: 'solid' | 'outline' | 'ghost';
+  children: ReactNode;
+}
+
+const ACCENT_OUTLINE: Record<Accent, string> = {
+  red: 'border-red text-red hover:bg-red/10',
+  orange: 'border-orange text-orange hover:bg-orange/10',
+  yellow: 'border-yellow text-yellow hover:bg-yellow/10',
+  green: 'border-green text-green hover:bg-green/10',
+  cyan: 'border-cyan text-cyan hover:bg-cyan/10',
+  blue: 'border-blue text-blue hover:bg-blue/10',
+  purple: 'border-purple text-purple hover:bg-purple/10',
+  pink: 'border-pink text-pink hover:bg-pink/10',
+  rose: 'border-rose text-rose hover:bg-rose/10',
+  teal: 'border-teal text-teal hover:bg-teal/10',
+};
+
+/** Minimal button matching the briefing aesthetic — no shadows, thin borders. */
+export function Button({
+  accent = 'cyan',
+  variant = 'outline',
+  className,
+  children,
+  ...rest
+}: ButtonProps) {
+  const base =
+    'inline-flex items-center justify-center rounded-md border px-3 py-2 font-mono text-xs font-medium uppercase tracking-wider2 disabled:opacity-50 disabled:pointer-events-none';
+  const variantCls =
+    variant === 'outline'
+      ? ACCENT_OUTLINE[accent]
+      : variant === 'ghost'
+        ? 'border-transparent text-text hover:bg-bg-card'
+        : 'border-transparent bg-bg-card text-text-bright';
+  return (
+    <button className={cn(base, variantCls, className)} {...rest}>
+      {children}
+    </button>
+  );
+}

frontend/src/components/ui/Card.tsx

@@ -0,0 +1,50 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Accent border color — distinguishes the card's category. */
+  accent?: Accent;
+  /** Card heading. Renamed from the native HTMLAttributes.title (string-only). */
+  title?: ReactNode;
+  /** Subtitle / metadata line below the title. */
+  sub?: ReactNode;
+  children?: ReactNode;
+}
+
+const ACCENT_BORDER: Record<Accent, string> = {
+  red: 'border-red',
+  orange: 'border-orange',
+  yellow: 'border-yellow',
+  green: 'border-green',
+  cyan: 'border-cyan',
+  blue: 'border-blue',
+  purple: 'border-purple',
+  pink: 'border-pink',
+  rose: 'border-rose',
+  teal: 'border-teal',
+};
+
+/** Card from design.md §5.3 — shared chrome, accent-only differentiation. */
+export function Card({ accent, title, sub, children, className, ...rest }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'bg-bg-card rounded-lg border p-5',
+        accent ? ACCENT_BORDER[accent] : 'border-border',
+        className,
+      )}
+      {...rest}
+    >
+      {title && (
+        <h3 className="font-mono text-sm font-semibold text-text-bright mb-1">{title}</h3>
+      )}
+      {sub && (
+        <div className="font-mono text-4xs uppercase tracking-wider2 text-text-dim mb-3">
+          {sub}
+        </div>
+      )}
+      {children && <div className="text-xs leading-[1.7]">{children}</div>}
+    </div>
+  );
+}

frontend/src/components/ui/FlowNode.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface FlowNodeProps {
+  accent?: Accent;
+  children: ReactNode;
+  className?: string;
+}
+
+const ACCENT_BORDER_TEXT: Record<Accent, string> = {
+  red: 'border-red text-red',
+  orange: 'border-orange text-orange',
+  yellow: 'border-yellow text-yellow',
+  green: 'border-green text-green',
+  cyan: 'border-cyan text-cyan',
+  blue: 'border-blue text-blue',
+  purple: 'border-purple text-purple',
+  pink: 'border-pink text-pink',
+  rose: 'border-rose text-rose',
+  teal: 'border-teal text-teal',
+};
+
+/** Flow node from design.md §5.5 — chained horizontally with arrows in flex rows. */
+export function FlowNode({ accent, children, className }: FlowNodeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-block bg-bg-card rounded-md border px-3 py-2 font-mono text-4xs whitespace-nowrap shrink-0',
+        accent ? ACCENT_BORDER_TEXT[accent] : 'border-border text-text',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

frontend/src/components/ui/SectionHeader.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface SectionHeaderProps {
+  /** Plain text leading the colored word. */
+  prefix?: string;
+  /** The single colored word in the title. */
+  highlight: string;
+  accent?: Accent;
+  description?: ReactNode;
+  className?: string;
+}
+
+const ACCENT_TEXT: Record<Accent, string> = {
+  red: 'text-red',
+  orange: 'text-orange',
+  yellow: 'text-yellow',
+  green: 'text-green',
+  cyan: 'text-cyan',
+  blue: 'text-blue',
+  purple: 'text-purple',
+  pink: 'text-pink',
+  rose: 'text-rose',
+  teal: 'text-teal',
+};
+
+/**
+ * Section header from design.md §5.2 — every h2 starts with a cyan `//`,
+ * a plain word, and exactly one colored word.
+ */
+export function SectionHeader({
+  prefix,
+  highlight,
+  accent = 'red',
+  description,
+  className,
+}: SectionHeaderProps) {
+  return (
+    <div className={cn('mt-[60px] mb-[30px]', className)}>
+      <h2 className="font-mono text-lg font-semibold text-text-bright pb-3 border-b border-border">
+        <span className="text-cyan">{'// '}</span>
+        {prefix && <span>{prefix} </span>}
+        <span className={ACCENT_TEXT[accent]}>{highlight}</span>
+      </h2>
+      {description && (
+        <p className="font-mono text-xs text-text-dim mt-2">{description}</p>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/Tag.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { cn, type Accent } from '@/lib/cn';
+
+interface TagProps {
+  accent: Accent;
+  children: ReactNode;
+  className?: string;
+}
+
+const ACCENT_FILL: Record<Accent, string> = {
+  red: 'accent-fill-red',
+  orange: 'accent-fill-orange',
+  yellow: 'accent-fill-yellow',
+  green: 'accent-fill-green',
+  cyan: 'accent-fill-cyan',
+  blue: 'accent-fill-blue',
+  purple: 'accent-fill-purple',
+  pink: 'accent-fill-pink',
+  rose: 'accent-fill-rose',
+  teal: 'accent-fill-teal',
+};
+
+/** Tag/pill from design.md §5.4 — 9px uppercase mono, tinted fill. */
+export function Tag({ accent, children, className }: TagProps) {
+  return (
+    <span
+      className={cn(
+        'inline-block rounded font-mono text-3xs font-semibold uppercase tracking-wider2 px-2 py-[3px] mr-1 mb-2',
+        ACCENT_FILL[accent],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,49 @@
+/* Self-hosted webfonts — no runtime CDN (cf. spec §7). */
+@import '@fontsource/jetbrains-mono/300.css';
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/jetbrains-mono/600.css';
+@import '@fontsource/jetbrains-mono/700.css';
+@import '@fontsource/ibm-plex-sans/300.css';
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+  body {
+    @apply bg-bg text-text font-sans;
+    line-height: 1.6;
+  }
+  /* No transitions / hovers / animations baseline (cf. design.md §7). */
+  *:focus-visible {
+    outline: 1px solid theme('colors.cyan');
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: rgb(6 182 212 / 0.25);
+    color: theme('colors.text-bright');
+  }
+}
+
+@layer utilities {
+  /* Tinted accent fill — see design.md §2 "tinted fills". */
+  .accent-fill-red    { background: rgb(239 68 68 / 0.15);   color: theme('colors.red'); }
+  .accent-fill-orange { background: rgb(245 158 11 / 0.15);  color: theme('colors.orange'); }
+  .accent-fill-yellow { background: rgb(234 179 8 / 0.15);   color: theme('colors.yellow'); }
+  .accent-fill-green  { background: rgb(16 185 129 / 0.15);  color: theme('colors.green'); }
+  .accent-fill-cyan   { background: rgb(6 182 212 / 0.15);   color: theme('colors.cyan'); }
+  .accent-fill-blue   { background: rgb(59 130 246 / 0.15);  color: theme('colors.blue'); }
+  .accent-fill-purple { background: rgb(139 92 246 / 0.15);  color: theme('colors.purple'); }
+  .accent-fill-pink   { background: rgb(236 72 153 / 0.15);  color: theme('colors.pink'); }
+  .accent-fill-rose   { background: rgb(244 63 94 / 0.15);   color: theme('colors.rose'); }
+  .accent-fill-teal   { background: rgb(20 184 166 / 0.15);  color: theme('colors.teal'); }
+}

frontend/src/lib/cn.ts

@@ -0,0 +1,19 @@
+/** Tiny classnames helper — keeps deps minimal. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}
+
+export const ACCENTS = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'purple',
+  'pink',
+  'rose',
+  'teal',
+] as const;
+
+export type Accent = (typeof ACCENTS)[number];

frontend/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from '@/App';
+import '@/index.css';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('#root not found in index.html');
+
+createRoot(root).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useState } from 'react';
+
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+import { FlowNode } from '@/components/ui/FlowNode';
+import { SectionHeader } from '@/components/ui/SectionHeader';
+import { Tag } from '@/components/ui/Tag';
+import { apiGet } from '@/lib/api';
+
+interface HealthResponse {
+  status: string;
+  version: string;
+}
+
+interface DbDiagResponse {
+  reachable: boolean;
+  alembic_revision?: string | null;
+  table_count?: number;
+  error?: string;
+}
+
+type HealthState =
+  | { kind: 'loading' }
+  | { kind: 'ok'; data: HealthResponse }
+  | { kind: 'error'; error: string };
+
+type DbState =
+  | { kind: 'loading' }
+  | { kind: 'ok'; data: DbDiagResponse }
+  | { kind: 'error'; error: string };
+
+export function HomePage() {
+  const [health, setHealth] = useState<HealthState>({ kind: 'loading' });
+  const [db, setDb] = useState<DbState>({ kind: 'loading' });
+
+  useEffect(() => {
+    let cancelled = false;
+    apiGet<HealthResponse>('/health', { anonymous: true })
+      .then((data) => !cancelled && setHealth({ kind: 'ok', data }))
+      .catch((err: unknown) =>
+        !cancelled &&
+        setHealth({ kind: 'error', error: err instanceof Error ? err.message : String(err) }),
+      );
+    apiGet<DbDiagResponse>('/diag/db', { anonymous: true })
+      .then((data) => !cancelled && setDb({ kind: 'ok', data }))
+      .catch((err: unknown) =>
+        !cancelled &&
+        setDb({ kind: 'error', error: err instanceof Error ? err.message : String(err) }),
+      );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      <header className="text-center mb-12">
+        <h1 className="font-mono text-[28px] font-bold tracking-tight text-text-bright">
+          <span className="text-red">Meta</span>
+          <span>morph</span>{' '}
+          <span className="text-purple">Purple Team Platform</span>
+        </h1>
+        <p className="font-mono text-sm font-light text-text-dim mt-2">
+          Collaborative red &amp; blue test orchestration — M3 milestone (RBAC)
+        </p>
+      </header>
+      <SectionHeader
+        prefix="System"
+        highlight="Health"
+        accent="cyan"
+        description="Live status pulled from /api/v1/health and /api/v1/diag/db."
+      />
+      <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(420px,1fr))]">
+        <Card
+          accent={health.kind === 'ok' ? 'green' : health.kind === 'error' ? 'red' : 'cyan'}
+          title="API"
+          sub={
+            health.kind === 'loading'
+              ? 'probing…'
+              : health.kind === 'error'
+                ? 'unreachable'
+                : `version ${health.data.version}`
+          }
+        >
+          {health.kind === 'loading' && <p>Waiting for the backend…</p>}
+          {health.kind === 'ok' && (
+            <p>
+              Status:{' '}
+              <code className="accent-fill-green px-2 py-[2px] rounded-sm font-mono text-4xs">
+                {health.data.status}
+              </code>
+            </p>
+          )}
+          {health.kind === 'error' && (
+            <p>
+              Error:{' '}
+              <code className="accent-fill-red px-2 py-[2px] rounded-sm font-mono text-4xs">
+                {health.error}
+              </code>
+            </p>
+          )}
+        </Card>
+
+        <Card
+          accent={db.kind === 'ok' && db.data.reachable ? 'blue' : db.kind === 'error' ? 'red' : 'cyan'}
+          title="Database"
+          sub={
+            db.kind === 'loading'
+              ? 'probing…'
+              : db.kind === 'error'
+                ? 'unreachable'
+                : db.data.reachable
+                  ? `revision ${db.data.alembic_revision?.slice(0, 8) ?? 'unknown'}`
+                  : 'unreachable'
+          }
+        >
+          {db.kind === 'ok' && db.data.reachable && (
+            <p>
+              Tables:{' '}
+              <code
+                className="accent-fill-blue px-2 py-[2px] rounded-sm font-mono text-4xs"
+                data-testid="db-table-count"
+              >
+                {db.data.table_count}
+              </code>{' '}
+              · Alembic head reached.
+            </p>
+          )}
+          {(db.kind === 'loading' || (db.kind === 'ok' && !db.data.reachable)) && (
+            <p>Querying schema metadata…</p>
+          )}
+          {db.kind === 'error' && (
+            <p>
+              Error:{' '}
+              <code className="accent-fill-red px-2 py-[2px] rounded-sm font-mono text-4xs">
+                {db.error}
+              </code>
+            </p>
+          )}
+        </Card>
+
+        <Card accent="purple" title="Roadmap" sub="14 milestones">
+          <p>
+            M0 + M1 + M2 + M3 done. Next:{' '}
+            <code className="accent-fill-cyan px-2 py-[2px] rounded-sm font-mono text-4xs">
+              M4 — MITRE ATT&amp;CK
+            </code>
+            .
+          </p>
+        </Card>
+      </div>
+
+      <SectionHeader
+        prefix="Design"
+        highlight="Tokens"
+        accent="orange"
+        description="Sanity check of the RTOps design system primitives (cf. tasks/design.md)."
+      />
+      <div className="mb-6">
+        <Tag accent="red">EVASION</Tag>
+        <Tag accent="purple">C2</Tag>
+        <Tag accent="cyan">LATERAL</Tag>
+        <Tag accent="orange">CRED</Tag>
+        <Tag accent="green">PHISH</Tag>
+        <Tag accent="teal">PERSIST</Tag>
+      </div>
+      <div className="flex items-center gap-1 flex-wrap py-3 mb-6">
+        <FlowNode accent="orange">recon</FlowNode>
+        <span className="text-text-dim font-mono text-2xs">→</span>
+        <FlowNode accent="green">phish</FlowNode>
+        <span className="text-text-dim font-mono text-2xs">→</span>
+        <FlowNode accent="purple">c2</FlowNode>
+        <span className="text-text-dim font-mono text-2xs">→</span>
+        <FlowNode accent="cyan">lateral</FlowNode>
+        <span className="text-text-dim font-mono text-2xs">→</span>
+        <FlowNode accent="red">impact</FlowNode>
+      </div>
+      <div className="flex gap-2">
+        <Button accent="cyan">Primary</Button>
+        <Button accent="red">Danger</Button>
+        <Button variant="ghost">Cancel</Button>
+      </div>
+    </>
+  );
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}