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/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>
+  );
+}